@basictech/react 0.11.0 → 0.12.0-beta.1

package/dist/index.mjs

@@ -1,3 +1,10 @@
+// src/create-basic.tsx
+import { useContext as useContext2 } from "react";
+
+// src/context.ts
+import { createContext } from "react";
+var BasicClientContext = createContext(null);
+
 // src/create-client.ts
 import {
   MemoryKeyValueStorage,
@@ -6,6 +13,10 @@ import {
 } from "@basictech/core";
 
 // src/adapters/broadcast-channel.ts
+function supportsAccessTokenAdoption(store) {
+  const candidate = store;
+  return typeof candidate?.accessToken === "function" && typeof candidate?.adoptAccessToken === "function";
+}
 function createBrowserMessageChannel(name) {
   const channel = new BroadcastChannel(name);
   const adapter = {
@@ -16,12 +27,11 @@ function createBrowserMessageChannel(name) {
   channel.onmessage = (event) => adapter.onmessage?.({ data: event.data });
   return adapter;
 }
-function createBrowserAuthChannelFactory(clientId, tokenStore) {
-  const prefix = `basic_auth:${clientId}:`;
-  return (name) => {
+function createBrowserAuthChannelFactory(tokenStore) {
+  return (name, context) => {
     const channel = createBrowserMessageChannel(name);
-    const profileId = name.startsWith(prefix) ? name.slice(prefix.length) : "";
-    const tokenKey = `u:${profileId}:basic_tokens`;
+    if (!context) return channel;
+    const { tokenKey } = context;
     const adapter = {
       postMessage: (message) => {
         const outgoing = message;
@@ -568,32 +578,27 @@ function browserReconcileTrigger(listener) {
 function createBasicClient(config) {
   const local = browserStorage("localStorage") ?? new MemoryKeyValueStorage();
   const session = browserStorage("sessionStorage") ?? new MemoryKeyValueStorage();
-  const defaultTokenStore = config.tokenStore ? null : new BrowserTokenStore(local);
+  const tokenStore = config.tokenStore ?? new BrowserTokenStore(local);
   const canBroadcast = typeof BroadcastChannel !== "undefined";
   const canPersistReplica = typeof indexedDB !== "undefined";
+  const messageChannel = !canBroadcast ? void 0 : supportsAccessTokenAdoption(tokenStore) ? createBrowserAuthChannelFactory(tokenStore) : createBrowserMessageChannel;
   return createCoreClient({
     ...config,
     kv: config.kv ?? local,
-    tokenStore: config.tokenStore ?? defaultTokenStore,
+    tokenStore,
     sessionStorage: config.sessionStorage ?? session,
     replicaStore: config.replicaStore ?? (canPersistReplica ? new PersistenceStore(config.clientId) : new MemoryReplicaStoreFactory()),
     navigate: config.navigate ?? browserNavigate,
     currentUrl: config.currentUrl ?? browserCurrentUrl,
     replaceUrl: config.replaceUrl ?? browserReplaceUrl,
     reconcileTrigger: config.reconcileTrigger ?? browserReconcileTrigger,
-    createMessageChannel: config.createMessageChannel ?? (canBroadcast && defaultTokenStore ? createBrowserAuthChannelFactory(config.clientId, defaultTokenStore) : void 0),
+    createMessageChannel: config.createMessageChannel ?? messageChannel,
     uploadTransport: config.uploadTransport ?? (typeof XMLHttpRequest === "undefined" ? void 0 : browserUploadTransport)
   });
 }
 
 // src/provider.tsx
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
-
-// src/context.ts
-import { createContext } from "react";
-var BasicClientContext = createContext(null);
-
-// src/provider.tsx
 import { jsx } from "react/jsx-runtime";
 var clientLifecycles = /* @__PURE__ */ new WeakMap();
 function retainClient(client) {
@@ -662,10 +667,10 @@ function BasicProvider(props) {
 }
 
 // src/hooks/accounts.ts
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo as useMemo2 } from "react";
 
 // src/hooks/client.ts
-import { useContext, useEffect as useEffect2, useRef as useRef2, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useContext, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   BasicError as BasicError4
 } from "@basictech/core";
@@ -677,6 +682,10 @@ function useRequiredClient() {
 function useClientSnapshot(client) {
   return useSyncExternalStore2(client.subscribe, client.getSnapshot, client.getSnapshot);
 }
+function useSignInGate(snapshot) {
+  const code = snapshot.isReady && !snapshot.isSignedIn ? snapshot.readOnlyReason ?? "AUTHORIZATION_REQUIRED" : null;
+  return useMemo(() => code === null ? null : new BasicError4(code, code === "AUTH_EXPIRED" ? "Session expired. Sign in again to load this list." : "Sign in to load this list."), [code]);
+}
 function toBasicError(error, fallback = "UNKNOWN_ERROR") {
   if (error instanceof BasicError4) return error;
   return new BasicError4(fallback, error instanceof Error ? error.message : String(error));
@@ -727,36 +736,33 @@ function useAccountsFor(client) {
   const switchAccount = useCallback((id) => client.switchAccount(id), [client]);
   const addAccount = useCallback(() => client.addAccount(), [client]);
   const removeAccount = useCallback((id) => client.removeAccount(id), [client]);
-  return useMemo(() => ({
+  return useMemo2(() => ({
     accounts: snapshot.accounts,
-    active: snapshot.activeProfile,
+    activeAccount: snapshot.activeAccount,
     switchAccount,
     addAccount,
     removeAccount
-  }), [snapshot.accounts, snapshot.activeProfile, switchAccount, addAccount, removeAccount]);
+  }), [snapshot.accounts, snapshot.activeAccount, switchAccount, addAccount, removeAccount]);
 }
 function useAccounts() {
   return useAccountsFor(useRequiredClient());
 }
 
 // src/hooks/auth.ts
-import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import {
-  BasicError as BasicError5
-} from "@basictech/core";
+import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
 function useAuthFor(client) {
   const snapshot = useClientSnapshot(client);
   const signIn = useCallback2((input) => client.signIn(input), [client]);
   const signOut = useCallback2(() => client.signOut(), [client]);
   const getToken = useCallback2(() => client.getToken(), [client]);
-  return useMemo2(() => ({
+  return useMemo3(() => ({
     isReady: snapshot.isReady,
     isSignedIn: snapshot.isSignedIn,
     isAnonymous: snapshot.isAnonymous,
     canWrite: snapshot.canWrite,
     readOnlyReason: snapshot.readOnlyReason,
     status: snapshot.authStatus,
-    error: snapshot.authErrorCode ? new BasicError5(snapshot.authErrorCode) : null,
+    error: snapshot.authError,
     user: snapshot.user,
     did: snapshot.did,
     handle: snapshot.handle,
@@ -769,6 +775,9 @@ function useAuth() {
   return useAuthFor(useRequiredClient());
 }
 
+// src/hooks/basic.ts
+import { useMemo as useMemo6 } from "react";
+
 // src/hooks/db.ts
 function useDbFor(client, source = "default") {
   return client.db(source);
@@ -784,13 +793,13 @@ function useCollection(name, options = {}) {
 }
 
 // src/hooks/repos.ts
-import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo4 } from "react";
 function useReposFor(client) {
   const snapshot = useClientSnapshot(client);
   const refresh = useCallback3(() => client.refreshRepos(), [client]);
   const create = useCallback3((input) => client.createRepo(input), [client]);
   const archive = useCallback3((repoId) => client.archiveRepo(repoId), [client]);
-  return useMemo3(() => ({
+  return useMemo4(() => ({
     repos: snapshot.repos,
     defaultRepoId: snapshot.defaultRepoId,
     refresh,
@@ -803,7 +812,7 @@ function useRepos() {
 }
 
 // src/hooks/status.ts
-import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
 function useSyncStatusFor(client, source) {
   const snapshot = useClientSnapshot(client);
   const sourceKey = JSON.stringify(source);
@@ -818,7 +827,7 @@ function useSyncStatusFor(client, source) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [client, sourceKey]
   );
-  return useMemo4(() => ({
+  return useMemo5(() => ({
     status: source === void 0 ? snapshot.syncStatus : client.status(source),
     pendingCount: client.pending(source).length,
     rejected: client.rejected(source),
@@ -845,51 +854,41 @@ function useBasicFor(client) {
   const auth = useAuthFor(client);
   const accounts = useAccountsFor(client);
   const sync = useSyncStatusFor(client);
-  const repos = useReposFor(client);
-  return {
+  const repos = useReposFor(client).repos;
+  const db = useDbFor(client);
+  return useMemo6(() => ({
     ...auth,
     client,
-    db: useDbFor(client),
+    db,
     accounts,
     sync,
-    repos: repos.repos
-  };
+    repos
+  }), [auth, client, db, accounts, sync, repos]);
 }
 function useBasic() {
   return useBasicFor(useRequiredClient());
 }
 
 // src/hooks/files.ts
-import { useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore3 } from "react";
 var zero = () => 0;
 function useFilesFor(client, query = {}, options = {}) {
   const source = options.source ?? "default";
   const sourceKey = JSON.stringify(source);
   const queryKey = JSON.stringify(query);
   const snapshot = useClientSnapshot(client);
-  const subscription = useMemo5(
+  const subscription = useMemo7(
     () => client.queryStore.collection(source, "_files"),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [client, sourceKey]
   );
   const version = useSyncExternalStore3(subscription.subscribe, subscription.getSnapshot, zero);
   return useAsyncResult(
-    async () => {
-      const files = client.db(source).files;
-      if (source !== "default" && "mountId" in source) {
-        const page = await files.list({
-          ...query.prefix !== void 0 ? { prefix: query.prefix } : {},
-          ...query.limit !== void 0 ? { limit: query.limit } : {},
-          ...query.cursor !== void 0 ? { cursor: query.cursor } : {}
-        });
-        return page.data;
-      }
-      return (await files.list(query)).data;
-    },
+    async () => (await client.db(source).files.list(query)).data,
     [],
     snapshot.isReady,
     snapshot.isReady,
-    [sourceKey, queryKey, version, snapshot.activeProfile?.id]
+    [sourceKey, queryKey, version, snapshot.activeAccount?.id]
   );
 }
 function useFiles(query = {}, options = {}) {
@@ -897,13 +896,15 @@ function useFiles(query = {}, options = {}) {
 }
 function useStorageInfoFor(client) {
   const snapshot = useClientSnapshot(client);
-  return useAsyncResult(
+  const gate = useSignInGate(snapshot);
+  const result = useAsyncResult(
     () => client.storageInfo(client.resolveRepoId()),
     null,
     snapshot.isReady && snapshot.isSignedIn,
     snapshot.isReady,
-    [snapshot.activeProfile?.id]
+    [snapshot.activeAccount?.id]
   );
+  return { ...result, error: result.error ?? gate };
 }
 function useStorageInfo() {
   return useStorageInfoFor(useRequiredClient());
@@ -913,33 +914,34 @@ function useStorageInfo() {
 import { useCallback as useCallback5 } from "react";
 function useMountsFor(client, query = {}) {
   const snapshot = useClientSnapshot(client);
+  const gate = useSignInGate(snapshot);
   const queryKey = JSON.stringify(query);
   const result = useAsyncResult(
     () => client.shares.mounts(query),
     [],
     snapshot.isReady && snapshot.isSignedIn,
     snapshot.isReady,
-    [queryKey, snapshot.activeProfile?.id]
+    [queryKey, snapshot.activeAccount?.id]
   );
   const open = useCallback5(
     (mountId) => client.shares.mount(mountId),
     [client]
   );
   const manageUrl = useCallback5(() => client.shares.manageUrl(), [client]);
-  const { data: mounts, ...state } = result;
-  return { data: mounts, mounts, ...state, open, manageUrl };
+  return { ...result, error: result.error ?? gate, open, manageUrl };
 }
 function useMounts(query = {}) {
   return useMountsFor(useRequiredClient(), query);
 }
 function useOutgoingSharesFor(client) {
   const snapshot = useClientSnapshot(client);
+  const gate = useSignInGate(snapshot);
   const result = useAsyncResult(
     () => client.shares.listOutgoing(),
     [],
     snapshot.isReady && snapshot.isSignedIn,
     snapshot.isReady,
-    [snapshot.activeProfile?.id]
+    [snapshot.activeAccount?.id]
   );
   const create = useCallback5((input) => client.shares.createOutgoing(input), [client]);
   const get = useCallback5((id) => client.shares.getOutgoing(id), [client]);
@@ -947,11 +949,9 @@ function useOutgoingSharesFor(client) {
   const revoke = useCallback5((id) => client.shares.revoke(id), [client]);
   const getContactHandle = useCallback5((did) => client.shares.getContactHandle(did), [client]);
   const manageUrl = useCallback5(() => client.shares.manageUrl(), [client]);
-  const { data: outgoingShares, ...state } = result;
   return {
-    data: outgoingShares,
-    outgoingShares,
-    ...state,
+    ...result,
+    error: result.error ?? gate,
     create,
     get,
     cancel,
@@ -965,58 +965,35 @@ function useOutgoingShares() {
 }
 
 // src/hooks/query.ts
-import { useEffect as useEffect3, useMemo as useMemo6, useState as useState3, useSyncExternalStore as useSyncExternalStore4 } from "react";
-var subscribeNever = () => () => {
-};
-var zero2 = () => 0;
+import { useEffect as useEffect3, useState as useState3 } from "react";
 function useQueryValueFor(client, collection, query = {}, options = {}) {
   const source = options.source ?? "default";
   const sourceKey = JSON.stringify(source);
   const queryKey = JSON.stringify(query);
   const snapshot = useClientSnapshot(client);
-  const subscription = useMemo6(
-    () => client.queryStore.collection(source, collection),
-    // sourceKey captures semantic source identity rather than object identity.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [client, sourceKey, collection]
-  );
-  const version = useSyncExternalStore4(
-    subscription?.subscribe ?? subscribeNever,
-    subscription?.getSnapshot ?? zero2,
-    zero2
-  );
   const [result, setResult] = useState3({
     data: [],
     isLoading: true,
     error: null
   });
   useEffect3(() => {
-    let active = true;
-    if (!snapshot.isReady) {
-      setResult((current) => ({ ...current, isLoading: true, error: null }));
-      return () => {
-        active = false;
-      };
-    }
     setResult((current) => ({ ...current, isLoading: true, error: null }));
-    const collectionApi = client.db(source).collection(collection);
-    const list = collectionApi.list;
-    void list.call(collectionApi, query).then(
-      (page) => {
-        if (active) setResult({ data: page.data, isLoading: false, error: null });
-      },
-      (error) => {
-        if (active) setResult((current) => ({
+    if (!snapshot.isReady) return;
+    try {
+      return client.db(source).collection(collection).watch(
+        query,
+        (page) => setResult({ data: page.data, isLoading: false, error: null }),
+        (error) => setResult((current) => ({
           ...current,
           isLoading: false,
           error: toBasicError(error, "QUERY_FAILED")
-        }));
-      }
-    );
-    return () => {
-      active = false;
-    };
-  }, [client, collection, sourceKey, queryKey, version, snapshot.isReady]);
+        }))
+      );
+    } catch (error) {
+      setResult((current) => ({ ...current, isLoading: false, error: toBasicError(error, "QUERY_FAILED") }));
+      return;
+    }
+  }, [client, collection, sourceKey, queryKey, snapshot.isReady]);
   return result;
 }
 function useQueryFor(client, collection, query = {}, options = {}) {
@@ -1033,25 +1010,31 @@ function createBasic(config) {
   function Provider({ children, renderWhileLoading }) {
     return /* @__PURE__ */ jsx2(BasicProvider, { client, renderWhileLoading, children });
   }
+  function useBound() {
+    if (useContext2(BasicClientContext) !== client) {
+      throw new Error("Bound Basic hooks must be used within their own <basic.Provider>");
+    }
+    return client;
+  }
   function useBoundDb(source = "default") {
-    return client.db(source);
+    return useBound().db(source);
   }
   return {
     client,
     Provider,
-    useBasic: () => useBasicFor(client),
-    useAuth: () => useAuthFor(client),
-    useAccounts: () => useAccountsFor(client),
+    useBasic: () => useBasicFor(useBound()),
+    useAuth: () => useAuthFor(useBound()),
+    useAccounts: () => useAccountsFor(useBound()),
     useDb: useBoundDb,
-    useCollection: (name, options = {}) => useCollectionFor(client, name, options),
-    useQuery: (collection, query = {}, options = {}) => useQueryFor(client, collection, query, options),
-    useSyncStatus: (source) => useSyncStatusFor(client, source),
-    useSchemaStatus: (source = "default") => useSchemaStatusFor(client, source),
-    useRepos: () => useReposFor(client),
-    useFiles: (query = {}, options = {}) => useFilesFor(client, query, options),
-    useStorageInfo: () => useStorageInfoFor(client),
-    useMounts: (query = {}) => useMountsFor(client, query),
-    useOutgoingShares: () => useOutgoingSharesFor(client)
+    useCollection: (name, options = {}) => useCollectionFor(useBound(), name, options),
+    useQuery: (collection, query = {}, options = {}) => useQueryFor(useBound(), collection, query, options),
+    useSyncStatus: (source) => useSyncStatusFor(useBound(), source),
+    useSchemaStatus: (source = "default") => useSchemaStatusFor(useBound(), source),
+    useRepos: () => useReposFor(useBound()),
+    useFiles: (query = {}, options = {}) => useFilesFor(useBound(), query, options),
+    useStorageInfo: () => useStorageInfoFor(useBound()),
+    useMounts: (query = {}) => useMountsFor(useBound(), query),
+    useOutgoingShares: () => useOutgoingSharesFor(useBound())
   };
 }
 export {