Getting started with Svelte - Re

Assignments

At the heart of Svelte is a powerful system of reactivity for keeping the DOM in sync with your application state — for example, in response to an event.

To demonstrate it, we first need to wire up an event handler. Inside the increment function, all we need to do is change the value of count:

<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>
    Clicked {count}
    {count === 1 ? 'time' : 'times'}
</button>

Declarations

Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from other parts (such as a fullname derived from a firstname and a lastname), and recomputed whenever they change.

For these, we have reactive declarations. $: doubled = count * 2;

<script>
    let count = 0;
    $: doubled = count * 2;

    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>
    Clicked {count}
    {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

If a reactive statement consists entirely of an assignment to an undeclared variable, Svelte will inject a let declaration on your behalf.

Note that reactive declarations and statements will run after other script code and before component markup is rendered.

Statement

We're not limited to declaring reactive values — we can also run arbitrary statements reactively. For example, we can log the value of count whenever it changes:

let count = 0;

$: console.log(`the count is ${count}`);

You can easily group statements together with a block:

$: {
    console.log(`the count is ${count}`);
    console.log(`this will also be logged whenever count changes`);
}

You can even put the $: in front of things like if blocks:

$: if (count >= 10) {
    alert('count is dangerously high!');
    count = 0;
}

<script>
    let count = 0;

    $: if (count >= 10) {
        alert('count is dangerously high!');
        count = 0;
    }

    function handleClick() {
        count += 1;
    }
</script>

<button on:click={handleClick}>
    Clicked {count}
    {count === 1 ? 'time' : 'times'}
</button>

Updating arrays and objects

Because Svelte's reactivity is triggered by assignments, using array methods like push and splice won't automatically cause updates.

One way to fix that is to add an assignment that would otherwise be redundant.

function addNumber() {
    numbers.push(numbers.length + 1);
    numbers = numbers;
}

Array.prototype.push()

But there's a more idiomatic solution:

function addNumber() {
    numbers = [...numbers, numbers.length + 1];
}

or

function addNumber() {
    numbers[numbers.length] = numbers.length + 1;
}

You can use similar patterns to replace pop, shift, unshift and splice.

Array.prototype.pop()

The pop() method of Array instances removes the last element from an array and returns that element. This method changes the length of the array.

let numbers = [1, 2, 3, 4];

numbers = [...numbers.slice(0, numbers.length - 1)];
// [1, 2, 3]

Array.prototype.shift()

The shift() method of Array instances removes the first element from an array and returns that removed element. This method changes the length of the array.

let numbers = [1, 2, 3, 4];

numbers = [...numbers.slice(1, numbers.length)];
// [2, 3, 4]

Array.prototype.unshift()

The unshift() method of Array instances adds the specified elements to the beginning of an array and returns the new length of the array.

let numbers = [1, 2, 3, 4];

numbers = [0, ...numbers];
// [0, 1, 2, 3, 4]