@dxos/react-client 0.6.12-main.5cc132e → 0.6.12-main.78ddbdf

package/dist/types/src/testing/withClientProvider.stories.d.ts

@@ -2,11 +2,12 @@ import '@dxos-theme';
 import React from 'react';
 declare const _default: {
     title: string;
-    component: () => React.JSX.Element | null;
-    decorators: import("@storybook/react/*").Decorator[];
+    render: () => React.JSX.Element | null;
 };
 export default _default;
-export declare const Default: {};
+export declare const Default: {
+    decorators: import("@storybook/react/*").Decorator[];
+};
 export declare const Multiple: {
     decorators: import("@storybook/react/*").Decorator[];
 };

package/dist/types/src/testing/withClientProvider.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withClientProvider.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/withClientProvider.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA+B1B,wBAIE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,QAAQ;;CAUpB,CAAC"}
+{"version":3,"file":"withClientProvider.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/withClientProvider.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAgC1B,wBAGE;AAaF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAMpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.6.12-main.5cc132e",
+  "version": "0.6.12-main.78ddbdf",
   "description": "React client API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -100,19 +100,19 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.0.13",
-    "@dxos/async": "0.6.12-main.5cc132e",
-    "@dxos/codec-protobuf": "0.6.12-main.5cc132e",
-    "@dxos/client": "0.6.12-main.5cc132e",
-    "@dxos/config": "0.6.12-main.5cc132e",
-    "@dxos/debug": "0.6.12-main.5cc132e",
-    "@dxos/echo-schema": "0.6.12-main.5cc132e",
-    "@dxos/invariant": "0.6.12-main.5cc132e",
-    "@dxos/log": "0.6.12-main.5cc132e",
-    "@dxos/echo-signals": "0.6.12-main.5cc132e",
-    "@dxos/node-std": "0.6.12-main.5cc132e",
-    "@dxos/protocols": "0.6.12-main.5cc132e",
-    "@dxos/react-hooks": "0.6.12-main.5cc132e",
-    "@dxos/util": "0.6.12-main.5cc132e"
+    "@dxos/async": "0.6.12-main.78ddbdf",
+    "@dxos/client": "0.6.12-main.78ddbdf",
+    "@dxos/codec-protobuf": "0.6.12-main.78ddbdf",
+    "@dxos/echo-schema": "0.6.12-main.78ddbdf",
+    "@dxos/config": "0.6.12-main.78ddbdf",
+    "@dxos/debug": "0.6.12-main.78ddbdf",
+    "@dxos/invariant": "0.6.12-main.78ddbdf",
+    "@dxos/log": "0.6.12-main.78ddbdf",
+    "@dxos/node-std": "0.6.12-main.78ddbdf",
+    "@dxos/echo-signals": "0.6.12-main.78ddbdf",
+    "@dxos/protocols": "0.6.12-main.78ddbdf",
+    "@dxos/react-hooks": "0.6.12-main.78ddbdf",
+    "@dxos/util": "0.6.12-main.78ddbdf"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.17.1",
@@ -122,21 +122,21 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.6.12-main.5cc132e",
-    "@dxos/react-ui": "0.6.12-main.5cc132e",
-    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.5cc132e",
-    "@dxos/test-utils": "0.6.12-main.5cc132e",
-    "@dxos/react-ui-theme": "0.6.12-main.5cc132e",
-    "@dxos/storybook-utils": "0.6.12-main.5cc132e"
+    "@dxos/random": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-syntax-highlighter": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-theme": "0.6.12-main.78ddbdf",
+    "@dxos/storybook-utils": "0.6.12-main.78ddbdf",
+    "@dxos/test-utils": "0.6.12-main.78ddbdf"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.12-main.5cc132e",
-    "@dxos/react-ui-theme": "0.6.12-main.5cc132e"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.12-main.78ddbdf",
+    "@dxos/react-ui-theme": "0.6.12-main.78ddbdf"
   },
   "optionalDependencies": {
-    "@dxos/random": "0.6.12-main.5cc132e"
+    "@dxos/random": "0.6.12-main.78ddbdf"
   },
   "publishConfig": {
     "access": "public"

package/project.json

@@ -32,6 +32,7 @@
     "test": {}
   },
   "implicitDependencies": [
-    "esbuild"
+    "esbuild",
+    "node-std"
   ]
 }

