feat(react): optimize the number and depth of snapshot

.github/react-transform.instructions.md

@@ -0,0 +1,5 @@
+---
+applyTo: "packages/react/transform/**/*"
+---
+
+When validating SWC transform snapshot changes, update the Rust fixtures with `UPDATE=1 cargo test -p swc_plugin_snapshot` and `UPDATE=1 cargo test -p swc_plugin_list --features napi` so the stored snapshots match the current transform output.

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

@@ -102,6 +102,8 @@ describe('insertBefore', () => {
 
     const b = new SnapshotInstance(snapshot2);
     const c = new SnapshotInstance(snapshot2);
+    b.__slotIndex = 0;
+    c.__slotIndex = 1;
 
     a.insertBefore(b);
     a.insertBefore(c);
@@ -114,23 +116,27 @@ describe('insertBefore', () => {
           />
         </text>
         <text>
-          <view>
-            <text>
-              <raw-text
-                text="Hello World"
-              />
-            </text>
-          </view>
+          <wrapper>
+            <view>
+              <text>
+                <raw-text
+                  text="Hello World"
+                />
+              </text>
+            </view>
+          </wrapper>
           <raw-text
             text="!!!"
           />
-          <view>
-            <text>
-              <raw-text
-                text="Hello World"
-              />
-            </text>
-          </view>
+          <wrapper>
+            <view>
+              <text>
+                <raw-text
+                  text="Hello World"
+                />
+              </text>
+            </view>
+          </wrapper>
         </text>
       </view>
     `);
@@ -155,6 +161,9 @@ describe('insertBefore', () => {
     const a = new SnapshotInstance(snapshot1);
     const b = new SnapshotInstance(snapshot2);
     const c = new SnapshotInstance(snapshot2);
+    b.__slotIndex = 0;
+    c.__slotIndex = 1;
+
     a.insertBefore(b);
     a.insertBefore(c);
 
@@ -168,23 +177,27 @@ describe('insertBefore', () => {
           />
         </text>
         <text>
-          <view>
-            <text>
-              <raw-text
-                text="Hello World"
-              />
-            </text>
-          </view>
+          <wrapper>
+            <view>
+              <text>
+                <raw-text
+                  text="Hello World"
+                />
+              </text>
+            </view>
+          </wrapper>
           <raw-text
             text="!!!"
           />
-          <view>
-            <text>
-              <raw-text
-                text="Hello World"
-              />
-            </text>
-          </view>
+          <wrapper>
+            <view>
+              <text>
+                <raw-text
+                  text="Hello World"
+                />
+              </text>
+            </view>
+          </wrapper>
         </text>
       </view>
     `);
@@ -388,11 +401,7 @@ describe('dynamic key in snapshot', () => {
 
     expect(a.__element_root).toMatchInlineSnapshot(`
       <view>
-        <view
-          class="foo"
-        >
-          <wrapper />
-        </view>
+        <wrapper />
       </view>
     `);
   });
@@ -418,7 +427,10 @@ describe('dynamic key in snapshot', () => {
       <view
         class="foo"
       >
-        <wrapper />
+        <view>
+          <view />
+          <view />
+        </view>
       </view>
     `);
   });
@@ -449,11 +461,7 @@ describe('dynamic key in snapshot', () => {
           />
           <wrapper />
         </text>
-        <view
-          class="foo"
-        >
-          <wrapper />
-        </view>
+        <wrapper />
       </view>
     `);
   });

packages/react/runtime/__test__/debug/formatPatch.test.ts

@@ -12,6 +12,7 @@ describe('formatPatch', () => {
       1,
       2,
       undefined,
+      0,
       SnapshotOperation.RemoveChild,
       1,
       2,
@@ -32,7 +33,7 @@ describe('formatPatch', () => {
     const formatted = prettyFormatSnapshotPatch(snapshotPatch);
     expect(formatted).toEqual([
       { op: 'CreateElement', type: 'span', id: 2 },
-      { op: 'InsertBefore', parentId: 1, childId: 2, beforeId: undefined },
+      { op: 'InsertBefore', parentId: 1, childId: 2, beforeId: undefined, slotIndex: 0 },
       { op: 'RemoveChild', parentId: 1, childId: 2 },
       { op: 'SetAttribute', id: 2, dynamicPartIndex: 1, value: 'disabled' },
       { op: 'SetAttributes', id: 2, values: { hidden: true } },

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"}]}",
+              "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_1","__slotIndex":0}]}",
             },
           ],
         ],
@@ -44,7 +44,7 @@ describe('delayedLifecycleEvents', () => {
           "rLynxFirstScreen",
           {
             "jsReadyEventIdSwap": {},
-            "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_1"}]}",
+            "root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_a94a8_test_1","__slotIndex":0}]}",
           },
         ],
       ]

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

