@dxos/react-client 0.8.3 → 0.8.4-main.05e74ebcff

package/src/testing/withClientProvider.stories.tsx

@@ -2,33 +2,33 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
+import { expect, within } from 'storybook/test';
 
 import { log } from '@dxos/log';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 
-import { withClientProvider, type WithClientProviderProps, withMultiClientProvider } from './withClientProvider';
 import { useClient } from '../client';
 import { type Space, useSpaces } from '../echo';
+import { type WithClientProviderProps, withClientProvider, withMultiClientProvider } from './withClientProvider';
 
 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>;
+  return <JsonHighlighter data={{ id: space.id, name }} />;
 };
 
-const Test = () => {
+const DefaultStory = () => {
   const client = useClient();
   const spaces = useSpaces();
   if (!client) {
-    return null;
+    return <Loading data={{ client: !!client }} />;
   }
 
   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>
+    <div className='flex flex-col divide-y divide-separator border border-separator'>
+      <JsonHighlighter data={client.toJSON()} />
       {spaces.map((space) => (
         <SpaceInfo key={space.id} space={space} />
       ))}
@@ -36,10 +36,16 @@ const Test = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'sdk/react-client/withClientProvider',
-  render: Test,
-};
+  render: DefaultStory,
+  decorators: [withTheme()],
+  tags: ['test'],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const clientProps: WithClientProviderProps = {
   createIdentity: true,
@@ -47,19 +53,27 @@ const clientProps: WithClientProviderProps = {
   onInitialized: async (client) => {
     log.info('onInitialized', { client });
   },
-  onSpaceCreated: async ({ client, space }) => {
-    log.info('onSpaceCreated', { client, space });
+  onCreateSpace: async ({ client, space }) => {
+    log.info('onCreateSpace', { client, space });
   },
 };
 
-export const Default = {
-  decorators: [withClientProvider(clientProps), withTheme, withLayout({ classNames: ['flex gap-2'] })],
+export const Default: Story = {
+  decorators: [withClientProvider(clientProps)],
+  parameters: {
+    layout: 'centered',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const initializedText = await canvas.findByText(/"initialized": true/i, {}, { timeout: 30_000 });
+    await expect(initializedText).toBeVisible();
+  },
 };
 
-export const Multiple = {
+export const Multiple: Story = {
   decorators: [
+    withTheme(),
+    withLayout({ classNames: 'grid grid-cols-3' }),
     withMultiClientProvider({ ...clientProps, numClients: 3 }),
-    withTheme,
-    withLayout({ classNames: ['flex gap-2'] }),
   ],
 };

package/src/testing/withClientProvider.tsx

@@ -2,27 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type StoryContext, type Decorator } from '@storybook/react';
-import React, { createContext, type PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
-import { type FallbackProps, ErrorBoundary as NativeErrorBoundary } from 'react-error-boundary';
+import { type Decorator, type StoryContext } from '@storybook/react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 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 { TestBuilder, performInvitation } from '@dxos/client/testing';
+import { type SpaceId } from '@dxos/keys';
 import { log } from '@dxos/log';
+import { ErrorBoundary } from '@dxos/react-ui';
 import { type MaybePromise } from '@dxos/util';
 
-import { ClientStory } from './context';
 import { ClientProvider, type ClientProviderProps } from '../client';
+import { ClientStory } from './context';
 
 type InitializeProps = {
   createIdentity?: boolean;
   createSpace?: boolean;
   onInitialized?: (client: Client) => MaybePromise<void>;
-  onIdentityCreated?: (props: { client: Client }) => MaybePromise<void>;
+  onCreateIdentity?: (props: { client: Client }, context: StoryContext | any) => MaybePromise<void>;
   // NOTE: context must be untyped until ClientRepeater is removed.
-  onSpaceCreated?: (props: { client: Client; space: Space }, context: StoryContext | any) => MaybePromise<void>;
+  onCreateSpace?: (props: { client: Client; space: Space }, context: StoryContext | any) => MaybePromise<void>;
 };
 
 /**
@@ -30,7 +31,7 @@ type InitializeProps = {
  */
 const initializeClient = async (
   client: Client,
-  { createIdentity, createSpace, onSpaceCreated, onIdentityCreated, onInitialized }: InitializeProps,
+  { createIdentity, createSpace, onCreateIdentity, onCreateSpace, onInitialized }: InitializeProps,
   context: StoryContext,
 ): Promise<ClientStory> => {
   await onInitialized?.(client);
@@ -38,17 +39,18 @@ const initializeClient = async (
   if (createIdentity || createSpace) {
     if (!client.halo.identity.get()) {
       await client.halo.createIdentity();
-      await onIdentityCreated?.({ client });
+      await onCreateIdentity?.({ client }, context);
     }
   }
 
   let space: Space | undefined;
   if (createSpace) {
     space = await client.spaces.create({ name: 'Test Space' });
-    await onSpaceCreated?.({ client, space }, context);
+    await space.waitUntilReady(); // Is this required?
+    await onCreateSpace?.({ client, space }, context);
   }
 
-  return { space };
+  return { space, spaceId: space?.id };
 };
 
 export type WithClientProviderProps = InitializeProps & Omit<ClientProviderProps, 'onInitialized'>;
@@ -59,8 +61,8 @@ export type WithClientProviderProps = InitializeProps & Omit<ClientProviderProps
 export const withClientProvider = ({
   createIdentity,
   createSpace,
-  onSpaceCreated,
-  onIdentityCreated,
+  onCreateSpace,
+  onCreateIdentity,
   onInitialized,
   ...props
 }: WithClientProviderProps = {}): Decorator => {
@@ -72,8 +74,8 @@ export const withClientProvider = ({
         {
           createIdentity,
           createSpace,
-          onSpaceCreated,
-          onIdentityCreated,
+          onCreateSpace,
+          onCreateIdentity,
           onInitialized,
         },
         context,
@@ -83,7 +85,7 @@ export const withClientProvider = ({
     };
 
     return (
-      <ErrorBoundary>
+      <ErrorBoundary name='client-provider'>
         <ClientProvider onInitialized={handleInitialized} {...props}>
           <ClientStory.Provider value={data}>
             <Story />
@@ -100,105 +102,87 @@ export const withClientProvider = ({
 export type WithMultiClientProviderProps = InitializeProps &
   Omit<ClientProviderProps, 'onInitialized'> & { numClients?: number };
 
-const MultiClientContext = createContext<{ id: number }>({ id: 0 });
-
-export const useMultiClient = () => useContext(MultiClientContext);
-
 /**
  * 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,
-  onIdentityCreated,
+  onCreateSpace,
+  onCreateIdentity,
   onInitialized,
   ...props
 }: WithMultiClientProviderProps): Decorator => {
   return (Story, context) => {
-    const builder = useRef(new TestBuilder());
-    const hostRef = useRef<Client>();
     const spaceReady = useRef(new Trigger<Space | undefined>());
+    const [spaceId, setSpaceId] = useState<SpaceId>();
+
+    const clients = useMemo(() => {
+      const buidler = new TestBuilder();
+      return Array.from({ length: numClients }).map(() => {
+        return {
+          services: buidler.createLocalClientServices(),
+        };
+      });
+    }, [numClients]);
 
     // Handle invitations.
     // 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,
-              onIdentityCreated,
-              onInitialized,
-            },
-            context,
+    const handleInitialized = useCallback(async (client: Client, index: number) => {
+      if (index === 0) {
+        // Initialize host.
+        const { space } = await initializeClient(
+          client,
+          {
+            createIdentity,
+            createSpace,
+            onCreateSpace,
+            onCreateIdentity,
+            onInitialized,
+          },
+          context,
+        );
+
+        log.info('inviting', { index, spaceId: space?.id });
+        setSpaceId(space?.id);
+        spaceReady.current.wake(space);
+      } else {
+        // Initialize guest.
+        await initializeClient(client, { createIdentity, onInitialized }, context);
+
+        log.info('waiting', { index });
+        const space = await spaceReady.current.wait();
+        if (space) {
+          log.info('joining', { index, spaceId: space.id });
+          await Promise.all(
+            performInvitation({
+              host: space,
+              guest: client.spaces,
+            }),
           );
-
-          spaceReady.current.wake(space);
-          log.info('inviting', { index });
-        } else {
-          await initializeClient(client, { createIdentity, onInitialized }, context);
-          const space = await spaceReady.current.wait();
-          if (space) {
-            log.info('joining', { index });
-            await Promise.all(performInvitation({ host: space, guest: client.spaces }));
-          }
         }
       }
-    };
+    }, []);
 
     return (
-      <ErrorBoundary>
-        {Array.from({ length: numClients }).map((_, index) => (
-          <MultiClientContext.Provider key={index} value={{ id: index }}>
-            <ClientProvider
-              services={builder.current.createLocalClientServices()}
-              onInitialized={(client) => handleInitialized(client, index)}
-              {...props}
-            >
-              <Story />
-            </ClientProvider>
-          </MultiClientContext.Provider>
+      <div className='absolute inset-0 grid grid-flow-col auto-cols-fr gap-4 overflow-hidden'>
+        {clients.map((client, index) => (
+          <ClientProvider
+            key={index}
+            services={client.services}
+            onInitialized={(client) => handleInitialized(client, index)}
+            {...props}
+          >
+            <ClientStory.Provider value={{ index, spaceId }}>
+              <ErrorBoundary name='client-provider'>
+                <Story />
+              </ErrorBoundary>
+            </ClientStory.Provider>
+          </ClientProvider>
         ))}
-      </ErrorBoundary>
+      </div>
     );
   };
 };
-
-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 p-4 gap-4 overflow-auto'>
-      <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

@@ -23,6 +23,9 @@
     {
       "path": "../../common/invariant"
     },
+    {
+      "path": "../../common/keys"
+    },
     {
       "path": "../../common/log"
     },
@@ -45,16 +48,13 @@
       "path": "../../core/echo/echo"
     },
     {
-      "path": "../../core/echo/echo-schema"
-    },
-    {
-      "path": "../../core/echo/echo-signals"
+      "path": "../../core/echo/echo-react"
     },
     {
       "path": "../../core/protocols"
     },
     {
-      "path": "../../ui/primitives/react-hooks"
+      "path": "../../ui/react-primitives/react-hooks"
     },
     {
       "path": "../../ui/react-ui"
@@ -63,7 +63,7 @@
       "path": "../../ui/react-ui-syntax-highlighter"
     },
     {
-      "path": "../../ui/react-ui-theme"
+      "path": "../../ui/ui-theme"
     },
     {
       "path": "../client"

package/typedoc.json

@@ -9,4 +9,4 @@
     "src/mesh/index.ts",
     "src/worker.ts"
   ]
-}
+}

package/vitest.config.ts

@@ -2,21 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { defineConfig, mergeConfig } from 'vitest/config';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-import { baseConfig } from '../../../vitest.shared';
+import { createConfig } from '../../../vitest.base.config';
 
-// 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,
-    },
-  }),
-);
+export default createConfig({
+  dirname: typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)),
+  node: {
+    environment: 'happy-dom',
+  },
+  storybook: true,
+});

package/.eslintrc.cjs

@@ -1,12 +0,0 @@
-module.exports = {
-  "extends": [
-    "../../../.eslintrc.js"
-  ],
-  "parserOptions": {
-    "project": "tsconfig.json",
-    "tsconfigRootDir": __dirname,
-  },
-  "ignorePatterns": [
-    "**/*.d.ts"
-  ]
-}

package/README.yml

@@ -1,33 +0,0 @@
-usage: |
-  The snippet below illustrates a self-contained DXOS application that uses providers to create the client and instantiate a user profile.
-
-  ```javascript
-
-  import React from 'react';
-  import { useClient, ClientProvider } from '@dxos/react-client';
-  import { createRoot } from 'react-dom/client';
-
-  const App = () => {
-    const client = useClient();
-    const space = useSpaces();
-    return (
-      <pre>{JSON.stringify(client.info())}</pre>
-    );
-  };
-
-  const Root = () => (
-    <ClientProvider>
-      <App />
-    </ClientProvider>
-  );
-
-  createRoot(document.getElementById('root')!)
-    .render(<Root/>);
-  
-  ```
-storybooks:
-  - "The [HALO Invitation Story](./stories/halo-invitations.stories.tsx) demonstrates multiple clients (devices) joining the same HALO. [Demo video](https://user-images.githubusercontent.com/3523355/137532718-a21f1f27-9854-4c0b-831a-e9ff92feac49.mov)."
-  - "The [Space Invitation Story](./stories/space-invitations.stories.tsx) demonstrates multiple clients creating and sharing spaces. [Demo video](https://user-images.githubusercontent.com/3523355/137532717-e77395dc-96f9-4e4b-8f67-e6bd026a3abe.mov)."
-quickStartUrl: https://docs.dxos.org/guide/quick-start
-guideUrl: https://docs.dxos.org/guide/echo/react
-apiReferenceUrl: true