@tanstack/vue-db 0.0.0 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Kyle Mathews
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useOptimisticMutation = require("./useOptimisticMutation.cjs");
+const useLiveQuery = require("./useLiveQuery.cjs");
+const db = require("@tanstack/db");
+exports.useOptimisticMutation = useOptimisticMutation.useOptimisticMutation;
+exports.useLiveQuery = useLiveQuery.useLiveQuery;
+Object.defineProperty(exports, "Collection", {
+  enumerable: true,
+  get: () => db.Collection
+});
+Object.defineProperty(exports, "createTransaction", {
+  enumerable: true,
+  get: () => db.createTransaction
+});
+Object.keys(db).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => db[k]
+  });
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/index.d.cts

@@ -0,0 +1,5 @@
+export * from './useOptimisticMutation.cjs';
+export * from './useLiveQuery.cjs';
+export * from '@tanstack/db';
+export { Collection } from '@tanstack/db';
+export { createTransaction } from '@tanstack/db';

package/dist/cjs/useLiveQuery.cjs

@@ -0,0 +1,35 @@
+"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(() => {
+    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.derivedState).value;
+  });
+  const data = vue.computed(() => {
+    return vueStore.useStore(compiledQuery.value.results.derivedArray).value;
+  });
+  vue.watch(compiledQuery, (newQuery, oldQuery, onInvalidate) => {
+    if (newQuery.state === `stopped`) {
+      newQuery.start();
+    }
+    onInvalidate(() => {
+      oldQuery.stop();
+    });
+  });
+  return {
+    state,
+    data,
+    collection: vue.computed(() => compiledQuery.value.results)
+  };
+}
+exports.useLiveQuery = useLiveQuery;
+//# sourceMappingURL=useLiveQuery.cjs.map

package/dist/cjs/useLiveQuery.cjs.map

@@ -0,0 +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, 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.derivedState).value\n  })\n  const data = computed(() => {\n    return useStore(compiledQuery.value.results.derivedArray).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,YAAY,EAAE;AAAA,EAAA,CAC3D;AACK,QAAA,OAAOJ,IAAAA,SAAS,MAAM;AAC1B,WAAOI,SAAAA,SAAS,cAAc,MAAM,QAAQ,YAAY,EAAE;AAAA,EAAA,CAC3D;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;;"}

package/dist/cjs/useLiveQuery.d.cts

@@ -0,0 +1,8 @@
+import { Collection, Context, InitialQueryBuilder, QueryBuilder, ResultsFromContext, Schema } from '@tanstack/db';
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+export interface UseLiveQueryReturn<T extends object> {
+    state: ComputedRef<Map<string, T>>;
+    data: ComputedRef<Array<T>>;
+    collection: ComputedRef<Collection<T>>;
+}
+export declare function useLiveQuery<TResultContext extends Context<Schema> = Context<Schema>>(queryFn: (q: InitialQueryBuilder<Context<Schema>>) => QueryBuilder<TResultContext>, deps?: Array<MaybeRefOrGetter<unknown>>): UseLiveQueryReturn<ResultsFromContext<TResultContext>>;

package/dist/cjs/useOptimisticMutation.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const db = require("@tanstack/db");
+function useOptimisticMutation(config) {
+  return {
+    mutate: (callback) => {
+      const transaction = db.createTransaction(config);
+      transaction.mutate(callback);
+      return transaction;
+    },
+    createTransaction: () => {
+      return db.createTransaction({ ...config, autoCommit: false });
+    }
+  };
+}
+exports.useOptimisticMutation = useOptimisticMutation;
+//# sourceMappingURL=useOptimisticMutation.cjs.map

package/dist/cjs/useOptimisticMutation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptimisticMutation.cjs","sources":["../../src/useOptimisticMutation.ts"],"sourcesContent":["import { createTransaction } from \"@tanstack/db\"\nimport type { Transaction, TransactionConfig } from \"@tanstack/db\"\n\nexport function useOptimisticMutation(config: TransactionConfig) {\n  return {\n    mutate: (callback: () => void): Transaction => {\n      const transaction = createTransaction(config)\n      transaction.mutate(callback)\n      return transaction\n    },\n    createTransaction: (): Transaction => {\n      return createTransaction({ ...config, autoCommit: false })\n    },\n  }\n}\n"],"names":["createTransaction"],"mappings":";;;AAGO,SAAS,sBAAsB,QAA2B;AACxD,SAAA;AAAA,IACL,QAAQ,CAAC,aAAsC;AACvC,YAAA,cAAcA,qBAAkB,MAAM;AAC5C,kBAAY,OAAO,QAAQ;AACpB,aAAA;AAAA,IACT;AAAA,IACA,mBAAmB,MAAmB;AACpC,aAAOA,qBAAkB,EAAE,GAAG,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,EAE7D;AACF;;"}

package/dist/cjs/useOptimisticMutation.d.cts

