@korajs/react 0.0.0-canary-20261008174129

package/dist/index.cjs

@@ -0,0 +1,626 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuthBoundKoraProvider: () => AuthBoundKoraProvider,
+  KoraProvider: () => KoraProvider,
+  classifyKoraInitializationError: () => classifyKoraInitializationError,
+  createKoraHooks: () => createKoraHooks,
+  useApp: () => useApp,
+  useCollaborators: () => useCollaborators,
+  useCollection: () => useCollection,
+  useMutation: () => useMutation,
+  usePresence: () => usePresence,
+  useQuery: () => useQuery,
+  useQueryState: () => useQueryState,
+  useRichText: () => useRichText,
+  useSyncStatus: () => useSyncStatus
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context/kora-context.ts
+var import_store = require("@korajs/store");
+var import_react = require("react");
+var KoraContext = (0, import_react.createContext)(null);
+function KoraProvider({
+  app,
+  store,
+  syncEngine,
+  fallback,
+  children
+}) {
+  const [resolvedStore, setResolvedStore] = (0, import_react.useState)(store ?? null);
+  const [resolvedSync, setResolvedSync] = (0, import_react.useState)(syncEngine ?? null);
+  const [ready, setReady] = (0, import_react.useState)(!app);
+  const [initError, setInitError] = (0, import_react.useState)(null);
+  const fallbackQueryStoreCache = (0, import_react.useRef)(null);
+  if (!fallbackQueryStoreCache.current) {
+    fallbackQueryStoreCache.current = new import_store.QueryStoreCache();
+  }
+  (0, import_react.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]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (!app) {
+        fallbackQueryStoreCache.current?.clear();
+      }
+    };
+  }, [app]);
+  const contextValue = (0, import_react.useMemo)(() => {
+    if (!resolvedStore) {
+      return null;
+    }
+    if (fallbackQueryStoreCache.current === null) {
+      fallbackQueryStoreCache.current = new import_store.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 (0, import_react.createElement)(
+      "div",
+      { style: { color: "red", padding: "1rem", fontFamily: "monospace" } },
+      (0, import_react.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 (0, import_react.createElement)(KoraContext.Provider, { value: contextValue }, children);
+}
+function useKoraContext() {
+  const context = (0, import_react.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
+var import_react2 = require("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] = (0, import_react2.useState)(null);
+  const [state, setState] = (0, import_react2.useState)({ state: "loading" });
+  const [initError, setInitError] = (0, import_react2.useState)(null);
+  const active = (0, import_react2.useRef)(null);
+  const createAppRef = (0, import_react2.useRef)(createApp);
+  createAppRef.current = createApp;
+  const activeUserId = (0, import_react2.useRef)(null);
+  const generation = (0, import_react2.useRef)(0);
+  const transition = (0, import_react2.useRef)(Promise.resolve());
+  const reconcileRef = (0, import_react2.useRef)(() => {
+  });
+  (0, import_react2.useEffect)(() => {
+    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 (0, import_react2.createElement)(
+      "div",
+      { style: { color: "red", padding: "1rem", fontFamily: "monospace" } },
+      (0, import_react2.createElement)("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 (0, import_react2.createElement)(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
+var import_store2 = require("@korajs/store");
+var import_react3 = require("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 = (0, import_store2.queryKey)(query.getDescriptor());
+  const queryRef = (0, import_react3.useRef)(query);
+  queryRef.current = query;
+  const lastSnapshotRef = (0, import_react3.useRef)(EMPTY_ARRAY);
+  const [queryStore, setQueryStore] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) {
+      setQueryStore(null);
+      return;
+    }
+    const currentQuery = queryRef.current;
+    (0, import_store2.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 = (0, import_react3.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 = (0, import_react3.useCallback)(
+    () => enabled ? readQueryError(queryStore) : null,
+    [enabled, queryStore]
+  );
+  const data = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+  const error = (0, import_react3.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 (0, import_react3.useMemo)(() => ({ data, error, ready }), [data, error, ready]);
+}
+
+// src/hooks/create-kora-hooks.ts
+var import_react7 = require("react");
+
+// src/hooks/use-mutation.ts
+var import_bindings = require("@korajs/core/bindings");
+var import_react5 = require("react");
+
+// src/hooks/use-controller.ts
+var import_react4 = require("react");
+var ORPHAN_REAP_MS = 1e3;
+function useController(create, destroy, deps) {
+  const entryRef = (0, import_react4.useRef)(null);
+  const createRef = (0, import_react4.useRef)(create);
+  createRef.current = create;
+  const destroyRef = (0, import_react4.useRef)(destroy);
+  destroyRef.current = destroy;
+  const [version, bumpVersion] = (0, import_react4.useReducer)((count) => count + 1, 0);
+  const handle = (0, import_react4.useRef)({
+    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;
+  (0, import_react4.useEffect)(() => {
+    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 = (0, import_react5.useRef)(mutationFn);
+  fnRef.current = mutationFn;
+  const optionsRef = (0, import_react5.useRef)(options);
+  optionsRef.current = options;
+  const controller = useController(
+    () => (0, import_bindings.createMutationController)({
+      mutationFn: (...args) => fnRef.current(...args),
+      resolveOptions: () => optionsRef.current
+    }),
+    (instance) => instance.destroy(),
+    []
+  );
+  const getController = controller.get;
+  const subscribe = (0, import_react5.useCallback)(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    [getController, controller.version]
+  );
+  const getSnapshot = (0, import_react5.useCallback)(() => getController().getSnapshot(), [getController]);
+  const state = (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot2);
+  const mutate = (0, import_react5.useCallback)((...args) => getController().mutate(...args), [getController]);
+  const mutateAsync = (0, import_react5.useCallback)(
+    (...args) => getController().mutateAsync(...args),
+    [getController]
+  );
+  const reset = (0, import_react5.useCallback)(() => getController().reset(), [getController]);
+  return (0, import_react5.useMemo)(
+    () => ({ mutate, mutateAsync, isLoading: state.isLoading, error: state.error, reset }),
+    [mutate, mutateAsync, reset, state.isLoading, state.error]
+  );
+}
+
+// src/hooks/use-sync-status.ts
+var import_sync = require("@korajs/sync");
+var import_react6 = require("react");
+var getServerSnapshot3 = () => import_sync.OFFLINE_SYNC_STATUS;
+function useSyncStatus() {
+  const { syncEngine, subscribeSyncStatus, events } = useKoraContext();
+  const controller = useController(
+    () => (0, import_sync.createSyncStatusController)({
+      syncEngine,
+      subscribeSyncStatus,
+      events: subscribeSyncStatus ? null : events
+    }),
+    (instance) => instance.destroy(),
+    [syncEngine, subscribeSyncStatus, events]
+  );
+  const getController = controller.get;
+  const subscribe = (0, import_react6.useCallback)(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    [getController, controller.version]
+  );
+  const peek = controller.peek;
+  const getSnapshot = (0, import_react6.useCallback)(
+    () => peek()?.getSnapshot() ?? import_sync.OFFLINE_SYNC_STATUS,
+    [peek]
+  );
+  return (0, import_react6.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot3);
+}
+
+// src/hooks/create-kora-hooks.ts
+function createKoraHooks() {
+  function useTypedApp() {
+    return useApp();
+  }
+  function useTypedCollection(name) {
+    const { app, store } = useKoraContext();
+    return (0, import_react7.useMemo)(() => {
+      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
+var import_react8 = require("react");
+function useCollection(name) {
+  const { store } = useKoraContext();
+  return (0, import_react8.useMemo)(() => {
+    return store.collection(name);
+  }, [store, name]);
+}
+
+// src/hooks/use-rich-text.ts
+var import_store3 = require("@korajs/store");
+var import_react9 = require("react");
+function useRichText(collectionName, recordId, fieldName, options) {
+  const { store, syncEngine } = useKoraContext();
+  const collection = (0, import_react9.useMemo)(() => store.collection(collectionName), [store, collectionName]);
+  const controller = useController(
+    () => (0, import_store3.createRichTextController)({
+      collection,
+      collectionName,
+      recordId,
+      fieldName,
+      store,
+      syncEngine: (0, import_store3.asRichTextSyncEngine)(syncEngine),
+      useDocChannel: options?.useDocChannel,
+      user: options?.user
+    }),
+    (instance) => instance.destroy(),
+    [collection, collectionName, fieldName, options?.useDocChannel, recordId, store, syncEngine]
+  );
+  const getController = controller.get;
+  (0, import_react9.useEffect)(() => {
+    getController().setUser(options?.user);
+  }, [getController, options?.user, controller.version]);
+  const subscribe = (0, import_react9.useCallback)(
+    (onStoreChange) => getController().subscribe(onStoreChange),
+    [getController, controller.version]
+  );
+  const getSnapshot = (0, import_react9.useCallback)(() => getController().getSnapshot(), [getController]);
+  const snapshot = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const undo = (0, import_react9.useCallback)(() => {
+    getController().undo();
+  }, [getController]);
+  const redo = (0, import_react9.useCallback)(() => {
+    getController().redo();
+  }, [getController]);
+  const setCursor = (0, import_react9.useCallback)(
+    (anchor, head) => getController().setCursor(anchor, head),
+    [getController]
+  );
+  const clearCursor = (0, import_react9.useCallback)(() => getController().clearCursor(), [getController]);
+  const live = getController();
+  return (0, import_react9.useMemo)(
+    () => 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
+var import_react10 = require("react");
+function usePresence(user) {
+  const { syncEngine } = useKoraContext();
+  const name = user?.name ?? null;
+  const color = user?.color ?? null;
+  const avatar = user?.avatar ?? null;
+  (0, import_react10.useEffect)(() => {
+    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
+var import_sync2 = require("@korajs/sync");
+var import_react11 = require("react");
+var EMPTY_ARRAY2 = [];
+var getServerSnapshot4 = () => EMPTY_ARRAY2;
+function useCollaborators() {
+  const { syncEngine } = useKoraContext();
+  const snapshotRef = (0, import_react11.useRef)(EMPTY_ARRAY2);
+  const subscribe = (0, import_react11.useCallback)(
+    (onStoreChange) => {
+      if (!syncEngine) {
+        snapshotRef.current = EMPTY_ARRAY2;
+        return () => {
+        };
+      }
+      const awareness = syncEngine.getAwarenessManager();
+      snapshotRef.current = EMPTY_ARRAY2;
+      return (0, import_sync2.subscribeRemoteAwarenessStates)(awareness, (states) => {
+        snapshotRef.current = states;
+        onStoreChange();
+      });
+    },
+    [syncEngine]
+  );
+  const getSnapshot = (0, import_react11.useCallback)(() => snapshotRef.current, []);
+  (0, import_react11.useEffect)(() => {
+    if (!syncEngine) {
+      snapshotRef.current = EMPTY_ARRAY2;
+    }
+  }, [syncEngine]);
+  return (0, import_react11.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot4);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthBoundKoraProvider,
+  KoraProvider,
+  classifyKoraInitializationError,
+  createKoraHooks,
+  useApp,
+  useCollaborators,
+  useCollection,
+  useMutation,
+  usePresence,
+  useQuery,
+  useQueryState,
+  useRichText,
+  useSyncStatus
+});
+//# sourceMappingURL=index.cjs.map