Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module Declarations are not Reactive - is this expected? #5843

Closed
oodavid opened this issue Jan 1, 2021 · 3 comments · Fixed by #5847
Closed

Module Declarations are not Reactive - is this expected? #5843

oodavid opened this issue Jan 1, 2021 · 3 comments · Fixed by #5847

Comments

@oodavid
Copy link

oodavid commented Jan 1, 2021

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
@oodavid
Copy link
Author

oodavid commented Jan 1, 2021

Following on about compiler warnings, the idea could be generalised as:

this reactive statement will never be triggered / is unused

this means you could handle other edge cases too, ie:

const foo;
$: console.log(foo);

Via: https://discord.com/channels/457912077277855764/457912077277855766/794528287002329088

@Conduitry
Copy link
Member

It is expected, and is described in the reference in the blue box in https://svelte.dev/docs#script_context_module but perhaps should also be mentioned in the tutorial

@oodavid
Copy link
Author

oodavid commented Jan 1, 2021

Thanks.

Should I split out another issue for reactive statement warnings? Seems like I've really made two issues here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants