On the 22th of June, Svelte has announced its new major release.

Even if it is presented as "mainly about setting the ground for these future improvements", it also bring its share of improvements along with the rework of some of their showcase websites.

If you're more a listener than a reader, this release has also been recorded on Svelte Radio Live

Performance Enhancements

📉 Drastic reduction of the Svelte package

For this release, Svelte sure has lost some weight!

The overall size of Svelte dropped from 10.6 MB to 2.8MB, almost a 75% size decrease.

As its dependencies dropped from 61 to 16, the additional packages needed to run Svelte also have been reduced, also reducing the number of dependencies of SvelteKit.

This reduction brings some nice side effects such as a faster REPL experience, a faster experience on the interactive website and a much faster execution of npm install (of whatever package manager you might be using).

As of this release, Svelte sure is now!

🚿 Improved Hydration

Along with this drop in the package size, Svelte also lighten the code it generates for hydration.

As an example, the code generated for the SvelteKit website has been reduced from 126.3 kB to 110.2 kB, almost 13%.

Improved Developer Experience

🎭 Transitions Scope

Transitions are now local by default.

This prevents them from being global by default and thus risking to interfere with others, resulting in a collision of your transitions during page load.

🧱 Web Components Authoring

Creating a Web Component in Svelte has been pretty easy:

<svelte:options tag="my-component" />

However it also has been limiting for more advanced cases such as controlling whether or not to reflect updated prop values back to the DOM, disabling the shadow DOM, etc.

Svelte 4 makes the authoring experience of Web Component way smoother by shifting its configuration into a dedicated customElement attribute of svelte:options.

This attribute takes a number of options that helps you configure your Web Component:

<svelte:options
  customElement={{
    tag: 'custom-element',
    shadow: 'none',
    props: {
      name: {
        <!-- 👇 Reflects the updated value back to the DOM -->
        reflect: true,
        <!-- 👇 Reflects the value as a number -->
        type: 'Number',
        <!-- 👇 Name of the attribute -->
        attribute: 'element-index'
      }
    }
  }}
/>

<script>
  export let elementIndex;
</script>

...

🛡️ Stricter Types

Stricter types are now enforced for createEventDispatcher, Action, ActionReturn and onMount:

createEventDispatcher now looks for the correctness of the provided parameters regarding their type and number and throws the associated errors:

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{
  optional: number | null;
  required: string;
  noArgument: never;
}>();

// Svelte version 3:
dispatch('optional');
dispatch('required'); // Detail argument still omitted
dispatch('noArgument', 'surprise'); // Detail argument still provided

// Svelte version 4 using TypeScript strict mode:
dispatch('optional');
dispatch('required'); // Error, missing argument
dispatch('noArgument', 'surprise'); // Error, cannot pass an argument

Action and ActionReturn now have a default parameter type of never if Action has no generic type provided:

const untyped: Action = (node, params) => {
  // Now an error as `params` is expected not to exist
}

const typed: Action<HTMLElement, string> = (node, params) => {
  // `params` is of type string
}

onMount now requires its return a synchronous function as an asynchronous one might lead to bugs if the callback is expected to be called on destroy, since this is the case only for synchronous functions:

// ❌ `cleanup()` is not called due to the function being async
onMount(async () => {
  const bar = await foo();
  return cleanup();
});

// ✅ `cleanup()` will be called
onMount(() => {
  foo().then(bar => /* ... */ );
  return cleanup();
});

Updated Websites

📝 Tutorial Website

The tutorial has been reworked for a better user experience:

Former	Newer

The design still is the same: a side panel with text and instructions with a code editor on the right to do the exercise.

However, some neat things were improved such as seeing the file structure on the side, reducing the number of elements in the navbar and a better navigation between sections. It also feature a dark mode!

The tutorial now lives on https://learn.svelte.dev while the former is reachable at https://svelte.dev/tutorial/basics

📚 Svelte Website

The Svelte Website also had a rework:

Former	Newer

The pages have been split, mobile navigation has been improved, the TypeScript documentation has been enhanced and a dark mode has also been released.

As of now, the SvelteKit website has not yet been updated but a rework to offer a similar experience is currently ongoing.

Migration Guide

This release is shown as a step towards Svelte 5 and not a very impactful one.

In order to upgrade from Svelte 3 to Svelte 4, the team has updated their migration tool and it should not take much more than running the following command:

npx svelte-migrate@latest svelte-4

Please note that the minimum version requirements have been updated and you will need:

NodeJS 16 or higher
SvelteKit 1.20.4 or higher
TypeScript 5 or higher

More details about the requirements are listed in the migration guide

What to Expect From Svelte 5

Almost no information about what is upcoming in Svelte 5 has been shared so far.

However, as Svelte is heavily tied to ESLint, so is its package size. With the current rewrite of ESLint, by the time Svelte 5 is released, its size might drop by over another 50%.

As Svelte is focused on developer experience and efficiency, the changes we will probably see a number of improvements in those areas, as stated in their blog post:

Svelte 5 will bring major new features and performance improvements to Svelte

I hope that you learn something useful there!

Pierre Bouillon

Software Engineer | Privacy Advocate | Coffee Lover

What's New in Svelte 4: Performance Boosts and Streamlined Development