Create implicit values for stores referenced with $ prefix anywhere in script

[Rich-Harris]

Currently, referencing a reactive store foo as $foo works in templates and in reactive declarations. There's no real reason that shouldn't be extended to apply anywhere in the instance <script> block — especially since referencing $foo in an event handler already works if you've referenced $foo in one of the 'approved' ways.

[Conduitry]

I'm assuming using $foo in one of these new places would just result in the current value of the store, without any sort of reactivity? I think we need to be careful about what happens if the module/instance-level foo is shadowed by a foo local to some method. What would $foo inside that method refer to then?

[Rich-Harris]

Yeah — as an example, I'm reworking the REPL to use stores, and want to be able to do this sort of thing:

<!-- Repl.html -->
export function toJSON() {
  return {
    components: $components,
    values: $values
  };
}

Then the page can get the state of everything (to save it to a gist etc) with repl.toJSON(). It wouldn't make sense for that function to run reactively, it just needs to get a snapshot of those values. (We could achieve the same thing by adding a get() method to stores, or something, but then there'd be two different ways of referring to the same thing; I think this is preferable, and means that you don't need to learn special rules about where $foo is allowed.)

Since $foo is a real variable declared at the top level of the component, a reference to $foo wouldn't be shadowed by a reference to foo in some child scope. The reference isn't rewritten or manipulated in any way, it just causes the compiler to add the subscription code.