@dxos/react-client 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/testing/ClientRepeater.tsx

@@ -2,20 +2,20 @@
 // 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 { type Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useAsyncEffect } from '@dxos/react-hooks';
 
 import { ClientProvider } from '../client';
+import { type SpaceId } from '../echo';
 
 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 +26,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 +50,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 () => {
@@ -71,7 +68,7 @@ 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);
+      setSpaceId(space.id);
       await onCreateSpace?.({ client, space }, {});
       await Promise.all(clients.slice(1).flatMap((client) => performInvitation({ host: space, guest: client.spaces })));
     }
@@ -88,7 +85,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

@@ -4,16 +4,17 @@
 
 import { createContext, useContext } from 'react';
 
-import { type Space } from '@dxos/client/echo';
+import { type Space, type SpaceId } from '@dxos/client/echo';
 import { raise } from '@dxos/debug';
 
 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/withClientProvider.stories.tsx

@@ -4,9 +4,10 @@
 
 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 { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { render } from '@dxos/storybook-utils';
 
@@ -40,7 +41,8 @@ const DefaultStory = () => {
 const meta = {
   title: 'sdk/react-client/withClientProvider',
   render: render(DefaultStory),
-  decorators: [withTheme],
+  decorators: [withTheme()],
+  tags: ['test'],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -63,14 +65,17 @@ 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: [withMultiClientProvider({ ...clientProps, numClients: 3 })],
-  parameters: {
-    layout: {
-      type: 'fullscreen',
-      className: 'grid grid-cols-3',
-    },
-  },
+  decorators: [
+    withTheme(),
+    withLayout({ classNames: 'grid grid-cols-3' }),
+    withMultiClientProvider({ ...clientProps, numClients: 3 }),
+  ],
 };

package/src/testing/withClientProvider.tsx

@@ -3,14 +3,14 @@
 //
 
 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 { type Space, type SpaceId } from '@dxos/client/echo';
 import { TestBuilder, performInvitation } from '@dxos/client/testing';
 import { log } from '@dxos/log';
+import { ErrorBoundary } from '@dxos/react-ui';
 import { type MaybePromise } from '@dxos/util';
 
 import { ClientProvider, type ClientProviderProps } from '../client';
@@ -52,7 +52,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 +87,7 @@ export const withClientProvider = ({
     };
 
     return (
-      <ErrorBoundary>
+      <ErrorBoundary name='client-provider'>
         <ClientProvider onInitialized={handleInitialized} {...props}>
           <ClientStory.Provider value={data}>
             <Story />
@@ -104,10 +104,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 +118,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

@@ -45,13 +45,13 @@
       "path": "../../core/echo/echo"
     },
     {
-      "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"
@@ -60,7 +60,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,7 +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',
+    environment: 'happy-dom',
     // TODO(dmaretskyi): Enabled because client tests were flaky. Remove when that's not the case.
     retry: 2,
   },

package/dist/lib/browser/chunk-TA2HGRAF.mjs

@@ -1,309 +0,0 @@
-// src/client/AgentHostingProvider.tsx
-import React2, { createContext as createContext2, useContext as useContext4, useState as useState4 } from "react";
-import { AgentManagerClient, FakeAgentHostingProvider } from "@dxos/client";
-import { log as log2 } from "@dxos/log";
-
-// src/client/ClientProvider.tsx
-import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import { Client, SystemStatus } from "@dxos/client";
-import { registerSignalsRuntime } from "@dxos/echo-signals/react";
-import { log } from "@dxos/log";
-import { useAsyncEffect, useControlledState } from "@dxos/react-hooks";
-import { getAsyncProviderValue } from "@dxos/util";
-
-// src/banner.ts
-var BANNER = (client) => {
-  const commitHash = client.config.get("runtime.app.build.commitHash");
-  const hash = commitHash ? ` App Commit ${commitHash} 
-` : "";
-  return `
-_/\\/\\/\\/\\/\\____/\\/\\____/\\/\\____/\\/\\/\\/\\______/\\/\\/\\/\\/\\_
-_/\\/\\____/\\/\\____/\\/\\/\\/\\____/\\/\\____/\\/\\__/\\/\\_________
-_/\\/\\____/\\/\\______/\\/\\______/\\/\\____/\\/\\____/\\/\\/\\/\\___
-_/\\/\\____/\\/\\____/\\/\\/\\/\\____/\\/\\____/\\/\\__________/\\/\\_
-_/\\/\\/\\/\\/\\____/\\/\\____/\\/\\____/\\/\\/\\/\\____/\\/\\/\\/\\/\\___
-
- DXOS Client ${client.version} 
-${hash}`;
-};
-var bannerPrinted = false;
-var printBanner = (client) => {
-  if (bannerPrinted || window.location.hostname === "localhost") {
-    return;
-  }
-  bannerPrinted = true;
-  console.log(`%c${BANNER(client)}`, "font-family: monospace;");
-};
-
-// src/client/context.ts
-import { createContext } from "react";
-var ClientContext = createContext(void 0);
-
-// src/client/ClientProvider.tsx
-var __dxlog_file = "/__w/dxos/dxos/packages/sdk/react-client/src/client/ClientProvider.tsx";
-var ClientProvider = /* @__PURE__ */ forwardRef(({ children, config: configParam, client: clientParam, services: servicesParam, status: statusParam, fallback: Fallback = () => null, signalsRuntime = true, noBanner, onInitialized, ...options }, forwardedRef) => {
-  useEffect(() => {
-    signalsRuntime && registerSignalsRuntime();
-  }, []);
-  const [error, setError] = useState();
-  if (error) {
-    throw error;
-  }
-  const [client, setClient] = useState(clientParam instanceof Client ? clientParam : void 0);
-  useImperativeHandle(forwardedRef, () => client, [
-    client
-  ]);
-  const [status, setStatus] = useControlledState(statusParam);
-  useEffect(() => {
-    if (!client) {
-      return;
-    }
-    const subscription = client.status.subscribe((status2) => setStatus(status2));
-    return () => subscription.unsubscribe();
-  }, [
-    client
-  ]);
-  useAsyncEffect(async () => {
-    let disposed = false;
-    const initialize = async (client3) => {
-      if (!client3.initialized) {
-        await client3.initialize().catch((err) => {
-          if (!disposed) {
-            setError(err);
-          }
-        });
-        log("client ready", void 0, {
-          F: __dxlog_file,
-          L: 138,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        await onInitialized?.(client3);
-        log("initialization complete", void 0, {
-          F: __dxlog_file,
-          L: 140,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-      setClient(client3);
-      if (!noBanner) {
-        printBanner(client3);
-      }
-    };
-    let client2;
-    try {
-      if (clientParam) {
-        client2 = await getAsyncProviderValue(clientParam);
-        await initialize(client2);
-      } else {
-        const config = await getAsyncProviderValue(configParam);
-        log("resolved config", {
-          config
-        }, {
-          F: __dxlog_file,
-          L: 158,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        const services = await getAsyncProviderValue(servicesParam, config);
-        log("created services", {
-          services
-        }, {
-          F: __dxlog_file,
-          L: 160,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        client2 = new Client({
-          config,
-          services,
-          ...options
-        });
-        log("created client", void 0, {
-          F: __dxlog_file,
-          L: 162,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        await initialize(client2);
-      }
-    } catch (err) {
-      if (!disposed) {
-        log.catch(err, void 0, {
-          F: __dxlog_file,
-          L: 167,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-    }
-    return () => {
-      log("clean up", void 0, {
-        F: __dxlog_file,
-        L: 172,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      disposed = true;
-      if (!clientParam) {
-        void client2?.destroy().then(() => {
-          log("destroyed", void 0, {
-            F: __dxlog_file,
-            L: 179,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-        }).catch((err) => log.catch(err, void 0, {
-          F: __dxlog_file,
-          L: 181,
-          S: void 0,
-          C: (f, a) => f(...a)
-        }));
-      }
-    };
-  }, [
-    configParam,
-    clientParam,
-    servicesParam,
-    noBanner
-  ]);
-  if (!client?.initialized || status !== SystemStatus.ACTIVE) {
-    return /* @__PURE__ */ React.createElement(Fallback, {
-      client,
-      status
-    });
-  }
-  return /* @__PURE__ */ React.createElement(ClientContext.Provider, {
-    value: {
-      client,
-      status
-    }
-  }, children);
-});
-
-// src/client/useClient.ts
-import { useContext } from "react";
-import { raise } from "@dxos/debug";
-var useClient = () => {
-  const { client } = useContext(ClientContext) ?? raise(new Error("Missing ClientContext."));
-  return client;
-};
-
-// src/client/useClientStatus.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-var useClientStatus = (client) => {
-  const [status, setStatus] = useState2();
-  useEffect2(() => {
-    if (!client) {
-      return;
-    }
-    const subscription = client.status.subscribe((status2) => setStatus(status2));
-    return () => subscription.unsubscribe();
-  }, [
-    client,
-    setStatus
-  ]);
-  return status;
-};
-
-// src/client/useConfig.ts
-import { useContext as useContext2 } from "react";
-import { raise as raise2 } from "@dxos/debug";
-var useConfig = () => {
-  const { client } = useContext2(ClientContext) ?? raise2(new Error("Missing ClientContext."));
-  return client.config;
-};
-
-// src/client/useShell.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
-var useShell = () => {
-  const client = useClient();
-  return client.shell;
-};
-var useShellDisplay = () => {
-  const client = useClient();
-  const [display, setDisplay] = useState3(client.shell.display);
-  useEffect3(() => client.shell.onDisplayChange(setDisplay), [
-    client
-  ]);
-  return display;
-};
-
-// src/client/useStatus.ts
-import { useContext as useContext3 } from "react";
-import { raise as raise3 } from "@dxos/debug";
-var useStatus = () => {
-  const { status } = useContext3(ClientContext) ?? raise3(new Error("Missing ClientContext."));
-  return status;
-};
-
-// src/client/AgentHostingProvider.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/sdk/react-client/src/client/AgentHostingProvider.tsx";
-var AgentHostingContext = /* @__PURE__ */ createContext2(null);
-var AgentHostingProvider = (props) => {
-  const client = useClient();
-  const [agentHostingProviderClient] = useState4(makeClient(client));
-  return /* @__PURE__ */ React2.createElement(AgentHostingContext.Provider, {
-    value: agentHostingProviderClient
-  }, " ", props.children);
-};
-var useAgentHostingClient = () => {
-  return useContext4(AgentHostingContext);
-};
-var makeClient = ({ config, halo }) => {
-  const agentHostingConfig = config.get("runtime.services.agentHosting");
-  if (!agentHostingConfig) {
-    log2("no agent hosting configured", void 0, {
-      F: __dxlog_file2,
-      L: 39,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-    return null;
-  }
-  let agentHostingProviderClient = null;
-  switch (agentHostingConfig.type) {
-    case "LOCAL_TESTING": {
-      log2("using FakeAgentHostingProvider", void 0, {
-        F: __dxlog_file2,
-        L: 47,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return new FakeAgentHostingProvider();
-    }
-    case "AGENTHOSTING_API": {
-      agentHostingProviderClient = new AgentManagerClient(config, halo);
-      if (agentHostingProviderClient.init()) {
-        return agentHostingProviderClient;
-      } else {
-        return null;
-      }
-    }
-    default: {
-      log2.error("Unknown agent hosting provider type: " + agentHostingConfig.type, void 0, {
-        F: __dxlog_file2,
-        L: 62,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return null;
-    }
-  }
-};
-
-export {
-  AgentHostingContext,
-  AgentHostingProvider,
-  useAgentHostingClient,
-  ClientContext,
-  ClientProvider,
-  useClient,
-  useClientStatus,
-  useConfig,
-  useShell,
-  useShellDisplay,
-  useStatus
-};
-//# sourceMappingURL=chunk-TA2HGRAF.mjs.map