@dxos/react-client 2.18.1 → 2.19.1

package/esbuild-server.config.js

@@ -0,0 +1,21 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+const {
+  FixMemdownPlugin,
+  NodeGlobalsPolyfillPlugin,
+  NodeModulesPlugin
+} = require('@dxos/esbuild-plugins');
+
+/** @type {import('@dxos/esbuild-server').Config} */
+module.exports = {
+  plugins: [
+    NodeGlobalsPolyfillPlugin(),
+    FixMemdownPlugin(),
+    NodeModulesPlugin()
+  ],
+  overrides: {
+    sourcemap: 'inline',
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dxos/react-client",
-	"version": "2.18.1",
+	"version": "2.19.1",
 	"description": "React client API",
 	"keywords": [],
 	"license": "AGPL-3.0",
@@ -8,31 +8,35 @@
 	"main": "dist/src/index.js",
 	"types": "dist/src/index.d.ts",
 	"scripts": {
+		"book": "esbuild-server book",
 		"build": "toolchain build",
 		"build:test": "toolchain build:test",
 		"lint": "toolchain lint",
 		"test": "toolchain test"
 	},
 	"dependencies": {
-		"@dxos/async": "2.18.1",
-		"@dxos/client": "2.18.1",
-		"@dxos/config": "2.18.1",
-		"@dxos/credentials": "2.18.1",
-		"@dxos/crypto": "2.18.1",
-		"@dxos/debug": "2.18.1",
-		"@dxos/echo-db": "2.18.1",
-		"@dxos/util": "2.18.1",
-		"@types/debug": "^4.1.1",
+		"@dxos/async": "2.19.1",
+		"@dxos/client": "2.19.1",
+		"@dxos/config": "2.19.1",
+		"@dxos/credentials": "2.19.1",
+		"@dxos/crypto": "2.19.1",
+		"@dxos/debug": "2.19.1",
+		"@dxos/echo-db": "2.19.1",
+		"@dxos/esbuild-plugins": "2.19.1",
+		"@dxos/esbuild-server": "~1.4.1",
+		"@dxos/util": "2.19.1",
+		"@types/debug": "^4.1.7",
 		"assert": "^2.0.0",
-		"debug": "^4.1.1",
+		"debug": "^4.3.3",
 		"react-display-name": "^0.2.5",
 		"use-subscription": "^1.4.1"
 	},
 	"devDependencies": {
-		"@dxos/toolchain-node-library": "2.18.1",
+		"@dxos/toolchain-node-library": "2.19.1",
 		"@mui/material": "^5.0.1",
 		"@testing-library/react": "^11.0.4",
 		"@testing-library/react-hooks": "5.1.2",
+		"@types/debug": "^4.1.7",
 		"@types/level-js": "~4.0.1",
 		"@types/mocha": "~8.2.2",
 		"@types/node": "^14.0.9",

package/react-client.build.log

@@ -2,10 +2,10 @@ Invoking: toolchain build:test
 
 
 typescript
-OK in 9465 ms
+OK in 3964 ms
 
 eslint
-OK in 9863 ms
+OK in 8771 ms
 
 mocha
 This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
@@ -26,8 +26,8 @@ This browser doesn't support cancelAnimationFrame. Make sure that you load a pol
     ✓ should return custom client config when used properly in a context
 
 
-  7 passing (526ms)
+  7 passing (271ms)
 
-OK in 11932 ms
+OK in 11463 ms
 
-CHECK COMPLETE in 31268 ms
+CHECK COMPLETE in 24205 ms

package/src/containers/ClientProvider.test.tsx

@@ -4,7 +4,6 @@
 
 import { screen, render } from '@testing-library/react';
 import expect from 'expect';
-// code import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 
 import { Client } from '@dxos/client';
@@ -29,7 +28,6 @@ describe('ClientProvider', () => {
     client = new Client();
     await client.initialize();
     await client.halo.createProfile({ username: 'test-user' });
-    await client.echo.open();
   });
 
   after(async () => {

package/src/containers/ClientProvider.tsx

@@ -2,28 +2,107 @@
 // Copyright 2020 DXOS.org
 //
 
-import React, { ReactNode, useEffect } from 'react';
+import debug from 'debug';
+import React, { MutableRefObject, ReactNode, useEffect, useState } from 'react';
 
-import { Client } from '@dxos/client';
+import { Client, ClientOptions } from '@dxos/client';
+import { Config, ConfigObject } from '@dxos/config';
+import { MaybeFunction, MaybePromise, getAsyncValue } from '@dxos/util';
 
 import { ClientContext } from '../hooks';
 
+const log = debug('dxos:react-client');
+
+export type ClientProvider = MaybeFunction<MaybePromise<Client>>
+
+// TODO(burdon): Why defs?
+export type ConfigProvider = MaybeFunction<MaybePromise<Config | ConfigObject>>
+
 export interface ClientProviderProps {
-  client: Client
   children?: ReactNode
+
+  /**
+   * Forward reference to provide client object to outercontainer since it won't have access to the context.
+   */
+  clientRef?: MutableRefObject<Client | undefined>
+
+  /**
+   * Client object or async provider to enable to caller to do custom initialization.
+   */
+  client?: ClientProvider
+
+  /**
+   * Config object or async provider.
+   */
+  config?: ConfigProvider
+
+  /**
+   * Runtime objects.
+   */
+  options?: ClientOptions
+
+  /**
+   * Post initialization hook.
+   * @param Client
+   */
+  onInitialize?: (client: Client) => Promise<void>
 }
 
 /**
  * Root component that provides the DXOS client instance to child components.
- * To be used with `useClient` hook.
+ * To be used with the `useClient` hook.
  */
-export const ClientProvider = ({ client, children }: ClientProviderProps) => {
+export const ClientProvider = ({
+  children,
+  clientRef,
+  client: clientProvider,
+  config: configProvider,
+  options,
+  onInitialize
+}: ClientProviderProps) => {
+  const [client, setClient] = useState<Client | undefined>(clientProvider instanceof Client ? clientProvider : undefined);
+
+  // Async helpers.
   useEffect(() => {
-    (window as any).__DXOS__ = client.getDevtoolsContext();
+    if (!client) {
+      const done = async (client: Client) => {
+        log(`Created client: ${client}`);
+        if (clientRef) {
+          clientRef.current = client;
+        }
+        await onInitialize?.(client);
+        setClient(client);
+      };
+
+      // TODO(burdon): Error handling.
+      setImmediate(async () => {
+        if (clientProvider) {
+          // Asynchornously request client.
+          const client = await getAsyncValue(clientProvider);
+          await done(client);
+        } else {
+          // Asynchronously construct client (config may be undefined).
+          const config = await getAsyncValue(configProvider);
+          const client = new Client(config, options);
+          await client.initialize();
+          await done(client);
+        }
+      });
+    }
   }, []);
 
+  useEffect(() => {
+    if (client) {
+      (window as any).__DXOS__ = client.getDevtoolsContext();
+    }
+  }, [client]);
+
+  if (!client) {
+    return null;
+  }
+
   return (
-    <ClientContext.Provider value={client}>
+    <ClientContext.Provider value={{ client }}>
       {children}
     </ClientContext.Provider>
   );

package/src/containers/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2020 DXOS.org
 //
 
-export * from './ClientInitializer';
 export * from './ClientProvider';
-export * from './ProfileInitializer';

package/src/hooks/client/context.ts

@@ -6,7 +6,11 @@ import { createContext } from 'react';
 
 import { Client } from '@dxos/client';
 
+interface ClientContextProps {
+  client: Client
+}
+
 /**
  * https://reactjs.org/docs/context.html#reactcreatecontext
  */
-export const ClientContext = createContext<Client | undefined>(undefined);
+export const ClientContext = createContext<ClientContextProps | undefined>(undefined);

package/src/hooks/client/useClient.ts

@@ -10,8 +10,9 @@ import { ClientContext } from './context';
 
 /**
  * Hook returning instance of DXOS client.
- * To be used with `ClientProvider` or `ClientInitializer` component wrapper.
+ * Requires ClientContext to be set via ClientProvider.
  */
 export const useClient = () => {
-  return useContext(ClientContext) ?? raise(new Error('ClientContext no set.'));
+  const { client } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));
+  return client;
 };

package/src/hooks/client/useConfig.ts

@@ -10,9 +10,9 @@ import { ClientContext } from './context';
 
 /**
  * Hook returning config object used to initialize the DXOS client instance.
- * To be used with `ClientProvider` or `ClientInitializer` component wrapper.
+ * Requires ClientConext to be set via ClientProvider.
  */
 export const useConfig = () => {
-  const { config } = useContext(ClientContext) ?? raise(new Error('ClientContext no set.'));
-  return config;
+  const { client } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));
+  return client.config;
 };

package/src/hooks/client/useProfile.ts

@@ -8,7 +8,7 @@ import { useClient } from './useClient';
 
 /**
  * Hook returning DXOS user profile object.
- * To be used with `ClientProvider` or `ClientInitializer` component wrapper.
+ * Requires ClientConext to be set via ClientProvider.
  */
 export const useProfile = () => {
   const client = useClient();

package/src/hooks/echo-queries/useContacts.ts

@@ -11,14 +11,14 @@ import { useClient } from '../client';
 /**
  * Returns all known Contacts across all Parties.
  * Contacts are known members of a common Party.
- * To be used with `ClientProvider` or `ClientInitializer` component wrapper.
+ * Requires ClientConext to be set via ClientProvider.
  */
 export const useContacts = () => {
   const client = useClient();
   const [contacts, setContacts] = useState<PartyMember[]>([]);
 
   useEffect(() => {
-    const result = client.echo.halo.queryContacts();
+    const result = client.halo.queryContacts();
     setContacts(result.value);
 
     const unsubscribe = result.subscribe(() => {

package/src/hooks/echo-queries/useMembers.tsx

@@ -4,9 +4,10 @@
 
 import { useEffect, useState } from 'react';
 
-import { Party, PartyMember } from '@dxos/echo-db';
+import { PartyProxy } from '@dxos/client';
+import { PartyMember } from '@dxos/echo-db';
 
-export const useMembers = (party: Party | undefined) => {
+export const useMembers = (party: PartyProxy | undefined) => {
   const [members, setMembers] = useState<PartyMember[]>([]);
 
   useEffect(() => {

package/src/hooks/echo-queries/useParties.ts

@@ -4,28 +4,28 @@
 
 import { useEffect, useMemo, useState } from 'react';
 
+import { PartyProxy } from '@dxos/client';
 import { PublicKey, PublicKeyLike } from '@dxos/crypto';
-import { Party } from '@dxos/echo-db';
 
 import { useClient } from '../client';
 import { useResultSet } from '../util';
 
 /**
  * Get a specific Party.
- * To be used with `ClientProvider` or `ClientInitializer` component wrapper.
+ * Requires ClientConext to be set via ClientProvider.
  */
-export const useParty = (partyKey?: PublicKeyLike) => {
+export const useParty = (partyKey?: PublicKeyLike): PartyProxy | undefined => {
   const client = useClient();
   return partyKey ? client.echo.getParty(PublicKey.from(partyKey)) : undefined;
 };
 
 /**
  * Get all Parties available to current user.
- * To be used with `ClientProvider` or `ClientInitializer` component wrapper.
+ * Requires ClientConext to be set via ClientProvider.
  */
 export const useParties = () => {
   const client = useClient();
-  const [parties, setParties] = useState<Party[]>([]);
+  const [parties, setParties] = useState<PartyProxy[]>([]);
 
   useEffect(() => {
     const result = client.echo.queryParties();
@@ -48,6 +48,6 @@ export const useParties = () => {
 /**
  * Get all known members of a Party.
  */
-export const usePartyMembers = (party: Party) => {
+export const usePartyMembers = (party: PartyProxy) => {
   return useResultSet(useMemo(() => party.queryMembers(), [party.key.toHex()]));
 };

package/src/hooks/echo-queries/useRemoteParties.ts

@@ -4,15 +4,17 @@
 
 import { useEffect, useState } from 'react';
 
+import { Party } from '@dxos/client/src/proto/gen/dxos/client';
+
 import { useClient } from '../client';
 
 /**
  * Get all Parties available to current user.
- * To be used with `ClientProvider` or `ClientInitializer` component wrapper.
+ * Requires ClientConext to be set via ClientProvider.
  */
 export const useRemoteParties = () => {
   const client = useClient();
-  const [parties, setParties] = useState<{key?: Uint8Array}[]>([]);
+  const [parties, setParties] = useState<Party[]>([]);
 
   useEffect(() => {
     const stream = client.services.PartyService.SubscribeParties();

package/src/index.ts

@@ -2,7 +2,6 @@
 // Copyright 2020 DXOS.org
 //
 
-export * from './components';
 export * from './containers';
 export * from './hooks';
-export * from './config';
+export * from './testing';

package/src/{containers → testing}/ProfileInitializer.tsx

@@ -10,14 +10,16 @@ import { useClient, useProfile } from '../hooks';
  * Automatically creates a random DXOS profile.
  * @deprecated
  */
-// TODO(burdon): Testing-only.
+// TODO(burdon): Testing-only; replace with useTestProfile();
 export const ProfileInitializer = ({ children }: { children: React.ReactNode }) => {
   const client = useClient();
   const profile = useProfile();
 
   useEffect(() => {
     if (!profile) {
-      void client.halo.createProfile();
+      setImmediate(async () => {
+        await client.halo.createProfile();
+      });
     }
   }, []);
 

package/src/testing/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+export * from './ProfileInitializer';

package/stories/client.stories.tsx

@@ -4,11 +4,11 @@
 
 import React, { useEffect } from 'react';
 
-import { ClientInitializer, ErrorBoundary, useClient } from '../src';
-import { ClientPanel, ThemeProvider } from './helpers';
+import { ClientProvider, useClient } from '../src';
+import { ClientPanel } from './helpers';
 
 export default {
-  title: 'react-client/ClientInitializer'
+  title: 'react-client/ClientProvider'
 };
 
 const TestApp = () => {
@@ -27,12 +27,16 @@ const TestApp = () => {
 
 export const Primary = () => {
   return (
-    <ThemeProvider>
-      <ErrorBoundary>
-        <ClientInitializer config={{}}>
-          <TestApp />
-        </ClientInitializer>
-      </ErrorBoundary>
-    </ThemeProvider>
+    <ClientProvider>
+      <TestApp />
+    </ClientProvider>
+  );
+};
+
+export const Secondary = () => {
+  return (
+    <ClientProvider config={() => ({})}>
+      <TestApp />
+    </ClientProvider>
   );
 };

package/stories/halo-invitations.stories.tsx

@@ -12,7 +12,7 @@ import { Awaited } from '@dxos/async';
 import { Client, decodeInvitation, PendingInvitation } from '@dxos/client';
 
 import {
-  ClientInitializer,
+  ClientProvider,
   ProfileInitializer,
   useClient,
   useParties,
@@ -146,7 +146,7 @@ const TestApp = () => {
         <ClientPanel client={client} profile={profile} parties={parties} />
         <Divider />
         <HaloInvitationContainer />
-        {!client.echo.halo.isInitialized && (
+        {!client.halo.isInitialized && (
           <>
             <Divider />
             <HaloAuthenticationContainer />
@@ -164,17 +164,17 @@ export const Primary = () => {
     <Container>
       <Box sx={{ display: 'flex', flex: 1, padding: 1, justifyContent: 'space-around' }}>
         {/* Instantiated Client. */}
-        <ClientInitializer config={{}}>
+        <ClientProvider>
           <ProfileInitializer>
             <TestApp />
           </ProfileInitializer>
-        </ClientInitializer>
+        </ClientProvider>
 
         {/* Joiners. */}
         {[...new Array(peers)].map((_, i) => (
-          <ClientInitializer key={i} config={{}}>
+          <ClientProvider key={i}>
             <TestApp />
-          </ClientInitializer>
+          </ClientProvider>
         ))}
       </Box>
     </Container>

package/stories/helpers/ClientPanel.tsx

@@ -6,8 +6,7 @@ import React from 'react';
 
 import { Box } from '@mui/material';
 
-import { Client } from '@dxos/client';
-import { Party } from '@dxos/echo-db';
+import { Client, PartyProxy } from '@dxos/client';
 
 import { useProfile } from '../../src';
 import { JsonPanel } from './JsonPanel';
@@ -19,13 +18,9 @@ export const ClientPanel = ({
 }: {
   client: Client,
   profile?: Partial<ReturnType<typeof useProfile>>,
-  parties?: Party[]
+  parties?: PartyProxy[]
 }) => {
-  const data = (parties.length !== 0)
-    ? {
-        parties: parties.map(({ key }) => key.toHex())
-      }
-    : undefined;
+  const data = (parties.length !== 0) ? { parties: parties.map(({ key }) => key.toHex()) } : undefined;
 
   return (
     <Box>

package/stories/party-invitations.stories.tsx

@@ -13,7 +13,7 @@ import { PublicKey } from '@dxos/crypto';
 import { InvitationDescriptorType } from '@dxos/echo-db';
 
 import {
-  ClientInitializer,
+  ClientProvider,
   ProfileInitializer,
   useClient,
   useContacts,
@@ -58,8 +58,8 @@ const PartyInvitationContainer = () => {
   const handleCreateInvitation = () => {
     setImmediate(async () => {
       const invitation = (contact)
-        ? await client.createOfflineInvitation(partyKey!, PublicKey.fromHex(contact!))
-        : await client.createInvitation(partyKey!, secretProvider, {
+        ? await client.echo.createOfflineInvitation(partyKey!, PublicKey.fromHex(contact!))
+        : await client.echo.createInvitation(partyKey!, { secretProvider }, {
           onFinish: () => { // TODO(burdon): Normalize callbacks (error, etc.)
             setInvitationCode(undefined);
             resetPin();
@@ -192,11 +192,11 @@ export const Primary = () => {
     <Container>
       <Box sx={{ display: 'flex', flex: 1, padding: 1, justifyContent: 'space-around' }}>
         {[...new Array(peers)].map((_, i) => (
-          <ClientInitializer key={i} config={{}}>
+          <ClientProvider key={i}>
             <ProfileInitializer>
               <TestApp />
             </ProfileInitializer>
-          </ClientInitializer>
+          </ClientProvider>
         ))}
       </Box>
     </Container>

package/tests/config.test.ts

@@ -14,7 +14,7 @@ describe('Config hook', () => {
     const { result } = renderHook(render);
     // TODO(burdon): Do NOT test functionality by matching literal error messages.
     expect(result.error?.message)
-      .toEqual('`useConfig` hook is called outside of ClientContext. Wrap the component with `ClientProvider` or `ClientInitializer`');
+      .toEqual('`useConfig` hook is called outside of ClientContext. Use `ClientProvider`');
   });
 
   // TODO(burdon): Add test for context.

package/dist/src/components/ErrorBoundary.d.ts

@@ -1,52 +0,0 @@
-import React, { Component, ErrorInfo } from 'react';
-/**
- * Root-level error boundary.
- * https://reactjs.org/docs/error-boundaries.html
- *
- * NOTE: Must currently be a Component.
- * https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes
- */
-export declare type ErrorCallbackType = (error: Error, errorInfo?: ErrorInfo) => void;
-export interface ErrorComponentProps {
-    error: Error | null;
-    onRestart?: () => void;
-    onReset?: () => void;
-}
-interface ErrorBoundaryProps {
-    onError: ErrorCallbackType;
-    onRestart?: () => void;
-    onReset?: () => void;
-    errorComponent?: React.ComponentType<ErrorComponentProps>;
-}
-interface State {
-    error: Error | null;
-}
-/**
- * Top-level error boundary.
- * NOTE: Doesn't catch exceptions in event handlers, or asynchronous callbacks.
- * A global error handler should be configured for such errors.
- * https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers
- * https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
- * It DOES catch exceptions in hooks and any components that return malformed React compoennts.
- */
-export declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
-    state: {
-        error: null;
-    };
-    static defaultProps: {
-        onError: {
-            (...data: any[]): void;
-            (message?: any, ...optionalParams: any[]): void;
-        };
-        onRestart: () => void;
-        onReset: undefined;
-        errorComponent: undefined;
-    };
-    static getDerivedStateFromError(error: any): {
-        error: any;
-    };
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): React.ReactNode;
-}
-export {};
-//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/src/components/ErrorBoundary.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD;;;;;;GAMG;AAEH,oBAAY,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;AAE9E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;CAC1D;AAED,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACpB;AAED;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,KAAK,CAAC;IAC5D,KAAK;;MAEZ;IAEF,MAAM,CAAC,YAAY;;;;;;;;MAOjB;IAEF,MAAM,CAAC,wBAAwB,CAAE,KAAK,EAAE,GAAG;;;IAIlC,iBAAiB,CAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAKrD,MAAM;CA4BhB"}