@lynx-js/react 0.110.0 → 0.111.0

package/runtime/src/list.ts

@@ -1,240 +1,15 @@
 // 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 { LifecycleConstant } from './lifecycleConstant.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();
-  },
-};
+import type { SnapshotInstance } from './snapshot.js';
+import { maybePromise } from './utils.js';
 
 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();
+const resolvedPromise = /* @__PURE__ */ Promise.resolve();
 
 export function clearListGlobal(): void {
   for (const key in gSignMap) {
@@ -247,11 +22,29 @@ export function clearListGlobal(): void {
 
 export function componentAtIndexFactory(
   ctx: SnapshotInstance[],
+  hydrateFunction: (before: SnapshotInstance, after: SnapshotInstance) => void,
 ): [ComponentAtIndexCallback, ComponentAtIndexesCallback] {
-  const componentAtIndex = (
+  // 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 componentAtChildCtx = (
     list: FiberElement,
     listID: number,
-    cellIndex: number,
+    childCtx: SnapshotInstance,
     operationID: number,
     enableReuseNotification: boolean,
     enableBatchRender: boolean = false,
@@ -263,12 +56,54 @@ export function componentAtIndexFactory(
       throw new Error('componentAtIndex called on removed list');
     }
 
-    const childCtx = ctx[cellIndex];
-    if (!childCtx) {
-      throw new Error('childCtx not found');
-    }
+    const platformInfo = childCtx.__listItemPlatformInfo ?? {};
+
+    // The lifecycle of this `__extraProps.isReady`:
+    //   0 -> Promise<number> -> 1
+    // 0: The initial state, the list-item is not ready yet, we will send a event to background
+    //    when `componentAtIndex` is called on it
+    // Promise<number>: A promise that will be resolved when the list-item is ready
+    // 1: The list-item is ready, we can use it to render the list
+    if (childCtx.__extraProps?.['isReady'] === 0) {
+      if (
+        typeof __GetAttributeByName === 'function'
+        && __GetAttributeByName(list, 'custom-list-name') === 'list-container'
+      ) {
+        // we are in supported env
+        // do not throw
+      } else {
+        throw new Error(
+          'Unsupported: `<list-item/>` with `defer={true}` must be used with `<list custom-list-name="list-container"/>`',
+        );
+      }
 
-    const platformInfo = childCtx.__listItemPlatformInfo || {};
+      __OnLifecycleEvent([LifecycleConstant.publishEvent, {
+        handlerName: `${childCtx.__id}:__extraProps:onComponentAtIndex`,
+        data: {},
+      }]);
+
+      let p: Promise<number>;
+      return (p = new Promise<number>((resolve) => {
+        Object.defineProperty(childCtx.__extraProps, 'isReady', {
+          set(isReady) {
+            if (isReady === 1) {
+              delete childCtx.__extraProps!['isReady'];
+              childCtx.__extraProps!['isReady'] = 1;
+
+              void resolvedPromise.then(() => {
+                // the cellIndex may be changed already, but the `childCtx` is the same
+                resolve(componentAtChildCtx(list, listID, childCtx, operationID, enableReuseNotification));
+              });
+            }
+          },
+          get() {
+            return p;
+          },
+        });
+      }));
+    } else if (maybePromise<number>(childCtx.__extraProps?.['isReady'])) {
+      throw new Error('componentAtIndex was called on a pending deferred list item');
+    }
 
     const uniqID = childCtx.type + (platformInfo['reuse-identifier'] ?? '');
     const recycleSignMap = recycleMap.get(uniqID);
@@ -308,10 +143,15 @@ 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();
+      } else if (oldCtx.__extraProps?.['isReady'] === 1) {
+        __OnLifecycleEvent([LifecycleConstant.publishEvent, {
+          handlerName: `${oldCtx.__id}:__extraProps:onRecycleComponent`,
+          data: {},
+        }]);
       }
       const root = childCtx.__element_root!;
       applyRefQueue();
@@ -325,7 +165,7 @@ export function componentAtIndexFactory(
         if (enableReuseNotification) {
           flushOptions.listReuseNotification = {
             listElement: list,
-            itemKey: platformInfo['item-key'],
+            itemKey: platformInfo['item-key']!,
           };
         }
         __FlushElementTree(root, flushOptions);
@@ -336,7 +176,7 @@ export function componentAtIndexFactory(
         if (enableReuseNotification) {
           flushOptions.listReuseNotification = {
             listElement: list,
-            itemKey: platformInfo['item-key'],
+            itemKey: platformInfo['item-key']!,
           };
         }
         __FlushElementTree(root, flushOptions);
@@ -366,29 +206,83 @@ export function componentAtIndexFactory(
     return sign;
   };
 
-  const componentAtIndexes = (
+  function componentAtIndex(
+    list: FiberElement,
+    listID: number,
+    cellIndex: number,
+    operationID: number,
+    enableReuseNotification: boolean,
+  ) {
+    const childCtx = ctx[cellIndex];
+    if (!childCtx) {
+      throw new Error('childCtx not found');
+    }
+    const r = componentAtChildCtx(list, listID, childCtx, operationID, enableReuseNotification);
+
+    /* v8 ignore start */
+    if (process.env['NODE_ENV'] === 'test') {
+      return r;
+    } else {
+      return typeof r === 'number' ? r : undefined;
+    }
+    /* v8 ignore end */
+  }
+
+  function componentAtIndexes(
     list: FiberElement,
     listID: number,
     cellIndexes: number[],
     operationIDs: number[],
     enableReuseNotification: boolean,
     asyncFlush: boolean,
-  ) => {
-    const uiSigns = cellIndexes.map((cellIndex, index) => {
-      const operationID = operationIDs[index] ?? 0;
-      return componentAtIndex(list, listID, cellIndex, operationID, enableReuseNotification, true, asyncFlush);
+  ) {
+    let hasUnready = false;
+    const p: Array<Promise<number> | number> = [];
+
+    cellIndexes.forEach((cellIndex, index) => {
+      const operationID = operationIDs[index]!;
+      const childCtx = ctx[cellIndex];
+      if (!childCtx) {
+        throw new Error('childCtx not found');
+      }
+
+      const u = componentAtChildCtx(list, listID, childCtx, operationID, enableReuseNotification, true, asyncFlush);
+      if (typeof u === 'number') {
+        // ready
+      } else {
+        hasUnready = true;
+      }
+      p.push(u);
     });
+
+    // We need __FlushElementTree twice:
+    // 1. The first time is sync, we flush the items that are ready, with unready items' uiSign as -1.
+    // 2. The second time is async, with all the uiSigns.
+    // NOTE: The `operationIDs` passed to __FlushElementTree must be the one passed in,
+    // not the one generated by any code here, to workaround a bug of Lynx Engine.
+    // So we CANNOT split the `operationIDs` into two parts: one for ready items, one for unready items.
+    if (hasUnready) {
+      void Promise.all(p).then((uiSigns) => {
+        __FlushElementTree(list, {
+          triggerLayout: true,
+          operationIDs,
+          elementIDs: uiSigns,
+          listID,
+        });
+      });
+    }
     __FlushElementTree(list, {
       triggerLayout: true,
-      operationIDs: operationIDs,
-      elementIDs: uiSigns,
+      operationIDs,
+      elementIDs: cellIndexes.map((_, index) => typeof p[index] === 'number' ? p[index] : -1),
       listID,
     });
-  };
+  }
   return [componentAtIndex, componentAtIndexes] as const;
 }
 
 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];
@@ -401,7 +295,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)) {
@@ -411,32 +305,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];
-}