← Back to context

Comment by DonHopkins

5 years ago

>- Special syntax for reactivity is not javascript

Are you referring to Svelte using the $: dollar label prefix syntax for reactivity?

Yes, that is most certainly is standard JavaScript syntax. Read the docs:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

>label: The labeled statement can be used with break or continue statements. It is prefixing a statement with an identifier which you can refer to.

https://svelte.dev/docs

>3. $: marks a statement as reactive

>Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the $: JS label syntax. Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.

https://dev.to/itsjzt/understanding-svelte-s-dollar-label-sy...

>Understanding Svelte's $: (dollar label) syntax

>In the long list of cool features of svelte, The one which I use more often is this dollar label thing. Initially, it looked strange to me but later I realized it is a valid javascript syntax. You can use it for doing side effects like useEffect of React, there is also a syntactic sugar way of declaring computed properties.

The Svelte compiler does add special SEMANTICS to JavaScript (and that's what makes it so great), but it does NOT add any special SYNTAX at all.

Although it might mistakenly appear to you that it does, if you're not entirely familiar with the well documented standard JavaScript syntax definition that I linked to above.

Your off-the-shelf code highlighters and linters will work just fine inside the standard <script> tags in svelte files, exactly like they should. That was the whole point behind Svelte's design.

However that's not the case with JSX, because JSX is definitely NOT the same as JavaScript, no matter how fuzzy and inconsistent a definition of "equality" and how many equal signs you use.