@@ -129,13 +129,15 @@ describe('dual-runtime hydrate', () => {
           3,
           7,
           undefined,
+          undefined,
           0,
           "__snapshot_a94a8_test_4",
           8,
           1,
           3,
           8,
           undefined,
+          undefined,
           0,
           "__snapshot_a94a8_test_2",
           9,
@@ -148,10 +150,12 @@ describe('dual-runtime hydrate', () => {
           3,
           9,
           undefined,
+          undefined,
           1,
           -1,
           3,
           -3,
+          undefined,
           0,
           "__snapshot_a94a8_test_2",
           6,
@@ -164,6 +168,7 @@ describe('dual-runtime hydrate', () => {
           -1,
           6,
           undefined,
+          undefined,
         ]
       `);
       backgroundSnapshotInstanceManager.values.forEach((v, k) => {
@@ -231,6 +236,7 @@ describe('dual-runtime hydrate', () => {
         -1,
         -3,
         -5,
+        undefined,
       ]
     `);
   });
@@ -253,13 +259,15 @@ describe('dual-runtime hydrate', () => {
         -1,
         2,
         undefined,
+        undefined,
         0,
         "__snapshot_a94a8_test_3",
         3,
         1,
         -1,
         3,
         undefined,
+        undefined,
       ]
     `);
   });
@@ -316,6 +324,7 @@ describe('dual-runtime hydrate - with slot (multi-children)', () => {
         -3,
         6,
         undefined,
+        undefined,
       ]
     `);
   });

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

