Update to Svelte 5.25.0 and update "Sverdle" demo to use writable derived

[mdnahas]

Describe the bug

I wasn't sure where to report this. I couldn't find which repo had the code for the Sverdle demo app created by "npx sv create my-app".

I'm upgrading my repo from Svelte 4 to Svelte 5 and am not sure how to use runes. I installed the demo app to see what it did. In file /src/routes/sverdle/+page.svelte there is this code:

        /** The current guess */
	// svelte-ignore state_referenced_locally
	let currentGuess = $state(data.guesses[i] || '');

	$effect(() => {
		currentGuess = data.guesses[i] || '';
	});

This violates the advice on this page: "Generally speaking, you should not update state inside effects, as it will make code more convoluted and will often lead to never-ending update cycles"

I'm still not sure how to use runes. Sigh.

Reproduction

Run "npx sv create my-app"
Open my-app/src/routes/sverdle/+page.svelte
Observe lines 22 to 29.

Logs

System Info

N/A

Severity

annoyance

Additional Information

No response

[dummdidumm]

This is one of the cases where it's valid to use it.this synchronizes/resets the inner state when new data was loaded through the backend

[mdnahas]

If so, you can close this issue. Unless you want to add a comment to the code to explain to noobs like me.

[benmccann]

I haven't really looked because I'm on mobile right now, but I wonder if we should use the $derived.by trick. The trick is a bit ugly though. I wish we had $state.link

[mdnahas]

BTW, do you have any good documents that you can point me to on structuring runes? I called myself a "noob", but that's just with Svelte. I've built dataflow pricing systems for Wall St.. Svelte 5 feels like a dataflow system under the hood, but it isn't clear from the docs how to structure programs. $state() seems like nodes, with callbacks being in-edges and $effect() being out-edges. It feels like $derived() is meant for internal nodes and internal edges.

But the more complicated stuff isn't clear. E.g., I don't understand the comment by @dummdidumm. Any pointers to documents or good example programs would be helpful.

[mdnahas]

To answer my own request: I found this video series by Peter Makes Websites Ltd. It talks about the dataflow of signals. It goes into what $effect()s are and viewers might be able to figure out why @dummdidumm thinks that the current use of $effect() in the file is appropriate.

Video number 3: effects in Svelte 5

I'm leaving this issue open because I think the line in the file should have a comment.

[manuel3108]

Feel free to PR that comment:

cli/packages/create/templates/demo/src/routes/sverdle/+page.svelte

Lines 35 to 37 in d1f4432

	$effect(() => {
	currentGuess = data.guesses[i] || '';
	});

[benmccann]

This is pretty related to sveltejs/svelte#14536 and sveltejs/svelte#13452. @paoloricciuti posted one solution in sveltejs/svelte#15107 (comment)

[benmccann]

Here's a commit using @paoloricciuti's trick, which saves a few lines of code and removes the `$effect: benmccann/derived.by-trick-demo@9d41f28

[Rich-Harris]

Paolo's solution is clever. Too clever. We shouldn't use it.

What we're trying to express here (and what the $: code that this was directly converted from allowed you to express) was that currentGuess should be derived from the current data, but you should also be able to override it with ephemeral state. The thing is we could just do that — instead of this...

/** The current guess */
// svelte-ignore state_referenced_locally
let currentGuess = $state(data.guesses[i] || '');

$effect(() => {
  currentGuess = data.guesses[i] || '';
});

...we could have this:

/** The current guess */
let currentGuess = $derived(data.guesses[i] || '');

All we need to do is relax the rule that says you can't assign to a derived. This is a little bit 'naughty' but I think it's a very Svelte-like solution:

• sacrificing a little bit of purity in service of pragmatic goals is basically our whole deal
• not a breaking change
• no new runes to learn
• simplifies code like this a good deal
• is straightforward implementation-wise (mostly involves deleting code AFAICT)

In fact we're already doing this with props — a non-bindable prop is essentially a derived that you can temporarily override locally. Which is weird! If we had this, then maybe in a future version we could make non-bindable props readonly (and more efficient and easier to reason about, in the process) and encourage people to use local deriveds to make it much more explicit that your local overrides don't affect the props themselves.

[paoloricciuti]

Yes please...having reassignable deriveds is what $state.link was for and basically what this trick does. So we can just use this very trick under the hood when we see that a derived is reassigned.

I can put up a PR if we decide to go this direction

[mdnahas]

It took me 3 days and I've got the gist of Svelte 5 now. I had to look at the Signals standard proposal and Svelte compiler output code! I've designed dataflow systems for Wall St. --- Svelte 5 needs much better documentation about the internals. E.g., it is fine to change $state() in an async $effect() and $effect() can run multiple times (up to 1000 times) after a triggering event.

Sverdle stores the state in the cookies. The correct behavior is to change "data" on the client side when an action changes a value in the cookies. "data" should be kept in sync with what the server would return if the page was reloaded.

The fix is to get rid of the change to "currentGuess" on lines 83 and 86. They should make changes to "data". "currentGuess" should be a simple $derived.

If I want to write a document on Svelte 5 internals and how to design complex Svelte 5 programs, where can I put it? I can add it to my own website, but I doubt most programmers will find it there.

Mike Nahas, designer of ".par2" file format.