feat: add Vue support (#83)

Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>

Author: wobsoriano

.changeset/purple-kings-breathe.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/vue-db": patch
+---
+
+Add Vue support

packages/db/package.json

@@ -40,7 +40,7 @@
     "url": "https://github.com/TanStack/db.git",
     "directory": "packages/db"
   },
-  "homepage": "https://tanstack.com/optimistic",
+  "homepage": "https://tanstack.com/db",
   "keywords": [
     "optimistic",
     "typescript"

packages/vue-db/README.md

@@ -0,0 +1,3 @@
+# @tanstack/vue-db
+
+Vue composables for TanStack DB. See [TanStack/db](https://github.com/TanStack/db) for more details.

packages/vue-db/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@tanstack/vue-db",
+  "description": "Vue integration for @tanstack/db",
+  "version": "0.0.0",
+  "author": "Kyle Mathews",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/db.git",
+    "directory": "packages/vue-db"
+  },
+  "homepage": "https://tanstack.com/db",
+  "keywords": [
+    "optimistic",
+    "vue",
+    "typescript"
+  ],
+  "packageManager": "pnpm@10.5.2",
+  "dependencies": {
+    "@tanstack/db": "workspace:*",
+    "@tanstack/vue-store": "^0.7.0"
+  },
+  "devDependencies": {
+    "@electric-sql/client": "1.0.0",
+    "@vitest/coverage-istanbul": "^3.0.9",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "vue": "^3.5.13"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "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"
+}

packages/vue-db/src/index.ts

@@ -0,0 +1,10 @@
+// Re-export all public APIs
+export * from "./useOptimisticMutation"
+export * from "./useLiveQuery"
+
+// Re-export everything from @tanstack/db
+export * from "@tanstack/db"
+
+// Re-export some stuff explicitly to ensure the type & value is exported
+export { Collection } from "@tanstack/db"
+export { createTransaction } from "@tanstack/db"

packages/vue-db/src/useLiveQuery.ts

@@ -0,0 +1,60 @@
+import { computed, toValue, watch } from "vue"
+import { useStore } from "@tanstack/vue-store"
+import { compileQuery, queryBuilder } from "@tanstack/db"
+import type {
+  Collection,
+  Context,
+  InitialQueryBuilder,
+  QueryBuilder,
+  ResultsFromContext,
+  Schema,
+} from "@tanstack/db"
+import type { ComputedRef, MaybeRefOrGetter } from "vue"
+
+export interface UseLiveQueryReturn<T extends object> {
+  state: ComputedRef<Map<string, T>>
+  data: ComputedRef<Array<T>>
+  collection: ComputedRef<Collection<T>>
+}
+
+export function useLiveQuery<
+  TResultContext extends Context<Schema> = Context<Schema>,
+>(
+  queryFn: (
+    q: InitialQueryBuilder<Context<Schema>>
+  ) => QueryBuilder<TResultContext>,
+  deps: Array<MaybeRefOrGetter<unknown>> = []
+): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {
+  const compiledQuery = computed(() => {
+    // Just 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
+  })
+
+  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),
+  }
+}

packages/vue-db/src/useOptimisticMutation.ts

@@ -0,0 +1,15 @@
+import { createTransaction } from "@tanstack/db"
+import type { Transaction, TransactionConfig } from "@tanstack/db"
+
+export function useOptimisticMutation(config: TransactionConfig) {
+  return {
+    mutate: (callback: () => void): Transaction => {
+      const transaction = createTransaction(config)
+      transaction.mutate(callback)
+      return transaction
+    },
+    createTransaction: (): Transaction => {
+      return createTransaction({ ...config, autoCommit: false })
+    },
+  }
+}