@tanstack/react-db 0.0.14 → 0.0.16

package/dist/cjs/useLiveQuery.cjs

@@ -1,32 +1,83 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
-const reactStore = require("@tanstack/react-store");
 const db = require("@tanstack/db");
-function useLiveQuery(queryFn, deps = []) {
-  const [restart, forceRestart] = react.useState(0);
-  const compiledQuery = react.useMemo(() => {
-    const query = queryFn(db.queryBuilder());
-    const compiled = db.compileQuery(query);
-    compiled.start();
-    return compiled;
-  }, [...deps, restart]);
-  const state = reactStore.useStore(compiledQuery.results.asStoreMap());
-  const data = reactStore.useStore(compiledQuery.results.asStoreArray());
-  react.useEffect(() => {
-    if (compiledQuery.state === `stopped`) {
-      forceRestart((count) => {
-        return count += 1;
-      });
+function useLiveQuery(configOrQueryOrCollection, deps = []) {
+  const isCollection = configOrQueryOrCollection && typeof configOrQueryOrCollection === `object` && typeof configOrQueryOrCollection.subscribeChanges === `function` && typeof configOrQueryOrCollection.startSyncImmediate === `function` && typeof configOrQueryOrCollection.id === `string`;
+  const collectionRef = react.useRef(null);
+  const depsRef = react.useRef(null);
+  const configRef = react.useRef(null);
+  const needsNewCollection = !collectionRef.current || isCollection && configRef.current !== configOrQueryOrCollection || !isCollection && (depsRef.current === null || depsRef.current.length !== deps.length || depsRef.current.some((dep, i) => dep !== deps[i]));
+  if (needsNewCollection) {
+    if (isCollection) {
+      configOrQueryOrCollection.startSyncImmediate();
+      collectionRef.current = configOrQueryOrCollection;
+      configRef.current = configOrQueryOrCollection;
+    } else {
+      if (typeof configOrQueryOrCollection === `function`) {
+        collectionRef.current = db.createLiveQueryCollection({
+          query: configOrQueryOrCollection,
+          startSync: true,
+          gcTime: 0
+          // Live queries created by useLiveQuery are cleaned up immediately
+        });
+      } else {
+        collectionRef.current = db.createLiveQueryCollection({
+          startSync: true,
+          gcTime: 0,
+          // Live queries created by useLiveQuery are cleaned up immediately
+          ...configOrQueryOrCollection
+        });
+      }
+      depsRef.current = [...deps];
     }
-    return () => {
-      compiledQuery.stop();
+  }
+  const versionRef = react.useRef(0);
+  const snapshotRef = react.useRef(null);
+  if (needsNewCollection) {
+    versionRef.current = 0;
+    snapshotRef.current = null;
+  }
+  const subscribeRef = react.useRef(null);
+  if (!subscribeRef.current || needsNewCollection) {
+    subscribeRef.current = (onStoreChange) => {
+      const unsubscribe = collectionRef.current.subscribeChanges(() => {
+        versionRef.current += 1;
+        onStoreChange();
+      });
+      return () => {
+        unsubscribe();
+      };
+    };
+  }
+  const getSnapshotRef = react.useRef(null);
+  if (!getSnapshotRef.current || needsNewCollection) {
+    getSnapshotRef.current = () => {
+      const currentVersion = versionRef.current;
+      const currentCollection = collectionRef.current;
+      if (!snapshotRef.current || snapshotRef.current._version !== currentVersion) {
+        snapshotRef.current = {
+          get state() {
+            return new Map(currentCollection.entries());
+          },
+          get data() {
+            return Array.from(currentCollection.values());
+          },
+          collection: currentCollection,
+          _version: currentVersion
+        };
+      }
+      return snapshotRef.current;
     };
-  }, [compiledQuery]);
+  }
+  const snapshot = react.useSyncExternalStore(
+    subscribeRef.current,
+    getSnapshotRef.current
+  );
   return {
-    state,
-    data,
-    collection: compiledQuery.results
+    state: snapshot.state,
+    data: snapshot.data,
+    collection: snapshot.collection
   };
 }
 exports.useLiveQuery = useLiveQuery;

package/dist/cjs/useLiveQuery.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveQuery.cjs","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\"\nimport { useStore } from \"@tanstack/react-store\"\nimport { compileQuery, queryBuilder } from \"@tanstack/db\"\nimport type {\n  Collection,\n  Context,\n  InitialQueryBuilder,\n  QueryBuilder,\n  ResultsFromContext,\n  Schema,\n} from \"@tanstack/db\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: Map<string | number, T>\n  data: Array<T>\n  collection: Collection<T>\n}\n\nexport function useLiveQuery<\n  TResultContext extends Context<Schema> = Context<Schema>,\n>(\n  queryFn: (\n    q: InitialQueryBuilder<Context<Schema>>\n  ) => QueryBuilder<TResultContext>,\n  deps: Array<unknown> = []\n): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {\n  const [restart, forceRestart] = useState(0)\n\n  const compiledQuery = useMemo(() => {\n    const query = queryFn(queryBuilder())\n    const compiled = compileQuery(query)\n    compiled.start()\n    return compiled\n  }, [...deps, restart])\n\n  const state = useStore(compiledQuery.results.asStoreMap())\n  const data = useStore(compiledQuery.results.asStoreArray())\n\n  // Clean up on unmount\n  useEffect(() => {\n    if (compiledQuery.state === `stopped`) {\n      forceRestart((count) => {\n        return (count += 1)\n      })\n    }\n\n    return () => {\n      compiledQuery.stop()\n    }\n  }, [compiledQuery])\n\n  return {\n    state,\n    data,\n    collection: compiledQuery.results,\n  }\n}\n"],"names":["useState","useMemo","queryBuilder","compileQuery","useStore","useEffect"],"mappings":";;;;;AAkBO,SAAS,aAGd,SAGA,OAAuB,IACiC;AACxD,QAAM,CAAC,SAAS,YAAY,IAAIA,MAAAA,SAAS,CAAC;AAEpC,QAAA,gBAAgBC,MAAAA,QAAQ,MAAM;AAC5B,UAAA,QAAQ,QAAQC,GAAAA,cAAc;AAC9B,UAAA,WAAWC,gBAAa,KAAK;AACnC,aAAS,MAAM;AACR,WAAA;AAAA,EAAA,GACN,CAAC,GAAG,MAAM,OAAO,CAAC;AAErB,QAAM,QAAQC,WAAA,SAAS,cAAc,QAAQ,YAAY;AACzD,QAAM,OAAOA,WAAA,SAAS,cAAc,QAAQ,cAAc;AAG1DC,QAAAA,UAAU,MAAM;AACV,QAAA,cAAc,UAAU,WAAW;AACrC,mBAAa,CAAC,UAAU;AACtB,eAAQ,SAAS;AAAA,MAAA,CAClB;AAAA,IAAA;AAGH,WAAO,MAAM;AACX,oBAAc,KAAK;AAAA,IACrB;AAAA,EAAA,GACC,CAAC,aAAa,CAAC;AAEX,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,cAAc;AAAA,EAC5B;AACF;;"}
+{"version":3,"file":"useLiveQuery.cjs","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { useRef, useSyncExternalStore } from \"react\"\nimport { createLiveQueryCollection } from \"@tanstack/db\"\nimport type {\n  Collection,\n  Context,\n  GetResult,\n  InitialQueryBuilder,\n  LiveQueryCollectionConfig,\n  QueryBuilder,\n} from \"@tanstack/db\"\n\n// Overload 1: Accept just the query function\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  deps?: Array<unknown>\n): {\n  state: Map<string | number, GetResult<TContext>>\n  data: Array<GetResult<TContext>>\n  collection: Collection<GetResult<TContext>, string | number, {}>\n}\n\n// Overload 2: Accept config object\nexport function useLiveQuery<TContext extends Context>(\n  config: LiveQueryCollectionConfig<TContext>,\n  deps?: Array<unknown>\n): {\n  state: Map<string | number, GetResult<TContext>>\n  data: Array<GetResult<TContext>>\n  collection: Collection<GetResult<TContext>, string | number, {}>\n}\n\n// Overload 3: Accept pre-created live query collection\nexport function useLiveQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Collection<TResult, TKey, TUtils>\n): {\n  state: Map<TKey, TResult>\n  data: Array<TResult>\n  collection: Collection<TResult, TKey, TUtils>\n}\n\n// Implementation - use function overloads to infer the actual collection type\nexport function useLiveQuery(\n  configOrQueryOrCollection: any,\n  deps: Array<unknown> = []\n) {\n  // Check if it's already a collection by checking for specific collection methods\n  const isCollection =\n    configOrQueryOrCollection &&\n    typeof configOrQueryOrCollection === `object` &&\n    typeof configOrQueryOrCollection.subscribeChanges === `function` &&\n    typeof configOrQueryOrCollection.startSyncImmediate === `function` &&\n    typeof configOrQueryOrCollection.id === `string`\n\n  // Use refs to cache collection and track dependencies\n  const collectionRef = useRef<any>(null)\n  const depsRef = useRef<Array<unknown> | null>(null)\n  const configRef = useRef<any>(null)\n\n  // Check if we need to create/recreate the collection\n  const needsNewCollection =\n    !collectionRef.current ||\n    (isCollection && configRef.current !== configOrQueryOrCollection) ||\n    (!isCollection &&\n      (depsRef.current === null ||\n        depsRef.current.length !== deps.length ||\n        depsRef.current.some((dep, i) => dep !== deps[i])))\n\n  if (needsNewCollection) {\n    if (isCollection) {\n      // It's already a collection, ensure sync is started for React hooks\n      configOrQueryOrCollection.startSyncImmediate()\n      collectionRef.current = configOrQueryOrCollection\n      configRef.current = configOrQueryOrCollection\n    } else {\n      // Original logic for creating collections\n      // Ensure we always start sync for React hooks\n      if (typeof configOrQueryOrCollection === `function`) {\n        collectionRef.current = createLiveQueryCollection({\n          query: configOrQueryOrCollection,\n          startSync: true,\n          gcTime: 0, // Live queries created by useLiveQuery are cleaned up immediately\n        })\n      } else {\n        collectionRef.current = createLiveQueryCollection({\n          startSync: true,\n          gcTime: 0, // Live queries created by useLiveQuery are cleaned up immediately\n          ...configOrQueryOrCollection,\n        })\n      }\n      depsRef.current = [...deps]\n    }\n  }\n\n  // Use refs to track version and memoized snapshot\n  const versionRef = useRef(0)\n  const snapshotRef = useRef<{\n    state: Map<any, any>\n    data: Array<any>\n    collection: Collection<any, any, any>\n    _version: number\n  } | null>(null)\n\n  // Reset refs when collection changes\n  if (needsNewCollection) {\n    versionRef.current = 0\n    snapshotRef.current = null\n  }\n\n  // Create stable subscribe function using ref\n  const subscribeRef = useRef<\n    ((onStoreChange: () => void) => () => void) | null\n  >(null)\n  if (!subscribeRef.current || needsNewCollection) {\n    subscribeRef.current = (onStoreChange: () => void) => {\n      const unsubscribe = collectionRef.current!.subscribeChanges(() => {\n        versionRef.current += 1\n        onStoreChange()\n      })\n      return () => {\n        unsubscribe()\n      }\n    }\n  }\n\n  // Create stable getSnapshot function using ref\n  const getSnapshotRef = useRef<\n    | (() => {\n        state: Map<any, any>\n        data: Array<any>\n        collection: Collection<any, any, any>\n      })\n    | null\n  >(null)\n  if (!getSnapshotRef.current || needsNewCollection) {\n    getSnapshotRef.current = () => {\n      const currentVersion = versionRef.current\n      const currentCollection = collectionRef.current!\n\n      // If we don't have a snapshot or the version changed, create a new one\n      if (\n        !snapshotRef.current ||\n        snapshotRef.current._version !== currentVersion\n      ) {\n        snapshotRef.current = {\n          get state() {\n            return new Map(currentCollection.entries())\n          },\n          get data() {\n            return Array.from(currentCollection.values())\n          },\n          collection: currentCollection,\n          _version: currentVersion,\n        }\n      }\n\n      return snapshotRef.current\n    }\n  }\n\n  // Use useSyncExternalStore to subscribe to collection changes\n  const snapshot = useSyncExternalStore(\n    subscribeRef.current,\n    getSnapshotRef.current\n  )\n\n  return {\n    state: snapshot.state,\n    data: snapshot.data,\n    collection: snapshot.collection,\n  }\n}\n"],"names":["useRef","createLiveQueryCollection","useSyncExternalStore"],"mappings":";;;;AA6CO,SAAS,aACd,2BACA,OAAuB,IACvB;AAEA,QAAM,eACJ,6BACA,OAAO,8BAA8B,YACrC,OAAO,0BAA0B,qBAAqB,cACtD,OAAO,0BAA0B,uBAAuB,cACxD,OAAO,0BAA0B,OAAO;AAGpC,QAAA,gBAAgBA,aAAY,IAAI;AAChC,QAAA,UAAUA,aAA8B,IAAI;AAC5C,QAAA,YAAYA,aAAY,IAAI;AAG5B,QAAA,qBACJ,CAAC,cAAc,WACd,gBAAgB,UAAU,YAAY,6BACtC,CAAC,iBACC,QAAQ,YAAY,QACnB,QAAQ,QAAQ,WAAW,KAAK,UAChC,QAAQ,QAAQ,KAAK,CAAC,KAAK,MAAM,QAAQ,KAAK,CAAC,CAAC;AAEtD,MAAI,oBAAoB;AACtB,QAAI,cAAc;AAEhB,gCAA0B,mBAAmB;AAC7C,oBAAc,UAAU;AACxB,gBAAU,UAAU;AAAA,IAAA,OACf;AAGD,UAAA,OAAO,8BAA8B,YAAY;AACnD,sBAAc,UAAUC,6BAA0B;AAAA,UAChD,OAAO;AAAA,UACP,WAAW;AAAA,UACX,QAAQ;AAAA;AAAA,QAAA,CACT;AAAA,MAAA,OACI;AACL,sBAAc,UAAUA,6BAA0B;AAAA,UAChD,WAAW;AAAA,UACX,QAAQ;AAAA;AAAA,UACR,GAAG;AAAA,QAAA,CACJ;AAAA,MAAA;AAEK,cAAA,UAAU,CAAC,GAAG,IAAI;AAAA,IAAA;AAAA,EAC5B;AAII,QAAA,aAAaD,aAAO,CAAC;AACrB,QAAA,cAAcA,aAKV,IAAI;AAGd,MAAI,oBAAoB;AACtB,eAAW,UAAU;AACrB,gBAAY,UAAU;AAAA,EAAA;AAIlB,QAAA,eAAeA,aAEnB,IAAI;AACF,MAAA,CAAC,aAAa,WAAW,oBAAoB;AAClC,iBAAA,UAAU,CAAC,kBAA8B;AACpD,YAAM,cAAc,cAAc,QAAS,iBAAiB,MAAM;AAChE,mBAAW,WAAW;AACR,sBAAA;AAAA,MAAA,CACf;AACD,aAAO,MAAM;AACC,oBAAA;AAAA,MACd;AAAA,IACF;AAAA,EAAA;AAII,QAAA,iBAAiBA,aAOrB,IAAI;AACF,MAAA,CAAC,eAAe,WAAW,oBAAoB;AACjD,mBAAe,UAAU,MAAM;AAC7B,YAAM,iBAAiB,WAAW;AAClC,YAAM,oBAAoB,cAAc;AAGxC,UACE,CAAC,YAAY,WACb,YAAY,QAAQ,aAAa,gBACjC;AACA,oBAAY,UAAU;AAAA,UACpB,IAAI,QAAQ;AACV,mBAAO,IAAI,IAAI,kBAAkB,SAAS;AAAA,UAC5C;AAAA,UACA,IAAI,OAAO;AACT,mBAAO,MAAM,KAAK,kBAAkB,OAAA,CAAQ;AAAA,UAC9C;AAAA,UACA,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,MAAA;AAGF,aAAO,YAAY;AAAA,IACrB;AAAA,EAAA;AAIF,QAAM,WAAWE,MAAA;AAAA,IACf,aAAa;AAAA,IACb,eAAe;AAAA,EACjB;AAEO,SAAA;AAAA,IACL,OAAO,SAAS;AAAA,IAChB,MAAM,SAAS;AAAA,IACf,YAAY,SAAS;AAAA,EACvB;AACF;;"}

