@lynx-js/react 0.105.2 → 0.106.1

package/runtime/lib/lynx/tt.js

@@ -1,13 +1,14 @@
 // 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 { options, render } from 'preact';
+import { options } from 'preact';
 import { LifecycleConstant, NativeUpdateDataType } from '../lifecycleConstant.js';
 import { PerformanceTimingKeys, beginPipeline, markTiming } from './performance.js';
 import { BackgroundSnapshotInstance, hydrate } from '../backgroundSnapshot.js';
 import { destroyBackground } from '../lifecycle/destroy.js';
 import { commitPatchUpdate, genCommitTaskId, globalCommitTaskMap } from '../lifecycle/patch/commit.js';
 import { reloadBackground } from '../lifecycle/reload.js';
+import { renderBackground } from '../lifecycle/render.js';
 import { CHILDREN, COMPONENT, DIFF, DIFFED, FORCE } from '../renderToOpcodes/constants.js';
 import { __root } from '../root.js';
 import { globalRefsToSet, updateBackgroundRefs } from '../snapshot/ref.js';
@@ -128,14 +129,13 @@ async function OnLifecycleEvent([type, data]) {
             if (__PROFILE__) {
                 console.profileEnd();
             }
-            markTiming(PerformanceTimingKeys.pack_changes_start);
             // console.debug("********** After hydration:");
             // printSnapshotInstance(__root as BackgroundSnapshotInstance);
             if (__PROFILE__) {
                 console.profile('commitChanges');
             }
             const commitTaskId = genCommitTaskId();
-            await commitPatchUpdate({ snapshotPatch }, { commitTaskId, isHydration: true });
+            await commitPatchUpdate({ patchList: [{ snapshotPatch, id: commitTaskId }] }, { isHydration: true });
             updateBackgroundRefs(commitTaskId);
             globalCommitTaskMap.forEach((commitTask, id) => {
                 if (id > commitTaskId) {
@@ -211,7 +211,7 @@ function updateGlobalProps(newData) {
     // 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(() => {
-        runWithForce(() => render(__root.__jsx, __root));
+        runWithForce(() => renderBackground(__root.__jsx, __root));
     });
     lynxCoreInject.tt.GlobalEventEmitter.emit('onGlobalPropsChanged');
 }

package/runtime/lib/lynx/tt.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt.js","sourceRoot":"","sources":["../../src/lynx/tt.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tt.js","sourceRoot":"","sources":["../../src/lynx/tt.ts"],"names":[],"mappings":"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"}

package/runtime/lib/lynx-api.js

@@ -1,11 +1,11 @@
 // 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 { render } from 'preact';
 import { createContext, createElement } from 'preact/compat';
 import { useState } from 'preact/hooks';
 import { factory, withInitDataInState } from './compat/initData.js';
 import { useLynxGlobalEventListener } from './hooks/useLynxGlobalEventListener.js';
+import { renderBackground } from './lifecycle/render.js';
 import { LifecycleConstant } from './lifecycleConstant.js';
 import { flushDelayedLifecycleEvents } from './lynx/tt.js';
 import { __root } from './root.js';
@@ -25,7 +25,7 @@ export const root = {
         }
         else {
             __root.__jsx = jsx;
-            render(jsx, __root);
+            renderBackground(jsx, __root);
             if (__FIRST_SCREEN_SYNC_TIMING__ === 'immediately') { }
             else {
                 lynx.getNativeApp().callLepusMethod(LifecycleConstant.jsReady, {});

package/runtime/lib/lynx-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"lynx-api.js","sourceRoot":"","sources":["../src/lynx-api.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AA6DnC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAS;IACxB,MAAM,EAAE,CAAC,GAAc,EAAQ,EAAE;QAC/B,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;YACnB,MAAM,CAAC,GAAG,EAAE,MAAa,CAAC,CAAC;YAC3B,IAAI,4BAA4B,KAAK,aAAa,EAAE,CAAC,CAAA,CAAC;iBACjD,CAAC;gBACJ,IAAI,CAAC,YAAY,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACrE,CAAC;YAED,2BAA2B,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IACD,sBAAsB,EAAE,CAAC,uBAAgD,EAAQ,EAAE;QACjF,IAAI,CAAC,sBAAsB,CAAC,uBAAuB,CAAC,CAAC;IACvD,CAAC;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CACvC;IACE,aAAa;IACb,QAAQ;IACR,aAAa;IACb,0BAA0B;CACpB,EACR,YAAY,EACZ,eAAe,CAChB,CAAC;AACF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,eAAe,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;AAC/G;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAuB,eAAe,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,WAAW,GAAmB,eAAe,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;AAC3E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiD,eAAe,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;AAsCvH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AA6J/B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"lynx-api.js","sourceRoot":"","sources":["../src/lynx-api.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AACnF,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AA6DnC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAS;IACxB,MAAM,EAAE,CAAC,GAAc,EAAQ,EAAE;QAC/B,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;QACrB,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;YACnB,gBAAgB,CAAC,GAAG,EAAE,MAAa,CAAC,CAAC;YACrC,IAAI,4BAA4B,KAAK,aAAa,EAAE,CAAC,CAAA,CAAC;iBACjD,CAAC;gBACJ,IAAI,CAAC,YAAY,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACrE,CAAC;YAED,2BAA2B,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IACD,sBAAsB,EAAE,CAAC,uBAAgD,EAAQ,EAAE;QACjF,IAAI,CAAC,sBAAsB,CAAC,uBAAuB,CAAC,CAAC;IACvD,CAAC;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CACvC;IACE,aAAa;IACb,QAAQ;IACR,aAAa;IACb,0BAA0B;CACpB,EACR,YAAY,EACZ,eAAe,CAChB,CAAC;AACF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,eAAe,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;AAC/G;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAuB,eAAe,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,WAAW,GAAmB,eAAe,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;AAC3E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiD,eAAe,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;AAsCvH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AA6J/B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC"}

package/runtime/lib/opcodes.d.ts

@@ -1,2 +1,8 @@
 import { SnapshotInstance } from './snapshot.js';
+interface SSRFiberElement {
+    ssrID: string;
+}
+export type SSRSnapshotInstance = [string, number, SSRFiberElement[]];
+export declare function ssrHydrateByOpcodes(opcodes: any[], into: SnapshotInstance, refMap?: Record<string, FiberElement>): void;
 export declare function renderOpcodesInto(opcodes: any[], into: SnapshotInstance): void;
+export {};

package/runtime/lib/opcodes.js

@@ -1,6 +1,7 @@
 // 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 { componentAtIndexFactory, enqueueComponentFactory, gRecycleMap, gSignMap } from './list.js';
 import { CHILDREN } from './renderToOpcodes/constants.js';
 import { SnapshotInstance } from './snapshot.js';
 var Opcode;
@@ -10,6 +11,70 @@ var Opcode;
     Opcode[Opcode["Attr"] = 2] = "Attr";
     Opcode[Opcode["Text"] = 3] = "Text";
 })(Opcode || (Opcode = {}));
+export function ssrHydrateByOpcodes(opcodes, into, refMap) {
+    let top = into;
+    const stack = [into];
+    for (let i = 0; i < opcodes.length;) {
+        const opcode = opcodes[i];
+        switch (opcode) {
+            case Opcode.Begin: {
+                const p = top;
+                const [type, __id, elements] = opcodes[i + 1];
+                top = new SnapshotInstance(type, __id);
+                top.__pendingElements = elements;
+                p.insertBefore(top);
+                stack.push(top);
+                i += 2;
+                break;
+            }
+            case Opcode.End: {
+                // @ts-ignore
+                top[CHILDREN] = undefined;
+                top.__elements = top.__pendingElements.map(({ ssrID }) => refMap[ssrID]);
+                top.__element_root = top.__elements[0];
+                delete top.__pendingElements;
+                if (top.__snapshot_def.isListHolder) {
+                    const listElement = top.__element_root;
+                    const listElementUniqueID = __GetElementUniqueID(listElement);
+                    const signMap = gSignMap[listElementUniqueID] = new Map();
+                    gRecycleMap[listElementUniqueID] = new Map();
+                    const enqueueFunc = enqueueComponentFactory();
+                    const componentAtIndex = componentAtIndexFactory(top.childNodes);
+                    for (const child of top.childNodes) {
+                        if (child.__element_root) {
+                            const childElementUniqueID = __GetElementUniqueID(child.__element_root);
+                            signMap.set(childElementUniqueID, child);
+                            enqueueFunc(listElement, listElementUniqueID, childElementUniqueID);
+                        }
+                    }
+                    __UpdateListCallbacks(listElement, componentAtIndex, enqueueFunc);
+                }
+                stack.pop();
+                const p = stack[stack.length - 1];
+                top = p;
+                i += 1;
+                break;
+            }
+            case Opcode.Attr: {
+                const key = opcodes[i + 1];
+                const value = opcodes[i + 2];
+                top.setAttribute(key, value);
+                i += 3;
+                break;
+            }
+            case Opcode.Text: {
+                const [[type, __id, elements], text] = opcodes[i + 1];
+                const s = new SnapshotInstance(type, __id);
+                s.setAttribute(0, text);
+                top.insertBefore(s);
+                s.__elements = elements.map(({ ssrID }) => refMap[ssrID]);
+                s.__element_root = s.__elements[0];
+                i += 2;
+                break;
+            }
+        }
+    }
+}
 export function renderOpcodesInto(opcodes, into) {
     let top = into;
     const stack = [into];
@@ -23,6 +88,7 @@ export function renderOpcodesInto(opcodes, into) {
                 if (top.__parent) {
                     // already inserted
                     top = new SnapshotInstance(top.type);
+                    opcodes[i + 1] = top;
                 }
                 p.insertBefore(top);
                 stack.push(top);
@@ -48,6 +114,10 @@ export function renderOpcodesInto(opcodes, into) {
             case Opcode.Text: {
                 const text = opcodes[i + 1];
                 const s = new SnapshotInstance(null);
+                if (__ENABLE_SSR__) {
+                    // We need store the just created SnapshotInstance, or it will be lost when we leave the function
+                    opcodes[i + 1] = [s, text];
+                }
                 s.setAttribute(0, text);
                 top.insertBefore(s);
                 i += 2;

package/runtime/lib/opcodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"opcodes.js","sourceRoot":"","sources":["../src/opcodes.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,IAAW,MAKV;AALD,WAAW,MAAM;IACf,qCAAS,CAAA;IACT,iCAAG,CAAA;IACH,mCAAI,CAAA;IACJ,mCAAI,CAAA;AACN,CAAC,EALU,MAAM,KAAN,MAAM,QAKhB;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAc,EAAE,IAAsB;IACtE,IAAI,GAAG,GAAqB,IAAI,CAAC;IACjC,MAAM,KAAK,GAAuB,CAAC,IAAI,CAAC,CAAC;IACzC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC;QACpC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAC1B,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBAClB,MAAM,CAAC,GAAG,GAAG,CAAC;gBACd,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBACrB,aAAa;gBACb,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC;oBACjB,mBAAmB;oBACnB,GAAG,GAAG,IAAI,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBACvC,CAAC;gBACD,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;gBACpB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEhB,CAAC,IAAI,CAAC,CAAC;gBACP,MAAM;YACR,CAAC;YACD,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;gBAChB,aAAa;gBACb,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;gBAE1B,KAAK,CAAC,GAAG,EAAE,CAAC;gBACZ,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAClC,GAAG,GAAG,CAAE,CAAC;gBAET,CAAC,IAAI,CAAC,CAAC;gBACP,MAAM;YACR,CAAC;YACD,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;gBACjB,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC7B,GAAG,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gBAE7B,CAAC,IAAI,CAAC,CAAC;gBACP,MAAM;YACR,CAAC;YACD,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;gBACjB,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC5B,MAAM,CAAC,GAAG,IAAI,gBAAgB,CAAC,IAAyB,CAAC,CAAC;gBAC1D,CAAC,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;gBACxB,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;gBAEpB,CAAC,IAAI,CAAC,CAAC;gBACP,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"opcodes.js","sourceRoot":"","sources":["../src/opcodes.ts"],"names":[],"mappings":"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"}

package/runtime/lib/root.d.ts

@@ -2,6 +2,7 @@ import { BackgroundSnapshotInstance } from './backgroundSnapshot.js';
 import { SnapshotInstance } from './snapshot.js';
 declare let __root: (SnapshotInstance | BackgroundSnapshotInstance) & {
     __jsx?: React.ReactNode;
+    __opcodes?: any[];
 };
 declare function setRoot(root: typeof __root): void;
 export { __root, setRoot };

package/runtime/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","sourceRoot":"","sources":["../src/root.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,IAAI,MAAqF,CAAC;AAE1F,SAAS,OAAO,CAAC,IAAmB;IAClC,MAAM,GAAG,IAAI,CAAC;AAChB,CAAC;AAED,IAAI,SAAS,EAAE,CAAC;IACd,OAAO,CAAC,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;AACxC,CAAC;KAAM,IAAI,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,IAAI,0BAA0B,CAAC,MAAM,CAAC,CAAC,CAAC;AAClD,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"root.js","sourceRoot":"","sources":["../src/root.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,IAAI,MAAwG,CAAC;AAE7G,SAAS,OAAO,CAAC,IAAmB;IAClC,MAAM,GAAG,IAAI,CAAC;AAChB,CAAC;AAED,IAAI,SAAS,EAAE,CAAC;IACd,OAAO,CAAC,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;AACxC,CAAC;KAAM,IAAI,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,IAAI,0BAA0B,CAAC,MAAM,CAAC,CAAC,CAAC;AAClD,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC"}

package/runtime/src/lifecycle/destroy.ts

@@ -1,17 +1,16 @@
 // 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 { render } from 'preact';
-
 import { __root } from '../root.js';
 import { globalCommitTaskMap } from './patch/commit.js';
+import { renderBackground } from './render.js';
 
 function destroyBackground(): void {
   if (__PROFILE__) {
     console.profile('destroyBackground');
   }
 
-  render(null, __root as any);
+  renderBackground(null, __root as any);
 
   globalCommitTaskMap.forEach(task => {
     task();

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

@@ -30,35 +30,56 @@ let nextCommitTaskId = 1;
 
 let globalBackgroundSnapshotInstancesToRemove: number[] = [];
 
+let patchesToCommit: Patch[] = [];
+
 interface Patch {
+  id: number;
   snapshotPatch?: SnapshotPatch;
   workletRefInitValuePatch?: [id: number, value: unknown][];
+}
+
+interface PatchList {
+  patchList: Patch[];
   flushOptions?: FlushOptions;
 }
 
 interface PatchOptions {
-  commitTaskId: number;
   pipelineOptions?: PipelineOptions;
-  reloadVersion?: number;
+  reloadVersion: number;
   isHydration?: boolean;
 }
 
 function replaceCommitHook(): void {
+  // use our own `options.debounceRendering` to insert a timing flag before render
+  type DebounceRendering = (f: () => void) => void;
+  const injectDebounceRendering = (debounceRendering: DebounceRendering): DebounceRendering => {
+    return (f: () => void) => {
+      debounceRendering(() => {
+        f();
+        void commitToMainThread();
+      });
+    };
+  };
+  const defaultDebounceRendering = options.debounceRendering?.bind(options)
+    ?? (Promise.prototype.then.bind(Promise.resolve()) as DebounceRendering);
+  let _debounceRendering = injectDebounceRendering(defaultDebounceRendering);
+  Object.defineProperty(options, 'debounceRendering', {
+    get() {
+      return _debounceRendering;
+    },
+    set(debounceRendering: DebounceRendering) {
+      _debounceRendering = injectDebounceRendering(debounceRendering);
+    },
+  });
+
   const oldCommit = options[COMMIT];
-  options[COMMIT] = async (vnode: VNode, commitQueue: any[]) => {
+  const commit = async (vnode: VNode, commitQueue: any[]) => {
     if (__LEPUS__) {
       // for testing only
       commitQueue.length = 0;
       return;
     }
-
-    markTimingLegacy(PerformanceTimingKeys.update_diff_vdom_end);
-    markTiming(PerformanceTimingKeys.diff_vdom_end);
-    markTiming(PerformanceTimingKeys.pack_changes_start);
-    if (__PROFILE__) {
-      console.profile('commitChanges');
-    }
-    const renderCallbacks = commitQueue.map(component => {
+    const renderCallbacks = commitQueue.map((component: Component<any>) => {
       const ret = {
         component,
         [RENDER_CALLBACKS]: component[RENDER_CALLBACKS],
@@ -84,7 +105,7 @@ function replaceCommitHook(): void {
             cb.call(wrapper.component);
           });
         } catch (e) {
-          options[CATCH_ERROR](e, wrapper[VNODE]);
+          options[CATCH_ERROR](e, wrapper[VNODE]!);
         }
       });
       if (backgroundSnapshotInstancesToRemove.length) {
@@ -97,50 +118,76 @@ function replaceCommitHook(): void {
     });
 
     const snapshotPatch = takeGlobalSnapshotPatch();
-    const flushOptions = globalFlushOptions;
     const workletRefInitValuePatch = takeWorkletRefInitValuePatch();
-    globalFlushOptions = {};
     if (!snapshotPatch && workletRefInitValuePatch.length === 0) {
       // before hydration, skip patch
-      if (__PROFILE__) {
-        console.profileEnd();
-      }
       return;
     }
 
-    const patch: Patch = {};
+    const patch: Patch = {
+      id: commitTaskId,
+    };
     // TODO: check all fields in `flushOptions` from runtime3
     if (snapshotPatch?.length) {
       patch.snapshotPatch = snapshotPatch;
     }
-    if (!isEmptyObject(flushOptions)) {
-      patch.flushOptions = flushOptions;
-    }
     if (workletRefInitValuePatch.length) {
       patch.workletRefInitValuePatch = workletRefInitValuePatch;
     }
-    await commitPatchUpdate(patch, { commitTaskId });
 
-    const commitTask = globalCommitTaskMap.get(commitTaskId);
+    patchesToCommit.push(patch);
+  };
+  options[COMMIT] = commit as ((...args: Parameters<typeof commit>) => void);
+}
+
+async function commitToMainThread(): Promise<void> {
+  if (patchesToCommit.length === 0) {
+    return;
+  }
+
+  markTimingLegacy(PerformanceTimingKeys.update_diff_vdom_end);
+  markTiming(PerformanceTimingKeys.diff_vdom_end);
+
+  const flushOptions = globalFlushOptions;
+  globalFlushOptions = {};
+
+  const patchList: PatchList = {
+    patchList: patchesToCommit,
+  };
+  patchesToCommit = [];
+
+  if (!isEmptyObject(flushOptions)) {
+    patchList.flushOptions = flushOptions;
+  }
+
+  await commitPatchUpdate(patchList, {});
+
+  for (let i = 0; i < patchList.patchList.length; i++) {
+    const patch = patchList.patchList[i]!;
+    const commitTask = globalCommitTaskMap.get(patch.id);
     if (commitTask) {
       commitTask();
-      globalCommitTaskMap.delete(commitTaskId);
+      globalCommitTaskMap.delete(patch.id);
     }
-  };
+  }
 }
 
-function commitPatchUpdate(data: Patch, patchOptions: PatchOptions): Promise<void> {
+function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions, 'reloadVersion'>): Promise<void> {
   return new Promise(resolve => {
     // console.debug('********** JS update:');
     // printSnapshotInstance(
     //   (backgroundSnapshotInstanceManager.values.get(1) || backgroundSnapshotInstanceManager.values.get(-1))!,
     // );
-    // console.debug('commitPatchUpdate: ', JSON.stringify(data));
+    // console.debug('commitPatchUpdate: ', JSON.stringify(patchList));
+    if (__PROFILE__) {
+      console.profile('commitChanges');
+    }
+    markTiming(PerformanceTimingKeys.pack_changes_start);
     const obj: {
       data: string;
       patchOptions: PatchOptions;
     } = {
-      data: JSON.stringify(data),
+      data: JSON.stringify(patchList),
       patchOptions: {
         ...patchOptions,
         reloadVersion: getReloadVersion(),
@@ -151,10 +198,10 @@ function commitPatchUpdate(data: Patch, patchOptions: PatchOptions): Promise<voi
       obj.patchOptions.pipelineOptions = globalPipelineOptions;
       setPipeline(undefined);
     }
+    lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, resolve);
     if (__PROFILE__) {
       console.profileEnd();
     }
-    lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, resolve);
   });
 }
 
@@ -166,7 +213,7 @@ function replaceRequestAnimationFrame(): void {
   // to make afterPaintEffects run faster
   const resolvedPromise = Promise.resolve();
   options.requestAnimationFrame = (cb: () => void) => {
-    resolvedPromise.then(cb);
+    void resolvedPromise.then(cb);
   };
 }
 
@@ -175,6 +222,7 @@ function replaceRequestAnimationFrame(): void {
  */
 export {
   commitPatchUpdate,
+  commitToMainThread,
   genCommitTaskId,
   globalBackgroundSnapshotInstancesToRemove,
   globalCommitTaskMap,
@@ -183,5 +231,5 @@ export {
   replaceCommitHook,
   replaceRequestAnimationFrame,
   type PatchOptions,
-  type Patch,
+  type PatchList,
 };

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

@@ -4,6 +4,7 @@
 
 import { clearDelayedWorklets, updateWorkletRefInitValueChanges } from '@lynx-js/react/worklet-runtime/bindings';
 
+import type { PatchList, PatchOptions } from './commit.js';
 import { snapshotPatchApply } from './snapshotPatchApply.js';
 import { LifecycleConstant } from '../../lifecycleConstant.js';
 import { __pendingListUpdates } from '../../list.js';
@@ -12,7 +13,6 @@ import { takeGlobalRefPatchMap } from '../../snapshot/ref.js';
 import { __page } from '../../snapshot.js';
 import { isEmptyObject } from '../../utils.js';
 import { getReloadVersion } from '../pass.js';
-import type { Patch, PatchOptions } from './commit.js';
 
 function updateMainThread(
   { data, patchOptions }: {
@@ -20,31 +20,33 @@ function updateMainThread(
     patchOptions: PatchOptions;
   },
 ): void {
-  if ((patchOptions.reloadVersion ?? 0) < getReloadVersion()) {
+  if ((patchOptions.reloadVersion) < getReloadVersion()) {
     return;
   }
 
   setPipeline(patchOptions.pipelineOptions);
   markTiming(PerformanceTimingKeys.parse_changes_start);
-  let { snapshotPatch, workletRefInitValuePatch, flushOptions } = JSON.parse(data) as Patch;
-  markTiming(PerformanceTimingKeys.parse_changes_end);
+  const { patchList, flushOptions = {} } = JSON.parse(data) as PatchList;
 
+  markTiming(PerformanceTimingKeys.parse_changes_end);
   markTiming(PerformanceTimingKeys.patch_changes_start);
-  updateWorkletRefInitValueChanges(workletRefInitValuePatch);
-  __pendingListUpdates.clear();
-  if (snapshotPatch) {
-    snapshotPatchApply(snapshotPatch);
-  }
-  __pendingListUpdates.flush();
-  // console.debug('********** Lepus updatePatch:');
-  // printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
 
-  commitMainThreadPatchUpdate(patchOptions.commitTaskId);
+  for (const { snapshotPatch, workletRefInitValuePatch, id } of patchList) {
+    updateWorkletRefInitValueChanges(workletRefInitValuePatch);
+    __pendingListUpdates.clear();
+    if (snapshotPatch) {
+      snapshotPatchApply(snapshotPatch);
+    }
+    __pendingListUpdates.flush();
+    // console.debug('********** Lepus updatePatch:');
+    // printSnapshotInstance(snapshotInstanceManager.values.get(-1)!);
+
+    commitMainThreadPatchUpdate(id);
+  }
+  markTiming(PerformanceTimingKeys.patch_changes_end);
   if (patchOptions.isHydration) {
     clearDelayedWorklets();
   }
-  markTiming(PerformanceTimingKeys.patch_changes_end);
-  flushOptions ||= {};
   if (patchOptions.pipelineOptions) {
     flushOptions.pipelineOptions = patchOptions.pipelineOptions;
   }
@@ -66,4 +68,4 @@ function commitMainThreadPatchUpdate(commitTaskId?: number): void {
 /**
  * @internal
  */
-export { injectUpdateMainThread, commitMainThreadPatchUpdate };
+export { commitMainThreadPatchUpdate, injectUpdateMainThread };

package/runtime/src/lifecycle/reload.ts

@@ -1,14 +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 { render } from 'preact';
-
 import { __root, setRoot } from '../root.js';
 import { SnapshotInstance, __page, snapshotInstanceManager } from '../snapshot.js';
 import { isEmptyObject } from '../utils.js';
 import { destroyBackground } from './destroy.js';
 import { increaseReloadVersion } from './pass.js';
-import { renderMainThread } from './render.js';
+import { renderBackground, renderMainThread } from './render.js';
 import { hydrate } from '../hydrate.js';
 import { LifecycleConstant } from '../lifecycleConstant.js';
 import { __pendingListUpdates } from '../list.js';
@@ -71,7 +69,7 @@ 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);
 
-  render(__root.__jsx, __root as any);
+  renderBackground(__root.__jsx, __root as any);
 
   if (__PROFILE__) {
     console.profileEnd();

package/runtime/src/lifecycle/render.ts

@@ -2,11 +2,12 @@
 // 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 { render } from 'preact';
+import type { ComponentChild, ContainerNode } from 'preact';
 
 import { renderOpcodesInto } from '../opcodes.js';
 import { render as renderToString } from '../renderToOpcodes/index.js';
 import { __root } from '../root.js';
-// @ts-ignore
+import { commitToMainThread } from './patch/commit.js';
 
 function renderMainThread(): void {
   /* v8 ignore start */
@@ -36,6 +37,9 @@ function renderMainThread(): void {
       console.profile('renderOpcodesInto');
     }
     renderOpcodesInto(opcodes, __root as any);
+    if (__ENABLE_SSR__) {
+      __root.__opcodes = opcodes;
+    }
     if (__PROFILE__) {
       console.profileEnd();
     }
@@ -43,4 +47,9 @@ function renderMainThread(): void {
   /* v8 ignore stop */
 }
 
-export { renderMainThread };
+function renderBackground(vnode: ComponentChild, parent: ContainerNode): void {
+  render(vnode, parent);
+  void commitToMainThread();
+}
+
+export { renderMainThread, renderBackground };

package/runtime/src/list.ts

@@ -223,8 +223,17 @@ export const __pendingListUpdates = {
   },
 };
 
-const gSignMap: Record<number, Map<number, SnapshotInstance>> = {};
-const gRecycleMap: Record<number, Map<string, Map<number, SnapshotInstance>>> = {};
+export const gSignMap: Record<number, Map<number, SnapshotInstance>> = {};
+export const gRecycleMap: Record<number, Map<string, Map<number, SnapshotInstance>>> = {};
+
+export function clearListGlobal(): void {
+  for (const key in gSignMap) {
+    delete gSignMap[key];
+  }
+  for (const key in gRecycleMap) {
+    delete gRecycleMap[key];
+  }
+}
 
 export function componentAtIndexFactory(ctx: SnapshotInstance[]): ComponentAtIndexCallback {
   const componentAtIndex = (