refactor: move some internal status to dom's attribute

.changeset/busy-suits-build.md

@@ -0,0 +1,10 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+"@lynx-js/web-core-server": patch
+---
+
+refactor: move some internal status to dom's attribute
+
+It's essential for SSR

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

@@ -2,11 +2,13 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-export const lynxUniqueIdAttribute = 'lynx-unique-id' as const;
+export const lynxUniqueIdAttribute = 'l-uid' as const;
 
-export const cssIdAttribute = 'lynx-css-id' as const;
+export const cssIdAttribute = 'l-css-id' as const;
 
-export const componentIdAttribute = 'lynx-component-id' as const;
+export const componentIdAttribute = 'l-comp-id' as const;
+
+export const parentComponentUniqueIdAttribute = 'l-p-comp-uid' as const;
 
 export const lynxTagAttribute = 'lynx-tag' as const;
 

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

@@ -66,7 +66,6 @@ export interface MainThreadRuntimeConfig {
 }
 
 export const elementToRuntimeInfoMap = Symbol('elementToRuntimeInfoMap');
-export const getElementByUniqueId = Symbol('getElementByUniqueId');
 export const updateCSSInJsStyle = Symbol('updateCSSInJsStyle');
 export const lynxUniqueIdToElement = Symbol('lynxUniqueIdToElement');
 export const switchExposureService = Symbol('switchExposureService');
@@ -187,12 +186,6 @@ export class MainThreadRuntime {
       });
     }
   }
