Skip to content

Conversation

@KyleAMathews
Copy link
Collaborator

Fixes #744

The flushSync() call inside the onFirstReady callback was breaking Svelte 5's async compiler mode. The async compiler enforces a rule that flushSync cannot be called inside effects, as documented at svelte.dev/e/flush_sync_in_effect.

The fix removes the flushSync call and updates status directly. Svelte's reactivity system handles the update automatically without needing synchronous flushing. This matches the pattern used in Vue's implementation.

Changes:

  • Removed flushSync() wrapper from onFirstReady callback
  • Removed unused flushSync import
  • Updated comment to explain why flushSync cannot be used
  • All 23 existing tests pass, confirming no regression

This fix is backward compatible:

  • For users WITHOUT async mode (current default): Works as before
  • For users WITH async mode: Now works instead of throwing error
  • Future-proof: async mode will be default in Svelte 6

🎯 Changes

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

…r mode

Fixes #744

The flushSync() call inside the onFirstReady callback was breaking
Svelte 5's async compiler mode. The async compiler enforces a rule
that flushSync cannot be called inside effects, as documented at
svelte.dev/e/flush_sync_in_effect.

The fix removes the flushSync call and updates status directly.
Svelte's reactivity system handles the update automatically without
needing synchronous flushing. This matches the pattern used in
Vue's implementation.

Changes:
- Removed flushSync() wrapper from onFirstReady callback
- Removed unused flushSync import
- Updated comment to explain why flushSync cannot be used
- All 23 existing tests pass, confirming no regression

This fix is backward compatible:
- For users WITHOUT async mode (current default): Works as before
- For users WITH async mode: Now works instead of throwing error
- Future-proof: async mode will be default in Svelte 6
@changeset-bot
Copy link

changeset-bot bot commented Nov 3, 2025

🦋 Changeset detected

Latest commit: 6282d4e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@tanstack/svelte-db Patch

Not sure what this means? Click here to learn what changesets are.

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

@KyleAMathews
Copy link
Collaborator Author

@wobsoriano does this seem reasonable?

@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 3, 2025

More templates

@tanstack/angular-db

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

@tanstack/db

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

@tanstack/db-ivm

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

@tanstack/electric-db-collection

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

@tanstack/offline-transactions

npm i https://pkg.pr.new/@tanstack/offline-transactions@745

@tanstack/powersync-db-collection

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

@tanstack/query-db-collection

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

@tanstack/react-db

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

@tanstack/rxdb-db-collection

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

@tanstack/solid-db

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

@tanstack/svelte-db

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

@tanstack/trailbase-db-collection

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

@tanstack/vue-db

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

commit: 6282d4e

@github-actions
Copy link
Contributor

github-actions bot commented Nov 3, 2025

Size Change: 0 B

Total Size: 79.1 kB