package/dist/cjs/useLiveQuery.d.cts

@@ -1,7 +1,16 @@
-import { Collection, Context, InitialQueryBuilder, QueryBuilder, ResultsFromContext, Schema } from '@tanstack/db';
-export interface UseLiveQueryReturn<T extends object> {
-    state: Map<string | number, T>;
-    data: Array<T>;
-    collection: Collection<T>;
-}
-export declare function useLiveQuery<TResultContext extends Context<Schema> = Context<Schema>>(queryFn: (q: InitialQueryBuilder<Context<Schema>>) => QueryBuilder<TResultContext>, deps?: Array<unknown>): UseLiveQueryReturn<ResultsFromContext<TResultContext>>;
+import { Collection, Context, GetResult, InitialQueryBuilder, LiveQueryCollectionConfig, QueryBuilder } from '@tanstack/db';
+export declare function useLiveQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>, deps?: Array<unknown>): {
+    state: Map<string | number, GetResult<TContext>>;
+    data: Array<GetResult<TContext>>;
+    collection: Collection<GetResult<TContext>, string | number, {}>;
+};
+export declare function useLiveQuery<TContext extends Context>(config: LiveQueryCollectionConfig<TContext>, deps?: Array<unknown>): {
+    state: Map<string | number, GetResult<TContext>>;
+    data: Array<GetResult<TContext>>;
+    collection: Collection<GetResult<TContext>, string | number, {}>;
+};
+export declare function useLiveQuery<TResult extends object, TKey extends string | number, TUtils extends Record<string, any>>(liveQueryCollection: Collection<TResult, TKey, TUtils>): {
+    state: Map<TKey, TResult>;
+    data: Array<TResult>;
+    collection: Collection<TResult, TKey, TUtils>;
+};

