@lynx-js/react 0.110.0 → 0.110.1

package/runtime/lib/utils.js

@@ -11,7 +11,7 @@ export function isDirectOrDeepEqual(a, b) {
     return false;
 }
 export function isEmptyObject(obj) {
-    for (var _ in obj)
+    for (const _ in obj)
         return false;
     return true;
 }

package/runtime/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,MAAM,UAAU,mBAAmB,CAAC,CAAM,EAAE,CAAM;IAChD,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IACE,OAAO,CAAC,IAAI,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EACnH,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,GAAY;IACxC,KAAK,IAAI,CAAC,IAAI,GAAG;QAAE,OAAO,KAAK,CAAC;IAChC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAa,EAAE,KAAa;IACzD,MAAM,cAAc,GAAW,UAAU,CAAC,cAAc,IAAI,KAAK,CAAC;IAClE,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;AACnG,CAAC;AAED,MAAM,UAAU,IAAI,CAAsC,GAAM,EAAE,IAAiB;IACjF,MAAM,MAAM,GAAQ,EAAE,CAAC;IACvB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;YACf,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,MAAM,UAAU,mBAAmB,CAAC,CAAM,EAAE,CAAM;IAChD,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IACE,OAAO,CAAC,IAAI,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EACnH,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,GAAY;IACxC,KAAK,MAAM,CAAC,IAAI,GAAG;QAAE,OAAO,KAAK,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAa,EAAE,KAAa;IACzD,MAAM,cAAc,GAAW,UAAU,CAAC,cAAc,IAAI,KAAK,CAAC;IAClE,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC;AACnG,CAAC;AAED,MAAM,UAAU,IAAI,CAAsC,GAAM,EAAE,IAAiB;IACjF,MAAM,MAAM,GAAwB,EAAE,CAAC;IACvC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;YACf,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,MAAoB,CAAC;AAC9B,CAAC"}

package/runtime/src/backgroundSnapshot.ts

@@ -22,16 +22,12 @@ import {
   takeGlobalSnapshotPatch,
 } from './lifecycle/patch/snapshotPatch.js';
 import { globalPipelineOptions } from './lynx/performance.js';
+import { DynamicPartType } from './snapshot/dynamicPartType.js';
 import { clearQueuedRefs, queueRefAttrUpdate } from './snapshot/ref.js';
 import type { Ref } from './snapshot/ref.js';
 import { transformSpread } from './snapshot/spread.js';
 import type { SerializedSnapshotInstance, Snapshot } from './snapshot.js';
-import {
-  DynamicPartType,
-  backgroundSnapshotInstanceManager,
-  snapshotManager,
-  traverseSnapshotInstance,
-} from './snapshot.js';
+import { backgroundSnapshotInstanceManager, snapshotManager, traverseSnapshotInstance } from './snapshot.js';
 import { hydrationMap } from './snapshotInstanceHydrationMap.js';
 import { isDirectOrDeepEqual } from './utils.js';
 import { onPostWorkletCtx } from './worklet/ctx.js';
