feat: add Svelte support

.changeset/khaki-ties-shout.md

@@ -0,0 +1,21 @@
+---
+"@tanstack/svelte-db": patch
+---
+
+Add Svelte support
+
+Usage example:
+
+```svelte
+<script lang="ts">
+import { useLiveQuery } from "@tanstack/svelte-db"
+import { todoCollection } from "$lib/collections"
+
+const query = useLiveQuery((query) =>
+  query.from({ todoCollection }).where("@completed", "=", false)
+)
+</script>
+
+
+<List items={query.data} />
+```

packages/svelte-db/.gitignore

@@ -0,0 +1,24 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+/dist
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

packages/svelte-db/README.md

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

packages/svelte-db/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@tanstack/svelte-db",
+  "description": "Svelte integration for @tanstack/db",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "svelte-package --input ./src --output ./dist",
+    "test": "npx vitest --run",
+    "lint": "eslint . --fix"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@tanstack/db": "workspace:*"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.11",
+    "@vitest/coverage-istanbul": "^3.0.9",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "publint": "^0.3.2",
+    "svelte": "^5.28.6",
+    "svelte-check": "^4.2.0"
+  },
+  "keywords": [
+    "optimistic",
+    "svelte",
+    "typescript"
+  ]
+}

packages/svelte-db/src/index.ts

@@ -0,0 +1,10 @@
+// Re-export all public APIs
+export * from "./useOptimisticMutation.js"
+export * from "./useLiveQuery.svelte.js"
+
+// 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/svelte-db/src/useLiveQuery.svelte.ts

@@ -0,0 +1,60 @@
+import { compileQuery, queryBuilder } from "@tanstack/db"
+import type {
+  Collection,
+  Context,
+  InitialQueryBuilder,
+  QueryBuilder,
+  ResultsFromContext,
+  Schema,
+} from "@tanstack/db"
+
+export interface UseLiveQueryReturn<T extends object> {
+  state: Map<string, T>
+  data: Array<T>
+  collection: Collection<T>
+}
+
+export function useLiveQuery<
+  TResultContext extends Context<Schema> = Context<Schema>,
+>(
+  queryFn: (
+    q: InitialQueryBuilder<Context<Schema>>
+  ) => QueryBuilder<TResultContext>,
+  deps: Array<() => unknown> = []
+): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {
+  const compiledQuery = $derived.by(() => {
+    // Just reference deps to make derived reactive to them
+    deps.forEach((dep) => dep())
+
+    const query = queryFn(queryBuilder())
+    const compiled = compileQuery(query)
+    compiled.start()
+    return compiled
+  })
+
+  // TODO: Svelte useStore needs to be updated to optionally
+  // receive a getter to receive updates from compiledQuery.
+  // For now, doing this should work and be reactive with updates.
+  const state = () => compiledQuery.results.derivedState.state
+  const data = () => compiledQuery.results.derivedArray.state
+
+  $effect(() => {
+    return () => {
+      compiledQuery.stop()
+    }
+  })
+
+  return {
+    get state() {
+      return state()
+    },
+    get data() {
+      return data()
+    },
+    get collection() {
+      return compiledQuery.results as unknown as Collection<
+        ResultsFromContext<TResultContext>
+      >
+    },
+  }
+}

packages/svelte-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 })
+    },
+  }
+}

packages/svelte-db/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+const config = {
+  preprocess: vitePreprocess(),
+}
+
+export default config