search

sveltejs / svelte.dev

The Svelte omnisite
https://svelte.dev
111 stars 73 forks source link

Svelte 5 (web) REPL behaviour is indeterminate on effects tutorial page when typing out initial $effect code snippet #884

Open natteko opened 5 days ago

natteko commented 5 days ago

Describe the bug

The tutorial puts an emphasis on the user typing code out manually from the markup blob, as opposed to copy pasting. However the sampling rate of the REPL contradicts this philosophy. This is especially evident in the effects exercise. If the user copy pastes the code, the result is as expected and the elapsed counter value immediately begins going up. However, if the user types out the code manually, the behaviour of the the counter is indeterminate. It may begin counting up after an unknown time period, or the user may get an unexpected token error in the Svelte output window. The reason for this may be due to how frequently the REPL samples the code and runs it. This is evident when (the real) console is opened, and it is shown to be fludded with errors akin to (["e", "el", "ela", "elap", ...] is not defined") errors.

Reproduction

Typing out the the initial $effect code snippet on https://svelte.dev/tutorial/svelte/effects into the REPL environment

Logs

Uncaught ReferenceError: ela is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: elaps is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: elapse is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: elap is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: e is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: el is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: ela is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: elaps is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: elapse is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: elap is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: e is not defined
    App playground:output:2558
srcdoc line 85 > eval:2558:5
Uncaught ReferenceError: el is not defined

and so on...

System Info

Firefox version 132.0.2 (64-bit)

Severity

annoyance

brunnerh commented 5 days ago

Writing anything related to timers is not great in the REPL. One should essentially write them backwards, starting with the cleanup because you otherwise easily end up with timers that are never cleaned up.

Example used for this tutorial should maybe just be replaced with something else.