@axonpack/react-native-devtools-tab 0.1.3 → 0.1.4-canary-dd8fff3e8208f0b71ddbb769703ea0038fcb5c86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axonpack/react-native-devtools-tab",
-  "version": "0.1.3",
+  "version": "0.1.4-canary-dd8fff3e8208f0b71ddbb769703ea0038fcb5c86",
   "description": "Put your own tab in React Native DevTools, with a two-way channel to the running app",
   "author": "Md Asadujjaman <abappi2019@gmail.com> (https://github.com/abappi19)",
   "keywords": [

package/src/device/services/__tests__/remote-sender.test.ts

@@ -466,3 +466,29 @@ test("a ref answers the methods React Native calls on a host instance", async ()
   // Zeroes rather than a refusal, because a layout reading a measurement wants a number.
   expect(measured).toEqual([0, 0, 0, 0, 0, 0]);
 });
+
+// React moves a keyed node by placing it again: `insertBefore`, or `appendChild` when it goes last.
+// Keeping the old position as well drew one node twice, so both copies updated and were selected
+// together.
+test("a row React moves is moved, not copied, live and in a replay", async () => {
+  const { container, sender } = mount();
+  const list = (keys: string[]) =>
+    createElement(
+      "ul",
+      null,
+      ...keys.map((key) => createElement("li", { key }, key)),
+    );
+
+  sender.render(list(["a", "b", "c"]));
+  await settle();
+  sender.render(list(["b", "c", "a"]));
+  await settle();
+  sender.render(list(["c", "a", "b", "d"]));
+  await settle();
+  expect(container.textContent).toBe("cabd");
+
+  const second = mount();
+  second.receiver.apply(sender.replay());
+  await settle();
+  expect(second.container.textContent).toBe("cabd");
+});

package/src/device/services/remote-sender.service.ts

@@ -101,7 +101,15 @@ export function createRemoteSender(
   // One reconciler per sender, not one shared. React commits long after `render` returns, when an
   // effect or a `setState` fires, so a shared one would have to be told which tab it was working for
   // at a moment nothing is in a position to tell it.
+  // React moves a node by placing it again, so a child already here is taken out first. Left in, it
+  // stays in the tree twice and a replay draws it twice.
+  const detach = (parent: Instance, child: Instance): void => {
+    const at = parent.children.indexOf(child);
+    if (at >= 0) parent.children.splice(at, 1);
+  };
+
   const append = (parent: Instance, child: Instance): void => {
+    detach(parent, child);
     parent.children.push(child);
     pending.push({ op: "append", parent: parent.id, child: child.id });
   };
@@ -111,6 +119,7 @@ export function createRemoteSender(
     child: Instance,
     before: Instance,
   ): void => {
+    detach(parent, child);
     const at = parent.children.indexOf(before);
     parent.children.splice(at < 0 ? parent.children.length : at, 0, child);
     pending.push({

package/src/renderer/services/remote-receiver.service.ts

@@ -89,7 +89,11 @@ export function createRemoteReceiver(): RemoteReceiver {
           case "append": {
             const parent = nodes.get(op.parent);
             const child = nodes.get(op.child);
-            if (parent && child) parent.children.push(child);
+            if (!parent || !child) break;
+            // Same as insert: React sends a node it moves to the end as an append.
+            const from = parent.children.indexOf(child);
+            if (from >= 0) parent.children.splice(from, 1);
+            parent.children.push(child);
             break;
           }