@korajs/react 1.0.0-beta.11 → 1.0.0-beta.13

package/dist/index.js

@@ -96,11 +96,36 @@ function useKoraContext() {
 
 // src/context/auth-bound-kora-provider.ts
 import { createElement as createElement2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var SENSITIVE_METADATA_KEY = /token|secret|password|authorization|cookie/i;
+function classifyKoraInitializationError(error) {
+  const candidate = error;
+  const message = typeof candidate?.message === "string" ? candidate.message : String(error);
+  const name = typeof candidate?.name === "string" ? candidate.name : "Error";
+  const cause = new Error(message);
+  cause.name = name;
+  if (typeof candidate?.stack === "string") cause.stack = candidate.stack;
+  let code = typeof candidate?.code === "string" ? candidate.code : "INITIALIZATION_FAILED";
+  if (code === "INITIALIZATION_FAILED" && cause.name === "QuotaExceededError") {
+    code = "STORAGE_QUOTA_EXCEEDED";
+  }
+  const metadata = {};
+  if (candidate?.context && typeof candidate.context === "object") {
+    for (const [key, value] of Object.entries(candidate.context)) {
+      if (SENSITIVE_METADATA_KEY.test(key)) continue;
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null) {
+        metadata[key] = value;
+      }
+    }
+  }
+  return { code, name: cause.name, message: cause.message, metadata, cause };
+}
 function AuthBoundKoraProvider({
   authClient,
   createApp,
   signedOut = null,
+  locked,
   fallback = null,
+  error: renderError,
   children
 }) {
   const [app, setApp] = useState2(null);
@@ -112,6 +137,8 @@ function AuthBoundKoraProvider({
   const activeUserId = useRef2(null);
   const generation = useRef2(0);
   const transition = useRef2(Promise.resolve());
+  const reconcileRef = useRef2(() => {
+  });
   useEffect2(() => {
     let disposed = false;
     const reconcile = () => {
@@ -149,10 +176,18 @@ function AuthBoundKoraProvider({
         setApp(created);
       }).catch((error) => {
         if (!disposed && currentGeneration === generation.current) {
-          setInitError(error instanceof Error ? error : new Error(String(error)));
+          void authClient.resolveSyncState?.().then((failedSession) => {
+            if (!disposed && currentGeneration === generation.current && failedSession?.state === "authenticated") {
+              setInitError({
+                error: classifyKoraInitializationError(error),
+                session: { userId: failedSession.userId }
+              });
+            }
+          });
         }
       });
     };
+    reconcileRef.current = reconcile;
     reconcile();
     const unsubscribe = authClient.subscribe?.(reconcile) ?? (() => {
     });
@@ -167,14 +202,22 @@ function AuthBoundKoraProvider({
     };
   }, [authClient]);
   if (initError) {
+    if (renderError) {
+      return renderError({
+        error: initError.error,
+        session: initError.session,
+        retry: () => reconcileRef.current()
+      });
+    }
     return createElement2(
       "div",
       { style: { color: "red", padding: "1rem", fontFamily: "monospace" } },
       createElement2("strong", null, "Kora initialization error: "),
-      initError.message
+      initError.error.message
     );
   }
   if (state.state === "signed-out" || state.state === "anonymous") return signedOut;
+  if (state.state === "authenticated" && state.locked) return locked ?? signedOut;
   if (!app) return fallback;
   return createElement2(KoraProvider, { app, fallback }, children);
 }
@@ -191,17 +234,24 @@ function useApp() {
 }
 
 // src/hooks/use-query.ts
-import { assertQueryReady } from "@korajs/store";
-import { useCallback, useEffect as useEffect3, useRef as useRef3, useState as useState3, useSyncExternalStore } from "react";
+import { assertQueryReady, queryKey } from "@korajs/store";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3, useSyncExternalStore } from "react";
 var EMPTY_ARRAY = Object.freeze([]);
 var noopSubscribe = (_onStoreChange) => {
   return () => {
   };
 };
-function useQuery(query, options) {
+var getServerSnapshot = () => EMPTY_ARRAY;
+var getNoError = () => null;
+function readQueryError(queryStore) {
+  if (!queryStore) return null;
+  const channel = queryStore;
+  return typeof channel.getError === "function" ? channel.getError() : null;
+}
+function useQuerySubscription(query, options) {
   const { queryStoreCache } = useKoraContext();
   const enabled = options?.enabled !== false;
-  const descriptorKey = JSON.stringify(query.getDescriptor());
+  const descriptorKey = queryKey(query.getDescriptor());
   const queryRef = useRef3(query);
   queryRef.current = query;
   const lastSnapshotRef = useRef3(EMPTY_ARRAY);
@@ -219,122 +269,204 @@ function useQuery(query, options) {
       queryStoreCache.release(currentQuery);
     };
   }, [descriptorKey, enabled, queryStoreCache]);
+  const subscribe = enabled && queryStore ? queryStore.subscribe : noopSubscribe;
   const getSnapshot = useCallback(() => {
     if (!enabled) {
       lastSnapshotRef.current = EMPTY_ARRAY;
       return lastSnapshotRef.current;
     }
-    if (!queryStore) {
-      return lastSnapshotRef.current;
-    }
-    if (!queryStore.hasSnapshot()) {
+    if (!queryStore || !queryStore.hasSnapshot()) {
       return lastSnapshotRef.current;
     }
     const snapshot = queryStore.getSnapshot();
     lastSnapshotRef.current = snapshot;
     return snapshot;
   }, [enabled, queryStore]);
-  return useSyncExternalStore(queryStore ? queryStore.subscribe : noopSubscribe, getSnapshot);
+  const getError = useCallback(
+    () => enabled ? readQueryError(queryStore) : null,
+    [enabled, queryStore]
+  );
+  const data = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const error = useSyncExternalStore(subscribe, getError, getNoError);
+  const ready = enabled && queryStore !== null && queryStore.hasSnapshot();
+  return { data, error, ready };
+}
+function useQuery(query, options) {
+  const { data, error } = useQuerySubscription(query, options);
+  if (error && options?.throwOnError !== false) {
+    throw error;
+  }
+  return data;
+}
+function useQueryState(query, options) {
+  const { data, error, ready } = useQuerySubscription(query, options);
+  return useMemo2(() => ({ data, error, ready }), [data, error, ready]);
 }
 
+// src/hooks/create-kora-hooks.ts
+import { useMemo as useMemo4 } from "react";
+
 // src/hooks/use-mutation.ts
 import { createMutationController } from "@korajs/core/bindings";
-import { useRef as useRef5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef5, useSyncExternalStore as useSyncExternalStore2 } from "react";
 
 // src/hooks/use-controller.ts
 import { useEffect as useEffect4, useReducer, useRef as useRef4 } from "react";
+var ORPHAN_REAP_MS = 1e3;
 function useController(create, destroy, deps) {
-  const controllerRef = useRef4(null);
+  const entryRef = useRef4(null);
   const createRef = useRef4(create);
   createRef.current = create;
-  const [, forceRender] = useReducer((count) => count + 1, 0);
-  const getController = useRef4(() => {
-    if (controllerRef.current === null) {
-      controllerRef.current = createRef.current();
+  const destroyRef = useRef4(destroy);
+  destroyRef.current = destroy;
+  const [version, bumpVersion] = useReducer((count) => count + 1, 0);
+  const handle = useRef4({
+    get: () => {
+      const current = entryRef.current;
+      if (current !== null && !current.reaped) {
+        return current.controller;
+      }
+      const entry = {
+        controller: createRef.current(),
+        claimed: false,
+        reaped: false
+      };
+      entryRef.current = entry;
+      setTimeout(() => {
+        if (!entry.claimed && !entry.reaped) {
+          entry.reaped = true;
+          destroyRef.current(entry.controller);
+        }
+      }, ORPHAN_REAP_MS);
+      return entry.controller;
+    },
+    peek: () => {
+      const current = entryRef.current;
+      return current?.claimed && !current.reaped ? current.controller : null;
     }
-    return controllerRef.current;
   }).current;
   useEffect4(() => {
-    if (controllerRef.current === null) {
-      controllerRef.current = createRef.current();
-      forceRender();
+    const current = entryRef.current;
+    if (current !== null && !current.reaped && !current.claimed) {
+      current.claimed = true;
+    } else if (current === null || current.reaped) {
+      entryRef.current = { controller: createRef.current(), claimed: true, reaped: false };
+      bumpVersion();
     }
     return () => {
-      const controller = controllerRef.current;
-      controllerRef.current = null;
-      if (controller !== null) {
-        destroy(controller);
+      const entry = entryRef.current;
+      entryRef.current = null;
+      if (entry !== null && !entry.reaped) {
+        entry.reaped = true;
+        destroyRef.current(entry.controller);
       }
     };
   }, deps);
-  return getController;
+  return { get: handle.get, peek: handle.peek, version };
 }
 
 // src/hooks/use-mutation.ts
+var IDLE = Object.freeze({ isLoading: false, error: null });
+var getServerSnapshot2 = () => IDLE;
 function useMutation(mutationFn, options) {
   const fnRef = useRef5(mutationFn);
   fnRef.current = mutationFn;
   const optionsRef = useRef5(options);
   optionsRef.current = options;
-  const getController = useController(
+  const controller = useController(
     () => createMutationController({
       mutationFn: (...args) => fnRef.current(...args),
       resolveOptions: () => optionsRef.current
     }),
-    (controller) => controller.destroy(),
+    (instance) => instance.destroy(),
     []
   );
-  const state = useSyncExternalStore2(
+  const getController = controller.get;
+  const subscribe = useCallback2(
     (onStoreChange) => getController().subscribe(onStoreChange),
-    () => getController().getSnapshot(),
-    () => getController().getSnapshot()
+    [getController, controller.version]
+  );
+  const getSnapshot = useCallback2(() => getController().getSnapshot(), [getController]);
+  const state = useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot2);
+  const mutate = useCallback2((...args) => getController().mutate(...args), [getController]);
+  const mutateAsync = useCallback2(
+    (...args) => getController().mutateAsync(...args),
+    [getController]
+  );
+  const reset = useCallback2(() => getController().reset(), [getController]);
+  return useMemo3(
+    () => ({ mutate, mutateAsync, isLoading: state.isLoading, error: state.error, reset }),
+    [mutate, mutateAsync, reset, state.isLoading, state.error]
   );
-  return {
-    mutate: (...args) => getController().mutate(...args),
-    mutateAsync: (...args) => getController().mutateAsync(...args),
-    isLoading: state.isLoading,
-    error: state.error,
-    reset: () => getController().reset()
-  };
 }
 
 // src/hooks/use-sync-status.ts
-import { createSyncStatusController } from "@korajs/sync";
-import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { OFFLINE_SYNC_STATUS, createSyncStatusController } from "@korajs/sync";
+import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore3 } from "react";
+var getServerSnapshot3 = () => OFFLINE_SYNC_STATUS;
 function useSyncStatus() {
   const { syncEngine, subscribeSyncStatus, events } = useKoraContext();
-  const getController = useController(
+  const controller = useController(
     () => createSyncStatusController({
       syncEngine,
       subscribeSyncStatus,
       events: subscribeSyncStatus ? null : events
     }),
-    (controller) => controller.destroy(),
+    (instance) => instance.destroy(),
     [syncEngine, subscribeSyncStatus, events]
   );
-  return useSyncExternalStore3(
+  const getController = controller.get;
+  const subscribe = useCallback3(
     (onStoreChange) => getController().subscribe(onStoreChange),
-    () => getController().getSnapshot(),
-    () => getController().getSnapshot()
+    [getController, controller.version]
+  );
+  const peek = controller.peek;
+  const getSnapshot = useCallback3(
+    () => peek()?.getSnapshot() ?? OFFLINE_SYNC_STATUS,
+    [peek]
   );
+  return useSyncExternalStore3(subscribe, getSnapshot, getServerSnapshot3);
+}
+
+// src/hooks/create-kora-hooks.ts
+function createKoraHooks() {
+  function useTypedApp() {
+    return useApp();
+  }
+  function useTypedCollection(name) {
+    const { app, store } = useKoraContext();
+    return useMemo4(() => {
+      const collections = app?.collections;
+      const accessor = collections && name in collections ? collections[name] : store.collection(name);
+      return accessor;
+    }, [app, store, name]);
+  }
+  return {
+    useApp: useTypedApp,
+    useCollection: useTypedCollection,
+    useQuery,
+    useQueryState,
+    useMutation,
+    useSyncStatus
+  };
 }
 
 // src/hooks/use-collection.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo5 } from "react";
 function useCollection(name) {
   const { store } = useKoraContext();
-  return useMemo2(() => {
+  return useMemo5(() => {
     return store.collection(name);
   }, [store, name]);
 }
 
 // src/hooks/use-rich-text.ts
 import { asRichTextSyncEngine, createRichTextController } from "@korajs/store";
-import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore4 } from "react";
 function useRichText(collectionName, recordId, fieldName, options) {
   const { store, syncEngine } = useKoraContext();
-  const collection = useMemo3(() => store.collection(collectionName), [store, collectionName]);
-  const getController = useController(
+  const collection = useMemo6(() => store.collection(collectionName), [store, collectionName]);
+  const controller = useController(
     () => createRichTextController({
       collection,
       collectionName,
@@ -345,29 +477,35 @@ function useRichText(collectionName, recordId, fieldName, options) {
       useDocChannel: options?.useDocChannel,
       user: options?.user
     }),
-    (controller) => controller.destroy(),
+    (instance) => instance.destroy(),
     [collection, collectionName, fieldName, options?.useDocChannel, recordId, store, syncEngine]
   );
+  const getController = controller.get;
   useEffect5(() => {
     getController().setUser(options?.user);
-  }, [getController, options?.user]);
-  const snapshot = useSyncExternalStore4(
+  }, [getController, options?.user, controller.version]);
+  const subscribe = useCallback4(
     (onStoreChange) => getController().subscribe(onStoreChange),
-    () => getController().getSnapshot(),
-    () => getController().getSnapshot()
+    [getController, controller.version]
   );
-  const undo = useCallback2(() => {
+  const getSnapshot = useCallback4(() => getController().getSnapshot(), [getController]);
+  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
+  const undo = useCallback4(() => {
     getController().undo();
   }, [getController]);
-  const redo = useCallback2(() => {
+  const redo = useCallback4(() => {
     getController().redo();
   }, [getController]);
-  const setCursor = useCallback2(
+  const setCursor = useCallback4(
     (anchor, head) => getController().setCursor(anchor, head),
     [getController]
   );
-  const clearCursor = useCallback2(() => getController().clearCursor(), [getController]);
-  return buildResult(getController(), snapshot, undo, redo, setCursor, clearCursor);
+  const clearCursor = useCallback4(() => getController().clearCursor(), [getController]);
+  const live = getController();
+  return useMemo6(
+    () => buildResult(live, snapshot, undo, redo, setCursor, clearCursor),
+    [live, snapshot, undo, redo, setCursor, clearCursor, controller.version]
+  );
 }
 function buildResult(controller, snapshot, undo, redo, setCursor, clearCursor) {
   return {
@@ -406,12 +544,13 @@ function usePresence(user) {
 
 // src/hooks/use-collaborators.ts
 import { subscribeRemoteAwarenessStates } from "@korajs/sync";
-import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
 var EMPTY_ARRAY2 = [];
+var getServerSnapshot4 = () => EMPTY_ARRAY2;
 function useCollaborators() {
   const { syncEngine } = useKoraContext();
   const snapshotRef = useRef6(EMPTY_ARRAY2);
-  const subscribe = useCallback3(
+  const subscribe = useCallback5(
     (onStoreChange) => {
       if (!syncEngine) {
         snapshotRef.current = EMPTY_ARRAY2;
@@ -419,6 +558,7 @@ function useCollaborators() {
         };
       }
       const awareness = syncEngine.getAwarenessManager();
+      snapshotRef.current = EMPTY_ARRAY2;
       return subscribeRemoteAwarenessStates(awareness, (states) => {
         snapshotRef.current = states;
         onStoreChange();
@@ -426,23 +566,26 @@ function useCollaborators() {
     },
     [syncEngine]
   );
-  const getSnapshot = useCallback3(() => snapshotRef.current, []);
+  const getSnapshot = useCallback5(() => snapshotRef.current, []);
   useEffect7(() => {
     if (!syncEngine) {
       snapshotRef.current = EMPTY_ARRAY2;
     }
   }, [syncEngine]);
-  return useSyncExternalStore5(subscribe, getSnapshot);
+  return useSyncExternalStore5(subscribe, getSnapshot, getServerSnapshot4);
 }
 export {
   AuthBoundKoraProvider,
   KoraProvider,
+  classifyKoraInitializationError,
+  createKoraHooks,
   useApp,
   useCollaborators,
   useCollection,
   useMutation,
   usePresence,
   useQuery,
+  useQueryState,
   useRichText,
   useSyncStatus
 };