Introducing Svelte 5 - What's New

Svelte is poised to introduce its next major iteration, Svelte 5. This upcoming version promises to usher in a new era for the framework, making applications faster, smaller, and more robust. While the official release date is not set, and the features may still change, a preview gives us insights into what to expect, particularly the introduction of 'runes'.

What do you know so far?

Take this quick quiz about what's coming in Svelte 5.

What is a 'Rune' in Svelte 5?

Runes are a transformative addition to Svelte, representing a set of function-like symbols that instruct the Svelte compiler on how to handle reactivity in components and now, for the first time, in JavaScript and TypeScript modules as well. These runes will offer developers a more straightforward and explicit way to manage reactive variables within their code.

Svelte 5 introduces a shift in the reactivity model. The 'state' rune marks values as reactive, which is a departure from the implicit reactivity of top-level 'let' declarations. This change aims to make the reactivity model more explicit and predictable.

Reactivity Model

One of the most significant changes in Svelte 5 is the shift in the reactivity model. The 'state' rune marks values as reactive, a departure from the implicit reactivity of top-level 'let' declarations. This change aims to make the reactivity model more explicit and predictable.

<script>
  import { state } from 'svelte';
  let count = state(0); // `state` rune makes `count` reactive
  function increment() {
    count.set(c => c + 1); // use `set` to update the state
  }
</script>

<button on:click={increment}>
  Clicks: {$count}
</button>

Derived Values

Svelte 5 addresses derived values with a 'derived' rune, which ensures that derived values are recalculated lazily and kept in sync. This lazy calculation is a step towards making the framework more type-safe and maintaining consistent behaviour across component logic.

<script>
  import { state, derived } from 'svelte';

  let firstName = state('John');
  let lastName = state('Doe');

  let fullName = derived(

firstName, lastName

, (

$firstName, $lastName

) => ${$firstName} ${$lastName}); </script>

<p>Full Name: {$fullName}</p>

## Handling Side Effects
The 'effect' rune in Svelte 5 offers a structured alternative to handle side effects in response to reactive changes. It is designed to be conservative in its execution, potentially replacing lifecycle methods like `onMount`, which are now deprecated.

```html
<script>
  import { state, effect } from 'svelte';

  let count = state(0);

  // `effect` rune to handle side effects
  effect(() => {
    if ($count > 5) {
      console.log('Count is greater than 5');
    }
  });
</script>

Encapsulation and Logic Reuse

Encapsulating logic into reusable functions is more manageable in Svelte 5 with the use of runes like 'state', 'derived', and 'effect'. These runes allow logic to be encapsulated without losing reactivity, providing developers greater flexibility.

<script>
  import { state, effect } from 'svelte';

  function useCounter() {
    let count = state(0);

    function increment() {
      count.set(c => c + 1);
    }

    effect(() => {
      console.log(`The count is: ${$count}`);
    });

    return { count, increment };
  }

  const { count, increment } = useCounter();
</script>

<button on:click={increment}>
  Count: {$count}
</button>

Refactoring and Encapsulation

The introduction of runes in Svelte 5 has implications for refactoring and encapsulating component logic. The new explicit, predictable, and refactorable design facilitates better encapsulation, improving the developer experience and making it easier to manage reactivity.

<script>
  import { state, effect } from 'svelte';

  function useCounter() {
    let count = state(0);

    function increment() {
      count.set(c => c + 1);
    }

    effect(() => {
      console.log(`The count is: ${$count}`);
    });

    return { count, increment };
  }

  const { count, increment } = useCounter();
</script>

<button on:click={increment}>
  Count: {$count}
</button>

Signals and Reactivity

Svelte 5 uses a mechanism called 'signals' to handle reactivity with the 'state' rune. This change means assignments turn into set calls, and the DOM is updated through render effects, signalling a move away from the older reactivity model.

<script>
  import { state } from 'svelte';

  // Signals are created using the `state` rune
  let signal = state('initial value');

  // Update the signal
  signal.set('new value');
</script>

Server-Side Rendering (SSR)

The 'effect' rune has implications for SSR in Svelte 5. While it appears that effects, primarily client-side concepts, are excluded from SSR, this aspect is not entirely clear and may need further verification once Svelte 5 is officially released.

Type Safety and Developer Experience

The 'props' rune in Svelte 5 is expected to improve type safety and the developer experience by integrating with TypeScript for static type checking. However, the specifics of this integration await confirmation upon the official release.

<script lang="ts">
  import { props } from 'svelte';

  interface MyProps {
    name: string;
    age: number;
  }

  let { name, age } = props<MyProps>();
</script>

<p>Name: {$name}, Age: {$age}</p>

Nested Effects and State Management

Nesting 'effect' runes within a component allows for hierarchical management of side effects, aligning with Svelte's principles of reactivity and maintainability.

Conclusion

Svelte 5 is shaping into an exciting update with runes at the centre stage, enhancing the framework's reactivity and maintainability. While we await the official release, the preview suggests these new features will significantly impact how developers build and manage Svelte applications. Stay tuned for the official release to leverage the power of Svelte 5 fully.