@dxos/react-client 2.19.3-dev.cd87a074 → 2.19.4-dev.3bfecc09

package/package.json

@@ -1,67 +1,68 @@
 {
-	"name": "@dxos/react-client",
-	"version": "2.19.3-dev.cd87a074",
-	"description": "React client API",
-	"keywords": [],
-	"license": "AGPL-3.0",
-	"author": "DXOS.org",
-	"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.19.3-dev.cd87a074",
-		"@dxos/client": "2.19.3-dev.cd87a074",
-		"@dxos/config": "2.19.3-dev.cd87a074",
-		"@dxos/credentials": "2.19.3-dev.cd87a074",
-		"@dxos/crypto": "2.19.3-dev.cd87a074",
-		"@dxos/debug": "2.19.3-dev.cd87a074",
-		"@dxos/echo-db": "2.19.3-dev.cd87a074",
-		"@dxos/esbuild-plugins": "2.19.3-dev.cd87a074",
-		"@dxos/esbuild-server": "~1.4.1",
-		"@dxos/util": "2.19.3-dev.cd87a074",
-		"@types/debug": "^4.1.7",
-		"assert": "^2.0.0",
-		"debug": "^4.3.3",
-		"react-display-name": "^0.2.5",
-		"use-subscription": "^1.4.1"
-	},
-	"devDependencies": {
-		"@dxos/toolchain-node-library": "2.19.2",
-		"@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",
-		"@types/react": "^17.0.24",
-		"@types/testing-library__jest-dom": "~5.9.5",
-		"@types/use-subscription": "^1.0.0",
-		"expect": "~27.0.2",
-		"fork-ts-checker-webpack-plugin": "~6.2.5",
-		"level-js": "^5.0.2",
-		"react": "^17.0.2",
-		"react-docgen-typescript-loader": "^3.7.2",
-		"react-dom": "^17.0.2",
-		"react-test-renderer": "^17.0.2",
-		"typescript": "^4.5.2",
-		"webpack": "4.44.2"
-	},
-	"peerDependencies": {
-		"react": "*"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"toolchain": {
-		"testingFramework": "mocha",
-		"jsdom": true,
-		"forceCloseTests": true
-	}
-}
+  "name": "@dxos/react-client",
+  "version": "2.19.4-dev.3bfecc09",
+  "description": "React client API",
+  "keywords": [],
+  "license": "AGPL-3.0",
+  "author": "DXOS.org",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "dependencies": {
+    "@dxos/async": "2.19.4-dev.3bfecc09",
+    "@dxos/bot-factory-client": "2.19.4-dev.3bfecc09",
+    "@dxos/client": "2.19.4-dev.3bfecc09",
+    "@dxos/config": "2.19.4-dev.3bfecc09",
+    "@dxos/credentials": "2.19.4-dev.3bfecc09",
+    "@dxos/crypto": "2.19.4-dev.3bfecc09",
+    "@dxos/debug": "2.19.4-dev.3bfecc09",
+    "@dxos/echo-db": "2.19.4-dev.3bfecc09",
+    "@dxos/util": "2.19.4-dev.3bfecc09",
+    "assert": "^2.0.0",
+    "debug": "^4.3.3",
+    "react-display-name": "^0.2.5",
+    "use-subscription": "^1.4.1"
+  },
+  "devDependencies": {
+    "@dxos/esbuild-plugins": "2.19.4-dev.3bfecc09",
+    "@dxos/esbuild-server": "~1.7.1",
+    "@dxos/toolchain-node-library": "2.19.3",
+    "@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",
+    "@types/react": "^17.0.24",
+    "@types/testing-library__jest-dom": "~5.9.5",
+    "@types/use-subscription": "^1.0.0",
+    "expect": "~27.0.2",
+    "fork-ts-checker-webpack-plugin": "~6.2.5",
+    "level-js": "^5.0.2",
+    "react": "^17.0.2",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "typescript": "^4.5.2",
+    "webpack": "4.44.2"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "toolchain": {
+    "testingFramework": "mocha",
+    "jsdom": true,
+    "forceCloseTests": true
+  },
+  "scripts": {
+    "book": "esbuild-server book",
+    "build": "toolchain build",
+    "build:test": "toolchain build:test",
+    "lint": "toolchain lint",
+    "test": "toolchain test"
+  },
+  "readme": "# @dxos/react-client\n\nA react implementation of the DXOS Client APIs.\n\n## Install\n\n```bash\ngit clone git@github.com:dxos/protocols.git\ncd protocols\nrush update\nrush build\n\ncd packages/sdk/demos\nrushx book\n```\n\n## Usage\n\nThe snippet below illustrates a self-contained DXOS application that uses providers to create the client and instantiate a user profile.\n\n```javascript\nimport { useClient, ClientProvider, ProfileInitializer } from '@dxos/react-client';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n  const client = useClient();\n\n  return (\n    <pre>{JSON.stringify(client.info())}</pre>\n  );\n};\n\nconst Root = () => (\n  <ClientProvider>\n    <ProfileInitializer>\n      <App />\n    </ProfileInitializer>\n  </ClientProvider>\n);\n\nReactDOM.render(<Root/>, document.getElementById('root'));\n```\n\n## Storybooks\n\nThe [HALO Invitation Story](./stories/halo-invitations.stories.tsx) demonstrates multiple clients (devices) joining the same HALO.\n\nhttps://user-images.githubusercontent.com/3523355/137532718-a21f1f27-9854-4c0b-831a-e9ff92feac49.mov\n\nThe [Party Invitation Story](./stories/party-invitations.stories.tsx) demonstrates multiple clients creating and sharing parties.\n\nhttps://user-images.githubusercontent.com/3523355/137532717-e77395dc-96f9-4e4b-8f67-e6bd026a3abe.mov\n\n\n## Contributing\n\nPRs accepted.\n\n## License\n\nAGPL-3.0 © DXOS\n"
+}

package/react-client.build.log

@@ -2,10 +2,10 @@ Invoking: toolchain build:test
 
 
 typescript
-OK in 7183 ms
+OK in 4003 ms
 
 eslint
-OK in 8554 ms
+OK in 8419 ms
 
 mocha
 This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
@@ -13,8 +13,7 @@ This browser doesn't support cancelAnimationFrame. Make sure that you load a pol
 
 
   ClientProvider
-DXOS
-    ✓ Renders with children (45ms)
+    ✓ Renders with children
     ✓ Provides the client
 
   Client hook
@@ -27,8 +26,8 @@ DXOS
     ✓ should return custom client config when used properly in a context
 
 
-  7 passing (504ms)
+  7 passing (417ms)
 
-OK in 12540 ms
+OK in 3211 ms
 
-CHECK COMPLETE in 28284 ms
+CHECK COMPLETE in 15643 ms

package/src/banner.ts

@@ -2,17 +2,26 @@
 // Copyright 2021 DXOS.org
 //
 
+import { Client } from '@dxos/client';
+
+// TODO(burdon): Print version.
+// http://patorjk.com/software/taag/#p=testall&f=Patorjk-HeX&t=DXOS
+
+const BANNER = (client: Client) => '\n' +
+  '_/\\/\\/\\/\\/\\____/\\/\\____/\\/\\____/\\/\\/\\/\\______/\\/\\/\\/\\/\\_\n' +
+  '_/\\/\\____/\\/\\____/\\/\\/\\/\\____/\\/\\____/\\/\\__/\\/\\_________\n' +
+  '_/\\/\\____/\\/\\______/\\/\\______/\\/\\____/\\/\\____/\\/\\/\\/\\___\n' +
+  '_/\\/\\____/\\/\\____/\\/\\/\\/\\____/\\/\\____/\\/\\__________/\\/\\_\n' +
+  '_/\\/\\/\\/\\/\\____/\\/\\____/\\/\\____/\\/\\/\\/\\____/\\/\\/\\/\\/\\___\n' +
+  `\n DXOS Client ${client.version} \n\n`;
+
 let bannerPrinted = false;
 
-export function printBanner () {
+export function printBanner (client: Client) {
   if (bannerPrinted) {
     return;
   }
-  bannerPrinted = true;
 
-  console.log('%cDXOS', `
-    text-align: center;
-    text-shadow: #ddd 4px -4px, #bbb 8px -8px, #999 12px -12px, #777 16px -16px;
-    font-size: 10em;padding:10px;
-  `);
+  bannerPrinted = true;
+  console.log(BANNER(client));
 }

package/src/containers/ClientProvider.tsx

@@ -65,8 +65,6 @@ export const ClientProvider = ({
 
   // Async helpers.
   useEffect(() => {
-    printBanner();
-
     if (!client) {
       const done = async (client: Client) => {
         log(`Created client: ${client}`);
@@ -75,6 +73,7 @@ export const ClientProvider = ({
         }
         await onInitialize?.(client);
         setClient(client);
+        printBanner(client);
       };
 
       // TODO(burdon): Error handling.

package/src/hooks/bot-factory/index.ts

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

package/src/hooks/bot-factory/useBotFactoryClient.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { BotFactoryClient } from '@dxos/bot-factory-client';
+import { PublicKey } from '@dxos/crypto';
+import { raise } from '@dxos/debug';
+
+import { useClient, useConfig } from '../client';
+
+export const useBotFactoryClient = (): BotFactoryClient | undefined => {
+  const [botFactoryClient, setBotFactoryClient] = useState<BotFactoryClient>();
+
+  const client = useClient();
+  const config = useConfig();
+
+  useEffect(() => {
+    const botFactoryClient = new BotFactoryClient(client.echo.networkManager);
+    const topic = config.get('services.bot.topic') ??
+      raise(new Error('Bot factory topic is not provided'));
+    setImmediate(async () => {
+      await botFactoryClient.start(PublicKey.from(topic));
+      setBotFactoryClient(botFactoryClient);
+    });
+    return () => {
+      void botFactoryClient.stop();
+    };
+  }, []);
+
+  return botFactoryClient;
+};

package/src/hooks/index.ts

@@ -8,3 +8,4 @@ export * from './echo-selections';
 export * from './invitations';
 export * from './wns';
 export * from './util';
+export * from './bot-factory';

package/src/testing/ProfileInitializer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2020 DXOS.org
 //
 
-import React, { useEffect } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 
 import { useClient, useProfile } from '../hooks';
 
@@ -11,7 +11,7 @@ import { useClient, useProfile } from '../hooks';
  * @deprecated
  */
 // TODO(burdon): Testing-only; replace with useTestProfile();
-export const ProfileInitializer = ({ children }: { children: React.ReactNode }) => {
+export const ProfileInitializer = ({ children }: { children: ReactNode }) => {
   const client = useClient();
   const profile = useProfile();
 

package/stories/helpers/Container.tsx

@@ -2,7 +2,7 @@
 // Copyright 2020 DXOS.org
 //
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { styled } from '@mui/material';
 
@@ -19,7 +19,7 @@ const FullScreen = styled('div')({
   backgroundColor: '#EEE'
 });
 
-export const Container = ({ children }: { children: React.ReactNode }) => (
+export const Container = ({ children }: { children: ReactNode }) => (
   <FullScreen>
     <ThemeProvider>
       {children}

package/stories/helpers/ThemeProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2021 DXOS.org
 //
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material';
 
@@ -33,7 +33,7 @@ const theme = createTheme({
 });
 
 // TODO(burdon): Add theme as decorator.
-export const ThemeProvider = ({ children }: { children: React.ReactNode }) => (
+export const ThemeProvider = ({ children }: { children: ReactNode }) => (
   <MuiThemeProvider theme={theme}>
     {children}
   </MuiThemeProvider>