diff --git a/.changeset/hot-crabs-pick.md b/.changeset/hot-crabs-pick.md new file mode 100644 index 0000000000..62eed82698 --- /dev/null +++ b/.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 diff --git a/packages/web-platform/web-constants/src/endpoints.ts b/packages/web-platform/web-constants/src/endpoints.ts index 076683623c..9243fbdfad 100644 --- a/packages/web-platform/web-constants/src/endpoints.ts +++ b/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); diff --git a/packages/web-platform/web-core/src/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.ts b/packages/web-platform/web-core/src/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.ts index f231080b7e..451a9823e0 100644 --- a/packages/web-platform/web-core/src/uiThread/crossThreadHandlers/registerFlushElementTreeHandler.ts +++ b/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, diff --git a/packages/web-platform/web-core/src/uiThread/decodeElementOperation.ts b/packages/web-platform/web-core/src/uiThread/decodeElementOperation.ts index b77b0db0d4..14fca7d4c8 100644 --- a/packages/web-platform/web-core/src/uiThread/decodeElementOperation.ts +++ b/packages/web-platform/web-core/src/uiThread/decodeElementOperation.ts @@ -73,7 +73,6 @@ export function decodeElementOperation< >( operations: ElementOperation[], options: { - timingFlags: string[]; uniqueIdToElement: (WeakRef | undefined)[]; uniqueIdToCssInJsRule: (WeakRef | 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; } diff --git a/packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts b/packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts index 3f7891011b..328473ba30 100644 --- a/packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts +++ b/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; }; diff --git a/packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts b/packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts index a9cf841bf4..5087cce92c 100644 --- a/packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/attributeAndPropertyFunctions.ts +++ b/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, @@ -104,7 +96,7 @@ export function __UpdateComponentID( element: ElementThreadElement, componentID: string, ) { - __SetAttribute(element, componentIdAttribute, componentID); + element.setAttribute(componentIdAttribute, componentID); } export function __GetConfig( diff --git a/packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.ts b/packages/web-platform/web-mainthread-apis/src/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.ts new file mode 100644 index 0000000000..67434ad734 --- /dev/null +++ b/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, + }; +}