@@ -0,0 +1,5 @@
+import { Transaction, TransactionConfig } from '@tanstack/db';
+export declare function useOptimisticMutation(config: TransactionConfig): {
+    mutate: (callback: () => void) => Transaction;
+    createTransaction: () => Transaction;
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useOptimisticMutation.js';
+export * from './useLiveQuery.js';
+export * from '@tanstack/db';
+export { Collection } from '@tanstack/db';
+export { createTransaction } from '@tanstack/db';

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import { useOptimisticMutation } from "./useOptimisticMutation.js";
+import { useLiveQuery } from "./useLiveQuery.js";
+export * from "@tanstack/db";
+import { Collection, createTransaction } from "@tanstack/db";
+export {
+  Collection,
+  createTransaction,
+  useLiveQuery,
+  useOptimisticMutation
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/useLiveQuery.d.ts

@@ -0,0 +1,8 @@
+import { Collection, Context, InitialQueryBuilder, QueryBuilder, ResultsFromContext, Schema } from '@tanstack/db';
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+export interface UseLiveQueryReturn<T extends object> {
+    state: ComputedRef<Map<string, T>>;
+    data: ComputedRef<Array<T>>;
+    collection: ComputedRef<Collection<T>>;
+}
+export declare function useLiveQuery<TResultContext extends Context<Schema> = Context<Schema>>(queryFn: (q: InitialQueryBuilder<Context<Schema>>) => QueryBuilder<TResultContext>, deps?: Array<MaybeRefOrGetter<unknown>>): UseLiveQueryReturn<ResultsFromContext<TResultContext>>;

package/dist/esm/useLiveQuery.js

@@ -0,0 +1,35 @@
+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(() => {
+    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.derivedState).value;
+  });
+  const data = computed(() => {
+    return useStore(compiledQuery.value.results.derivedArray).value;
+  });
+  watch(compiledQuery, (newQuery, oldQuery, onInvalidate) => {
+    if (newQuery.state === `stopped`) {
+      newQuery.start();
+    }
+    onInvalidate(() => {
+      oldQuery.stop();
+    });
+  });
+  return {
+    state,
+    data,
+    collection: computed(() => compiledQuery.value.results)
+  };
+}
+export {
+  useLiveQuery
+};
+//# sourceMappingURL=useLiveQuery.js.map

package/dist/esm/useLiveQuery.js.map

@@ -0,0 +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, 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.derivedState).value\n  })\n  const data = computed(() => {\n    return useStore(compiledQuery.value.results.derivedArray).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,YAAY,EAAE;AAAA,EAAA,CAC3D;AACK,QAAA,OAAO,SAAS,MAAM;AAC1B,WAAO,SAAS,cAAc,MAAM,QAAQ,YAAY,EAAE;AAAA,EAAA,CAC3D;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;"}

package/dist/esm/useOptimisticMutation.d.ts

@@ -0,0 +1,5 @@
+import { Transaction, TransactionConfig } from '@tanstack/db';
+export declare function useOptimisticMutation(config: TransactionConfig): {
+    mutate: (callback: () => void) => Transaction;
+    createTransaction: () => Transaction;
+};

package/dist/esm/useOptimisticMutation.js

@@ -0,0 +1,17 @@
+import { createTransaction } from "@tanstack/db";
+function useOptimisticMutation(config) {
+  return {
+    mutate: (callback) => {
+      const transaction = createTransaction(config);
+      transaction.mutate(callback);
+      return transaction;
+    },
+    createTransaction: () => {
+      return createTransaction({ ...config, autoCommit: false });
+    }
+  };
+}
+export {
+  useOptimisticMutation
+};
+//# sourceMappingURL=useOptimisticMutation.js.map

package/dist/esm/useOptimisticMutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptimisticMutation.js","sources":["../../src/useOptimisticMutation.ts"],"sourcesContent":["import { createTransaction } from \"@tanstack/db\"\nimport type { Transaction, TransactionConfig } from \"@tanstack/db\"\n\nexport function useOptimisticMutation(config: TransactionConfig) {\n  return {\n    mutate: (callback: () => void): Transaction => {\n      const transaction = createTransaction(config)\n      transaction.mutate(callback)\n      return transaction\n    },\n    createTransaction: (): Transaction => {\n      return createTransaction({ ...config, autoCommit: false })\n    },\n  }\n}\n"],"names":[],"mappings":";AAGO,SAAS,sBAAsB,QAA2B;AACxD,SAAA;AAAA,IACL,QAAQ,CAAC,aAAsC;AACvC,YAAA,cAAc,kBAAkB,MAAM;AAC5C,kBAAY,OAAO,QAAQ;AACpB,aAAA;AAAA,IACT;AAAA,IACA,mBAAmB,MAAmB;AACpC,aAAO,kBAAkB,EAAE,GAAG,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,EAE7D;AACF;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/vue-db",
   "description": "Vue integration for @tanstack/db",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "author": "Kyle Mathews",
   "license": "MIT",
   "repository": {
@@ -15,10 +15,9 @@
     "vue",
     "typescript"
   ],
-  "packageManager": "pnpm@10.5.2",
   "dependencies": {
-    "@tanstack/db": "workspace:*",
-    "@tanstack/vue-store": "^0.7.0"
+    "@tanstack/vue-store": "^0.7.0",
+    "@tanstack/db": "0.0.3"
   },
   "devDependencies": {
     "@electric-sql/client": "1.0.0",
@@ -48,13 +47,13 @@
   "peerDependencies": {
     "vue": ">=3.3.0"
   },
+  "sideEffects": false,
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
   "scripts": {
     "build": "vite build",
     "dev": "vite build --watch",
     "test": "npx vitest --run",
     "lint": "eslint . --fix"
-  },
-  "sideEffects": false,
-  "type": "module",
-  "types": "dist/esm/index.d.ts"
-}
+  }
+}