Thoughts about Svelte 5?

[thiagomagro]

Wondering how difficult would it be to migrate to Svelte 5. Loving the idea here so far, keep improving!

[woutdp]

Should be straightforward, just waiting on a stable 5.0.0 release as it's still in beta :)

[directormac]

@woutdp what about now its on rc? i'm trying to explore the phoenix ecosystem with livesvelte.

[woutdp]

I'd rather wait a bit until it's officially released. It seems there's some breaking changes and not a straightforward upgrade and I want to avoid having to fix them twice if anything changes again in the stable version.

I will accept PR's that implement the RC though, if anyone is up for it. I'd be happy to merge and push a new version.

[chrisnaadhi]

i think it should be updated to v4 first if the dependencies was still v3.56, as in the blog said :

Components written for Svelte 4 will continue to work with Svelte 5, with a handful of exceptions. If you install Svelte 5 in an existing app, the only real change should be that things get faster. If you maintain a Svelte app, we recommend updating to Svelte 5 as soon as it's stable. (In the meantime, if you're currently on Svelte 3 then you should update to Svelte 4.)

[woutdp]

We're already on v4.

If you maintain a Svelte app, we recommend updating to Svelte 5 as soon as it's stable.

I'd like to follow Svelte's official recommendation, as soon as v5 is stable, I'll make the change. And like mentioned if there's interest in getting this out sooner, I'm accepting PR's!

[rsousacode]

I managed to have it running without SSR, which for me is fine and unlocks development until we've stable support. :D

Here's the steps I took:

Disable SSR, as in the README (https://github.com/woutdp/live_svelte/blob/master/README.md#requirements). I just commented out the Node SuperVisor line.

In build.js add the compatibility level to 4 as suggested in the docs.

plugins: [
    importGlobPlugin(),
    sveltePlugin({
        preprocess: sveltePreprocess(),
        compilerOptions: {dev: !deploy, hydratable: true, css: "injected", compatibility: {componentApi: 4}},
    }),
],

Tweak assets/package.json to use svelte 5 (you may need to run npm install --force)

For example my devDependencies look like this:

 "devDependencies": {
    "esbuild": "^0.16.17",
    "esbuild-plugin-import-glob": "^0.1.1",
    "esbuild-svelte": "^0.8.1",
    "svelte": "5.0.0-next.220",
    "svelte-preprocess": "^6.0.2"
  },

[woutdp]

I've been looking at this today since Svelte 5 was just released officially.

We'll need to wait until it's supported by esbuild-svelte too: https://github.com/EMH333/esbuild-svelte/issues/234

[ravides19]

Hi @woutdp eagerly waiting for default svelte5 support 💯

[kigila]

Waiting for new update

[zazer1]

Hi @woutdp , just got confirmation that esbuild-svelte supports Svelte 5. What needs to be done for live_svelte support, is there any issues or tickets that you could use a hand resolving/implementing?

[woutdp]

It says:

minus support for .svelte.(js|ts)

I think we do need support for .svelte.js files as the hooks file will make use of that. I might be wrong though, if you want to take a shot at it you can check out the svelte-5 branch where some of the progress was already made towards Svelte 5 support.