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

.changeset/silly-rocks-guess.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/react": minor
+---
+
+Reverts #239: "batch multiple patches for main thread communication"
+
+This reverts the change that batched updates sent to the main thread in a single render pass.

.changeset/strong-rockets-itch.md

@@ -0,0 +1,6 @@
+---
+"@lynx-js/react-rsbuild-plugin": patch
+"@lynx-js/react-webpack-plugin": patch
+---
+
+Support `@lynx-js/react` v0.108.0.

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

@@ -1,20 +1,18 @@
-import { Component, options } from 'preact';
+import { Component, options, render } 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();
@@ -30,7 +28,6 @@ afterEach(() => {
   globalEnvManager.resetEnv();
   deinitGlobalSnapshotPatch();
   vi.restoreAllMocks();
-  elementTree.clear();
 });
 
 describe('useEffect', () => {
@@ -804,118 +801,4 @@ 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,12 +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 { Component, options } from 'preact';
+import { Component, options, 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 '../../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,18 +1,19 @@
 // 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');
   }
 
-  renderBackground(null, __root as any);
+  render(null, __root as any);
 
   globalCommitTaskMap.forEach(task => {
     task();