Skip to content

feat: add Svelte support #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 29 commits into from
Jul 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
a73674e
chore: scaffold svelte app
wobsoriano May 14, 2025
a730379
feat: add Svelte support
wobsoriano May 15, 2025
3ca1f6d
chore: fix tests
wobsoriano May 17, 2025
7900bf1
chore: adjust effect roots
wobsoriano May 17, 2025
558af77
chore: remove unused packages
wobsoriano May 17, 2025
f555db5
chore: run dedupe
wobsoriano May 17, 2025
1d7c2dd
chore: update scripts
wobsoriano May 17, 2025
4be68d6
chore: remove unused packages
wobsoriano May 17, 2025
013ac28
chore: add changeset
wobsoriano May 17, 2025
546ef4e
chore: update readme
wobsoriano May 17, 2025
8e8804f
chore: prettier fix
wobsoriano May 17, 2025
0aad000
chore: update changeset
wobsoriano May 17, 2025
248180a
chore: update vite config
wobsoriano May 17, 2025
e83cd59
chore: remove use of store
wobsoriano May 17, 2025
284a807
chore: remove unused package
wobsoriano May 17, 2025
b8444cd
chore: add todo
wobsoriano May 17, 2025
a27b54a
chore: Remove TanStack store
wobsoriano Jul 21, 2025
7839fd5
chore: remove extra states
wobsoriano Jul 21, 2025
e4611bf
chore: update JSDoc to use svelte examples
wobsoriano Jul 21, 2025
8263f40
Merge remote-tracking branch 'origin/main' into rob/svelte-support
wobsoriano Jul 21, 2025
43408cb
chore: update tests
wobsoriano Jul 22, 2025
85dd1dc
chore: update changeset
wobsoriano Jul 22, 2025
c38d858
chore: update readme
wobsoriano Jul 22, 2025
3a55f3f
chore: add type test script
wobsoriano Jul 22, 2025
352ff73
chore: clean up jsdoc
wobsoriano Jul 22, 2025
04a07bc
chore: fix build
wobsoriano Jul 22, 2025
7973e3f
Merge branch 'main' into rob/svelte-support
KyleAMathews Jul 23, 2025
c8c940b
prettier
KyleAMathews Jul 23, 2025
1700b2d
prettier again
KyleAMathews Jul 23, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .changeset/khaki-ties-shout.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
"@tanstack/svelte-db": patch
---

Add Svelte support

Usage example:

```svelte
<script lang="ts">
import { useLiveQuery } from "@tanstack/svelte-db"
import { eq } from "@tanstack/db"
import { todoCollection } from "$lib/collections"

const todosQuery = useLiveQuery((query) =>
query
.from({ todos: todoCollection })
.where(({ todos }) => eq(todos.completed, false))
)
</script>


<List items={todosQuery.data} />
```
4 changes: 4 additions & 0 deletions examples/react/todo/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,15 @@
### Patch Changes