ℹ️ View Unchanged
Filename Size
./packages/db/dist/esm/collection/change-events.js 1.34 kB
./packages/db/dist/esm/collection/changes.js 977 B
./packages/db/dist/esm/collection/events.js 388 B
./packages/db/dist/esm/collection/index.js 3.12 kB
./packages/db/dist/esm/collection/indexes.js 1.1 kB
./packages/db/dist/esm/collection/lifecycle.js 1.67 kB
./packages/db/dist/esm/collection/mutations.js 2.26 kB
./packages/db/dist/esm/collection/state.js 3.43 kB
./packages/db/dist/esm/collection/subscription.js 2.42 kB
./packages/db/dist/esm/collection/sync.js 2.02 kB
./packages/db/dist/esm/deferred.js 207 B
./packages/db/dist/esm/errors.js 3.9 kB
./packages/db/dist/esm/event-emitter.js 748 B
./packages/db/dist/esm/index.js 2.36 kB
./packages/db/dist/esm/indexes/auto-index.js 731 B
./packages/db/dist/esm/indexes/base-index.js 766 B
./packages/db/dist/esm/indexes/btree-index.js 1.87 kB
./packages/db/dist/esm/indexes/lazy-index.js 1.1 kB
./packages/db/dist/esm/indexes/reverse-index.js 513 B
./packages/db/dist/esm/local-only.js 837 B
./packages/db/dist/esm/local-storage.js 2.04 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.22 kB
./packages/db/dist/esm/query/builder/functions.js 606 B
./packages/db/dist/esm/query/builder/index.js 3.85 kB
./packages/db/dist/esm/query/builder/ref-proxy.js 917 B
./packages/db/dist/esm/query/compiler/evaluators.js 1.26 kB
./packages/db/dist/esm/query/compiler/expressions.js 674 B
./packages/db/dist/esm/query/compiler/group-by.js 1.78 kB
./packages/db/dist/esm/query/compiler/index.js 1.95 kB
./packages/db/dist/esm/query/compiler/joins.js 2 kB
./packages/db/dist/esm/query/compiler/order-by.js 1.17 kB
./packages/db/dist/esm/query/compiler/select.js 1.07 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 kB
./packages/db/dist/esm/query/live/collection-registry.js 214 B
./packages/db/dist/esm/query/live/collection-subscriber.js 1.77 kB
./packages/db/dist/esm/query/optimizer.js 2.6 kB
./packages/db/dist/esm/scheduler.js 1.21 kB
./packages/db/dist/esm/SortedMap.js 1.18 kB
./packages/db/dist/esm/strategies/debounceStrategy.js 237 B
./packages/db/dist/esm/strategies/queueStrategy.js 418 B
./packages/db/dist/esm/strategies/throttleStrategy.js 236 B
./packages/db/dist/esm/transactions.js 2.9 kB
./packages/db/dist/esm/utils.js 881 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 660 B
./packages/db/dist/esm/utils/index-optimization.js 1.49 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 Nov 3, 2025

Size Change: 0 B

Total Size: 3.34 kB

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

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

Copy link
Collaborator

@samwillis samwillis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving but with the question - do we have a test that validates this statement:

The fix removes the flushSync call and updates status directly. Svelte's reactivity system handles the update automatically without needing synchronous flushing.

Add test to verify that status changes in useLiveQuery properly trigger
reactive re-execution in Svelte effects. This validates that accessing
query.isReady/isLoading in component templates will automatically
re-render when status changes from loading to ready.

The test uses $effect() to track execution counts, confirming that
Svelte's $state reactivity system works correctly with the status
updates that occur via the onFirstReady callback (which doesn't use
flushSync in async compiler mode).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@KyleAMathews
Copy link
Collaborator Author

Ah good call — just added an actual test.

@KyleAMathews KyleAMathews force-pushed the claude/validate-and-fix-bug-011CUk3w5CN4UmLKb7pLVzzT branch from afb711c to 521f838 Compare November 5, 2025 16:08
Regenerate docs after adding reactive status change test.
All files now use correct PascalCase naming to match main branch.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@KyleAMathews KyleAMathews force-pushed the claude/validate-and-fix-bug-011CUk3w5CN4UmLKb7pLVzzT branch from 521f838 to 36f8e45 Compare November 5, 2025 16:11
KyleAMathews and others added 2 commits November 5, 2025 09:14
Update React reference docs to include useLiveSuspenseQuery hook
that was added in main.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@KyleAMathews KyleAMathews merged commit 5fe5b6a into main Nov 5, 2025
7 checks passed
@KyleAMathews KyleAMathews deleted the claude/validate-and-fix-bug-011CUk3w5CN4UmLKb7pLVzzT branch November 5, 2025 16:22
@github-actions github-actions bot mentioned this pull request Nov 5, 2025
@KyleAMathews KyleAMathews moved this from Ready for review to Done in TanStack DB 1.0.0 release Nov 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

svelte-db: flushSync inside effect breaks Svelte 5 async compiler mode

4 participants