My first Svelte5 reactive component
Tags: svelte, svelte5, javascript, webdev
Published: 2023-11-12 14:06:07


Welcome to the exciting era of **Svelte 5**!
After an intensive development period, Svelte 5 has emerged in its Release Candidate (next) version, marking a significant milestone for the Svelte community.
Developers now have the opportunity to explore the cutting-edge features and enhancements introduced in this latest iteration with the Release Candidate.

It's important to note that while Svelte 5 is available for experimentation, it is not recommended for production use at this stage. Several aspects, such as the installer, are still being refined and finalized. As of today, with the release of the "next" version, the installer is not yet available, emphasizing the ongoing nature of development.

We'll explore how you can start exploring the powerful new features, including the revamped and potent reactivity mechanism, installing Svelte 5 on your local development environment.

## Install the Svelte 5 skeleton project

Because today the Svelte 5 is not yet completed, we are going to install the skeleton project with the current version of Svelte the 4 (`latest`), and then once the project is created, we will force the upgrade of Svelte 5 (`next`)

``` bash
bun create svelte@latest  myapp-svelte5
cd myapp-svelte5
bun install
```

> If you prefer using npm instead of bun, you can use the `npm create` and the `npm install` commands.

During the execution of `bun create svelte@latest`, the command will ask you some questions. For now, you can answer in this way:

```
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  Try the Svelte 5 preview (unstable!)
```

After you jump into the new directory project and install all the packages, if you are using Svelte 4, you need to force the reinstallation of svelte, the `next` version. Today `next` refers to the Svelte 5 preview version. If you selected `Try the Svelte 5 preview (unstable!)` during the project creation, you don't need these steps:

```shell
bun add svelte@next 
```

If you prefer to use npm:

```shell
npm i svelte@next 
```

If you run the command `bun pm ls` (or `npm list` if you prefer npm), you can see the version of the svelte package (at the moment, it is `svelte@5.0.0-next.115`):

```
bun pm ls
/Users/roberto/test/myapp-svelte5 node_modules (209)
├── @sveltejs/adapter-auto@3.2.0
├── @sveltejs/kit@2.5.7
├── @sveltejs/vite-plugin-svelte@3.1.0
├── svelte@5.0.0-next.115
├── svelte-check@3.7.0
├── typescript@5.4.5
└── vite@5.2.10
```

Now, if you run `bun run dev`, you can start using your new fresh Svelte 5 application, typically exposed by default at http://localhost:5173/ .

Now, we are going to create a new component with some reactivity.

## Roll the dice web application

I want to create a simple “Roll the Dice” web application.

The user can click a button to generate a random number (from 1 to 6) and update the text showing the result and the list of the previous rolls.
This example is elementary but helpful in walking through the basic stuff of Svelte 5, understanding the main differences with Svelte4, and looking at the new Svelte5 reactivity mechanism via runes.

So now let’s jump on the code 🚀.

## Creating the component

I will create the `roller.svelte` component in the file `src/lib/components/roller.svelte`.
The component will contain two classical parts: the first one about the logic (the `script` section), and then the second one about the template (the `HTML` part).

The `script` section:

```javascript
<script>
    /** @type {number} */
    let dice = $state(0);
    /** @type {Array.<number>} */
    let rolls = $state([]);

    function draw() {
        dice = Math.floor(Math.random() * Math.floor(5)) + 1;
        rolls[rolls.length] = dice;
    }
    function reset() {
        dice = 0;
        rolls = [];
    }
</script>
```

I defined two reactive variables via the `$state()` function.
Then, I implemented two functions, `draw()` and `reset()`, that act directly on the new variables `dice` and `rolls`.

In the template part of the svelte component, you can use the variables and call the functions:

```html
<section style="padding-top: 50px;">
    <button onclick={draw}> Let's draw </button>
    <button onclick={reset}> Let's restart </button>
</section>
<section>
    <h2 style="text-align: center">
        {dice == 0 ? "Let's start rolling" : dice}
    </h2>

    {#each rolls as t, index}
        <p style="text-align: center">
            Rolling number {index + 1}, the dice says {t}
        </p>
    {/each}
</section>
```
The first button calls the `draw()` function on the click event.
The second button calls the `reset()` function on the click event.
In the template, I can use the 2 "state" variables, `dice` and `rolls` in the typical Svelte way (with `#each` directive for looping the rolls array).

## Highlight on variable declaration

As you can see above, the only thing that I needed to do was to declare the variables I wanted to be reactive with the `$state()` function:
```javascript
/** @type {number} */
let dice = $state(0);
/** @type {Array.<number>} */
let rolls = $state([]);
```

## Using the new component

In the `src/routes/+page.svelte` file, I can use the new Svelte component:

```svelte
<script>
    import Roller from "$lib/components/roller.svelte";
</script>

<main class="container">
    <Roller />
</main>
```

## Providing the style

For this quick example, I used the PicoCSS library, so in the `src/app.html`, you need to include it in your `head` section:

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
```


![The Svelte5 component using the reactivity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g28vrr4pww49wkdi8is4.png)

## Are you playing with the new Svelte 5?

I wrote this small article riding the excitement for the new announcement by Rich Harris on November 11th about Svelte 5 BETA:

{% embed https://www.youtube.com/watch?v=pTgIx-ucMsY&t=13741s %}

And the announcement of Svelte 5 RC:

{% embed https://twitter.com/SvelteSociety/status/1784244518310551697 %}


Please feel free to share your thoughts in the comments section below if you have any feedback. I appreciate your input and value the community's insights. I am committed to keeping this article up-to-date with the latest developments in Svelte 5, so your contributions will be significant in ensuring it's accurate and relevant. Thank you for being part of this journey, and I look forward to exploring the exciting advancements that Svelte 5 has to offer together. Stay tuned for future updates!