Reactive declaration syntax

[jimafisk]

Svelte defines reactive declarations, or variables that automatically update when a value they depend on changes, by highjacking the label syntax for its own purpose. For example, in Svelte that looks like this:

let count = 0;
$: doubled = count * 2;

The label syntax probably seems like foreign to most folks, so I wonder if we should instead adopt the $ syntax that folks sometimes already use for things like denoting jQuery objects in plain JS. So in Pico a reactive declaration would look like this:

let count = 0;
let $doubled = count * 2;

[jimafisk]

Do non-svelte folks know what Reactive variables are? Could also be called: chained, dependent, reliant, updating, interactive, computed, referenced, tied, tethered, connected, referenced, joined, linked, attached...

[jimafisk]

I've revised my thinking on this, the $ symbol should be used for stores so the API remains more similar to Svelte (and I like the association of stores/money). That doesn't leave us with a ton of options for reactive variables given that valid JS variables must start with $, _, or a letter.

Luckily I think starting reactive variables with an underscore _ makes sense. As noted here:

Apart from privacy conventions, I also wanted to help bring awareness that the underscore prefix is also used for arguments that are dependent on independent arguments

That closely fits with the purpose of reactive variables, keeps with convention, and is valid JS. I also like that when you're scanning your code, you'll know immediately which variables are reactive vs with the label syntax you'd only know by looking at where the variable is originally declared.

So this would look like:

<script>
  let count = 0;
  let _doubled = count * 2;
</script>

<div>Double is {_double}</div>