@dxos/react-client 0.4.10-main.3e35a2f → 0.4.10-main.3f5e2d2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.4.10-main.3e35a2f",
+  "version": "0.4.10-main.3f5e2d2",
   "description": "React client API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -11,49 +11,57 @@
       "browser": "./dist/lib/browser/index.mjs",
       "import": "./dist/lib/browser/index.mjs",
       "require": "./dist/lib/node/index.cjs",
-      "node": "./dist/lib/node/index.cjs"
+      "node": "./dist/lib/node/index.cjs",
+      "types": "./dist/types/src/index.d.ts"
     },
     "./devtools": {
       "browser": "./dist/lib/browser/devtools/index.mjs",
       "import": "./dist/lib/browser/devtools/index.mjs",
       "require": "./dist/lib/node/devtools/index.cjs",
-      "node": "./dist/lib/node/devtools/index.cjs"
+      "node": "./dist/lib/node/devtools/index.cjs",
+      "types": "./dist/types/src/devtools/index.d.ts"
     },
     "./echo": {
       "browser": "./dist/lib/browser/echo/index.mjs",
       "import": "./dist/lib/browser/echo/index.mjs",
       "require": "./dist/lib/node/echo/index.cjs",
-      "node": "./dist/lib/node/echo/index.cjs"
+      "node": "./dist/lib/node/echo/index.cjs",
+      "types": "./dist/types/src/echo/index.d.ts"
     },
     "./halo": {
       "browser": "./dist/lib/browser/halo/index.mjs",
       "import": "./dist/lib/browser/halo/index.mjs",
       "require": "./dist/lib/node/halo/index.cjs",
-      "node": "./dist/lib/node/halo/index.cjs"
+      "node": "./dist/lib/node/halo/index.cjs",
+      "types": "./dist/types/src/halo/index.d.ts"
     },
     "./invitations": {
       "browser": "./dist/lib/browser/invitations/index.mjs",
       "import": "./dist/lib/browser/invitations/index.mjs",
       "require": "./dist/lib/node/invitations/index.cjs",
-      "node": "./dist/lib/node/invitations/index.cjs"
+      "node": "./dist/lib/node/invitations/index.cjs",
+      "types": "./dist/types/src/invitations/index.d.ts"
     },
     "./mesh": {
       "browser": "./dist/lib/browser/mesh/index.mjs",
       "import": "./dist/lib/browser/mesh/index.mjs",
       "require": "./dist/lib/node/mesh/index.cjs",
-      "node": "./dist/lib/node/mesh/index.cjs"
+      "node": "./dist/lib/node/mesh/index.cjs",
+      "types": "./dist/types/src/mesh/index.d.ts"
     },
     "./testing": {
       "browser": "./dist/lib/browser/testing/index.mjs",
       "import": "./dist/lib/browser/testing/index.mjs",
       "require": "./dist/lib/node/testing/index.cjs",
-      "node": "./dist/lib/node/testing/index.cjs"
+      "node": "./dist/lib/node/testing/index.cjs",
+      "types": "./dist/types/src/testing/index.d.ts"
     },
     "./worker": {
       "browser": "./dist/lib/browser/worker.mjs",
       "import": "./dist/lib/browser/worker.mjs",
       "require": "./dist/lib/node/worker.cjs",
-      "node": "./dist/lib/node/worker.cjs"
+      "node": "./dist/lib/node/worker.cjs",
+      "types": "./dist/types/src/worker.d.ts"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -83,17 +91,17 @@
     }
   },
   "dependencies": {
-    "@dxos/async": "0.4.10-main.3e35a2f",
-    "@dxos/client": "0.4.10-main.3e35a2f",
-    "@dxos/codec-protobuf": "0.4.10-main.3e35a2f",
-    "@dxos/config": "0.4.10-main.3e35a2f",
-    "@dxos/echo-signals": "0.4.10-main.3e35a2f",
-    "@dxos/debug": "0.4.10-main.3e35a2f",
-    "@dxos/log": "0.4.10-main.3e35a2f",
-    "@dxos/invariant": "0.4.10-main.3e35a2f",
-    "@dxos/node-std": "0.4.10-main.3e35a2f",
-    "@dxos/react-async": "0.4.10-main.3e35a2f",
-    "@dxos/util": "0.4.10-main.3e35a2f"
+    "@dxos/async": "0.4.10-main.3f5e2d2",
+    "@dxos/client": "0.4.10-main.3f5e2d2",
+    "@dxos/codec-protobuf": "0.4.10-main.3f5e2d2",
+    "@dxos/echo-signals": "0.4.10-main.3f5e2d2",
+    "@dxos/debug": "0.4.10-main.3f5e2d2",
+    "@dxos/config": "0.4.10-main.3f5e2d2",
+    "@dxos/invariant": "0.4.10-main.3f5e2d2",
+    "@dxos/log": "0.4.10-main.3f5e2d2",
+    "@dxos/react-async": "0.4.10-main.3f5e2d2",
+    "@dxos/util": "0.4.10-main.3f5e2d2",
+    "@dxos/node-std": "0.4.10-main.3f5e2d2"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.17.1",
@@ -104,10 +112,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yjs": "^13.6.10",
-    "@dxos/react-ui-theme": "0.4.10-main.3e35a2f",
-    "@dxos/react-ui": "0.4.10-main.3e35a2f",
-    "@dxos/random": "0.4.10-main.3e35a2f",
-    "@dxos/storybook-utils": "0.4.10-main.3e35a2f"
+    "@dxos/random": "0.4.10-main.3f5e2d2",
+    "@dxos/react-ui": "0.4.10-main.3f5e2d2",
+    "@dxos/react-ui-theme": "0.4.10-main.3f5e2d2",
+    "@dxos/storybook-utils": "0.4.10-main.3f5e2d2"
   },
   "peerDependencies": {
     "react": "*",
@@ -115,7 +123,7 @@
   },
   "optionalDependencies": {
     "yjs": "^13.6.10",
-    "@dxos/random": "0.4.10-main.3e35a2f"
+    "@dxos/random": "0.4.10-main.3f5e2d2"
   },
   "publishConfig": {
     "access": "public"

package/project.json

@@ -1,6 +1,9 @@
 {
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "name": "react-client",
+  "tags": [
+    "scope:sdk"
+  ],
   "sourceRoot": "packages/sdk/react-client/src",
   "projectType": "library",
   "targets": {

package/src/client/useAgentHostingProvider.ts

@@ -4,7 +4,7 @@
 
 import {
   type AgentHostingProviderClient,
-  EldonAgentHostingProviderClient,
+  DXOSAgentHostingProviderClient,
   FakeAgentHostingProvider,
 } from '@dxos/client/services';
 import { type Config } from '@dxos/config';
@@ -33,5 +33,5 @@ export const useAgentHostingProviderClient = (config: Config): AgentHostingProvi
     return new FakeAgentHostingProvider(config);
   }
 
-  return new EldonAgentHostingProviderClient(config);
+  return new DXOSAgentHostingProviderClient(config);
 };

package/src/echo/useQuery.ts

@@ -4,34 +4,57 @@
 
 import { useMemo, useSyncExternalStore } from 'react';
 
-import type { QueryOptions, OpaqueEchoObject, Query, FilterSource, Space } from '@dxos/client/echo';
+import {
+  type QueryOptions,
+  type Query,
+  type FilterSource,
+  type Space,
+  type EchoReactiveObject,
+  type Echo,
+  isSpace,
+} from '@dxos/client/echo';
 
 type UseQuery = {
-  <T extends OpaqueEchoObject>(space?: Space, filter?: FilterSource<T>, options?: QueryOptions, deps?: any[]): T[];
+  <T extends EchoReactiveObject<any>>(
+    spaceOrEcho?: Space | Echo,
+    filter?: FilterSource<T>,
+    options?: QueryOptions,
+    deps?: any[],
+  ): T[];
 };
 
 /**
  * Create subscription.
  */
 // TODO(burdon): Support typed operator filters (e.g., Note.filter(note => ...)).
-export const useQuery: UseQuery = <T extends OpaqueEchoObject>(
-  space?: Space,
+export const useQuery: UseQuery = <T extends EchoReactiveObject<any>>(
+  spaceOrEcho?: Space | Echo,
   filter?: FilterSource<T>,
   options?: QueryOptions,
   deps?: any[],
 ) => {
-  const query = useMemo(
-    () => space?.db.query(filter, options) as Query<T> | undefined,
-    [space?.db, ...(typeof filter === 'function' ? [] : filterToDepsArray(filter)), ...(deps ?? [])],
-  );
+  const { subscribe, getObjects } = useMemo(() => {
+    const query = isSpace(spaceOrEcho)
+      ? spaceOrEcho.db.query(filter, options)
+      : (spaceOrEcho?.query(filter, options) as Query<T> | undefined);
+    let subscribed = false;
+
+    return {
+      subscribe: (cb: () => void) => {
+        subscribed = true;
+        const unsubscribe = query?.subscribe(cb) ?? noop;
+        return () => {
+          unsubscribe?.();
+          subscribed = false;
+        };
+      },
+      getObjects: () => (subscribed && query ? query.objects : EMPTY_ARRAY),
+    };
+  }, [spaceOrEcho, ...(typeof filter === 'function' ? [] : filterToDepsArray(filter)), ...(deps ?? [])]);
 
   // https://beta.reactjs.org/reference/react/useSyncExternalStore
-  return (
-    useSyncExternalStore<T[] | undefined>(
-      (cb) => query?.subscribe?.(cb) ?? cb,
-      () => query?.objects,
-    ) ?? []
-  );
+  // 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.
@@ -39,3 +62,7 @@ const filterToDepsArray = (filter?: FilterSource<any>) =>
   Object.entries(filter ?? {})
     .flat(10)
     .map((x) => (typeof x === 'function' || typeof x === 'object' ? null : x));
+
+const noop = () => {};
+
+const EMPTY_ARRAY: never[] = [];

package/src/echo/useSpaceInvitations.ts

@@ -2,30 +2,18 @@
 // Copyright 2022 DXOS.org
 //
 
-import { useMemo, useSyncExternalStore } from 'react';
+import { useMemo } from 'react';
 
+import { MulticastObservable } from '@dxos/async';
 import { type PublicKey } from '@dxos/client';
-import { SpaceProxy } from '@dxos/client/echo';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useSpace } from './useSpaces';
-import { useInvitationStatus } from '../invitations';
+import { type CancellableInvitationObservable, useInvitationStatus } from '../invitations';
 
-export const useSpaceInvitations = (spaceKey?: PublicKey) => {
+export const useSpaceInvitations = (spaceKey?: PublicKey): CancellableInvitationObservable[] => {
   const space = useSpace(spaceKey);
-  const invitations =
-    useSyncExternalStore(
-      (listener) => {
-        if (!(space instanceof SpaceProxy)) {
-          return () => {};
-        }
-
-        const subscription = space.invitations.subscribe(() => listener());
-        return () => subscription.unsubscribe();
-      },
-      () => space?.invitations.get(),
-    ) ?? [];
-
-  return invitations;
+  return useMulticastObservable(space?.invitations ?? MulticastObservable.empty()) ?? [];
 };
 
 export const useSpaceInvitation = (spaceKey?: PublicKey, invitationId?: string) => {

package/src/halo/index.ts

@@ -3,16 +3,7 @@
 //
 
 // NOTE: Export * fails here.
-export {
-  type Contact,
-  Device,
-  DeviceKind,
-  DeviceType,
-  type Identity,
-  // generateSeedPhrase,
-  type Halo,
-  HaloProxy,
-} from '@dxos/client/halo';
+export { type Contact, type Identity, type Halo, Device, DeviceKind, DeviceType } from '@dxos/client/halo';
 
 export * from './useContacts';
 export * from './useDevices';

package/src/halo/useContacts.ts

@@ -2,9 +2,8 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useSyncExternalStore } from 'react';
-
 import type { Contact } from '@dxos/client/halo';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
 
@@ -15,13 +14,5 @@ import { useClient } from '../client';
  */
 export const useContacts = (): Contact[] => {
   const client = useClient();
-  const contacts = useSyncExternalStore(
-    (listener) => {
-      const subscription = client.halo.contacts.subscribe(listener);
-      return () => subscription.unsubscribe();
-    },
-    () => client.halo.contacts.get(),
-  );
-
-  return contacts;
+  return useMulticastObservable(client.halo.contacts);
 };

package/src/halo/useDevices.ts

@@ -2,21 +2,12 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useSyncExternalStore } from 'react';
-
 import type { Device } from '@dxos/client/halo';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
 
 export const useDevices = (): Device[] => {
   const client = useClient();
-  const devices = useSyncExternalStore(
-    (listener) => {
-      const subscription = client.halo.devices.subscribe(listener);
-      return () => subscription.unsubscribe();
-    },
-    () => client.halo.devices.get(),
-  );
-
-  return devices;
+  return useMulticastObservable(client.halo.devices);
 };

package/src/halo/useHaloInvitations.ts

@@ -2,23 +2,16 @@
 // Copyright 2022 DXOS.org
 //
 
-import { useMemo, useSyncExternalStore } from 'react';
+import { useMemo } from 'react';
+
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
-import { useInvitationStatus } from '../invitations';
+import { useInvitationStatus, type CancellableInvitationObservable } from '../invitations';
 
-export const useHaloInvitations = () => {
+export const useHaloInvitations = (): CancellableInvitationObservable[] => {
   const client = useClient();
-  const invitations =
-    useSyncExternalStore(
-      (listener) => {
-        const subscription = client.halo.invitations.subscribe(() => listener());
-        return () => subscription.unsubscribe();
-      },
-      () => (client.halo.opened ? client.halo.invitations.get() : []),
-    ) ?? [];
-
-  return invitations;
+  return useMulticastObservable(client.halo.invitations);
 };
 
 export const useHaloInvitation = (invitationId?: string) => {

package/src/mesh/useNetworkStatus.ts

@@ -2,9 +2,8 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useSyncExternalStore } from 'react';
-
 import { type NetworkStatus } from '@dxos/client/mesh';
+import { useMulticastObservable } from '@dxos/react-async';
 
 import { useClient } from '../client';
 
@@ -13,13 +12,5 @@ import { useClient } from '../client';
  */
 export const useNetworkStatus = (): NetworkStatus => {
   const client = useClient();
-  const networkStatus = useSyncExternalStore(
-    (listener) => {
-      const subscription = client.mesh.networkStatus.subscribe(listener);
-      return () => subscription.unsubscribe();
-    },
-    () => client.mesh.networkStatus.get(),
-  );
-
-  return networkStatus;
+  return useMulticastObservable(client.mesh.networkStatus);
 };

package/src/testing/ClientRepeater.tsx

@@ -5,7 +5,7 @@
 import React, { useState, type FC, useEffect } from 'react';
 
 import { Client, type PublicKey } from '@dxos/client';
-import { type SpaceProxy, type Space } from '@dxos/client/echo';
+import { type Space } from '@dxos/client/echo';
 import { TestBuilder, performInvitation } from '@dxos/client/testing';
 import { registerSignalFactory } from '@dxos/echo-signals/react';
 import { faker } from '@dxos/random';
@@ -72,9 +72,7 @@ export const ClientRepeater = <P extends RepeatedComponentProps>(props: ClientRe
         const space = await clients[0].spaces.create({ name: faker.commerce.productName() });
         setSpaceKey(space.key);
         await onCreateSpace?.(space);
-        await Promise.all(
-          clients.slice(1).map((client) => performInvitation({ host: space as SpaceProxy, guest: client.spaces })),
-        );
+        await Promise.all(clients.slice(1).map((client) => performInvitation({ host: space, guest: client.spaces })));
       }
 
       setClients(clients);