@lynx-js/react 0.109.2 → 0.110.0

package/runtime/src/lynx/env.ts

@@ -1,25 +1,24 @@
 // 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 { DataProcessorDefinition } from '../lynx-api.js';
+import type { DataProcessorDefinition, InitData, InitDataRaw } from '../lynx-api.js';
 
-export function setupLynxTestingEnv(): void {
+export function setupLynxEnv(): void {
   if (!__LEPUS__) {
     const { initData, updateData } = lynxCoreInject.tt._params;
-    // @ts-ignore
     lynx.__initData = { ...initData, ...updateData };
     lynx.registerDataProcessors = function() {};
   }
 
   if (__LEPUS__) {
-    // @ts-ignore
     lynx.__initData = {
       /* available only in renderPage */
     };
-    // @ts-ignore
-    globalThis.SystemInfo = lynx.SystemInfo || {};
+    // @ts-expect-error no type for lynx.SystemInfo
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    globalThis.SystemInfo = lynx.SystemInfo ?? {};
 
-    lynx.reportError = function(e: any) {
+    lynx.reportError = function(e: Error) {
       _ReportError(e, {
         errorCode: 1101, // ErrCode::LYNX_ERROR_CODE_LEPUS in Lynx/base/debug/error_code.h
       });
@@ -33,13 +32,14 @@ export function setupLynxTestingEnv(): void {
     };
 
     {
+      // eslint-disable-next-line unicorn/consistent-function-scoping
       function __name(empty: string) {
         return `Native${empty}Modules`;
       }
       // TODO(hongzhiyuan.hzy): make sure this is run before any other code (especially code access `NativeModules`)
-      // @ts-ignore
+      // @ts-expect-error hack
       if (typeof globalThis[__name('')] === 'undefined') {
-        // @ts-ignore
+        // @ts-expect-error hack
         globalThis[__name('')] = undefined;
       }
     }
@@ -48,13 +48,12 @@ export function setupLynxTestingEnv(): void {
       dataProcessorDefinition?: DataProcessorDefinition,
     ) {
       let hasDefaultDataProcessorExecuted = false;
-      // @ts-ignore
       globalThis.processData = (data, processorName) => {
         if (__PROFILE__) {
           console.profile('processData');
         }
 
-        let r;
+        let r: InitData | InitDataRaw;
         try {
           if (processorName) {
             r = dataProcessorDefinition?.dataProcessors?.[processorName]?.(data)
@@ -63,7 +62,7 @@ export function setupLynxTestingEnv(): void {
             r = dataProcessorDefinition?.defaultDataProcessor?.(data) ?? data;
           }
         } catch (e: any) {
-          lynx.reportError(e);
+          lynx.reportError(e as Error);
           // when there is an error
           // we should perform like dataProcessor returns nothing
           // so use `{}` rather than `data`
@@ -75,20 +74,22 @@ export function setupLynxTestingEnv(): void {
         }
 
         if (hasDefaultDataProcessorExecuted === false) {
-          // @ts-ignore
+          // @ts-expect-error todo: add types to i18n logic
           if (globalThis.__I18N_RESOURCE_TRANSLATION__) {
             r = {
               ...r,
-              // @ts-ignore
+              // @ts-expect-error todo: add types to i18n logic
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               __I18N_RESOURCE_TRANSLATION__: globalThis.__I18N_RESOURCE_TRANSLATION__,
             };
           }
 
-          // @ts-ignore
+          // @ts-expect-error todo: add types to __EXTRACT_STR__
           if (__EXTRACT_STR__) {
             r = {
               ...r,
-              // @ts-ignore
+              // @ts-expect-error todo: add types to __EXTRACT_STR__
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
               _EXTRACT_STR: __EXTRACT_STR_IDENT_FLAG__,
             };
           }
@@ -100,7 +101,6 @@ export function setupLynxTestingEnv(): void {
         }
 
         return r;
-        // TODO
       };
     };
 

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

@@ -9,18 +9,24 @@ import { Fragment, lazy as backgroundLazy, createElement } from 'preact/compat';
  * const App2 = lazy(() => import("./x").then(({App2}) => ({default: App2})))
  * @internal
  */
-export const makeSyncThen = function<T>(result: T) {
-  return function(this: Promise<T>, onF?: Function): Promise<T> {
+export const makeSyncThen = function<T>(result: T): Promise<T>['then'] {
+  return function<TR1 = T, TR2 = never>(
+    this: Promise<T>,
+    onF?: ((value: T) => TR1 | PromiseLike<TR1>) | null,
+    _onR?: ((reason: any) => TR2 | PromiseLike<TR2>) | null,
+  ): Promise<TR1 | TR2> {
     if (onF) {
-      let ret;
+      let ret: TR1 | PromiseLike<TR1>;
       try {
         ret = onF(result);
       } catch (e) {
-        return Promise.reject(e);
+        // if (onR) {
+        //   return Promise.resolve(onR(e));
+        // }
+        return Promise.reject(e as Error);
       }
 
-      // @ts-ignore
-      if (ret && typeof ret.then === 'function' /* `thenable` object */) {
+      if (ret && typeof (ret as PromiseLike<TR1>).then === 'function' /* `thenable` object */) {
         // lazy(() =>
         //   import("./x").then(() => new Promise(...))
         // )
@@ -39,12 +45,14 @@ export const makeSyncThen = function<T>(result: T) {
       }
 
       const p = Promise.resolve(ret);
-      // @ts-ignore
-      p.then = makeSyncThen(ret);
-      return p;
+
+      const then = makeSyncThen(ret as TR1);
+      p.then = then as Promise<Awaited<TR1>>['then'];
+
+      return p as Promise<TR1 | TR2>;
     }
 
-    return this;
+    return this as Promise<TR1 | TR2>;
   };
 };
 
@@ -66,7 +74,7 @@ export const loadLazyBundle: <
       const query = __QueryComponent(source);
       let result: T;
       try {
-        result = query.evalResult;
+        result = query.evalResult as T;
       } catch (e) {
         // Here we cannot return a rejected promise
         // (which will eventually be an unhandled rejection and cause unnecessary redbox)
@@ -79,12 +87,11 @@ export const loadLazyBundle: <
       // Why we should modify the implementation of `then`?
       // We should make it `sync` so lepus first-screen render can use result above instantly
       // We also should keep promise shape
-      // @ts-ignore
       r.then = makeSyncThen(result);
       return r;
     } else if (__JS__) {
       return new Promise((resolve, reject) => {
-        const callback: (result: any) => void = result => {
+        const callback: (result: { code: number; detail: { schema: string } }) => void = result => {
           const { code, detail } = result;
           if (code === 0) {
             const { schema } = detail;
@@ -92,7 +99,7 @@ export const loadLazyBundle: <
             // `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);
+              resolve(exports as T);
               return;
             }
           }
@@ -121,6 +128,7 @@ export function mainThreadLazy<T>(loader: () => Promise<{ default: T } | T>) {
   function _Lazy(props: any) {
     try {
       // @ts-expect-error `Lazy` returned from `backgroundLazy` should be a FC
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
       return Lazy(props);
     } catch (e) {
       // We should never throw at mainThread

package/runtime/src/lynx/performance.ts

@@ -4,8 +4,8 @@
 import { options } from 'preact';
 import type { VNode } from 'preact';
 
-import { DIFF } from '../renderToOpcodes/constants.js';
 import { __globalSnapshotPatch } from '../lifecycle/patch/snapshotPatch.js';
+import { DIFF } from '../renderToOpcodes/constants.js';
 import { isSdkVersionGt } from '../utils.js';
 
 enum PerformanceTimingKeys {

package/runtime/src/lynx/runWithForce.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 { options } from 'preact';
-import type { VNode } from 'preact';
+import type { Component, VNode } from 'preact';
+
 import { COMPONENT, DIFF, DIFFED, FORCE } from '../renderToOpcodes/constants.js';
 
 const sForcedVNode = Symbol('FORCE');
@@ -8,7 +12,7 @@ type PatchedVNode = VNode & { [sForcedVNode]?: true };
 
 export function runWithForce(cb: () => void): void {
   // save vnode and its `_component` in WeakMap
-  const m = new WeakMap<VNode, any>();
+  const m = new WeakMap<VNode, Component>();
 
   const oldDiff = options[DIFF];
 
@@ -22,13 +26,13 @@ export function runWithForce(cb: () => void): void {
     // but it will be set later
     Object.defineProperty(vnode, COMPONENT, {
       configurable: true,
-      set(c) {
+      set(c: Component) {
         m.set(vnode, c);
         if (c) {
           c[FORCE] = true;
         }
       },
-      get() {
+      get(): Component | undefined {
         return m.get(vnode);
       },
     });
@@ -50,7 +54,7 @@ export function runWithForce(cb: () => void): void {
       delete vnode[COMPONENT];
       delete vnode[sForcedVNode];
       // restore
-      vnode[COMPONENT] = m.get(vnode);
+      vnode[COMPONENT] = m.get(vnode)!;
     }
   };
 

package/runtime/src/lynx/tt.ts

@@ -4,6 +4,7 @@
 import { render } from 'preact';
 
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
+import type { FirstScreenData } from '../lifecycleConstant.js';
 import {
   PerformanceTimingFlags,
   PerformanceTimingKeys,
@@ -18,17 +19,18 @@ import { delayedEvents, delayedPublishEvent } from '../lifecycle/event/delayEven
 import { delayLifecycleEvent, delayedLifecycleEvents } from '../lifecycle/event/delayLifecycleEvents.js';
 import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patch/commit.js';
 import type { PatchList } from '../lifecycle/patch/commit.js';
+import { removeCtxNotFoundEventListener } from '../lifecycle/patch/error.js';
+import { runDelayedUiOps } from '../lifecycle/ref/delay.js';
 import { reloadBackground } from '../lifecycle/reload.js';
 import { CHILDREN } from '../renderToOpcodes/constants.js';
 import { __root } from '../root.js';
-import { globalRefsToSet, updateBackgroundRefs } from '../snapshot/ref.js';
 import { backgroundSnapshotInstanceManager } from '../snapshot.js';
+import type { SerializedSnapshotInstance } from '../snapshot.js';
 import { destroyWorklet } from '../worklet/destroy.js';
 
 export { runWithForce };
 
 function injectTt(): void {
-  // @ts-ignore
   const tt = lynxCoreInject.tt;
   tt.OnLifecycleEvent = onLifecycleEvent;
   tt.publishEvent = delayedPublishEvent;
@@ -36,6 +38,7 @@ function injectTt(): void {
   tt.callDestroyLifetimeFun = () => {
     destroyWorklet();
     destroyBackground();
+    removeCtxNotFoundEventListener();
   };
   tt.updateGlobalProps = updateGlobalProps;
   tt.updateCardData = updateCardData;
@@ -45,7 +48,7 @@ function injectTt(): void {
   };
 }
 
-function onLifecycleEvent([type, data]: [string, any]) {
+function onLifecycleEvent([type, data]: [LifecycleConstant, unknown]) {
   const hasRootRendered = CHILDREN in __root;
   // never called `render(<App/>, __root)`
   // happens if user call `root.render()` async
@@ -69,16 +72,16 @@ function onLifecycleEvent([type, data]: [string, any]) {
   }
 }
 
-function onLifecycleEventImpl(type: string, data: any): void {
+function onLifecycleEventImpl(type: LifecycleConstant, data: unknown): void {
   switch (type) {
     case LifecycleConstant.firstScreen: {
-      const { root: lepusSide, refPatch, jsReadyEventIdSwap } = data;
+      const { root: lepusSide, jsReadyEventIdSwap } = data as FirstScreenData;
       if (__PROFILE__) {
         console.profile('hydrate');
       }
       beginPipeline(true, PipelineOrigins.reactLynxHydrate, PerformanceTimingFlags.reactLynxHydrate);
       markTiming(PerformanceTimingKeys.hydrateParseSnapshotStart);
-      const before = JSON.parse(lepusSide);
+      const before = JSON.parse(lepusSide) as SerializedSnapshotInstance;
       markTiming(PerformanceTimingKeys.hydrateParseSnapshotEnd);
       markTiming(PerformanceTimingKeys.diffVdomStart);
       const snapshotPatch = hydrate(
@@ -95,8 +98,9 @@ function onLifecycleEventImpl(type: string, data: any): void {
       if (delayedEvents) {
         delayedEvents.forEach((args) => {
           const [handlerName, data] = args;
+          // eslint-disable-next-line prefer-const
           let [idStr, ...rest] = handlerName.split(':');
-          while (jsReadyEventIdSwap[idStr!]) idStr = jsReadyEventIdSwap[idStr!];
+          while (jsReadyEventIdSwap[idStr!]) idStr = jsReadyEventIdSwap[idStr!]?.toString();
           try {
             publishEvent([idStr, ...rest].join(':'), data);
           } catch (e) {
@@ -109,16 +113,6 @@ function onLifecycleEventImpl(type: string, data: any): void {
       lynxCoreInject.tt.publishEvent = publishEvent;
       lynxCoreInject.tt.publicComponentEvent = publicComponentEvent;
 
-      if (__PROFILE__) {
-        console.profile('patchRef');
-      }
-      if (refPatch) {
-        globalRefsToSet.set(0, JSON.parse(refPatch));
-        updateBackgroundRefs(0);
-      }
-      if (__PROFILE__) {
-        console.profileEnd();
-      }
       // console.debug("********** After hydration:");
       // printSnapshotInstance(__root as BackgroundSnapshotInstance);
       if (__PROFILE__) {
@@ -131,7 +125,6 @@ function onLifecycleEventImpl(type: string, data: any): void {
       const obj = commitPatchUpdate(patchList, { isHydration: true });
 
       lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
-        updateBackgroundRefs(commitTaskId);
         globalCommitTaskMap.forEach((commitTask, id) => {
           if (id > commitTaskId) {
             return;
@@ -140,23 +133,14 @@ function onLifecycleEventImpl(type: string, data: any): void {
           globalCommitTaskMap.delete(id);
         });
       });
+      runDelayedUiOps();
       break;
     }
     case LifecycleConstant.globalEventFromLepus: {
-      const [eventName, params] = data;
+      const [eventName, params] = data as [string, Record<string, any>];
       lynx.getJSModule('GlobalEventEmitter').trigger(eventName, params);
       break;
     }
-    case LifecycleConstant.ref: {
-      const { refPatch, commitTaskId } = data;
-      if (commitTaskId) {
-        globalRefsToSet.set(commitTaskId, JSON.parse(refPatch));
-      } else {
-        globalRefsToSet.set(0, JSON.parse(refPatch));
-        updateBackgroundRefs(0);
-      }
-      break;
-    }
   }
 }
 
@@ -175,14 +159,13 @@ function flushDelayedLifecycleEvents(): void {
 }
 
 function publishEvent(handlerName: string, data: unknown) {
-  // TODO: delay js events until js ready
   lynxCoreInject.tt.callBeforePublishEvent?.(data);
   const eventHandler = backgroundSnapshotInstanceManager.getValueBySign(
     handlerName,
   );
   if (eventHandler) {
     try {
-      (eventHandler as Function)(data);
+      (eventHandler as (...args: unknown[]) => void)(data);
     } catch (e) {
       lynx.reportError(e as Error);
     }
@@ -204,10 +187,11 @@ function updateGlobalProps(newData: Record<string, any>): void {
   // can be batched with updateFromRoot
   // This is already done because updateFromRoot will consume all dirty flags marked by
   // the setState, and setState's flush will be a noop. No extra diffs will be needed.
-  Promise.resolve().then(() => {
+  void Promise.resolve().then(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     runWithForce(() => render(__root.__jsx, __root as any));
   });
-  lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged');
+  lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged', undefined);
 }
 
 function updateCardData(newData: Record<string, any>, options?: Record<string, any>): void {
@@ -219,16 +203,14 @@ function updateCardData(newData: Record<string, any>, options?: Record<string, a
       ),
     );
   }
-  const { type = NativeUpdateDataType.UPDATE } = options || {};
+  const { type = NativeUpdateDataType.UPDATE } = options ?? {};
   if (type == NativeUpdateDataType.RESET) {
-    // @ts-ignore
     lynx.__initData = {};
   }
 
   // COW when modify `lynx.__initData` to make sure Provider & Consumer works
-  // @ts-ignore
   lynx.__initData = Object.assign({}, lynx.__initData, restNewData);
-  lynxCoreInject.tt.GlobalEventEmitter.emit('onDataChanged');
+  lynxCoreInject.tt.GlobalEventEmitter.emit('onDataChanged', undefined);
 }
 
 export { injectTt, flushDelayedLifecycleEvents };

package/runtime/src/lynx-api.ts

@@ -235,7 +235,7 @@ export interface DataProcessorDefinition {
    *
    * @public
    */
-  dataProcessors?: Record<string, Function>;
+  dataProcessors?: Record<string, ((rawInitData: InitDataRaw) => InitData)>;
 }
 
 /**

package/runtime/src/lynx.ts

@@ -7,14 +7,15 @@ import './hooks/react.js';
 
 import { initProfileHook } from './debug/profile.js';
 import { document, setupBackgroundDocument } from './document.js';
-import { initDelayUnmount } from './lifecycle/delayUnmount.js';
-import { replaceCommitHook, replaceRequestAnimationFrame } from './lifecycle/patch/commit.js';
+import { replaceCommitHook } from './lifecycle/patch/commit.js';
+import { addCtxNotFoundEventListener } from './lifecycle/patch/error.js';
 import { injectUpdateMainThread } from './lifecycle/patch/updateMainThread.js';
 import { injectCalledByNative } from './lynx/calledByNative.js';
-import { setupLynxTestingEnv } from './lynx/env.js';
+import { setupLynxEnv } from './lynx/env.js';
 import { injectLepusMethods } from './lynx/injectLepusMethods.js';
 import { initTimingAPI } from './lynx/performance.js';
 import { injectTt } from './lynx/tt.js';
+
 export { runWithForce } from './lynx/runWithForce.js';
 
 // @ts-expect-error Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature
@@ -44,14 +45,13 @@ if (__BACKGROUND__) {
   options.document = document as any;
   setupBackgroundDocument();
   injectTt();
+  addCtxNotFoundEventListener();
 
   if (process.env['NODE_ENV'] === 'test') {}
   else {
     replaceCommitHook();
-    replaceRequestAnimationFrame();
     initTimingAPI();
-    initDelayUnmount();
   }
 }
 
-setupLynxTestingEnv();
+setupLynxEnv();