Add a remote-dom to remote-ui adapter (#511)

* Initial legacy adaptors

* Cleanup and documentation

* Add remote root adaptor

* Add fragment support

* Add remote-ui example

* E2E tests for legacy adapter

* changeset

* Delete legacy/remote

* remove unused file

* adjust remote ui example title

* remove unused wait-on dep

* remove superfluous ts references

* Update packages/core/README.md

* move remote-ui example into kitchen sink

* Update changeset copy

* Change the order of functions

* Switch tree to Map

* Get rid of negation in conditions

* Lift out "update props" variables

* Add slotWrapper

* Update packages/core/source/legacy/host.ts

* slotWrapper -> slotProps.wrapper

* Add first set of tests

* Update tests

* Fix test imports

* Add additional tests

* Extract adapter into a separate package

* Use adapter component mapping

* ensure files are imported from source

* renderRemoteUi -> renderLegacy

* Merge imports

* compat v0.1.0

---------

Co-authored-by: Chris Sauve <chris.sauve@shopify.com>
Co-authored-by: Igor Kozlov <igor.kozlov@shopify.com>
Co-authored-by: Simon Taisne <simon.taisne@shopify.com>

Author: 4 people

.changeset/beige-windows-appear.md

@@ -0,0 +1,7 @@
+---
+'@remote-dom/compat': major
+---
+
+Add a `adaptToLegacyRemoteChannel` helper that adapts a Remote DOM `RemoteConnection` object into a `remote-ui` `RemoteChannel`.
+
+It allows to use a Remote DOM receiver class on the host, even if the remote environment is using `remote-ui`.

e2e/basic.e2e.ts

@@ -7,12 +7,14 @@ import {test, expect} from '@playwright/test';
   ['iframe', 'vue'],
   ['iframe', 'htm'],
   ['iframe', 'react'],
+  ['iframe', 'react-remote-ui'],
   ['worker', 'vanilla'],
   ['worker', 'preact'],
   ['worker', 'svelte'],
   // ['worker', 'vue'],
   ['worker', 'htm'],
   ['worker', 'react'],
+  ['worker', 'react-remote-ui'],
 ].forEach(([sandbox, example]) => {
   test(`basic modal interaction with ${sandbox} sandbox and ${example} example`, async ({
     page,
@@ -30,7 +32,8 @@ import {test, expect} from '@playwright/test';
       dialog.dismiss().catch(() => {});
     });
 
+    const dialogPromise = page.waitForEvent('dialog');
     await page.getByRole('button', {name: 'Close'}).click();
-    await page.waitForEvent('dialog');
+    await dialogPromise;
   });
 });

examples/kitchen-sink/app/host.tsx

@@ -9,6 +9,7 @@ import {ThreadIframe, ThreadWebWorker} from '@quilted/threads';
 import type {SandboxAPI} from './types.ts';
 import {Button, Modal, Stack, Text, ControlPanel} from './host/components.tsx';
 import {createState} from './host/state.ts';
+import {adaptToLegacyRemoteChannel} from '@remote-dom/compat';
 
 // We will put any remote elements we want to render in this root element.
 const uiRoot = document.querySelector('main')!;
