@dxos/react-client 0.6.11-staging.e6894a4 → 0.6.12-main.15a606f

package/src/echo/useSpaceInvitations.ts

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 
 import { MulticastObservable } from '@dxos/async';
 import { type PublicKey } from '@dxos/client';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useSpace } from './useSpaces';
 import { type CancellableInvitationObservable, useInvitationStatus } from '../invitations';

package/src/echo/useSpaces.test.tsx

@@ -3,38 +3,22 @@
 //
 
 import { act, renderHook } from '@testing-library/react';
-import { expect } from 'chai';
-import React from 'react';
-
-import { Client, fromHost } from '@dxos/client';
-import { describe, test } from '@dxos/test';
+import { describe, expect, test } from 'vitest';
 
 import { useSpace, useSpaces } from './useSpaces';
-import { ClientContext } from '../client';
+import { createClient, createClientContextProvider } from '../testing/util';
 
 describe('useSpaces', () => {
   test('lists existing spaces', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    await client.spaces.isReady.wait();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient({ createIdentity: true });
+    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 = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    await client.spaces.isReady.wait();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient({ createIdentity: true });
+    const wrapper = await createClientContextProvider(client);
     const { result, rerender } = renderHook(() => useSpaces(), { wrapper });
     expect(result.current.length).to.eq(1);
     await act(async () => {
@@ -47,12 +31,8 @@ describe('useSpaces', () => {
 
 describe('useSpace', () => {
   test('gets default space', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient();
+    const wrapper = await createClientContextProvider(client);
     const { result, rerender } = renderHook(() => useSpace(), { wrapper });
     expect(result.current).to.be.undefined;
     await act(async () => {
@@ -64,15 +44,9 @@ describe('useSpace', () => {
   });
 
   test('gets space by key', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    const space = await client.spaces.create();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
-    const { result } = renderHook(() => useSpace(space.key), { wrapper });
+    const { client, space } = await createClient({ createIdentity: true, createSpace: true });
+    const wrapper = await createClientContextProvider(client);
+    const { result } = renderHook(() => useSpace(space!.key), { wrapper });
     expect(result.current).to.not.be.undefined;
   });
 });

package/src/echo/useSpaces.ts

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 import { type PublicKeyLike } from '@dxos/client';
 import { type Space, SpaceState } from '@dxos/client/echo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/halo/useContacts.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Contact } from '@dxos/client/halo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/halo/useDevices.test.tsx

@@ -3,24 +3,15 @@
 //
 
 import { renderHook } from '@testing-library/react';
-import { expect } from 'chai';
-import React from 'react';
-
-import { Client, fromHost } from '@dxos/client';
-import { describe, test } from '@dxos/test';
+import { describe, expect, test } from 'vitest';
 
 import { useDevices } from './useDevices';
-import { ClientContext } from '../client';
+import { createClient, createClientContextProvider } from '../testing/util';
 
 describe('useDevices', () => {
   test('lists existing devices', async () => {
-    const client = new Client({ services: fromHost() });
-    await client.initialize();
-    await client.halo.createIdentity();
-    // TODO(wittjosiah): Factor out.
-    const wrapper = ({ children }: any) => (
-      <ClientContext.Provider value={{ client }}>{children}</ClientContext.Provider>
-    );
+    const { client } = await createClient({ createIdentity: true });
+    const wrapper = await createClientContextProvider(client);
     const { result } = renderHook(() => useDevices(), { wrapper });
     expect(result.current?.length).to.eq(1);
   });

package/src/halo/useDevices.ts

@@ -3,7 +3,7 @@
 //
 
 import type { Device } from '@dxos/client/halo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/halo/useHaloInvitations.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 import { useInvitationStatus, type CancellableInvitationObservable } from '../invitations';

package/src/halo/useIdentity.ts

@@ -3,7 +3,7 @@
 //
 
 import { type Identity } from '@dxos/client/halo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

package/src/index.ts

@@ -3,6 +3,6 @@
 //
 
 export * from '@dxos/client';
-export { useMulticastObservable } from '@dxos/react-async';
+export { useMulticastObservable } from '@dxos/react-hooks';
 
 export * from './client';

package/src/mesh/useNetworkStatus.ts

@@ -3,7 +3,7 @@
 //
 
 import { type NetworkStatus } from '@dxos/client/mesh';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 

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-clientcontext--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

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React from 'react';
+
+import { Input } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ClientRepeater, type ClientRepeatedComponentProps } from './ClientRepeater';
+import { useClient } from '../client';
+import { useSpace } from '../echo';
+
+export default {
+  title: 'react-client/ClientRepeater',
+  decorators: [withTheme],
+};
+
+const JsonPanel = ({ value }: { value: any }) => (
+  <SyntaxHighlighter language='json'>{JSON.stringify(value, undefined, 2)}</SyntaxHighlighter>
+);
+
+const ClientStory = () => {
+  const client = useClient();
+  return <JsonPanel value={client.toJSON()} />;
+};
+
+const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
+  const client = useClient();
+  const space = useSpace(spaceKey);
+  if (!space?.isOpen) {
+    return null;
+  }
+
+  return (
+    <div className='flex flex-col'>
+      <Input.Root>
+        <Input.TextInput
+          placeholder='Name'
+          value={space.properties.name}
+          onChange={(event) => (space.properties.name = event.target.value)}
+        />
+      </Input.Root>
+      <JsonPanel value={client.toJSON()} />
+    </div>
+  );
+};
+
+export const Default = {
+  render: () => <ClientRepeater component={ClientStory} count={2} />,
+};
+
+export const Space = {
+  render: () => <ClientRepeater component={ClientSpace} count={2} createSpace />,
+};

package/src/testing/ClientRepeater.tsx

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import React, { useState, type FC, useEffect } from 'react';
+import React, { useState, type FC, useEffect, useRef } from 'react';
 
 import { Client, type PublicKey } from '@dxos/client';
 import { type Space } from '@dxos/client/echo';
@@ -12,15 +12,13 @@ import { registerSignalFactory } from '@dxos/echo-signals/react';
 import { faker } from '@dxos/random';
 import { type MaybePromise } from '@dxos/util';
 
-import { ClientContext } from '../client';
+import { ClientProvider } from '../client';
 
-const testBuilder = new TestBuilder();
+export type ClientRepeatedComponentProps = { id: number; count: number; spaceKey?: PublicKey };
 
-export type RepeatedComponentProps = { id: number; count: number };
-
-export type ClientRepeaterProps<P extends RepeatedComponentProps> = {
-  component: FC<any>;
+export type ClientRepeaterProps<P extends ClientRepeatedComponentProps> = {
   className?: string;
+  component: FC<ClientRepeatedComponentProps>;
   controls?: FC<{ clients: Client[] }>;
   clients?: Client[];
   count?: number;
@@ -36,12 +34,12 @@ export type ClientRepeaterProps<P extends RepeatedComponentProps> = {
  * Utility component for Storybook stories which sets up clients for n peers.
  * The `Component` property is rendered n times, once for each peer.
  */
+// 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.
 //   This seems primarily due to the fact that it required top-level await for the clients to initialize.
 //   Storybook seemed to handle it alright, but Chromatic had a lot of trouble with it.
 //   There was also a question of whether or not calling the story function multiple times was a good idea.
-// TODO(wittjosiah): Rename.
-export const ClientRepeater = <P extends RepeatedComponentProps>(props: ClientRepeaterProps<P>) => {
+export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: ClientRepeaterProps<P>) => {
   const {
     component: Component,
     controls: Controls,
@@ -58,9 +56,12 @@ export const ClientRepeater = <P extends RepeatedComponentProps>(props: ClientRe
   const [clients, setClients] = useState(props.clients ?? []);
   const [spaceKey, setSpaceKey] = useState<PublicKey>();
 
+  const testBuilder = useRef(new TestBuilder());
   useEffect(() => {
     const timeout = setTimeout(async () => {
-      const clients = [...Array(count)].map((_) => new Client({ services: testBuilder.createLocalClientServices() }));
+      const clients = [...Array(count)].map(
+        (_) => new Client({ services: testBuilder.current.createLocalClientServices() }),
+      );
       await Promise.all(clients.map((client) => client.initialize()));
       types && clients.map((client) => client.addTypes(types));
 
@@ -91,9 +92,9 @@ export const ClientRepeater = <P extends RepeatedComponentProps>(props: ClientRe
     <>
       {Controls && <Controls clients={clients} />}
       {clients.map((client, index) => (
-        <ClientContext.Provider key={index} value={{ client }}>
-          <Component id={index} count={clients.length} {...{ ...props.args, spaceKey }} />
-        </ClientContext.Provider>
+        <ClientProvider key={index} client={client}>
+          <Component id={index} count={clients.length} spaceKey={spaceKey} {...{ ...props.args }} />
+        </ClientProvider>
       ))}
     </>
   );

package/src/testing/index.ts

@@ -5,3 +5,4 @@
 export * from '@dxos/client/testing';
 
 export * from './ClientRepeater';
+export * from './withClientProvider';

package/src/testing/util.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Client, type Config, fromHost } from '@dxos/client';
+import { type Space } from '@dxos/client/echo';
+
+import { ClientContext, ClientProvider } from '../client';
+
+// TODO(burdon): Reconcile with initializeClient.
+export const createClient = async ({
+  config,
+  createIdentity,
+  createSpace,
+}: { config?: Config; createIdentity?: boolean; createSpace?: boolean } = {}) => {
+  const client = new Client({ config, services: fromHost(config) });
+  await client.initialize();
+  if (createIdentity) {
+    await client.halo.createIdentity();
+  }
+
+  let space: Space | undefined;
+  if (createSpace) {
+    space = await client.spaces.create();
+    await client.spaces.isReady.wait();
+  }
+
+  return { client, space };
+};
+
+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

@@ -0,0 +1,65 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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, type WithClientProviderProps, withMultiClientProvider } from './withClientProvider';
+import { useClient } from '../client';
+import { type Space, useSpaces } from '../echo';
+
+const SpaceInfo = ({ space }: { space: Space }) => {
+  const name = space.isOpen ? space.properties.name : '';
+  return <SyntaxHighlighter language='json'>{JSON.stringify({ id: space.id, name }, null, 2)}</SyntaxHighlighter>;
+};
+
+const Test = () => {
+  const client = useClient();
+  const spaces = useSpaces();
+  if (!client) {
+    return null;
+  }
+
+  return (
+    <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded'>
+      <SyntaxHighlighter language='json'>{JSON.stringify(client.toJSON(), null, 2)}</SyntaxHighlighter>
+      {spaces.map((space) => (
+        <SpaceInfo key={space.id} space={space} />
+      ))}
+    </div>
+  );
+};
+
+export default {
+  title: 'react-client/withClientProvider',
+  render: Test,
+};
+
+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({ ...clientProps, numClients: 3 }),
+    withTheme,
+    withLayout({ classNames: ['flex gap-2'] }),
+  ],
+};

package/src/testing/withClientProvider.tsx

@@ -0,0 +1,146 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { useRef } from 'react';
+import { type FallbackProps, ErrorBoundary } 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 { type MaybePromise } from '@dxos/util';
+
+import { ClientProvider, type ClientProviderProps } from '../client';
+
+type InitializeProps = {
+  createIdentity?: boolean;
+  createSpace?: boolean;
+  onSpaceCreated?: (props: { client: Client; space: Space }) => MaybePromise<void>;
+};
+
+/**
+ * Initialize client, identity and first space.
+ */
+const initializeClient = async (
+  client: Client,
+  {
+    createIdentity,
+    createSpace,
+    onSpaceCreated,
+    onInitialized,
+  }: InitializeProps & Pick<WithClientProviderProps, 'onInitialized'>,
+): Promise<Space | undefined> => {
+  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 onInitialized?.(client);
+  return space;
+};
+
+export type WithClientProviderProps = InitializeProps & ClientProviderProps;
+
+/**
+ * Decorator that provides the client context.
+ */
+export const withClientProvider = ({
+  createIdentity,
+  createSpace,
+  onSpaceCreated,
+  onInitialized,
+  ...props
+}: WithClientProviderProps = {}): Decorator => {
+  return (Story) => {
+    const handleInitialized = async (client: Client) => {
+      await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
+    };
+
+    return (
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <ClientProvider onInitialized={handleInitialized} {...props}>
+          <Story />
+        </ClientProvider>
+      </ErrorBoundary>
+    );
+  };
+};
+
+// TODO(burdon): Implement context per client for context.
+// TODO(burdon): Callback once all invitations have completed.
+// TODO(burdon): Delay/jitter for creation of other clients.
+export type WithMultiClientProviderProps = InitializeProps & ClientProviderProps & { numClients?: number };
+
+/**
+ * Decorator that creates a scaffold for multiple clients.
+ * Orchestrates invitations between a randomly selected host and the remaining clients.
+ * NOTE: Should come before withLayout.
+ */
+export const withMultiClientProvider = ({
+  numClients = 2,
+  createIdentity,
+  createSpace,
+  onSpaceCreated,
+  onInitialized,
+  ...props
+}: WithMultiClientProviderProps): Decorator => {
+  return (Story) => {
+    const builder = useRef(new TestBuilder());
+    const hostRef = useRef<Client>();
+    const spaceReady = useRef(new Trigger<Space | undefined>());
+
+    // Handle invitations.
+    const handleInitialized = async (client: Client) => {
+      if (createSpace) {
+        if (!hostRef.current) {
+          hostRef.current = client;
+          const space = await initializeClient(client, { createIdentity, createSpace, onSpaceCreated, onInitialized });
+          spaceReady.current.wake(space);
+        } else {
+          await initializeClient(client, { createIdentity, onInitialized });
+          const space = await spaceReady.current.wait();
+          if (space) {
+            await Promise.all(performInvitation({ host: space, guest: client.spaces }));
+          }
+        }
+      }
+    };
+
+    return (
+      <>
+        {Array.from({ length: numClients }).map((_, index) => (
+          <ErrorBoundary key={index} FallbackComponent={ErrorFallback}>
+            <ClientProvider
+              services={builder.current.createLocalClientServices()}
+              onInitialized={handleInitialized}
+              {...props}
+            >
+              <Story />
+            </ClientProvider>
+          </ErrorBoundary>
+        ))}
+      </>
+    );
+  };
+};
+
+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 overflow-hidden p-4 gap-4'>
+      <h1 className='text-xl text-red-500'>{name}</h1>
+      <div className='text-lg'>{message}</div>
+      {stack && <pre className='whitespace-pre-wrap text-sm text-subdued'>{stack}</pre>}
+    </div>
+  );
+};

package/tsconfig.json

@@ -6,8 +6,7 @@
       "DOM",
       "ESNext"
     ],
-    "module": "ESNext",
-    "outDir": "dist/types"
+    "module": "ESNext"
   },
   "include": [
     "playwright",
@@ -36,7 +35,7 @@
       "path": "../../common/random"
     },
     {
-      "path": "../../common/react-async"
+      "path": "../../common/test-utils"
     },
     {
       "path": "../../common/util"
@@ -47,9 +46,18 @@
     {
       "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"
     },