@dxos/react-client 2.33.7-dev.346e09a1 → 2.33.7-dev.61c14bdf

package/package.json

@@ -1,32 +1,34 @@
 {
   "name": "@dxos/react-client",
-  "version": "2.33.7-dev.346e09a1",
+  "version": "2.33.7-dev.61c14bdf",
   "description": "React client API",
   "license": "MIT",
   "author": "DXOS.org",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
   "dependencies": {
-    "@dxos/async": "2.33.7-dev.346e09a1",
-    "@dxos/bot-factory-client": "2.33.7-dev.346e09a1",
-    "@dxos/client": "2.33.7-dev.346e09a1",
-    "@dxos/config": "2.33.7-dev.346e09a1",
-    "@dxos/credentials": "2.33.7-dev.346e09a1",
-    "@dxos/crypto": "2.33.7-dev.346e09a1",
-    "@dxos/debug": "2.33.7-dev.346e09a1",
-    "@dxos/echo-db": "2.33.7-dev.346e09a1",
-    "@dxos/network-manager": "2.33.7-dev.346e09a1",
-    "@dxos/react-async": "2.33.7-dev.346e09a1",
-    "@dxos/util": "2.33.7-dev.346e09a1",
+    "@dxos/async": "2.33.7-dev.61c14bdf",
+    "@dxos/bot-factory-client": "2.33.7-dev.61c14bdf",
+    "@dxos/client": "2.33.7-dev.61c14bdf",
+    "@dxos/config": "2.33.7-dev.61c14bdf",
+    "@dxos/codec-protobuf": "2.33.7-dev.61c14bdf",
+    "@dxos/credentials": "2.33.7-dev.61c14bdf",
+    "@dxos/crypto": "2.33.7-dev.61c14bdf",
+    "@dxos/debug": "2.33.7-dev.61c14bdf",
+    "@dxos/echo-db": "2.33.7-dev.61c14bdf",
+    "@dxos/network-manager": "2.33.7-dev.61c14bdf",
+    "@dxos/react-async": "2.33.7-dev.61c14bdf",
+    "@dxos/util": "2.33.7-dev.61c14bdf",
     "assert": "^2.0.0",
     "debug": "^4.3.3",
     "use-subscription": "^1.8.0"
   },
   "devDependencies": {
     "@dxos/esbuild-plugins": "~2.28.10",
-    "@dxos/eslint-plugin": "~1.0.33",
+    "@dxos/eslint-plugin": "~1.0.34",
     "@dxos/protocols-toolchain": "2.33.6",
     "@mui/material": "^5.8.1",
+    "@playwright/test": "^1.14.1",
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "5.1.2",
     "@types/debug": "^4.1.7",
@@ -40,6 +42,7 @@
     "eslint": "^7.12.1",
     "expect": "~27.0.2",
     "level-js": "^5.0.2",
+    "playwright": "^1.14.1",
     "raf": "^3.4.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -65,6 +68,7 @@
     "build:book": "toolchain build:book",
     "build:test": "toolchain build:test",
     "lint": "toolchain lint",
-    "test": "toolchain test"
+    "test": "toolchain test && npm run test:playwright",
+    "test:playwright": "playwright test --config ./tests/playwright/config.ts"
   }
 }

package/react-client.build.log

@@ -2,20 +2,20 @@ Invoking: toolchain build:test
 
 Tests started
 Typescript
-OK in 10399 ms
+OK in 9466 ms
 no problems
-OK in 8715 ms
+OK in 8363 ms
 
 Mocha Tests
 
 
   useSelection
 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
-    ✓ gets updated items selection (302ms)
+    ✓ gets updated items selection (244ms)
 
 
-  1 passing (309ms)
+  1 passing (250ms)
 
-OK in 2901 ms
+OK in 2506 ms
 
-Tests complete in 22042 ms
+Tests complete in 20367 ms

package/src/hooks/client/index.ts

@@ -5,4 +5,5 @@
 export * from './context';
 export * from './useClient';
 export * from './useConfig';
+export * from './useDevtools';
 export * from './useProfile';

package/src/hooks/client/useDevtools.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { useClient } from '../client';
+
+export const useDevtools = () => {
+  const client = useClient();
+  return client.services.DevtoolsHost;
+};

package/src/hooks/util/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './useResultSet';
+export * from './useStream';

