Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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)


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> `


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: