@lynx-js/react 0.109.2 → 0.110.1

package/runtime/src/compat/lynxComponent.ts

@@ -9,15 +9,15 @@ export function wrapWithLynxComponent(
   jsxComponent: any,
 ): ReactNode {
   const C = jsxComponent.type;
-  if (typeof C === 'function') {
-    if (C === ComponentFromReactRuntime || C.prototype instanceof ComponentFromReactRuntime) {
-      if (jsxSnapshot.length === 1) {
-        return jsxSnapshot(jsxComponent);
-      } else {
-        // spread
-        if (!jsxComponent.props.removeComponentElement) {
-          return jsxSnapshot(jsxComponent, takeComponentAttributes(jsxComponent));
-        }
+  if (
+    typeof C === 'function' && (C === ComponentFromReactRuntime || C.prototype instanceof ComponentFromReactRuntime)
+  ) {
+    if (jsxSnapshot.length === 1) {
+      return jsxSnapshot(jsxComponent);
+    } else {
+      // spread
+      if (!jsxComponent.props.removeComponentElement) {
+        return jsxSnapshot(jsxComponent, takeComponentAttributes(jsxComponent));
       }
     }
   }
@@ -25,8 +25,7 @@ export function wrapWithLynxComponent(
 }
 
 // @ts-expect-error
-export class ComponentFromReactRuntime extends Component {
-}
+export class ComponentFromReactRuntime extends Component {}
 
 const __COMPONENT_ATTRIBUTES__ = /* @__PURE__ */ new Set([
   'name',
@@ -68,8 +67,8 @@ function takeComponentAttributes(jsxComponent: any): Record<string, any> {
       || k === 'dataSet'
       || k === 'data-set'
       || k === 'removeComponentElement'
-      || k.match(/^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$/)
-      || k.match(/^data-([A-Za-z]+)$/)
+      || (/^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$/.exec(k))
+      || (/^data-([A-Za-z]+)$/.exec(k))
     ) {
       attributes[k] = jsxComponent.props[k];
       delete jsxComponent.props[k];

package/runtime/src/debug/profile.ts

@@ -29,6 +29,7 @@ export function initProfileHook(): void {
   const oldRender = options[RENDER];
   options[RENDER] = function(vnode: VNode & { [COMPONENT]: Component }) {
     const displayName = getDisplayName(vnode.type as ComponentClass);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const originalRender = vnode[COMPONENT].render;
     vnode[COMPONENT].render = function render(this, props, state, context) {
       // This __PROFILE__ is used for DCE testing

package/runtime/src/gesture/processGestureBagkround.ts

@@ -1,5 +1,9 @@
+// Copyright 2025 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 { GestureTypeInner } from './types.js';
+import type { BaseGesture, ComposedGesture, GestureKind } from './types.js';
 import { onPostWorkletCtx } from '../worklet/ctx.js';
-import { type GestureKind, GestureTypeInner, type ComposedGesture, type BaseGesture } from './types.js';
 
 export function processGestureBackground(gesture: GestureKind): void {
   if (gesture.type === GestureTypeInner.COMPOSED) {

package/runtime/src/gesture/types.ts

@@ -1,3 +1,6 @@
+// Copyright 2025 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 { Worklet } from '@lynx-js/react/worklet-runtime/bindings';
 
 export enum GestureTypeInner {

package/runtime/src/hooks/react.ts

@@ -9,7 +9,7 @@ import {
   useId,
   useImperativeHandle,
   useMemo,
-  useLayoutEffect as usePreactLayoutEffect,
+  useEffect as usePreactEffect,
   useReducer,
   useRef,
   useState,
@@ -29,7 +29,7 @@ import type { DependencyList, EffectCallback } from 'react';
  * @deprecated `useLayoutEffect` in the background thread cannot offer the precise timing for reading layout information and synchronously re-render, which is different from React.
  */
 function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void {
-  return usePreactLayoutEffect(effect, deps);
+  return usePreactEffect(effect, deps);
 }
 
 /**
@@ -42,7 +42,7 @@ function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void {
  * @public
  */
 function useEffect(effect: EffectCallback, deps?: DependencyList): void {
-  return usePreactLayoutEffect(effect, deps);
+  return usePreactEffect(effect, deps);
 }
 
 export {

package/runtime/src/hooks/useLynxGlobalEventListener.ts

@@ -31,7 +31,7 @@ import { useEffect, useMemo, useRef } from 'preact/hooks';
  * @param listener - Event handler
  * @public
  */
-export function useLynxGlobalEventListener<T extends (...args: unknown[]) => void>(
+export function useLynxGlobalEventListener<T extends (...args: any[]) => void>(
   eventName: string,
   listener: T,
 ): void {

package/runtime/src/hydrate.ts

@@ -2,9 +2,11 @@
 // 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 { __pendingListUpdates, componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import { componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import { __pendingListUpdates } from './pendingListUpdates.js';
+import { DynamicPartType } from './snapshot/dynamicPartType.js';
 import { unref } from './snapshot/ref.js';
-import { DynamicPartType, SnapshotInstance } from './snapshot.js';
+import type { SnapshotInstance } from './snapshot.js';
 import { isEmptyObject } from './utils.js';
 
 export interface DiffResult<K> {
@@ -215,7 +217,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
   }
 
   let swap;
-  if (swap = options?.swap) {
+  if ((swap = options?.swap)) {
     swap[before.__id] = after.__id;
   }
 
@@ -349,7 +351,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
 
         const listElement = before.__elements![elementIndex]!;
         __SetAttribute(listElement, 'update-list-info', info);
-        const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(afterChildNodes);
+        const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(afterChildNodes, hydrate);
         __UpdateListCallbacks(
           listElement,
           componentAtIndex,

package/runtime/src/internal.ts

@@ -9,10 +9,11 @@ import './lynx.js';
 
 import { factory as factory2 } from './compat/componentIs.js';
 import { useMemo } from './hooks/react.js';
-import { snapshotCreateList } from './list.js';
 import { loadLazyBundle } from './lynx/lazy-bundle.js';
 import { __root } from './root.js';
-import { DynamicPartType, SnapshotInstance, __page, __pageId, createSnapshot, snapshotManager } from './snapshot.js';
+import { DynamicPartType } from './snapshot/dynamicPartType.js';
+import { snapshotCreateList } from './snapshot/list.js';
+import { SnapshotInstance, __page, __pageId, createSnapshot, snapshotManager } from './snapshot.js';
 
 export { __page, __pageId, __root };
 

package/runtime/src/legacy-react-runtime/index.ts

@@ -8,7 +8,7 @@ import {
   ComponentFromReactRuntime as Component,
   ComponentFromReactRuntime as PureComponent,
 } from '../compat/lynxComponent.js';
-import { useCallback, useEffect, useMemo, useReducer, useState, useRef } from '../hooks/react.js';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from '../hooks/react.js';
 
 /* v8 ignore next 3 */
 function __runInJS<T>(value: T): T | undefined | null {

package/runtime/src/lifecycle/destroy.ts

@@ -13,6 +13,7 @@ function destroyBackground(): void {
     console.profile('destroyBackground');
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   render(null, __root as any);
 
   globalCommitTaskMap.forEach(task => {

package/runtime/src/lifecycle/event/delayEvents.ts

@@ -1,3 +1,6 @@
+// Copyright 2025 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.
 let delayedEvents: [handlerName: string, data: unknown][] | undefined;
 
 function delayedPublishEvent(handlerName: string, data: unknown): void {

package/runtime/src/lifecycle/event/delayLifecycleEvents.ts

@@ -1,18 +1,12 @@
-import { LifecycleConstant } from '../../lifecycleConstant.js';
+// Copyright 2025 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 { LifecycleConstant } from '../../lifecycleConstant.js';
 
-const delayedLifecycleEvents: [type: string, data: any][] = [];
+const delayedLifecycleEvents: [type: LifecycleConstant, data: unknown][] = [];
 
-function delayLifecycleEvent(type: string, data: any): void {
-  // We need to ensure that firstScreen events are executed before other events.
-  // This is because firstScreen events are used to initialize the dom tree,
-  // and other events depend on the dom tree being fully constructed.
-  // There might be some edge cases where ctx cannot be found in `ref` lifecycle event,
-  // and they should be ignored safely.
-  if (type === LifecycleConstant.firstScreen) {
-    delayedLifecycleEvents.unshift([type, data]);
-  } else {
-    delayedLifecycleEvents.push([type, data]);
-  }
+function delayLifecycleEvent(type: LifecycleConstant, data: unknown): void {
+  delayedLifecycleEvents.push([type, data]);
 }
 
 /**

package/runtime/src/lifecycle/event/jsReady.ts

@@ -1,9 +1,11 @@
+// Copyright 2025 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 { __root } from '../../root.js';
-import { takeGlobalRefPatchMap } from '../../snapshot/ref.js';
 
 let isJSReady: boolean;
-let jsReadyEventIdSwap: Record<number, number>;
+let jsReadyEventIdSwap: Record<string | number, number>;
 
 function jsReady(): void {
   isJSReady = true;
@@ -11,7 +13,6 @@ function jsReady(): void {
     LifecycleConstant.firstScreen, /* FIRST_SCREEN */
     {
       root: JSON.stringify(__root),
-      refPatch: JSON.stringify(takeGlobalRefPatchMap()),
       jsReadyEventIdSwap,
     },
   ]);

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

@@ -21,7 +21,6 @@
 
 import type { VNode } from 'preact';
 import { options } from 'preact';
-import type { Component } from 'preact/compat';
 
 import { LifecycleConstant } from '../../lifecycleConstant.js';
 import {
@@ -31,19 +30,18 @@ import {
   markTimingLegacy,
   setPipeline,
 } from '../../lynx/performance.js';
-import { CATCH_ERROR, COMMIT, RENDER_CALLBACKS, VNODE } from '../../renderToOpcodes/constants.js';
+import { COMMIT } from '../../renderToOpcodes/constants.js';
+import { applyQueuedRefs } from '../../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../../snapshot.js';
-import { updateBackgroundRefs } from '../../snapshot/ref.js';
 import { isEmptyObject } from '../../utils.js';
 import { takeWorkletRefInitValuePatch } from '../../worklet/workletRefPool.js';
-import { runDelayedUnmounts, takeDelayedUnmounts } from '../delayUnmount.js';
 import { getReloadVersion } from '../pass.js';
 import type { SnapshotPatch } from './snapshotPatch.js';
 import { takeGlobalSnapshotPatch } from './snapshotPatch.js';
 
 let globalFlushOptions: FlushOptions = {};
 
-const globalCommitTaskMap: Map<number, () => void> = /*@__PURE__*/ new Map();
+const globalCommitTaskMap: Map<number, () => void> = /*@__PURE__*/ new Map<number, () => void>();
 let nextCommitTaskId = 1;
 
 let globalBackgroundSnapshotInstancesToRemove: number[] = [];
@@ -52,6 +50,7 @@ let globalBackgroundSnapshotInstancesToRemove: number[] = [];
  * A single patch operation.
  */
 interface Patch {
+  // TODO: ref: do we need `id`?
   id: number;
   snapshotPatch?: SnapshotPatch;
   workletRefInitValuePatch?: [id: number, value: unknown][];
@@ -78,6 +77,7 @@ interface PatchOptions {
  * Replaces Preact's default commit hook with our custom implementation
  */
 function replaceCommitHook(): void {
+  // This is actually not used since Preact use `hooks._commit` for callbacks of `useLayoutEffect`.
   const originalPreactCommit = options[COMMIT];
   const commit = async (vnode: VNode, commitQueue: any[]) => {
     // Skip commit phase for MT runtime
@@ -91,20 +91,6 @@ function replaceCommitHook(): void {
     markTimingLegacy(PerformanceTimingKeys.updateDiffVdomEnd);
     markTiming(PerformanceTimingKeys.diffVdomEnd);
 
-    // The callback functions to be called after components are rendered.
-    const renderCallbacks = commitQueue.map((component: Component<any>) => {
-      const ret = {
-        component,
-        [RENDER_CALLBACKS]: component[RENDER_CALLBACKS],
-        [VNODE]: component[VNODE],
-      };
-      component[RENDER_CALLBACKS] = [];
-      return ret;
-    });
-    commitQueue.length = 0;
-
-    const delayedUnmounts = takeDelayedUnmounts();
-
     const backgroundSnapshotInstancesToRemove = globalBackgroundSnapshotInstancesToRemove;
     globalBackgroundSnapshotInstancesToRemove = [];
 
@@ -112,18 +98,6 @@ function replaceCommitHook(): void {
 
     // Register the commit task
     globalCommitTaskMap.set(commitTaskId, () => {
-      updateBackgroundRefs(commitTaskId);
-      runDelayedUnmounts(delayedUnmounts);
-      originalPreactCommit?.(vnode, renderCallbacks);
-      renderCallbacks.some(wrapper => {
-        try {
-          wrapper[RENDER_CALLBACKS].some((cb: (this: Component) => void) => {
-            cb.call(wrapper.component);
-          });
-        } catch (e) {
-          options[CATCH_ERROR](e, wrapper[VNODE]!);
-        }
-      });
       if (backgroundSnapshotInstancesToRemove.length) {
         setTimeout(() => {
           backgroundSnapshotInstancesToRemove.forEach(id => {
@@ -140,6 +114,8 @@ function replaceCommitHook(): void {
     globalFlushOptions = {};
     if (!snapshotPatch && workletRefInitValuePatch.length === 0) {
       // before hydration, skip patch
+      applyQueuedRefs();
+      originalPreactCommit?.(vnode, commitQueue);
       return;
     }
 
@@ -169,6 +145,9 @@ function replaceCommitHook(): void {
         globalCommitTaskMap.delete(commitTaskId);
       }
     });
+
+    applyQueuedRefs();
+    originalPreactCommit?.(vnode, commitQueue);
   };
   options[COMMIT] = commit as ((...args: Parameters<typeof commit>) => void);
 }
@@ -225,14 +204,6 @@ function clearCommitTaskId(): void {
   nextCommitTaskId = 1;
 }
 
-function replaceRequestAnimationFrame(): void {
-  // to make afterPaintEffects run faster
-  const resolvedPromise = Promise.resolve();
-  options.requestAnimationFrame = (cb: () => void) => {
-    void resolvedPromise.then(cb);
-  };
-}
-
 /**
  * @internal
  */
@@ -243,9 +214,7 @@ export {
   globalBackgroundSnapshotInstancesToRemove,
   globalCommitTaskMap,
   globalFlushOptions,
-  nextCommitTaskId,
   replaceCommitHook,
-  replaceRequestAnimationFrame,
   type PatchList,
   type PatchOptions,
 };

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

@@ -0,0 +1,61 @@
+// Copyright 2025 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 { backgroundSnapshotInstanceManager, snapshotManager } from '../../snapshot.js';
+
+export const ctxNotFoundType = 'Lynx.Error.CtxNotFound';
+
+const errorMsg = 'snapshotPatchApply failed: ctx not found';
+
+let ctxNotFoundEventListener: ((e: RuntimeProxy.Event) => void) | null = null;
+
+export interface CtxNotFoundData {
+  id: number;
+}
+
+export function sendCtxNotFoundEventToBackground(id: number): void {
+  /* v8 ignore next 3 */
+  if (!lynx.getJSContext) {
+    throw new Error(errorMsg);
+  }
+  lynx.getJSContext().dispatchEvent({
+    type: ctxNotFoundType,
+    data: {
+      id,
+    } as CtxNotFoundData,
+  });
+}
+
+export function reportCtxNotFound(data: CtxNotFoundData): void {
+  const id = data.id;
+  const instance = backgroundSnapshotInstanceManager.values.get(id);
+
+  let snapshotType = 'null';
+
+  if (instance && instance.__snapshot_def) {
+    for (const [snapshotId, snapshot] of snapshotManager.values.entries()) {
+      if (snapshot === instance.__snapshot_def) {
+        snapshotType = snapshotId;
+        break;
+      }
+    }
+  }
+
+  lynx.reportError(new Error(`${errorMsg}, snapshot type: '${snapshotType}'`));
+}
+
+export function addCtxNotFoundEventListener(): void {
+  ctxNotFoundEventListener = (e) => {
+    reportCtxNotFound(e.data as CtxNotFoundData);
+  };
+  lynx.getCoreContext?.().addEventListener(ctxNotFoundType, ctxNotFoundEventListener);
+}
+
+export function removeCtxNotFoundEventListener(): void {
+  const coreContext = lynx.getCoreContext?.();
+  if (coreContext && ctxNotFoundEventListener) {
+    coreContext.removeEventListener(ctxNotFoundType, ctxNotFoundEventListener);
+    ctxNotFoundEventListener = null;
+  }
+}

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

@@ -1,3 +1,6 @@
+// Copyright 2025 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 { onHydrationFinished } from '@lynx-js/react/worklet-runtime/bindings';
 
 export let isMainThreadHydrationFinished = false;

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

@@ -42,9 +42,9 @@ export const enum SnapshotOperation {
 //   fn: string,
 // ]
 
-export type SnapshotPatch = any[];
+export type SnapshotPatch = unknown[];
 
-export let __globalSnapshotPatch: any;
+export let __globalSnapshotPatch: SnapshotPatch | undefined;
 
 export function takeGlobalSnapshotPatch(): SnapshotPatch | undefined {
   if (__globalSnapshotPatch) {

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

@@ -13,6 +13,10 @@
  * order and with proper error handling.
  */
 
+import { sendCtxNotFoundEventToBackground } from './error.js';
+import type { SnapshotPatch } from './snapshotPatch.js';
+import { SnapshotOperation } from './snapshotPatch.js';
+import type { DynamicPartType } from '../../snapshot/dynamicPartType.js';
 import {
   SnapshotInstance,
   createSnapshot,
@@ -20,12 +24,6 @@ import {
   snapshotInstanceManager,
   snapshotManager,
 } from '../../snapshot.js';
-import type { SnapshotPatch } from './snapshotPatch.js';
-import { SnapshotOperation } from './snapshotPatch.js';
-
-function reportCtxNotFound(): void {
-  lynx.reportError(new Error(`snapshotPatchApply failed: ctx not found`));
-}
 
 /**
  * Applies a patch of snapshot operations to the main thread.
@@ -37,68 +35,68 @@ export function snapshotPatchApply(snapshotPatch: SnapshotPatch): void {
   for (let i = 0; i < length; ++i) {
     switch (snapshotPatch[i]) {
       case SnapshotOperation.CreateElement: {
-        const type = snapshotPatch[++i];
-        const id = snapshotPatch[++i];
+        const type = snapshotPatch[++i] as string;
+        const id = snapshotPatch[++i] as number;
         new SnapshotInstance(type, id);
         break;
       }
       case SnapshotOperation.InsertBefore: {
-        const parentId = snapshotPatch[++i];
-        const childId = snapshotPatch[++i];
-        const beforeId = snapshotPatch[++i];
+        const parentId = snapshotPatch[++i] as number;
+        const childId = snapshotPatch[++i] as number;
+        const beforeId = snapshotPatch[++i] as number | undefined;
         const parent = snapshotInstanceManager.values.get(parentId);
         const child = snapshotInstanceManager.values.get(childId);
-        const existingNode = snapshotInstanceManager.values.get(beforeId);
+        const existingNode = snapshotInstanceManager.values.get(beforeId!);
         if (!parent || !child) {
-          reportCtxNotFound();
+          sendCtxNotFoundEventToBackground(parent ? childId : parentId);
         } else {
           parent.insertBefore(child, existingNode);
         }
         break;
       }
       case SnapshotOperation.RemoveChild: {
-        const parentId = snapshotPatch[++i];
-        const childId = snapshotPatch[++i];
+        const parentId = snapshotPatch[++i] as number;
+        const childId = snapshotPatch[++i] as number;
         const parent = snapshotInstanceManager.values.get(parentId);
         const child = snapshotInstanceManager.values.get(childId);
         if (!parent || !child) {
-          reportCtxNotFound();
+          sendCtxNotFoundEventToBackground(parent ? childId : parentId);
         } else {
           parent.removeChild(child);
         }
         break;
       }
       case SnapshotOperation.SetAttribute: {
-        const id = snapshotPatch[++i];
-        const dynamicPartIndex = snapshotPatch[++i];
+        const id = snapshotPatch[++i] as number;
+        const dynamicPartIndex = snapshotPatch[++i] as number;
         const value = snapshotPatch[++i];
         const si = snapshotInstanceManager.values.get(id);
         if (si) {
           si.setAttribute(dynamicPartIndex, value);
         } else {
-          reportCtxNotFound();
+          sendCtxNotFoundEventToBackground(id);
         }
         break;
       }
       case SnapshotOperation.SetAttributes: {
-        const id = snapshotPatch[++i];
+        const id = snapshotPatch[++i] as number;
         const values = snapshotPatch[++i];
         const si = snapshotInstanceManager.values.get(id);
         if (si) {
           si.setAttribute('values', values);
         } else {
-          reportCtxNotFound();
+          sendCtxNotFoundEventToBackground(id);
         }
         break;
       }
       case SnapshotOperation.DEV_ONLY_AddSnapshot: {
         if (__DEV__) {
-          const uniqID: string = snapshotPatch[++i];
-          const create: string = snapshotPatch[++i];
-          const update: string[] = snapshotPatch[++i];
-          const slot = snapshotPatch[++i];
-          const cssId: number = snapshotPatch[++i] ?? 0;
-          const entryName: string | undefined = snapshotPatch[++i];
+          const uniqID = snapshotPatch[++i] as string;
+          const create = snapshotPatch[++i] as string;
+          const update = snapshotPatch[++i] as string[];
+          const slot = snapshotPatch[++i] as [DynamicPartType, number][];
+          const cssId = (snapshotPatch[++i] ?? 0) as number;
+          const entryName = snapshotPatch[++i] as string | undefined;
 
           if (!snapshotManager.values.has(entryUniqID(uniqID, entryName))) {
             // HMR-related
@@ -106,10 +104,12 @@ export function snapshotPatchApply(snapshotPatch: SnapshotPatch): void {
             createSnapshot(
               uniqID,
               evaluate<(ctx: SnapshotInstance) => FiberElement[]>(create),
+              // eslint-disable-next-line unicorn/no-array-callback-reference
               update.map<(ctx: SnapshotInstance, index: number, oldValue: any) => void>(evaluate),
               slot,
               cssId,
               entryName,
+              null,
             );
           }
         }
@@ -138,7 +138,7 @@ function evaluate<T>(code: string): T {
   if (__DEV__) {
     // We are using `eval` here to make the updated snapshot to access variables like `__webpack_require__`.
     // See: https://github.com/lynx-family/lynx-stack/issues/983.
-    return eval(`(() => ${code})()`);
+    return eval(`(() => ${code})()`) as T;
   }
   throw new Error('unreachable: evaluate is not supported in production');
 }

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

@@ -5,15 +5,14 @@
 import { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
 
 import type { PatchList, PatchOptions } from './commit.js';
+import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
 import { LifecycleConstant } from '../../lifecycleConstant.js';
-import { __pendingListUpdates } from '../../list.js';
-import { markTiming, PerformanceTimingKeys, setPipeline } from '../../lynx/performance.js';
-import { takeGlobalRefPatchMap } from '../../snapshot/ref.js';
+import { PerformanceTimingKeys, markTiming, setPipeline } from '../../lynx/performance.js';
+import { __pendingListUpdates } from '../../pendingListUpdates.js';
+import { applyRefQueue } from '../../snapshot/workletRef.js';
 import { __page } from '../../snapshot.js';
-import { isEmptyObject } from '../../utils.js';
 import { getReloadVersion } from '../pass.js';
-import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
 
 function updateMainThread(
   { data, patchOptions }: {
@@ -33,7 +32,7 @@ function updateMainThread(
   markTiming(PerformanceTimingKeys.parseChangesEnd);
   markTiming(PerformanceTimingKeys.patchChangesStart);
 
-  for (const { snapshotPatch, workletRefInitValuePatch, id } of patchList) {
+  for (const { snapshotPatch, workletRefInitValuePatch } of patchList) {
     updateWorkletRefInitValueChanges(workletRefInitValuePatch);
     __pendingListUpdates.clear();
     if (snapshotPatch) {
@@ -42,14 +41,13 @@ function updateMainThread(
     __pendingListUpdates.flush();
     // console.debug('********** Lepus updatePatch:');
     // printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
-
-    commitMainThreadPatchUpdate(id);
   }
   markTiming(PerformanceTimingKeys.patchChangesEnd);
   markTiming(PerformanceTimingKeys.mtsRenderEnd);
   if (patchOptions.isHydration) {
     setMainThreadHydrationFinished(true);
   }
+  applyRefQueue();
   if (patchOptions.pipelineOptions) {
     flushOptions.pipelineOptions = patchOptions.pipelineOptions;
   }
@@ -61,14 +59,7 @@ function injectUpdateMainThread(): void {
   Object.assign(globalThis, { [LifecycleConstant.patchUpdate]: updateMainThread });
 }
 
-function commitMainThreadPatchUpdate(commitTaskId?: number): void {
-  const refPatch = takeGlobalRefPatchMap();
-  if (!isEmptyObject(refPatch)) {
-    __OnLifecycleEvent([LifecycleConstant.ref, { commitTaskId, refPatch: JSON.stringify(refPatch) }]);
-  }
-}
-
 /**
  * @internal
  */
-export { commitMainThreadPatchUpdate, injectUpdateMainThread };
+export { injectUpdateMainThread };