Skip to content

feat(examples): add wa-sqlite OPFS persistence demo#1329

Open
kevin-dp wants to merge 3 commits intocursor/persistence-plan-design-doc-f6d0from
examples/offline-transactions-wa-sqlite-demo
Open

feat(examples): add wa-sqlite OPFS persistence demo#1329
kevin-dp wants to merge 3 commits intocursor/persistence-plan-design-doc-f6d0from
examples/offline-transactions-wa-sqlite-demo

Conversation

@kevin-dp
Copy link
Contributor

@kevin-dp kevin-dp commented Mar 4, 2026

Summary

  • Adds a new /wa-sqlite route to the offline-transactions example app demonstrating collection-level persistence using @tanstack/db-browser-wa-sqlite-persisted-collection
  • Unlike the existing IndexedDB/localStorage pages (which use offline executor mutation queuing), this uses persistedCollectionOptions for local-first data storage in a real SQLite database in the browser via OPFS
  • Includes Vite config for WASM serving middleware (TanStack Start's catch-all intercepts .wasm requests), source aliasing for ?worker imports, and a fix for the missing getRouter export

Test plan

  • Run pnpm dev in examples/react/offline-transactions
  • Visit http://localhost:3000/wa-sqlite
  • Add todos, toggle completion, delete — verify all operations work
  • Refresh the page — verify todos persist across reloads
  • Verify existing IndexedDB and localStorage pages still work
  • Replace the workspace dependencies by actual versioned deps for @tanstack/db and @tanstack/db-browser-wa-sqlite-persisted-collection

Note: the IndexedDB and localStorage examples in this demo are actually broken (were already broken before this PR). The API routes at /api/todos won't work in SPA mode because there's no server to handle them. The fetchWithRetry keeps retrying with exponential backoff, causing an infinite "Loading todos..." state.

🤖 Generated with Claude Code

@changeset-bot
Copy link

changeset-bot bot commented Mar 4, 2026

⚠️ No Changeset found

Latest commit: dc17281

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 4, 2026

More templates

@tanstack/angular-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/angular-db@1329

@tanstack/db

npm i https://pkg.pr.new/TanStack/db/@tanstack/db@1329

@tanstack/db-browser-wa-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-browser-wa-sqlite-persisted-collection@1329

@tanstack/db-cloudflare-do-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-cloudflare-do-sqlite-persisted-collection@1329

@tanstack/db-electron-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-electron-sqlite-persisted-collection@1329

@tanstack/db-ivm

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-ivm@1329

@tanstack/db-node-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-node-sqlite-persisted-collection@1329

@tanstack/db-react-native-sqlite-persisted-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-react-native-sqlite-persisted-collection@1329

@tanstack/db-sqlite-persisted-collection-core

npm i https://pkg.pr.new/TanStack/db/@tanstack/db-sqlite-persisted-collection-core@1329

@tanstack/electric-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/electric-db-collection@1329

@tanstack/offline-transactions

npm i https://pkg.pr.new/TanStack/db/@tanstack/offline-transactions@1329

@tanstack/powersync-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/powersync-db-collection@1329

@tanstack/query-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/query-db-collection@1329

@tanstack/react-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/react-db@1329

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/rxdb-db-collection@1329

@tanstack/solid-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/solid-db@1329

@tanstack/svelte-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/svelte-db@1329

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/TanStack/db/@tanstack/trailbase-db-collection@1329

@tanstack/vue-db

npm i https://pkg.pr.new/TanStack/db/@tanstack/vue-db@1329

commit: f815a2f

@github-actions
Copy link
Contributor

github-actions bot commented Mar 4, 2026

Size Change: 0 B

Total Size: 94.6 kB

ℹ️ View Unchanged
Filename Size
./packages/db/dist/esm/collection/change-events.js 1.39 kB
./packages/db/dist/esm/collection/changes.js 1.22 kB
./packages/db/dist/esm/collection/events.js 434 B
./packages/db/dist/esm/collection/index.js 3.56 kB
./packages/db/dist/esm/collection/indexes.js 2.35 kB
./packages/db/dist/esm/collection/lifecycle.js 1.75 kB
./packages/db/dist/esm/collection/mutations.js 2.34 kB
./packages/db/dist/esm/collection/state.js 3.49 kB
./packages/db/dist/esm/collection/subscription.js 3.71 kB
./packages/db/dist/esm/collection/sync.js 2.41 kB
./packages/db/dist/esm/deferred.js 207 B
./packages/db/dist/esm/errors.js 4.7 kB
./packages/db/dist/esm/event-emitter.js 748 B
./packages/db/dist/esm/index.js 2.77 kB
./packages/db/dist/esm/indexes/auto-index.js 742 B
./packages/db/dist/esm/indexes/base-index.js 766 B
./packages/db/dist/esm/indexes/btree-index.js 2.17 kB
./packages/db/dist/esm/indexes/lazy-index.js 1.24 kB
./packages/db/dist/esm/indexes/reverse-index.js 538 B
./packages/db/dist/esm/local-only.js 808 B
./packages/db/dist/esm/local-storage.js 2.1 kB
./packages/db/dist/esm/optimistic-action.js 359 B
./packages/db/dist/esm/paced-mutations.js 496 B
./packages/db/dist/esm/proxy.js 3.75 kB
./packages/db/dist/esm/query/builder/functions.js 733 B
./packages/db/dist/esm/query/builder/index.js 4.1 kB
./packages/db/dist/esm/query/builder/ref-proxy.js 1.05 kB
./packages/db/dist/esm/query/compiler/evaluators.js 1.62 kB
./packages/db/dist/esm/query/compiler/expressions.js 430 B
./packages/db/dist/esm/query/compiler/group-by.js 2.23 kB
./packages/db/dist/esm/query/compiler/index.js 2.04 kB
./packages/db/dist/esm/query/compiler/joins.js 2.11 kB
./packages/db/dist/esm/query/compiler/order-by.js 1.45 kB
./packages/db/dist/esm/query/compiler/select.js 1.09 kB
./packages/db/dist/esm/query/expression-helpers.js 1.43 kB
./packages/db/dist/esm/query/ir.js 673 B
./packages/db/dist/esm/query/live-query-collection.js 360 B
./packages/db/dist/esm/query/live/collection-config-builder.js 5.55 kB
./packages/db/dist/esm/query/live/collection-registry.js 264 B
./packages/db/dist/esm/query/live/collection-subscriber.js 2.42 kB
./packages/db/dist/esm/query/live/internal.js 145 B
./packages/db/dist/esm/query/optimizer.js 2.62 kB
./packages/db/dist/esm/query/predicate-utils.js 2.97 kB
./packages/db/dist/esm/query/subset-dedupe.js 921 B
./packages/db/dist/esm/scheduler.js 1.3 kB
./packages/db/dist/esm/SortedMap.js 1.3 kB
./packages/db/dist/esm/strategies/debounceStrategy.js 247 B
./packages/db/dist/esm/strategies/queueStrategy.js 428 B
./packages/db/dist/esm/strategies/throttleStrategy.js 246 B
./packages/db/dist/esm/transactions.js 2.9 kB
./packages/db/dist/esm/utils.js 924 B
./packages/db/dist/esm/utils/browser-polyfills.js 304 B
./packages/db/dist/esm/utils/btree.js 5.61 kB
./packages/db/dist/esm/utils/comparison.js 952 B
./packages/db/dist/esm/utils/cursor.js 457 B
./packages/db/dist/esm/utils/index-optimization.js 1.51 kB
./packages/db/dist/esm/utils/type-guards.js 157 B

compressed-size-action::db-package-size

@github-actions
Copy link
Contributor

github-actions bot commented Mar 4, 2026

Size Change: 0 B

Total Size: 3.85 kB

ℹ️ View Unchanged
Filename Size
./packages/react-db/dist/esm/index.js 225 B
./packages/react-db/dist/esm/useLiveInfiniteQuery.js 1.32 kB
./packages/react-db/dist/esm/useLiveQuery.js 1.34 kB
./packages/react-db/dist/esm/useLiveSuspenseQuery.js 559 B
./packages/react-db/dist/esm/usePacedMutations.js 401 B

compressed-size-action::react-db-package-size

@kevin-dp kevin-dp force-pushed the examples/offline-transactions-wa-sqlite-demo branch 2 times, most recently from 1fa0478 to eb53ea9 Compare March 5, 2026 09:42
…ctions

Add a new /wa-sqlite route to the offline-transactions example that
demonstrates collection-level persistence using wa-sqlite with OPFS.
Unlike the existing IndexedDB/localStorage pages (which use offline
executor mutation queuing), this uses persistedCollectionOptions for
local-first data storage in a real SQLite database in the browser.

- Add PersistedTodoDemo component with CRUD operations
- Add persisted-todos.ts collection setup using wa-sqlite OPFS
- Configure Vite to alias wa-sqlite package to source for ?worker imports
- Add WASM middleware to serve .wasm files before TanStack Start's catch-all
- Fix router.tsx missing getRouter export required by TanStack Start

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kevin-dp kevin-dp force-pushed the examples/offline-transactions-wa-sqlite-demo branch from 490d519 to d7a150d Compare March 5, 2026 12:26
kevin-dp and others added 2 commits March 5, 2026 14:13
@tobacode
Copy link

tobacode commented Mar 6, 2026

The fetchWithRetry keeps retrying with exponential backoff, causing an infinite "Loading todos"

The infinite retry loop here might be related to #1065

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants