fix edge case with duplicate nodes on host side

Author: mfal

e2e/mutations.e2e.ts

@@ -1,8 +1,9 @@
-import {expect, test} from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 const testSet: Array<[string, string, string]> = [
   ['iframe', 'react-mutations-1', 'Data: 1\nData: 2\nData: 3\nData: 4'],
-  ['iframe', 'react-mutations-2', 'Data: 1\nData: 2'],
+  ['iframe', 'react-mutations-2', 'Data: 1\nData: 2\nData: 3\nData: 4'],
+  ['iframe', 'react-mutations-3', 'Data: 1\nData: 2'],
 ];
 
 testSet.forEach(([sandbox, example, expectedText]) => {

examples/kitchen-sink/app/host/components.tsx

@@ -164,6 +164,7 @@ export function ControlPanel({
           <option value="react-remote-ui">React Remote UI</option>
           <option value="react-mutations-1">React Mutations 1</option>
           <option value="react-mutations-2">React Mutations 2</option>
+          <option value="react-mutations-3">React Mutations 3</option>
         </Select>
       </section>
 
@@ -200,6 +201,7 @@ const EXAMPLE_FILE_NAMES = new Map<RenderExample, string>([
   ['react', 'react.tsx'],
   ['react-mutations-1', 'react-mutations.tsx'],
   ['react-mutations-2', 'react-mutations.tsx'],
+  ['react-mutations-3', 'react-mutations.tsx'],
   ['svelte', 'App.svelte'],
   ['vue', 'App.vue'],
 ]);

examples/kitchen-sink/app/host/state.ts

@@ -17,6 +17,7 @@ const ALLOWED_EXAMPLE_VALUES = new Set<RenderExample>([
   'vue',
   'react-mutations-1',
   'react-mutations-2',
+  'react-mutations-3',
 ]);
 
 export function createState(

examples/kitchen-sink/app/remote/examples/react-mutations.tsx

@@ -1,12 +1,13 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource react */
 
-import {createRemoteComponent} from '@remote-dom/react';
-import {createRoot} from 'react-dom/client';
+import { createRemoteComponent } from '@remote-dom/react';
+import { createRoot } from 'react-dom/client';
 
-import type {RenderAPI} from '../../types.ts';
-import {Stack as StackElement, Text as TextElement} from '../elements.ts';
-import {useRenders} from './utils/react-hooks.ts';
+import { useEffect, useState } from 'react';
+import type { RenderAPI } from '../../types.ts';
+import { Stack as StackElement, Text as TextElement } from '../elements.ts';
+import { useRenders } from './utils/react-hooks.ts';
 
 const Stack = createRemoteComponent('ui-stack', StackElement);
 const Text = createRemoteComponent('ui-text', TextElement);
@@ -48,6 +49,39 @@ const Example1 = () => {
 };
 
 const Example2 = () => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(false);
+  }, [setLoading]);
+
+  return (
+    <Stack spacing testId="test-stack">
+      <>
+        {loading && loading1}
+        {!loading && (
+          <>
+            {data1}
+            {data2}
+          </>
+        )}
+      </>
+      <>
+        {loading && loading2}
+        {!loading && (
+          <>
+            {data3}
+            {data4}
+          </>
+        )}
+      </>
+      {!loading && done}
+    </Stack>
+  );
+};
+
+
+const Example3 = () => {
   const renders = useRenders(2);
 
   return (
@@ -60,14 +94,17 @@ const Example2 = () => {
   );
 };
 
+
 function App({api}: {api: RenderAPI}) {
-  if (api.example === 'react-mutations-1') {
-    return <Example1 />;
-  }
+  const {example} = api;
 
-  if (api.example === 'react-mutations-2') {
-    return <Example2 />;
-  }
+  return example === 'react-mutations-1' ? (
+    <Example1 />
+  ) : example === 'react-mutations-2' ? (
+    <Example2 />
+  ) : example === 'react-mutations-3' ? (
+    <Example3 />
+  ) : null;
 }
 
 export function renderUsingReact(root: Element, api: RenderAPI) {

examples/kitchen-sink/app/remote/render.ts

@@ -23,7 +23,8 @@ export async function render(root: Element, api: RenderAPI) {
       return renderUsingReact(root, api);
     }
     case 'react-mutations-1':
-    case 'react-mutations-2': {
+    case 'react-mutations-2':
+    case 'react-mutations-3': {
       const {renderUsingReact} = await import('./examples/react-mutations.tsx');
       return renderUsingReact(root, api);
     }

examples/kitchen-sink/app/types.ts

@@ -30,7 +30,8 @@ export type RenderExample =
   | 'vue'
   | 'react-remote-ui'
   | 'react-mutations-1'
-  | 'react-mutations-2';
+  | 'react-mutations-2'
+  | 'react-mutations-3';
 
 /**
  * The object that the “host” page will pass to the “remote” environment. This

packages/compat/source/adapter/host.ts

@@ -87,6 +87,11 @@ export function adaptToLegacyRemoteChannel(
           }
 
           const siblings = tree.get(parentId)!;
+
+          if (siblings.some((existing) => existing.id === node.id)) {
+            return;
+          }
+
           const index =
             nextSiblingId === undefined
               ? siblings.length

packages/core/source/elements/RemoteMutationObserver.ts

@@ -34,7 +34,6 @@ import {
 export class RemoteMutationObserver extends MutationObserver {
   constructor(private readonly connection: RemoteConnection) {
     super((records) => {
-      const addedNodes: Node[] = [];
       const remoteRecords: RemoteMutationRecord[] = [];
 
       for (const record of records) {
@@ -49,25 +48,9 @@ export class RemoteMutationObserver extends MutationObserver {
               targetId,
               remoteId(node),
             ]);
-
-            addedNodes.splice(addedNodes.indexOf(node), 1);
           });
 
           record.addedNodes.forEach((node) => {
-            if (
-              addedNodes.some(
-                (addedNode) => addedNode === node || addedNode.contains(node),
-              )
-            ) {
-              // A mutation observer will queue some changes, so we might get one record
-              // for attaching a parent element, and additional records for attaching descendants.
-              // We serialize the entire tree when a new node was added, so we don’t want to
-              // send additional “insert child” records when we see those descendants — they
-              // will already be included the insertion of the parent.
-              return;
-            }
-
-            addedNodes.push(node);
             connectRemoteNode(node, connection);
 
             remoteRecords.push([

packages/core/source/receivers/DOMRemoteReceiver.ts

@@ -110,6 +110,10 @@ export class DOMRemoteReceiver {
           parentId === ROOT_ID ? this.root : attached.get(parentId)!;
         const normalizedChild = attach(child);
 
+        if (parent.contains(normalizedChild)) {
+          return;
+        }
+
         const existingTimeout = destroyTimeouts.get(parentId);
         if (existingTimeout) clearTimeout(existingTimeout);
 

packages/core/source/receivers/RemoteReceiver.ts

@@ -165,6 +165,11 @@ export class RemoteReceiver {
       insertChild: (parentId, child, nextSiblingId) => {
         const parent = attached.get(parentId) as Writable<RemoteReceiverParent>;
         const children = parent.children as Writable<RemoteReceiverNode[]>;
+
+        if (children.some((existing) => existing.id === child.id)) {
+          return;
+        }
+
         const normalizedChild = attach(child, parent);
 
         if (nextSiblingId === undefined) {