e2e tests for legacy adapter

Author: lemonmade

e2e/basic.e2e.ts

@@ -30,7 +30,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;
   });
 });

e2e/remote-ui-legacy.e2e.ts

@@ -0,0 +1,27 @@
+import {test, expect} from '@playwright/test';
+const sandbox = 'iframe';
+const example = 'react';
+
+test.use({baseURL: 'http://localhost:8081'});
+
+test(`basic modal interaction remote-ui legacy rendered example`, async ({
+  page,
+}) => {
+  await page.goto(`/`);
+
+  await page.getByRole('button', {name: 'Open modal'}).click();
+  await page.getByRole('button', {name: 'Click me!'}).click();
+  await page.getByRole('button', {name: 'Click me!'}).click();
+
+  await expect(page.getByText('Click Count: 2')).toBeVisible();
+
+  page.once('dialog', (dialog) => {
+    expect(dialog.message()).toBe('You clicked 2 times!');
+    dialog.accept().catch(() => {});
+  });
+
+  const dialogPromise = page.waitForEvent('dialog');
+
+  await page.getByRole('button', {name: 'Close'}).click();
+  await dialogPromise;
+});

examples/remote-ui/app/host/components.tsx

@@ -1,6 +1,14 @@
 import {type ComponentChildren} from 'preact';
 import {forwardRef} from 'preact/compat';
-import {useRef, useImperativeHandle, useEffect} from 'preact/hooks';
+import {
+  useRef,
+  useImperativeHandle,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  useMemo,
+} from 'preact/hooks';
+import {createContext, useContext} from 'preact/compat';
 
 import type {
   ButtonProperties,
@@ -31,15 +39,14 @@ export function Button({
   children?: ComponentChildren;
   modal?: ComponentChildren;
 } & ButtonProperties) {
-  console.log('#modal', modal);
   return (
     <>
       <button
         class="Button"
         type="button"
-        onClick={() =>
-          onPress?.() ?? document.querySelector('dialog')?.showModal()
-        }
+        onClick={() => {
+          onPress?.();
+        }}
       >
         {children}
       </button>
@@ -67,30 +74,11 @@ export const Modal = forwardRef<
     children?: ComponentChildren;
     primaryAction?: ComponentChildren;
   } & ModalProperties
->(function Modal({children, primaryAction, onClose}, ref) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useImperativeHandle(ref, () => ({
-    open() {
-      dialogRef.current?.showModal();
-    },
-    close() {
-      dialogRef.current?.close();
-    },
-  }));
-
-  useEffect(() => {
-    dialogRef.current?.showModal();
-
-    return () => {
-      dialogRef.current?.close();
-    };
-  }, [dialogRef.current]);
-
+>(function Modal({children, primaryAction}) {
   return (
-    <dialog ref={dialogRef} class="Modal" onClose={() => onClose?.()}>
+    <div class="Modal">
       <div class="Modal-Content">{children}</div>
       {primaryAction && <div class="Modal-Actions">{primaryAction}</div>}
-    </dialog>
+    </div>
   );
 });

examples/remote-ui/app/remote/app.tsx

@@ -1,29 +1,60 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource react */
 
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 import {Button, Modal, Stack, Text} from './components';
 
-export function App() {
-  const [counter, setCounter] = useState(0);
+export function App({api}: {api: any}) {
+  const [showModal, setShowModal] = useState(false);
+  const [count, setCount] = useState(0);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setCounter(counter + 1);
-    }, 1000);
-
-    return () => clearTimeout(timer);
-  }, [counter]);
+  function removeModal() {
+    setShowModal(false);
+  }
 
   return (
-    <Stack>
-      <Button
-        onPress={() => setCounter(counter + 1)}
-        modal={counter === 0 ? <Modal>Hello</Modal> : undefined}
-      >
-        Update counter
-      </Button>
-      <Text>Counter: {counter}</Text>
+    <Stack spacing>
+      <>
+        <Text>
+          Rendering example: <Text emphasis>remote-ui legacy</Text>
+        </Text>
+        <Button
+          onPress={() => setShowModal(true)}
+          modal={
+            showModal ? (
+              <Modal
+                primaryAction={
+                  <Button
+                    onPress={() => {
+                      removeModal();
+                      if (count > 0) {
+                        alert(`You clicked ${count} times!`);
+                      }
+                    }}
+                  >
+                    Close
+                  </Button>
+                }
+              >
+                <Stack spacing>
+                  <Text>
+                    Click count: <Text emphasis>{count}</Text>
+                  </Text>
+                  <Button
+                    onPress={() => {
+                      setCount((count) => count + 1);
+                    }}
+                  >
+                    Click me!
+                  </Button>
+                </Stack>
+              </Modal>
+            ) : undefined
+          }
+        >
+          Open modal
+        </Button>
+      </>
     </Stack>
   );
 }

