Runes in Svelte5



Hello, my friends

Today, I would like to share my thinking and understanding of runes in incoming svelte5.

At first, I “hate” such design, because when I chose svelte3 as my SPA web framework, I liked its instinct design which let HTML/JS/CSS do their own work.

Let’s say, as long as you know basic HTML/JS/CSS, you can get what the code does in svelte3(alghouth not exactly at some tricky features):

  export let firstName = '';
  export let lastName = '';

  $: fullName = `${firstName} ${lastName}`;

But after introducing runes in svelte5, code will becomes:

  let { firstName, lastName } = $props();

  let fullName = $derived(`${firstName} ${lastName}`);

It’s also Javascript, but in another style. We have to figure out what $props() and $derived() exactly do before making sure it works.

It’s not about good or bad, but about styles or tastes, I think.

Even I (and other svelte3/4 people) don’t like the change, but others may like it very much, so after a long time of diving into the docs and videos about runes, I figure out how they works and why they are designed in such way.

It’s all about three things:

  1. states
  2. events
  3. functions

The three compose one thing: the reactivity.

Runes are reactive variables, so usually they are states we can listen to or add observers to them. Observables in RxJava or Signal in SolidJS are all such things.

Svelte5 introduces 4 runes(reactive variables):

  1. $props()
  2. $state()
  3. $derived()
  4. $effect()

$props() is easy to understand, it’s just used to declare properties of the component(.svelte).

$state() is similar to store in svelte3, but more general.

$derived() can reactive to any change of other $props() or $state(), in svelte3, we use reactive statement to get such things done.($: ...)

$effect() has part of functionalities of reactive statements:

 let { width, height } = $props(); // instead of `export let`

 const area = $derived(width * height);

 $effect(() => {

But it also take care of responsibility of onMount() lifecycle hook, furthermore, with $effect.pre, it also can intercept events between each frame update.

So that’s all, If we draw a comparision, it maybe look like as following:

Hope it helps. If you don’t know too much about svelte3 or would like to learn more about svelte3, Simple Svelte may be a good start ;)

>>>>>> 更多阅读 <<<<<<


跨越2190个日夜,始终坚持“实践 + 原创”打造的715125字专属知识库,囊括了(但不限于)从职场、技术、管理与商业等多个板块的内容。

  • 一个ChatGPT触达不到的地方
  • 一个带你超越AI/人工智能的地方
  • 一个与你一起成长的地方