chore: bump preact to 10.28.x

.changeset/dry-results-decide.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Bump Preact to 10.28.x.

packages/react/package.json

@@ -174,7 +174,7 @@
     "api-extractor": "api-extractor run --verbose"
   },
   "dependencies": {
-    "preact": "npm:@hongzhiyuan/preact@10.24.0-00213bad"
+    "preact": "npm:@hongzhiyuan/preact@10.28.0-fc4af453"
   },
   "devDependencies": {
     "@lynx-js/types": "3.6.0",

packages/react/runtime/__test__/debug/hooks-invalid-args.test.jsx

@@ -3,6 +3,10 @@ import { expect, test, vi } from 'vitest';
 test('preact/debug - Invalid argument passed to hook', async () => {
   vi.stubGlobal('__MAIN_THREAD__', false)
     .stubGlobal('__LEPUS__', false);
+  let warnLog = [];
+  vi.spyOn(console, 'warn').mockImplementation((...args) => {
+    warnLog.push(args);
+  });
 
   await import('preact/debug');
   const { root, useEffect, useState } = await import('../../src/index');
@@ -27,7 +31,12 @@ test('preact/debug - Invalid argument passed to hook', async () => {
     );
   }
 
-  expect(() => root.render(<App />)).toThrowErrorMatchingInlineSnapshot(
-    `[Error: Invalid argument passed to hook. Hooks should not be called with NaN in the dependency array. Hook index 1 in component Bar was called with NaN.]`,
-  );
+  root.render(<App />);
+  expect(warnLog).toMatchInlineSnapshot(`
+    [
+      [
+        "Invalid argument passed to hook. Hooks should not be called with NaN in the dependency array. Hook index 1 in component Bar was called with NaN.",
+      ],
+    ]
+  `);
 });

packages/react/runtime/__test__/debug/object-as-child.test.jsx

@@ -25,7 +25,7 @@ test('preact/debug - Objects are not valid as a child', async () => {
 
   expect(() => root.render(<App />)).toThrowErrorMatchingInlineSnapshot(
     `
-    [Error: Objects are not valid as a child. Encountered an object with the keys {foo,bar,baz,__,__b,__i,__u,__d}.
+    [Error: Objects are not valid as a child. Encountered an object with the keys {foo,bar,baz,__,__b,__i,__u}.
 
       in Bar
       in App

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

@@ -471,7 +471,8 @@ describe('triggerDataUpdated', () => {
       lynxCoreInject.tt.updateCardData({ msg: 'update' });
       await waitSchedule();
 
-      expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(3);
+      // duplicated because of https://github.com/preactjs/preact/pull/4724
+      expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(3 * 2);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls).toMatchInlineSnapshot(
         `
         [
@@ -491,7 +492,7 @@ describe('triggerDataUpdated', () => {
           [
             "rLynxChange",
             {
-              "data": "{"patchList":[{"id":12,"snapshotPatch":[3,-6,0,"update"]}]}",
+              "data": "{"patchList":[{"id":12}]}",
               "patchOptions": {
                 "flowIds": [
                   666,
@@ -504,7 +505,7 @@ describe('triggerDataUpdated', () => {
           [
             "rLynxChange",
             {
-              "data": "{"patchList":[{"id":13,"snapshotPatch":[3,-7,0,"update"]}]}",
+              "data": "{"patchList":[{"id":13}]}",
               "patchOptions": {
                 "flowIds": [
                   666,
@@ -514,6 +515,36 @@ describe('triggerDataUpdated', () => {
             },
             [Function],
           ],
+          [
+            "rLynxChange",
+            {
+              "data": "{"patchList":[{"id":14}]}",
+              "patchOptions": {
+                "reloadVersion": 0,
+              },
+            },
+            [Function],
+          ],
+          [
+            "rLynxChange",
+            {
+              "data": "{"patchList":[{"id":15,"snapshotPatch":[3,-6,0,"update"]}]}",
+              "patchOptions": {
+                "reloadVersion": 0,
+              },
+            },
+            [Function],
+          ],
+          [
+            "rLynxChange",
+            {
+              "data": "{"patchList":[{"id":16,"snapshotPatch":[3,-7,0,"update"]}]}",
+              "patchOptions": {
+                "reloadVersion": 0,
+              },
+            },
+            [Function],
+          ],
         ]
       `,
       );
@@ -648,7 +679,7 @@ describe('triggerDataUpdated', () => {
           [
             "rLynxChange",
             {
-              "data": "{"patchList":[{"id":16,"snapshotPatch":[3,-3,0,"update"]}],"flushOptions":{"triggerDataUpdated":true}}",
+              "data": "{"patchList":[{"id":19,"snapshotPatch":[3,-3,0,"update"]}],"flushOptions":{"triggerDataUpdated":true}}",
               "patchOptions": {
                 "flowIds": [
                   666,
@@ -958,7 +989,7 @@ describe('flush pending `renderComponent` before hydrate', () => {
       globalThis[rLynxChange[0]](rLynxChange[1]);
       expect(rLynxChange[1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"snapshotPatch":[],"id":24}]}",
+          "data": "{"patchList":[{"snapshotPatch":[],"id":27}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {
@@ -1059,7 +1090,7 @@ describe('flush pending `renderComponent` before hydrate', () => {
       globalThis[rLynxChange[0]](rLynxChange[1]);
       expect(rLynxChange[1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"snapshotPatch":[3,-3,0,"true"],"id":26}]}",
+          "data": "{"patchList":[{"snapshotPatch":[3,-3,0,"true"],"id":29}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {

packages/react/runtime/src/backgroundSnapshot.ts

@@ -90,9 +90,9 @@ export class BackgroundSnapshotInstance {
   //   return !!this.__parent;
   // }
 
-  contains(child: BackgroundSnapshotInstance): boolean {
-    return child.parentNode === this;
-  }
+  // contains(child: BackgroundSnapshotInstance): boolean {
+  //   return child.parentNode === this;
+  // }
 
   // This will be called in `lazy`/`Suspense`.
   appendChild(child: BackgroundSnapshotInstance): void {

packages/react/runtime/src/lynx/suspense.ts

@@ -18,7 +18,6 @@ export const Suspense: FunctionComponent<{ children: VNode | VNode[]; fallback:
     (__MAIN_THREAD__ ? createElementMainThread : createElementBackground) as typeof createElementBackground;
   const childrenRef = useRef<BackgroundSnapshotInstance>();
 
-  // @ts-expect-error wrapper is a valid element type
   const newChildren = __createElement('wrapper', {
     ref: (bsi: BackgroundSnapshotInstance) => {
       if (bsi) {
@@ -27,7 +26,6 @@ export const Suspense: FunctionComponent<{ children: VNode | VNode[]; fallback:
     },
   }, children);
 
-  // @ts-expect-error wrapper is a valid element type
   const newFallback = __createElement('wrapper', {
     ref: (bsi: BackgroundSnapshotInstance) => {
       if (bsi && childrenRef.current) {

packages/react/testing-library/src/__tests__/render.test.jsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
 import { test, expect } from 'vitest';
 import { render } from '..';
 import { createRef } from '@lynx-js/react';
+import { Component } from 'preact';
 
 test('renders view into page', async () => {
   const ref = createRef();
@@ -259,3 +260,37 @@ describe('dynamic key in snapshot', () => {
     `);
   });
 });
+
+it('should handle keyed replacements', () => {
+  const actions = [];
+  class Comp extends Component {
+    componentDidMount() {
+      actions.push('mounted ' + this.props.i);
+    }
+    render() {
+      return <text>Hello</text>;
+    }
+  }
+
+  const App = props => {
+    return (
+      <view>
+        <Comp key={props.y} i={1} />
+        {false}
+        <Comp i={2} />
+        <Comp i={3} />
+      </view>
+    );
+  };
+
+  render(<App y='1' />);
+  expect(actions).to.deep.equal(['mounted 1', 'mounted 2', 'mounted 3']);
+
+  render(<App y='2' />);
+  expect(actions).to.deep.equal([
+    'mounted 1',
+    'mounted 2',
+    'mounted 3',
+    'mounted 1',
+  ]);
+});