@lynx-js/react 0.109.2 → 0.110.1

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

@@ -11,27 +11,28 @@ import { render } from 'preact';
 
 import { hydrate } from '../hydrate.js';
 import { LifecycleConstant } from '../lifecycleConstant.js';
-import { __pendingListUpdates } from '../list.js';
+import { __pendingListUpdates } from '../pendingListUpdates.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

@@ -1,240 +1,12 @@
 // 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 { hydrate } from './hydrate.js';
-import { commitMainThreadPatchUpdate } from './lifecycle/patch/updateMainThread.js';
+import { applyRefQueue } from './snapshot/workletRef.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;
-}
-
-interface InsertAction {
-  position: number;
-  type: string;
-}
-
-interface UpdateAction {
-  from: number;
-  to: number;
-  type: string;
-  flush: boolean;
-}
-
-interface ListOperations {
-  insertAction: InsertAction[];
-  removeAction: number[];
-  updateAction: UpdateAction[];
-}
-
-// 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.");
-//   }
-// }
-
-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);
-    __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 {
-    // @ts-ignore
-    if (newNode.__parent) {
-      // 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,
-        });
-      }
-      if (insertBefore.has(child)) {
-        const children = insertBefore.get(child)!;
-        children.forEach(c => {
-          insertions.push({
-            position: j,
-            type: c.type,
-            ...c.__listItemPlatformInfo,
-          });
-          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,
-      });
-    }
-
-    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,
-          });
-        });
-      }
-    }
-
-    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;
-  }
-}
-
-export const __pendingListUpdates = {
-  values: {} as Record<number, ListUpdateInfo>,
-  clear(): void {
-    this.values = {};
-  },
-  flush(): void {
-    Object.values(this.values).forEach(update => {
-      update.flush();
-    });
-    this.clear();
-  },
-};
-
 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();
 
 export function clearListGlobal(): void {
   for (const key in gSignMap) {
@@ -247,7 +19,25 @@ export function clearListGlobal(): void {
 
 export function componentAtIndexFactory(
   ctx: SnapshotInstance[],
+  hydrateFunction: (before: SnapshotInstance, after: SnapshotInstance) => void,
 ): [ComponentAtIndexCallback, ComponentAtIndexesCallback] {
+  // A hack workaround to ensure childCtx has no direct reference through `__parent` to list,
+  // to avoid memory leak.
+  // TODO(hzy): make `__parent` a WeakRef or `#__parent` in the future.
+  ctx.forEach((childCtx) => {
+    if (gParentWeakMap.has(childCtx)) {
+      // do it only once
+    } else {
+      gParentWeakMap.set(childCtx, childCtx.parentNode!);
+      Object.defineProperty(childCtx, '__parent', {
+        get: () => gParentWeakMap.get(childCtx)!,
+        set: (value: unknown) => {
+          gParentWeakMap.set(childCtx, value);
+        },
+      });
+    }
+  });
+
   const componentAtIndex = (
     list: FiberElement,
     listID: number,
@@ -268,7 +58,7 @@ export function componentAtIndexFactory(
       throw new Error('childCtx not found');
     }
 
-    const platformInfo = childCtx.__listItemPlatformInfo || {};
+    const platformInfo = childCtx.__listItemPlatformInfo ?? {};
 
     const uniqID = childCtx.type + (platformInfo['reuse-identifier'] ?? '');
     const recycleSignMap = recycleMap.get(uniqID);
@@ -294,10 +84,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();
@@ -309,9 +98,13 @@ export function componentAtIndexFactory(
       const [first] = recycleSignMap;
       const [sign, oldCtx] = first!;
       recycleSignMap.delete(sign);
-      hydrate(oldCtx, childCtx);
+      hydrateFunction(oldCtx, childCtx);
       oldCtx.unRenderElements();
+      if (!oldCtx.__id) {
+        oldCtx.tearDown();
+      }
       const root = childCtx.__element_root!;
+      applyRefQueue();
       if (!enableBatchRender) {
         const flushOptions: FlushOptions = {
           triggerLayout: true,
@@ -322,7 +115,7 @@ export function componentAtIndexFactory(
         if (enableReuseNotification) {
           flushOptions.listReuseNotification = {
             listElement: list,
-            itemKey: platformInfo['item-key'],
+            itemKey: platformInfo['item-key']!,
           };
         }
         __FlushElementTree(root, flushOptions);
@@ -333,13 +126,12 @@ export function componentAtIndexFactory(
         if (enableReuseNotification) {
           flushOptions.listReuseNotification = {
             listElement: list,
-            itemKey: platformInfo['item-key'],
+            itemKey: platformInfo['item-key']!,
           };
         }
         __FlushElementTree(root, flushOptions);
       }
       signMap.set(sign, childCtx);
-      commitMainThreadPatchUpdate(undefined);
       return sign;
     }
 
@@ -347,6 +139,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 +153,6 @@ export function componentAtIndexFactory(
       });
     }
     signMap.set(sign, childCtx);
-    commitMainThreadPatchUpdate(undefined);
     return sign;
   };
 
@@ -387,6 +179,7 @@ export function componentAtIndexFactory(
 }
 
 export function enqueueComponentFactory(): EnqueueComponentCallback {
+  // eslint-disable-next-line unicorn/consistent-function-scoping
   const enqueueComponent = (_: FiberElement, listID: number, sign: number) => {
     const signMap = gSignMap[listID];
     const recycleMap = gRecycleMap[listID];
@@ -399,7 +192,7 @@ export function enqueueComponentFactory(): EnqueueComponentCallback {
       return;
     }
 
-    const platformInfo = childCtx.__listItemPlatformInfo || {};
+    const platformInfo = childCtx.__listItemPlatformInfo ?? {};
 
     const uniqID = childCtx.type + (platformInfo['reuse-identifier'] ?? '');
     if (!recycleMap.has(uniqID)) {
@@ -409,32 +202,3 @@ export function enqueueComponentFactory(): EnqueueComponentCallback {
   };
   return enqueueComponent;
 }
-
-export function snapshotCreateList(
-  pageId: number,
-  _ctx: SnapshotInstance,
-  _expIndex: number,
-): FiberElement {
-  const signMap = new Map<number, SnapshotInstance>();
-  const recycleMap = new Map<string, Map<number, SnapshotInstance>>();
-  const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory([]);
-  const list = __CreateList(
-    pageId,
-    componentAtIndex,
-    enqueueComponentFactory(),
-    {},
-    componentAtIndexes,
-  );
-  const listID = __GetElementUniqueID(list);
-  gSignMap[listID] = signMap;
-  gRecycleMap[listID] = recycleMap;
-  return list;
-}
-
-export function snapshotDestroyList(si: SnapshotInstance): void {
-  const [, elementIndex] = si.__snapshot_def.slot[0]!;
-  const list = si.__elements![elementIndex]!;
-  const listID = __GetElementUniqueID(list);
-  delete gSignMap[listID];
-  delete gRecycleMap[listID];
-}