examples/remote-ui/app/remote/components.tsx

@@ -16,4 +16,5 @@ export const Stack = createRemoteReactComponent<'Stack', StackProperties>(
 );
 export const Modal = createRemoteReactComponent<'Modal', ModalProperties>(
   'Modal',
+  {fragmentProps: ['primaryAction']},
 );

examples/remote-ui/app/remote/remote.tsx

@@ -15,22 +15,7 @@ endpoint.expose({
       components: Object.keys(components),
     });
 
-    const modal = remoteRoot.createFragment();
-    modal.appendChild(remoteRoot.createComponent('Modal', {}, ['Hello']));
-    const button = remoteRoot.createComponent('Button', {modal}, ['click me']);
-
-    remoteRoot.appendChild(button);
-
-    setTimeout(() => {
-      const mewModal = remoteRoot.createFragment();
-      mewModal.appendChild(
-        remoteRoot.createComponent('Modal', {}, ['Hello from the new side']),
-      );
-
-      button.updateProps({modal: mewModal});
-    }, 1000);
-
-    // createRoot(remoteRoot).render(<App />);
+    createRoot(remoteRoot).render(<App />);
     remoteRoot.mount();
   },
 });

examples/remote-ui/app/style.css

@@ -164,14 +164,6 @@ li {
   background: rgba(9, 9, 11, 0.65);
 }
 
-.Modal[open] {
-  animation: OpenModal 0.2s ease normal;
-}
-
-.Modal:not([open]) {
-  display: none;
-}
-
 @keyframes OpenModal {
   from {
     opacity: 0;

examples/remote-ui/app/types.ts

@@ -37,6 +37,8 @@ export interface ModalProperties {
    * Remote DOM, this property can be set using `addEventListener('press')`.
    */
   onClose?(): void;
+
+  primaryAction?: RemoteFragment;
 }
 
 export interface ModalMethods {

package.json

@@ -22,15 +22,16 @@
     "example:kitchen-sink": "pnpm run --filter example-kitchen-sink start"
   },
   "devDependencies": {
+    "wait-on": "^8.0.1",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.0",
-    "@playwright/test": "^1.48.2",
+    "@playwright/test": "^1.49.0",
     "@quilted/rollup": "^0.2.45",
     "@quilted/typescript": "^0.4.2",
     "@quilted/vite": "^0.1.27",
     "@types/node": "~20.11.0",
     "jsdom": "^25.0.0",
-    "playwright": "^1.48.2",
+    "playwright": "^1.49.0",
     "prettier": "^3.3.3",
     "rollup": "^4.21.0",
     "tsx": "^4.19.0",

playwright.config.ts

@@ -32,9 +32,16 @@ export default defineConfig({
   ],
 
   // Run your local dev server before starting the tests
-  webServer: {
-    command: 'pnpm run example:kitchen-sink --port 8080',
-    url: 'http://localhost:8080',
-    reuseExistingServer: !process.env.CI,
-  },
+  webServer: [
+    {
+      command: 'pnpm run example:kitchen-sink --port 8080',
+      url: 'http://localhost:8080',
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: 'pnpm run example:remote-ui --port 8081',
+      url: 'http://localhost:8081',
+      reuseExistingServer: !process.env.CI,
+    },
+  ],
 });