Svelte example: upgrade from Svelte 4 to Svelte 5 runes - #8878
Open
pubkey wants to merge 1 commit into
Open
Conversation
- svelte 4.2.20 -> 5.56.8 and enable `runes: true` in the compiler options - main.js mounts the app with `mount()` instead of `new App()` - store.js -> store.svelte.js, the shared writables are replaced by a `$state` object that the components read and bind to directly - NoteList subscribes to the RxDB query inside an `$effect` and now unsubscribes when the component is destroyed - `on:click` -> `onclick`, and `<textarea />` is closed properly FIX saving an already existing note threw because `RxDocument.update()` was used without adding the `update` plugin. The editor now uses the core `incrementalPatch()` method, and the note title is readonly while an existing note is edited because it is the primaryKey of the schema. Adds an e2e testcase that edits an existing note, which is what uncovered the broken save path. Also removes `scripts/setupTypeScript.js`, a leftover of the old sveltejs/template that pinned svelte-check 2 and svelte-preprocess 4. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018i2Nta1aLFUMQgHEbaLdQa
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR contains:
examples/svelteDescribe the problem you have without this PR
examples/sveltewas pinned tosvelte@4.2.20. Svelte 5 has been the current major version since October 2024, so the example showed patterns that no longer match what a new Svelte app looks like:new App({ target }),svelte/storewritables with$storeauto-subscriptions,on:clickhandlers and a self-closing<textarea />(which Svelte 5 rejects).While migrating, the edit path turned out to be broken.
NoteEditorcalledRxDocument.update()butstore.jsonly added the query-builder and dev-mode plugins, so saving an already existing note threwyou must add the update plugin. The old e2e test is namedinsert/edit/remove a notebut never actually edited a note, so nothing caught it.What changed
Svelte 5 migration
svelte4.2.20->5.56.8, plusrunes: truein the compiler options ofrollup.config.mjsso the example cannot fall back to legacy reactivity.rollup-plugin-svelte@7.2.3already supports Svelte 5 and compiles.svelte.jsrune modules, so the build setup stays as it is.src/main.jsmounts withmount(App, { target })instead ofnew App({ target }).src/store.js->src/store.svelte.js. The four writables are replaced by one$stateobject plusselectNote()andresetForm()helpers. Components read andbind:to its fields directly, no$prefix and no.set()calls.NoteList.sveltesubscribes to the RxDB query inside an$effectand returns a teardown that unsubscribes. The oldonMountversion never unsubscribed. The{#await}block around a plain array was replaced by a realloadedflag, and the{#each}is now keyed by the primary key.on:click->onclick,<textarea />-><textarea></textarea>.scripts/setupTypeScript.js, a leftover of the oldsveltejs/templatethat pinnedsvelte-check@2andsvelte-preprocess@4. Nothing referenced it and both are incompatible with Svelte 5.Bugfix
NoteEditornow uses the coreincrementalPatch()instead ofupdate(). It needs no extra plugin and retries on conflicts.readonlywhile an existing note is edited, becausenameis theprimaryKeyof the schema and cannot change. Before this, editing the title of a saved note would have thrown even with the update plugin added.Todos
npm run buildplus the full e2e suite (2 passed) against a Chrome 141 headless run, and checked that all components and the rune module compile without warnings indev: true, runes: truemode.examples/svelte/README.mdlists where the runes are used.orga/changelog/svelte-example-svelte-5-runes.md