package/dist/esm/useLiveQuery.d.ts

@@ -1,7 +1,16 @@
-import { Collection, Context, InitialQueryBuilder, QueryBuilder, ResultsFromContext, Schema } from '@tanstack/db';
-export interface UseLiveQueryReturn<T extends object> {
-    state: Map<string | number, T>;
-    data: Array<T>;
-    collection: Collection<T>;
-}
-export declare function useLiveQuery<TResultContext extends Context<Schema> = Context<Schema>>(queryFn: (q: InitialQueryBuilder<Context<Schema>>) => QueryBuilder<TResultContext>, deps?: Array<unknown>): UseLiveQueryReturn<ResultsFromContext<TResultContext>>;
+import { Collection, Context, GetResult, InitialQueryBuilder, LiveQueryCollectionConfig, QueryBuilder } from '@tanstack/db';
+export declare function useLiveQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>, deps?: Array<unknown>): {
+    state: Map<string | number, GetResult<TContext>>;
+    data: Array<GetResult<TContext>>;
+    collection: Collection<GetResult<TContext>, string | number, {}>;
+};
+export declare function useLiveQuery<TContext extends Context>(config: LiveQueryCollectionConfig<TContext>, deps?: Array<unknown>): {
+    state: Map<string | number, GetResult<TContext>>;
+    data: Array<GetResult<TContext>>;
+    collection: Collection<GetResult<TContext>, string | number, {}>;
+};
+export declare function useLiveQuery<TResult extends object, TKey extends string | number, TUtils extends Record<string, any>>(liveQueryCollection: Collection<TResult, TKey, TUtils>): {
+    state: Map<TKey, TResult>;
+    data: Array<TResult>;
+    collection: Collection<TResult, TKey, TUtils>;
+};

