Handle fragments in adapter (#545)

Author: igor10k

.changeset/few-emus-cry.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/compat': patch
+---
+
+Handle fragments in adapter

packages/compat/source/adapter/host.ts

@@ -1,5 +1,6 @@
 import {
   KIND_TEXT as LEGACY_KIND_TEXT,
+  KIND_COMPONENT as LEGACY_KIND_COMPONENT,
   KIND_FRAGMENT as LEGACY_KIND_FRAGMENT,
   ACTION_MOUNT as LEGACY_ACTION_MOUNT,
   ACTION_INSERT_CHILD as LEGACY_ACTION_INSERT_CHILD,
@@ -16,6 +17,7 @@ import {
 import {
   ROOT_ID,
   NODE_TYPE_TEXT,
+  NODE_TYPE_COMMENT,
   NODE_TYPE_ELEMENT,
   MUTATION_TYPE_INSERT_CHILD,
   MUTATION_TYPE_REMOVE_CHILD,
@@ -26,6 +28,7 @@ import {
   type RemoteElementSerialization,
   type RemoteConnection,
   type RemoteNodeSerialization,
+  type RemoteCommentSerialization,
 } from '@remote-dom/core';
 
 export interface LegacyRemoteChannelElementMap {
@@ -233,7 +236,7 @@ export function adaptToLegacyRemoteChannel(
             records.push([
               MUTATION_TYPE_INSERT_CHILD,
               id,
-              adaptLegacyFragmentSerialization(key, value, options),
+              adaptLegacyPropFragmentSerialization(key, value, options),
               tree.get(id)?.length ?? 0,
             ] satisfies RemoteMutationRecord);
           } else {
@@ -266,13 +269,26 @@ export function adaptToLegacyRemoteChannel(
 }
 
 function adaptLegacyNodeSerialization(
-  child: LegacyRemoteComponentSerialization | LegacyRemoteTextSerialization,
+  child:
+    | LegacyRemoteComponentSerialization
+    | LegacyRemoteTextSerialization
+    | LegacyRemoteFragmentSerialization,
   options?: LegacyRemoteChannelOptions,
-): RemoteElementSerialization | RemoteTextSerialization {
-  if (child.kind === LEGACY_KIND_TEXT) {
-    return adaptLegacyTextSerialization(child);
-  } else {
-    return adaptLegacyComponentSerialization(child, options);
+):
+  | RemoteElementSerialization
+  | RemoteTextSerialization
+  | RemoteCommentSerialization {
+  switch (child.kind) {
+    case LEGACY_KIND_TEXT:
+      return adaptLegacyTextSerialization(child);
+    case LEGACY_KIND_COMPONENT:
+      return adaptLegacyComponentSerialization(child, options);
+    default:
+      return {
+        id: child.id,
+        type: NODE_TYPE_COMMENT,
+        data: 'added by remote-ui legacy adaptor to replace a fragment rendered as a child',
+      };
   }
 }
 
@@ -343,11 +359,11 @@ function adaptLegacyFragmentsSerialization(
   options?: LegacyRemoteChannelOptions,
 ): RemoteElementSerialization[] {
   return Object.entries(fragments).map(([slot, fragment]) => {
-    return adaptLegacyFragmentSerialization(slot, fragment, options);
+    return adaptLegacyPropFragmentSerialization(slot, fragment, options);
   });
 }
 
-function adaptLegacyFragmentSerialization(
+function adaptLegacyPropFragmentSerialization(
   slot: string,
   fragment: LegacyRemoteFragmentSerialization,
   options?: LegacyRemoteChannelOptions,

packages/compat/source/tests/adapter.test.ts

@@ -22,6 +22,7 @@ import {
   MUTATION_TYPE_UPDATE_TEXT,
   NODE_TYPE_ELEMENT,
   NODE_TYPE_TEXT,
+  NODE_TYPE_COMMENT,
   ROOT_ID,
 } from '@remote-dom/core';
 
@@ -117,6 +118,145 @@ describe('adaptToLegacyRemoteChannel()', () => {
       ]);
     });
 
+    it('replaces fragments with comment nodes', () => {
+      const receiver = new TestRemoteReceiver();
+
+      const channel = adaptToLegacyRemoteChannel(receiver.connection);
+
+      channel(ACTION_MOUNT, [
+        {
+          id: '2',
+          kind: KIND_FRAGMENT,
+          children: [
+            {
+              id: '1',
+              kind: KIND_TEXT,
+              text: 'First text',
+            },
+            {
+              id: '0',
+              kind: KIND_TEXT,
+              text: 'Second text',
+            },
+          ],
+        } as any,
+      ]);
+
+      expect(receiver.connection.mutate).toHaveBeenCalledWith([
+        [
+          MUTATION_TYPE_INSERT_CHILD,
+          ROOT_ID,
+          {
+            id: '2',
+            type: NODE_TYPE_COMMENT,
+            data: 'added by remote-ui legacy adaptor to replace a fragment rendered as a child',
+          },
+          0,
+        ],
+      ]);
+
+      expect(receiver.root.children).toStrictEqual([
+        {
+          id: '2',
+          type: NODE_TYPE_COMMENT,
+          data: 'added by remote-ui legacy adaptor to replace a fragment rendered as a child',
+          version: 0,
+        },
+      ]);
+    });
+
+    it('mounts components replacing fragment children with comment nodes', () => {
+      const receiver = new TestRemoteReceiver();
+
+      const channel = adaptToLegacyRemoteChannel(receiver.connection);
+
+      channel(ACTION_MOUNT, [
+        {
+          id: '4',
+          kind: KIND_COMPONENT,
+          type: 'Banner',
+          props: {title: 'Title'},
+          children: [
+            {
+              id: '3',
+              kind: KIND_TEXT,
+              text: 'Direct text child',
+            },
+            {
+              id: '2',
+              kind: KIND_FRAGMENT,
+              children: [
+                {
+                  id: '1',
+                  kind: KIND_TEXT,
+                  text: 'Text in fragment',
+                },
+                {
+                  id: '0',
+                  kind: KIND_COMPONENT,
+                  type: 'Button',
+                  props: {},
+                  children: [],
+                },
+              ],
+            } as any,
+          ],
+        },
+      ]);
+
+      expect(receiver.connection.mutate).toHaveBeenCalledWith([
+        [
+          MUTATION_TYPE_INSERT_CHILD,
+          ROOT_ID,
+          {
+            id: '4',
+            type: NODE_TYPE_ELEMENT,
+            element: 'Banner',
+            properties: {title: 'Title'},
+            children: [
+              {
+                id: '3',
+                type: NODE_TYPE_TEXT,
+                data: 'Direct text child',
+              },
+              {
+                id: '2',
+                type: NODE_TYPE_COMMENT,
+                data: 'added by remote-ui legacy adaptor to replace a fragment rendered as a child',
+              },
+            ],
+          },
+          0,
+        ],
+      ]);
+
+      expect(receiver.root.children).toStrictEqual([
+        {
+          id: '4',
+          type: NODE_TYPE_ELEMENT,
+          element: 'Banner',
+          children: [
+            {
+              id: '3',
+              type: NODE_TYPE_TEXT,
+              data: 'Direct text child',
+              version: 0,
+            },
+            {
+              id: '2',
+              type: NODE_TYPE_COMMENT,
+              data: 'added by remote-ui legacy adaptor to replace a fragment rendered as a child',
+              version: 0,
+            },
+          ],
+          properties: {title: 'Title'},
+          attributes: {},
+          eventListeners: {},
+          version: 0,
+        },
+      ]);
+    });
+
     it('mounts component nodes with fragment props', () => {
       const receiver = new TestRemoteReceiver();