@dxos/react-client 0.4.10-main.6f3f81d → 0.4.10-main.6fbe602

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.4.10-main.6f3f81d",
+  "version": "0.4.10-main.6fbe602",
   "description": "React client API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -83,17 +83,17 @@
     }
   },
   "dependencies": {
-    "@dxos/client": "0.4.10-main.6f3f81d",
-    "@dxos/async": "0.4.10-main.6f3f81d",
-    "@dxos/config": "0.4.10-main.6f3f81d",
-    "@dxos/codec-protobuf": "0.4.10-main.6f3f81d",
-    "@dxos/debug": "0.4.10-main.6f3f81d",
-    "@dxos/echo-signals": "0.4.10-main.6f3f81d",
-    "@dxos/node-std": "0.4.10-main.6f3f81d",
-    "@dxos/log": "0.4.10-main.6f3f81d",
-    "@dxos/react-async": "0.4.10-main.6f3f81d",
-    "@dxos/invariant": "0.4.10-main.6f3f81d",
-    "@dxos/util": "0.4.10-main.6f3f81d"
+    "@dxos/async": "0.4.10-main.6fbe602",
+    "@dxos/config": "0.4.10-main.6fbe602",
+    "@dxos/client": "0.4.10-main.6fbe602",
+    "@dxos/codec-protobuf": "0.4.10-main.6fbe602",
+    "@dxos/debug": "0.4.10-main.6fbe602",
+    "@dxos/echo-signals": "0.4.10-main.6fbe602",
+    "@dxos/node-std": "0.4.10-main.6fbe602",
+    "@dxos/invariant": "0.4.10-main.6fbe602",
+    "@dxos/react-async": "0.4.10-main.6fbe602",
+    "@dxos/log": "0.4.10-main.6fbe602",
+    "@dxos/util": "0.4.10-main.6fbe602"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.17.1",
@@ -104,10 +104,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yjs": "^13.6.10",
-    "@dxos/random": "0.4.10-main.6f3f81d",
-    "@dxos/react-ui": "0.4.10-main.6f3f81d",
-    "@dxos/react-ui-theme": "0.4.10-main.6f3f81d",
-    "@dxos/storybook-utils": "0.4.10-main.6f3f81d"
+    "@dxos/random": "0.4.10-main.6fbe602",
+    "@dxos/react-ui": "0.4.10-main.6fbe602",
+    "@dxos/react-ui-theme": "0.4.10-main.6fbe602",
+    "@dxos/storybook-utils": "0.4.10-main.6fbe602"
   },
   "peerDependencies": {
     "react": "*",
@@ -115,7 +115,7 @@
   },
   "optionalDependencies": {
     "yjs": "^13.6.10",
-    "@dxos/random": "0.4.10-main.6f3f81d"
+    "@dxos/random": "0.4.10-main.6fbe602"
   },
   "publishConfig": {
     "access": "public"

package/src/echo/useQuery.ts

@@ -4,34 +4,39 @@
 
 import { useMemo, useSyncExternalStore } from 'react';
 
-import type { QueryOptions, OpaqueEchoObject, Query, FilterSource, Space } from '@dxos/client/echo';
+import type { QueryOptions, Query, FilterSource, Space, EchoReactiveObject } from '@dxos/client/echo';
 
 type UseQuery = {
-  <T extends OpaqueEchoObject>(space?: Space, filter?: FilterSource<T>, options?: QueryOptions, deps?: any[]): T[];
+  <T extends EchoReactiveObject<any>>(
+    space?: Space,
+    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>(
+export const useQuery: UseQuery = <T extends EchoReactiveObject<any>>(
   space?: Space,
   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 = space?.db.query(filter, options) as Query<T> | undefined;
+
+    return {
+      subscribe: (cb: () => void) => query?.subscribe(cb) ?? noop,
+      getObjects: () => query?.objects ?? EMPTY_ARRAY,
+    };
+  }, [space?.db, ...(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 +44,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 { type CancellableInvitationObservable, useInvitationStatus } 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);