-  /**
-   * @private
-   */
-  [getElementByUniqueId](uniqueId: number): HTMLElement | undefined {
-    return this[lynxUniqueIdToElement][uniqueId]?.deref();
-  }
 
   [updateCSSInJsStyle](uniqueId: number, newStyles: string) {
     let currentElement = this._lynxUniqueIdToStyleSheet[uniqueId]?.deref();

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

@@ -5,7 +5,6 @@ import type { LynxEventType, Cloneable } from '@lynx-js/web-constants';
 
 export interface LynxRuntimeInfo {
   uniqueId: number;
-  parentComponentUniqueId: number;
   componentConfig: Record<string, Cloneable>;
   lynxDataset: Record<string, Cloneable>;
   eventHandlerMap: Record<string, {

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

@@ -6,6 +6,7 @@ import {
   lynxUniqueIdAttribute,
   lynxTagAttribute,
   lynxDefaultDisplayLinearAttribute,
+  parentComponentUniqueIdAttribute,
 } from '@lynx-js/web-constants';
 import {
   type ComponentAtIndexCallback,
@@ -14,7 +15,6 @@ import {
 } from '../ElementThreadElement.js';
 import {
   elementToRuntimeInfoMap,
-  getElementByUniqueId,
   lynxUniqueIdToElement,
   type MainThreadRuntime,
 } from '../../MainThreadRuntime.js';
@@ -47,16 +47,19 @@ export function initializeElementCreatingFunction(
       componentConfig: {},
       lynxDataset: {},
       eventHandlerMap: {},
-      parentComponentUniqueId,
     };
     runtime[elementToRuntimeInfoMap].set(element, runtimeInfo);
     runtime[lynxUniqueIdToElement][uniqueId] = new WeakRef(element);
     element.setAttribute(lynxUniqueIdAttribute, uniqueId.toString());
+    element.setAttribute(
+      parentComponentUniqueIdAttribute,
+      parentComponentUniqueId.toString(),
+    );
     if (cssId !== undefined) __SetCSSId([element], cssId);
     else if (parentComponentUniqueId >= 0) { // don't infer for uniqueid === -1
-      const parentComponent = runtime[getElementByUniqueId](
-        parentComponentUniqueId,
-      );
+      const parentComponent =
+        runtime[lynxUniqueIdToElement][parentComponentUniqueId]
+          ?.deref();
       const parentCssId = parentComponent?.getAttribute(cssIdAttribute);
       if (parentCssId && parentCssId !== '0') {
         __SetCSSId([element], parentCssId);
@@ -113,8 +116,7 @@ export function initializeElementCreatingFunction(
   ) {
     const page = createLynxElement('page', 0, cssID, componentID, info);
     page.setAttribute('part', 'page');
-    const runtimeInfo = runtime[elementToRuntimeInfoMap].get(page)!;
-    runtimeInfo.parentComponentUniqueId = runtimeInfo.uniqueId;
+    page.setAttribute(parentComponentUniqueIdAttribute, '0');
     if (runtime.config.pageConfig.defaultDisplayLinear === false) {
       page.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
     }

packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts

@@ -6,13 +6,14 @@ import {
   LynxEventNameToW3cByTagName,
   LynxEventNameToW3cCommon,
   lynxTagAttribute,
+  parentComponentUniqueIdAttribute,
   W3cEventNameToLynx,
   type LynxEventType,
   type MainThreadScriptEvent,
 } from '@lynx-js/web-constants';
 import {
   elementToRuntimeInfoMap,
-  getElementByUniqueId,
+  lynxUniqueIdToElement,
   type MainThreadRuntime,
 } from '../../MainThreadRuntime.js';
 import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
@@ -37,10 +38,11 @@ export function createEventFunctions(runtime: MainThreadRuntime) {
       lynxEventName,
     );
     if (typeof hname === 'string') {
-      const parentComponentUniqueId = runtimeInfo.parentComponentUniqueId;
-      const parentComponent = runtime[getElementByUniqueId](
-        Number(parentComponentUniqueId),
-      )!;
+      const parentComponentUniqueId = Number(
+        currentTarget.getAttribute(parentComponentUniqueIdAttribute)!,
+      );
+      const parentComponent =
+        runtime[lynxUniqueIdToElement][parentComponentUniqueId]!.deref()!;
       const componentId =
         parentComponent?.getAttribute(lynxTagAttribute) !== 'page'
           ? parentComponent?.getAttribute(componentIdAttribute) ?? undefined

packages/web-platform/web-mainthread-apis/src/utils/createCrossThreadEvent.ts

@@ -1,10 +1,10 @@
 // Copyright 2023 The Lynx Authors. All rights reserved.
 // 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 type {
-  Cloneable,
-  CloneableObject,
-  LynxCrossThreadEvent,
+import {
+  type Cloneable,
+  type CloneableObject,
+  type LynxCrossThreadEvent,
 } from '@lynx-js/web-constants';
 import {
   elementToRuntimeInfoMap,

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

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 
 import {
-  getElementByUniqueId,
+  lynxUniqueIdToElement,
   MainThreadRuntime,
 } from '@lynx-js/web-mainthread-apis';
 import { initOffscreenDocument } from '@lynx-js/offscreen-document/main';
@@ -15,6 +15,10 @@ import type {
   ElementOperation,
   OffscreenElement,
 } from '@lynx-js/offscreen-document';
+import {
+  lynxTagAttribute,
+  lynxUniqueIdAttribute,
+} from '@lynx-js/web-constants';
 
 type ComparableElementJson = {
   tag: string;
@@ -63,16 +67,17 @@ function serializeDomElement(element: Element): ComparableElementJson {
       attributes[attr.name] = attr.value;
     }
   }
-  const parentUid = element?.parentElement?.getAttribute('lynx-unique-id');
+  const parentUid = element?.parentElement?.getAttribute(lynxUniqueIdAttribute);
   return {
-    tag: element.getAttribute('lynx-tag')!,
+    tag: element.getAttribute(lynxTagAttribute)!,
     children: [...element.children].map(e => serializeDomElement(e)),
     parentUid: parentUid ? parseFloat(parentUid) : undefined,
   };
 }
 
 function genFiberElementTree() {
-  const page = runtime[getElementByUniqueId](1) as unknown as OffscreenElement;
+  const page = runtime[lynxUniqueIdToElement][1]
+    .deref() as unknown as OffscreenElement;
   if (runtime.__GetTag(page) === 'page') {
     return serializeElementThreadElement(page);
   } else {