@lynx-js/react 0.109.2 → 0.110.1

package/runtime/src/listUpdateInfo.ts

@@ -0,0 +1,221 @@
+// 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 { hydrate } from './hydrate.js';
+import { componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import type { SnapshotInstance } from './snapshot.js';
+
+export interface ListUpdateInfo {
+  flush(): void;
+  onInsertBefore(
+    newNode: SnapshotInstance,
+    existingNode?: SnapshotInstance,
+  ): void;
+  onRemoveChild(child: SnapshotInstance): void;
+  onSetAttribute(child: SnapshotInstance, attr: any, oldAttr: any): void;
+}
+
+// class ListUpdateInfoDiffing implements ListUpdateInfo {
+//   private oldChildNodes: SnapshotInstance[];
+//   constructor(private list: SnapshotInstance) {
+//     this.oldChildNodes = list.childNodes;
+//   }
+//   flush(): void {
+//     Object.defineProperty(SnapshotInstance.prototype, "key", {
+//       get: function () {
+//         return this.values[0]["item-key"];
+//       },
+//     });
+
+//   }
+//   onInsertBefore(newNode: SnapshotInstance, existingNode?: SnapshotInstance | undefined): void {}
+//   onRemoveChild(child: SnapshotInstance): void {}
+//   onSetAttribute(child: SnapshotInstance, attr: any): void {
+//     throw new Error("Method not implemented.");
+//   }
+// }
+
+interface InsertAction {
+  position: number;
+  type: string;
+}
+
+interface UpdateAction {
+  from: number;
+  to: number;
+  type: string;
+  flush: boolean;
+}
+
+interface ListOperations {
+  insertAction: InsertAction[];
+  removeAction: number[];
+  updateAction: UpdateAction[];
+}
+
+export class ListUpdateInfoRecording implements ListUpdateInfo {
+  constructor(private list: SnapshotInstance) {
+    this.oldChildNodes = list.childNodes;
+    // this.oldChildNodesSet = new Set(this.oldChildNodes);
+  }
+
+  // private __commitAndReset() {
+  //   (this.__pendingAttributes ??= []).push(this.__toAttribute());
+  //   this.oldChildNodes = this.list.childNodes;
+  //   this.oldChildNodesSet = new Set(this.oldChildNodes);
+  //   this.removeChild1.clear();
+  //   this.removeChild2.clear();
+  //   this.insertBefore.clear();
+  //   this.appendChild.length = 0;
+  //   this.platformInfoUpdate.clear();
+  // }
+
+  flush(): void {
+    const elementIndex = this.list.__snapshot_def.slot[0]![1];
+    const listElement = this.list.__elements![elementIndex]!;
+    // this.__pendingAttributes?.forEach(pendingAttribute => {
+    //   __SetAttribute(listElement, "update-list-info", pendingAttribute);
+    //   __FlushElementTree(listElement);
+    // });
+    __SetAttribute(listElement, 'update-list-info', this.__toAttribute());
+    const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(this.list.childNodes, hydrate);
+    __UpdateListCallbacks(
+      listElement,
+      componentAtIndex,
+      enqueueComponentFactory(),
+      componentAtIndexes,
+    );
+  }
+
+  private oldChildNodes: SnapshotInstance[];
+  // private oldChildNodesSet: Set<SnapshotInstance>;
+  private removeChild = new Set<SnapshotInstance>();
+  private insertBefore = new Map<SnapshotInstance, SnapshotInstance[]>(); // insert V before K
+  private appendChild = [] as SnapshotInstance[];
+  private platformInfoUpdate = new Map<SnapshotInstance, any>();
+
+  onInsertBefore(newNode: SnapshotInstance, existingNode?: SnapshotInstance): void {
+    if (newNode.parentNode) {
+      // if (!this.oldChildNodesSet.has(newNode)) {
+      //   this.__commitAndReset();
+      // }
+      this.removeChild.add(newNode);
+    }
+    if (existingNode) {
+      // if (!this.oldChildNodesSet.has(existingNode)) {
+      //   this.__commitAndReset();
+      // }
+      const newChildren = this.insertBefore.get(existingNode) ?? [];
+      newChildren.push(newNode);
+      this.insertBefore.set(existingNode, newChildren);
+    } else {
+      this.appendChild.push(newNode);
+    }
+  }
+
+  onRemoveChild(child: SnapshotInstance): void {
+    // if (!this.oldChildNodesSet.has(child)) {
+    //   this.__commitAndReset();
+    // }
+    this.removeChild.add(child);
+  }
+
+  onSetAttribute(child: SnapshotInstance, attr: any, _oldAttr: any): void {
+    this.platformInfoUpdate.set(child, attr);
+  }
+
+  private __toAttribute(): ListOperations {
+    const { removeChild, insertBefore, appendChild, platformInfoUpdate } = this;
+
+    const removals: number[] = [];
+    const insertions: InsertAction[] = [];
+    const updates: UpdateAction[] = [];
+
+    let j = 0;
+    for (let i = 0; i < this.oldChildNodes.length; i++, j++) {
+      const child = this.oldChildNodes[i]!;
+      if (platformInfoUpdate.has(child)) {
+        updates.push({
+          ...platformInfoUpdate.get(child),
+          from: +j,
+          to: +j,
+          // no flush
+          flush: false,
+          type: child.type,
+        } as UpdateAction);
+      }
+      if (insertBefore.has(child)) {
+        const children = insertBefore.get(child)!;
+        children.forEach(c => {
+          insertions.push({
+            position: j,
+            type: c.type,
+            ...c.__listItemPlatformInfo,
+          } as InsertAction);
+          j++;
+        });
+      }
+      if (removeChild.has(child)) {
+        removals.push(i);
+        removeChild.delete(child);
+        j--;
+      }
+    }
+    for (let i = 0; i < appendChild.length; i++) {
+      const child = appendChild[i]!;
+      insertions.push({
+        position: j + i,
+        type: child.type,
+        ...child.__listItemPlatformInfo,
+      } as InsertAction);
+    }
+
+    insertions.sort((a, b) => a.position - b.position);
+    removals.sort((a, b) => a - b);
+
+    if (
+      SystemInfo.lynxSdkVersion === '2.14'
+      || SystemInfo.lynxSdkVersion === '2.15'
+      || SystemInfo.lynxSdkVersion === '2.16'
+      || SystemInfo.lynxSdkVersion === '2.17'
+      || SystemInfo.lynxSdkVersion === '2.18'
+    ) {
+      const elementIndex = this.list.__snapshot_def.slot[0]![1];
+      const listElement = this.list.__elements![elementIndex]!;
+
+      // `__GetAttributeByName` is available since Lynx 2.14
+      if (__GetAttributeByName(listElement, 'custom-list-name') === 'list-container') {
+        // `updateAction` must be full (not incremental) when Lynx version <= 2.18 and
+        // when `custom-list-name` is `list-container` (available when Lynx version >= 2.14) is true,
+        updates.length = 0;
+        this.list.childNodes.forEach((child, index) => {
+          updates.push({
+            ...child.__listItemPlatformInfo,
+            from: index,
+            to: index,
+            // no flush
+            flush: false,
+            type: child.type,
+          } as UpdateAction);
+        });
+      }
+    }
+
+    return {
+      insertAction: insertions,
+      removeAction: removals,
+      updateAction: updates,
+    };
+  }
+
+  toJSON(): [ListOperations] {
+    // if (this.__pendingAttributes) {
+    //   return [...this.__pendingAttributes, this.__toAttribute()];
+    // } else {
+    //   return [this.__toAttribute()];
+    // }
+
+    return [this.__toAttribute()] as const;
+  }
+}

package/runtime/src/lynx/calledByNative.ts

@@ -6,10 +6,10 @@ import { isJSReady, jsReady, jsReadyEventIdSwap, resetJSReady } from '../lifecyc
 import { reloadMainThread } from '../lifecycle/reload.js';
 import { renderMainThread } from '../lifecycle/render.js';
 import { LifecycleConstant } from '../lifecycleConstant.js';
-import { __pendingListUpdates } from '../list.js';
 import { ssrHydrateByOpcodes } from '../opcodes.js';
+import { __pendingListUpdates } from '../pendingListUpdates.js';
 import { __root, setRoot } from '../root.js';
-import { takeGlobalRefPatchMap } from '../snapshot/ref.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';
@@ -18,6 +18,7 @@ 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);

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)!;
     }
   };