Svelte Context Module Scripts Explained

This guide assumes you are familiar with how JS scopes and modules work and have completed the svelte tutorial.

Read the The setup section

The setup

This is a simple hello world svelte component that you and I will be walking through to see how script context=module works.

<!-- HelloWorld.svelte -->

<!-- OUTER SCOPE STARTS -->
<script context="module">
  import { writable } from 'svelte/store'

  let message = 'world!'
  const count = writable(0)

  setInterval(() => {
    count.update(c => c + 1)
  }, 1000)
</script>

<!-- INNER SCOPE STARTS -->
<script>
  $: console.log($count)
</script>

<p>hello {message}</p>
<button on:click={() => $count = 0}>Reset Count</button>
<!-- INNER SCOPE ENDS -->
<!-- OUTER SCOPE ENDS -->

Read the What a svelte component file looks like in JS section

What a svelte component file looks like in JS

Let’s see what a svelte component roughly would look like if it was written in JS to understand how context=module script works.

// HelloWorld.js

// OUTER SCOPE STARTS
import { writable } from 'svelte/store'

let message = 'world!'
const count = writable(0)

setInterval(() => {
	count.update((c) => c + 1)
}, 1000)

// @SVELTE-COMPILE
export const HelloWorld = () => {
	// INNER SCOPE STARTS
	$: console.log($count)

	return html`
		<p>hello ${message}</p>
		<button on:click="${() => ($count = 0)}">Reset Count</button>
	`
	// INNER SCOPE ENDS
}

export default HelloWorld
// OUTER SCOPE ENDS

Read the What are the differences between context=module and non context=module script tags? section

What are the differences between context=module and non context=module script tags?

• The code inside context=module scripts only runs once, no matter how many times you use a component.
• You cannot use any variables/imports defined inside the normal script tag inside context=module script tag. You can do it the other way round though.
• You cannot use svelte syntax including but not limited to dereferencing stores by prefixing $ to their name or creating reactive variables using let in context=module script tags.

Read the Why does context=module code only runs once but normal script tags runs per component usage? section

Why does context=module code only runs once but normal script tags runs per component usage?

Because the global scope (context=module in svelte files) is only run on the first import of a module, but the component function (the normal script tag and the html) is executed every time a component is used.

Read the Why can I not access non context=module script variables inside context=module script? section

Why can I not access non context=module script variables inside context=module script?

Look at the svelte example code above and then compare the scopes to the js example code above.

See how all the non context=module script variables are inside the inner scope aka inside the function thus variables defined inside a function cannot be used outside it.

The outside of the function in the .js file corresponding to the context=module script in the .svelte file.

Read the Why does svelte syntax only work in non context=module scripts? section

Why does svelte syntax only work in non context=module scripts?

You would have noticed that you cannot use any svelte specific syntax in context=module scripts like $: console.log($count), setInterval(() => $count++, 1000). Instead we have to write pure JS inside context=module scripts.

The reason for this is everything inside the normal script tag inside a svelte component runs through the svelte compiler to transform the svelte specific syntax into pure JS syntax. Look at the @SVELTE-COMPILE line in js example code above. This compilation doesn’t happen for the context=module script.

The next question you might have is why not run the outer scope (context=module script) through a compiler too and let you use the svelte specific syntax in context=module scripts? Some of the reasons are

• Svelte Syntax overrides some JS syntax, so if you do really want to use JS syntax then context=module not supporting svelte syntax is great. For e.g. if you want to define a variable that’s not reactive you can do that in context=module scripts using the let x = 1 syntax.
• In the outer scope you can export variables and functions that other files can import. And analyzing svelte syntax across multiple files is extremely hard.

Read the Conclusion section

Conclusion

The context=module script tag is an escape hatch so you can break out into the global scope of the current module as with normal script tags you are contained within a function scope and cannot do things you can do in a global scope like exporting variables and functions, running code once per component and sharing state across multiple usage of the same component.

Leave a comment down below if you have any questions!