fix(react/runtime): un-revert #239 'batch multiple patches for main thread communication'

packages/react/runtime/__test__/lifecycle.test.jsx

@@ -1,18 +1,20 @@
-import { Component, options, render } from 'preact';
+import { Component, options } from 'preact';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useEffect, useLayoutEffect, useState } from '../src/index';
 import { globalEnvManager } from './utils/envManager';
-import { waitSchedule } from './utils/nativeMethod';
 import { initDelayUnmount } from '../src/lifecycle/delayUnmount';
 import { globalCommitTaskMap, replaceCommitHook, replaceRequestAnimationFrame } from '../src/lifecycle/patch/commit';
 import { deinitGlobalSnapshotPatch, initGlobalSnapshotPatch } from '../src/lifecycle/patch/snapshotPatch';
+import { renderBackground as render } from '../src/lifecycle/render';
 import { LifecycleConstant } from '../src/lifecycleConstant';
 import { CATCH_ERROR } from '../src/renderToOpcodes/constants';
 import { __root } from '../src/root';
 import { backgroundSnapshotInstanceManager, setupPage } from '../src/snapshot';
+import { elementTree, waitSchedule } from './utils/nativeMethod';
 
 beforeAll(() => {
+  options.debounceRendering = Promise.prototype.then.bind(Promise.resolve());
   setupPage(__CreatePage('0', 0));
   replaceCommitHook();
   initDelayUnmount();
@@ -28,6 +30,7 @@ afterEach(() => {
   globalEnvManager.resetEnv();
   deinitGlobalSnapshotPatch();
   vi.restoreAllMocks();
+  elementTree.clear();
 });
 
 describe('useEffect', () => {
@@ -801,4 +804,118 @@ describe('useState', () => {
       );
     }
   });
+
+  it('should batch multiple updates', async function() {
+    let _setCount;
+    let _setCount2;
+
+    const Child1 = () => {
+      const [count, setCount] = useState(0);
+      _setCount = setCount;
+      return (
+        <view>
+          <text text={count} />
+        </view>
+      );
+    };
+
+    const Child2 = () => {
+      const [count, setCount] = useState(0);
+      _setCount2 = setCount;
+      return (
+        <view>
+          <text text={count} />
+        </view>
+      );
+    };
+
+    const Comp = () => {
+      return (
+        <view>
+          <Child1 />
+          <Child2 />
+        </view>
+      );
+    };
+
+    // main thread render
+    {
+      __root.__jsx = <Comp />;
+      renderPage();
+    }
+
+    // background render
+    {
+      globalEnvManager.switchToBackground();
+      render(<Comp />, __root);
+    }
+
+    // hydrate
+    {
+      // LifecycleConstant.firstScreen
+      lynxCoreInject.tt.OnLifecycleEvent(...globalThis.__OnLifecycleEvent.mock.calls[0]);
+
+      // rLynxChange
+      globalEnvManager.switchToMainThread();
+      globalThis.__OnLifecycleEvent.mockClear();
+      const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
+      globalThis[rLynxChange[0]](rLynxChange[1]);
+      expect(globalThis.__OnLifecycleEvent).not.toBeCalled();
+    }
+
+    // insert node
+    {
+      globalEnvManager.switchToBackground();
+      lynx.getNativeApp().callLepusMethod.mockClear();
+      _setCount(1);
+      _setCount2(2);
+      await waitSchedule();
+
+      expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
+      expect(lynx.getNativeApp().callLepusMethod.mock.calls).toMatchInlineSnapshot(
+        `
+        [
+          [
+            "rLynxChange",
+            {
+              "data": "{"patchList":[{"id":42,"snapshotPatch":[3,-3,0,1]},{"id":43,"snapshotPatch":[3,-4,0,2]}]}",
+              "patchOptions": {
+                "reloadVersion": 0,
+              },
+            },
+            [Function],
+          ],
+        ]
+      `,
+      );
+    }
+
+    {
+      globalEnvManager.switchToMainThread();
+      globalThis.__OnLifecycleEvent.mockClear();
+      const rLynxChange = lynx.getNativeApp().callLepusMethod.mock.calls[0];
+      globalThis[rLynxChange[0]](rLynxChange[1]);
+      rLynxChange[2];
+      lynx.getNativeApp().callLepusMethod.mockClear();
+      await waitSchedule();
+      expect(__root.__element_root).toMatchInlineSnapshot(`
+        <page
+          cssId="default-entry-from-native:0"
+        >
+          <view>
+            <view>
+              <text
+                text={1}
+              />
+            </view>
+            <view>
+              <text
+                text={2}
+              />
+            </view>
+          </view>
+        </page>
+      `);
+    }
+  });
 });

