@tanstack/vue-db 0.0.12 → 0.0.14

package/dist/cjs/useLiveQuery.cjs

@@ -1,34 +1,92 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const vueStore = require("@tanstack/vue-store");
 const db = require("@tanstack/db");
-function useLiveQuery(queryFn, deps = []) {
-  const compiledQuery = vue.computed(() => {
+function useLiveQuery(configOrQueryOrCollection, deps = []) {
+  const collection = vue.computed(() => {
+    let unwrappedParam = configOrQueryOrCollection;
+    try {
+      const potentiallyUnwrapped = vue.toValue(configOrQueryOrCollection);
+      if (potentiallyUnwrapped !== configOrQueryOrCollection) {
+        unwrappedParam = potentiallyUnwrapped;
+      }
+    } catch {
+      unwrappedParam = configOrQueryOrCollection;
+    }
+    const isCollection = unwrappedParam && typeof unwrappedParam === `object` && typeof unwrappedParam.subscribeChanges === `function` && typeof unwrappedParam.startSyncImmediate === `function` && typeof unwrappedParam.id === `string`;
+    if (isCollection) {
+      unwrappedParam.startSyncImmediate();
+      return unwrappedParam;
+    }
     deps.forEach((dep) => vue.toValue(dep));
-    const query = queryFn(db.queryBuilder());
-    const compiled = db.compileQuery(query);
-    compiled.start();
-    return compiled;
-  });
-  const state = vue.computed(() => {
-    return vueStore.useStore(compiledQuery.value.results.asStoreMap()).value;
-  });
-  const data = vue.computed(() => {
-    return vueStore.useStore(compiledQuery.value.results.asStoreArray()).value;
+    if (typeof unwrappedParam === `function`) {
+      return db.createLiveQueryCollection({
+        query: unwrappedParam,
+        startSync: true
+      });
+    } else {
+      return db.createLiveQueryCollection({
+        ...unwrappedParam,
+        startSync: true
+      });
+    }
   });
-  vue.watch(compiledQuery, (newQuery, oldQuery, onInvalidate) => {
-    if (newQuery.state === `stopped`) {
-      newQuery.start();
+  const state = vue.reactive(/* @__PURE__ */ new Map());
+  const internalData = vue.reactive([]);
+  const data = vue.computed(() => internalData);
+  const syncDataFromCollection = (currentCollection) => {
+    internalData.length = 0;
+    internalData.push(...Array.from(currentCollection.values()));
+  };
+  let currentUnsubscribe = null;
+  vue.watchEffect((onInvalidate) => {
+    const currentCollection = collection.value;
+    if (currentUnsubscribe) {
+      currentUnsubscribe();
+    }
+    state.clear();
+    for (const [key, value] of currentCollection.entries()) {
+      state.set(key, value);
+    }
+    syncDataFromCollection(currentCollection);
+    currentUnsubscribe = currentCollection.subscribeChanges(
+      (changes) => {
+        for (const change of changes) {
+          switch (change.type) {
+            case `insert`:
+            case `update`:
+              state.set(change.key, change.value);
+              break;
+            case `delete`:
+              state.delete(change.key);
+              break;
+          }
+        }
+        syncDataFromCollection(currentCollection);
+      }
+    );
+    if (currentCollection.status === `idle`) {
+      currentCollection.preload().catch(console.error);
     }
     onInvalidate(() => {
-      oldQuery.stop();
+      if (currentUnsubscribe) {
+        currentUnsubscribe();
+        currentUnsubscribe = null;
+      }
     });
   });
+  const instance = vue.getCurrentInstance();
+  if (instance) {
+    vue.onUnmounted(() => {
+      if (currentUnsubscribe) {
+        currentUnsubscribe();
+      }
+    });
+  }
   return {
-    state,
+    state: vue.computed(() => state),
     data,
-    collection: vue.computed(() => compiledQuery.value.results)
+    collection: vue.computed(() => collection.value)
   };
 }
 exports.useLiveQuery = useLiveQuery;

package/dist/cjs/useLiveQuery.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveQuery.cjs","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { computed, toValue, watch } from \"vue\"\nimport { useStore } from \"@tanstack/vue-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\"\nimport type { ComputedRef, MaybeRefOrGetter } from \"vue\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: ComputedRef<Map<string | number, T>>\n  data: ComputedRef<Array<T>>\n  collection: ComputedRef<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<MaybeRefOrGetter<unknown>> = []\n): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {\n  const compiledQuery = computed(() => {\n    // Just reference deps to make computed reactive to them\n    deps.forEach((dep) => toValue(dep))\n\n    const query = queryFn(queryBuilder())\n    const compiled = compileQuery(query)\n    compiled.start()\n    return compiled\n  })\n\n  const state = computed(() => {\n    return useStore(compiledQuery.value.results.asStoreMap()).value\n  })\n  const data = computed(() => {\n    return useStore(compiledQuery.value.results.asStoreArray()).value\n  })\n\n  watch(compiledQuery, (newQuery, oldQuery, onInvalidate) => {\n    if (newQuery.state === `stopped`) {\n      newQuery.start()\n    }\n\n    onInvalidate(() => {\n      oldQuery.stop()\n    })\n  })\n\n  return {\n    state,\n    data,\n    collection: computed(() => compiledQuery.value.results),\n  }\n}\n"],"names":["computed","toValue","queryBuilder","compileQuery","useStore","watch"],"mappings":";;;;;AAmBO,SAAS,aAGd,SAGA,OAAyC,IACe;AAClD,QAAA,gBAAgBA,IAAAA,SAAS,MAAM;AAEnC,SAAK,QAAQ,CAAC,QAAQC,IAAA,QAAQ,GAAG,CAAC;AAE5B,UAAA,QAAQ,QAAQC,GAAAA,cAAc;AAC9B,UAAA,WAAWC,gBAAa,KAAK;AACnC,aAAS,MAAM;AACR,WAAA;AAAA,EAAA,CACR;AAEK,QAAA,QAAQH,IAAAA,SAAS,MAAM;AAC3B,WAAOI,SAAAA,SAAS,cAAc,MAAM,QAAQ,WAAY,CAAA,EAAE;AAAA,EAAA,CAC3D;AACK,QAAA,OAAOJ,IAAAA,SAAS,MAAM;AAC1B,WAAOI,SAAAA,SAAS,cAAc,MAAM,QAAQ,aAAc,CAAA,EAAE;AAAA,EAAA,CAC7D;AAEDC,MAAAA,MAAM,eAAe,CAAC,UAAU,UAAU,iBAAiB;AACrD,QAAA,SAAS,UAAU,WAAW;AAChC,eAAS,MAAM;AAAA,IAAA;AAGjB,iBAAa,MAAM;AACjB,eAAS,KAAK;AAAA,IAAA,CACf;AAAA,EAAA,CACF;AAEM,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAYL,IAAA,SAAS,MAAM,cAAc,MAAM,OAAO;AAAA,EACxD;AACF;;"}
+{"version":3,"file":"useLiveQuery.cjs","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onUnmounted,\n  reactive,\n  toValue,\n  watchEffect,\n} from \"vue\"\nimport { createLiveQueryCollection } from \"@tanstack/db\"\nimport type {\n  ChangeMessage,\n  Collection,\n  Context,\n  GetResult,\n  InitialQueryBuilder,\n  LiveQueryCollectionConfig,\n  QueryBuilder,\n} from \"@tanstack/db\"\nimport type { ComputedRef, MaybeRefOrGetter } from \"vue\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: ComputedRef<Map<string | number, T>>\n  data: ComputedRef<Array<T>>\n  collection: ComputedRef<Collection<T, string | number, {}>>\n}\n\nexport interface UseLiveQueryReturnWithCollection<\n  T extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n> {\n  state: ComputedRef<Map<TKey, T>>\n  data: ComputedRef<Array<T>>\n  collection: ComputedRef<Collection<T, TKey, TUtils>>\n}\n\n// Overload 1: Accept just the query function\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  deps?: Array<MaybeRefOrGetter<unknown>>\n): UseLiveQueryReturn<GetResult<TContext>>\n\n// Overload 2: Accept config object\nexport function useLiveQuery<TContext extends Context>(\n  config: LiveQueryCollectionConfig<TContext>,\n  deps?: Array<MaybeRefOrGetter<unknown>>\n): UseLiveQueryReturn<GetResult<TContext>>\n\n// Overload 3: Accept pre-created live query collection (can be reactive)\nexport function useLiveQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: MaybeRefOrGetter<Collection<TResult, TKey, TUtils>>\n): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>\n\n// Implementation\nexport function useLiveQuery(\n  configOrQueryOrCollection: any,\n  deps: Array<MaybeRefOrGetter<unknown>> = []\n): UseLiveQueryReturn<any> | UseLiveQueryReturnWithCollection<any, any, any> {\n  const collection = computed(() => {\n    // First check if the original parameter might be a ref/getter\n    // by seeing if toValue returns something different than the original\n    let unwrappedParam = configOrQueryOrCollection\n    try {\n      const potentiallyUnwrapped = toValue(configOrQueryOrCollection)\n      if (potentiallyUnwrapped !== configOrQueryOrCollection) {\n        unwrappedParam = potentiallyUnwrapped\n      }\n    } catch {\n      // If toValue fails, use original parameter\n      unwrappedParam = configOrQueryOrCollection\n    }\n\n    // Check if it's already a collection by checking for specific collection methods\n    const isCollection =\n      unwrappedParam &&\n      typeof unwrappedParam === `object` &&\n      typeof unwrappedParam.subscribeChanges === `function` &&\n      typeof unwrappedParam.startSyncImmediate === `function` &&\n      typeof unwrappedParam.id === `string`\n\n    if (isCollection) {\n      // It's already a collection, ensure sync is started for Vue hooks\n      unwrappedParam.startSyncImmediate()\n      return unwrappedParam\n    }\n\n    // Reference deps to make computed reactive to them\n    deps.forEach((dep) => toValue(dep))\n\n    // Ensure we always start sync for Vue hooks\n    if (typeof unwrappedParam === `function`) {\n      return createLiveQueryCollection({\n        query: unwrappedParam,\n        startSync: true,\n      })\n    } else {\n      return createLiveQueryCollection({\n        ...unwrappedParam,\n        startSync: true,\n      })\n    }\n  })\n\n  // Reactive state that gets updated granularly through change events\n  const state = reactive(new Map<string | number, any>())\n\n  // Reactive data array that maintains sorted order\n  const internalData = reactive<Array<any>>([])\n\n  // Computed wrapper for the data to match expected return type\n  const data = computed(() => internalData)\n\n  // Helper to sync data array from collection in correct order\n  const syncDataFromCollection = (\n    currentCollection: Collection<any, any, any>\n  ) => {\n    internalData.length = 0\n    internalData.push(...Array.from(currentCollection.values()))\n  }\n\n  // Track current unsubscribe function\n  let currentUnsubscribe: (() => void) | null = null\n\n  // Watch for collection changes and subscribe to updates\n  watchEffect((onInvalidate) => {\n    const currentCollection = collection.value\n\n    // Clean up previous subscription\n    if (currentUnsubscribe) {\n      currentUnsubscribe()\n    }\n\n    // Initialize state with current collection data\n    state.clear()\n    for (const [key, value] of currentCollection.entries()) {\n      state.set(key, value)\n    }\n\n    // Initialize data array in correct order\n    syncDataFromCollection(currentCollection)\n\n    // Subscribe to collection changes with granular updates\n    currentUnsubscribe = currentCollection.subscribeChanges(\n      (changes: Array<ChangeMessage<any>>) => {\n        // Apply each change individually to the reactive state\n        for (const change of changes) {\n          switch (change.type) {\n            case `insert`:\n            case `update`:\n              state.set(change.key, change.value)\n              break\n            case `delete`:\n              state.delete(change.key)\n              break\n          }\n        }\n\n        // Update the data array to maintain sorted order\n        syncDataFromCollection(currentCollection)\n      }\n    )\n\n    // Preload collection data if not already started\n    if (currentCollection.status === `idle`) {\n      currentCollection.preload().catch(console.error)\n    }\n\n    // Cleanup when effect is invalidated\n    onInvalidate(() => {\n      if (currentUnsubscribe) {\n        currentUnsubscribe()\n        currentUnsubscribe = null\n      }\n    })\n  })\n\n  // Cleanup on unmount (only if we're in a component context)\n  const instance = getCurrentInstance()\n  if (instance) {\n    onUnmounted(() => {\n      if (currentUnsubscribe) {\n        currentUnsubscribe()\n      }\n    })\n  }\n\n  return {\n    state: computed(() => state),\n    data,\n    collection: computed(() => collection.value),\n  }\n}\n"],"names":["computed","toValue","createLiveQueryCollection","reactive","watchEffect","getCurrentInstance","onUnmounted"],"mappings":";;;;AA0DO,SAAS,aACd,2BACA,OAAyC,IACkC;AACrE,QAAA,aAAaA,IAAAA,SAAS,MAAM;AAGhC,QAAI,iBAAiB;AACjB,QAAA;AACI,YAAA,uBAAuBC,YAAQ,yBAAyB;AAC9D,UAAI,yBAAyB,2BAA2B;AACrC,yBAAA;AAAA,MAAA;AAAA,IACnB,QACM;AAEW,uBAAA;AAAA,IAAA;AAInB,UAAM,eACJ,kBACA,OAAO,mBAAmB,YAC1B,OAAO,eAAe,qBAAqB,cAC3C,OAAO,eAAe,uBAAuB,cAC7C,OAAO,eAAe,OAAO;AAE/B,QAAI,cAAc;AAEhB,qBAAe,mBAAmB;AAC3B,aAAA;AAAA,IAAA;AAIT,SAAK,QAAQ,CAAC,QAAQA,IAAA,QAAQ,GAAG,CAAC;AAG9B,QAAA,OAAO,mBAAmB,YAAY;AACxC,aAAOC,6BAA0B;AAAA,QAC/B,OAAO;AAAA,QACP,WAAW;AAAA,MAAA,CACZ;AAAA,IAAA,OACI;AACL,aAAOA,6BAA0B;AAAA,QAC/B,GAAG;AAAA,QACH,WAAW;AAAA,MAAA,CACZ;AAAA,IAAA;AAAA,EACH,CACD;AAGD,QAAM,QAAQC,IAAAA,SAAa,oBAAA,KAA2B;AAGhD,QAAA,eAAeA,IAAqB,SAAA,EAAE;AAGtC,QAAA,OAAOH,aAAS,MAAM,YAAY;AAGlC,QAAA,yBAAyB,CAC7B,sBACG;AACH,iBAAa,SAAS;AACtB,iBAAa,KAAK,GAAG,MAAM,KAAK,kBAAkB,OAAA,CAAQ,CAAC;AAAA,EAC7D;AAGA,MAAI,qBAA0C;AAG9CI,MAAA,YAAY,CAAC,iBAAiB;AAC5B,UAAM,oBAAoB,WAAW;AAGrC,QAAI,oBAAoB;AACH,yBAAA;AAAA,IAAA;AAIrB,UAAM,MAAM;AACZ,eAAW,CAAC,KAAK,KAAK,KAAK,kBAAkB,WAAW;AAChD,YAAA,IAAI,KAAK,KAAK;AAAA,IAAA;AAItB,2BAAuB,iBAAiB;AAGxC,yBAAqB,kBAAkB;AAAA,MACrC,CAAC,YAAuC;AAEtC,mBAAW,UAAU,SAAS;AAC5B,kBAAQ,OAAO,MAAM;AAAA,YACnB,KAAK;AAAA,YACL,KAAK;AACH,oBAAM,IAAI,OAAO,KAAK,OAAO,KAAK;AAClC;AAAA,YACF,KAAK;AACG,oBAAA,OAAO,OAAO,GAAG;AACvB;AAAA,UAAA;AAAA,QACJ;AAIF,+BAAuB,iBAAiB;AAAA,MAAA;AAAA,IAE5C;AAGI,QAAA,kBAAkB,WAAW,QAAQ;AACvC,wBAAkB,QAAQ,EAAE,MAAM,QAAQ,KAAK;AAAA,IAAA;AAIjD,iBAAa,MAAM;AACjB,UAAI,oBAAoB;AACH,2BAAA;AACE,6BAAA;AAAA,MAAA;AAAA,IACvB,CACD;AAAA,EAAA,CACF;AAGD,QAAM,WAAWC,IAAAA,mBAAmB;AACpC,MAAI,UAAU;AACZC,QAAAA,YAAY,MAAM;AAChB,UAAI,oBAAoB;AACH,2BAAA;AAAA,MAAA;AAAA,IACrB,CACD;AAAA,EAAA;AAGI,SAAA;AAAA,IACL,OAAON,IAAAA,SAAS,MAAM,KAAK;AAAA,IAC3B;AAAA,IACA,YAAYA,IAAAA,SAAS,MAAM,WAAW,KAAK;AAAA,EAC7C;AACF;;"}

package/dist/cjs/useLiveQuery.d.cts

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

package/dist/esm/useLiveQuery.d.ts

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

package/dist/esm/useLiveQuery.js

@@ -1,32 +1,90 @@
-import { computed, toValue, watch } from "vue";
-import { useStore } from "@tanstack/vue-store";
-import { queryBuilder, compileQuery } from "@tanstack/db";
-function useLiveQuery(queryFn, deps = []) {
-  const compiledQuery = computed(() => {
+import { computed, toValue, reactive, watchEffect, getCurrentInstance, onUnmounted } from "vue";
+import { createLiveQueryCollection } from "@tanstack/db";
+function useLiveQuery(configOrQueryOrCollection, deps = []) {
+  const collection = computed(() => {
+    let unwrappedParam = configOrQueryOrCollection;
+    try {
+      const potentiallyUnwrapped = toValue(configOrQueryOrCollection);
+      if (potentiallyUnwrapped !== configOrQueryOrCollection) {
+        unwrappedParam = potentiallyUnwrapped;
+      }
+    } catch {
+      unwrappedParam = configOrQueryOrCollection;
+    }
+    const isCollection = unwrappedParam && typeof unwrappedParam === `object` && typeof unwrappedParam.subscribeChanges === `function` && typeof unwrappedParam.startSyncImmediate === `function` && typeof unwrappedParam.id === `string`;
+    if (isCollection) {
+      unwrappedParam.startSyncImmediate();
+      return unwrappedParam;
+    }
     deps.forEach((dep) => toValue(dep));
-    const query = queryFn(queryBuilder());
-    const compiled = compileQuery(query);
-    compiled.start();
-    return compiled;
-  });
-  const state = computed(() => {
-    return useStore(compiledQuery.value.results.asStoreMap()).value;
-  });
-  const data = computed(() => {
-    return useStore(compiledQuery.value.results.asStoreArray()).value;
+    if (typeof unwrappedParam === `function`) {
+      return createLiveQueryCollection({
+        query: unwrappedParam,
+        startSync: true
+      });
+    } else {
+      return createLiveQueryCollection({
+        ...unwrappedParam,
+        startSync: true
+      });
+    }
   });
-  watch(compiledQuery, (newQuery, oldQuery, onInvalidate) => {
-    if (newQuery.state === `stopped`) {
-      newQuery.start();
+  const state = reactive(/* @__PURE__ */ new Map());
+  const internalData = reactive([]);
+  const data = computed(() => internalData);
+  const syncDataFromCollection = (currentCollection) => {
+    internalData.length = 0;
+    internalData.push(...Array.from(currentCollection.values()));
+  };
+  let currentUnsubscribe = null;
+  watchEffect((onInvalidate) => {
+    const currentCollection = collection.value;
+    if (currentUnsubscribe) {
+      currentUnsubscribe();
+    }
+    state.clear();
+    for (const [key, value] of currentCollection.entries()) {
+      state.set(key, value);
+    }
+    syncDataFromCollection(currentCollection);
+    currentUnsubscribe = currentCollection.subscribeChanges(
+      (changes) => {
+        for (const change of changes) {
+          switch (change.type) {
+            case `insert`:
+            case `update`:
+              state.set(change.key, change.value);
+              break;
+            case `delete`:
+              state.delete(change.key);
+              break;
+          }
+        }
+        syncDataFromCollection(currentCollection);
+      }
+    );
+    if (currentCollection.status === `idle`) {
+      currentCollection.preload().catch(console.error);
     }
     onInvalidate(() => {
-      oldQuery.stop();
+      if (currentUnsubscribe) {
+        currentUnsubscribe();
+        currentUnsubscribe = null;
+      }
     });
   });
+  const instance = getCurrentInstance();
+  if (instance) {
+    onUnmounted(() => {
+      if (currentUnsubscribe) {
+        currentUnsubscribe();
+      }
+    });
+  }
   return {
-    state,
+    state: computed(() => state),
     data,
-    collection: computed(() => compiledQuery.value.results)
+    collection: computed(() => collection.value)
   };
 }
 export {

package/dist/esm/useLiveQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import { computed, toValue, watch } from \"vue\"\nimport { useStore } from \"@tanstack/vue-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\"\nimport type { ComputedRef, MaybeRefOrGetter } from \"vue\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: ComputedRef<Map<string | number, T>>\n  data: ComputedRef<Array<T>>\n  collection: ComputedRef<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<MaybeRefOrGetter<unknown>> = []\n): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {\n  const compiledQuery = computed(() => {\n    // Just reference deps to make computed reactive to them\n    deps.forEach((dep) => toValue(dep))\n\n    const query = queryFn(queryBuilder())\n    const compiled = compileQuery(query)\n    compiled.start()\n    return compiled\n  })\n\n  const state = computed(() => {\n    return useStore(compiledQuery.value.results.asStoreMap()).value\n  })\n  const data = computed(() => {\n    return useStore(compiledQuery.value.results.asStoreArray()).value\n  })\n\n  watch(compiledQuery, (newQuery, oldQuery, onInvalidate) => {\n    if (newQuery.state === `stopped`) {\n      newQuery.start()\n    }\n\n    onInvalidate(() => {\n      oldQuery.stop()\n    })\n  })\n\n  return {\n    state,\n    data,\n    collection: computed(() => compiledQuery.value.results),\n  }\n}\n"],"names":[],"mappings":";;;AAmBO,SAAS,aAGd,SAGA,OAAyC,IACe;AAClD,QAAA,gBAAgB,SAAS,MAAM;AAEnC,SAAK,QAAQ,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAE5B,UAAA,QAAQ,QAAQ,cAAc;AAC9B,UAAA,WAAW,aAAa,KAAK;AACnC,aAAS,MAAM;AACR,WAAA;AAAA,EAAA,CACR;AAEK,QAAA,QAAQ,SAAS,MAAM;AAC3B,WAAO,SAAS,cAAc,MAAM,QAAQ,WAAY,CAAA,EAAE;AAAA,EAAA,CAC3D;AACK,QAAA,OAAO,SAAS,MAAM;AAC1B,WAAO,SAAS,cAAc,MAAM,QAAQ,aAAc,CAAA,EAAE;AAAA,EAAA,CAC7D;AAED,QAAM,eAAe,CAAC,UAAU,UAAU,iBAAiB;AACrD,QAAA,SAAS,UAAU,WAAW;AAChC,eAAS,MAAM;AAAA,IAAA;AAGjB,iBAAa,MAAM;AACjB,eAAS,KAAK;AAAA,IAAA,CACf;AAAA,EAAA,CACF;AAEM,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,SAAS,MAAM,cAAc,MAAM,OAAO;AAAA,EACxD;AACF;"}
+{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onUnmounted,\n  reactive,\n  toValue,\n  watchEffect,\n} from \"vue\"\nimport { createLiveQueryCollection } from \"@tanstack/db\"\nimport type {\n  ChangeMessage,\n  Collection,\n  Context,\n  GetResult,\n  InitialQueryBuilder,\n  LiveQueryCollectionConfig,\n  QueryBuilder,\n} from \"@tanstack/db\"\nimport type { ComputedRef, MaybeRefOrGetter } from \"vue\"\n\nexport interface UseLiveQueryReturn<T extends object> {\n  state: ComputedRef<Map<string | number, T>>\n  data: ComputedRef<Array<T>>\n  collection: ComputedRef<Collection<T, string | number, {}>>\n}\n\nexport interface UseLiveQueryReturnWithCollection<\n  T extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n> {\n  state: ComputedRef<Map<TKey, T>>\n  data: ComputedRef<Array<T>>\n  collection: ComputedRef<Collection<T, TKey, TUtils>>\n}\n\n// Overload 1: Accept just the query function\nexport function useLiveQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  deps?: Array<MaybeRefOrGetter<unknown>>\n): UseLiveQueryReturn<GetResult<TContext>>\n\n// Overload 2: Accept config object\nexport function useLiveQuery<TContext extends Context>(\n  config: LiveQueryCollectionConfig<TContext>,\n  deps?: Array<MaybeRefOrGetter<unknown>>\n): UseLiveQueryReturn<GetResult<TContext>>\n\n// Overload 3: Accept pre-created live query collection (can be reactive)\nexport function useLiveQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: MaybeRefOrGetter<Collection<TResult, TKey, TUtils>>\n): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>\n\n// Implementation\nexport function useLiveQuery(\n  configOrQueryOrCollection: any,\n  deps: Array<MaybeRefOrGetter<unknown>> = []\n): UseLiveQueryReturn<any> | UseLiveQueryReturnWithCollection<any, any, any> {\n  const collection = computed(() => {\n    // First check if the original parameter might be a ref/getter\n    // by seeing if toValue returns something different than the original\n    let unwrappedParam = configOrQueryOrCollection\n    try {\n      const potentiallyUnwrapped = toValue(configOrQueryOrCollection)\n      if (potentiallyUnwrapped !== configOrQueryOrCollection) {\n        unwrappedParam = potentiallyUnwrapped\n      }\n    } catch {\n      // If toValue fails, use original parameter\n      unwrappedParam = configOrQueryOrCollection\n    }\n\n    // Check if it's already a collection by checking for specific collection methods\n    const isCollection =\n      unwrappedParam &&\n      typeof unwrappedParam === `object` &&\n      typeof unwrappedParam.subscribeChanges === `function` &&\n      typeof unwrappedParam.startSyncImmediate === `function` &&\n      typeof unwrappedParam.id === `string`\n\n    if (isCollection) {\n      // It's already a collection, ensure sync is started for Vue hooks\n      unwrappedParam.startSyncImmediate()\n      return unwrappedParam\n    }\n\n    // Reference deps to make computed reactive to them\n    deps.forEach((dep) => toValue(dep))\n\n    // Ensure we always start sync for Vue hooks\n    if (typeof unwrappedParam === `function`) {\n      return createLiveQueryCollection({\n        query: unwrappedParam,\n        startSync: true,\n      })\n    } else {\n      return createLiveQueryCollection({\n        ...unwrappedParam,\n        startSync: true,\n      })\n    }\n  })\n\n  // Reactive state that gets updated granularly through change events\n  const state = reactive(new Map<string | number, any>())\n\n  // Reactive data array that maintains sorted order\n  const internalData = reactive<Array<any>>([])\n\n  // Computed wrapper for the data to match expected return type\n  const data = computed(() => internalData)\n\n  // Helper to sync data array from collection in correct order\n  const syncDataFromCollection = (\n    currentCollection: Collection<any, any, any>\n  ) => {\n    internalData.length = 0\n    internalData.push(...Array.from(currentCollection.values()))\n  }\n\n  // Track current unsubscribe function\n  let currentUnsubscribe: (() => void) | null = null\n\n  // Watch for collection changes and subscribe to updates\n  watchEffect((onInvalidate) => {\n    const currentCollection = collection.value\n\n    // Clean up previous subscription\n    if (currentUnsubscribe) {\n      currentUnsubscribe()\n    }\n\n    // Initialize state with current collection data\n    state.clear()\n    for (const [key, value] of currentCollection.entries()) {\n      state.set(key, value)\n    }\n\n    // Initialize data array in correct order\n    syncDataFromCollection(currentCollection)\n\n    // Subscribe to collection changes with granular updates\n    currentUnsubscribe = currentCollection.subscribeChanges(\n      (changes: Array<ChangeMessage<any>>) => {\n        // Apply each change individually to the reactive state\n        for (const change of changes) {\n          switch (change.type) {\n            case `insert`:\n            case `update`:\n              state.set(change.key, change.value)\n              break\n            case `delete`:\n              state.delete(change.key)\n              break\n          }\n        }\n\n        // Update the data array to maintain sorted order\n        syncDataFromCollection(currentCollection)\n      }\n    )\n\n    // Preload collection data if not already started\n    if (currentCollection.status === `idle`) {\n      currentCollection.preload().catch(console.error)\n    }\n\n    // Cleanup when effect is invalidated\n    onInvalidate(() => {\n      if (currentUnsubscribe) {\n        currentUnsubscribe()\n        currentUnsubscribe = null\n      }\n    })\n  })\n\n  // Cleanup on unmount (only if we're in a component context)\n  const instance = getCurrentInstance()\n  if (instance) {\n    onUnmounted(() => {\n      if (currentUnsubscribe) {\n        currentUnsubscribe()\n      }\n    })\n  }\n\n  return {\n    state: computed(() => state),\n    data,\n    collection: computed(() => collection.value),\n  }\n}\n"],"names":[],"mappings":";;AA0DO,SAAS,aACd,2BACA,OAAyC,IACkC;AACrE,QAAA,aAAa,SAAS,MAAM;AAGhC,QAAI,iBAAiB;AACjB,QAAA;AACI,YAAA,uBAAuB,QAAQ,yBAAyB;AAC9D,UAAI,yBAAyB,2BAA2B;AACrC,yBAAA;AAAA,MAAA;AAAA,IACnB,QACM;AAEW,uBAAA;AAAA,IAAA;AAInB,UAAM,eACJ,kBACA,OAAO,mBAAmB,YAC1B,OAAO,eAAe,qBAAqB,cAC3C,OAAO,eAAe,uBAAuB,cAC7C,OAAO,eAAe,OAAO;AAE/B,QAAI,cAAc;AAEhB,qBAAe,mBAAmB;AAC3B,aAAA;AAAA,IAAA;AAIT,SAAK,QAAQ,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAG9B,QAAA,OAAO,mBAAmB,YAAY;AACxC,aAAO,0BAA0B;AAAA,QAC/B,OAAO;AAAA,QACP,WAAW;AAAA,MAAA,CACZ;AAAA,IAAA,OACI;AACL,aAAO,0BAA0B;AAAA,QAC/B,GAAG;AAAA,QACH,WAAW;AAAA,MAAA,CACZ;AAAA,IAAA;AAAA,EACH,CACD;AAGD,QAAM,QAAQ,SAAa,oBAAA,KAA2B;AAGhD,QAAA,eAAe,SAAqB,EAAE;AAGtC,QAAA,OAAO,SAAS,MAAM,YAAY;AAGlC,QAAA,yBAAyB,CAC7B,sBACG;AACH,iBAAa,SAAS;AACtB,iBAAa,KAAK,GAAG,MAAM,KAAK,kBAAkB,OAAA,CAAQ,CAAC;AAAA,EAC7D;AAGA,MAAI,qBAA0C;AAG9C,cAAY,CAAC,iBAAiB;AAC5B,UAAM,oBAAoB,WAAW;AAGrC,QAAI,oBAAoB;AACH,yBAAA;AAAA,IAAA;AAIrB,UAAM,MAAM;AACZ,eAAW,CAAC,KAAK,KAAK,KAAK,kBAAkB,WAAW;AAChD,YAAA,IAAI,KAAK,KAAK;AAAA,IAAA;AAItB,2BAAuB,iBAAiB;AAGxC,yBAAqB,kBAAkB;AAAA,MACrC,CAAC,YAAuC;AAEtC,mBAAW,UAAU,SAAS;AAC5B,kBAAQ,OAAO,MAAM;AAAA,YACnB,KAAK;AAAA,YACL,KAAK;AACH,oBAAM,IAAI,OAAO,KAAK,OAAO,KAAK;AAClC;AAAA,YACF,KAAK;AACG,oBAAA,OAAO,OAAO,GAAG;AACvB;AAAA,UAAA;AAAA,QACJ;AAIF,+BAAuB,iBAAiB;AAAA,MAAA;AAAA,IAE5C;AAGI,QAAA,kBAAkB,WAAW,QAAQ;AACvC,wBAAkB,QAAQ,EAAE,MAAM,QAAQ,KAAK;AAAA,IAAA;AAIjD,iBAAa,MAAM;AACjB,UAAI,oBAAoB;AACH,2BAAA;AACE,6BAAA;AAAA,MAAA;AAAA,IACvB,CACD;AAAA,EAAA,CACF;AAGD,QAAM,WAAW,mBAAmB;AACpC,MAAI,UAAU;AACZ,gBAAY,MAAM;AAChB,UAAI,oBAAoB;AACH,2BAAA;AAAA,MAAA;AAAA,IACrB,CACD;AAAA,EAAA;AAGI,SAAA;AAAA,IACL,OAAO,SAAS,MAAM,KAAK;AAAA,IAC3B;AAAA,IACA,YAAY,SAAS,MAAM,WAAW,KAAK;AAAA,EAC7C;AACF;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/vue-db",
   "description": "Vue integration for @tanstack/db",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "author": "Kyle Mathews",
   "license": "MIT",
   "repository": {
@@ -16,13 +16,12 @@
     "typescript"
   ],
   "dependencies": {
-    "@tanstack/vue-store": "^0.7.0",
-    "@tanstack/db": "0.0.13"
+    "@tanstack/db": "0.0.15"
   },
   "devDependencies": {
     "@electric-sql/client": "1.0.0",
-    "@vitest/coverage-istanbul": "^3.0.9",
     "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/coverage-istanbul": "^3.0.9",
     "vue": "^3.5.13"
   },
   "exports": {

package/src/useLiveQuery.ts

@@ -1,60 +1,196 @@
-import { computed, toValue, watch } from "vue"
-import { useStore } from "@tanstack/vue-store"
-import { compileQuery, queryBuilder } from "@tanstack/db"
+import {
+  computed,
+  getCurrentInstance,
+  onUnmounted,
+  reactive,
+  toValue,
+  watchEffect,
+} from "vue"
+import { createLiveQueryCollection } from "@tanstack/db"
 import type {
+  ChangeMessage,
   Collection,
   Context,
+  GetResult,
   InitialQueryBuilder,
+  LiveQueryCollectionConfig,
   QueryBuilder,
-  ResultsFromContext,
-  Schema,
 } from "@tanstack/db"
 import type { ComputedRef, MaybeRefOrGetter } from "vue"
 
 export interface UseLiveQueryReturn<T extends object> {
   state: ComputedRef<Map<string | number, T>>
   data: ComputedRef<Array<T>>
-  collection: ComputedRef<Collection<T>>
+  collection: ComputedRef<Collection<T, string | number, {}>>
 }
 
+export interface UseLiveQueryReturnWithCollection<
+  T extends object,
+  TKey extends string | number,
+  TUtils extends Record<string, any>,
+> {
+  state: ComputedRef<Map<TKey, T>>
+  data: ComputedRef<Array<T>>
+  collection: ComputedRef<Collection<T, TKey, TUtils>>
+}
+
+// Overload 1: Accept just the query function
+export function useLiveQuery<TContext extends Context>(
+  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,
+  deps?: Array<MaybeRefOrGetter<unknown>>
+): UseLiveQueryReturn<GetResult<TContext>>
+
+// Overload 2: Accept config object
+export function useLiveQuery<TContext extends Context>(
+  config: LiveQueryCollectionConfig<TContext>,
+  deps?: Array<MaybeRefOrGetter<unknown>>
+): UseLiveQueryReturn<GetResult<TContext>>
+
+// Overload 3: Accept pre-created live query collection (can be reactive)
 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: MaybeRefOrGetter<Collection<TResult, TKey, TUtils>>
+): UseLiveQueryReturnWithCollection<TResult, TKey, TUtils>
+
+// Implementation
+export function useLiveQuery(
+  configOrQueryOrCollection: any,
   deps: Array<MaybeRefOrGetter<unknown>> = []
-): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {
-  const compiledQuery = computed(() => {
-    // Just reference deps to make computed reactive to them
+): UseLiveQueryReturn<any> | UseLiveQueryReturnWithCollection<any, any, any> {
+  const collection = computed(() => {
+    // First check if the original parameter might be a ref/getter
+    // by seeing if toValue returns something different than the original
+    let unwrappedParam = configOrQueryOrCollection
+    try {
+      const potentiallyUnwrapped = toValue(configOrQueryOrCollection)
+      if (potentiallyUnwrapped !== configOrQueryOrCollection) {
+        unwrappedParam = potentiallyUnwrapped
+      }
+    } catch {
+      // If toValue fails, use original parameter
+      unwrappedParam = configOrQueryOrCollection
+    }
+
+    // Check if it's already a collection by checking for specific collection methods
+    const isCollection =
+      unwrappedParam &&
+      typeof unwrappedParam === `object` &&
+      typeof unwrappedParam.subscribeChanges === `function` &&
+      typeof unwrappedParam.startSyncImmediate === `function` &&
+      typeof unwrappedParam.id === `string`
+
+    if (isCollection) {
+      // It's already a collection, ensure sync is started for Vue hooks
+      unwrappedParam.startSyncImmediate()
+      return unwrappedParam
+    }
+
+    // Reference deps to make computed reactive to them
     deps.forEach((dep) => toValue(dep))
 
-    const query = queryFn(queryBuilder())
-    const compiled = compileQuery(query)
-    compiled.start()
-    return compiled
+    // Ensure we always start sync for Vue hooks
+    if (typeof unwrappedParam === `function`) {
+      return createLiveQueryCollection({
+        query: unwrappedParam,
+        startSync: true,
+      })
+    } else {
+      return createLiveQueryCollection({
+        ...unwrappedParam,
+        startSync: true,
+      })
+    }
   })
 
-  const state = computed(() => {
-    return useStore(compiledQuery.value.results.asStoreMap()).value
-  })
-  const data = computed(() => {
-    return useStore(compiledQuery.value.results.asStoreArray()).value
-  })
+  // Reactive state that gets updated granularly through change events
+  const state = reactive(new Map<string | number, any>())
+
+  // Reactive data array that maintains sorted order
+  const internalData = reactive<Array<any>>([])
 
-  watch(compiledQuery, (newQuery, oldQuery, onInvalidate) => {
-    if (newQuery.state === `stopped`) {
-      newQuery.start()
+  // Computed wrapper for the data to match expected return type
+  const data = computed(() => internalData)
+
+  // Helper to sync data array from collection in correct order
+  const syncDataFromCollection = (
+    currentCollection: Collection<any, any, any>
+  ) => {
+    internalData.length = 0
+    internalData.push(...Array.from(currentCollection.values()))
+  }
+
+  // Track current unsubscribe function
+  let currentUnsubscribe: (() => void) | null = null
+
+  // Watch for collection changes and subscribe to updates
+  watchEffect((onInvalidate) => {
+    const currentCollection = collection.value
+
+    // Clean up previous subscription
+    if (currentUnsubscribe) {
+      currentUnsubscribe()
+    }
+
+    // Initialize state with current collection data
+    state.clear()
+    for (const [key, value] of currentCollection.entries()) {
+      state.set(key, value)
     }
 
+    // Initialize data array in correct order
+    syncDataFromCollection(currentCollection)
+
+    // Subscribe to collection changes with granular updates
+    currentUnsubscribe = currentCollection.subscribeChanges(
+      (changes: Array<ChangeMessage<any>>) => {
+        // Apply each change individually to the reactive state
+        for (const change of changes) {
+          switch (change.type) {
+            case `insert`:
+            case `update`:
+              state.set(change.key, change.value)
+              break
+            case `delete`:
+              state.delete(change.key)
+              break
+          }
+        }
+
+        // Update the data array to maintain sorted order
+        syncDataFromCollection(currentCollection)
+      }
+    )
+
+    // Preload collection data if not already started
+    if (currentCollection.status === `idle`) {
+      currentCollection.preload().catch(console.error)
+    }
+
+    // Cleanup when effect is invalidated
     onInvalidate(() => {
-      oldQuery.stop()
+      if (currentUnsubscribe) {
+        currentUnsubscribe()
+        currentUnsubscribe = null
+      }
     })
   })
 
+  // Cleanup on unmount (only if we're in a component context)
+  const instance = getCurrentInstance()
+  if (instance) {
+    onUnmounted(() => {
+      if (currentUnsubscribe) {
+        currentUnsubscribe()
+      }
+    })
+  }
+
   return {
-    state,
+    state: computed(() => state),
     data,
-    collection: computed(() => compiledQuery.value.results),
+    collection: computed(() => collection.value),
   }
 }