@@ -206,7 +202,7 @@ export class BackgroundSnapshotInstance {
           for (let index = 0; index < value.length; index++) {
             const { needUpdate, valueToCommit } = this.setAttributeImpl(value[index], oldValues[index], index);
             if (needUpdate) {
-              __globalSnapshotPatch!.push(
+              __globalSnapshotPatch.push(
                 SnapshotOperation.SetAttribute,
                 this.__id,
                 index,
@@ -221,7 +217,7 @@ export class BackgroundSnapshotInstance {
             const { valueToCommit } = this.setAttributeImpl(value[index], null, index);
             patch[index] = valueToCommit;
           }
-          __globalSnapshotPatch!.push(
+          __globalSnapshotPatch.push(
             SnapshotOperation.SetAttributes,
             this.__id,
             patch,

package/runtime/src/compat/initData.ts

@@ -1,7 +1,8 @@
 // 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 { ComponentClass, Consumer, Context, FC, PropsWithChildren, ReactNode } from 'react';
+import type { ComponentChildren, Consumer, Context, Provider } from 'preact';
+import type { ComponentClass } from 'react';
 
 import { useLynxGlobalEventListener } from '../hooks/useLynxGlobalEventListener.js';
 
@@ -11,23 +12,24 @@ type Getter<T> = {
 
 // for better reuse if runtime is changed
 export function factory<Data>(
-  { createContext, useState, createElement, useLynxGlobalEventListener: useListener }: typeof import('react') & {
+  { createContext, useState, createElement, useLynxGlobalEventListener: useListener }: {
+    createContext: typeof import('preact').createContext;
+    useState: typeof import('preact/hooks').useState;
+    createElement: typeof import('preact').createElement;
     useLynxGlobalEventListener: typeof useLynxGlobalEventListener;
   },
   prop: '__globalProps' | '__initData',
   eventName: string,
 ): Getter<{
   Context: Context<Data>;
-  Provider: FC<{
-    children?: ReactNode | undefined;
-  }>;
+  Provider: Provider<Data>;
   Consumer: Consumer<Data>;
   use: () => Data;
   useChanged: (callback: (data: Data) => void) => void;
 }> {
   const Context = createContext({} as Data);
 
-  const Provider: FC<PropsWithChildren> = ({ children }) => {
+  const Provider = ({ children }: { children?: ComponentChildren }) => {
     const [__, set] = useState<Data>(lynx[prop] as Data);
 
     const handleChange = () => {
@@ -58,8 +60,7 @@ export function factory<Data>(
 
   const useChanged = (callback: (__: Data) => void) => {
     if (!__LEPUS__) {
-      // @ts-ignore
-      useListener<(__: unknown) => void>(eventName, callback);
+      useListener(eventName, callback);
     }
   };
 
@@ -98,7 +99,7 @@ export function factory<Data>(
  * @public
  */
 export function withInitDataInState<P, S>(App: ComponentClass<P, S>): ComponentClass<P, S> {
-  const isClassComponent = 'prototype' in App && App.prototype.render;
+  const isClassComponent = 'prototype' in App && 'render' in App.prototype;
   if (!isClassComponent) {
     // return as-is when not class component
     return App;

package/runtime/src/compat/lynxComponent.ts

@@ -9,15 +9,15 @@ export function wrapWithLynxComponent(
   jsxComponent: any,
 ): ReactNode {
   const C = jsxComponent.type;
-  if (typeof C === 'function') {
-    if (C === ComponentFromReactRuntime || C.prototype instanceof ComponentFromReactRuntime) {
-      if (jsxSnapshot.length === 1) {
-        return jsxSnapshot(jsxComponent);
-      } else {
-        // spread
-        if (!jsxComponent.props.removeComponentElement) {
-          return jsxSnapshot(jsxComponent, takeComponentAttributes(jsxComponent));
-        }
+  if (
+    typeof C === 'function' && (C === ComponentFromReactRuntime || C.prototype instanceof ComponentFromReactRuntime)
+  ) {
+    if (jsxSnapshot.length === 1) {
+      return jsxSnapshot(jsxComponent);
+    } else {
+      // spread
+      if (!jsxComponent.props.removeComponentElement) {
+        return jsxSnapshot(jsxComponent, takeComponentAttributes(jsxComponent));
       }
     }
   }
@@ -25,8 +25,7 @@ export function wrapWithLynxComponent(
 }
 
 // @ts-expect-error
-export class ComponentFromReactRuntime extends Component {
-}
+export class ComponentFromReactRuntime extends Component {}
 
 const __COMPONENT_ATTRIBUTES__ = /* @__PURE__ */ new Set([
   'name',
@@ -68,8 +67,8 @@ function takeComponentAttributes(jsxComponent: any): Record<string, any> {
       || k === 'dataSet'
       || k === 'data-set'
       || k === 'removeComponentElement'
-      || k.match(/^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$/)
-      || k.match(/^data-([A-Za-z]+)$/)
+      || (/^(global-bind|bind|catch|capture-bind|capture-catch)([A-Za-z]+)$/.exec(k))
+      || (/^data-([A-Za-z]+)$/.exec(k))
     ) {
       attributes[k] = jsxComponent.props[k];
       delete jsxComponent.props[k];

package/runtime/src/debug/profile.ts

@@ -29,6 +29,7 @@ export function initProfileHook(): void {
   const oldRender = options[RENDER];
   options[RENDER] = function(vnode: VNode & { [COMPONENT]: Component }) {
     const displayName = getDisplayName(vnode.type as ComponentClass);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const originalRender = vnode[COMPONENT].render;
     vnode[COMPONENT].render = function render(this, props, state, context) {
       // This __PROFILE__ is used for DCE testing

package/runtime/src/gesture/processGestureBagkround.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 { GestureTypeInner } from './types.js';
+import type { BaseGesture, ComposedGesture, GestureKind } from './types.js';
 import { onPostWorkletCtx } from '../worklet/ctx.js';
-import { type GestureKind, GestureTypeInner, type ComposedGesture, type BaseGesture } from './types.js';
 
 export function processGestureBackground(gesture: GestureKind): void {
   if (gesture.type === GestureTypeInner.COMPOSED) {

package/runtime/src/gesture/types.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 type { Worklet } from '@lynx-js/react/worklet-runtime/bindings';
 
 export enum GestureTypeInner {

package/runtime/src/hooks/useLynxGlobalEventListener.ts

@@ -31,7 +31,7 @@ import { useEffect, useMemo, useRef } from 'preact/hooks';
  * @param listener - Event handler
  * @public
  */
-export function useLynxGlobalEventListener<T extends (...args: unknown[]) => void>(
+export function useLynxGlobalEventListener<T extends (...args: any[]) => void>(
   eventName: string,
   listener: T,
 ): void {

package/runtime/src/hydrate.ts

@@ -2,9 +2,11 @@
 // 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 { __pendingListUpdates, componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import { componentAtIndexFactory, enqueueComponentFactory } from './list.js';
+import { __pendingListUpdates } from './pendingListUpdates.js';
+import { DynamicPartType } from './snapshot/dynamicPartType.js';
 import { unref } from './snapshot/ref.js';
-import { DynamicPartType, SnapshotInstance } from './snapshot.js';
+import type { SnapshotInstance } from './snapshot.js';
 import { isEmptyObject } from './utils.js';
 
 export interface DiffResult<K> {
@@ -215,7 +217,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
   }
 
   let swap;
-  if (swap = options?.swap) {
+  if ((swap = options?.swap)) {
     swap[before.__id] = after.__id;
   }
 
@@ -349,7 +351,7 @@ export function hydrate(before: SnapshotInstance, after: SnapshotInstance, optio
 
         const listElement = before.__elements![elementIndex]!;
         __SetAttribute(listElement, 'update-list-info', info);
-        const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(afterChildNodes);
+        const [componentAtIndex, componentAtIndexes] = componentAtIndexFactory(afterChildNodes, hydrate);
         __UpdateListCallbacks(
           listElement,
           componentAtIndex,

package/runtime/src/internal.ts

@@ -9,10 +9,11 @@ import './lynx.js';
 
 import { factory as factory2 } from './compat/componentIs.js';
 import { useMemo } from './hooks/react.js';
-import { snapshotCreateList } from './list.js';
 import { loadLazyBundle } from './lynx/lazy-bundle.js';
 import { __root } from './root.js';
-import { DynamicPartType, SnapshotInstance, __page, __pageId, createSnapshot, snapshotManager } from './snapshot.js';
+import { DynamicPartType } from './snapshot/dynamicPartType.js';
+import { snapshotCreateList } from './snapshot/list.js';
+import { SnapshotInstance, __page, __pageId, createSnapshot, snapshotManager } from './snapshot.js';
 
 export { __page, __pageId, __root };
 

package/runtime/src/legacy-react-runtime/index.ts

@@ -8,7 +8,7 @@ import {
   ComponentFromReactRuntime as Component,
   ComponentFromReactRuntime as PureComponent,
 } from '../compat/lynxComponent.js';
-import { useCallback, useEffect, useMemo, useReducer, useState, useRef } from '../hooks/react.js';
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from '../hooks/react.js';
 
 /* v8 ignore next 3 */
 function __runInJS<T>(value: T): T | undefined | null {

package/runtime/src/lifecycle/patch/snapshotPatchApply.ts

@@ -16,6 +16,7 @@
 import { sendCtxNotFoundEventToBackground } from './error.js';
 import type { SnapshotPatch } from './snapshotPatch.js';
 import { SnapshotOperation } from './snapshotPatch.js';
+import type { DynamicPartType } from '../../snapshot/dynamicPartType.js';
 import {
   SnapshotInstance,
   createSnapshot,
@@ -23,7 +24,6 @@ import {
   snapshotInstanceManager,
   snapshotManager,
 } from '../../snapshot.js';
-import type { DynamicPartType } from '../../snapshot.js';
 
 /**
  * Applies a patch of snapshot operations to the main thread.

package/runtime/src/lifecycle/patch/updateMainThread.ts

@@ -4,15 +4,15 @@
 
 import { updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
 
-import { LifecycleConstant } from '../../lifecycleConstant.js';
-import { __pendingListUpdates } from '../../list.js';
-import { PerformanceTimingKeys, markTiming, setPipeline } from '../../lynx/performance.js';
-import { __page } from '../../snapshot.js';
-import { getReloadVersion } from '../pass.js';
 import type { PatchList, PatchOptions } from './commit.js';
 import { setMainThreadHydrationFinished } from './isMainThreadHydrationFinished.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
+import { LifecycleConstant } from '../../lifecycleConstant.js';
+import { PerformanceTimingKeys, markTiming, setPipeline } from '../../lynx/performance.js';
+import { __pendingListUpdates } from '../../pendingListUpdates.js';
 import { applyRefQueue } from '../../snapshot/workletRef.js';
+import { __page } from '../../snapshot.js';
+import { getReloadVersion } from '../pass.js';
 
 function updateMainThread(
   { data, patchOptions }: {

package/runtime/src/lifecycle/reload.ts

@@ -11,7 +11,7 @@ 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';

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 { 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';
 
 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);
@@ -308,7 +98,7 @@ 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();
@@ -325,7 +115,7 @@ export function componentAtIndexFactory(
         if (enableReuseNotification) {
           flushOptions.listReuseNotification = {
             listElement: list,
-            itemKey: platformInfo['item-key'],
+            itemKey: platformInfo['item-key']!,
           };
         }
         __FlushElementTree(root, flushOptions);
@@ -336,7 +126,7 @@ export function componentAtIndexFactory(
         if (enableReuseNotification) {
           flushOptions.listReuseNotification = {
             listElement: list,
-            itemKey: platformInfo['item-key'],
+            itemKey: platformInfo['item-key']!,
           };
         }
         __FlushElementTree(root, flushOptions);
@@ -389,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];
@@ -401,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)) {
@@ -411,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];
-}