@lynx-js/react 0.110.1 → 0.111.1

package/runtime/src/lifecycle/patch/commit.ts

@@ -23,13 +23,7 @@ import type { VNode } from 'preact';
 import { options } from 'preact';
 
 import { LifecycleConstant } from '../../lifecycleConstant.js';
-import {
-  PerformanceTimingKeys,
-  globalPipelineOptions,
-  markTiming,
-  markTimingLegacy,
-  setPipeline,
-} from '../../lynx/performance.js';
+import { globalPipelineOptions, markTiming, markTimingLegacy, setPipeline } from '../../lynx/performance.js';
 import { COMMIT } from '../../renderToOpcodes/constants.js';
 import { applyQueuedRefs } from '../../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../../snapshot.js';
@@ -88,8 +82,8 @@ function replaceCommitHook(): void {
     }
 
     // Mark the end of virtual DOM diffing phase for performance tracking
-    markTimingLegacy(PerformanceTimingKeys.updateDiffVdomEnd);
-    markTiming(PerformanceTimingKeys.diffVdomEnd);
+    markTimingLegacy('updateDiffVdomEnd');
+    markTiming('diffVdomEnd');
 
     const backgroundSnapshotInstancesToRemove = globalBackgroundSnapshotInstancesToRemove;
     globalBackgroundSnapshotInstancesToRemove = [];
@@ -167,7 +161,7 @@ function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions
   if (__PROFILE__) {
     console.profile('commitChanges');
   }
-  markTiming(PerformanceTimingKeys.packChangesStart);
+  markTiming('packChangesStart');
   const obj: {
     data: string;
     patchOptions: PatchOptions;
@@ -178,7 +172,7 @@ function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions
       reloadVersion: getReloadVersion(),
     },
   };
