> The $ label is one technical reason why I would be hesitant to adopt Svelte fo...

pcthrowaway · on March 27, 2023

Interesting, my memory of reading about the Svelte magic reactivity was that it was pretty well explained that the only things 'reactive' would be things which were assigned to in the reactive statement.

So if you want to update y on some changes to x, you do

    $: y = x

And if you need something more complicated, a transformation perhaps, you put the logic in a function and assign y to the result of that

    function parseX(val) { ... }
    $: y = parseX(x)

opensas · on March 27, 2023

top level variables are reactive even when updated inside a function, just give it a try:

https://svelte.dev/repl/44e3aece18294ddb834bcdfb4394af48?ver...

` <script>

  let name = 'world';

  const flip = () => name = name === name.toUpperCase() ? name.toLowerCase() : name.toUpperCase()

  $: console.log({ name })

</script>

<h1>Hello {name}!</h1>

<button on:click={flip}>flip!</button> `

opensas · on March 27, 2023

the inconsistency comes from the fact that this reactivity, triggered from inside a function, is not taken into account to build the dependency graph and ultimately decide in which order to process the statements