package/src/hooks/util/useStream.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import { DependencyList, useState, useEffect } from 'react';
+
+import { Stream } from '@dxos/codec-protobuf';
+
+/**
+ * Subscribe to service API streams.
+ */
+export const useStream = <T>(
+  streamFactory: () => Stream<T>,
+  defaultValue: T,
+  deps: DependencyList = []
+): T => {
+  const [value, setValue] = useState<T | undefined>(defaultValue);
+  useEffect(() => {
+    const stream = streamFactory();
+    stream.subscribe((response: T) => setValue(response));
+    return () => stream.close();
+  }, deps);
+
+  return value ?? defaultValue;
+};

package/stories/client.stories.tsx

@@ -26,13 +26,13 @@ const TestApp = () => {
 };
 
 export const Primary = () => (
-<ClientProvider>
-      <TestApp />
-    </ClientProvider>
+  <ClientProvider>
+    <TestApp />
+  </ClientProvider>
 );
 
 export const Secondary = () => (
-<ClientProvider config={() => ({})}>
-      <TestApp />
-    </ClientProvider>
+  <ClientProvider config={() => ({})}>
+    <TestApp />
+  </ClientProvider>
 );

package/stories/halo-recovery.stories.tsx

@@ -109,16 +109,16 @@ const TestApp = () => {
 };
 
 export const HaloRecovery = () => (
-<Container>
-      <Box sx={{ display: 'flex', flex: 1, padding: 1, justifyContent: 'space-around' }}>
-        {/* Instantiated Client. */}
-        <ClientProvider>
-          <TestApp />
-        </ClientProvider>
-
-        <ClientProvider>
-          <TestApp />
-        </ClientProvider>
-      </Box>
-    </Container>
+  <Container>
+    <Box sx={{ display: 'flex', flex: 1, padding: 1, justifyContent: 'space-around' }}>
+      {/* Instantiated Client. */}
+      <ClientProvider>
+        <TestApp />
+      </ClientProvider>
+
+      <ClientProvider>
+        <TestApp />
+      </ClientProvider>
+    </Box>
+  </Container>
 );

package/stories/helpers/ContactsSelector.tsx

@@ -16,20 +16,20 @@ export const ContactsSelector = ({ contacts, selected = '', onSelect }: {
   selected?: string,
   onSelect: (selected: string) => void
 }) => (
-<FormControl fullWidth>
-      <InputLabel id='contact-select-label'>Contact</InputLabel>
-      <Select
-        value={selected || ''}
-        label='Contact'
-        labelId='contact-select-label'
-        onChange={(event: SelectChangeEvent) => onSelect(event.target.value)}
-      >
-        <MenuItem value='' />
-        {contacts.map(contact => (
-          <MenuItem key={contact.publicKey.toHex()} value={contact.publicKey.toHex()}>
-            {contact.displayName}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
+  <FormControl fullWidth>
+    <InputLabel id='contact-select-label'>Contact</InputLabel>
+    <Select
+      value={selected || ''}
+      label='Contact'
+      labelId='contact-select-label'
+      onChange={(event: SelectChangeEvent) => onSelect(event.target.value)}
+    >
+      <MenuItem value='' />
+      {contacts.map(contact => (
+        <MenuItem key={contact.publicKey.toHex()} value={contact.publicKey.toHex()}>
+          {contact.displayName}
+        </MenuItem>
+      ))}
+    </Select>
+  </FormControl>
 );

package/stories/helpers/JsonPanel.tsx

@@ -5,15 +5,15 @@
 import React from 'react';
 
 export const JsonPanel = ({ value }: { value: any }) => (
-<pre
-      style={{
-        margin: 0,
-        // code whiteSpace: 'pre-wrap',
-        // code wordBreak: 'break-all',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-      }}
-    >
-      {JSON.stringify(value, undefined, 2)}
-    </pre>
+  <pre
+    style={{
+      margin: 0,
+      // code whiteSpace: 'pre-wrap',
+      // code wordBreak: 'break-all',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }}
+  >
+    {JSON.stringify(value, undefined, 2)}
+  </pre>
 );

package/tests/playwright/config.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  use: {
+    headless: !!process.env.CI || !!process.env.HEADLESS
+  },
+  webServer: {
+    command: 'npm run book',
+    port: 8080,
+    timeout: 300 * 1000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+
+export default config;

package/tests/playwright/smoke.spec.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+import { test, expect } from '@playwright/test';
+import waitForExpect from 'wait-for-expect';
+
+test.describe('Smoke test', () => {
+  test('Renders tutorial from descriptor', async ({ page }) => {
+    await page.goto('#/__story/stories-client-stories-tsx/Primary');
+
+    await waitForExpect(async () => {
+      const isVisible = await page.isVisible(':has-text("initialized")');
+      expect(isVisible).toBeTruthy();
+    });
+  });
+});