@korajs/react 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -32,8 +22,10 @@ var index_exports = {};
 __export(index_exports, {
   KoraProvider: () => KoraProvider,
   useApp: () => useApp,
+  useCollaborators: () => useCollaborators,
   useCollection: () => useCollection,
   useMutation: () => useMutation,
+  usePresence: () => usePresence,
   useQuery: () => useQuery,
   useRichText: () => useRichText,
   useSyncStatus: () => useSyncStatus
@@ -41,6 +33,7 @@ __export(index_exports, {
 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({
@@ -54,6 +47,10 @@ function KoraProvider({
   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;
@@ -72,6 +69,26 @@ function KoraProvider({
       cancelled = true;
     };
   }, [app]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (!app) {
+        fallbackQueryStoreCache.current?.clear();
+      }
+    };
+  }, [app]);
+  const contextValue = (0, import_react.useMemo)(() => {
+    if (!resolvedStore) {
+      return null;
+    }
+    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",
@@ -83,17 +100,12 @@ function KoraProvider({
   if (!ready) {
     return fallback ?? null;
   }
-  if (!resolvedStore) {
+  if (!contextValue) {
     throw new Error(
       'KoraProvider requires either an "app" or "store" prop. Pass a KoraApp from createApp() or a Store instance.'
     );
   }
-  const value = {
-    store: resolvedStore,
-    syncEngine: resolvedSync,
-    app: app ?? null
-  };
-  return (0, import_react.createElement)(KoraContext.Provider, { value }, children);
+  return (0, import_react.createElement)(KoraContext.Provider, { value: contextValue }, children);
 }
 function useKoraContext() {
   const context = (0, import_react.useContext)(KoraContext);
@@ -117,111 +129,35 @@ function useApp() {
 }
 
 // src/hooks/use-query.ts
+var import_store2 = require("@korajs/store");
 var import_react2 = require("react");
-
-// src/query-store/query-store.ts
 var EMPTY_ARRAY = Object.freeze([]);
-var QueryStore = class {
-  snapshot = EMPTY_ARRAY;
-  listeners = /* @__PURE__ */ new Set();
-  unsubscribeQuery = null;
-  active = false;
-  queryBuilder;
-  constructor(queryBuilder) {
-    this.queryBuilder = queryBuilder;
-  }
-  /**
-   * Subscribe to snapshot changes. Compatible with useSyncExternalStore.
-   *
-   * Lazily starts the underlying query subscription when the first listener
-   * attaches, and stops it when the last listener detaches. This allows
-   * React StrictMode to unmount/remount without permanently killing the subscription.
-   *
-   * @returns Unsubscribe function
-   */
-  subscribe = (onStoreChange) => {
-    this.listeners.add(onStoreChange);
-    if (!this.active) {
-      this.startSubscription();
-    }
-    return () => {
-      this.listeners.delete(onStoreChange);
-      if (this.listeners.size === 0) {
-        this.stopSubscription();
-      }
-    };
-  };
-  /**
-   * Get the current snapshot synchronously. Compatible with useSyncExternalStore.
-   * Returns EMPTY_ARRAY before the first async fetch completes.
-   */
-  getSnapshot = () => {
-    return this.snapshot;
-  };
-  /**
-   * Clean up the underlying subscription and release resources.
-   * Called by useMemo when the query descriptor changes.
-   */
-  destroy() {
-    this.stopSubscription();
-    this.listeners.clear();
-    this.snapshot = EMPTY_ARRAY;
-  }
-  startSubscription() {
-    this.active = true;
-    this.unsubscribeQuery = this.queryBuilder.subscribe((results) => {
-      if (!this.active) return;
-      const newSnapshot = Object.freeze([...results]);
-      this.snapshot = newSnapshot;
-      this.notifyListeners();
-    });
-  }
-  stopSubscription() {
-    this.active = false;
-    if (this.unsubscribeQuery) {
-      this.unsubscribeQuery();
-      this.unsubscribeQuery = null;
-    }
-  }
-  notifyListeners() {
-    for (const listener of this.listeners) {
-      listener();
-    }
-  }
-};
-
-// src/hooks/use-query.ts
-var EMPTY_ARRAY2 = Object.freeze([]);
 var noopSubscribe = (_onStoreChange) => {
   return () => {
   };
 };
 function useQuery(query, options) {
+  const { queryStoreCache } = useKoraContext();
   const enabled = options?.enabled !== false;
   const descriptorKey = JSON.stringify(query.getDescriptor());
-  const queryStoreRef = (0, import_react2.useRef)(null);
-  const prevKeyRef = (0, import_react2.useRef)(null);
-  const queryStore = (0, import_react2.useMemo)(() => {
+  const queryRef = (0, import_react2.useRef)(query);
+  queryRef.current = query;
+  const [queryStore, setQueryStore] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
     if (!enabled) {
-      if (queryStoreRef.current) {
-        queryStoreRef.current.destroy();
-        queryStoreRef.current = null;
-      }
-      prevKeyRef.current = null;
-      return null;
+      setQueryStore(null);
+      return;
     }
-    if (prevKeyRef.current !== descriptorKey) {
-      if (queryStoreRef.current) {
-        queryStoreRef.current.destroy();
-      }
-      const newStore = new QueryStore(query);
-      queryStoreRef.current = newStore;
-      prevKeyRef.current = descriptorKey;
-      return newStore;
-    }
-    return queryStoreRef.current;
-  }, [descriptorKey, enabled, query]);
-  const disabledGetSnapshot = () => EMPTY_ARRAY2;
+    const currentQuery = queryRef.current;
+    (0, import_store2.assertQueryReady)(currentQuery);
+    const store = queryStoreCache.getOrCreate(currentQuery);
+    setQueryStore(store);
+    return () => {
+      queryStoreCache.release(currentQuery);
+      setQueryStore(null);
+    };
+  }, [descriptorKey, enabled, queryStoreCache]);
+  const disabledGetSnapshot = () => EMPTY_ARRAY;
   return (0, import_react2.useSyncExternalStore)(
     queryStore ? queryStore.subscribe : noopSubscribe,
     queryStore ? queryStore.getSnapshot : disabledGetSnapshot
@@ -229,111 +165,54 @@ function useQuery(query, options) {
 }
 
 // src/hooks/use-mutation.ts
+var import_bindings = require("@korajs/core/bindings");
 var import_react3 = require("react");
-function useMutation(mutationFn) {
-  const [state, setState] = (0, import_react3.useState)({
-    isLoading: false,
-    error: null
-  });
-  const mountedRef = (0, import_react3.useRef)(true);
-  (0, import_react3.useEffect)(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
+function useMutation(mutationFn, options) {
   const fnRef = (0, import_react3.useRef)(mutationFn);
   fnRef.current = mutationFn;
-  const mutateAsync = (0, import_react3.useCallback)(async (...args) => {
-    if (mountedRef.current) {
-      setState({ isLoading: true, error: null });
-    }
-    try {
-      const result = await fnRef.current(...args);
-      if (mountedRef.current) {
-        setState({ isLoading: false, error: null });
-      }
-      return result;
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      if (mountedRef.current) {
-        setState({ isLoading: false, error });
-      }
-      throw error;
-    }
-  }, []);
-  const mutate = (0, import_react3.useCallback)(
-    (...args) => {
-      mutateAsync(...args).catch(() => {
-      });
-    },
-    [mutateAsync]
+  const optionsRef = (0, import_react3.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react3.useMemo)(
+    () => (0, import_bindings.createMutationController)({
+      mutationFn: (...args) => fnRef.current(...args),
+      resolveOptions: () => optionsRef.current
+    }),
+    []
+  );
+  (0, import_react3.useEffect)(() => () => controller.destroy(), [controller]);
+  const state = (0, import_react3.useSyncExternalStore)(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    () => controller.getSnapshot(),
+    () => controller.getSnapshot()
   );
-  const reset = (0, import_react3.useCallback)(() => {
-    if (mountedRef.current) {
-      setState({ isLoading: false, error: null });
-    }
-  }, []);
   return {
-    mutate,
-    mutateAsync,
+    mutate: (...args) => controller.mutate(...args),
+    mutateAsync: (...args) => controller.mutateAsync(...args),
     isLoading: state.isLoading,
     error: state.error,
-    reset
+    reset: () => controller.reset()
   };
 }
 
 // src/hooks/use-sync-status.ts
+var import_sync = require("@korajs/sync");
 var import_react4 = require("react");
-var POLL_INTERVAL_MS = 500;
-var OFFLINE_STATUS = Object.freeze({
-  status: "offline",
-  pendingOperations: 0,
-  lastSyncedAt: null,
-  lastSuccessfulPush: null,
-  lastSuccessfulPull: null,
-  conflicts: 0
-});
 function useSyncStatus() {
-  const { syncEngine } = useKoraContext();
-  const snapshotRef = (0, import_react4.useRef)(OFFLINE_STATUS);
-  const serializedRef = (0, import_react4.useRef)(JSON.stringify(OFFLINE_STATUS));
-  const subscribe = (0, import_react4.useCallback)(
-    (onStoreChange) => {
-      if (!syncEngine) return () => {
-      };
-      const intervalId = setInterval(() => {
-        const newStatus = syncEngine.getStatus();
-        const newSerialized = JSON.stringify(newStatus);
-        if (newSerialized !== serializedRef.current) {
-          snapshotRef.current = newStatus;
-          serializedRef.current = newSerialized;
-          onStoreChange();
-        }
-      }, POLL_INTERVAL_MS);
-      const initialStatus = syncEngine.getStatus();
-      const initialSerialized = JSON.stringify(initialStatus);
-      if (initialSerialized !== serializedRef.current) {
-        snapshotRef.current = initialStatus;
-        serializedRef.current = initialSerialized;
-        onStoreChange();
-      }
-      return () => {
-        clearInterval(intervalId);
-      };
-    },
-    [syncEngine]
+  const { syncEngine, subscribeSyncStatus, events } = useKoraContext();
+  const controller = (0, import_react4.useMemo)(
+    () => (0, import_sync.createSyncStatusController)({
+      syncEngine,
+      subscribeSyncStatus,
+      events: subscribeSyncStatus ? null : events
+    }),
+    [syncEngine, subscribeSyncStatus, events]
+  );
+  (0, import_react4.useEffect)(() => () => controller.destroy(), [controller]);
+  return (0, import_react4.useSyncExternalStore)(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    () => controller.getSnapshot(),
+    () => controller.getSnapshot()
   );
-  const getSnapshot = (0, import_react4.useCallback)(() => {
-    return snapshotRef.current;
-  }, []);
-  (0, import_react4.useEffect)(() => {
-    if (!syncEngine) {
-      snapshotRef.current = OFFLINE_STATUS;
-      serializedRef.current = JSON.stringify(OFFLINE_STATUS);
-    }
-  }, [syncEngine]);
-  return (0, import_react4.useSyncExternalStore)(subscribe, getSnapshot);
 }
 
 // src/hooks/use-collection.ts
@@ -346,165 +225,118 @@ function useCollection(name) {
 }
 
 // src/hooks/use-rich-text.ts
+var import_store3 = require("@korajs/store");
 var import_react6 = require("react");
-var Y = __toESM(require("yjs"), 1);
-var LOAD_ORIGIN = "kora-load";
-var TEXT_KEY = "content";
-var COMPACT_AFTER_DELTAS = 20;
-function useRichText(collectionName, recordId, fieldName) {
+function useRichText(collectionName, recordId, fieldName, options) {
   const { store, syncEngine } = useKoraContext();
   const collection = (0, import_react6.useMemo)(
     () => store.collection(collectionName),
     [store, collectionName]
   );
-  const [doc] = (0, import_react6.useState)(() => new Y.Doc());
-  const [ready, setReady] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [canUndo, setCanUndo] = (0, import_react6.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react6.useState)(false);
-  const [cursors, setCursors] = (0, import_react6.useState)([]);
-  const baseUpdateRef = (0, import_react6.useRef)(null);
-  const pendingDeltasRef = (0, import_react6.useRef)([]);
-  const text = (0, import_react6.useMemo)(() => doc.getText(TEXT_KEY), [doc]);
-  const undoManager = (0, import_react6.useMemo)(() => new Y.UndoManager(text), [text]);
-  const syncHistoryState = (0, import_react6.useCallback)(() => {
-    setCanUndo(undoManager.undoStack.length > 0);
-    setCanRedo(undoManager.redoStack.length > 0);
-  }, [undoManager]);
-  const undo = (0, import_react6.useCallback)(() => {
-    undoManager.undo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  const redo = (0, import_react6.useCallback)(() => {
-    undoManager.redo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  (0, import_react6.useEffect)(() => {
-    let disposed = false;
-    const initialize = async () => {
-      setReady(false);
-      setError(null);
-      try {
-        const record = await collection.findById(recordId);
-        if (disposed) return;
-        doc.transact(() => {
-          const target = doc.getText(TEXT_KEY);
-          target.delete(0, target.length);
-        }, LOAD_ORIGIN);
-        const encoded = encodeRichtextInput(record?.[fieldName]);
-        baseUpdateRef.current = encoded;
-        pendingDeltasRef.current = [];
-        if (encoded) {
-          Y.applyUpdate(doc, encoded, LOAD_ORIGIN);
-        }
-        setReady(true);
-      } catch (cause) {
-        if (disposed) return;
-        setError(cause instanceof Error ? cause : new Error(String(cause)));
-      }
-    };
-    const persist = async (_update, origin) => {
-      syncHistoryState();
-      if (origin === LOAD_ORIGIN) {
-        return;
-      }
-      pendingDeltasRef.current.push(_update);
-      const snapshot = composeRichtextSnapshot(baseUpdateRef.current, pendingDeltasRef.current);
-      if (pendingDeltasRef.current.length >= COMPACT_AFTER_DELTAS) {
-        baseUpdateRef.current = snapshot;
-        pendingDeltasRef.current = [];
-      }
-      try {
-        await collection.update(recordId, {
-          [fieldName]: snapshot
-        });
-      } catch (cause) {
-        if (!disposed) {
-          setError(cause instanceof Error ? cause : new Error(String(cause)));
-        }
-      }
-    };
-    doc.on("update", persist);
-    void initialize();
-    syncHistoryState();
-    return () => {
-      disposed = true;
-      doc.off("update", persist);
-      undoManager.destroy();
-      baseUpdateRef.current = null;
-      pendingDeltasRef.current = [];
-    };
-  }, [collection, doc, fieldName, recordId, syncHistoryState, undoManager]);
+  const controller = (0, import_react6.useMemo)(
+    () => (0, import_store3.createRichTextController)({
+      collection,
+      collectionName,
+      recordId,
+      fieldName,
+      store,
+      syncEngine: (0, import_store3.asRichTextSyncEngine)(syncEngine),
+      useDocChannel: options?.useDocChannel,
+      user: options?.user
+    }),
+    [collection, collectionName, fieldName, options?.useDocChannel, recordId, store, syncEngine]
+  );
   (0, import_react6.useEffect)(() => {
-    if (!syncEngine) return;
+    controller.setUser(options?.user);
+  }, [controller, options?.user]);
+  (0, import_react6.useEffect)(() => () => controller.destroy(), [controller]);
+  const snapshot = (0, import_react6.useSyncExternalStore)(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    () => controller.getSnapshot(),
+    () => controller.getSnapshot()
+  );
+  const undo = (0, import_react6.useCallback)(() => controller.undo(), [controller]);
+  const redo = (0, import_react6.useCallback)(() => controller.redo(), [controller]);
+  const setCursor = (0, import_react6.useCallback)(
+    (anchor, head) => controller.setCursor(anchor, head),
+    [controller]
+  );
+  const clearCursor = (0, import_react6.useCallback)(() => controller.clearCursor(), [controller]);
+  return buildResult(controller, snapshot, undo, redo, setCursor, clearCursor);
+}
+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
+  };
+}
+
+// src/hooks/use-presence.ts
+var import_react7 = 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_react7.useEffect)(() => {
+    if (!syncEngine || !name || !color) return;
     const awareness = syncEngine.getAwarenessManager();
-    const localClientId = awareness.clientId;
-    const updateCursors = () => {
-      const states = awareness.getStates();
-      const fieldCursors = [];
-      for (const [clientId, state] of states) {
-        if (clientId === localClientId) continue;
-        if (!state.cursor) continue;
-        if (state.cursor.collection !== collectionName || state.cursor.recordId !== recordId || state.cursor.field !== fieldName) {
-          continue;
-        }
-        fieldCursors.push({
-          clientId,
-          userName: state.user.name,
-          color: state.user.color,
-          anchor: state.cursor.anchor,
-          head: state.cursor.head
-        });
-      }
-      setCursors(fieldCursors);
-    };
-    const unsubscribe = awareness.on("change", () => {
-      updateCursors();
+    awareness.setLocalState({
+      user: { name, color, avatar: avatar ?? void 0 }
     });
-    updateCursors();
-    return unsubscribe;
-  }, [syncEngine, collectionName, recordId, fieldName]);
-  return { doc, text, undo, redo, canUndo, canRedo, ready, error, cursors };
+    return () => {
+      awareness.setLocalState(null);
+    };
+  }, [syncEngine, name, color, avatar]);
 }
-function encodeRichtextInput(value) {
-  if (value === null || value === void 0) {
-    return null;
-  }
-  if (typeof value === "string") {
-    const doc = new Y.Doc();
-    doc.getText(TEXT_KEY).insert(0, value);
-    return Y.encodeStateAsUpdate(doc);
-  }
-  if (value instanceof Uint8Array) {
-    return value;
-  }
-  if (value instanceof ArrayBuffer) {
-    return new Uint8Array(value);
-  }
-  if (typeof globalThis !== "undefined" && "Buffer" in globalThis) {
-    const BufferCtor = globalThis.Buffer;
-    if (BufferCtor.isBuffer(value)) {
-      return new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
+
+// src/hooks/use-collaborators.ts
+var import_sync2 = require("@korajs/sync");
+var import_react8 = require("react");
+var EMPTY_ARRAY2 = [];
+function useCollaborators() {
+  const { syncEngine } = useKoraContext();
+  const snapshotRef = (0, import_react8.useRef)(EMPTY_ARRAY2);
+  const subscribe = (0, import_react8.useCallback)(
+    (onStoreChange) => {
+      if (!syncEngine) {
+        snapshotRef.current = EMPTY_ARRAY2;
+        return () => {
+        };
+      }
+      const awareness = syncEngine.getAwarenessManager();
+      return (0, import_sync2.subscribeRemoteAwarenessStates)(awareness, (states) => {
+        snapshotRef.current = states;
+        onStoreChange();
+      });
+    },
+    [syncEngine]
+  );
+  const getSnapshot = (0, import_react8.useCallback)(() => snapshotRef.current, []);
+  (0, import_react8.useEffect)(() => {
+    if (!syncEngine) {
+      snapshotRef.current = EMPTY_ARRAY2;
     }
-  }
-  throw new Error("Richtext record value must be a string, Uint8Array, ArrayBuffer, or null.");
-}
-function composeRichtextSnapshot(base, deltas) {
-  const doc = new Y.Doc();
-  if (base) {
-    Y.applyUpdate(doc, base);
-  }
-  for (const delta of deltas) {
-    Y.applyUpdate(doc, delta);
-  }
-  return Y.encodeStateAsUpdate(doc);
+  }, [syncEngine]);
+  return (0, import_react8.useSyncExternalStore)(subscribe, getSnapshot);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   KoraProvider,
   useApp,
+  useCollaborators,
   useCollection,
   useMutation,
+  usePresence,
   useQuery,
   useRichText,
   useSyncStatus