refactor: remove customelement defined detecting logic

.changeset/plenty-apes-heal.md

@@ -0,0 +1,14 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-worker-runtime": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+---
+
+refactor: remove customelement defined detecting logic
+
+Before this commit, for those element with tag without `-`, we always try to detect if the `x-${tagName}` is defined.
+
+After this commit, we pre-define a map(could be override by the `overrideLynxTagToHTMLTagMap`) to make that transformation for tag name.
+
+This change is a path to SSR and the MTS support.

packages/web-platform/web-constants/src/types/MainThreadStartConfigs.ts

@@ -15,4 +15,5 @@ export interface MainThreadStartConfigs {
   browserConfig: BrowserConfig;
   nativeModulesMap: NativeModulesMap;
   napiModulesMap: NapiModulesMap;
+  tagMap: Record<string, string>;
 }

packages/web-platform/web-core/src/apis/LynxView.ts

@@ -358,7 +358,17 @@ export class LynxView extends HTMLElement {
           const rootDom = document.createElement('div');
           rootDom.id = lynxViewRootDomId;
           rootDom.setAttribute('part', lynxViewRootDomId);
+          const tagMap = {
+            'page': 'div',
+            'view': 'x-view',
+            'text': 'x-text',
+            'image': 'x-image',
+            'list': 'x-list',
+            'svg': 'x-svg',
+            ...this.overrideLynxTagToHTMLTagMap,
+          };
           const lynxView = createLynxView({
+            tagMap,
             rootDom,
             templateUrl: this.#url,
             globalProps: this.#globalProps,

packages/web-platform/web-core/src/apis/createLynxView.ts

@@ -19,6 +19,7 @@ export interface LynxViewConfigs {
   overrideLynxTagToHTMLTagMap?: Record<string, string>;
   nativeModulesMap: NativeModulesMap;
   napiModulesMap: NapiModulesMap;
+  tagMap: Record<string, string>;
 }
 
 export interface LynxView {
@@ -41,10 +42,12 @@ export function createLynxView(configs: LynxViewConfigs): LynxView {
     overrideLynxTagToHTMLTagMap,
     nativeModulesMap,
     napiModulesMap,
+    tagMap,
   } = configs;
   return startUIThread(
     templateUrl,
     {
+      tagMap,
       initData,
       globalProps,
       nativeModulesMap,

packages/web-platform/web-core/src/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.ts

@@ -17,7 +17,6 @@ import {
 import type { Rpc } from '@lynx-js/web-worker-rpc';
 import type { RuntimePropertyOnElement } from '../../types/RuntimePropertyOnElement.js';
 import { decodeElementOperation } from '../decodeElementOperation.js';
-import { getElementTag } from '../getElementTag.js';
 import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
 
 function applyPageAttributes(
@@ -51,7 +50,6 @@ export function registerFlushElementTreeHandler(
 ) {
   const {
     pageConfig,
-    overrideTagMap,
     backgroundRpc,
     rootDom,
   } = options;
@@ -66,8 +64,7 @@ export function registerFlushElementTreeHandler(
     rootDom.append(rootStyleElementForCssInJs);
   }
   const createElementImpl = (tag: string) => {
-    const htmlTag = getElementTag(tag, overrideTagMap);
-    const element = document.createElement(htmlTag) as
+    const element = document.createElement(tag) as
       & HTMLElement
       & RuntimePropertyOnElement;
     element[lynxRuntimeValue] = {

packages/web-platform/web-core/src/uiThread/decodeElementOperation.ts

@@ -6,14 +6,14 @@ import type { ElementOperation } from '@lynx-js/web-constants';
 import type { RuntimePropertyOnElement } from '../types/RuntimePropertyOnElement.js';
 import {
   cssIdAttribute,
-  lynxTagAttribute,
   lynxUniqueIdAttribute,
   OperationType,
   lynxRuntimeValue,
   LynxEventNameToW3cByTagName,
   LynxEventNameToW3cCommon,
   W3cEventNameToLynx,
   __lynx_timing_flag,
+  lynxTagAttribute,
 } from '@lynx-js/web-constants';
 
 function getElement<T extends HTMLElement & RuntimePropertyOnElement>(
@@ -44,10 +44,6 @@ function createElement<T extends HTMLElement & RuntimePropertyOnElement>(
   }
   const element = createElementImpl(tag);
   element.setAttribute(lynxUniqueIdAttribute, uniqueId.toString());
-  element.setAttribute(lynxTagAttribute, tag);
-  if (tag === 'page') {
-    element.setAttribute('part', tag);
-  }
   uniqueIdToElement[uniqueId] = new WeakRef(element);
   return element;
 }
@@ -112,7 +108,6 @@ export function decodeElementOperation<
       if (typeof op.cssId === 'number') {
         element.setAttribute(cssIdAttribute, op.cssId.toString());
       }
-      if (op.tag === 'page') pageElement = element;
     } else {
       const target = getElement(op.uid, uniqueIdToElement);
       switch (op.type) {
@@ -156,6 +151,9 @@ export function decodeElementOperation<
               if (op.value && op.key === __lynx_timing_flag) {
                 timingFlags.push(op.value);
               }
+              if (op.key === lynxTagAttribute && op.value === 'page') {
+                pageElement = target;
+              }
             }
           }
           break;

packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts

@@ -48,6 +48,7 @@ export interface MainThreadConfig {
   customSections: LynxTemplate['customSections'];
   lepusCode: LynxTemplate['lepusCode'];
   browserConfig: BrowserConfig;
+  tagMap: Record<string, string>;
 }
 
 export class MainThreadRuntime {
@@ -78,6 +79,7 @@ export class MainThreadRuntime {
         operationsRef: this.operationsRef,
         pageConfig: config.pageConfig,
         styleInfo: cssInJs,
+        tagMap: config.tagMap,
       }),
     );
     this.__LoadLepusChunk = (path) => {

packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts

@@ -2,7 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import { componentIdAttribute } from '@lynx-js/web-constants';
+import { componentIdAttribute, lynxTagAttribute } from '@lynx-js/web-constants';
 import {
   type ElementThreadElement,
   type ComponentAtIndexCallback,
@@ -71,7 +71,7 @@ export function __GetID(element: ElementThreadElement): string {
 }
 
 export function __GetTag(element: ElementThreadElement): string {
-  return element.tag;
+  return element.getAttribute(lynxTagAttribute)!;
 }
 
 export function __SetAttribute(

packages/web-platform/web-mainthread-apis/src/elementAPI/createOffscreenDocument.ts

@@ -20,7 +20,7 @@ export function createOffscreenDocument(options: {
   let incrementalUniqueId = 0;
   function createElement(tagName: string): ElementThreadElement {
     const uniqueId = incrementalUniqueId++;
-    if (tagName === 'list') {
+    if (tagName === 'x-list') {
       return new ListElement(
         tagName,
         uniqueId,

packages/web-platform/web-mainthread-apis/src/elementAPI/elementCreating/elementCreatingFunctions.ts

@@ -7,6 +7,7 @@ import {
   cssIdAttribute,
   type CssInJsInfo,
   parentComponentUniqueIdAttribute,
+  lynxTagAttribute,
 } from '@lynx-js/web-constants';
 import { __UpdateComponentID } from '../attributeAndProperty/attributeAndPropertyFunctions.js';
 import {
@@ -24,12 +25,13 @@ export interface initializeElementCreatingFunctionConfig {
   };
   pageConfig: PageConfig;
   styleInfo: CssInJsInfo;
+  tagMap: Record<string, string>;
 }
 
 export function initializeElementCreatingFunction(
   config: initializeElementCreatingFunctionConfig,
 ) {
-  const { operationsRef, pageConfig, styleInfo } = config;
+  const { operationsRef, pageConfig, styleInfo, tagMap } = config;
   const document = createOffscreenDocument({
     pageConfig,
     operationsRef,
@@ -57,7 +59,9 @@ export function initializeElementCreatingFunction(
     // @ts-expect-error
     info?: Record<string, any> | null | undefined,
   ) {
-    const element = document.createElement(tag);
+    const htmlTag = tagMap[tag] ?? tag;
+    const element = document.createElement(htmlTag);
+    element.setAttribute(lynxTagAttribute, tag);
     // element.parentComponentUniqueId = parentComponentUniqueId;
     element.setAttribute(
       parentComponentUniqueIdAttribute,
@@ -122,6 +126,7 @@ export function initializeElementCreatingFunction(
     info: Record<string, any> | null | undefined,
   ) {
     const page = createLynxElement('page', 0, cssID, componentID, info);
+    page.setAttribute('part', 'page');
     page.setAttribute(
       parentComponentUniqueIdAttribute,
       page.uniqueId.toString(),

packages/web-platform/web-tests/shell-project/mainthread-test.ts

@@ -37,15 +37,15 @@ function serializeDomElement(element: Element): CompareableElementJson {
   }
   const parentUid = element?.parentElement?.getAttribute('lynx-unique-id');
   return {
-    tag: element.getAttribute('lynx-tag')!,
+    tag: element.tagName.toLowerCase(),
     children: [...element.children].map(e => serializeDomElement(e)),
     parentUid: parentUid ? parseFloat(parentUid) : undefined,
   };
 }
 
 function genFiberElementTree() {
   const page = ElementThreadElement.uniqueIdToElement[0]?.deref();
-  if (page?.tag === 'page') {
+  if (page?.getAttribute('lynx-tag') === 'page') {
     return serializeElementThreadElement(page);
   } else {
     return {};
@@ -66,6 +66,14 @@ function getElementThreadElements() {
 
 function initializeMainThreadTest() {
   const runtime = new MainThreadRuntime({
+    tagMap: {
+      'page': 'div',
+      'view': 'x-view',
+      'text': 'x-text',
+      'image': 'x-image',
+      'list': 'x-list',
+      'svg': 'x-svg',
+    },
     lepusCode: { root: '' },
     customSections: {},
     browserConfig: {},
@@ -87,8 +95,7 @@ function initializeMainThreadTest() {
             uniqueIdToElement,
             uniqueIdToCssInJsRule: [],
             createElementImpl: (tag: string) => {
-              const htmlTag = tag.includes('-') ? tag : `x-${tag}`;
-              const element = document.createElement(htmlTag) as
+              const element = document.createElement(tag) as
                 & HTMLDivElement
                 & RuntimePropertyOnElement;
               element[lynxRuntimeValue] = {

packages/web-platform/web-worker-runtime/src/mainThread/startMainThread.ts

@@ -45,6 +45,7 @@ export function startMainThread(
         browserConfig,
         nativeModulesMap,
         napiModulesMap,
+        tagMap,
       } = config;
       const { styleInfo, pageConfig, customSections, cardType, lepusCode } =
         template;
@@ -54,6 +55,7 @@ export function startMainThread(
       );
       const entry = (globalThis.module as LynxJSModule).exports!;
       const runtime = new MainThreadRuntime({
+        tagMap,
         browserConfig,
         customSections,
         globalProps,