• 27 Oct 2021
• Comments (2)
• 5158 reads

Understand how Svelte’s auto-subscribe $ (dollar sign) syntax work

Svelte is a powerful compiler and to help you make your data in the DOM (Document object model) dynamic, they have added both the Store.Subscribe function and the $ (dollar sign) auto-subscribe function.

In this article, we will look at the $ (dollar sign) auto-subscribe function. We will learn about what it does, see examples of it in action and learn how to apply it ourselves.

What is the auto-subscribe $ (dollar sign) function?

The Svelte auto-subscribe function using the $ syntax tells the compiler to automatically write a subscribe function so that the value in the DOM will change together with the store value. This can be achieved in other ways, such as by writing the store.subscribe function and pass it to an onDestroy function, but the $ syntax is shorter.

So in short: The $ syntax is a shorter way for you to subscribe to the values in a store and make them change the DOM together with the store value.

Examples of how the auto-subscribe function can be applied

The best way to learn how to use the auto-subscribe function is to see it in action. In this section, we are starting out with an example using the store.subscribe function. Immediately after you will see the same example made with the auto-subscribe function instead.

This is an example of using the store.subscribe function:

<script>
   import { count } from './stores.js';
   import Incrementer from './Incrementer.svelte';
   import Decrementer from './Decrementer.svelte';
   import Resetter from './Resetter.svelte';

   let count_value;

   count.subscribe(value => {
      count_value = value;
   });
</script>

<h1>The count is {count_value}</h1>

<Incrementer/>
<Decrementer/>
<Resetter/>

This is an example of using the auto-subscribe function:

<script>
   import { count } from './stores.js';
   import Incrementer from './Incrementer.svelte';
   import Decrementer from './Decrementer.svelte';
   import Resetter from './Resetter.svelte';
</script>

<h1>The count is {$count}</h1>

<Incrementer/>
<Decrementer/>
<Resetter/>

As you can see, we took away the store.subscribe function and changed the value in the h1 to $count. When we added the dollar sign in front of the store value we made Svelte automatically subscribe to the value and thereby saved us lots of code and time.

What is the difference between Store.Subscribe and auto-subscription? 

The difference between the two functions is that you with the store.subscribe has the opportunity to make your subscription functions more complex. When you write the subscription functions you can add more functionality and customize them to fit your needs.

With the $ (dollar sign) syntax, you only get to use the standard subscription function. This function is therefore good to use if you don't need any custom functionality. 

What if I don't add the dollar sign?

You can write the store value directly in your project without adding the dollar sign in front of the value, but this will make the value static instead of dynamic. A static value won't change the DOM when the store value change. Therefore if you know the value won't change, you can remove the $ (dollar sign) in front of the value.

<script>
   import { count } from './stores.js';
</script>

<h1>The count is {count}</h1>

Should I use the $ (dollar sign) syntax on a readable?

If you already know that the store value won't change, you should instead of using a "writable" use a "readable". A readable value in your store file will allow you to read the value but not to change it.

If you are adding a readable value to your DOM, you don't need to use the $ (dollar sign) syntax in front of the value. The value won't change and therefore there is no need to update the DOM. 

You can read more about the readable value here: https://svelte.dev/docs#readable.

Author

Michael Andersen

Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.