refactor: clean the decodeOperations implementation

.changeset/hot-crabs-pick.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+---
+
+refactor: clean the decodeOperations implementation

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

@@ -123,6 +123,7 @@ export const flushElementTreeEndpoint = createRpcEndpoint<
     operations: ElementOperation[],
     FlushElementTreeOptions,
     styleContent: string | undefined,
+    timingFlags: string[],
   ],
   void
 >('flushElementTree', false, true);

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

@@ -116,15 +116,13 @@ export function registerFlushElementTreeHandler(
   };
   mainThreadRpc.registerHandler(
     endpoint,
-    (operations, options, cardCss) => {
+    (operations, options, cardCss, timingFlags) => {
       const { pipelineOptions } = options;
       const pipelineId = pipelineOptions?.pipelineID;
-      const timingFlags: string[] = [];
       markTimingInternal('dispatch_start', pipelineId);
       markTimingInternal('layout_start', pipelineId);
       markTimingInternal('ui_operation_flush_start', pipelineId);
       const page = decodeElementOperation(operations, {
-        timingFlags,
         uniqueIdToElement,
         uniqueIdToCssInJsRule,
         createElementImpl,

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

@@ -73,7 +73,6 @@ export function decodeElementOperation<
 >(
   operations: ElementOperation[],
   options: {
-    timingFlags: string[];
     uniqueIdToElement: (WeakRef<T> | undefined)[];
     uniqueIdToCssInJsRule: (WeakRef<CSSStyleRule> | undefined)[];
     createElementImpl: (tag: string) => T;
@@ -93,7 +92,6 @@ export function decodeElementOperation<
     createElementImpl,
     createStyleRuleImpl,
     eventHandler,
-    timingFlags,
   } = options;
   let pageElement: T | undefined;
 
@@ -148,9 +146,6 @@ export function decodeElementOperation<
               target.removeAttribute(op.key);
             } else {
               target.setAttribute(op.key, op.value);
-              if (op.value && op.key === __lynx_timing_flag) {
-                timingFlags.push(op.value);
-              }
               if (op.key === lynxTagAttribute && op.value === 'page') {
                 pageElement = target;
               }

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

@@ -27,13 +27,15 @@ import {
   genCssInJsInfo,
   transformToWebCss,
 } from './utils/processStyleInfo.js';
+import { createAttributeAndPropertyFunctionsWithContext } from './elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js';
 
 export interface MainThreadRuntimeCallbacks {
   mainChunkReady: () => void;
   flushElementTree: (
     operations: ElementOperation[],
     options: FlushElementTreeOptions,
-    styleContent?: string,
+    styleContent: string | undefined,
+    timingFlags: string[],
   ) => void;
   _ReportError: (error: Error, info?: unknown) => void;
   __OnLifecycleEvent: (lynxLifecycleEvents: LynxLifecycleEvent) => void;
@@ -54,6 +56,11 @@ export interface MainThreadConfig {
 export class MainThreadRuntime {
   private isFp = true;
 
+  /**
+   * @private
+   */
+  _timingFlags: string[] = [];
+
   public operationsRef: {
     operations: ElementOperation[];
   } = {
@@ -71,6 +78,7 @@ export class MainThreadRuntime {
       : genCssInJsInfo(this.config.styleInfo);
     Object.assign(
       this,
+      createAttributeAndPropertyFunctionsWithContext(this),
       attributeAndPropertyApis,
       domTreeApis,
       eventApis,
@@ -146,7 +154,9 @@ export class MainThreadRuntime {
     options: FlushElementTreeOptions,
   ) => {
     const operations = this.operationsRef.operations;
+    const timingFlags = this._timingFlags;
     this.operationsRef.operations = [];
+    this._timingFlags = [];
     this.config.callbacks.flushElementTree(
       operations,
       options,
@@ -156,6 +166,7 @@ export class MainThreadRuntime {
           this.config.pageConfig,
         )
         : undefined,
+      timingFlags,
     );
     this.isFp = false;
   };

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

@@ -74,14 +74,6 @@ export function __GetTag(element: ElementThreadElement): string {
   return element.getAttribute(lynxTagAttribute)!;
 }
 
-export function __SetAttribute(
-  element: ElementThreadElement,
-  key: string,
-  value: string | null | undefined,
-): void {
-  element.setAttribute(key, value ?? null);
-}
-
 export function __SetConfig(
   element: ElementThreadElement,
   config: Record<string, any>,
@@ -104,7 +96,7 @@ export function __UpdateComponentID(
   element: ElementThreadElement,
   componentID: string,
 ) {
-  __SetAttribute(element, componentIdAttribute, componentID);
+  element.setAttribute(componentIdAttribute, componentID);
 }
 
 export function __GetConfig(

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

@@ -0,0 +1,22 @@
+import { __lynx_timing_flag } from '@lynx-js/web-constants';
+import type { MainThreadRuntime } from '../../MainThreadRuntime.js';
+import type { ElementThreadElement } from '../ElementThreadElement.js';
+
+export function createAttributeAndPropertyFunctionsWithContext(
+  runtime: MainThreadRuntime,
+) {
+  function __SetAttribute(
+    element: ElementThreadElement,
+    key: string,
+    value: string | null | undefined,
+  ): void {
+    element.setAttribute(key, value ?? null);
+    if (key === __lynx_timing_flag && value) {
+      runtime._timingFlags.push(value);
+    }
+  }
+
+  return {
+    __SetAttribute,
+  };
+}