Reactive statements and unexpected line execution order

[pushkine]

The compiler reorganizes the order at which lines are run such that reactive statements are only run at the end, that already by itself creates unexpected output such as :

let value = "hi"
$: value = "hello";
console.log(value) // prints "hi"

but then, when you'd expect reactive statements to at least keep the right order between themselves, this happens:

let value = "hi"
$: console.log(value) // prints "hello"
$: value = "hello";

the current component initialization order is the following :

1. run static statements
2. run "one time" dynamic statements
3. run dynamic statements

related : #4371

[Conduitry]

I don't think either of these are bugs, but they're probably something we should document somewhere.

The second one definitely isn't a bug, because we need to topologically sort the reactive blocks according to what depends on what. The first reactive block depends on value and the second one assigns value so the second one happens first during each update loop.

Given that we're reordering the blocks, having them be 'inline' with the rest of rest of the static top-level statements doesn't really make sense (not to mention the question of whether it would be considered a breaking change).

[pushkine]

What about adding a dev warning for reactive statements that aren't reactive ?
I mean what do they do apart from relocating your code toward the end of the block ? You could do that yourself anyway so what's the point of even allowing them in the first place ?

And yes that really should be highlighted in the docs since being able to pool together static top level and reactive statements heavily implies that they can interact with each other

edit : another idea could be to have the officially supported formatter reorder the lines in the order they run in

[tivac]

I wrote a custom lint rule that tries to identify static assignments in reactive blocks, it's not very smart but it helped us catch a couple instances of this sort of thing.