how does $: in Svelte works-CodePudding

was reading a svelte tutorial, it's mentioned that $: this is regular in JavaScript, but don't understand it.

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

how would you do this in vanilla JavaScript. checking for code that has been change

CodePudding user response：

I assume you mean this docs - https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive

In this case I think they are talking about programming language syntax feature called "label". In case of JS you may read about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

It is needed to look at Svelte source code attentively, but I guess they use this valid JS syntax pattern $: to mark top-level statements and allow them later to parse and pre-process.

So it's not a black JS magic, but a convention only in Svelte "world".

Update:

I think it used somewhere here in source code - https://github.com/sveltejs/svelte/blob/0d017f482016caa51d34918f79dc0b83f0428fd7/src/compiler/compile/Component.ts#L651

If you want to follow the logic, look at usage of "LabeledStatement".

CodePudding user response：

how would you do this in vanilla JavaScript. checking for code that has been change

There are various approaches to this. E.g. dirty checking by comparing previous values with current values and thus determining changes. This approach has some downsides. Among others, data might be duplicated and performance can degrade for larger amounts of data because of all the necessary comparisons.

Another method would be to make dependencies explicit and only update when one of the dependencies changes. Svelte generates the code necessary for that automatically but it can be done manually as well. If you look at generated code you will find that variables get marked as invalidated which triggers updates to the dependent variables.

E.g. in a click handler that increments a count variable you get:

const click_handler = () => $$invalidate(0, count  , count);

For the reactive statement, the code is only run if the count has been changed:

$$self.$$.update = () => {
    if ($$self.$$.dirty & /*count*/ 1) {
        $: doubled = count * 2;
    }
};

This code is optimized for performance, though. It uses array indexes for faster data access and more lean code. For code intended to be written and read by humans, you might want to not do that. Generally, I would not recommend doing this manually either way; it is more verbose and you have to make sure to always specify dependencies correctly for it to work.