Module Declarations are not Reactive - is this expected? #5843
Description
Describe the bug
When following the Tutorial, the Module Context > Sharing Code lesson shows that module variables are shared between components of the same type.
There's nothing to say that module variables are not reactive - is this expected behaviour?
To Reproduce
I have a trite REPL example that shows no reactivity when module variables are modified:
https://svelte.dev/repl/369bc4ec3fbb4d81910d08aba96779a1?version=3.31.0
Expected behavior
Visually there's no clue that the following are fundamentally different.
This works as expected
<script>
let foo;
function updateFoo(bar) {
foo = Math.random();
}
$: console.log(foo); // fine
</script>This doesn't
<script context="module">
let foo;
</script>
<script>
function updateFoo(bar) {
foo = Math.random();
}
$: console.log(foo); // not fine
</script>A slight tangent
The second foo should throw a warning.
Paste this into a vanilla html document and you'd see Uncaught SyntaxError: Identifier 'foo' has already been declared
<script context="module">
let foo;
</script>
<script>
let foo;
</script>Severity
More than anything, it surprised me. In the context of the tutorial, it's an 11th-hour edge-case / gotcha to be mindful of.
Idea
The compiler could / should complain about reactive statements related to module variables. I'd love to see this in the same vein of:
- A component can only have one <script context="module"> element
- A component can only have one instance-level <script> element