package/src/echo/useQuery.ts

@@ -5,6 +5,7 @@
 import { useMemo, useSyncExternalStore } from 'react';
 
 import {
+  Filter,
   isSpace,
   type Echo,
   type EchoReactiveObject,
@@ -41,18 +42,14 @@ export const useQuery = <T extends EchoReactiveObject<any>>(
       },
       getObjects: () => (subscribed && query ? query.objects : EMPTY_ARRAY),
     };
-  }, [spaceOrEcho, ...(typeof filter === 'function' ? [] : filterToDepsArray(filter)), ...(deps ?? [])]);
+  }, [spaceOrEcho, ...filterToDepsArray(filter), ...(deps ?? [])]);
 
   // https://beta.reactjs.org/reference/react/useSyncExternalStore
   // NOTE: This hook will resubscribe whenever the callback passed to the first argument changes -- make sure it is stable.
   return useSyncExternalStore<T[] | undefined>(subscribe, getObjects) ?? [];
 };
 
-// TODO(dmaretskyi): Serialize the filter here instead.
-const filterToDepsArray = (filter?: FilterSource<any>) =>
-  Object.entries(filter ?? {})
-    .flat(10)
-    .map((x) => (typeof x === 'function' || typeof x === 'object' ? null : x));
+const filterToDepsArray = (filter?: FilterSource<any>) => [JSON.stringify(Filter.from(filter).toProto())];
 
 const noop = () => {};
 

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';
 
@@ -37,20 +38,28 @@ const Test = () => {
 
 export default {
   title: 'react-client/withClientProvider',
-  component: Test,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  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

@@ -17,7 +17,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 +32,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 +60,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 FallbackComponent={ErrorFallback}>
+        <ClientProvider onInitialized={handleInitialized} {...props}>
+          <Story />
+        </ClientProvider>
+      </ErrorBoundary>
+    );
+  };
 };
 
 // TODO(burdon): Implement context per client for context.
@@ -81,7 +85,6 @@ export type WithMultiClientProviderProps = InitializeProps & ClientProviderProps
  * Orchestrates invitations between a randomly selected host and the remaining clients.
  * NOTE: Should come before withLayout.
  */
-// TODO(burdon): Create test.
 export const withMultiClientProvider = ({
   numClients = 2,
   createIdentity,
@@ -96,7 +99,7 @@ export const withMultiClientProvider = ({
     const spaceReady = useRef(new Trigger<Space | undefined>());
 
     // Handle invitations.
-    const handleClientInitialized = async (client: Client) => {
+    const handleInitialized = async (client: Client) => {
       if (createSpace) {
         if (!hostRef.current) {
           hostRef.current = client;
@@ -118,7 +121,7 @@ export const withMultiClientProvider = ({
           <ErrorBoundary key={index} FallbackComponent={ErrorFallback}>
             <ClientProvider
               services={builder.current.createLocalClientServices()}
-              onInitialized={handleClientInitialized}
+              onInitialized={handleInitialized}
               {...props}
             >
               <Story />
@@ -134,10 +137,10 @@ 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 overflow-hidden p-4 gap-4'>
       <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/vitest.config.ts

@@ -11,7 +11,7 @@ const specifiedEnv = (process.env.VITEST_ENV ?? 'node').toLowerCase();
 const environment = specifiedEnv === 'node' ? 'jsdom' : undefined;
 
 export default mergeConfig(
-  baseConfig(),
+  baseConfig({ cwd: __dirname }),
   defineConfig({
     test: {
       environment,