@dxos/react-client 0.6.13 → 0.6.14-main.2b6a0f3

package/src/echo/useSpaces.test.tsx

@@ -3,24 +3,22 @@
 //
 
 import { act, renderHook } from '@testing-library/react';
-import { expect } from 'chai';
-
-import { describe, test } from '@dxos/test';
+import { describe, expect, test } from 'vitest';
 
 import { useSpace, useSpaces } from './useSpaces';
-import { createClient, createContextProvider } from '../testing/util';
+import { createClient, createClientContextProvider } from '../testing/util';
 
 describe('useSpaces', () => {
   test('lists existing spaces', async () => {
     const { client } = await createClient({ createIdentity: true });
-    const wrapper = await createContextProvider(client);
+    const wrapper = await createClientContextProvider(client);
     const { result } = renderHook(() => useSpaces(), { wrapper });
     expect(result.current.length).to.eq(1);
   });
 
   test('updates when new spaces are created', async () => {
     const { client } = await createClient({ createIdentity: true });
-    const wrapper = await createContextProvider(client);
+    const wrapper = await createClientContextProvider(client);
     const { result, rerender } = renderHook(() => useSpaces(), { wrapper });
     expect(result.current.length).to.eq(1);
     await act(async () => {
@@ -34,12 +32,12 @@ describe('useSpaces', () => {
 describe('useSpace', () => {
   test('gets default space', async () => {
     const { client } = await createClient();
-    const wrapper = await createContextProvider(client);
+    const wrapper = await createClientContextProvider(client);
     const { result, rerender } = renderHook(() => useSpace(), { wrapper });
     expect(result.current).to.be.undefined;
     await act(async () => {
       await client.halo.createIdentity();
-      await client.spaces.isReady.wait();
+      await client.spaces.waitUntilReady();
     });
     rerender();
     expect(result.current).to.not.be.undefined;
@@ -47,7 +45,7 @@ describe('useSpace', () => {
 
   test('gets space by key', async () => {
     const { client, space } = await createClient({ createIdentity: true, createSpace: true });
-    const wrapper = await createContextProvider(client);
+    const wrapper = await createClientContextProvider(client);
     const { result } = renderHook(() => useSpace(space!.key), { wrapper });
     expect(result.current).to.not.be.undefined;
   });

package/src/echo/useSpaces.ts

@@ -30,7 +30,7 @@ export const useSpace = (spaceKeyLike?: PublicKeyLike): Space | undefined => {
     }
 
     const timeout = setTimeout(async () => {
-      await client.spaces.isReady.wait();
+      await client.spaces.waitUntilReady();
       setReady(true);
     });
 

package/src/halo/useDevices.test.tsx

@@ -3,17 +3,15 @@
 //
 
 import { renderHook } from '@testing-library/react';
-import { expect } from 'chai';
-
-import { describe, test } from '@dxos/test';
+import { describe, expect, test } from 'vitest';
 
 import { useDevices } from './useDevices';
-import { createClient, createContextProvider } from '../testing/util';
+import { createClient, createClientContextProvider } from '../testing/util';
 
 describe('useDevices', () => {
   test('lists existing devices', async () => {
     const { client } = await createClient({ createIdentity: true });
-    const wrapper = await createContextProvider(client);
+    const wrapper = await createClientContextProvider(client);
     const { result } = renderHook(() => useDevices(), { wrapper });
     expect(result.current?.length).to.eq(1);
   });

package/src/playwright/playwright.config.ts

@@ -2,6 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { defaultPlaywrightConfig } from '@dxos/test/playwright';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig } from '@playwright/test';
 
-export default defaultPlaywrightConfig;
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: __dirname }),
+  ...e2ePreset(__dirname),
+  webServer: {
+    command: 'pnpm -w nx storybook-e2e stories',
+    port: 9009,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -2,10 +2,9 @@
 // Copyright 2021 DXOS.org
 //
 
-import { type Page, test } from '@playwright/test';
-import { expect } from 'chai';
+import { type Page, expect, test } from '@playwright/test';
 
-import { setupPage } from '@dxos/test/playwright';
+import { setupPage } from '@dxos/test-utils/playwright';
 
 // TODO(wittjosiah): Factor out.
 // TODO(burdon): No hard-coding of ports; reconcile all DXOS tools ports.
@@ -15,17 +14,13 @@ test.describe('Smoke test', () => {
   let page: Page;
 
   test.beforeAll(async ({ browser }) => {
-    const result = await setupPage(browser, {
-      url: storybookUrl('react-client-withclientprovider--default'),
-      waitFor: (page) => page.isVisible(':has-text("initialized")'),
-    });
-
+    const result = await setupPage(browser, { url: storybookUrl('react-client-withclientprovider--default') });
     page = result.page;
+    await page.locator(':text("initialized")').waitFor({ state: 'visible' });
   });
 
   // NOTE: This test depends on connecting to the default production deployed HALO vault.
   test('Renders remote client info', async () => {
-    const isVisible = await page.isVisible(':has-text("initialized")');
-    expect(isVisible).to.be.true;
+    await expect(page.locator(':text("initialized")')).toBeVisible();
   });
 });

package/src/testing/ClientRepeater.stories.tsx

@@ -15,7 +15,7 @@ import { useClient } from '../client';
 import { useSpace } from '../echo';
 
 export default {
-  title: 'react-client/ClientRepeater',
+  title: 'sdk/react-client/ClientRepeater',
   decorators: [withTheme],
 };
 

package/src/testing/ClientRepeater.tsx

@@ -2,37 +2,36 @@
 // Copyright 2022 DXOS.org
 //
 
+import { type Schema as S } from '@effect/schema';
 import React, { useState, type FC, useEffect, useRef } from 'react';
 
 import { Client, type PublicKey } from '@dxos/client';
-import { type Space } from '@dxos/client/echo';
 import { TestBuilder, performInvitation } from '@dxos/client/testing';
-import { type S } from '@dxos/echo-schema';
-import { registerSignalFactory } from '@dxos/echo-signals/react';
+import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { faker } from '@dxos/random';
-import { type MaybePromise } from '@dxos/util';
 
+import { type WithClientProviderProps } from './withClientProvider';
 import { ClientProvider } from '../client';
 
 export type ClientRepeatedComponentProps = { id: number; count: number; spaceKey?: PublicKey };
 
+export type ClientRepeaterControlsProps = { clients: Client[] };
+
+// TODO(burdon): Reconcile with ClientProviderProps.
 export type ClientRepeaterProps<P extends ClientRepeatedComponentProps> = {
   className?: string;
   component: FC<ClientRepeatedComponentProps>;
-  controls?: FC<{ clients: Client[] }>;
-  clients?: Client[];
+  controls?: FC<ClientRepeaterControlsProps>;
   count?: number;
-  registerSignalFactory?: boolean;
+  clients?: Client[];
   types?: S.Schema<any>[];
-  createIdentity?: boolean;
-  createSpace?: boolean;
-  onCreateSpace?: (space: Space) => MaybePromise<void>;
   args?: Omit<P, 'id' | 'count'>;
-};
+} & Pick<WithClientProviderProps, 'createIdentity' | 'createSpace' | 'onSpaceCreated'>;
 
 /**
  * Utility component for Storybook stories which sets up clients for n peers.
  * The `Component` property is rendered n times, once for each peer.
+ * @deprecated use `withClientProvider`.
  */
 // TODO(burdon): To discuss: evolve ClientRepeater with optional decorator that uses it.
 // NOTE: This is specifically not a storybook decorator because it broke stories as a decorator.
@@ -47,11 +46,11 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
     types,
     createIdentity,
     createSpace,
-    onCreateSpace,
+    onSpaceCreated,
   } = props;
-  if (props.registerSignalFactory ?? true) {
-    registerSignalFactory();
-  }
+  useEffect(() => {
+    registerSignalsRuntime();
+  }, []);
 
   const [clients, setClients] = useState(props.clients ?? []);
   const [spaceKey, setSpaceKey] = useState<PublicKey>();
@@ -60,19 +59,19 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
   useEffect(() => {
     const timeout = setTimeout(async () => {
       const clients = [...Array(count)].map(
-        (_) => new Client({ services: testBuilder.current.createLocalClientServices() }),
+        (_) => new Client({ services: testBuilder.current.createLocalClientServices(), types }),
       );
-      await Promise.all(clients.map((client) => client.initialize()));
-      types && clients.map((client) => client.addTypes(types));
 
+      await Promise.all(clients.map((client) => client.initialize()));
       if (createIdentity || createSpace) {
         await Promise.all(clients.map((client) => client.halo.createIdentity()));
       }
 
       if (createSpace) {
-        const space = await clients[0].spaces.create({ name: faker.commerce.productName() });
+        const client = clients[0];
+        const space = await client.spaces.create({ name: faker.commerce.productName() });
         setSpaceKey(space.key);
-        await onCreateSpace?.(space);
+        await onSpaceCreated?.({ client, space });
         await Promise.all(
           clients.slice(1).flatMap((client) => performInvitation({ host: space, guest: client.spaces })),
         );

package/src/testing/util.tsx

@@ -4,16 +4,18 @@
 
 import React from 'react';
 
-import { Client, fromHost } from '@dxos/client';
+import { Client, type Config, fromHost } from '@dxos/client';
 import { type Space } from '@dxos/client/echo';
 
-import { ClientContext } from '../client';
+import { ClientContext, ClientProvider } from '../client';
 
+// TODO(burdon): Reconcile with initializeClient.
 export const createClient = async ({
+  config,
   createIdentity,
   createSpace,
-}: { createIdentity?: boolean; createSpace?: boolean } = {}) => {
-  const client = new Client({ services: fromHost() });
+}: { config?: Config; createIdentity?: boolean; createSpace?: boolean } = {}) => {
+  const client = new Client({ config, services: fromHost(config) });
   await client.initialize();
   if (createIdentity) {
     await client.halo.createIdentity();
@@ -22,13 +24,16 @@ export const createClient = async ({
   let space: Space | undefined;
   if (createSpace) {
     space = await client.spaces.create();
-    await client.spaces.isReady.wait();
+    await client.spaces.waitUntilReady();
   }
 
   return { client, space };
 };
 
-// TODO(burdon): Change to ClientProvider.
-export const createContextProvider = async (client: Client) => {
+export const createClientContextProvider = async (client: Client) => {
   return ({ children }: any) => <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>;
 };
+
+export const createClientProvider = async (client: Client) => {
+  return ({ children }: any) => <ClientProvider client={client}>{children}</ClientProvider>;
+};

package/src/testing/withClientProvider.stories.tsx

@@ -6,10 +6,11 @@ import '@dxos-theme';
 
 import React from 'react';
 
+import { log } from '@dxos/log';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { withClientProvider, withMultiClientProvider } from './withClientProvider';
+import { withClientProvider, type WithClientProviderProps, withMultiClientProvider } from './withClientProvider';
 import { useClient } from '../client';
 import { type Space, useSpaces } from '../echo';
 
@@ -36,21 +37,29 @@ const Test = () => {
 };
 
 export default {
-  title: 'react-client/withClientProvider',
-  component: Test,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  title: 'sdk/react-client/withClientProvider',
+  render: Test,
 };
 
-export const Default = {};
+const clientProps: WithClientProviderProps = {
+  createIdentity: true,
+  createSpace: true,
+  onInitialized: async (client) => {
+    log.info('onInitialized', { client });
+  },
+  onSpaceCreated: async ({ client, space }) => {
+    log.info('onSpaceCreated', { client, space });
+  },
+};
+
+export const Default = {
+  decorators: [withClientProvider(clientProps), withTheme, withLayout({ classNames: ['flex gap-2'] })],
+};
 
 export const Multiple = {
   decorators: [
-    withMultiClientProvider({
-      numClients: 3,
-      createIdentity: true,
-      createSpace: true,
-    }),
-    withLayout({ classNames: ['flex gap-2'] }),
+    withMultiClientProvider({ ...clientProps, numClients: 3 }),
     withTheme,
+    withLayout({ classNames: ['flex gap-2'] }),
   ],
 };

package/src/testing/withClientProvider.tsx

@@ -3,13 +3,14 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { useRef } from 'react';
-import { type FallbackProps, ErrorBoundary } from 'react-error-boundary';
+import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { type FallbackProps, ErrorBoundary as NativeErrorBoundary } from 'react-error-boundary';
 
 import { Trigger } from '@dxos/async';
 import { type Client } from '@dxos/client';
 import { type Space } from '@dxos/client/echo';
 import { performInvitation, TestBuilder } from '@dxos/client/testing';
+import { log } from '@dxos/log';
 import { type MaybePromise } from '@dxos/util';
 
 import { ClientProvider, type ClientProviderProps } from '../client';
@@ -17,7 +18,7 @@ import { ClientProvider, type ClientProviderProps } from '../client';
 type InitializeProps = {
   createIdentity?: boolean;
   createSpace?: boolean;
-  onSpaceCreated?: (client: Client, space: Space) => MaybePromise<void>;
+  onSpaceCreated?: (props: { client: Client; space: Space }) => MaybePromise<void>;
 };
 
 /**
@@ -32,14 +33,16 @@ const initializeClient = async (
     onInitialized,
   }: InitializeProps & Pick<WithClientProviderProps, 'onInitialized'>,
 ): Promise<Space | undefined> => {
-  if (createIdentity) {
-    await client.halo.createIdentity();
+  if (createIdentity || createSpace) {
+    if (!client.halo.identity.get()) {
+      await client.halo.createIdentity();
+    }
   }
 
   let space: Space | undefined;
   if (createSpace) {
     space = await client.spaces.create({ name: 'Test Space' });
-    await onSpaceCreated?.(client, space);
+    await onSpaceCreated?.({ client, space });
   }
 
   await onInitialized?.(client);
@@ -58,17 +61,19 @@ export const withClientProvider = ({
   onInitialized,
   ...props
 }: WithClientProviderProps = {}): Decorator => {
-  const handleInitialized = async (client: Client) => {
-    await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
-  };
+  return (Story) => {
+    const handleInitialized = async (client: Client) => {
+      await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
+    };
 
-  return (Story) => (
-    <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <ClientProvider onInitialized={handleInitialized} {...props}>
-        <Story />
-      </ClientProvider>
-    </ErrorBoundary>
-  );
+    return (
+      <ErrorBoundary>
+        <ClientProvider onInitialized={handleInitialized} {...props}>
+          <Story />
+        </ClientProvider>
+      </ErrorBoundary>
+    );
+  };
 };
 
 // TODO(burdon): Implement context per client for context.
@@ -95,16 +100,20 @@ export const withMultiClientProvider = ({
     const spaceReady = useRef(new Trigger<Space | undefined>());
 
     // Handle invitations.
-    const handleClientInitialized = async (client: Client) => {
+    // NOTE: The zeroth client isn't necessarily the first to be initialized.
+    const handleInitialized = async (client: Client, index: number) => {
+      log.info('initialized', { index });
       if (createSpace) {
         if (!hostRef.current) {
           hostRef.current = client;
           const space = await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
           spaceReady.current.wake(space);
+          log.info('inviting', { index });
         } else {
           await initializeClient(client, { createIdentity, onInitialized });
           const space = await spaceReady.current.wait();
           if (space) {
+            log.info('joining', { index });
             await Promise.all(performInvitation({ host: space, guest: client.spaces }));
           }
         }
@@ -112,31 +121,48 @@ export const withMultiClientProvider = ({
     };
 
     return (
-      <>
+      <ErrorBoundary>
         {Array.from({ length: numClients }).map((_, index) => (
-          <ErrorBoundary key={index} FallbackComponent={ErrorFallback}>
-            <ClientProvider
-              services={builder.current.createLocalClientServices()}
-              onInitialized={handleClientInitialized}
-              {...props}
-            >
-              <Story />
-            </ClientProvider>
-          </ErrorBoundary>
+          <ClientProvider
+            key={index}
+            services={builder.current.createLocalClientServices()}
+            onInitialized={(client) => handleInitialized(client, index)}
+            {...props}
+          >
+            <Story />
+          </ClientProvider>
         ))}
-      </>
+      </ErrorBoundary>
     );
   };
 };
 
+const ErrorBoundary = ({ children }: PropsWithChildren) => {
+  const [error, setError] = useState<Error>();
+  useEffect(() => {
+    const handleError = (event: PromiseRejectionEvent) => {
+      setError(event.reason);
+    };
+
+    window.addEventListener('unhandledrejection', handleError);
+    return () => window.removeEventListener('unhandledrejection', handleError);
+  }, []);
+
+  if (error) {
+    return <ErrorFallback error={error} resetErrorBoundary={() => setError(undefined)} />;
+  }
+
+  return <NativeErrorBoundary FallbackComponent={ErrorFallback}>{children}</NativeErrorBoundary>;
+};
+
 const ErrorFallback = ({ error }: FallbackProps) => {
   const { name, message, stack } =
     error instanceof Error ? error : { name: 'Error', message: String(error), stack: undefined };
   return (
-    <div role='alert' className='flex flex-col gap-4'>
+    <div role='alert' className='flex flex-col p-4 gap-4 overflow-auto'>
       <h1 className='text-xl text-red-500'>{name}</h1>
       <div className='text-lg'>{message}</div>
-      {stack && <pre className='text-sm text-subdued'>{stack}</pre>}
+      {stack && <pre className='whitespace-pre-wrap text-sm text-subdued'>{stack}</pre>}
     </div>
   );
 };

package/tsconfig.json

@@ -6,67 +6,11 @@
       "DOM",
       "ESNext"
     ],
-    "module": "ESNext",
-    "outDir": "dist/types"
+    "module": "ESNext"
   },
   "include": [
     "playwright",
     "src"
   ],
-  "references": [
-    {
-      "path": "../../common/async"
-    },
-    {
-      "path": "../../common/codec-protobuf"
-    },
-    {
-      "path": "../../common/debug"
-    },
-    {
-      "path": "../../common/invariant"
-    },
-    {
-      "path": "../../common/log"
-    },
-    {
-      "path": "../../common/node-std"
-    },
-    {
-      "path": "../../common/random"
-    },
-    {
-      "path": "../../common/util"
-    },
-    {
-      "path": "../../core/echo/echo-schema"
-    },
-    {
-      "path": "../../core/echo/echo-signals"
-    },
-    {
-      "path": "../../core/protocols"
-    },
-    {
-      "path": "../../ui/primitives/react-hooks"
-    },
-    {
-      "path": "../../ui/react-ui"
-    },
-    {
-      "path": "../../ui/react-ui-syntax-highlighter"
-    },
-    {
-      "path": "../../ui/react-ui-theme"
-    },
-    {
-      "path": "../../ui/storybook-utils"
-    },
-    {
-      "path": "../client"
-    },
-    {
-      "path": "../config"
-    }
-  ]
+  "references": []
 }

package/vitest.config.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+import { baseConfig } from '../../../vitest.shared';
+
+// TODO(wittjosiah): Factor out to shared config as an option.
+const specifiedEnv = (process.env.VITEST_ENV ?? 'node').toLowerCase();
+const environment = specifiedEnv === 'node' ? 'jsdom' : undefined;
+
+export default mergeConfig(
+  baseConfig({ cwd: __dirname }),
+  defineConfig({
+    test: {
+      environment,
+      // TODO(dmaretskyi): Enabled because client tests were flaky. Remove when that's not the case.
+      retry: 2,
+    },
+  }),
+);