packages/react/runtime/__test__/lynx/timing.test.jsx

@@ -3,11 +3,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 { Component, options, render } from 'preact';
+import { Component, options } from 'preact';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { replaceCommitHook } from '../../src/lifecycle/patch/commit';
 import { injectUpdateMainThread } from '../../src/lifecycle/patch/updateMainThread';
+import { renderBackground as render } from '../../src/lifecycle/render';
 import '../../src/lynx/component';
 import { initTimingAPI } from '../../src/lynx/performance';
 import { __root } from '../../src/root';

packages/react/runtime/__test__/snapshot/gesture.test.jsx

@@ -1,8 +1,8 @@
-import { render } from 'preact';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { replaceCommitHook } from '../../src/lifecycle/patch/commit';
 import { injectUpdateMainThread } from '../../src/lifecycle/patch/updateMainThread';
+import { renderBackground as render } from '../../src/lifecycle/render';
 import { __root } from '../../src/root';
 import { setupPage } from '../../src/snapshot';
 import { globalEnvManager } from '../utils/envManager';

packages/react/runtime/__test__/snapshot/ref.test.jsx

@@ -3,13 +3,13 @@
 // 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 { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Component, createRef, root, useState } from '../../src/index';
 import { delayedLifecycleEvents } from '../../src/lifecycle/event/delayLifecycleEvents';
 import { clearCommitTaskId, replaceCommitHook } from '../../src/lifecycle/patch/commit';
 import { injectUpdateMainThread } from '../../src/lifecycle/patch/updateMainThread';
+import { renderBackground as render } from '../../src/lifecycle/render';
 import { __pendingListUpdates } from '../../src/list';
 import { __root } from '../../src/root';
 import { setupPage } from '../../src/snapshot';

packages/react/runtime/__test__/snapshot/workletEvent.test.jsx

@@ -3,12 +3,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 { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Component, useState } from '../../src/index';
 import { replaceCommitHook } from '../../src/lifecycle/patch/commit';
 import { injectUpdateMainThread } from '../../src/lifecycle/patch/updateMainThread';
+import { renderBackground as render } from '../../src/lifecycle/render';
 import { __root } from '../../src/root';
 import { setupPage } from '../../src/snapshot';
 import { globalEnvManager } from '../utils/envManager';

packages/react/runtime/__test__/snapshot/workletRef.test.jsx

@@ -3,13 +3,13 @@
 // 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 { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { createCompBG1, createCompBGList, createCompBGSpread } from './workletRefBG';
 import { createCompMT1, createCompMTList, createCompMTSpread } from './workletRefMT';
 import { replaceCommitHook } from '../../src/lifecycle/patch/commit';
 import { injectUpdateMainThread } from '../../src/lifecycle/patch/updateMainThread';
+import { renderBackground as render } from '../../src/lifecycle/render';
 import { __root } from '../../src/root';
 import { setupPage } from '../../src/snapshot';
 import { globalEnvManager } from '../utils/envManager';

packages/react/runtime/__test__/worklet/workletRef.test.jsx