-  markTiming(PerformanceTimingKeys.packChangesEnd);
+  markTiming('packChangesEnd');
   if (globalPipelineOptions) {
     obj.patchOptions.pipelineOptions = globalPipelineOptions;
     setPipeline(undefined);

package/runtime/src/lifecycle/patch/snapshotPatch.ts

@@ -8,16 +8,16 @@
  * efficient transmission between threads and application to element tree.
  */
 
-export const enum SnapshotOperation {
-  CreateElement,
-  InsertBefore,
-  RemoveChild,
-  SetAttribute,
-  SetAttributes,
+export const SnapshotOperation = {
+  CreateElement: 0,
+  InsertBefore: 1,
+  RemoveChild: 2,
+  SetAttribute: 3,
+  SetAttributes: 4,
 
-  DEV_ONLY_AddSnapshot = 100,
-  DEV_ONLY_RegisterWorklet = 101,
-}
+  DEV_ONLY_AddSnapshot: 100,
+  DEV_ONLY_RegisterWorklet: 101,
+} as const;
 
 // Operation format definitions:
 //

package/runtime/src/lifecycle/patch/updateMainThread.ts

@@ -8,7 +8,7 @@ import type { PatchList, PatchOptions } from './commit.js';
 import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
 import { LifecycleConstant } from '../../lifecycleConstant.js';
-import { PerformanceTimingKeys, markTiming, setPipeline } from '../../lynx/performance.js';
+import { markTiming, setPipeline } from '../../lynx/performance.js';
 import { __pendingListUpdates } from '../../pendingListUpdates.js';
 import { applyRefQueue } from '../../snapshot/workletRef.js';
 import { __page } from '../../snapshot.js';
@@ -25,12 +25,12 @@ function updateMainThread(
   }
 
   setPipeline(patchOptions.pipelineOptions);
-  markTiming(PerformanceTimingKeys.mtsRenderStart);
-  markTiming(PerformanceTimingKeys.parseChangesStart);
+  markTiming('mtsRenderStart');
+  markTiming('parseChangesStart');
   const { patchList, flushOptions = {} } = JSON.parse(data) as PatchList;
 
-  markTiming(PerformanceTimingKeys.parseChangesEnd);
-  markTiming(PerformanceTimingKeys.patchChangesStart);
+  markTiming('parseChangesEnd');
+  markTiming('patchChangesStart');
 
   for (const { snapshotPatch, workletRefInitValuePatch } of patchList) {
     updateWorkletRefInitValueChanges(workletRefInitValuePatch);
@@ -42,8 +42,8 @@ function updateMainThread(
     // console.debug('********** Lepus updatePatch:');
     // printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
   }
-  markTiming(PerformanceTimingKeys.patchChangesEnd);
-  markTiming(PerformanceTimingKeys.mtsRenderEnd);
+  markTiming('patchChangesEnd');
+  markTiming('mtsRenderEnd');
   if (patchOptions.isHydration) {
     setMainThreadHydrationFinished(true);
   }
@@ -51,7 +51,6 @@ function updateMainThread(
   if (patchOptions.pipelineOptions) {
     flushOptions.pipelineOptions = patchOptions.pipelineOptions;
   }
-  // TODO: triggerDataUpdated?
   __FlushElementTree(__page, flushOptions);
 }
 

package/runtime/src/lifecycleConstant.ts

@@ -7,6 +7,7 @@ export const enum LifecycleConstant {
   globalEventFromLepus = 'globalEventFromLepus',
   jsReady = 'rLynxJSReady',
   patchUpdate = 'rLynxChange',
+  publishEvent = 'rLynxPublishEvent',
 }
 
 export interface FirstScreenData {

package/runtime/src/list.ts

@@ -1,12 +1,15 @@
 // Copyright 2024 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 { LifecycleConstant } from './lifecycleConstant.js';
 import { applyRefQueue } from './snapshot/workletRef.js';
 import type { SnapshotInstance } from './snapshot.js';
+import { maybePromise } from './utils.js';
 
 export const gSignMap: Record<number, Map<number, SnapshotInstance>> = {};
 export const gRecycleMap: Record<number, Map<string, Map<number, SnapshotInstance>>> = {};
 const gParentWeakMap: WeakMap<SnapshotInstance, unknown> = new WeakMap();
+const resolvedPromise = /* @__PURE__ */ Promise.resolve();
 
 export function clearListGlobal(): void {
   for (const key in gSignMap) {
@@ -38,10 +41,10 @@ export function componentAtIndexFactory(
     }
   });
 
-  const componentAtIndex = (
+  const componentAtChildCtx = (
     list: FiberElement,
     listID: number,
-    cellIndex: number,
+    childCtx: SnapshotInstance,
     operationID: number,
     enableReuseNotification: boolean,
     enableBatchRender: boolean = false,
@@ -53,13 +56,55 @@ export function componentAtIndexFactory(
       throw new Error('componentAtIndex called on removed list');
     }
 
-    const childCtx = ctx[cellIndex];
-    if (!childCtx) {
-      throw new Error('childCtx not found');
-    }
-
     const platformInfo = childCtx.__listItemPlatformInfo ?? {};
 
+    // The lifecycle of this `__extraProps.isReady`:
+    //   0 -> Promise<number> -> 1
+    // 0: The initial state, the list-item is not ready yet, we will send a event to background
+    //    when `componentAtIndex` is called on it
+    // Promise<number>: A promise that will be resolved when the list-item is ready
+    // 1: The list-item is ready, we can use it to render the list
+    if (childCtx.__extraProps?.['isReady'] === 0) {
+      if (
+        typeof __GetAttributeByName === 'function'
+        && __GetAttributeByName(list, 'custom-list-name') === 'list-container'
+      ) {
+        // we are in supported env
+        // do not throw
+      } else {
+        throw new Error(
+          'Unsupported: `<list-item/>` with `defer={true}` must be used with `<list custom-list-name="list-container"/>`',
+        );
+      }
+
+      __OnLifecycleEvent([LifecycleConstant.publishEvent, {
+        handlerName: `${childCtx.__id}:__extraProps:onComponentAtIndex`,
+        data: {},
+      }]);
+
+      let p: Promise<number>;
+      return (p = new Promise<number>((resolve) => {
+        Object.defineProperty(childCtx.__extraProps, 'isReady', {
+          set(isReady) {
+            if (isReady === 1) {
+              delete childCtx.__extraProps!['isReady'];
+              childCtx.__extraProps!['isReady'] = 1;
+
+              void resolvedPromise.then(() => {
+                // the cellIndex may be changed already, but the `childCtx` is the same
+                resolve(componentAtChildCtx(list, listID, childCtx, operationID, enableReuseNotification));
+              });
+            }
+          },
+          get() {
+            return p;
+          },
+        });
+      }));
+    } else if (maybePromise<number>(childCtx.__extraProps?.['isReady'])) {
+      throw new Error('componentAtIndex was called on a pending deferred list item');
+    }
+
     const uniqID = childCtx.type + (platformInfo['reuse-identifier'] ?? '');
     const recycleSignMap = recycleMap.get(uniqID);
 
@@ -102,6 +147,11 @@ export function componentAtIndexFactory(
       oldCtx.unRenderElements();
       if (!oldCtx.__id) {
         oldCtx.tearDown();
+      } else if (oldCtx.__extraProps?.['isReady'] === 1) {
+        __OnLifecycleEvent([LifecycleConstant.publishEvent, {
+          handlerName: `${oldCtx.__id}:__extraProps:onRecycleComponent`,
+          data: {},
+        }]);
       }
       const root = childCtx.__element_root!;
       applyRefQueue();
@@ -156,25 +206,78 @@ export function componentAtIndexFactory(
     return sign;
   };
 
-  const componentAtIndexes = (
+  function componentAtIndex(
+    list: FiberElement,
+    listID: number,
+    cellIndex: number,
+    operationID: number,
+    enableReuseNotification: boolean,
+  ) {
+    const childCtx = ctx[cellIndex];
+    if (!childCtx) {
+      throw new Error('childCtx not found');
+    }
+    const r = componentAtChildCtx(list, listID, childCtx, operationID, enableReuseNotification);
+
+    /* v8 ignore start */
+    if (process.env['NODE_ENV'] === 'test') {
+      return r;
+    } else {
+      return typeof r === 'number' ? r : undefined;
+    }
+    /* v8 ignore end */
+  }
+
+  function componentAtIndexes(
     list: FiberElement,
     listID: number,
     cellIndexes: number[],
     operationIDs: number[],
     enableReuseNotification: boolean,
     asyncFlush: boolean,
-  ) => {
-    const uiSigns = cellIndexes.map((cellIndex, index) => {
-      const operationID = operationIDs[index] ?? 0;
-      return componentAtIndex(list, listID, cellIndex, operationID, enableReuseNotification, true, asyncFlush);
+  ) {
+    let hasUnready = false;
+    const p: Array<Promise<number> | number> = [];
+
+    cellIndexes.forEach((cellIndex, index) => {
+      const operationID = operationIDs[index]!;
+      const childCtx = ctx[cellIndex];
+      if (!childCtx) {
+        throw new Error('childCtx not found');
+      }
+
+      const u = componentAtChildCtx(list, listID, childCtx, operationID, enableReuseNotification, true, asyncFlush);
+      if (typeof u === 'number') {
+        // ready
+      } else {
+        hasUnready = true;
+      }
+      p.push(u);
     });
+
+    // We need __FlushElementTree twice:
+    // 1. The first time is sync, we flush the items that are ready, with unready items' uiSign as -1.
+    // 2. The second time is async, with all the uiSigns.
+    // NOTE: The `operationIDs` passed to __FlushElementTree must be the one passed in,
+    // not the one generated by any code here, to workaround a bug of Lynx Engine.
+    // So we CANNOT split the `operationIDs` into two parts: one for ready items, one for unready items.
+    if (hasUnready) {
+      void Promise.all(p).then((uiSigns) => {
+        __FlushElementTree(list, {
+          triggerLayout: true,
+          operationIDs,
+          elementIDs: uiSigns,
+          listID,
+        });
+      });
+    }
     __FlushElementTree(list, {
       triggerLayout: true,
-      operationIDs: operationIDs,
-      elementIDs: uiSigns,
+      operationIDs,
+      elementIDs: cellIndexes.map((_, index) => typeof p[index] === 'number' ? p[index] : -1),
       listID,
     });
-  };
+  }
   return [componentAtIndex, componentAtIndexes] as const;
 }
 

package/runtime/src/lynx/calledByNative.ts

@@ -12,7 +12,7 @@ import { __root, setRoot } from '../root.js';
 import { applyRefQueue } from '../snapshot/workletRef.js';
 import { SnapshotInstance, __page, setupPage } from '../snapshot.js';
 import { isEmptyObject } from '../utils.js';
-import { PerformanceTimingKeys, markTiming, setPipeline } from './performance.js';
+import { markTiming, setPipeline } from './performance.js';
 
 function ssrEncode() {
   const { __opcodes } = __root;
@@ -116,13 +116,14 @@ function updatePage(data: Record<string, unknown> | undefined, options?: UpdateP
     Object.assign(lynx.__initData, data);
   }
 
+  const flushOptions = options ?? {};
   if (!isJSReady) {
     const oldRoot = __root;
     setRoot(new SnapshotInstance('root'));
     __root.__jsx = oldRoot.__jsx;
 
     setPipeline(options?.pipelineOptions);
-    markTiming(PerformanceTimingKeys.updateDiffVdomStart);
+    markTiming('updateDiffVdomStart');
     {
       __pendingListUpdates.clear();
       renderMainThread();
@@ -138,14 +139,11 @@ function updatePage(data: Record<string, unknown> | undefined, options?: UpdateP
       __pendingListUpdates.flush();
       applyRefQueue();
     }
-    markTiming(PerformanceTimingKeys.updateDiffVdomEnd);
+    flushOptions.triggerDataUpdated = true;
+    markTiming('updateDiffVdomEnd');
   }
 
-  if (options) {
-    __FlushElementTree(__page, options);
-  } else {
-    __FlushElementTree();
-  }
+  __FlushElementTree(__page, flushOptions);
 }
 
 function updateGlobalProps(_data: any, options?: UpdatePageOption): void {

package/runtime/src/lynx/component.ts

@@ -6,23 +6,28 @@
 
 import { Component } from 'preact';
 
-import { PerfSpecificKey, PerformanceTimingKeys, markTimingLegacy } from './performance.js';
+import { PerfSpecificKey, markTimingLegacy } from './performance.js';
 import { globalFlushOptions } from '../lifecycle/patch/commit.js';
 import { NEXT_STATE } from '../renderToOpcodes/constants.js';
 
 if (__JS__) {
-  const __Component = Component as any;
-
-  __Component.prototype._reactAppInstance = lynxCoreInject.tt;
-
-  __Component.prototype.getNodeRef = function(a: string, b?: boolean) {
+  function reportRefDeprecationError(fnName: string, newFnName: string) {
     if (!__DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__) {
       lynx.reportError(
         new Error(
-          'getNodeRef is deprecated and has different behavior in ReactLynx 3.0, please use ref or lynx.createSelectorQuery instead.',
+          `${fnName} is deprecated and has different behavior in ReactLynx 3.0, please use ref or ${newFnName} instead.`,
         ),
       );
     }
+  }
+
+  const __Component = Component as any;
+
+  __Component.prototype._reactAppInstance = lynxCoreInject.tt;
+
+  __Component.prototype.getNodeRef = function(a: string, b?: boolean) {
+    reportRefDeprecationError('getNodeRef', 'lynx.createSelectorQuery');
+
     // @ts-expect-error hack lynx-kernel
     return lynxCoreInject.tt._reactLynx.ReactComponent.prototype.getNodeRef
       .call(
@@ -40,13 +45,8 @@ if (__JS__) {
   };
 
   __Component.prototype.getNodeRefFromRoot = function(a: string) {
-    if (!__DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__) {
-      lynx.reportError(
-        new Error(
-          'getNodeRefFromRoot is deprecated and has different behavior in ReactLynx 3.0, please use ref or lynx.createSelectorQuery instead.',
-        ),
-      );
-    }
+    reportRefDeprecationError('getNodeRefFromRoot', 'lynx.createSelectorQuery');
+
     // @ts-expect-error hack lynx-kernel
     return lynxCoreInject.tt._reactLynx.ReactComponent.prototype
       .getNodeRefFromRoot.call(
@@ -88,26 +88,14 @@ if (__JS__) {
   };
 
   __Component.prototype.getElementById = function(id: string) {
-    if (!__DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__) {
-      lynx.reportError(
-        new Error(
-          'getElementById on component instance is deprecated and has different behavior in ReactLynx 3.0, please use ref or lynx.getElementById instead.',
-        ),
-      );
-    }
+    reportRefDeprecationError('getElementById', 'lynx.getElementById');
     return lynx.getElementById(id);
   };
 
   __Component.prototype.GlobalEventEmitter = lynxCoreInject.tt.GlobalEventEmitter;
 
   __Component.prototype.createSelectorQuery = function() {
-    if (!__DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__) {
-      lynx.reportError(
-        new Error(
-          'createSelectorQuery on component instance is deprecated and has different behavior in ReactLynx 3.0, please use ref or lynx.createSelectorQuery instead.',
-        ),
-      );
-    }
+    reportRefDeprecationError('createSelectorQuery on component instance', 'lynx.createSelectorQuery');
     return lynx.createSelectorQuery();
   };
 
@@ -118,7 +106,7 @@ if (__JS__) {
     const timingFlag = this[NEXT_STATE][PerfSpecificKey];
     if (timingFlag) {
       globalFlushOptions.__lynx_timing_flag = timingFlag;
-      markTimingLegacy(PerformanceTimingKeys.updateSetStateTrigger, timingFlag);
+      markTimingLegacy('updateSetStateTrigger', timingFlag);
       this[NEXT_STATE][PerfSpecificKey] = '';
     }
   };

package/runtime/src/lynx/env.ts

@@ -56,8 +56,7 @@ export function setupLynxEnv(): void {
         let r: InitData | InitDataRaw;
         try {
           if (processorName) {
-            r = dataProcessorDefinition?.dataProcessors?.[processorName]?.(data)
-              ?? data;
+            r = dataProcessorDefinition?.dataProcessors?.[processorName]?.(data) as InitData ?? data;
           } else {
             r = dataProcessorDefinition?.defaultDataProcessor?.(data) ?? data;
           }

package/runtime/src/lynx/lazy-bundle.ts

@@ -33,7 +33,7 @@ export const makeSyncThen = function<T>(result: T): Promise<T>['then'] {
         // Calling `then` and passing a callback is standard behavior
         // but in Lepus runtime the callback will never be called
         // So can be simplified to code below
-        return new Promise(() => {});
+        return ret as Promise<TR1>;
 
         // TODO(hongzhiyuan.hzy): Avoid warning that cannot be turned-off, so the warning is commented
         // lynx.reportError(
@@ -90,27 +90,40 @@ export const loadLazyBundle: <
       r.then = makeSyncThen(result);
       return r;
     } else if (__JS__) {
-      return new Promise((resolve, reject) => {
-        const callback: (result: { code: number; detail: { schema: string } }) => void = result => {
-          const { code, detail } = result;
-          if (code === 0) {
-            const { schema } = detail;
-            const exports = lynxCoreInject.tt.getDynamicComponentExports(schema);
-            // `code === 0` means that the lazy bundle has been successfully parsed. However,
-            // its javascript files may still fail to run, which would prevent the retrieval of the exports object.
-            if (exports) {
-              resolve(exports as T);
-              return;
-            }
+      const resolver = withSyncResolvers<T>();
+
+      const callback: (result: { code: number; detail: { schema: string } }) => void = result => {
+        const { code, detail } = result;
+        if (code === 0) {
+          const { schema } = detail;
+          const exports = lynxCoreInject.tt.getDynamicComponentExports(schema);
+          // `code === 0` means that the lazy bundle has been successfully parsed. However,
+          // its javascript files may still fail to run, which would prevent the retrieval of the exports object.
+          if (exports) {
+            resolver.resolve(exports as T);
+            return;
           }
-          reject(new Error('Lazy bundle load failed: ' + JSON.stringify(result)));
-        };
-        if (typeof lynx.QueryComponent === 'function') {
-          lynx.QueryComponent(source, callback);
-        } else {
-          lynx.getNativeLynx().QueryComponent!(source, callback);
         }
-      });
+        resolver.reject(new Error('Lazy bundle load failed: ' + JSON.stringify(result)));
+      };
+      if (typeof lynx.QueryComponent === 'function') {
+        lynx.QueryComponent(source, callback);
+      } else {
+        lynx.getNativeLynx().QueryComponent!(source, callback);
+      }
+
+      if (resolver.result !== null) {
+        const p = Promise.resolve(resolver.result);
+        p.then = makeSyncThen(resolver.result) as Promise<Awaited<T>>['then'];
+        return p;
+      } else if (resolver.error === null) {
+        return new Promise((_resolve, _reject) => {
+          resolver.resolve = _resolve;
+          resolver.reject = _reject;
+        });
+      } else {
+        return Promise.reject(resolver.error);
+      }
     }
 
     throw new Error('unreachable');
@@ -119,6 +132,28 @@ export const loadLazyBundle: <
   return loadLazyBundle;
 })();
 
+function withSyncResolvers<T>() {
+  'background-only';
+
+  const resolver: {
+    result: T | null;
+    error: Error | null;
+    resolve(result: T): void;
+    reject(error: Error): void;
+  } = {
+    resolve: (result: T): void => {
+      resolver.result = result;
+    },
+    reject: (error: Error): void => {
+      resolver.error = error;
+    },
+    result: null,
+    error: null,
+  };
+
+  return resolver;
+}
+
 /**
  * @internal
  */

package/runtime/src/lynx/performance.ts

@@ -8,24 +8,24 @@ import { __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
 import { DIFF } from '../renderToOpcodes/constants.js';
 import { isSdkVersionGt } from '../utils.js';
 
-enum PerformanceTimingKeys {
-  updateSetStateTrigger,
-  updateDiffVdomStart,
-  updateDiffVdomEnd,
+const PerformanceTimingKeys = [
+  'updateSetStateTrigger',
+  'updateDiffVdomStart',
+  'updateDiffVdomEnd',
   // updateSetStateTrigger, updateDiffVdomStart and updateDiffVdomEnd is deprecated
-  diffVdomStart,
-  diffVdomEnd,
-  packChangesStart,
-  packChangesEnd,
-  parseChangesStart,
-  parseChangesEnd,
-  patchChangesStart,
-  patchChangesEnd,
-  hydrateParseSnapshotStart,
-  hydrateParseSnapshotEnd,
-  mtsRenderStart,
-  mtsRenderEnd,
-}
+  'diffVdomStart',
+  'diffVdomEnd',
+  'packChangesStart',
+  'packChangesEnd',
+  'parseChangesStart',
+  'parseChangesEnd',
+  'patchChangesStart',
+  'patchChangesEnd',
+  'hydrateParseSnapshotStart',
+  'hydrateParseSnapshotEnd',
+  'mtsRenderStart',
+  'mtsRenderEnd',
+] as const;
 
 const PerformanceTimingFlags = {
   reactLynxHydrate: 'react_lynx_hydrate',
@@ -51,15 +51,15 @@ let globalPipelineOptions: PipelineOptions | undefined;
 /**
  * @deprecated used by old timing api(setState timing flag)
  */
-function markTimingLegacy(key: PerformanceTimingKeys, timingFlag_?: string): void {
+function markTimingLegacy(key: typeof PerformanceTimingKeys[number], timingFlag_?: string): void {
   switch (key) {
-    case PerformanceTimingKeys.updateSetStateTrigger: {
+    case 'updateSetStateTrigger': {
       shouldMarkDiffVdomStart = true;
       shouldMarkDiffVdomEnd = true;
       timingFlag = timingFlag_;
       break;
     }
-    case PerformanceTimingKeys.updateDiffVdomStart: {
+    case 'updateDiffVdomStart': {
       /* v8 ignore start */
       if (!shouldMarkDiffVdomStart) {
         return;
@@ -68,7 +68,7 @@ function markTimingLegacy(key: PerformanceTimingKeys, timingFlag_?: string): voi
       shouldMarkDiffVdomStart = false;
       break;
     }
-    case PerformanceTimingKeys.updateDiffVdomEnd: {
+    case 'updateDiffVdomEnd': {
       if (!shouldMarkDiffVdomEnd) {
         return;
       }
@@ -76,7 +76,7 @@ function markTimingLegacy(key: PerformanceTimingKeys, timingFlag_?: string): voi
       break;
     }
   }
-  lynx.getNativeApp().markTiming?.(timingFlag!, PerformanceTimingKeys[key]);
+  lynx.getNativeApp().markTiming?.(timingFlag!, key);
 }
 
 function beginPipeline(needTimestamps: boolean, pipelineOrigin: PipelineOrigin, timingFlag?: string): void {
@@ -109,9 +109,9 @@ function setPipeline(pipeline: PipelineOptions | undefined): void {
   globalPipelineOptions = pipeline;
 }
 
-function markTiming(timestampKey: PerformanceTimingKeys, force?: boolean): void {
+function markTiming(timestampKey: typeof PerformanceTimingKeys[number], force?: boolean): void {
   if (globalPipelineOptions && (force || globalPipelineOptions.needTimestamps)) {
-    lynx.performance?._markTiming?.(globalPipelineOptions.pipelineID, PerformanceTimingKeys[timestampKey]);
+    lynx.performance?._markTiming?.(globalPipelineOptions.pipelineID, timestampKey);
   }
 }
 
@@ -122,10 +122,10 @@ function initTimingAPI(): void {
     if (__JS__ && __globalSnapshotPatch) {
       if (!globalPipelineOptions) {
         beginPipeline(false, PipelineOrigins.updateTriggeredByBts);
-        markTiming(PerformanceTimingKeys.diffVdomStart, true);
+        markTiming('diffVdomStart', true);
       }
       if (shouldMarkDiffVdomStart) {
-        markTimingLegacy(PerformanceTimingKeys.updateDiffVdomStart);
+        markTimingLegacy('updateDiffVdomStart');
       }
     }
     oldDiff?.(vnode);
@@ -136,7 +136,6 @@ function initTimingAPI(): void {
  * @internal
  */
 export {
-  PerformanceTimingKeys,
   PerformanceTimingFlags,
   PipelineOrigins,
   PerfSpecificKey,