@dxos/react-client 0.8.4-main.fffef41 → 0.9.0

package/src/echo/useSpaces.ts

@@ -2,47 +2,54 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useState } from 'react';
-
-import { type PublicKeyLike } from '@dxos/client';
+import { PublicKey } from '@dxos/client';
 import { type Space, SpaceState } from '@dxos/client/echo';
-import { useAsyncEffect, useMulticastObservable } from '@dxos/react-hooks';
+import { type SpaceId } from '@dxos/keys';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 
 /**
- * Get a specific Space using its key.
+ * Get a specific Space using its id.
  * The space is not guaranteed to be in the ready state.
- * Returns the default space if no key is provided.
+ * Returns undefined if no id is provided.
  * Requires a ClientProvider somewhere in the parent tree.
  *
- * @param spaceKeyLike the key of the space to look for
+ * @param spaceId the id of the space to look for.
  */
-export const useSpace = (spaceKeyLike?: PublicKeyLike): Space | undefined => {
+// TODO(wittjosiah): Currently unable to remove `PublicKey` from this api.
+//  When initially joining a space that is all that is returned.
+export const useSpace = (spaceId?: SpaceId | PublicKey): Space | undefined => {
   const client = useClient();
   const spaces = useMulticastObservable<Space[]>(client.spaces);
-  const [ready, setReady] = useState(false);
+  if (!spaceId) {
+    return undefined;
+  }
 
-  useAsyncEffect(async () => {
-    // Only wait for ready if looking for the default space.
-    if (spaceKeyLike) {
-      return;
+  return spaces.find((space) => {
+    if (spaceId instanceof PublicKey) {
+      return space.key.equals(spaceId);
     }
 
-    await client.spaces.waitUntilReady();
-    setReady(true);
-  }, [client, spaceKeyLike]);
-
-  if (spaceKeyLike) {
-    return spaces.find((space) => space.key.equals(spaceKeyLike) || space.id === spaceKeyLike);
-  }
+    return space.id === spaceId;
+  });
+};
 
-  if (ready && client.halo.identity.get()) {
-    return client.spaces.default;
-  }
+/**
+ * Get a Space database by the id of the space.
+ * The space is not guaranteed to be in the ready state.
+ * Returns undefined if no id is provided.
+ * Requires a ClientProvider somewhere in the parent tree.
+ *
+ * @param spaceId the id of the space to look for.
+ * @deprecated Use useSpace.
+ */
+export const useDatabase = (spaceId?: SpaceId): Space['db'] | undefined => {
+  const space = useSpace(spaceId);
+  return space?.db;
 };
 
-export type UseSpacesParams = {
+export type UseSpacesProps = {
   /**
    * Return uninitialized spaces as well.
    */
@@ -53,9 +60,9 @@ export type UseSpacesParams = {
  * Get all Spaces available to current user.
  * Requires a ClientProvider somewhere in the parent tree.
  * By default, only ready spaces are returned.
- * @returns an array of Spaces
+ * @returns an array of Spaces.
  */
-export const useSpaces = ({ all = false }: UseSpacesParams = {}): Space[] => {
+export const useSpaces = ({ all = false }: UseSpacesProps = {}): Space[] => {
   const client = useClient();
   const spaces = useMulticastObservable<Space[]>(client.spaces);
 

package/src/echo/useSyncState.ts

@@ -6,14 +6,10 @@ import { useEffect, useState } from 'react';
 
 import { type PeerSyncState, type Space, type SpaceSyncStateMap } from '@dxos/client/echo';
 import { Context } from '@dxos/context';
-import { type SpaceId } from '@dxos/keys';
-import { EdgeService } from '@dxos/protocols';
+import { isEdgePeerId } from '@dxos/echo-protocol';
 
 import { useClient } from '../client';
 
-const isEdgePeerId = (peerId: string, spaceId: SpaceId) =>
-  peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
-
 /**
  * Hook Subscribes to sync state for each space.
  */
@@ -30,7 +26,7 @@ export const useSyncState = (): SpaceSyncStateMap => {
         }
 
         ctx.onDispose(
-          space.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
+          space.internal.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
             const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
             if (syncState) {
               setSpaceState((spaceState) => ({ ...spaceState, [space.id]: syncState }));
@@ -62,7 +58,7 @@ export const useSpaceSyncState = (space: Space): PeerSyncState | undefined => {
 
   useEffect(() => {
     const ctx = new Context();
-    space.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
+    space.internal.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
       const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
       if (syncState) {
         setSpaceState(syncState);

package/src/halo/Passkey.stories.tsx

@@ -9,12 +9,11 @@ import { Config, PublicKey } from '@dxos/client';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { Button } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/react-ui/testing';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
 import { useClient } from '../client';
 import { withClientProvider } from '../testing';
-
 import { useCredentials } from './useCredentials';
 import { useIdentity } from './useIdentity';
 
@@ -105,7 +104,7 @@ const Test = () => {
 
   return (
     <>
-      <div className='mbe-4 flex gap-2'>
+      <div className='mb-4 flex gap-2'>
         <Button disabled={!!identity} onClick={handleCreateIdentity}>
           Create Identity
         </Button>
@@ -116,10 +115,8 @@ const Test = () => {
           Authenticate with Passkey
         </Button>
       </div>
-      <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded'>
-        <SyntaxHighlighter language='json'>
-          {JSON.stringify({ identity, credentials: credentials.length }, null, 2)}
-        </SyntaxHighlighter>
+      <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded-sm'>
+        <JsonHighlighter data={{ identity, credentials: credentials.length }} />
       </div>
     </>
   );
@@ -148,7 +145,7 @@ const config = new Config({
 const meta = {
   title: 'sdk/react-client/Passkeys',
   render: Test,
-  decorators: [withClientProvider({ config }), withTheme],
+  decorators: [withClientProvider({ config }), withTheme()],
 } satisfies Meta;
 
 export default meta;

package/src/halo/useDevices.test.tsx

@@ -6,7 +6,6 @@ import { renderHook } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
 import { createClient, createClientContextProvider } from '../testing/util';
-
 import { useDevices } from './useDevices';
 
 describe('useDevices', () => {

package/src/testing/ClientRepeater.stories.tsx

@@ -5,36 +5,34 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { Obj } from '@dxos/echo';
 import { Input } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/react-ui/testing';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
 import { useClient } from '../client';
 import { useSpace } from '../echo';
-
 import { type ClientRepeatedComponentProps, ClientRepeater } from './ClientRepeater';
 
 const meta = {
   title: 'sdk/react-client/ClientRepeater',
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof Input>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const JsonPanel = ({ value }: { value: any }) => (
-  <SyntaxHighlighter language='json'>{JSON.stringify(value, undefined, 2)}</SyntaxHighlighter>
-);
+const JsonPanel = ({ value }: { value: any }) => <JsonHighlighter data={value} />;
 
 const ClientStory = () => {
   const client = useClient();
   return <JsonPanel value={client.toJSON()} />;
 };
 
-const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
+const ClientSpace = ({ spaceId }: ClientRepeatedComponentProps) => {
   const client = useClient();
-  const space = useSpace(spaceKey);
+  const space = useSpace(spaceId);
   if (!space?.isOpen) {
     return null;
   }
@@ -45,7 +43,11 @@ const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
         <Input.TextInput
           placeholder='Name'
           value={space.properties.name}
-          onChange={(event) => (space.properties.name = event.target.value)}
+          onChange={(event) =>
+            Obj.update(space.properties, (obj) => {
+              obj.name = event.target.value;
+            })
+          }
         />
       </Input.Root>
       <JsonPanel value={client.toJSON()} />

package/src/testing/ClientRepeater.tsx

@@ -2,20 +2,19 @@
 // Copyright 2022 DXOS.org
 //
 
-import React, { type FC, useEffect, useRef, useState } from 'react';
+import React, { type FC, useRef, useState } from 'react';
 
-import { Client, type PublicKey } from '@dxos/client';
+import { Client } from '@dxos/client';
 import { TestBuilder, performInvitation } from '@dxos/client/testing';
-import { type TypedObject } from '@dxos/echo/internal';
-import { registerSignalsRuntime } from '@dxos/echo-signals/react';
-import { faker } from '@dxos/random';
+import { type Type } from '@dxos/echo';
+import { type SpaceId } from '@dxos/keys';
+import { random } from '@dxos/random';
 import { useAsyncEffect } from '@dxos/react-hooks';
 
 import { ClientProvider } from '../client';
-
 import { type WithClientProviderProps } from './withClientProvider';
 
-export type ClientRepeatedComponentProps = { id: number; count: number; spaceKey?: PublicKey };
+export type ClientRepeatedComponentProps = { id: number; count: number; spaceId?: SpaceId };
 
 export type ClientRepeaterControlsProps = { clients: Client[] };
 
@@ -26,7 +25,7 @@ export type ClientRepeaterProps<P extends ClientRepeatedComponentProps> = {
   controls?: FC<ClientRepeaterControlsProps>;
   count?: number;
   clients?: Client[];
-  types?: TypedObject[];
+  types?: Type.AnyObj[];
   args?: Omit<P, 'id' | 'count'>;
 } & Pick<WithClientProviderProps, 'createIdentity' | 'createSpace' | 'onCreateSpace'>;
 
@@ -50,12 +49,9 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
     createSpace,
     onCreateSpace,
   } = props;
-  useEffect(() => {
-    registerSignalsRuntime();
-  }, []);
 
   const [clients, setClients] = useState(props.clients ?? []);
-  const [spaceKey, setSpaceKey] = useState<PublicKey>();
+  const [spaceId, setSpaceId] = useState<SpaceId>();
 
   const testBuilder = useRef(new TestBuilder());
   useAsyncEffect(async () => {
@@ -70,8 +66,8 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
 
     if (createSpace) {
       const client = clients[0];
-      const space = await client.spaces.create({ name: faker.commerce.productName() });
-      setSpaceKey(space.key);
+      const space = await client.spaces.create({ name: random.commerce.productName() });
+      setSpaceId(space.id);
       await onCreateSpace?.({ client, space }, {});
       await Promise.all(clients.slice(1).flatMap((client) => performInvitation({ host: space, guest: client.spaces })));
     }
@@ -88,7 +84,7 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
       {Controls && <Controls clients={clients} />}
       {clients.map((client, index) => (
         <ClientProvider key={index} client={client}>
-          <Component id={index} count={clients.length} spaceKey={spaceKey} {...{ ...props.args }} />
+          <Component id={index} count={clients.length} spaceId={spaceId} {...{ ...props.args }} />
         </ClientProvider>
       ))}
     </>

package/src/testing/context.tsx

@@ -6,14 +6,16 @@ import { createContext, useContext } from 'react';
 
 import { type Space } from '@dxos/client/echo';
 import { raise } from '@dxos/debug';
+import { type SpaceId } from '@dxos/keys';
 
 export type ClientStory = {
+  index?: number;
+  spaceId?: SpaceId;
   space?: Space;
 };
 
-// TODO(wittjosiah): Add to multi-client as well.
 export const ClientStory = createContext<ClientStory | undefined>(undefined);
 
-export const useClientProvider = (): ClientStory => {
+export const useClientStory = (): ClientStory => {
   return useContext(ClientStory) ?? raise(new Error('Missing ClientStory'));
 };

package/src/testing/util.tsx

@@ -24,7 +24,6 @@ export const createClient = async ({
   let space: Space | undefined;
   if (createSpace) {
     space = await client.spaces.create();
-    await client.spaces.waitUntilReady();
   }
 
   return { client, space };

package/src/testing/withClientProvider.stories.tsx

@@ -4,32 +4,31 @@
 
 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { render } from '@dxos/storybook-utils';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 
 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 DefaultStory = () => {
   const client = useClient();
   const spaces = useSpaces();
   if (!client) {
-    return null;
+    return <Loading data={{ client: !!client }} />;
   }
 
   return (
     <div className='flex flex-col divide-y divide-separator border border-separator'>
-      <SyntaxHighlighter language='json'>{JSON.stringify(client.toJSON(), null, 2)}</SyntaxHighlighter>
+      <JsonHighlighter data={client.toJSON()} />
       {spaces.map((space) => (
         <SpaceInfo key={space.id} space={space} />
       ))}
@@ -39,8 +38,9 @@ const DefaultStory = () => {
 
 const meta = {
   title: 'sdk/react-client/withClientProvider',
-  render: render(DefaultStory),
-  decorators: [withTheme],
+  render: DefaultStory,
+  decorators: [withTheme()],
+  tags: ['test'],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -63,11 +63,16 @@ export const Default: Story = {
   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: Story = {
   decorators: [
-    withTheme,
+    withTheme(),
     withLayout({ classNames: 'grid grid-cols-3' }),
     withMultiClientProvider({ ...clientProps, numClients: 3 }),
   ],

package/src/testing/withClientProvider.tsx

@@ -3,18 +3,18 @@
 //
 
 import { type Decorator, type StoryContext } from '@storybook/react';
-import React, { type PropsWithChildren, createContext, useContext, useEffect, useRef, useState } from 'react';
-import { type FallbackProps, ErrorBoundary as NaturalErrorBoundary } from 'react-error-boundary';
+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 { 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 { ClientProvider, type ClientProviderProps } from '../client';
-
 import { ClientStory } from './context';
 
 type InitializeProps = {
@@ -39,8 +39,6 @@ const initializeClient = async (
   if (createIdentity || createSpace) {
     if (!client.halo.identity.get()) {
       await client.halo.createIdentity();
-      await client.spaces.waitUntilReady();
-      await client.spaces.default.waitUntilReady();
       await onCreateIdentity?.({ client }, context);
     }
   }
@@ -52,7 +50,7 @@ const initializeClient = async (
     await onCreateSpace?.({ client, space }, context);
   }
 
-  return { space };
+  return { space, spaceId: space?.id };
 };
 
 export type WithClientProviderProps = InitializeProps & Omit<ClientProviderProps, 'onInitialized'>;
@@ -87,7 +85,7 @@ export const withClientProvider = ({
     };
 
     return (
-      <ErrorBoundary>
+      <ErrorBoundary name='client-provider'>
         <ClientProvider onInitialized={handleInitialized} {...props}>
           <ClientStory.Provider value={data}>
             <Story />
@@ -104,10 +102,6 @@ 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.
@@ -122,86 +116,73 @@ export const withMultiClientProvider = ({
   ...props
 }: WithMultiClientProviderProps): Decorator => {
   return (Story, context) => {
-    const builder = useRef(new TestBuilder());
-    const hostRef = useRef<Client>(null);
     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,
-              onCreateSpace,
-              onCreateIdentity,
-              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 <NaturalErrorBoundary FallbackComponent={ErrorFallback}>{children}</NaturalErrorBoundary>;
-};
-
-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,13 +48,13 @@
       "path": "../../core/echo/echo"
     },
     {
-      "path": "../../core/echo/echo-signals"
+      "path": "../../core/echo/echo-protocol"
     },
     {
-      "path": "../../core/protocols"
+      "path": "../../core/echo/echo-react"
     },
     {
-      "path": "../../ui/primitives/react-hooks"
+      "path": "../../ui/react-primitives/react-hooks"
     },
     {
       "path": "../../ui/react-ui"
@@ -60,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

@@ -10,9 +10,7 @@ import { createConfig } from '../../../vitest.base.config';
 export default createConfig({
   dirname: typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)),
   node: {
-    environment: 'jsdom',
-    // TODO(dmaretskyi): Enabled because client tests were flaky. Remove when that's not the case.
-    retry: 2,
+    environment: 'happy-dom',
   },
   storybook: true,
 });