@@ -120,7 +120,7 @@ describe('componentDidMount', () => {
     expect(mtCallback[0]).toEqual(LifecycleConstant.patchUpdate);
     expect(mtCallback[1]).toMatchInlineSnapshot(`
       {
-        "data": "{"patchList":[{"id":6,"snapshotPatch":[0,"__snapshot_a94a8_test_3",2,0,null,3,3,3,0,1,1,2,3,null,1,1,2,null]}]}",
+        "data": "{"patchList":[{"id":6,"snapshotPatch":[0,"__snapshot_a94a8_test_3",2,0,null,3,3,3,0,1,1,2,3,null,null,1,1,2,null,null]}]}",
         "patchOptions": {
           "reloadVersion": 0,
         },
@@ -167,7 +167,7 @@ describe('componentDidMount', () => {
     expect(mtCallback[0]).toEqual(LifecycleConstant.patchUpdate);
     expect(mtCallback[1]).toMatchInlineSnapshot(`
       {
-        "data": "{"patchList":[{"id":9,"snapshotPatch":[0,"__snapshot_a94a8_test_4",2,0,null,3,3,3,0,1,1,2,3,null,1,1,2,null]}]}",
+        "data": "{"patchList":[{"id":9,"snapshotPatch":[0,"__snapshot_a94a8_test_4",2,0,null,3,3,3,0,1,1,2,3,null,null,1,1,2,null,null]}]}",
         "patchOptions": {
           "reloadVersion": 0,
         },
@@ -559,7 +559,7 @@ describe('useState', () => {
       await waitSchedule();
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1].data).toMatchInlineSnapshot(
-        `"{"patchList":[{"id":27,"snapshotPatch":[0,"__snapshot_a94a8_test_15",2,4,2,[false,{"str":"str"}],1,-1,2,null]}]}"`,
+        `"{"patchList":[{"id":27,"snapshotPatch":[0,"__snapshot_a94a8_test_15",2,4,2,[false,{"str":"str"}],1,-1,2,null,null]}]}"`,
       );
     }
   });

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

@@ -305,7 +305,7 @@ describe('reload', () => {
             [
               "rLynxFirstScreen",
               {
-                "root": "{"id":-9,"type":"root","children":[{"id":-13,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-10,"type":"__snapshot_a94a8_test_3","children":[{"id":-15,"type":null,"values":["Enjoy"]}]},{"id":-11,"type":"__snapshot_a94a8_test_4","children":[{"id":-16,"type":null,"values":["World"]}]},{"id":-12,"type":"wrapper","children":[{"id":-14,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
+                "root": "{"id":-9,"type":"root","children":[{"id":-13,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-10,"type":"__snapshot_a94a8_test_3","children":[{"id":-15,"type":null,"values":["Enjoy"],"__slotIndex":0}],"__slotIndex":0},{"id":-11,"type":"__snapshot_a94a8_test_4","children":[{"id":-16,"type":null,"values":["World"],"__slotIndex":0}],"__slotIndex":0},{"id":-12,"type":"wrapper","children":[{"id":-14,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}",
               },
             ],
           ],
@@ -723,7 +723,7 @@ describe('reload', () => {
             [
               "rLynxFirstScreen",
               {
-                "root": "{"id":-9,"type":"root","children":[{"id":-15,"type":"__snapshot_a94a8_test_5","children":[{"id":-13,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-10,"type":"__snapshot_a94a8_test_3","children":[{"id":-16,"type":null,"values":["Enjoy"]}]},{"id":-11,"type":"__snapshot_a94a8_test_4","children":[{"id":-17,"type":null,"values":["World"]}]},{"id":-12,"type":"wrapper","children":[{"id":-14,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}]}",
+                "root": "{"id":-9,"type":"root","children":[{"id":-15,"type":"__snapshot_a94a8_test_5","children":[{"id":-13,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-10,"type":"__snapshot_a94a8_test_3","children":[{"id":-16,"type":null,"values":["Enjoy"],"__slotIndex":0}],"__slotIndex":0},{"id":-11,"type":"__snapshot_a94a8_test_4","children":[{"id":-17,"type":null,"values":["World"],"__slotIndex":0}],"__slotIndex":0},{"id":-12,"type":"wrapper","children":[{"id":-14,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}",
               },
             ],
           ],
@@ -1314,15 +1314,15 @@ describe('firstScreenSyncTiming - jsReady', () => {
                 "-8": -16,
                 "-9": -17,
               },
-              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-18,"type":"__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"]}]},{"id":-19,"type":"__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"]}]},{"id":-20,"type":"wrapper","children":[{"id":-22,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
+              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-18,"type":"__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"],"__slotIndex":0}],"__slotIndex":0},{"id":-19,"type":"__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"],"__slotIndex":0}],"__slotIndex":0},{"id":-20,"type":"wrapper","children":[{"id":-22,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}",
             },
           ],
         ]
       `);
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"snapshotPatch":[2,-17,-21,0,"__snapshot_a94a8_test_5",2,0,"__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,1,3,4,null,0,"__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,1,3,6,null,0,"wrapper",8,0,"__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,1,3,8,null,1,2,3,null,1,-17,2,null],"id":21}]}",
+          "data": "{"patchList":[{"snapshotPatch":[2,-17,-21,0,"__snapshot_a94a8_test_5",2,0,"__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,null,1,3,4,null,null,0,"__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,null,1,3,6,null,null,0,"wrapper",8,0,"__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,null,1,3,8,null,null,1,2,3,null,null,1,-17,2,null,null],"id":21}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {
@@ -1517,7 +1517,7 @@ describe('firstScreenSyncTiming - jsReady', () => {
                 "-5": -13,
                 "-9": -17,
               },
-              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_7","children":[{"id":-18,"type":"__snapshot_a94a8_test_8","values":[{"item-key":0}],"children":[{"id":-22,"type":"__snapshot_a94a8_test_6","values":["a"]}]},{"id":-19,"type":"__snapshot_a94a8_test_8","values":[{"item-key":1}],"children":[{"id":-23,"type":"__snapshot_a94a8_test_6","values":["b"]}]},{"id":-20,"type":"__snapshot_a94a8_test_8","values":[{"item-key":2}],"children":[{"id":-24,"type":"__snapshot_a94a8_test_6","values":["c"]}]}]}]}",
+              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_7","children":[{"id":-18,"type":"__snapshot_a94a8_test_8","values":[{"item-key":0}],"children":[{"id":-22,"type":"__snapshot_a94a8_test_6","values":["a"],"__slotIndex":0}],"__slotIndex":0},{"id":-19,"type":"__snapshot_a94a8_test_8","values":[{"item-key":1}],"children":[{"id":-23,"type":"__snapshot_a94a8_test_6","values":["b"],"__slotIndex":0}],"__slotIndex":0},{"id":-20,"type":"__snapshot_a94a8_test_8","values":[{"item-key":2}],"children":[{"id":-24,"type":"__snapshot_a94a8_test_6","values":["c"],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}",
             },
           ],
         ]
@@ -1681,7 +1681,7 @@ describe('firstScreenSyncTiming - jsReady', () => {
                 "-2": -10,
                 "-6": -14,
               },
-              "root": "{"id":-10,"type":"root","children":[{"id":-14,"type":"__snapshot_a94a8_test_9","children":[{"id":-11,"type":"__snapshot_a94a8_test_10","values":[{"item-key":0}],"children":[{"id":-15,"type":"__snapshot_a94a8_test_6","values":["a"]}]},{"id":-12,"type":"__snapshot_a94a8_test_10","values":[{"item-key":1}],"children":[{"id":-16,"type":"__snapshot_a94a8_test_6","values":["b"]}]},{"id":-13,"type":"__snapshot_a94a8_test_10","values":[{"item-key":2}],"children":[{"id":-17,"type":"__snapshot_a94a8_test_6","values":["c"]}]}]}]}",
+              "root": "{"id":-10,"type":"root","children":[{"id":-14,"type":"__snapshot_a94a8_test_9","children":[{"id":-11,"type":"__snapshot_a94a8_test_10","values":[{"item-key":0}],"children":[{"id":-15,"type":"__snapshot_a94a8_test_6","values":["a"],"__slotIndex":0}],"__slotIndex":0},{"id":-12,"type":"__snapshot_a94a8_test_10","values":[{"item-key":1}],"children":[{"id":-16,"type":"__snapshot_a94a8_test_6","values":["b"],"__slotIndex":0}],"__slotIndex":0},{"id":-13,"type":"__snapshot_a94a8_test_10","values":[{"item-key":2}],"children":[{"id":-17,"type":"__snapshot_a94a8_test_6","values":["c"],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}",
             },
           ],
         ]
@@ -1874,15 +1874,15 @@ describe('firstScreenSyncTiming - jsReady', () => {
             "rLynxFirstScreen",
             {
               "jsReadyEventIdSwap": {},
-              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-18,"type":"__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"]}]},{"id":-19,"type":"__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"]}]},{"id":-20,"type":"wrapper","children":[{"id":-22,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}]}]}]}]}",
+              "root": "{"id":-17,"type":"root","children":[{"id":-21,"type":"__snapshot_a94a8_test_2","values":[{"dataX":"WorldX"}],"children":[{"id":-18,"type":"__snapshot_a94a8_test_3","children":[{"id":-23,"type":null,"values":["Hello 2"],"__slotIndex":0}],"__slotIndex":0},{"id":-19,"type":"__snapshot_a94a8_test_4","children":[{"id":-24,"type":null,"values":["World"],"__slotIndex":0}],"__slotIndex":0},{"id":-20,"type":"wrapper","children":[{"id":-22,"type":"__snapshot_a94a8_test_1","values":[{"attr":{"dataX":"WorldX"}}],"__slotIndex":0}],"__slotIndex":0}],"__slotIndex":0}]}",
             },
           ],
         ]
       `);
       expect(lynx.getNativeApp().callLepusMethod).toHaveBeenCalledTimes(1);
       expect(lynx.getNativeApp().callLepusMethod.mock.calls[0][1]).toMatchInlineSnapshot(`
         {
-          "data": "{"patchList":[{"snapshotPatch":[2,-17,-21,0,"__snapshot_a94a8_test_5",2,0,"__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,1,3,4,null,0,"__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,1,3,6,null,0,"wrapper",8,0,"__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,1,3,8,null,1,2,3,null,1,-17,2,null],"id":27}]}",
+          "data": "{"patchList":[{"snapshotPatch":[2,-17,-21,0,"__snapshot_a94a8_test_5",2,0,"__snapshot_a94a8_test_2",3,4,3,[{"dataX":"WorldX"}],0,"__snapshot_a94a8_test_3",4,0,null,5,4,5,["Hello 2"],1,4,5,null,null,1,3,4,null,null,0,"__snapshot_a94a8_test_4",6,0,null,7,4,7,["World"],1,6,7,null,null,1,3,6,null,null,0,"wrapper",8,0,"__snapshot_a94a8_test_1",9,4,9,[{"attr":{"dataX":"WorldX"}}],1,8,9,null,null,1,3,8,null,null,1,2,3,null,null,1,-17,2,null,null],"id":27}]}",
           "patchOptions": {
             "isHydration": true,
             "pipelineOptions": {

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

@@ -273,12 +273,14 @@ describe('suspense', () => {
             "childId": 3,
             "op": "InsertBefore",
             "parentId": 2,
+            "slotIndex": 0,
           },
           {
             "beforeId": null,
             "childId": 2,
             "op": "InsertBefore",
             "parentId": -1,
+            "slotIndex": 0,
           },
           {
             "childId": -3,
@@ -295,12 +297,14 @@ describe('suspense', () => {
             "childId": 7,
             "op": "InsertBefore",
             "parentId": 3,
+            "slotIndex": 0,
           },
           {
             "beforeId": null,
             "childId": 2,
             "op": "InsertBefore",
             "parentId": -1,
+            "slotIndex": 0,
           },
         ]
       `);