@tanstack/vue-db 0.0.14 → 0.0.16

package/dist/cjs/useLiveQuery.cjs

@@ -34,6 +34,7 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
   const state = vue.reactive(/* @__PURE__ */ new Map());
   const internalData = vue.reactive([]);
   const data = vue.computed(() => internalData);
+  const status = vue.ref(collection.value.status);
   const syncDataFromCollection = (currentCollection) => {
     internalData.length = 0;
     internalData.push(...Array.from(currentCollection.values()));
@@ -41,6 +42,7 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
   let currentUnsubscribe = null;
   vue.watchEffect((onInvalidate) => {
     const currentCollection = collection.value;
+    status.value = currentCollection.status;
     if (currentUnsubscribe) {
       currentUnsubscribe();
     }
@@ -63,6 +65,7 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
           }
         }
         syncDataFromCollection(currentCollection);
+        status.value = currentCollection.status;
       }
     );
     if (currentCollection.status === `idle`) {
@@ -86,7 +89,15 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
   return {
     state: vue.computed(() => state),
     data,
-    collection: vue.computed(() => collection.value)
+    collection: vue.computed(() => collection.value),
+    status: vue.computed(() => status.value),
+    isLoading: vue.computed(
+      () => status.value === `loading` || status.value === `initialCommit`
+    ),
+    isReady: vue.computed(() => status.value === `ready`),
+    isIdle: vue.computed(() => status.value === `idle`),
+    isError: vue.computed(() => status.value === `error`),
+    isCleanedUp: vue.computed(() => status.value === `cleaned-up`)
   };
 }
 exports.useLiveQuery = useLiveQuery;

package/dist/cjs/useLiveQuery.cjs.map

@@ -1 +1 @@
-{"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;;"}
+{"version":3,"file":"useLiveQuery.cjs","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onUnmounted,\n  reactive,\n  ref,\n  toValue,\n  watchEffect,\n} from \"vue\"\nimport { createLiveQueryCollection } from \"@tanstack/db\"\nimport type {\n  ChangeMessage,\n  Collection,\n  CollectionStatus,\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  status: ComputedRef<CollectionStatus>\n  isLoading: ComputedRef<boolean>\n  isReady: ComputedRef<boolean>\n  isIdle: ComputedRef<boolean>\n  isError: ComputedRef<boolean>\n  isCleanedUp: ComputedRef<boolean>\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  status: ComputedRef<CollectionStatus>\n  isLoading: ComputedRef<boolean>\n  isReady: ComputedRef<boolean>\n  isIdle: ComputedRef<boolean>\n  isError: ComputedRef<boolean>\n  isCleanedUp: ComputedRef<boolean>\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  // Track collection status reactively\n  const status = ref(collection.value.status)\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    // Update status ref whenever the effect runs\n    status.value = currentCollection.status\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        // Update status ref on every change\n        status.value = currentCollection.status\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    status: computed(() => status.value),\n    isLoading: computed(\n      () => status.value === `loading` || status.value === `initialCommit`\n    ),\n    isReady: computed(() => status.value === `ready`),\n    isIdle: computed(() => status.value === `idle`),\n    isError: computed(() => status.value === `error`),\n    isCleanedUp: computed(() => status.value === `cleaned-up`),\n  }\n}\n"],"names":["computed","toValue","createLiveQueryCollection","reactive","ref","watchEffect","getCurrentInstance","onUnmounted"],"mappings":"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"}

package/dist/cjs/useLiveQuery.d.cts

@@ -1,14 +1,26 @@
-import { Collection, Context, GetResult, InitialQueryBuilder, LiveQueryCollectionConfig, QueryBuilder } from '@tanstack/db';
+import { Collection, CollectionStatus, 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, string | number, {}>>;
+    status: ComputedRef<CollectionStatus>;
+    isLoading: ComputedRef<boolean>;
+    isReady: ComputedRef<boolean>;
+    isIdle: ComputedRef<boolean>;
+    isError: ComputedRef<boolean>;
+    isCleanedUp: ComputedRef<boolean>;
 }
 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>>;