@@ -59,27 +60,37 @@ const components = new Map([
 
 const {receiver, example, sandbox} = createState(
   async ({receiver, example, sandbox}) => {
-    if (sandbox === 'iframe') {
-      await iframeSandbox.imports.render(receiver.connection, {
-        sandbox,
-        example,
-        async alert(content) {
-          console.log(
-            `Alert API used by example ${example} in the iframe sandbox`,
-          );
-          window.alert(content);
+    const api = {
+      sandbox,
+      example,
+      async alert(content: string) {
+        console.log(
+          `Alert API used by example ${example} in the iframe sandbox`,
+        );
+        window.alert(content);
+      },
+      async closeModal() {
+        document.querySelector('dialog')?.close();
+      },
+    };
+
+    const sandboxToUse = sandbox === 'iframe' ? iframeSandbox : workerSandbox;
+
+    if (example === 'react-remote-ui') {
+      const remoteUiChannel = adaptToLegacyRemoteChannel(receiver.connection, {
+        elements: {
+          Text: 'ui-text',
+          Button: 'ui-button',
+          Stack: 'ui-stack',
+          Modal: 'ui-modal',
         },
       });
+      await sandboxToUse.imports.renderLegacy(remoteUiChannel, {
+        ...api,
+      });
     } else {
-      await workerSandbox.imports.render(receiver.connection, {
-        sandbox,
-        example,
-        async alert(content) {
-          console.log(
-            `Alert API used by example ${example} in the worker sandbox`,
-          );
-          window.alert(content);
-        },
+      await sandboxToUse.imports.render(receiver.connection, {
+        ...api,
       });
     }
   },

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

@@ -159,6 +159,7 @@ export function ControlPanel({
           <option value="svelte">Svelte</option>
           <option value="vue">Vue</option>
           <option value="htm">htm</option>
+          <option value="react-remote-ui">React Remote UI</option>
         </Select>
       </section>
 

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

@@ -0,0 +1,96 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource react */
+import {retain} from '@quilted/threads';
+
+import {createRemoteReactComponent} from '@remote-ui/react';
+import {
+  ButtonProperties,
+  ModalProperties,
+  RenderAPI,
+  StackProperties,
+  TextProperties,
+} from '../../types';
+import {useState} from 'react';
+import {createRoot, createRemoteRoot} from '@remote-ui/react';
+import {RemoteChannel} from '@remote-ui/core';
+
+const Button = createRemoteReactComponent<
+  'Button',
+  ButtonProperties & {modal?: React.ReactNode}
+>('Button', {fragmentProps: ['modal']});
+
+const Text = createRemoteReactComponent<'Text', TextProperties>('Text');
+const Stack = createRemoteReactComponent<'Stack', StackProperties>('Stack');
+const Modal = createRemoteReactComponent<
+  'Modal',
+  ModalProperties & {primaryAction?: React.ReactNode}
+>('Modal', {fragmentProps: ['primaryAction']});
+
+export function renderUsingReactRemoteUI(
+  channel: RemoteChannel,
+  api: RenderAPI,
+) {
+  retain(api);
+  retain(channel);
+
+  const remoteRoot = createRemoteRoot(channel, {
+    components: ['Button', 'Text', 'Stack', 'Modal'],
+  });
+
+  createRoot(remoteRoot).render(<App api={api} />);
+  remoteRoot.mount();
+}
+
+function App({api}: {api: RenderAPI}) {
+  return (
+    <Stack spacing>
+      <Text>
+        Rendering example: <Text emphasis>{api.example}</Text>
+      </Text>
+      <Text>
+        Rendering in sandbox: <Text emphasis>{api.sandbox}</Text>
+      </Text>
+      <Button modal={<CountModal {...api} />}>Open modal</Button>
+    </Stack>
+  );
+}
+
+function CountModal({alert, closeModal}: RenderAPI) {
+  const [count, setCount] = useState(0);
+
+  const primaryAction = (
+    <Button
+      onPress={() => {
+        closeModal();
+      }}
+    >
+      Close
+    </Button>
+  );
+
+  return (
+    <Modal
+      primaryAction={primaryAction}
+      onClose={() => {
+        if (count > 0) {
+          alert(`You clicked ${count} times!`);
+        }
+
+        setCount(0);
+      }}
+    >
+      <Stack spacing>
+        <Text>
+          Click count: <Text emphasis>{count}</Text>
+        </Text>
+        <Button
+          onPress={() => {
+            setCount((count) => count + 1);
+          }}
+        >
+          Click me!
+        </Button>
+      </Stack>
+    </Modal>
+  );
+}

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

@@ -19,6 +19,7 @@ const Button = createRemoteComponent('ui-button', ButtonElement, {
     onPress: {event: 'press'},
   },
 });
+
 const Stack = createRemoteComponent('ui-stack', StackElement);
 const Modal = createRemoteComponent('ui-modal', ModalElement, {
   eventProps: {

examples/kitchen-sink/app/remote/iframe/sandbox.ts

@@ -2,7 +2,7 @@ import {RemoteMutationObserver} from '@remote-dom/core/elements';
 import {ThreadNestedIframe} from '@quilted/threads';
 
 import '../elements.ts';
-import {render} from '../render.ts';
+import {render, renderLegacy} from '../render.ts';
 import type {SandboxAPI} from '../../types.ts';
 
 // We use the `@quilted/threads` library to create a “thread” for our iframe,
@@ -32,5 +32,8 @@ new ThreadNestedIframe<never, SandboxAPI>({
 
       await render(root, api);
     },
+    async renderLegacy(channel, api) {
+      await renderLegacy(channel, api);
+    },
   },
 });

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

@@ -1,3 +1,4 @@
+import {RemoteChannel} from '@remote-ui/core';
 import type {RenderAPI} from '../types.ts';
 
 // Defines the custom elements available to render in the remote environment.
@@ -31,3 +32,10 @@ export async function render(root: Element, api: RenderAPI) {
     }
   }
 }
+
+export async function renderLegacy(channel: RemoteChannel, api: RenderAPI) {
+  const {renderUsingReactRemoteUI} = await import(
+    './examples/react-remote-ui.tsx'
+  );
+  return renderUsingReactRemoteUI(channel, api);
+}

examples/kitchen-sink/app/remote/worker/sandbox.ts

@@ -4,7 +4,7 @@ import '@remote-dom/react/polyfill';
 import {ThreadWebWorker} from '@quilted/threads';
 
 import '../elements.ts';
-import {render} from '../render.ts';
+import {render, renderLegacy} from '../render.ts';
 import type {SandboxAPI} from '../../types.ts';
 
 // We use the `@quilted/threads` library to create a “thread” for our iframe,
@@ -27,5 +27,8 @@ new ThreadWebWorker<never, SandboxAPI>(self as any as Worker, {
 
       await render(root, api);
     },
+    async renderLegacy(channel, api) {
+      await renderLegacy(channel, api);
+    },
   },
 });

examples/kitchen-sink/app/types.ts

@@ -1,4 +1,5 @@
 import type {RemoteConnection} from '@remote-dom/core';
+import {RemoteChannel} from '@remote-ui/core';
 
 /**
  * Describes the technology used to sandbox the “remote” code, so that it does
@@ -25,7 +26,8 @@ export type RenderExample =
   | 'preact'
   | 'react'
   | 'svelte'
-  | 'vue';
+  | 'vue'
+  | 'react-remote-ui';
 
 /**
  * The object that the “host” page will pass to the “remote” environment. This
@@ -49,13 +51,19 @@ export interface RenderAPI {
    * alert.
    */
   alert(content: string): Promise<void>;
+
+  /**
+   * Closes the modal.
+   */
+  closeModal(): void;
 }
 
 /**
  *
  */
 export interface SandboxAPI {
   render(connection: RemoteConnection, api: RenderAPI): Promise<unknown>;
+  renderLegacy(channel: RemoteChannel, api: RenderAPI): Promise<unknown>;
 }
 
 // These property and method types will be used by both the host and remote environments.