@lynx-js/react 0.109.2 → 0.110.0

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,9 @@
  * order and with proper error handling.
  */
 
+import { sendCtxNotFoundEventToBackground } from './error.js';
+import type { SnapshotPatch } from './snapshotPatch.js';
+import { SnapshotOperation } from './snapshotPatch.js';
 import {
   SnapshotInstance,
   createSnapshot,
@@ -20,12 +23,7 @@ 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`));
-}
+import type { DynamicPartType } from '../../snapshot.js';
 
 /**
  * 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

@@ -4,16 +4,15 @@
 
 import { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
 
-import type { PatchList, PatchOptions } from './commit.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 { __page } from '../../snapshot.js';
-import { isEmptyObject } from '../../utils.js';
 import { getReloadVersion } from '../pass.js';
+import type { PatchList, PatchOptions } from './commit.js';
 import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
+import { snapshotPatchApply } from './snapshotPatchApply.js';
+import { applyRefQueue } from '../../snapshot/workletRef.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 };

package/runtime/src/lifecycle/ref/delay.ts

@@ -0,0 +1,99 @@
+// 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 type { NodesRef, SelectorQuery } from '@lynx-js/types';
+
+import { hydrationMap } from '../../snapshotInstanceHydrationMap.js';
+
+type RefTask = (nodesRef: NodesRef) => SelectorQuery;
+
+/**
+ * A flag to indicate whether UI operations should be delayed.
+ * When set to true, UI operations will be queued in the `delayedUiOps` array
+ * and executed later when `runDelayedUiOps` is called.
+ * This is used before hydration to ensure UI operations are batched
+ * and executed at the appropriate time.
+ */
+const shouldDelayUiOps = { value: true };
+
+/**
+ * An array of functions that will be executed later when `runDelayedUiOps` is called.
+ * These functions contain UI operations that need to be delayed.
+ */
+const delayedUiOps: (() => void)[] = [];
+
+/**
+ * Runs a task either immediately or delays it based on the `shouldDelayUiOps` flag.
+ * @param task - The function to execute.
+ */
+function runOrDelay(task: () => void): void {
+  if (shouldDelayUiOps.value) {
+    delayedUiOps.push(task);
+  } else {
+    task();
+  }
+}
+
+/**
+ * Executes all delayed UI operations.
+ */
+function runDelayedUiOps(): void {
+  for (const task of delayedUiOps) {
+    task();
+  }
+  shouldDelayUiOps.value = false;
+  delayedUiOps.length = 0;
+}
+
+/**
+ * A proxy class designed for managing and executing reference-based tasks.
+ * It delays the execution of tasks until hydration is complete.
+ */
+class RefProxy {
+  private readonly refAttr: [snapshotInstanceId: number, expIndex: number];
+  private task: RefTask | undefined;
+
+  constructor(refAttr: [snapshotInstanceId: number, expIndex: number]) {
+    this.refAttr = refAttr;
+  }
+
+  private setTask<K extends keyof NodesRef>(
+    method: K,
+    args: Parameters<NodesRef[K]>,
+  ): this {
+    this.task = (nodesRef) => {
+      return (nodesRef[method] as unknown as (...args: any[]) => SelectorQuery)(...args);
+    };
+    return this;
+  }
+
+  invoke(...args: Parameters<NodesRef['invoke']>): RefProxy {
+    return new RefProxy(this.refAttr).setTask('invoke', args);
+  }
+
+  path(...args: Parameters<NodesRef['path']>): RefProxy {
+    return new RefProxy(this.refAttr).setTask('path', args);
+  }
+
+  fields(...args: Parameters<NodesRef['fields']>): RefProxy {
+    return new RefProxy(this.refAttr).setTask('fields', args);
+  }
+
+  setNativeProps(...args: Parameters<NodesRef['setNativeProps']>): RefProxy {
+    return new RefProxy(this.refAttr).setTask('setNativeProps', args);
+  }
+
+  exec(): void {
+    runOrDelay(() => {
+      const realRefId = hydrationMap.get(this.refAttr[0]) ?? this.refAttr[0];
+      const refSelector = `[react-ref-${realRefId}-${this.refAttr[1]}]`;
+      this.task!(lynx.createSelectorQuery().select(refSelector)).exec();
+    });
+  }
+}
+
+/**
+ * @internal
+ */
+export { RefProxy, runDelayedUiOps, shouldDelayUiOps };

package/runtime/src/lifecycle/reload.ts

@@ -13,25 +13,26 @@ import { hydrate } from '../hydrate.js';
 import { LifecycleConstant } from '../lifecycleConstant.js';
 import { __pendingListUpdates } from '../list.js';
 import { __root, setRoot } from '../root.js';
+import { destroyBackground } from './destroy.js';
+import { applyRefQueue } from '../snapshot/workletRef.js';
 import { SnapshotInstance, __page, snapshotInstanceManager } from '../snapshot.js';
-import { takeGlobalRefPatchMap } from '../snapshot/ref.js';
 import { isEmptyObject } from '../utils.js';
 import { destroyWorklet } from '../worklet/destroy.js';
-import { destroyBackground } from './destroy.js';
 import { clearJSReadyEventIdSwap, isJSReady } from './event/jsReady.js';
 import { increaseReloadVersion } from './pass.js';
+import { setMainThreadHydrationFinished } from './patch/isMainThreadHydrationFinished.js';
 import { deinitGlobalSnapshotPatch } from './patch/snapshotPatch.js';
+import { shouldDelayUiOps } from './ref/delay.js';
 import { renderMainThread } from './render.js';
-import { setMainThreadHydrationFinished } from './patch/isMainThreadHydrationFinished.js';
 
-function reloadMainThread(data: any, options: UpdatePageOption): void {
+function reloadMainThread(data: unknown, options: UpdatePageOption): void {
   if (__PROFILE__) {
     console.profile('reloadTemplate');
   }
 
   increaseReloadVersion();
 
-  if (typeof data == 'object' && !isEmptyObject(data)) {
+  if (typeof data == 'object' && !isEmptyObject(data as Record<string, unknown>)) {
     Object.assign(lynx.__initData, data);
   }
 
@@ -51,13 +52,13 @@ function reloadMainThread(data: any, options: UpdatePageOption): void {
 
   // always call this before `__FlushElementTree`
   __pendingListUpdates.flush();
+  applyRefQueue();
 
   if (isJSReady) {
     __OnLifecycleEvent([
       LifecycleConstant.firstScreen, /* FIRST_SCREEN */
       {
         root: JSON.stringify(__root),
-        refPatch: JSON.stringify(takeGlobalRefPatchMap()),
       },
     ]);
   }
@@ -84,6 +85,8 @@ function reloadBackground(updateData: Record<string, any>): void {
   // COW when modify `lynx.__initData` to make sure Provider & Consumer works
   lynx.__initData = Object.assign({}, lynx.__initData, updateData);
 
+  shouldDelayUiOps.value = true;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   render(__root.__jsx, __root as any);
 
   if (__PROFILE__) {

package/runtime/src/lifecycle/render.ts

@@ -18,6 +18,7 @@ function renderMainThread(): void {
     process.env['NODE_ENV'] === 'test' && typeof __TESTING_FORCE_RENDER_TO_OPCODE__ !== 'undefined'
     && !__TESTING_FORCE_RENDER_TO_OPCODE__
   ) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     render(__root.__jsx, __root as any);
   } else {
     let opcodes;
@@ -25,8 +26,7 @@ function renderMainThread(): void {
       if (__PROFILE__) {
         console.profile('renderToString');
       }
-      // @ts-ignore
-      opcodes = renderToString(__root.__jsx);
+      opcodes = renderToString(__root.__jsx, undefined);
     } catch (e) {
       lynx.reportError(e as Error);
       opcodes = [];
@@ -39,6 +39,7 @@ function renderMainThread(): void {
     if (__PROFILE__) {
       console.profile('renderOpcodesInto');
     }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     renderOpcodesInto(opcodes, __root as any);
     if (__ENABLE_SSR__) {
       __root.__opcodes = opcodes;

package/runtime/src/lifecycleConstant.ts

@@ -1,13 +1,17 @@
 // 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.
-export class LifecycleConstant {
-  public static readonly firstScreen = 'rLynxFirstScreen';
-  public static readonly updateFromRoot = 'updateFromRoot';
-  public static readonly globalEventFromLepus = 'globalEventFromLepus';
-  public static readonly ref = 'rLynxRef';
-  public static readonly jsReady = 'rLynxJSReady';
-  public static readonly patchUpdate = 'rLynxChange';
+export const enum LifecycleConstant {
+  firstScreen = 'rLynxFirstScreen',
+  updateFromRoot = 'updateFromRoot',
+  globalEventFromLepus = 'globalEventFromLepus',
+  jsReady = 'rLynxJSReady',
+  patchUpdate = 'rLynxChange',
+}
+
+export interface FirstScreenData {
+  root: string;
+  jsReadyEventIdSwap: Record<string | number, number>;
 }
 
 export const enum NativeUpdateDataType {

package/runtime/src/list.ts

@@ -2,8 +2,8 @@
 // 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 { hydrate } from './hydrate.js';
-import { commitMainThreadPatchUpdate } from './lifecycle/patch/updateMainThread.js';
-import type { SnapshotInstance } from './snapshot.js';
+import { applyRefQueue } from './snapshot/workletRef.js';
+import { type SnapshotInstance } from './snapshot.js';
 
 export interface ListUpdateInfo {
   flush(): void;
@@ -294,10 +294,9 @@ export function componentAtIndexFactory(
           __FlushElementTree(root, { triggerLayout: true, operationID, elementID: sign, listID });
         } else if (enableBatchRender && asyncFlush) {
           __FlushElementTree(root, { asyncFlush: true });
-        } else {
-          // enableBatchRender == true && asyncFlush == false
-          // in this case, no need to invoke __FlushElementTree because in the end of componentAtIndexes(), the list will invoke __FlushElementTree.
         }
+        // enableBatchRender == true && asyncFlush == false
+        // in this case, no need to invoke __FlushElementTree because in the end of componentAtIndexes(), the list will invoke __FlushElementTree.
         return sign;
       } else {
         const newCtx = childCtx.takeElements();
@@ -311,7 +310,11 @@ export function componentAtIndexFactory(
       recycleSignMap.delete(sign);
       hydrate(oldCtx, childCtx);
       oldCtx.unRenderElements();
+      if (!oldCtx.__id) {
+        oldCtx.tearDown();
+      }
       const root = childCtx.__element_root!;
+      applyRefQueue();
       if (!enableBatchRender) {
         const flushOptions: FlushOptions = {
           triggerLayout: true,
@@ -339,7 +342,6 @@ export function componentAtIndexFactory(
         __FlushElementTree(root, flushOptions);
       }
       signMap.set(sign, childCtx);
-      commitMainThreadPatchUpdate(undefined);
       return sign;
     }
 
@@ -347,6 +349,7 @@ export function componentAtIndexFactory(
     const root = childCtx.__element_root!;
     __AppendElement(list, root);
     const sign = __GetElementUniqueID(root);
+    applyRefQueue();
     if (!enableBatchRender) {
       __FlushElementTree(root, {
         triggerLayout: true,
@@ -360,7 +363,6 @@ export function componentAtIndexFactory(
       });
     }
     signMap.set(sign, childCtx);
-    commitMainThreadPatchUpdate(undefined);
     return sign;
   };
 

package/runtime/src/lynx/calledByNative.ts

@@ -9,15 +9,16 @@ import { LifecycleConstant } from '../lifecycleConstant.js';
 import { __pendingListUpdates } from '../list.js';
 import { ssrHydrateByOpcodes } from '../opcodes.js';
 import { __root, setRoot } from '../root.js';
-import { takeGlobalRefPatchMap } from '../snapshot/ref.js';
 import { SnapshotInstance, __page, setupPage } from '../snapshot.js';
 import { isEmptyObject } from '../utils.js';
 import { PerformanceTimingKeys, markTiming, setPipeline } from './performance.js';
+import { applyRefQueue } from '../snapshot/workletRef.js';
 
 function ssrEncode() {
   const { __opcodes } = __root;
   delete __root.__opcodes;
 
+  // eslint-disable-next-line @typescript-eslint/unbound-method
   const oldToJSON = SnapshotInstance.prototype.toJSON;
   SnapshotInstance.prototype.toJSON = function(this: SnapshotInstance): any {
     return [
@@ -44,8 +45,13 @@ function ssrHydrate(info: string) {
   setupPage(nativePage);
   const refsMap = __GetTemplateParts(nativePage);
 
-  const { __opcodes, __root_values } = JSON.parse(info);
-  __root_values && __root.setAttribute('values', __root_values);
+  const { __opcodes, __root_values } = JSON.parse(info) as {
+    __opcodes: unknown[];
+    __root_values: unknown[] | undefined;
+  };
+  if (__root_values) {
+    __root.setAttribute('values', __root_values);
+  }
   ssrHydrateByOpcodes(__opcodes, __root as SnapshotInstance, refsMap);
 
   (__root as SnapshotInstance).__elements = [nativePage];
@@ -74,11 +80,11 @@ function injectCalledByNative(): void {
   });
 }
 
-function renderPage(data: any): void {
+function renderPage(data: Record<string, unknown> | undefined): void {
   // reset `jsReady` state
   resetJSReady();
 
-  lynx.__initData = data || {};
+  lynx.__initData = data ?? {};
 
   setupPage(__CreatePage('0', 0));
   (__root as SnapshotInstance).ensureElements();
@@ -88,13 +94,14 @@ function renderPage(data: any): void {
   // always call this before `__FlushElementTree`
   // (There is an implicit `__FlushElementTree` in `renderPage`)
   __pendingListUpdates.flush();
+  applyRefQueue();
 
   if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') {
     jsReady();
   }
 }
 
-function updatePage(data: any, options?: UpdatePageOption): void {
+function updatePage(data: Record<string, unknown> | undefined, options?: UpdatePageOption): void {
   if (options?.reloadTemplate) {
     reloadMainThread(data, options);
     return;
@@ -118,9 +125,6 @@ function updatePage(data: any, options?: UpdatePageOption): void {
     markTiming(PerformanceTimingKeys.updateDiffVdomStart);
     {
       __pendingListUpdates.clear();
-
-      // ignore ref & unref before jsReady
-      takeGlobalRefPatchMap();
       renderMainThread();
       // As said by codename `jsReadyEventIdSwap`, this swap will only be used for event remap,
       // because ref & unref cause by previous render will be ignored
@@ -132,6 +136,7 @@ function updatePage(data: any, options?: UpdatePageOption): void {
 
       // always call this before `__FlushElementTree`
       __pendingListUpdates.flush();
+      applyRefQueue();
     }
     markTiming(PerformanceTimingKeys.updateDiffVdomEnd);
   }

package/runtime/src/lynx/component.ts

@@ -1,6 +1,9 @@
 // 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.
+
+/* eslint-disable */
+
 import { Component } from 'preact';
 
 import { PerfSpecificKey, PerformanceTimingKeys, markTimingLegacy } from './performance.js';
@@ -20,11 +23,14 @@ if (__JS__) {
         ),
       );
     }
+    // @ts-expect-error hack lynx-kernel
     return lynxCoreInject.tt._reactLynx.ReactComponent.prototype.getNodeRef
       .call(
         {
           _type: '',
+          // @ts-expect-error hack lynx-kernel
           _nativeApp: lynxCoreInject.tt._nativeApp,
+          // @ts-expect-error hack lynx-kernel
           _uiModule: lynxCoreInject.tt._nativeApp.nativeModuleProxy.LynxUIMethodModule,
           _reactAppInstance: lynxCoreInject.tt,
         },
@@ -41,11 +47,14 @@ if (__JS__) {
         ),
       );
     }
+    // @ts-expect-error hack lynx-kernel
     return lynxCoreInject.tt._reactLynx.ReactComponent.prototype
       .getNodeRefFromRoot.call(
         {
           _type: '',
+          // @ts-expect-error hack lynx-kernel
           _nativeApp: lynxCoreInject.tt._nativeApp,
+          // @ts-expect-error hack lynx-kernel
           _uiModule: lynxCoreInject.tt._nativeApp.nativeModuleProxy.LynxUIMethodModule,
           _reactAppInstance: lynxCoreInject.tt,
         },

package/runtime/src/lynx/dynamic-js.ts

@@ -9,6 +9,7 @@ export function loadDynamicJS<T>(url: string): Promise<T> {
       new Error(`A dynamic import (to "${url}") is leaked to Lepus bundle.`),
       { errorCode: 202 },
     );
+    // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
     return Promise.reject();
   }
   return new Promise((resolve, reject) => {
@@ -22,7 +23,10 @@ export function loadDynamicJS<T>(url: string): Promise<T> {
   });
 }
 
-export function __dynamicImport<T>(url: string, options?: any): Promise<T> {
+export function __dynamicImport<T>(
+  url: string,
+  options?: { with?: { type?: 'component' | 'tsx' | 'jsx' } },
+): Promise<T> {
   const t = options?.with?.type;
   if (t === 'component' || t === 'tsx' || t === 'jsx') {
     return loadLazyBundle<any>(url);