+    status: ComputedRef<CollectionStatus>;
+    isLoading: ComputedRef<boolean>;
+    isReady: ComputedRef<boolean>;
+    isIdle: ComputedRef<boolean>;
+    isError: ComputedRef<boolean>;
+    isCleanedUp: ComputedRef<boolean>;
 }
 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>>;

package/dist/esm/useLiveQuery.d.ts

@@ -1,14 +1,26 @@
-import { Collection, Context, GetResult, InitialQueryBuilder, LiveQueryCollectionConfig, QueryBuilder } from '@tanstack/db';
+import { Collection, CollectionStatus, 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, string | number, {}>>;
+    status: ComputedRef<CollectionStatus>;
+    isLoading: ComputedRef<boolean>;
+    isReady: ComputedRef<boolean>;
+    isIdle: ComputedRef<boolean>;
+    isError: ComputedRef<boolean>;
+    isCleanedUp: ComputedRef<boolean>;
 }
 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>>;
+    status: ComputedRef<CollectionStatus>;
+    isLoading: ComputedRef<boolean>;
+    isReady: ComputedRef<boolean>;
+    isIdle: ComputedRef<boolean>;
+    isError: ComputedRef<boolean>;
+    isCleanedUp: ComputedRef<boolean>;
 }
 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>>;

package/dist/esm/useLiveQuery.js

