Wrong order of execution for reactive variable

[milkbump]

When I assign a value from a standard variable to a reactive variable, accessing the reactive variable afterwards results in an "uninitialized error".

For example:

let val = "onion";

$: gold = val;

console.log("gold", gold);

Generates:

let val = "onion";
function instance($$self) {
	console.log("gold", gold);    // this comes before
	let gold;
	$: gold = val;
	return [];
}

Which results in a Cannot access 'gold' before initialization error. I would expect it to generate:

let val = "onion";
function instance($$self) {
	let gold;
	$: gold = val;
        console.log("gold", val);    // this comes after
	return [];
}

See Svelte REPL repro

[tivac]

$: console.log("gold", gold);

will do what you want.

[milkbump]

Thanks. I figured as much. I still think that the current behaviour is unexpected and probably a bug.

[Conduitry]

I'm undecided about what to do here. One option would be to just put the auto declarations from reactive variables earlier, but that might not be too helpful, as I think the non-reactive references to them would just get undefined. Perhaps it should be a compiler error to refer to an auto declared reactive variable from the top level of the <script>? Are there other situations we need to worry about? What happens when someone synchronously calls a function from the top level, and that refers to an auto declared variable?

[dummdidumm]

This no longer breaks in the most recent version and instead prints undefined

[dummdidumm]

$: blocks are executed at the end of initialization, but it isn't obvious. Svelte 5 will fix this through the runes API. In runes mode, it's a function through which it's more obvious that they don't fire immediately / you don't expect them to be executed immediately.