@basictech/react 0.12.0-beta.0 → 0.12.0-beta.1

package/dist/index.js

@@ -59,10 +59,21 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/create-basic.tsx
+var import_react12 = require("react");
+
+// src/context.ts
+var import_react = require("react");
+var BasicClientContext = (0, import_react.createContext)(null);
+
 // src/create-client.ts
 var import_core4 = require("@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 = {
@@ -73,12 +84,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;
@@ -620,32 +630,27 @@ function browserReconcileTrigger(listener) {
 function createBasicClient(config) {
   const local = browserStorage("localStorage") ?? new import_core4.MemoryKeyValueStorage();
   const session = browserStorage("sessionStorage") ?? new import_core4.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 (0, import_core4.createBasicClient)({
     ...config,
     kv: config.kv ?? local,
-    tokenStore: config.tokenStore ?? defaultTokenStore,
+    tokenStore,
     sessionStorage: config.sessionStorage ?? session,
     replicaStore: config.replicaStore ?? (canPersistReplica ? new PersistenceStore(config.clientId) : new import_core4.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
 var import_react2 = require("react");
-
-// src/context.ts
-var import_react = require("react");
-var BasicClientContext = (0, import_react.createContext)(null);
-
-// src/provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var clientLifecycles = /* @__PURE__ */ new WeakMap();
 function retainClient(client) {
@@ -727,6 +732,10 @@ function useRequiredClient() {
 function useClientSnapshot(client) {
   return (0, import_react3.useSyncExternalStore)(client.subscribe, client.getSnapshot, client.getSnapshot);
 }
+function useSignInGate(snapshot) {
+  const code = snapshot.isReady && !snapshot.isSignedIn ? snapshot.readOnlyReason ?? "AUTHORIZATION_REQUIRED" : null;
+  return (0, import_react3.useMemo)(() => code === null ? null : new import_core5.BasicError(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 import_core5.BasicError) return error;
   return new import_core5.BasicError(fallback, error instanceof Error ? error.message : String(error));
@@ -779,11 +788,11 @@ function useAccountsFor(client) {
   const removeAccount = (0, import_react4.useCallback)((id) => client.removeAccount(id), [client]);
   return (0, import_react4.useMemo)(() => ({
     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());
@@ -791,7 +800,6 @@ function useAccounts() {
 
 // src/hooks/auth.ts
 var import_react5 = require("react");
-var import_core6 = require("@basictech/core");
 function useAuthFor(client) {
   const snapshot = useClientSnapshot(client);
   const signIn = (0, import_react5.useCallback)((input) => client.signIn(input), [client]);
@@ -804,7 +812,7 @@ function useAuthFor(client) {
     canWrite: snapshot.canWrite,
     readOnlyReason: snapshot.readOnlyReason,
     status: snapshot.authStatus,
-    error: snapshot.authErrorCode ? new import_core6.BasicError(snapshot.authErrorCode) : null,
+    error: snapshot.authError,
     user: snapshot.user,
     did: snapshot.did,
     handle: snapshot.handle,
@@ -817,6 +825,9 @@ function useAuth() {
   return useAuthFor(useRequiredClient());
 }
 
+// src/hooks/basic.ts
+var import_react8 = require("react");
+
 // src/hooks/db.ts
 function useDbFor(client, source = "default") {
   return client.db(source);
@@ -893,51 +904,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 (0, import_react8.useMemo)(() => ({
     ...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
-var import_react8 = require("react");
+var import_react9 = require("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 = (0, import_react8.useMemo)(
+  const subscription = (0, import_react9.useMemo)(
     () => client.queryStore.collection(source, "_files"),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [client, sourceKey]
   );
-  const version = (0, import_react8.useSyncExternalStore)(subscription.subscribe, subscription.getSnapshot, zero);
+  const version = (0, import_react9.useSyncExternalStore)(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 = {}) {
@@ -945,61 +946,62 @@ 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());
 }
 
 // src/hooks/mounts.ts
-var import_react9 = require("react");
+var import_react10 = require("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 = (0, import_react9.useCallback)(
+  const open = (0, import_react10.useCallback)(
     (mountId) => client.shares.mount(mountId),
     [client]
   );
-  const manageUrl = (0, import_react9.useCallback)(() => client.shares.manageUrl(), [client]);
-  const { data: mounts, ...state } = result;
-  return { data: mounts, mounts, ...state, open, manageUrl };
+  const manageUrl = (0, import_react10.useCallback)(() => client.shares.manageUrl(), [client]);
+  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 = (0, import_react9.useCallback)((input) => client.shares.createOutgoing(input), [client]);
-  const get = (0, import_react9.useCallback)((id) => client.shares.getOutgoing(id), [client]);
-  const cancel = (0, import_react9.useCallback)((id) => client.shares.cancel(id), [client]);
-  const revoke = (0, import_react9.useCallback)((id) => client.shares.revoke(id), [client]);
-  const getContactHandle = (0, import_react9.useCallback)((did) => client.shares.getContactHandle(did), [client]);
-  const manageUrl = (0, import_react9.useCallback)(() => client.shares.manageUrl(), [client]);
-  const { data: outgoingShares, ...state } = result;
+  const create = (0, import_react10.useCallback)((input) => client.shares.createOutgoing(input), [client]);
+  const get = (0, import_react10.useCallback)((id) => client.shares.getOutgoing(id), [client]);
+  const cancel = (0, import_react10.useCallback)((id) => client.shares.cancel(id), [client]);
+  const revoke = (0, import_react10.useCallback)((id) => client.shares.revoke(id), [client]);
+  const getContactHandle = (0, import_react10.useCallback)((did) => client.shares.getContactHandle(did), [client]);
+  const manageUrl = (0, import_react10.useCallback)(() => client.shares.manageUrl(), [client]);
   return {
-    data: outgoingShares,
-    outgoingShares,
-    ...state,
+    ...result,
+    error: result.error ?? gate,
     create,
     get,
     cancel,
@@ -1013,58 +1015,35 @@ function useOutgoingShares() {
 }
 
 // src/hooks/query.ts
-var import_react10 = require("react");
-var subscribeNever = () => () => {
-};
-var zero2 = () => 0;
+var import_react11 = require("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 = (0, import_react10.useMemo)(
-    () => 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 = (0, import_react10.useSyncExternalStore)(
-    subscription?.subscribe ?? subscribeNever,
-    subscription?.getSnapshot ?? zero2,
-    zero2
-  );
-  const [result, setResult] = (0, import_react10.useState)({
+  const [result, setResult] = (0, import_react11.useState)({
     data: [],
     isLoading: true,
     error: null
   });
-  (0, import_react10.useEffect)(() => {
-    let active = true;
-    if (!snapshot.isReady) {
-      setResult((current) => ({ ...current, isLoading: true, error: null }));
-      return () => {
-        active = false;
-      };
-    }
+  (0, import_react11.useEffect)(() => {
     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 = {}) {
@@ -1081,25 +1060,31 @@ function createBasic(config) {
   function Provider({ children, renderWhileLoading }) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BasicProvider, { client, renderWhileLoading, children });
   }
+  function useBound() {
+    if ((0, import_react12.useContext)(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())
   };
 }
 // Annotate the CommonJS export names for ESM import in node: