diff --git a/packages/react/runtime/__test__/delayed-lifecycle-events.test.jsx b/packages/react/runtime/__test__/delayed-lifecycle-events.test.jsx index 77d43cbc5d..c3684ff0b5 100644 --- a/packages/react/runtime/__test__/delayed-lifecycle-events.test.jsx +++ b/packages/react/runtime/__test__/delayed-lifecycle-events.test.jsx @@ -31,7 +31,7 @@ describe('delayedLifecycleEvents', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_1","__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_1"}]}", }, ], ], @@ -44,7 +44,7 @@ describe('delayedLifecycleEvents', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_1","__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_1"}]}", }, ], ] diff --git a/packages/react/runtime/__test__/hydrate.test.jsx b/packages/react/runtime/__test__/hydrate.test.jsx index 7a234b995f..eebfd692cf 100644 --- a/packages/react/runtime/__test__/hydrate.test.jsx +++ b/packages/react/runtime/__test__/hydrate.test.jsx @@ -290,7 +290,7 @@ describe('dual-runtime hydrate', () => { -1, 2, undefined, - undefined, + 0, 0, "__snapshot_a94a8_test_3", 3, @@ -298,7 +298,7 @@ describe('dual-runtime hydrate', () => { -1, 3, undefined, - undefined, + 0, ] `); }); diff --git a/packages/react/runtime/__test__/lifecycle/reload.test.jsx b/packages/react/runtime/__test__/lifecycle/reload.test.jsx index 9073b307ff..c5d8ae20e3 100644 --- a/packages/react/runtime/__test__/lifecycle/reload.test.jsx +++ b/packages/react/runtime/__test__/lifecycle/reload.test.jsx @@ -305,7 +305,7 @@ describe('reload', () => { [ "rLynxFirstScreen", { - "root": "{"id":-6,"type":"root","children":[{"id":-7,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-8,"type":null,"values":["Enjoy"],"__slotIndex":0},{"id":-9,"type":null,"values":["World"],"__slotIndex":1},{"id":-10,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":2}],"__slotIndex":0}]}", + "root": "{"id":-6,"type":"root","children":[{"id":-7,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-8,"type":null,"values":["Enjoy"]},{"id":-9,"type":null,"values":["World"],"slotIndex":1},{"id":-10,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"slotIndex":2}]}]}", }, ], ], @@ -723,7 +723,7 @@ describe('reload', () => { [ "rLynxFirstScreen", { - "root": "{"id":-6,"type":"root","children":[{"id":-7,"type":"__snapshot_a94a8_test_3","children":[{"id":-8,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-9,"type":null,"values":["Enjoy"],"__slotIndex":0},{"id":-10,"type":null,"values":["World"],"__slotIndex":1},{"id":-11,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":2}],"__slotIndex":0}],"__slotIndex":0}]}", + "root": "{"id":-6,"type":"root","children":[{"id":-7,"type":"__snapshot_a94a8_test_3","children":[{"id":-8,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-9,"type":null,"values":["Enjoy"]},{"id":-10,"type":null,"values":["World"],"slotIndex":1},{"id":-11,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"slotIndex":2}]}]}]}", }, ], ], @@ -1308,7 +1308,7 @@ describe('firstScreenSyncTiming - jsReady', () => { "-8": -13, "-9": -14, }, - "root": "{"id":-11,"type":"root","children":[{"id":-12,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-13,"type":null,"values":["Hello 2"],"__slotIndex":0},{"id":-14,"type":null,"values":["World"],"__slotIndex":1},{"id":-15,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":2}],"__slotIndex":0}]}", + "root": "{"id":-11,"type":"root","children":[{"id":-12,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-13,"type":null,"values":["Hello 2"]},{"id":-14,"type":null,"values":["World"],"slotIndex":1},{"id":-15,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"slotIndex":2}]}]}", }, ], ] @@ -1511,7 +1511,7 @@ describe('firstScreenSyncTiming - jsReady', () => { "-5": -13, "-9": -17, }, - "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_5","children":[{"id":-18,"type":"__snapshot_a94a8_test_6","values":[{"item-key":0}],"children":[{"id":-22,"type":"__snapshot_a94a8_test_4","values":["a"],"__slotIndex":0}],"__slotIndex":0},{"id":-19,"type":"__snapshot_a94a8_test_6","values":[{"item-key":1}],"children":[{"id":-23,"type":"__snapshot_a94a8_test_4","values":["b"],"__slotIndex":0}],"__slotIndex":0},{"id":-20,"type":"__snapshot_a94a8_test_6","values":[{"item-key":2}],"children":[{"id":-24,"type":"__snapshot_a94a8_test_4","values":["c"],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}", + "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_5","children":[{"id":-18,"type":"__snapshot_a94a8_test_6","values":[{"item-key":0}],"children":[{"id":-22,"type":"__snapshot_a94a8_test_4","values":["a"]}]},{"id":-19,"type":"__snapshot_a94a8_test_6","values":[{"item-key":1}],"children":[{"id":-23,"type":"__snapshot_a94a8_test_4","values":["b"]}]},{"id":-20,"type":"__snapshot_a94a8_test_6","values":[{"item-key":2}],"children":[{"id":-24,"type":"__snapshot_a94a8_test_4","values":["c"]}]}]}]}", }, ], ] @@ -1675,7 +1675,7 @@ describe('firstScreenSyncTiming - jsReady', () => { "-2": -10, "-6": -14, }, - "root": "{"id":-10,"type":"root","children":[{"id":-14,"type":"__snapshot_a94a8_test_7","children":[{"id":-11,"type":"__snapshot_a94a8_test_8","values":[{"item-key":0}],"children":[{"id":-15,"type":"__snapshot_a94a8_test_4","values":["a"],"__slotIndex":0}],"__slotIndex":0},{"id":-12,"type":"__snapshot_a94a8_test_8","values":[{"item-key":1}],"children":[{"id":-16,"type":"__snapshot_a94a8_test_4","values":["b"],"__slotIndex":0}],"__slotIndex":0},{"id":-13,"type":"__snapshot_a94a8_test_8","values":[{"item-key":2}],"children":[{"id":-17,"type":"__snapshot_a94a8_test_4","values":["c"],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}", + "root": "{"id":-10,"type":"root","children":[{"id":-14,"type":"__snapshot_a94a8_test_7","children":[{"id":-11,"type":"__snapshot_a94a8_test_8","values":[{"item-key":0}],"children":[{"id":-15,"type":"__snapshot_a94a8_test_4","values":["a"]}]},{"id":-12,"type":"__snapshot_a94a8_test_8","values":[{"item-key":1}],"children":[{"id":-16,"type":"__snapshot_a94a8_test_4","values":["b"]}]},{"id":-13,"type":"__snapshot_a94a8_test_8","values":[{"item-key":2}],"children":[{"id":-17,"type":"__snapshot_a94a8_test_4","values":["c"]}]}]}]}", }, ], ] @@ -1868,7 +1868,7 @@ describe('firstScreenSyncTiming - jsReady', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-11,"type":"root","children":[{"id":-12,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-13,"type":null,"values":["Hello 2"],"__slotIndex":0},{"id":-14,"type":null,"values":["World"],"__slotIndex":1},{"id":-15,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":2}],"__slotIndex":0}]}", + "root": "{"id":-11,"type":"root","children":[{"id":-12,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-13,"type":null,"values":["Hello 2"]},{"id":-14,"type":null,"values":["World"],"slotIndex":1},{"id":-15,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"slotIndex":2}]}]}", }, ], ] diff --git a/packages/react/runtime/__test__/preact.test.jsx b/packages/react/runtime/__test__/preact.test.jsx index 4ffe5094a1..2676da8ffe 100644 --- a/packages/react/runtime/__test__/preact.test.jsx +++ b/packages/react/runtime/__test__/preact.test.jsx @@ -655,42 +655,42 @@ describe('document - dual-runtime', () => { delete BackgroundSnapshotInstance.prototype.toJSON; expect(hydrate(JSON.parse(JSON.stringify(root)), backgroundRoot)).toMatchInlineSnapshot(` + [ + 3, + -64, + "k", + "0", + 3, + -65, + 0, + "0", + 0, + "__snapshot_a94a8_test_22", + 91, + 3, + 91, + "k", + "_", + 0, + null, + 92, + 4, + 92, [ - 3, - -64, - "k", - "0", - 3, - -65, - 0, - "0", - 0, - "__snapshot_a94a8_test_22", - 91, - 3, - 91, - "k", "_", - 0, - null, - 92, - 4, - 92, - [ - "_", - ], - 1, - 91, - 92, - undefined, - 0, - 1, - -61, - 91, - undefined, - 0, - ] - `); + ], + 1, + 91, + 92, + undefined, + 0, + 1, + -61, + 91, + undefined, + 0, + ] + `); expect(takeGlobalSnapshotPatch()).toMatchInlineSnapshot(`[]`); // empty before init initGlobalSnapshotPatch(); diff --git a/packages/react/runtime/__test__/renderToOpcodes.test.jsx b/packages/react/runtime/__test__/renderToOpcodes.test.jsx index 4a616a5e63..d63768db5c 100644 --- a/packages/react/runtime/__test__/renderToOpcodes.test.jsx +++ b/packages/react/runtime/__test__/renderToOpcodes.test.jsx @@ -51,10 +51,8 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -80,7 +78,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -117,13 +114,10 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -5, @@ -147,10 +141,8 @@ describe('renderToString', () => { 0, 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -5, @@ -169,7 +161,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -5, @@ -209,13 +200,10 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -239,10 +227,8 @@ describe('renderToString', () => { 0, 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -261,7 +247,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -280,6 +265,7 @@ describe('renderToString', () => { }); it('should render with attr', () => { + vi.spyOn(Math, 'random').mockReturnValue(0.5); const random = Math.random(); function App() { @@ -295,13 +281,12 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -2, "type": "__snapshot_a94a8_test_6", "values": [ - ${random}, + 0.5, "hello world", ], }, @@ -309,7 +294,7 @@ describe('renderToString', () => { 2, "values", [ - ${random}, + 0.5, "hello world", ], 1, @@ -331,10 +316,8 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -3, @@ -353,7 +336,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -3, @@ -386,10 +368,8 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -3, @@ -408,7 +388,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -3, @@ -439,10 +418,8 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -3, @@ -461,7 +438,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -3, @@ -491,13 +467,10 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -521,10 +494,8 @@ describe('renderToString', () => { 0, 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -543,7 +514,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -573,13 +543,10 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -7, @@ -603,10 +570,8 @@ describe('renderToString', () => { 0, 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -7, @@ -625,7 +590,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -7, @@ -930,7 +894,6 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -2, @@ -951,10 +914,8 @@ describe('renderToString', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -973,7 +934,6 @@ describe('renderToString', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -4, @@ -1325,7 +1285,6 @@ describe('renderOpcodesInto', () => { `); - debugger; const [vnodeA, vnodeB, vnodeC, vnodeC2, vnodeD] = scratch.__firstChild.props.$0; expect(vnodeA).not.toHaveProperty('__elements'); @@ -1375,7 +1334,6 @@ describe('createElement', () => { [ 0, { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -41, @@ -1391,7 +1349,6 @@ describe('createElement', () => { [ 0, { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -42, @@ -1415,7 +1372,6 @@ describe('createElement', () => { [ 0, { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -43, @@ -1431,7 +1387,6 @@ describe('createElement', () => { [ 0, { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -44, diff --git a/packages/react/runtime/__test__/snapshot/dynamicPartType.test.jsx b/packages/react/runtime/__test__/snapshot/dynamicPartType.test.jsx index 7702fe53fe..fbf28d4d6b 100644 --- a/packages/react/runtime/__test__/snapshot/dynamicPartType.test.jsx +++ b/packages/react/runtime/__test__/snapshot/dynamicPartType.test.jsx @@ -138,7 +138,7 @@ describe('legacy DynamicPartType should work', () => { "childId": 3, "op": "InsertBefore", "parentId": -10, - "slotIndex": undefined, + "slotIndex": 0, }, { "childId": -13, @@ -155,7 +155,7 @@ describe('legacy DynamicPartType should work', () => { "childId": 5, "op": "InsertBefore", "parentId": -12, - "slotIndex": undefined, + "slotIndex": 0, }, ] `); @@ -237,15 +237,19 @@ describe('legacy DynamicPartType should work', () => { b.insertBefore(c0); b.insertBefore(c1); + expect(listRef).toMatchInlineSnapshot(``); + const c0_d0 = new SnapshotInstance(slot); const c0_d1 = new SnapshotInstance(slot); c0.insertBefore(c0_d0); c0.insertBefore(c0_d1); + expect(listRef).toMatchInlineSnapshot(``); const c1_d0 = new SnapshotInstance(slot); const c1_d1 = new SnapshotInstance(slot); c1.insertBefore(c1_d0); c1.insertBefore(c1_d1); + expect(listRef).toMatchInlineSnapshot(``); __pendingListUpdates.flush(); @@ -364,10 +368,8 @@ describe('legacy DynamicPartType should work', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -27, @@ -386,7 +388,6 @@ describe('legacy DynamicPartType should work', () => { 3, [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -27, @@ -438,10 +439,8 @@ describe('legacy DynamicPartType should work', () => { [ 0, { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -29, @@ -457,7 +456,6 @@ describe('legacy DynamicPartType should work', () => { 0, 0, { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": -29, diff --git a/packages/react/runtime/__test__/snapshot/event.test.jsx b/packages/react/runtime/__test__/snapshot/event.test.jsx index 00b171250c..d135bdd145 100644 --- a/packages/react/runtime/__test__/snapshot/event.test.jsx +++ b/packages/react/runtime/__test__/snapshot/event.test.jsx @@ -1156,7 +1156,7 @@ describe('event when firstScreenSyncTiming is jsReady', () => { "-5": -8, "-6": -9, }, - "root": "{"id":-7,"type":"root","children":[{"id":-8,"type":"__snapshot_a94a8_test_12","children":[{"id":-9,"type":"__snapshot_a94a8_test_11","values":["-9:0:"],"__slotIndex":0}],"__slotIndex":0}]}", + "root": "{"id":-7,"type":"root","children":[{"id":-8,"type":"__snapshot_a94a8_test_12","children":[{"id":-9,"type":"__snapshot_a94a8_test_11","values":["-9:0:"]}]}]}", }, ], ] @@ -1265,7 +1265,7 @@ describe('call `root.render()` async', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_14","children":[{"id":-3,"type":"__snapshot_a94a8_test_13","values":["-3:0:"],"__slotIndex":0}],"__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_14","children":[{"id":-3,"type":"__snapshot_a94a8_test_13","values":["-3:0:"]}]}]}", }, ], ] diff --git a/packages/react/runtime/__test__/snapshot/ref.test.jsx b/packages/react/runtime/__test__/snapshot/ref.test.jsx index 222fa622c7..65df4044ef 100644 --- a/packages/react/runtime/__test__/snapshot/ref.test.jsx +++ b/packages/react/runtime/__test__/snapshot/ref.test.jsx @@ -117,7 +117,7 @@ describe('element ref', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_3","values":["react-ref--2-0","react-ref--2-1"],"__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_3","values":["react-ref--2-0","react-ref--2-1"]}]}", }, ], ] @@ -496,7 +496,7 @@ describe('element ref', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_9","values":["react-ref--2-0","react-ref--2-1","react-ref--2-2"],"__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_9","values":["react-ref--2-0","react-ref--2-1","react-ref--2-2"]}]}", }, ], ] @@ -903,7 +903,7 @@ describe('element ref', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_17","__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_17"}]}", }, ], ] @@ -1015,7 +1015,7 @@ describe('element ref in spread', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_19","values":[{},{"ref":"react-ref--2-1"},{}],"__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_19","values":[{},{"ref":"react-ref--2-1"},{}]}]}", }, ], ], diff --git a/packages/react/runtime/__test__/snapshotPatch.test.jsx b/packages/react/runtime/__test__/snapshotPatch.test.jsx index 22b03bbb93..bfa04486c8 100644 --- a/packages/react/runtime/__test__/snapshotPatch.test.jsx +++ b/packages/react/runtime/__test__/snapshotPatch.test.jsx @@ -153,7 +153,7 @@ describe('insertBefore', () => { 2, 3, undefined, - undefined, + 0, ] `); @@ -204,12 +204,12 @@ describe('insertBefore', () => { 2, 4, undefined, - undefined, + 0, 1, 2, 3, 4, - undefined, + 0, ] `); @@ -1044,7 +1044,7 @@ describe('DEV_ONLY_addSnapshot', () => { }, ], /* v8 ignore stop */ - [globalThis.DynamicPartType.Children, 0], + [[globalThis.DynamicPartType.Children, 0]], undefined, undefined, null, @@ -1078,8 +1078,10 @@ describe('DEV_ONLY_addSnapshot', () => { ], /* v8 ignore stop */ [ - globalThis.DynamicPartType.Children, - 0 + [ + globalThis.DynamicPartType.Children, + 0 + ] ], void 0, void 0, @@ -1107,7 +1109,7 @@ describe('DEV_ONLY_addSnapshot', () => { expect(snapshot).toHaveProperty('create', expect.any(Function)); expect(snapshot).toHaveProperty('update', expect.any(Array)); expect(snapshot.update.every(i => typeof i === 'function')).toBeTruthy(); - expect(snapshot).toHaveProperty('slot', [3, 0]); + expect(snapshot).toHaveProperty('slot', [[3, 0]]); }); it('with list', () => { diff --git a/packages/react/runtime/src/lifecycle/patch/snapshotPatchApply.ts b/packages/react/runtime/src/lifecycle/patch/snapshotPatchApply.ts index ff205a6e0d..6fbf9b145e 100644 --- a/packages/react/runtime/src/lifecycle/patch/snapshotPatchApply.ts +++ b/packages/react/runtime/src/lifecycle/patch/snapshotPatchApply.ts @@ -37,7 +37,7 @@ export function snapshotPatchApply(snapshotPatch: SnapshotPatch): void { const parentId = snapshotPatch[++i] as number; const childId = snapshotPatch[++i] as number; const beforeId = snapshotPatch[++i] as number | undefined; - const __slotIndex = snapshotPatch[++i] as number | undefined; + const __slotIndex = snapshotPatch[++i] as number; const parent = snapshotInstanceManager.values.get(parentId); const child = snapshotInstanceManager.values.get(childId); const existingNode = snapshotInstanceManager.values.get(beforeId!); diff --git a/packages/react/runtime/src/snapshot/backgroundSnapshot.ts b/packages/react/runtime/src/snapshot/backgroundSnapshot.ts index b106ca4156..f1b1e7e5b6 100644 --- a/packages/react/runtime/src/snapshot/backgroundSnapshot.ts +++ b/packages/react/runtime/src/snapshot/backgroundSnapshot.ts @@ -125,7 +125,7 @@ export class BackgroundSnapshotInstance { __values: any[] | undefined; __snapshot_def: Snapshot; __extraProps?: Record | undefined; - __slotIndex?: number | undefined; + __slotIndex: number = 0; private __parent: BackgroundSnapshotInstance | null = null; private __firstChild: BackgroundSnapshotInstance | null = null; @@ -597,7 +597,7 @@ export function hydrate( let filteredBeforeChildNodes = beforeChildNodes; let filteredAfterChildNodes = afterChildNodes; if (type === DynamicPartType.SlotV2 || type === DynamicPartType.ListSlotV2) { - filteredBeforeChildNodes = beforeChildNodes.filter(v => v.__slotIndex === index); + filteredBeforeChildNodes = beforeChildNodes.filter(v => (v.slotIndex ?? 0) === index); filteredAfterChildNodes = afterChildNodes.filter(v => v.__slotIndex === index); } @@ -678,7 +678,7 @@ export function hydrate( before.id, node.id, target?.id, - node.__slotIndex, + node.slotIndex ?? 0, ); } finally { profileEnd(); @@ -689,7 +689,7 @@ export function hydrate( before.id, node.id, target?.id, - node.__slotIndex, + node.slotIndex ?? 0, ); } }, diff --git a/packages/react/runtime/src/snapshot/definition.ts b/packages/react/runtime/src/snapshot/definition.ts index 2d7dc694c1..e6c51b0720 100644 --- a/packages/react/runtime/src/snapshot/definition.ts +++ b/packages/react/runtime/src/snapshot/definition.ts @@ -146,6 +146,7 @@ export function createSnapshot( if (v === DynamicPartType.ListChildren || v === DynamicPartType.ListSlotV2) { s.isListHolder = true; } + s.isSlotV2 = slot.every(([type]) => type === DynamicPartType.SlotV2 || type === DynamicPartType.ListSlotV2); } return uniqID; } diff --git a/packages/react/runtime/src/snapshot/snapshot.ts b/packages/react/runtime/src/snapshot/snapshot.ts index 1843ab3a2a..3f0b5e0693 100644 --- a/packages/react/runtime/src/snapshot/snapshot.ts +++ b/packages/react/runtime/src/snapshot/snapshot.ts @@ -88,7 +88,7 @@ export class SnapshotInstance { __worklet_ref_set?: Set | Worklet>; __listItemPlatformInfo?: PlatformInfo; __extraProps?: Record | undefined; - __slotIndex?: number | undefined; + __slotIndex: number = 0; constructor(public type: string, id?: number) { // Suspense uses 'div' @@ -162,7 +162,7 @@ export class SnapshotInstance { while (child) { child.ensureElements(); - const [type, elementIndex] = slot[typeof child.__slotIndex === 'number' ? child.__slotIndex : index]!; + const [type, elementIndex] = slot[this.__snapshot_def.isSlotV2 ? child.__slotIndex : index]!; switch (type) { case DynamicPartType.Slot: { __ReplaceElement(child.__element_root!, elements[elementIndex]!); @@ -219,6 +219,7 @@ export class SnapshotInstance { a.__id = this.__id; a.__snapshot_def = this.__snapshot_def; a.__values = this.__values; + a.__slotIndex = this.__slotIndex; // all clear a.__parent = null; @@ -363,10 +364,7 @@ export class SnapshotInstance { const count = __snapshot_def.slot.length; if ( - count === 1 - || (__snapshot_def.isSlotV2 ??= __snapshot_def.slot.every(([type]) => - type === DynamicPartType.SlotV2 || type === DynamicPartType.ListSlotV2 - )) + count === 1 || __snapshot_def.isSlotV2 ) { const [, elementIndex] = __snapshot_def.slot[typeof newNode.__slotIndex === 'number' ? newNode.__slotIndex : 0]!; const parent = __elements[elementIndex]!; @@ -374,7 +372,7 @@ export class SnapshotInstance { __RemoveElement(parent, newNode.__element_root!); } if (existingNode) { - if (__snapshot_def.isSlotV2 && newNode.__slotIndex! < existingNode.__slotIndex!) { + if (__snapshot_def.isSlotV2 && newNode.__slotIndex < existingNode.__slotIndex) { __AppendElement(parent, newNode.__element_root!); } else { __InsertElementBefore( @@ -483,14 +481,18 @@ export class SnapshotInstance { } toJSON(): Omit & { children: SnapshotInstance[] | undefined } { - return { + const json: Omit & { children: SnapshotInstance[] | undefined } = { id: this.__id, type: this.type, values: this.__values, extraProps: this.__extraProps, children: this.__firstChild ? this.childNodes : undefined, - __slotIndex: this.__slotIndex, }; + // To save serialize time, we only serialize slotIndex if it is not 0 + if (this.__slotIndex > 0) { + json.slotIndex = this.__slotIndex; + } + return json; } callUpdateIfNotDirectOrDeepEqual(index: number, oldValue: any, newValue: any): void { diff --git a/packages/react/runtime/src/snapshot/types.ts b/packages/react/runtime/src/snapshot/types.ts index 8e5bfa4a10..be4cc8643c 100644 --- a/packages/react/runtime/src/snapshot/types.ts +++ b/packages/react/runtime/src/snapshot/types.ts @@ -22,5 +22,5 @@ export interface SerializedSnapshotInstance { values?: any[] | undefined; extraProps?: Record | undefined; children?: SerializedSnapshotInstance[] | undefined; - __slotIndex?: number | undefined; + slotIndex?: number | undefined; } diff --git a/packages/react/testing-library/src/__tests__/act.test.jsx b/packages/react/testing-library/src/__tests__/act.test.jsx index 23cf0f7f5a..c82c36794d 100644 --- a/packages/react/testing-library/src/__tests__/act.test.jsx +++ b/packages/react/testing-library/src/__tests__/act.test.jsx @@ -174,7 +174,6 @@ test('fireEvent triggers useEffect calls', async () => { expect(snapshotInstanceManager.values).toMatchInlineSnapshot(` Map { -1 => { - "__slotIndex": undefined, "children": undefined, "extraProps": undefined, "id": -1, @@ -222,13 +221,10 @@ test('fireEvent triggers useEffect calls', async () => { expect(snapshotInstanceManager.values).toMatchInlineSnapshot(` Map { -1 => { - "__slotIndex": undefined, "children": [ { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": 3, @@ -252,10 +248,8 @@ test('fireEvent triggers useEffect calls', async () => { "values": undefined, }, 2 => { - "__slotIndex": 0, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": 3, @@ -273,7 +267,6 @@ test('fireEvent triggers useEffect calls', async () => { ], }, 3 => { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": 3, diff --git a/packages/react/testing-library/src/__tests__/alog.test.jsx b/packages/react/testing-library/src/__tests__/alog.test.jsx index 0e3d0bebf0..1d763293a5 100644 --- a/packages/react/testing-library/src/__tests__/alog.test.jsx +++ b/packages/react/testing-library/src/__tests__/alog.test.jsx @@ -142,7 +142,7 @@ describe('alog', () => { "[MainThread Component Render] name: App", ], [ - "[ReactLynxDebug] FiberElement API call #28: __OnLifecycleEvent(["rLynxFirstScreen", {"root":"{\\"id\\":-1,\\"type\\":\\"root\\",\\"children\\":[{\\"id\\":-2,\\"type\\":\\"__snapshot_d6fb6_test_1\\",\\"values\\":[\\"-2:0:\\",\\"-2:1:\\"],\\"children\\":[{\\"id\\":-3,\\"type\\":null,\\"values\\":[0],\\"__slotIndex\\":0},{\\"id\\":-4,\\"type\\":\\"__snapshot_d6fb6_test_2\\",\\"__slotIndex\\":1},{\\"id\\":-5,\\"type\\":\\"__snapshot_d6fb6_test_3\\",\\"__slotIndex\\":1}],\\"__slotIndex\\":0}]}","jsReadyEventIdSwap":{}}])", + "[ReactLynxDebug] FiberElement API call #28: __OnLifecycleEvent(["rLynxFirstScreen", {"root":"{\\"id\\":-1,\\"type\\":\\"root\\",\\"children\\":[{\\"id\\":-2,\\"type\\":\\"__snapshot_d6fb6_test_1\\",\\"values\\":[\\"-2:0:\\",\\"-2:1:\\"],\\"children\\":[{\\"id\\":-3,\\"type\\":null,\\"values\\":[0]},{\\"id\\":-4,\\"type\\":\\"__snapshot_d6fb6_test_2\\",\\"slotIndex\\":1},{\\"id\\":-5,\\"type\\":\\"__snapshot_d6fb6_test_3\\",\\"slotIndex\\":1}]}]}","jsReadyEventIdSwap":{}}])", ], [ "[BackgroundThread Component Render] name: ClassComponent, uniqID: __snapshot_d6fb6_test_2, __id: 4", @@ -179,21 +179,19 @@ describe('alog', () => { "type": null, "values": [ 0 - ], - "__slotIndex": 0 + ] }, { "id": -4, "type": "__snapshot_d6fb6_test_2", - "__slotIndex": 1 + "slotIndex": 1 }, { "id": -5, "type": "__snapshot_d6fb6_test_3", - "__slotIndex": 1 + "slotIndex": 1 } - ], - "__slotIndex": 0 + ] } ] }, @@ -412,7 +410,7 @@ describe('alog', () => { "[MainThread Component Render] name: App", ], [ - "[ReactLynxDebug] FiberElement API call #28: __OnLifecycleEvent(["rLynxFirstScreen", {"root":"{\\"id\\":-1,\\"type\\":\\"root\\",\\"children\\":[{\\"id\\":-2,\\"type\\":\\"__snapshot_d6fb6_test_1\\",\\"values\\":[\\"-2:0:\\",\\"-2:1:\\"],\\"children\\":[{\\"id\\":-3,\\"type\\":null,\\"values\\":[0],\\"__slotIndex\\":0},{\\"id\\":-4,\\"type\\":\\"__snapshot_d6fb6_test_2\\",\\"__slotIndex\\":1},{\\"id\\":-5,\\"type\\":\\"__snapshot_d6fb6_test_3\\",\\"__slotIndex\\":1}],\\"__slotIndex\\":0}]}","jsReadyEventIdSwap":{}}])", + "[ReactLynxDebug] FiberElement API call #28: __OnLifecycleEvent(["rLynxFirstScreen", {"root":"{\\"id\\":-1,\\"type\\":\\"root\\",\\"children\\":[{\\"id\\":-2,\\"type\\":\\"__snapshot_d6fb6_test_1\\",\\"values\\":[\\"-2:0:\\",\\"-2:1:\\"],\\"children\\":[{\\"id\\":-3,\\"type\\":null,\\"values\\":[0]},{\\"id\\":-4,\\"type\\":\\"__snapshot_d6fb6_test_2\\",\\"slotIndex\\":1},{\\"id\\":-5,\\"type\\":\\"__snapshot_d6fb6_test_3\\",\\"slotIndex\\":1}]}]}","jsReadyEventIdSwap":{}}])", ], [ "[BackgroundThread Component Render] name: ClassComponent, uniqID: __snapshot_d6fb6_test_2, __id: 4", @@ -449,21 +447,19 @@ describe('alog', () => { "type": null, "values": [ 0 - ], - "__slotIndex": 0 + ] }, { "id": -4, "type": "__snapshot_d6fb6_test_2", - "__slotIndex": 1 + "slotIndex": 1 }, { "id": -5, "type": "__snapshot_d6fb6_test_3", - "__slotIndex": 1 + "slotIndex": 1 } - ], - "__slotIndex": 0 + ] } ] }, diff --git a/packages/react/testing-library/src/__tests__/end-to-end.test.jsx b/packages/react/testing-library/src/__tests__/end-to-end.test.jsx index 194690c048..837d5de65e 100644 --- a/packages/react/testing-library/src/__tests__/end-to-end.test.jsx +++ b/packages/react/testing-library/src/__tests__/end-to-end.test.jsx @@ -42,7 +42,6 @@ test('state change will cause re-render', async () => { expect(snapshotInstanceManager.values).toMatchInlineSnapshot(` Map { -1 => { - "__slotIndex": undefined, "children": undefined, "extraProps": undefined, "id": -1, @@ -63,10 +62,8 @@ test('state change will cause re-render', async () => { expect(snapshotInstanceManager.values).toMatchInlineSnapshot(` Map { -1 => { - "__slotIndex": undefined, "children": [ { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": 2, @@ -80,7 +77,6 @@ test('state change will cause re-render', async () => { "values": undefined, }, 2 => { - "__slotIndex": 0, "children": undefined, "extraProps": undefined, "id": 2, @@ -163,7 +159,6 @@ test('it waits for the data to be loaded', async () => { expect(snapshotInstanceManager.values).toMatchInlineSnapshot(` Map { -1 => { - "__slotIndex": undefined, "children": undefined, "extraProps": undefined, "id": -1, diff --git a/packages/react/testing-library/src/__tests__/list.test.jsx b/packages/react/testing-library/src/__tests__/list.test.jsx index 27855a6d81..0bca0351b4 100644 --- a/packages/react/testing-library/src/__tests__/list.test.jsx +++ b/packages/react/testing-library/src/__tests__/list.test.jsx @@ -935,7 +935,7 @@ describe('list - deferred should render as normal', () => { "rLynxFirstScreen", { "jsReadyEventIdSwap": {}, - "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_d0c07_test_26","children":[{"id":-3,"type":"__snapshot_d0c07_test_27","values":[{"item-key":0}],"children":[{"id":-4,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-5,"type":"__snapshot_d0c07_test_28","children":[{"id":-6,"type":null,"values":[0],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0},{"id":-7,"type":"__snapshot_d0c07_test_27","values":[{"item-key":1}],"children":[{"id":-8,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-9,"type":"__snapshot_d0c07_test_28","children":[{"id":-10,"type":null,"values":[1],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0},{"id":-11,"type":"__snapshot_d0c07_test_27","values":[{"item-key":2}],"children":[{"id":-12,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-13,"type":"__snapshot_d0c07_test_28","children":[{"id":-14,"type":null,"values":[2],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}", + "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_d0c07_test_26","children":[{"id":-3,"type":"__snapshot_d0c07_test_27","values":[{"item-key":0}],"children":[{"id":-4,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-5,"type":"__snapshot_d0c07_test_28","children":[{"id":-6,"type":null,"values":[0]}]}]}]},{"id":-7,"type":"__snapshot_d0c07_test_27","values":[{"item-key":1}],"children":[{"id":-8,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-9,"type":"__snapshot_d0c07_test_28","children":[{"id":-10,"type":null,"values":[1]}]}]}]},{"id":-11,"type":"__snapshot_d0c07_test_27","values":[{"item-key":2}],"children":[{"id":-12,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-13,"type":"__snapshot_d0c07_test_28","children":[{"id":-14,"type":null,"values":[2]}]}]}]}]}]}", }, ], ], diff --git a/packages/react/testing-library/src/__tests__/renderComponent.test.jsx b/packages/react/testing-library/src/__tests__/renderComponent.test.jsx index bbd16c3ecc..87eeda9755 100644 --- a/packages/react/testing-library/src/__tests__/renderComponent.test.jsx +++ b/packages/react/testing-library/src/__tests__/renderComponent.test.jsx @@ -216,8 +216,7 @@ test('setState triggered renderComponent should have correct slotIndex', async ( "type": null, "values": [ "parent" - ], - "__slotIndex": 0 + ] }, { "id": -4, @@ -228,14 +227,12 @@ test('setState triggered renderComponent should have correct slotIndex', async ( "type": null, "values": [ 0 - ], - "__slotIndex": 0 + ] } ], - "__slotIndex": 1 + "slotIndex": 1 } - ], - "__slotIndex": 0 + ] } ] }" diff --git a/packages/react/testing-library/src/__tests__/setState-jsx.test.jsx b/packages/react/testing-library/src/__tests__/setState-jsx.test.jsx index d41ef78b82..e0701d1427 100644 --- a/packages/react/testing-library/src/__tests__/setState-jsx.test.jsx +++ b/packages/react/testing-library/src/__tests__/setState-jsx.test.jsx @@ -177,7 +177,7 @@ test('setState changes jsx', async () => { "type": "__snapshot_c1928_test_2", }, { - "beforeId": null, + "beforeId": 4, "childId": 8, "op": "InsertBefore", "parentId": 2, diff --git a/packages/react/testing-library/src/__tests__/text.test.jsx b/packages/react/testing-library/src/__tests__/text.test.jsx index 8caad62936..70ac048fae 100644 --- a/packages/react/testing-library/src/__tests__/text.test.jsx +++ b/packages/react/testing-library/src/__tests__/text.test.jsx @@ -31,8 +31,7 @@ describe('should only render text when it is not empty', () => { "children": [ { "id": -2, - "type": "__snapshot_89850_test_1", - "__slotIndex": 0 + "type": "__snapshot_89850_test_1" } ] }" @@ -82,28 +81,26 @@ describe('should only render text when it is not empty', () => { ); expect(JSON.stringify(JSON.parse(onLifecycleEventCalls[0][0][1]['root']), null, 2)).toMatchInlineSnapshot(` - "{ - "id": -1, - "type": "root", - "children": [ - { - "id": -2, - "type": "__snapshot_89850_test_2", - "children": [ - { - "id": -3, - "type": null, - "values": [ - "Dynamic Text" - ], - "__slotIndex": 0 - } - ], - "__slotIndex": 0 - } - ] - }" - `); + "{ + "id": -1, + "type": "root", + "children": [ + { + "id": -2, + "type": "__snapshot_89850_test_2", + "children": [ + { + "id": -3, + "type": null, + "values": [ + "Dynamic Text" + ] + } + ] + } + ] + }" + `); expect(callLepusMethodCalls[0]).toMatchInlineSnapshot(` [ "rLynxChange",