@korajs/react 0.0.0-canary-20261008174129

package/dist/index.js

@@ -0,0 +1,595 @@
+// src/context/kora-context.ts
+import { QueryStoreCache } from "@korajs/store";
+import {
+  createContext,
+  createElement,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+var KoraContext = createContext(null);
+function KoraProvider({
+  app,
+  store,
+  syncEngine,
+  fallback,
+  children
+}) {
+  const [resolvedStore, setResolvedStore] = useState(store ?? null);
+  const [resolvedSync, setResolvedSync] = useState(syncEngine ?? null);
+  const [ready, setReady] = useState(!app);
+  const [initError, setInitError] = useState(null);
+  const fallbackQueryStoreCache = useRef(null);
+  if (!fallbackQueryStoreCache.current) {
+    fallbackQueryStoreCache.current = new QueryStoreCache();
+  }
+  useEffect(() => {
+    if (!app) return;
+    let cancelled = false;
+    app.ready.then(() => {
+      if (cancelled) return;
+      setResolvedStore(app.getStore());
+      setResolvedSync(app.getSyncEngine());
+      setReady(true);
+    }).catch((error) => {
+      if (cancelled) return;
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error("[Kora] Initialization failed:", err);
+      setInitError(err);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [app]);
+  useEffect(() => {
+    return () => {
+      if (!app) {
+        fallbackQueryStoreCache.current?.clear();
+      }
+    };
+  }, [app]);
+  const contextValue = useMemo(() => {
+    if (!resolvedStore) {
+      return null;
+    }
+    if (fallbackQueryStoreCache.current === null) {
+      fallbackQueryStoreCache.current = new QueryStoreCache();
+    }
+    return {
+      store: resolvedStore,
+      syncEngine: resolvedSync,
+      app: app ?? null,
+      events: app?.events ?? null,
+      subscribeSyncStatus: app?.sync?.subscribeStatus ?? null,
+      queryStoreCache: app && typeof app.getQueryStoreCache === "function" ? app.getQueryStoreCache() : fallbackQueryStoreCache.current
+    };
+  }, [resolvedStore, resolvedSync, app]);
+  if (initError) {
+    return createElement(
+      "div",
+      { style: { color: "red", padding: "1rem", fontFamily: "monospace" } },
+      createElement("strong", null, "Kora initialization error: "),
+      initError.message
+    );
+  }
+  if (!ready) {
+    return fallback ?? null;
+  }
+  if (!contextValue) {
+    throw new Error(
+      'KoraProvider requires either an "app" or "store" prop. Pass a KoraApp from createApp() or a Store instance.'
+    );
+  }
+  return createElement(KoraContext.Provider, { value: contextValue }, children);
+}
+function useKoraContext() {
+  const context = useContext(KoraContext);
+  if (context === null) {
+    throw new Error(
+      "useKoraContext must be used within a <KoraProvider>. Wrap your component tree with <KoraProvider store={store}>."
+    );
+  }
+  return context;
+}
+
+// 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);
+  const [state, setState] = useState2({ state: "loading" });
+  const [initError, setInitError] = useState2(null);
+  const active = useRef2(null);
+  const createAppRef = useRef2(createApp);
+  createAppRef.current = createApp;
+  const activeUserId = useRef2(null);
+  const generation = useRef2(0);
+  const transition = useRef2(Promise.resolve());
+  const reconcileRef = useRef2(() => {
+  });
+  useEffect2(() => {
+    let disposed = false;
+    const reconcile = () => {
+      const currentGeneration = ++generation.current;
+      transition.current = transition.current.catch(() => {
+      }).then(async () => {
+        setInitError(null);
+        const next = await authClient.resolveSyncState?.() ?? { state: "signed-out", mayConnectAnonymously: false };
+        if (disposed || currentGeneration !== generation.current) return;
+        const previous = active.current;
+        if (next.state === "authenticated" && next.userId === activeUserId.current && previous) {
+          setState(next);
+          return;
+        }
+        setApp(null);
+        active.current = null;
+        activeUserId.current = null;
+        if (previous) await previous.close();
+        if (disposed || currentGeneration !== generation.current) return;
+        setState(next);
+        if (next.state !== "authenticated") return;
+        const created = createAppRef.current(next);
+        try {
+          await created.ready;
+        } catch (error) {
+          await created.close();
+          throw error;
+        }
+        if (disposed || currentGeneration !== generation.current) {
+          await created.close();
+          return;
+        }
+        active.current = created;
+        activeUserId.current = next.userId;
+        setApp(created);
+      }).catch((error) => {
+        if (!disposed && currentGeneration === generation.current) {
+          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) ?? (() => {
+    });
+    return () => {
+      disposed = true;
+      generation.current++;
+      unsubscribe();
+      const previous = active.current;
+      active.current = null;
+      activeUserId.current = null;
+      if (previous) void previous.close();
+    };
+  }, [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.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);
+}
+
+// src/hooks/use-app.ts
+function useApp() {
+  const { app } = useKoraContext();
+  if (!app) {
+    throw new Error(
+      'useApp() requires KoraProvider to be initialized with an "app" prop. Pass your createApp() result to <KoraProvider app={app}>.'
+    );
+  }
+  return app;
+}
+
+// src/hooks/use-query.ts
+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 () => {
+  };
+};
+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 = queryKey(query.getDescriptor());
+  const queryRef = useRef3(query);
+  queryRef.current = query;
+  const lastSnapshotRef = useRef3(EMPTY_ARRAY);
+  const [queryStore, setQueryStore] = useState3(null);
+  useEffect3(() => {
+    if (!enabled) {
+      setQueryStore(null);
+      return;
+    }
+    const currentQuery = queryRef.current;
+    assertQueryReady(currentQuery);
+    const store = queryStoreCache.getOrCreate(currentQuery);
+    setQueryStore(store);
+    return () => {
+      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 || !queryStore.hasSnapshot()) {
+      return lastSnapshotRef.current;
+    }
+    const snapshot = queryStore.getSnapshot();
+    lastSnapshotRef.current = snapshot;
+    return snapshot;
+  }, [enabled, queryStore]);
+  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 { 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 entryRef = useRef4(null);
+  const createRef = useRef4(create);
+  createRef.current = create;
+  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;
+    }
+  }).current;
+  useEffect4(() => {
+    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 entry = entryRef.current;
+      entryRef.current = null;
+      if (entry !== null && !entry.reaped) {
+        entry.reaped = true;
+        destroyRef.current(entry.controller);
+      }
+    };
+  }, deps);
+  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 controller = useController(
+    () => createMutationController({
+      mutationFn: (...args) => fnRef.current(...args),
+      resolveOptions: () => optionsRef.current
+    }),
+    (instance) => instance.destroy(),
+    []
+  );
+  const getController = controller.get;
+  const subscribe = useCallback2(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    [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]
+  );
+}
+
+// src/hooks/use-sync-status.ts
+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 controller = useController(
+    () => createSyncStatusController({
+      syncEngine,
+      subscribeSyncStatus,
+      events: subscribeSyncStatus ? null : events
+    }),
+    (instance) => instance.destroy(),
+    [syncEngine, subscribeSyncStatus, events]
+  );
+  const getController = controller.get;
+  const subscribe = useCallback3(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    [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 useMemo5 } from "react";
+function useCollection(name) {
+  const { store } = useKoraContext();
+  return useMemo5(() => {
+    return store.collection(name);
+  }, [store, name]);
+}
+
+// src/hooks/use-rich-text.ts
+import { asRichTextSyncEngine, createRichTextController } from "@korajs/store";
+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 = useMemo6(() => store.collection(collectionName), [store, collectionName]);
+  const controller = useController(
+    () => createRichTextController({
+      collection,
+      collectionName,
+      recordId,
+      fieldName,
+      store,
+      syncEngine: asRichTextSyncEngine(syncEngine),
+      useDocChannel: options?.useDocChannel,
+      user: options?.user
+    }),
+    (instance) => instance.destroy(),
+    [collection, collectionName, fieldName, options?.useDocChannel, recordId, store, syncEngine]
+  );
+  const getController = controller.get;
+  useEffect5(() => {
+    getController().setUser(options?.user);
+  }, [getController, options?.user, controller.version]);
+  const subscribe = useCallback4(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    [getController, controller.version]
+  );
+  const getSnapshot = useCallback4(() => getController().getSnapshot(), [getController]);
+  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
+  const undo = useCallback4(() => {
+    getController().undo();
+  }, [getController]);
+  const redo = useCallback4(() => {
+    getController().redo();
+  }, [getController]);
+  const setCursor = useCallback4(
+    (anchor, head) => getController().setCursor(anchor, head),
+    [getController]
+  );
+  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 {
+    doc: controller.doc,
+    text: controller.text,
+    undo,
+    redo,
+    canUndo: snapshot.canUndo,
+    canRedo: snapshot.canRedo,
+    ready: snapshot.ready,
+    error: snapshot.error,
+    cursors: [...snapshot.cursors],
+    setCursor,
+    clearCursor,
+    hasUnsavedChanges: snapshot.hasUnsavedChanges,
+    retrySave: () => controller.retrySave(),
+    getUnsavedState: () => controller.getUnsavedState()
+  };
+}
+
+// src/hooks/use-presence.ts
+import { useEffect as useEffect6 } from "react";
+function usePresence(user) {
+  const { syncEngine } = useKoraContext();
+  const name = user?.name ?? null;
+  const color = user?.color ?? null;
+  const avatar = user?.avatar ?? null;
+  useEffect6(() => {
+    if (!syncEngine || !name || !color) return;
+    const awareness = syncEngine.getAwarenessManager();
+    awareness.setLocalState({
+      user: { name, color, avatar: avatar ?? void 0 }
+    });
+    return () => {
+      awareness.setLocalState(null);
+    };
+  }, [syncEngine, name, color, avatar]);
+}
+
+// src/hooks/use-collaborators.ts
+import { subscribeRemoteAwarenessStates } from "@korajs/sync";
+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 = useCallback5(
+    (onStoreChange) => {
+      if (!syncEngine) {
+        snapshotRef.current = EMPTY_ARRAY2;
+        return () => {
+        };
+      }
+      const awareness = syncEngine.getAwarenessManager();
+      snapshotRef.current = EMPTY_ARRAY2;
+      return subscribeRemoteAwarenessStates(awareness, (states) => {
+        snapshotRef.current = states;
+        onStoreChange();
+      });
+    },
+    [syncEngine]
+  );
+  const getSnapshot = useCallback5(() => snapshotRef.current, []);
+  useEffect7(() => {
+    if (!syncEngine) {
+      snapshotRef.current = EMPTY_ARRAY2;
+    }
+  }, [syncEngine]);
+  return useSyncExternalStore5(subscribe, getSnapshot, getServerSnapshot4);
+}
+export {
+  AuthBoundKoraProvider,
+  KoraProvider,
+  classifyKoraInitializationError,
+  createKoraHooks,
+  useApp,
+  useCollaborators,
+  useCollection,
+  useMutation,
+  usePresence,
+  useQuery,
+  useQueryState,
+  useRichText,
+  useSyncStatus
+};
+//# sourceMappingURL=index.js.map