package/dist/esm/useLiveQuery.js

@@ -1,30 +1,81 @@
-import { useState, useMemo, useEffect } from "react";
-import { useStore } from "@tanstack/react-store";
-import { queryBuilder, compileQuery } from "@tanstack/db";
-function useLiveQuery(queryFn, deps = []) {
-  const [restart, forceRestart] = useState(0);
-  const compiledQuery = useMemo(() => {
-    const query = queryFn(queryBuilder());
-    const compiled = compileQuery(query);
-    compiled.start();
-    return compiled;
-  }, [...deps, restart]);
-  const state = useStore(compiledQuery.results.asStoreMap());
-  const data = useStore(compiledQuery.results.asStoreArray());
-  useEffect(() => {
-    if (compiledQuery.state === `stopped`) {
-      forceRestart((count) => {
-        return count += 1;
-      });
+import { useRef, useSyncExternalStore } from "react";
+import { createLiveQueryCollection } from "@tanstack/db";
+function useLiveQuery(configOrQueryOrCollection, deps = []) {
+  const isCollection = configOrQueryOrCollection && typeof configOrQueryOrCollection === `object` && typeof configOrQueryOrCollection.subscribeChanges === `function` && typeof configOrQueryOrCollection.startSyncImmediate === `function` && typeof configOrQueryOrCollection.id === `string`;
+  const collectionRef = useRef(null);
+  const depsRef = useRef(null);
+  const configRef = useRef(null);
+  const needsNewCollection = !collectionRef.current || isCollection && configRef.current !== configOrQueryOrCollection || !isCollection && (depsRef.current === null || depsRef.current.length !== deps.length || depsRef.current.some((dep, i) => dep !== deps[i]));
+  if (needsNewCollection) {
+    if (isCollection) {
+      configOrQueryOrCollection.startSyncImmediate();
+      collectionRef.current = configOrQueryOrCollection;
+      configRef.current = configOrQueryOrCollection;
+    } else {
+      if (typeof configOrQueryOrCollection === `function`) {
+        collectionRef.current = createLiveQueryCollection({
+          query: configOrQueryOrCollection,
+          startSync: true,
+          gcTime: 0
+          // Live queries created by useLiveQuery are cleaned up immediately
+        });
+      } else {
+        collectionRef.current = createLiveQueryCollection({
+          startSync: true,
+          gcTime: 0,
+          // Live queries created by useLiveQuery are cleaned up immediately
+          ...configOrQueryOrCollection
+        });
+      }
+      depsRef.current = [...deps];
     }
-    return () => {
-      compiledQuery.stop();
+  }
+  const versionRef = useRef(0);
+  const snapshotRef = useRef(null);
+  if (needsNewCollection) {
+    versionRef.current = 0;
+    snapshotRef.current = null;
+  }
+  const subscribeRef = useRef(null);
+  if (!subscribeRef.current || needsNewCollection) {
+    subscribeRef.current = (onStoreChange) => {
+      const unsubscribe = collectionRef.current.subscribeChanges(() => {
+        versionRef.current += 1;
+        onStoreChange();
+      });
+      return () => {
+        unsubscribe();
+      };
+    };
+  }
+  const getSnapshotRef = useRef(null);
+  if (!getSnapshotRef.current || needsNewCollection) {
+    getSnapshotRef.current = () => {
+      const currentVersion = versionRef.current;
+      const currentCollection = collectionRef.current;
+      if (!snapshotRef.current || snapshotRef.current._version !== currentVersion) {
+        snapshotRef.current = {
+          get state() {
+            return new Map(currentCollection.entries());
+          },
+          get data() {
+            return Array.from(currentCollection.values());
+          },
+          collection: currentCollection,
+          _version: currentVersion
+        };
+      }
+      return snapshotRef.current;
     };
-  }, [compiledQuery]);
+  }
+  const snapshot = useSyncExternalStore(
+    subscribeRef.current,
+    getSnapshotRef.current
+  );
   return {
-    state,
-    data,
-    collection: compiledQuery.results
+    state: snapshot.state,
+    data: snapshot.data,
+    collection: snapshot.collection
   };
 }
 export {

package/dist/esm/useLiveQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\"\nimport { useStore } from \"@tanstack/react-store\"\nimport { compileQuery, queryBuilder } from \"@tanstack/db\"\nimport type {\n  Collection,\n  Context,\n  InitialQueryBuilder,\n  QueryBuilder,\n  ResultsFromContext,\n  Schema,\n} from \"@tanstack/db\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: Map<string | number, T>\n  data: Array<T>\n  collection: Collection<T>\n}\n\nexport function useLiveQuery<\n  TResultContext extends Context<Schema> = Context<Schema>,\n>(\n  queryFn: (\n    q: InitialQueryBuilder<Context<Schema>>\n  ) => QueryBuilder<TResultContext>,\n  deps: Array<unknown> = []\n): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {\n  const [restart, forceRestart] = useState(0)\n\n  const compiledQuery = useMemo(() => {\n    const query = queryFn(queryBuilder())\n    const compiled = compileQuery(query)\n    compiled.start()\n    return compiled\n  }, [...deps, restart])\n\n  const state = useStore(compiledQuery.results.asStoreMap())\n  const data = useStore(compiledQuery.results.asStoreArray())\n\n  // Clean up on unmount\n  useEffect(() => {\n    if (compiledQuery.state === `stopped`) {\n      forceRestart((count) => {\n        return (count += 1)\n      })\n    }\n\n    return () => {\n      compiledQuery.stop()\n    }\n  }, [compiledQuery])\n\n  return {\n    state,\n    data,\n    collection: compiledQuery.results,\n  }\n}\n"],"names":[],"mappings":";;;AAkBO,SAAS,aAGd,SAGA,OAAuB,IACiC;AACxD,QAAM,CAAC,SAAS,YAAY,IAAI,SAAS,CAAC;AAEpC,QAAA,gBAAgB,QAAQ,MAAM;AAC5B,UAAA,QAAQ,QAAQ,cAAc;AAC9B,UAAA,WAAW,aAAa,KAAK;AACnC,aAAS,MAAM;AACR,WAAA;AAAA,EAAA,GACN,CAAC,GAAG,MAAM,OAAO,CAAC;AAErB,QAAM,QAAQ,SAAS,cAAc,QAAQ,YAAY;AACzD,QAAM,OAAO,SAAS,cAAc,QAAQ,cAAc;AAG1D,YAAU,MAAM;AACV,QAAA,cAAc,UAAU,WAAW;AACrC,mBAAa,CAAC,UAAU;AACtB,eAAQ,SAAS;AAAA,MAAA,CAClB;AAAA,IAAA;AAGH,WAAO,MAAM;AACX,oBAAc,KAAK;AAAA,IACrB;AAAA,EAAA,GACC,CAAC,aAAa,CAAC;AAEX,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,cAAc;AAAA,EAC5B;AACF;"}
+{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { useRef, useSyncExternalStore } from \"react\"\nimport { createLiveQueryCollection } from \"@tanstack/db\"\nimport type {\n  Collection,\n  Context,\n  GetResult,\n  InitialQueryBuilder,\n  LiveQueryCollectionConfig,\n  QueryBuilder,\n} from \"@tanstack/db\"\n\n// Overload 1: Accept just the query function\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  deps?: Array<unknown>\n): {\n  state: Map<string | number, GetResult<TContext>>\n  data: Array<GetResult<TContext>>\n  collection: Collection<GetResult<TContext>, string | number, {}>\n}\n\n// Overload 2: Accept config object\nexport function useLiveQuery<TContext extends Context>(\n  config: LiveQueryCollectionConfig<TContext>,\n  deps?: Array<unknown>\n): {\n  state: Map<string | number, GetResult<TContext>>\n  data: Array<GetResult<TContext>>\n  collection: Collection<GetResult<TContext>, string | number, {}>\n}\n\n// Overload 3: Accept pre-created live query collection\nexport function useLiveQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Collection<TResult, TKey, TUtils>\n): {\n  state: Map<TKey, TResult>\n  data: Array<TResult>\n  collection: Collection<TResult, TKey, TUtils>\n}\n\n// Implementation - use function overloads to infer the actual collection type\nexport function useLiveQuery(\n  configOrQueryOrCollection: any,\n  deps: Array<unknown> = []\n) {\n  // Check if it's already a collection by checking for specific collection methods\n  const isCollection =\n    configOrQueryOrCollection &&\n    typeof configOrQueryOrCollection === `object` &&\n    typeof configOrQueryOrCollection.subscribeChanges === `function` &&\n    typeof configOrQueryOrCollection.startSyncImmediate === `function` &&\n    typeof configOrQueryOrCollection.id === `string`\n\n  // Use refs to cache collection and track dependencies\n  const collectionRef = useRef<any>(null)\n  const depsRef = useRef<Array<unknown> | null>(null)\n  const configRef = useRef<any>(null)\n\n  // Check if we need to create/recreate the collection\n  const needsNewCollection =\n    !collectionRef.current ||\n    (isCollection && configRef.current !== configOrQueryOrCollection) ||\n    (!isCollection &&\n      (depsRef.current === null ||\n        depsRef.current.length !== deps.length ||\n        depsRef.current.some((dep, i) => dep !== deps[i])))\n\n  if (needsNewCollection) {\n    if (isCollection) {\n      // It's already a collection, ensure sync is started for React hooks\n      configOrQueryOrCollection.startSyncImmediate()\n      collectionRef.current = configOrQueryOrCollection\n      configRef.current = configOrQueryOrCollection\n    } else {\n      // Original logic for creating collections\n      // Ensure we always start sync for React hooks\n      if (typeof configOrQueryOrCollection === `function`) {\n        collectionRef.current = createLiveQueryCollection({\n          query: configOrQueryOrCollection,\n          startSync: true,\n          gcTime: 0, // Live queries created by useLiveQuery are cleaned up immediately\n        })\n      } else {\n        collectionRef.current = createLiveQueryCollection({\n          startSync: true,\n          gcTime: 0, // Live queries created by useLiveQuery are cleaned up immediately\n          ...configOrQueryOrCollection,\n        })\n      }\n      depsRef.current = [...deps]\n    }\n  }\n\n  // Use refs to track version and memoized snapshot\n  const versionRef = useRef(0)\n  const snapshotRef = useRef<{\n    state: Map<any, any>\n    data: Array<any>\n    collection: Collection<any, any, any>\n    _version: number\n  } | null>(null)\n\n  // Reset refs when collection changes\n  if (needsNewCollection) {\n    versionRef.current = 0\n    snapshotRef.current = null\n  }\n\n  // Create stable subscribe function using ref\n  const subscribeRef = useRef<\n    ((onStoreChange: () => void) => () => void) | null\n  >(null)\n  if (!subscribeRef.current || needsNewCollection) {\n    subscribeRef.current = (onStoreChange: () => void) => {\n      const unsubscribe = collectionRef.current!.subscribeChanges(() => {\n        versionRef.current += 1\n        onStoreChange()\n      })\n      return () => {\n        unsubscribe()\n      }\n    }\n  }\n\n  // Create stable getSnapshot function using ref\n  const getSnapshotRef = useRef<\n    | (() => {\n        state: Map<any, any>\n        data: Array<any>\n        collection: Collection<any, any, any>\n      })\n    | null\n  >(null)\n  if (!getSnapshotRef.current || needsNewCollection) {\n    getSnapshotRef.current = () => {\n      const currentVersion = versionRef.current\n      const currentCollection = collectionRef.current!\n\n      // If we don't have a snapshot or the version changed, create a new one\n      if (\n        !snapshotRef.current ||\n        snapshotRef.current._version !== currentVersion\n      ) {\n        snapshotRef.current = {\n          get state() {\n            return new Map(currentCollection.entries())\n          },\n          get data() {\n            return Array.from(currentCollection.values())\n          },\n          collection: currentCollection,\n          _version: currentVersion,\n        }\n      }\n\n      return snapshotRef.current\n    }\n  }\n\n  // Use useSyncExternalStore to subscribe to collection changes\n  const snapshot = useSyncExternalStore(\n    subscribeRef.current,\n    getSnapshotRef.current\n  )\n\n  return {\n    state: snapshot.state,\n    data: snapshot.data,\n    collection: snapshot.collection,\n  }\n}\n"],"names":[],"mappings":";;AA6CO,SAAS,aACd,2BACA,OAAuB,IACvB;AAEA,QAAM,eACJ,6BACA,OAAO,8BAA8B,YACrC,OAAO,0BAA0B,qBAAqB,cACtD,OAAO,0BAA0B,uBAAuB,cACxD,OAAO,0BAA0B,OAAO;AAGpC,QAAA,gBAAgB,OAAY,IAAI;AAChC,QAAA,UAAU,OAA8B,IAAI;AAC5C,QAAA,YAAY,OAAY,IAAI;AAG5B,QAAA,qBACJ,CAAC,cAAc,WACd,gBAAgB,UAAU,YAAY,6BACtC,CAAC,iBACC,QAAQ,YAAY,QACnB,QAAQ,QAAQ,WAAW,KAAK,UAChC,QAAQ,QAAQ,KAAK,CAAC,KAAK,MAAM,QAAQ,KAAK,CAAC,CAAC;AAEtD,MAAI,oBAAoB;AACtB,QAAI,cAAc;AAEhB,gCAA0B,mBAAmB;AAC7C,oBAAc,UAAU;AACxB,gBAAU,UAAU;AAAA,IAAA,OACf;AAGD,UAAA,OAAO,8BAA8B,YAAY;AACnD,sBAAc,UAAU,0BAA0B;AAAA,UAChD,OAAO;AAAA,UACP,WAAW;AAAA,UACX,QAAQ;AAAA;AAAA,QAAA,CACT;AAAA,MAAA,OACI;AACL,sBAAc,UAAU,0BAA0B;AAAA,UAChD,WAAW;AAAA,UACX,QAAQ;AAAA;AAAA,UACR,GAAG;AAAA,QAAA,CACJ;AAAA,MAAA;AAEK,cAAA,UAAU,CAAC,GAAG,IAAI;AAAA,IAAA;AAAA,EAC5B;AAII,QAAA,aAAa,OAAO,CAAC;AACrB,QAAA,cAAc,OAKV,IAAI;AAGd,MAAI,oBAAoB;AACtB,eAAW,UAAU;AACrB,gBAAY,UAAU;AAAA,EAAA;AAIlB,QAAA,eAAe,OAEnB,IAAI;AACF,MAAA,CAAC,aAAa,WAAW,oBAAoB;AAClC,iBAAA,UAAU,CAAC,kBAA8B;AACpD,YAAM,cAAc,cAAc,QAAS,iBAAiB,MAAM;AAChE,mBAAW,WAAW;AACR,sBAAA;AAAA,MAAA,CACf;AACD,aAAO,MAAM;AACC,oBAAA;AAAA,MACd;AAAA,IACF;AAAA,EAAA;AAII,QAAA,iBAAiB,OAOrB,IAAI;AACF,MAAA,CAAC,eAAe,WAAW,oBAAoB;AACjD,mBAAe,UAAU,MAAM;AAC7B,YAAM,iBAAiB,WAAW;AAClC,YAAM,oBAAoB,cAAc;AAGxC,UACE,CAAC,YAAY,WACb,YAAY,QAAQ,aAAa,gBACjC;AACA,oBAAY,UAAU;AAAA,UACpB,IAAI,QAAQ;AACV,mBAAO,IAAI,IAAI,kBAAkB,SAAS;AAAA,UAC5C;AAAA,UACA,IAAI,OAAO;AACT,mBAAO,MAAM,KAAK,kBAAkB,OAAA,CAAQ;AAAA,UAC9C;AAAA,UACA,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ;AAAA,MAAA;AAGF,aAAO,YAAY;AAAA,IACrB;AAAA,EAAA;AAIF,QAAM,WAAW;AAAA,IACf,aAAa;AAAA,IACb,eAAe;AAAA,EACjB;AAEO,SAAA;AAAA,IACL,OAAO,SAAS;AAAA,IAChB,MAAM,SAAS;AAAA,IACf,YAAY,SAAS;AAAA,EACvB;AACF;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-db",
   "description": "React integration for @tanstack/db",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "author": "Kyle Mathews",
   "license": "MIT",
   "repository": {
@@ -16,9 +16,8 @@
     "typescript"
   ],
   "dependencies": {
-    "@tanstack/react-store": "^0.7.0",
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/db": "0.0.14"
+    "@tanstack/db": "0.0.16"
   },
   "devDependencies": {
     "@electric-sql/client": "1.0.0",

package/src/useLiveQuery.ts

@@ -1,57 +1,175 @@
-import { useEffect, useMemo, useState } from "react"
-import { useStore } from "@tanstack/react-store"
-import { compileQuery, queryBuilder } from "@tanstack/db"
+import { useRef, useSyncExternalStore } from "react"
+import { createLiveQueryCollection } from "@tanstack/db"
 import type {
   Collection,
   Context,
+  GetResult,
   InitialQueryBuilder,
+  LiveQueryCollectionConfig,
   QueryBuilder,
-  ResultsFromContext,
-  Schema,
 } from "@tanstack/db"
 
-export interface UseLiveQueryReturn<T extends object> {
-  state: Map<string | number, T>
-  data: Array<T>
-  collection: Collection<T>
+// Overload 1: Accept just the query function
+export function useLiveQuery<TContext extends Context>(
+  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,
+  deps?: Array<unknown>
+): {
+  state: Map<string | number, GetResult<TContext>>
+  data: Array<GetResult<TContext>>
+  collection: Collection<GetResult<TContext>, string | number, {}>
 }
 
+// Overload 2: Accept config object
+export function useLiveQuery<TContext extends Context>(
+  config: LiveQueryCollectionConfig<TContext>,
+  deps?: Array<unknown>
+): {
+  state: Map<string | number, GetResult<TContext>>
+  data: Array<GetResult<TContext>>
+  collection: Collection<GetResult<TContext>, string | number, {}>
+}
+
+// Overload 3: Accept pre-created live query collection
 export function useLiveQuery<
-  TResultContext extends Context<Schema> = Context<Schema>,
+  TResult extends object,
+  TKey extends string | number,
+  TUtils extends Record<string, any>,
 >(
-  queryFn: (
-    q: InitialQueryBuilder<Context<Schema>>
-  ) => QueryBuilder<TResultContext>,
+  liveQueryCollection: Collection<TResult, TKey, TUtils>
+): {
+  state: Map<TKey, TResult>
+  data: Array<TResult>
+  collection: Collection<TResult, TKey, TUtils>
+}
+
+// Implementation - use function overloads to infer the actual collection type
+export function useLiveQuery(
+  configOrQueryOrCollection: any,
   deps: Array<unknown> = []
-): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {
-  const [restart, forceRestart] = useState(0)
-
-  const compiledQuery = useMemo(() => {
-    const query = queryFn(queryBuilder())
-    const compiled = compileQuery(query)
-    compiled.start()
-    return compiled
-  }, [...deps, restart])
-
-  const state = useStore(compiledQuery.results.asStoreMap())
-  const data = useStore(compiledQuery.results.asStoreArray())
-
-  // Clean up on unmount
-  useEffect(() => {
-    if (compiledQuery.state === `stopped`) {
-      forceRestart((count) => {
-        return (count += 1)
+) {
+  // Check if it's already a collection by checking for specific collection methods
+  const isCollection =
+    configOrQueryOrCollection &&
+    typeof configOrQueryOrCollection === `object` &&
+    typeof configOrQueryOrCollection.subscribeChanges === `function` &&
+    typeof configOrQueryOrCollection.startSyncImmediate === `function` &&
+    typeof configOrQueryOrCollection.id === `string`
+
+  // Use refs to cache collection and track dependencies
+  const collectionRef = useRef<any>(null)
+  const depsRef = useRef<Array<unknown> | null>(null)
+  const configRef = useRef<any>(null)
+
+  // Check if we need to create/recreate the collection
+  const needsNewCollection =
+    !collectionRef.current ||
+    (isCollection && configRef.current !== configOrQueryOrCollection) ||
+    (!isCollection &&
+      (depsRef.current === null ||
+        depsRef.current.length !== deps.length ||
+        depsRef.current.some((dep, i) => dep !== deps[i])))
+
+  if (needsNewCollection) {
+    if (isCollection) {
+      // It's already a collection, ensure sync is started for React hooks
+      configOrQueryOrCollection.startSyncImmediate()
+      collectionRef.current = configOrQueryOrCollection
+      configRef.current = configOrQueryOrCollection
+    } else {
+      // Original logic for creating collections
+      // Ensure we always start sync for React hooks
+      if (typeof configOrQueryOrCollection === `function`) {
+        collectionRef.current = createLiveQueryCollection({
+          query: configOrQueryOrCollection,
+          startSync: true,
+          gcTime: 0, // Live queries created by useLiveQuery are cleaned up immediately
+        })
+      } else {
+        collectionRef.current = createLiveQueryCollection({
+          startSync: true,
+          gcTime: 0, // Live queries created by useLiveQuery are cleaned up immediately
+          ...configOrQueryOrCollection,
+        })
+      }
+      depsRef.current = [...deps]
+    }
+  }
+
+  // Use refs to track version and memoized snapshot
+  const versionRef = useRef(0)
+  const snapshotRef = useRef<{
+    state: Map<any, any>
+    data: Array<any>
+    collection: Collection<any, any, any>
+    _version: number
+  } | null>(null)
+
+  // Reset refs when collection changes
+  if (needsNewCollection) {
+    versionRef.current = 0
+    snapshotRef.current = null
+  }
+
+  // Create stable subscribe function using ref
+  const subscribeRef = useRef<
+    ((onStoreChange: () => void) => () => void) | null
+  >(null)
+  if (!subscribeRef.current || needsNewCollection) {
+    subscribeRef.current = (onStoreChange: () => void) => {
+      const unsubscribe = collectionRef.current!.subscribeChanges(() => {
+        versionRef.current += 1
+        onStoreChange()
       })
+      return () => {
+        unsubscribe()
+      }
     }
+  }
 
-    return () => {
-      compiledQuery.stop()
+  // Create stable getSnapshot function using ref
+  const getSnapshotRef = useRef<
+    | (() => {
+        state: Map<any, any>
+        data: Array<any>
+        collection: Collection<any, any, any>
+      })
+    | null
+  >(null)
+  if (!getSnapshotRef.current || needsNewCollection) {
+    getSnapshotRef.current = () => {
+      const currentVersion = versionRef.current
+      const currentCollection = collectionRef.current!
+
+      // If we don't have a snapshot or the version changed, create a new one
+      if (
+        !snapshotRef.current ||
+        snapshotRef.current._version !== currentVersion
+      ) {
+        snapshotRef.current = {
+          get state() {
+            return new Map(currentCollection.entries())
+          },
+          get data() {
+            return Array.from(currentCollection.values())
+          },
+          collection: currentCollection,
+          _version: currentVersion,
+        }
+      }
+
+      return snapshotRef.current
     }
-  }, [compiledQuery])
+  }
+
+  // Use useSyncExternalStore to subscribe to collection changes
+  const snapshot = useSyncExternalStore(
+    subscribeRef.current,
+    getSnapshotRef.current
+  )
 
   return {
-    state,
-    data,
-    collection: compiledQuery.results,
+    state: snapshot.state,
+    data: snapshot.data,
+    collection: snapshot.collection,
   }
 }