Svelte 5 Released

Good work! I’m not really sold on the runes stuff though (tldr: https://svelte.dev/blog/runes)

The old way is a bit “magical” in a sense that it does some stuff under the hood to implement the intention behind your code, but it reads really straightforward:

  let counter = 0;
  // ...
  <div>{counter}</div>

`let` in a .svelte compoment makes a variable reactive. If your state is outside a component, you use stores.

With the `$store` rune, the way you make reactive stores inside and outside components is the same, but it only works in .svelte.js/ts. The unification is great – but why not just use `let` in .svelte.js, too?

  // counter.svelte.js
  export function createCounter() {
    let count = 0;
    return {
      get count() { return count },
      increment: () => count += 1
    };
  }

  // App.svelte
  <script>
    import { createCounter } from './counter.svelte.js';
    const counter = createCounter();
  </script>

  <button on:click={counter.increment}>
    clicks: {counter.count}
  </button>

I understand it can be really tricky – e.g. you might want to use let for things that are not modified in runtime and do not need reactivity, but it should be possible to determine in compile time. (Actually after writing this all up I think I know why Svelte went with runes instead, haha!)

But again – really good work and I hope to try it out on my next project!

My only problem with this is because now is more verbose, why I should use Svelte over Vue? Arguably a more stablish framework.

No shadow dom and a better template directives? Maybe, not sure.