feat: add Svelte support

Author: wobsoriano

packages/svelte-db/README.md

@@ -1,58 +1,3 @@
-# Svelte library
+# @tanstack/react-db
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+Svelte hooks for TanStack DB. See [TanStack/db](https://github.com/TanStack/db) for more details.

packages/svelte-db/package.json

@@ -9,7 +9,8 @@
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "npx vitest --run"
 	},
 	"files": [
 		"dist",
@@ -28,19 +29,24 @@
 			"svelte": "./dist/index.js"
 		}
 	},
+	"dependencies": {
+	  "@tanstack/db": "workspace:*",
+    "@tanstack/svelte-store": "^0.7.0"
+	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+	  "@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.4",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/kit": "^2.21.0",
+		"@sveltejs/package": "^2.3.11",
+		"@vitest/coverage-istanbul": "^3.0.9",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"publint": "^0.3.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^6.2.6"
+		"svelte": "^5.28.6",
+		"svelte-check": "^4.2.0"
 	},
 	"keywords": [
 	  "optimistic",

packages/svelte-db/src/lib/index.ts

@@ -1 +1,10 @@
-// Reexport your entry components here
+// 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/lib/useLiveQuery.svelte.ts

@@ -0,0 +1,69 @@
+import { useStore } from "@tanstack/svelte-store"
+import { compileQuery, queryBuilder } from "@tanstack/db"
+import type {
+  Collection,
+  Context,
+  InitialQueryBuilder,
+  QueryBuilder,
+  ResultsFromContext,
+  Schema,
+} from "@tanstack/db"
+
+type ComputedRef<T> = {
+  get current(): T
+}
+
+type Getter<T> = () => T
+
+function toValue<T>() {}
+
+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<Getter<unknown>> = []
+): UseLiveQueryReturn<ResultsFromContext<TResultContext>> {
+  const compiledQuery = $derived.by(() => {
+    // Just reference deps to make derived reactive to them
+    // deps.forEach((dep) => toValue(dep))
+
+    const query = queryFn(queryBuilder())
+    const compiled = compileQuery(query)
+    compiled.start()
+    return compiled
+  })
+
+  const state = $derived(useStore(compiledQuery.results.derivedState).current)
+  const data = $derived(useStore(compiledQuery.results.derivedArray).current)
+  const collection = $derived(compiledQuery.results)
+
+  $effect(() => {
+    if (compiledQuery.state === `stopped`) {
+      compiledQuery.start()
+    }
+
+    return () => {
+      compiledQuery.stop()
+    }
+  })
+
+  return {
+    get state() {
+      return state
+    },
+    get data() {
+      return data
+    },
+    get collection() {
+      return collection as any
+    },
+  }
+}

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