@@ -3,11 +3,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 { render } from 'preact';
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { replaceCommitHook } from '../../src/lifecycle/patch/commit';
 import { injectUpdateMainThread } from '../../src/lifecycle/patch/updateMainThread';
+import { renderBackground as render } from '../../src/lifecycle/render';
 import { __root } from '../../src/root';
 import { setupPage } from '../../src/snapshot';
 import { destroyWorklet } from '../../src/worklet/destroy';

packages/react/runtime/src/lifecycle/destroy.ts

@@ -1,19 +1,18 @@
 // 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 { delayedEvents } from './event/delayEvents.js';
 import { delayedLifecycleEvents } from './event/delayLifecycleEvents.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();

packages/react/runtime/src/lifecycle/patch/commit.ts

@@ -30,6 +30,11 @@ let nextCommitTaskId = 1;
 
 let globalBackgroundSnapshotInstancesToRemove: number[] = [];
 
+let patchesToCommit: Patch[] = [];
+function clearPatchesToCommit(): void {
+  patchesToCommit = [];
+}
+
 interface Patch {
   id: number;
   snapshotPatch?: SnapshotPatch;
@@ -48,16 +53,35 @@ interface PatchOptions {
 }
 
 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];
   const commit = async (vnode: VNode, commitQueue: any[]) => {
     if (__LEPUS__) {
       // for testing only
       commitQueue.length = 0;
       return;
     }
-
-    markTimingLegacy(PerformanceTimingKeys.updateDiffVdomEnd);
-    markTiming(PerformanceTimingKeys.diffVdomEnd);
     const renderCallbacks = commitQueue.map((component: Component<any>) => {
       const ret = {
         component,
@@ -97,9 +121,7 @@ function replaceCommitHook(): void {
     });
 
     const snapshotPatch = takeGlobalSnapshotPatch();
-    const flushOptions = globalFlushOptions;
     const workletRefInitValuePatch = takeWorkletRefInitValuePatch();
-    globalFlushOptions = {};
     if (!snapshotPatch && workletRefInitValuePatch.length === 0) {
       // before hydration, skip patch
       return;
@@ -115,23 +137,44 @@ function replaceCommitHook(): void {
     if (workletRefInitValuePatch.length) {
       patch.workletRefInitValuePatch = workletRefInitValuePatch;
     }
-    const patchList: PatchList = {
-      patchList: [patch],
-    };
-    if (!isEmptyObject(flushOptions)) {
-      patchList.flushOptions = flushOptions;
-    }
-    const obj = commitPatchUpdate(patchList, {});
 
-    lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
-      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.updateDiffVdomEnd);
+  markTiming(PerformanceTimingKeys.diffVdomEnd);
+
+  const flushOptions = globalFlushOptions;
+  globalFlushOptions = {};
+
+  const patchList: PatchList = {
+    patchList: patchesToCommit,
+  };
+  patchesToCommit = [];
+
+  if (!isEmptyObject(flushOptions)) {
+    patchList.flushOptions = flushOptions;
+  }
+
+  const obj = commitPatchUpdate(patchList, {});
+
+  lynx.getNativeApp().callLepusMethod(LifecycleConstant.patchUpdate, obj, () => {
+    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);
       }
-    });
-  };
-  options[COMMIT] = commit as ((...args: Parameters<typeof commit>) => void);
+    }
+  });
 }
 
 function commitPatchUpdate(patchList: PatchList, patchOptions: Omit<PatchOptions, 'reloadVersion'>): {
@@ -189,12 +232,15 @@ function replaceRequestAnimationFrame(): void {
  */
 export {
   commitPatchUpdate,
+  commitToMainThread,
   genCommitTaskId,
   clearCommitTaskId,
   globalBackgroundSnapshotInstancesToRemove,
   globalCommitTaskMap,
   globalFlushOptions,
   nextCommitTaskId,
+  patchesToCommit,
+  clearPatchesToCommit,
   replaceCommitHook,
   replaceRequestAnimationFrame,
   type PatchOptions,