refactor: add createOffscreenDocument and its createElement method

.changeset/tender-bikes-raise.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+---
+
+refractor: improve some internal logic for element creating in MTS

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

@@ -35,10 +35,6 @@ export interface CreateOperation extends ElementOperationBase {
   type: OperationType.Create;
   tag: string;
   cssId?: number;
-  /**
-   * parent component unique id
-   */
-  puid: string;
 }
 
 export interface SetAttributeOperation extends ElementOperationBase {

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

@@ -13,7 +13,6 @@ import {
   LynxEventNameToW3cByTagName,
   LynxEventNameToW3cCommon,
   W3cEventNameToLynx,
-  parentComponentUniqueIdAttribute,
   __lynx_timing_flag,
 } from '@lynx-js/web-constants';
 
@@ -110,9 +109,6 @@ export function decodeElementOperation<
       if (typeof op.cssId === 'number') {
         element.setAttribute(cssIdAttribute, op.cssId.toString());
       }
-      if (op.puid) {
-        element.setAttribute(parentComponentUniqueIdAttribute, op.puid);
-      }
       if (op.tag === 'page') pageElement = element;
     } else {
       const target = getElement(op.uid, uniqueIdToElement);

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

@@ -79,10 +79,10 @@ export class ElementThreadElement {
   };
   public children: ElementThreadElement[] = [];
   public parent?: ElementThreadElement;
+  // public parentComponentUniqueId!: number;
   constructor(
     public tag: string,
     public uniqueId: number,
-    public parentComponentUniqueId: number,
     public readonly pageConfig: PageConfig,
     private operationsRef: {
       operations: ElementOperation[];
@@ -99,7 +99,6 @@ export class ElementThreadElement {
       type: OperationType.Create,
       uid: uniqueId,
       tag: tag,
-      puid: parentComponentUniqueId.toString(),
     });
   }
   setProperty(key: string, value: any) {

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

@@ -0,0 +1,44 @@
+import type {
+  CssInJsInfo,
+  ElementOperation,
+  PageConfig,
+} from '@lynx-js/web-constants';
+import { ListElement, ElementThreadElement } from './ElementThreadElement.js';
+
+interface OffscreenDocument {
+  createElement(tagName: string): ElementThreadElement;
+}
+
+export function createOffscreenDocument(options: {
+  pageConfig: PageConfig;
+  styleInfo: CssInJsInfo;
+  operationsRef: {
+    operations: ElementOperation[];
+  };
+}): OffscreenDocument {
+  const { pageConfig, styleInfo, operationsRef } = options;
+  let incrementalUniqueId = 0;
+  function createElement(tagName: string): ElementThreadElement {
+    const uniqueId = incrementalUniqueId++;
+    if (tagName === 'list') {
+      return new ListElement(
+        tagName,
+        uniqueId,
+        pageConfig,
+        operationsRef,
+        styleInfo,
+      );
+    } else {
+      return new ElementThreadElement(
+        tagName,
+        uniqueId,
+        pageConfig,
+        operationsRef,
+        styleInfo,
+      );
+    }
+  }
+  return {
+    createElement,
+  };
+}

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

@@ -6,6 +6,7 @@ import {
   type ElementOperation,
   cssIdAttribute,
   type CssInJsInfo,
+  parentComponentUniqueIdAttribute,
 } from '@lynx-js/web-constants';
 import { __UpdateComponentID } from '../attributeAndProperty/attributeAndPropertyFunctions.js';
 import {
@@ -15,6 +16,7 @@ import {
   ElementThreadElement,
 } from '../ElementThreadElement.js';
 import { __SetCSSId } from '../style/styleFunctions.js';
+import { createOffscreenDocument } from '../createOffscreenDocument.js';
 
 export interface initializeElementCreatingFunctionConfig {
   operationsRef: {
@@ -28,9 +30,13 @@ export interface initializeElementCreatingFunctionConfig {
 export function initializeElementCreatingFunction(
   config: initializeElementCreatingFunctionConfig,
 ) {
-  let incrementalUniqueId = 0;
   const tagSet = new Set<string>();
   const { operationsRef, pageConfig, styleInfo } = config;
+  const document = createOffscreenDocument({
+    pageConfig,
+    operationsRef,
+    styleInfo,
+  });
   function createLynxElement(
     tag: Exclude<string, 'list'>,
     parentComponentUniqueId: number,
@@ -57,14 +63,11 @@ export function initializeElementCreatingFunction(
       config.onNewTag(tag);
       tagSet.add(tag);
     }
-    const uniqueId = incrementalUniqueId++;
-    const element = new (tag === 'list' ? ListElement : ElementThreadElement)(
-      tag,
-      uniqueId,
-      parentComponentUniqueId,
-      pageConfig,
-      operationsRef,
-      styleInfo,
+    const element = document.createElement(tag);
+    // element.parentComponentUniqueId = parentComponentUniqueId;
+    element.setAttribute(
+      parentComponentUniqueIdAttribute,
+      parentComponentUniqueId.toString(),
     );
     if (cssId !== undefined) __SetCSSId([element], cssId);
     else if (parentComponentUniqueId >= 0) { // don't infer for uniqueid === -1
@@ -125,7 +128,10 @@ export function initializeElementCreatingFunction(
     info: Record<string, any> | null | undefined,
   ) {
     const page = createLynxElement('page', 0, cssID, componentID, info);
-    page.parentComponentUniqueId = page.uniqueId;
+    page.setAttribute(
+      parentComponentUniqueIdAttribute,
+      page.uniqueId.toString(),
+    );
     return page;
   }