[ahipple]

> It doesn't throw a bunch of alien syntax at you, expecting you to decipher it like an ancient scroll

Sounds promising, but the first examples contrasts a React `useEffect` hook (a simple function call, into which you pass a callback and a dependency array) with

    <script>
        $: {
            console.log("Count Changed!", count)
        }
    </script>
    
    <!-- html -->

Which prompted in me roughly these questions:

- Is this actually just JavaScript?

- Oh, is `$` a label? [I googled this to confirm it is]

- I thought JavaScript didn't have a `goto` statement? [I googled this to confirm it doesn't]

- How does this ever get invoked? [I still don't know the answer to this question -- MDN says that labels can only be used with `break` and `continue` statements]

- Does it get invoked only when `count` changes?

- If so, how?

- If not, how do I specify the dependencies?

It might 'just work', but it's also not 'just JavaScript'.

[Tade0]

> How does this ever get invoked?

Initially the same way it would without the $: { ... } wrapper - that is true both for Svelte and vanilla JavaScript.

> Does it get invoked only when `count` changes?

It's invoked whenever a named variable that is mentioned in the block is explicitly assigned to.

That's the whole "magic" here really. It's "just" JS in the sense that there's no additional syntax introduced that would make it incompatible with any of the available JS parsers, so by extension TS parsers as well.

[ahipple]

Sure -- I did run that code in a JS REPL and saw that it invoked the block immediately, but that isn't necessarily what I want if I'm writing reactive code. I then tried typing `break $` and `continue $` and got SyntaxErrors for my trouble, confirming my hypothesis that this couldn't be plain JavaScript of the sort I was familiar with.

> It's invoked whenever a named variable that is mentioned in the block is explicitly assigned to.

This makes sense in the sense that it's a contract that I can accept and use, but it does imply the existence of a parsing pipeline & runtime of unknown (to me) complexity & capabilities -- exactly the sort of thing a prospective user of the framework would need to learn about sooner or later.

[Tade0]

Well, yeah - there's a reason why it's called a framework-compiler.

In any case you can always just look into the unminified output where you'll see how your code is instrumented - it even includes comments detailing which variables are being dirty-checked.

[chrismorgan]

> Is this actually just JavaScript?

JavaScript syntax, yes, but with Svelte semantics rather than JavaScript semantics. Everything else follows from that point. It gets invoked by the Svelte compiler transforming it. In order to work, `count` must have been defined as a property (`let count` or `export let count`), so that the compiler can run that code again when `count` changes. Reactive dependencies are specified purely by mention of their names. (Well, there’s stores too, via the $ prefix on variable names.)

> It might 'just work', but it's also not 'just JavaScript'.

You are completely correct.

[js2]

> How does this ever get invoked?

Via magic: Reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them.

https://svelte.dev/docs/svelte-components#script-3-$-marks-a...

[pier25]

It's Almost Just JavaScript™ :)

[DoesntMatter22]

> - I thought JavaScript didn't have a `goto` statement? [I googled this to confirm it doesn't]

Goto is not a statement. It's a function. Frameworks can have functions...

[chrismorgan]

Goto is control flow. You can’t do control flow with function calls in the sorts of languages we’re talking about, so goto has to be built into the language, typically as a statement.

(In some of these languages you can do awful hacks like using hooks intended for debuggers <https://entrian.com/goto/> or rewriting bytecode <https://github.com/snoack/python-goto>, and frankly what Svelte does is quite similar, just implemented as a compilation step rather than at runtime.)

[DoesntMatter22]

I assumed this was talking about the goto statement in Svelte which is navigation method. If not that's fine