- Move Collections to their own packages ([#252](https://github.com/TanStack/db/pull/252))

- Move local-only and local-storage collections to main `@tanstack/db` package
- Create new `@tanstack/electric-db-collection` package for Electric SQL integration
- Create new `@tanstack/query-db-collection` package for TanStack Query integration
- Delete `@tanstack/db-collections` package (removed from repo)
- Update example app and documentation to use new package structure

Why?

- Better separation of concerns
- Independent versioning for each collection type
- Cleaner dependencies (electric collections don't need query deps, etc.)
Expand Down Expand Up @@ -251,6 +253,7 @@
When `collection.insert()`, `.update()`, or `.delete()` are called outside of an explicit transaction (i.e., not within `useOptimisticMutation`), the library now automatically creates a single-operation transaction and invokes the corresponding handler to persist the change.

Key changes:

- **`@tanstack/db`**: The `Collection` class now supports `onInsert`, `onUpdate`, and `onDelete` in its configuration. Direct calls to mutation methods will throw an error if the corresponding handler is not defined.
- **`@tanstack/db-collections`**:
- `queryCollectionOptions` now accepts the new handlers and will automatically `refetch` the collection's query after a handler successfully completes. This behavior can be disabled if the handler returns `{ refetch: false }`.
Expand All @@ -262,6 +265,7 @@
***

The documentation and the React Todo example application have been significantly refactored to adopt the new direct persistence handler pattern as the primary way to perform mutations.

- The `README.md` and `docs/overview.md` files have been updated to de-emphasize `useOptimisticMutation` for simple writes. They now showcase the much simpler API of calling `collection.insert()` directly and defining persistence logic in the collection's configuration.
- The React Todo example (`examples/react/todo/src/App.tsx`) has been completely overhauled. All instances of `useOptimisticMutation` have been removed and replaced with the new `onInsert`, `onUpdate`, and `onDelete` handlers, resulting in cleaner and more concise code.

Expand Down
1 change: 1 addition & 0 deletions examples/react/todo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## How to run

- Go to the root of the repository and run:

- `pnpm install`
- `pnpm build`

Expand Down
15 changes: 15 additions & 0 deletions packages/db/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
This comprehensive update replaces all string-based error throws throughout the TanStack DB codebase with named error classes, providing better type safety and developer experience.

## New Features

- **Root `TanStackDBError` class** - all errors inherit from a common base for unified error handling
- **Named error classes** organized by package and functional area
- **Type-safe error handling** using `instanceof` checks instead of string matching
Expand All @@ -40,6 +41,7 @@
### Core Package (`@tanstack/db`)

Contains generic errors used across the ecosystem:

- Collection configuration, state, and operation errors
- Transaction lifecycle and mutation errors
- Query building, compilation, and execution errors
Expand All @@ -48,11 +50,13 @@
### Adapter Packages

Each adapter now exports its own specific error classes:

- **`@tanstack/electric-db-collection`**: Electric-specific errors
- **`@tanstack/trailbase-db-collection`**: TrailBase-specific errors
- **`@tanstack/query-db-collection`**: Query collection specific errors

## Breaking Changes

- Error handling code using string matching will need to be updated to use `instanceof` checks
- Some error messages may have slight formatting changes
- Adapter-specific errors now need to be imported from their respective packages
Expand Down Expand Up @@ -121,6 +125,7 @@
```

## Benefits

- **Type Safety**: All errors now have specific types that can be caught with `instanceof`
- **Unified Error Handling**: Root `TanStackDBError` class allows catching all library errors with a single check
- **Better Package Separation**: Each adapter manages its own error types
Expand All @@ -139,6 +144,7 @@
- Add comprehensive documentation for creating collection options creators ([#284](https://github.com/TanStack/db/pull/284))

This adds a new documentation page `collection-options-creator.md` that provides detailed guidance for developers building collection options creators. The documentation covers:

- Core requirements and configuration interfaces
- Sync implementation patterns with transaction lifecycle (begin, write, commit, markReady)
- Data parsing and type conversion using field-specific conversions
Expand Down Expand Up @@ -171,6 +177,7 @@
- Fix iterator-based change tracking in proxy system ([#271](https://github.com/TanStack/db/pull/271))

This fixes several issues with iterator-based change tracking for Maps and Sets:

- **Map.entries()** now correctly updates actual Map entries instead of creating duplicate keys
- **Map.values()** now tracks back to original Map keys using value-to-key mapping instead of using symbol placeholders
- **Set iterators** now properly replace objects in Set when modified instead of creating symbol-keyed entries
Expand All @@ -181,6 +188,7 @@
This brings the proxy system in line with how mature libraries like Immer handle iterator-based change tracking, using method interception rather than trying to proxy all property access.

- Add explicit collection readiness detection with `isReady()` and `markReady()` ([#270](https://github.com/TanStack/db/pull/270))

- Add `isReady()` method to check if a collection is ready for use
- Add `onFirstReady()` method to register callbacks for when collection becomes ready
- Add `markReady()` to SyncConfig interface for sync implementations to explicitly signal readiness
Expand Down Expand Up @@ -222,13 +230,15 @@
### Patch Changes

- Move Collections to their own packages ([#252](https://github.com/TanStack/db/pull/252))

- Move local-only and local-storage collections to main `@tanstack/db` package
- Create new `@tanstack/electric-db-collection` package for Electric SQL integration
- Create new `@tanstack/query-db-collection` package for TanStack Query integration
- Delete `@tanstack/db-collections` package (removed from repo)
- Update example app and documentation to use new package structure

Why?

- Better separation of concerns
- Independent versioning for each collection type
- Cleaner dependencies (electric collections don't need query deps, etc.)
Expand Down Expand Up @@ -292,6 +302,7 @@
Adds automatic lifecycle management for collections to optimize resource usage.

**New Features:**

- Added `startSync` option (defaults to `false`, set to `true` to start syncing immediately)
- Automatic garbage collection after `gcTime` (default 5 minutes) of inactivity
- Collection status tracking: "idle" | "loading" | "ready" | "error" | "cleaned-up"
Expand Down Expand Up @@ -399,6 +410,7 @@
- refactor the live query comparator and fix an issue with sorting with a null/undefined value in a column of non-null values ([#167](https://github.com/TanStack/db/pull/167))

- A large refactor of the core `Collection` with: ([#155](https://github.com/TanStack/db/pull/155))

- a change to not use Store internally and emit fine grade changes with `subscribeChanges` and `subscribeKeyChanges` methods.
- changes to the `Collection` api to be more `Map` like for reads, with `get`, `has`, `size`, `entries`, `keys`, and `values`.
- renames `config.getId` to `config.getKey` for consistency with the `Map` like api.
Expand All @@ -416,6 +428,7 @@
- Expose utilities on collection instances ([#161](https://github.com/TanStack/db/pull/161))

Implemented a utility exposure pattern for TanStack DB collections that allows utility functions to be passed as part of collection options and exposes them under a `.utils` namespace, with full TypeScript typing.

- Refactored `createCollection` in packages/db/src/collection.ts to accept options with utilities directly
- Added `utils` property to CollectionImpl
- Added TypeScript types for utility functions and utility records
Expand All @@ -439,6 +452,7 @@
When `collection.insert()`, `.update()`, or `.delete()` are called outside of an explicit transaction (i.e., not within `useOptimisticMutation`), the library now automatically creates a single-operation transaction and invokes the corresponding handler to persist the change.

Key changes:

- **`@tanstack/db`**: The `Collection` class now supports `onInsert`, `onUpdate`, and `onDelete` in its configuration. Direct calls to mutation methods will throw an error if the corresponding handler is not defined.
- **`@tanstack/db-collections`**:
- `queryCollectionOptions` now accepts the new handlers and will automatically `refetch` the collection's query after a handler successfully completes. This behavior can be disabled if the handler returns `{ refetch: false }`.
Expand All @@ -450,6 +464,7 @@
***

The documentation and the React Todo example application have been significantly refactored to adopt the new direct persistence handler pattern as the primary way to perform mutations.

- The `README.md` and `docs/overview.md` files have been updated to de-emphasize `useOptimisticMutation` for simple writes. They now showcase the much simpler API of calling `collection.insert()` directly and defining persistence logic in the collection's configuration.
- The React Todo example (`examples/react/todo/src/App.tsx`) has been completely overhauled. All instances of `useOptimisticMutation` have been removed and replaced with the new `onInsert`, `onUpdate`, and `onDelete` handlers, resulting in cleaner and more concise code.

Expand Down
8 changes: 8 additions & 0 deletions packages/electric-db-collection/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
This comprehensive update replaces all string-based error throws throughout the TanStack DB codebase with named error classes, providing better type safety and developer experience.

## New Features

- **Root `TanStackDBError` class** - all errors inherit from a common base for unified error handling
- **Named error classes** organized by package and functional area
- **Type-safe error handling** using `instanceof` checks instead of string matching
Expand All @@ -27,6 +28,7 @@
### Core Package (`@tanstack/db`)

Contains generic errors used across the ecosystem:

- Collection configuration, state, and operation errors
- Transaction lifecycle and mutation errors
- Query building, compilation, and execution errors
Expand All @@ -35,11 +37,13 @@
### Adapter Packages

Each adapter now exports its own specific error classes:

- **`@tanstack/electric-db-collection`**: Electric-specific errors
- **`@tanstack/trailbase-db-collection`**: TrailBase-specific errors
- **`@tanstack/query-db-collection`**: Query collection specific errors

## Breaking Changes

- Error handling code using string matching will need to be updated to use `instanceof` checks
- Some error messages may have slight formatting changes
- Adapter-specific errors now need to be imported from their respective packages
Expand Down Expand Up @@ -108,6 +112,7 @@
```

## Benefits

- **Type Safety**: All errors now have specific types that can be caught with `instanceof`
- **Unified Error Handling**: Root `TanStackDBError` class allows catching all library errors with a single check
- **Better Package Separation**: Each adapter manages its own error types
Expand Down Expand Up @@ -148,6 +153,7 @@
### Patch Changes

- Add explicit collection readiness detection with `isReady()` and `markReady()` ([#270](https://github.com/TanStack/db/pull/270))

- Add `isReady()` method to check if a collection is ready for use
- Add `onFirstReady()` method to register callbacks for when collection becomes ready
- Add `markReady()` to SyncConfig interface for sync implementations to explicitly signal readiness
Expand Down Expand Up @@ -187,13 +193,15 @@
### Patch Changes

- Move Collections to their own packages ([#252](https://github.com/TanStack/db/pull/252))

- Move local-only and local-storage collections to main `@tanstack/db` package
- Create new `@tanstack/electric-db-collection` package for Electric SQL integration
- Create new `@tanstack/query-db-collection` package for TanStack Query integration
- Delete `@tanstack/db-collections` package (removed from repo)
- Update example app and documentation to use new package structure

Why?

- Better separation of concerns
- Independent versioning for each collection type
- Cleaner dependencies (electric collections don't need query deps, etc.)
Expand Down
8 changes: 8 additions & 0 deletions packages/query-db-collection/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
This comprehensive update replaces all string-based error throws throughout the TanStack DB codebase with named error classes, providing better type safety and developer experience.

## New Features

- **Root `TanStackDBError` class** - all errors inherit from a common base for unified error handling
- **Named error classes** organized by package and functional area
- **Type-safe error handling** using `instanceof` checks instead of string matching
Expand All @@ -27,6 +28,7 @@
### Core Package (`@tanstack/db`)

Contains generic errors used across the ecosystem:

- Collection configuration, state, and operation errors
- Transaction lifecycle and mutation errors
- Query building, compilation, and execution errors
Expand All @@ -35,11 +37,13 @@
### Adapter Packages

Each adapter now exports its own specific error classes:

- **`@tanstack/electric-db-collection`**: Electric-specific errors
- **`@tanstack/trailbase-db-collection`**: TrailBase-specific errors
- **`@tanstack/query-db-collection`**: Query collection specific errors

## Breaking Changes

- Error handling code using string matching will need to be updated to use `instanceof` checks
- Some error messages may have slight formatting changes
- Adapter-specific errors now need to be imported from their respective packages
Expand Down Expand Up @@ -108,6 +112,7 @@
```

## Benefits

- **Type Safety**: All errors now have specific types that can be caught with `instanceof`
- **Unified Error Handling**: Root `TanStackDBError` class allows catching all library errors with a single check
- **Better Package Separation**: Each adapter manages its own error types
Expand Down Expand Up @@ -148,6 +153,7 @@
### Patch Changes

- Add explicit collection readiness detection with `isReady()` and `markReady()` ([#270](https://github.com/TanStack/db/pull/270))

- Add `isReady()` method to check if a collection is ready for use
- Add `onFirstReady()` method to register callbacks for when collection becomes ready
- Add `markReady()` to SyncConfig interface for sync implementations to explicitly signal readiness
Expand Down Expand Up @@ -187,13 +193,15 @@
### Patch Changes

- Move Collections to their own packages ([#252](https://github.com/TanStack/db/pull/252))

- Move local-only and local-storage collections to main `@tanstack/db` package
- Create new `@tanstack/electric-db-collection` package for Electric SQL integration
- Create new `@tanstack/query-db-collection` package for TanStack Query integration
- Delete `@tanstack/db-collections` package (removed from repo)
- Update example app and documentation to use new package structure

Why?

- Better separation of concerns
- Independent versioning for each collection type
- Cleaner dependencies (electric collections don't need query deps, etc.)
Expand Down
3 changes: 3 additions & 0 deletions packages/react-db/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@
Adds automatic lifecycle management for collections to optimize resource usage.

**New Features:**

- Added `startSync` option (defaults to `false`, set to `true` to start syncing immediately)
- Automatic garbage collection after `gcTime` (default 5 minutes) of inactivity
- Collection status tracking: "idle" | "loading" | "ready" | "error" | "cleaned-up"
Expand Down Expand Up @@ -240,6 +241,7 @@
### Patch Changes

- A large refactor of the core `Collection` with: ([#155](https://github.com/TanStack/db/pull/155))

- a change to not use Store internally and emit fine grade changes with `subscribeChanges` and `subscribeKeyChanges` methods.
- changes to the `Collection` api to be more `Map` like for reads, with `get`, `has`, `size`, `entries`, `keys`, and `values`.
- renames `config.getId` to `config.getKey` for consistency with the `Map` like api.
Expand All @@ -254,6 +256,7 @@
- Expose utilities on collection instances ([#161](https://github.com/TanStack/db/pull/161))

Implemented a utility exposure pattern for TanStack DB collections that allows utility functions to be passed as part of collection options and exposes them under a `.utils` namespace, with full TypeScript typing.

- Refactored `createCollection` in packages/db/src/collection.ts to accept options with utilities directly
- Added `utils` property to CollectionImpl
- Added TypeScript types for utility functions and utility records
Expand Down
24 changes: 24 additions & 0 deletions packages/svelte-db/.gitignore
Original file line number Diff line number Diff line change
@@ -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-*
3 changes: 3 additions & 0 deletions packages/svelte-db/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# @tanstack/svelte-db

Svelte helpers for TanStack DB. See [TanStack/db](https://github.com/TanStack/db) for more details.
Loading
Loading