@@ -1,4 +1,4 @@
-import { computed, toValue, reactive, watchEffect, getCurrentInstance, onUnmounted } from "vue";
+import { computed, toValue, reactive, ref, watchEffect, getCurrentInstance, onUnmounted } from "vue";
 import { createLiveQueryCollection } from "@tanstack/db";
 function useLiveQuery(configOrQueryOrCollection, deps = []) {
   const collection = computed(() => {
@@ -32,6 +32,7 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
   const state = reactive(/* @__PURE__ */ new Map());
   const internalData = reactive([]);
   const data = computed(() => internalData);
+  const status = ref(collection.value.status);
   const syncDataFromCollection = (currentCollection) => {
     internalData.length = 0;
     internalData.push(...Array.from(currentCollection.values()));
@@ -39,6 +40,7 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
   let currentUnsubscribe = null;
   watchEffect((onInvalidate) => {
     const currentCollection = collection.value;
+    status.value = currentCollection.status;
     if (currentUnsubscribe) {
       currentUnsubscribe();
     }
@@ -61,6 +63,7 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
           }
         }
         syncDataFromCollection(currentCollection);
+        status.value = currentCollection.status;
       }
     );
     if (currentCollection.status === `idle`) {
@@ -84,7 +87,15 @@ function useLiveQuery(configOrQueryOrCollection, deps = []) {
   return {
     state: computed(() => state),
     data,
-    collection: computed(() => collection.value)
+    collection: computed(() => collection.value),
+    status: computed(() => status.value),
+    isLoading: computed(
+      () => status.value === `loading` || status.value === `initialCommit`
+    ),
+    isReady: computed(() => status.value === `ready`),
+    isIdle: computed(() => status.value === `idle`),
+    isError: computed(() => status.value === `error`),
+    isCleanedUp: computed(() => status.value === `cleaned-up`)
   };
 }
 export {

package/dist/esm/useLiveQuery.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"useLiveQuery.js","sources":["../../src/useLiveQuery.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onUnmounted,\n  reactive,\n  ref,\n  toValue,\n  watchEffect,\n} from \"vue\"\nimport { createLiveQueryCollection } from \"@tanstack/db\"\nimport type {\n  ChangeMessage,\n  Collection,\n  CollectionStatus,\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  status: ComputedRef<CollectionStatus>\n  isLoading: ComputedRef<boolean>\n  isReady: ComputedRef<boolean>\n  isIdle: ComputedRef<boolean>\n  isError: ComputedRef<boolean>\n  isCleanedUp: ComputedRef<boolean>\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  status: ComputedRef<CollectionStatus>\n  isLoading: ComputedRef<boolean>\n  isReady: ComputedRef<boolean>\n  isIdle: ComputedRef<boolean>\n  isError: ComputedRef<boolean>\n  isCleanedUp: ComputedRef<boolean>\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  // Track collection status reactively\n  const status = ref(collection.value.status)\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    // Update status ref whenever the effect runs\n    status.value = currentCollection.status\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        // Update status ref on every change\n        status.value = currentCollection.status\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    status: computed(() => status.value),\n    isLoading: computed(\n      () => status.value === `loading` || status.value === `initialCommit`\n    ),\n    isReady: computed(() => status.value === `ready`),\n    isIdle: computed(() => status.value === `idle`),\n    isError: computed(() => status.value === `error`),\n    isCleanedUp: computed(() => status.value === `cleaned-up`),\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/vue-db",
   "description": "Vue integration for @tanstack/db",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "author": "Kyle Mathews",
   "license": "MIT",
   "repository": {
@@ -16,7 +16,7 @@
     "typescript"
   ],
   "dependencies": {
-    "@tanstack/db": "0.0.15"
+    "@tanstack/db": "0.0.17"
   },
   "devDependencies": {
     "@electric-sql/client": "1.0.0",

package/src/useLiveQuery.ts

@@ -3,6 +3,7 @@ import {
   getCurrentInstance,
   onUnmounted,
   reactive,
+  ref,
   toValue,
   watchEffect,
 } from "vue"
@@ -10,6 +11,7 @@ import { createLiveQueryCollection } from "@tanstack/db"
 import type {
   ChangeMessage,
   Collection,
+  CollectionStatus,
   Context,
   GetResult,
   InitialQueryBuilder,
@@ -22,6 +24,12 @@ export interface UseLiveQueryReturn<T extends object> {
   state: ComputedRef<Map<string | number, T>>
   data: ComputedRef<Array<T>>
   collection: ComputedRef<Collection<T, string | number, {}>>
+  status: ComputedRef<CollectionStatus>
+  isLoading: ComputedRef<boolean>
+  isReady: ComputedRef<boolean>
+  isIdle: ComputedRef<boolean>
+  isError: ComputedRef<boolean>
+  isCleanedUp: ComputedRef<boolean>
 }
 
 export interface UseLiveQueryReturnWithCollection<
@@ -32,6 +40,12 @@ export interface UseLiveQueryReturnWithCollection<
   state: ComputedRef<Map<TKey, T>>
   data: ComputedRef<Array<T>>
   collection: ComputedRef<Collection<T, TKey, TUtils>>
+  status: ComputedRef<CollectionStatus>
+  isLoading: ComputedRef<boolean>
+  isReady: ComputedRef<boolean>
+  isIdle: ComputedRef<boolean>
+  isError: ComputedRef<boolean>
+  isCleanedUp: ComputedRef<boolean>
 }
 
 // Overload 1: Accept just the query function
@@ -114,6 +128,9 @@ export function useLiveQuery(
   // Computed wrapper for the data to match expected return type
   const data = computed(() => internalData)
 
+  // Track collection status reactively
+  const status = ref(collection.value.status)
+
   // Helper to sync data array from collection in correct order
   const syncDataFromCollection = (
     currentCollection: Collection<any, any, any>
@@ -129,6 +146,9 @@ export function useLiveQuery(
   watchEffect((onInvalidate) => {
     const currentCollection = collection.value
 
+    // Update status ref whenever the effect runs
+    status.value = currentCollection.status
+
     // Clean up previous subscription
     if (currentUnsubscribe) {
       currentUnsubscribe()
@@ -161,6 +181,8 @@ export function useLiveQuery(
 
         // Update the data array to maintain sorted order
         syncDataFromCollection(currentCollection)
+        // Update status ref on every change
+        status.value = currentCollection.status
       }
     )
 
@@ -192,5 +214,13 @@ export function useLiveQuery(
     state: computed(() => state),
     data,
     collection: computed(() => collection.value),
+    status: computed(() => status.value),
+    isLoading: computed(
+      () => status.value === `loading` || status.value === `initialCommit`
+    ),
+    isReady: computed(() => status.value === `ready`),
+    isIdle: computed(() => status.value === `idle`),
+    isError: computed(() => status.value === `error`),
+    isCleanedUp: computed(() => status.value === `cleaned-up`),
   }
 }