@korajs/react 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/context/kora-context.ts
-import { createContext, createElement, useContext, useEffect, useState } from "react";
+import { QueryStoreCache } from "@korajs/store";
+import { createContext, createElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 var KoraContext = createContext(null);
 function KoraProvider({
   app,
@@ -12,6 +13,10 @@ function KoraProvider({
   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;
@@ -30,6 +35,26 @@ function KoraProvider({
       cancelled = true;
     };
   }, [app]);
+  useEffect(() => {
+    return () => {
+      if (!app) {
+        fallbackQueryStoreCache.current?.clear();
+      }
+    };
+  }, [app]);
+  const contextValue = 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 createElement(
       "div",
@@ -41,17 +66,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 createElement(KoraContext.Provider, { value }, children);
+  return createElement(KoraContext.Provider, { value: contextValue }, children);
 }
 function useKoraContext() {
   const context = useContext(KoraContext);
@@ -75,111 +95,35 @@ function useApp() {
 }
 
 // src/hooks/use-query.ts
-import { useMemo, useRef, useSyncExternalStore } from "react";
-
-// src/query-store/query-store.ts
+import { assertQueryReady } from "@korajs/store";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
 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 = useRef(null);
-  const prevKeyRef = useRef(null);
-  const queryStore = useMemo(() => {
+  const queryRef = useRef2(query);
+  queryRef.current = query;
+  const [queryStore, setQueryStore] = useState2(null);
+  useEffect2(() => {
     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;
+    assertQueryReady(currentQuery);
+    const store = queryStoreCache.getOrCreate(currentQuery);
+    setQueryStore(store);
+    return () => {
+      queryStoreCache.release(currentQuery);
+      setQueryStore(null);
+    };
+  }, [descriptorKey, enabled, queryStoreCache]);
+  const disabledGetSnapshot = () => EMPTY_ARRAY;
   return useSyncExternalStore(
     queryStore ? queryStore.subscribe : noopSubscribe,
     queryStore ? queryStore.getSnapshot : disabledGetSnapshot
@@ -187,281 +131,177 @@ function useQuery(query, options) {
 }
 
 // src/hooks/use-mutation.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-function useMutation(mutationFn) {
-  const [state, setState] = useState2({
-    isLoading: false,
-    error: null
-  });
-  const mountedRef = useRef2(true);
-  useEffect2(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-  const fnRef = useRef2(mutationFn);
+import { createMutationController } from "@korajs/core/bindings";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useMutation(mutationFn, options) {
+  const fnRef = useRef3(mutationFn);
   fnRef.current = mutationFn;
-  const mutateAsync = 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 = useCallback(
-    (...args) => {
-      mutateAsync(...args).catch(() => {
-      });
-    },
-    [mutateAsync]
+  const optionsRef = useRef3(options);
+  optionsRef.current = options;
+  const controller = useMemo2(
+    () => createMutationController({
+      mutationFn: (...args) => fnRef.current(...args),
+      resolveOptions: () => optionsRef.current
+    }),
+    []
+  );
+  useEffect3(() => () => controller.destroy(), [controller]);
+  const state = useSyncExternalStore2(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    () => controller.getSnapshot(),
+    () => controller.getSnapshot()
   );
-  const reset = 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
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-var POLL_INTERVAL_MS = 500;
-var OFFLINE_STATUS = Object.freeze({
-  status: "offline",
-  pendingOperations: 0,
-  lastSyncedAt: null,
-  lastSuccessfulPush: null,
-  lastSuccessfulPull: null,
-  conflicts: 0
-});
+import { createSyncStatusController } from "@korajs/sync";
+import { useEffect as useEffect4, useMemo as useMemo3, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useSyncStatus() {
-  const { syncEngine } = useKoraContext();
-  const snapshotRef = useRef3(OFFLINE_STATUS);
-  const serializedRef = useRef3(JSON.stringify(OFFLINE_STATUS));
-  const subscribe = useCallback2(
-    (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 = useMemo3(
+    () => createSyncStatusController({
+      syncEngine,
+      subscribeSyncStatus,
+      events: subscribeSyncStatus ? null : events
+    }),
+    [syncEngine, subscribeSyncStatus, events]
+  );
+  useEffect4(() => () => controller.destroy(), [controller]);
+  return useSyncExternalStore3(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    () => controller.getSnapshot(),
+    () => controller.getSnapshot()
   );
-  const getSnapshot = useCallback2(() => {
-    return snapshotRef.current;
-  }, []);
-  useEffect3(() => {
-    if (!syncEngine) {
-      snapshotRef.current = OFFLINE_STATUS;
-      serializedRef.current = JSON.stringify(OFFLINE_STATUS);
-    }
-  }, [syncEngine]);
-  return useSyncExternalStore2(subscribe, getSnapshot);
 }
 
 // src/hooks/use-collection.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo4 } from "react";
 function useCollection(name) {
   const { store } = useKoraContext();
-  return useMemo2(() => {
+  return useMemo4(() => {
     return store.collection(name);
   }, [store, name]);
 }
 
 // src/hooks/use-rich-text.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
-import * as Y from "yjs";
-var LOAD_ORIGIN = "kora-load";
-var TEXT_KEY = "content";
-var COMPACT_AFTER_DELTAS = 20;
-function useRichText(collectionName, recordId, fieldName) {
+import { asRichTextSyncEngine, createRichTextController } from "@korajs/store";
+import { useCallback, useEffect as useEffect5, useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore4 } from "react";
+function useRichText(collectionName, recordId, fieldName, options) {
   const { store, syncEngine } = useKoraContext();
-  const collection = useMemo3(
+  const collection = useMemo5(
     () => store.collection(collectionName),
     [store, collectionName]
   );
-  const [doc] = useState3(() => new Y.Doc());
-  const [ready, setReady] = useState3(false);
-  const [error, setError] = useState3(null);
-  const [canUndo, setCanUndo] = useState3(false);
-  const [canRedo, setCanRedo] = useState3(false);
-  const [cursors, setCursors] = useState3([]);
-  const baseUpdateRef = useRef4(null);
-  const pendingDeltasRef = useRef4([]);
-  const text = useMemo3(() => doc.getText(TEXT_KEY), [doc]);
-  const undoManager = useMemo3(() => new Y.UndoManager(text), [text]);
-  const syncHistoryState = useCallback3(() => {
-    setCanUndo(undoManager.undoStack.length > 0);
-    setCanRedo(undoManager.redoStack.length > 0);
-  }, [undoManager]);
-  const undo = useCallback3(() => {
-    undoManager.undo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  const redo = useCallback3(() => {
-    undoManager.redo();
-    syncHistoryState();
-  }, [syncHistoryState, undoManager]);
-  useEffect4(() => {
-    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]);
-  useEffect4(() => {
-    if (!syncEngine) return;
+  const controller = useMemo5(
+    () => createRichTextController({
+      collection,
+      collectionName,
+      recordId,
+      fieldName,
+      store,
+      syncEngine: asRichTextSyncEngine(syncEngine),
+      useDocChannel: options?.useDocChannel,
+      user: options?.user
+    }),
+    [collection, collectionName, fieldName, options?.useDocChannel, recordId, store, syncEngine]
+  );
+  useEffect5(() => {
+    controller.setUser(options?.user);
+  }, [controller, options?.user]);
+  useEffect5(() => () => controller.destroy(), [controller]);
+  const snapshot = useSyncExternalStore4(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    () => controller.getSnapshot(),
+    () => controller.getSnapshot()
+  );
+  const undo = useCallback(() => controller.undo(), [controller]);
+  const redo = useCallback(() => controller.redo(), [controller]);
+  const setCursor = useCallback(
+    (anchor, head) => controller.setCursor(anchor, head),
+    [controller]
+  );
+  const clearCursor = 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
+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();
-    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
+import { subscribeRemoteAwarenessStates } from "@korajs/sync";
+import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef4, useSyncExternalStore as useSyncExternalStore5 } from "react";
+var EMPTY_ARRAY2 = [];
+function useCollaborators() {
+  const { syncEngine } = useKoraContext();
+  const snapshotRef = useRef4(EMPTY_ARRAY2);
+  const subscribe = useCallback2(
+    (onStoreChange) => {
+      if (!syncEngine) {
+        snapshotRef.current = EMPTY_ARRAY2;
+        return () => {
+        };
+      }
+      const awareness = syncEngine.getAwarenessManager();
+      return subscribeRemoteAwarenessStates(awareness, (states) => {
+        snapshotRef.current = states;
+        onStoreChange();
+      });
+    },
+    [syncEngine]
+  );
+  const getSnapshot = useCallback2(() => snapshotRef.current, []);
+  useEffect7(() => {
+    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 useSyncExternalStore5(subscribe, getSnapshot);
 }
 export {
   KoraProvider,
   useApp,
+  useCollaborators,
   useCollection,
   useMutation,
+  usePresence,
   useQuery,
   useRichText,
   useSyncStatus