Support Svelte 5

[curran]

Currently VizHub support Svelte 4.

It should support Svelte 5 which is way better, and is now stable.

This would be a good place to start:

https://github.com/vizhub-core/vizhub/blob/main/runtime/src/v3Runtime/transformSvelte.ts

[curran]

https://www.reddit.com/r/sveltejs/comments/1g7d3a7/svelte_5_officially_released/

[curran]

Worth tracking if the Svelte REPL gets Svelte 5 support

https://svelte.dev/repl/hello-world?version=4.2.19

Looks like not yet. When they do work on that, we can probably do the same in VizHub.

[higsch]

There's a Svelte 5 REPL here: https://svelte-5-preview.vercel.app
Code seems to be here: https://github.com/sveltejs/svelte/tree/main/sites/svelte-5-preview

[curran]

Oh amazing! That's extremely helpful. Thank you for sharing that!

[curran]

I think I found it!

• https://github.com/sveltejs/svelte/blob/de609ec34cc0e6c5136cc056295fc175172d6a02/sites/svelte-5-preview/src/lib/Repl.svelte#L234 - the thing that responds to changes in REPL files
• https://github.com/sveltejs/svelte/blob/de609ec34cc0e6c5136cc056295fc175172d6a02/sites/svelte-5-preview/src/lib/Bundler.js - the thing that invokes the Web Worker
• https://github.com/sveltejs/svelte/blob/de609ec34cc0e6c5136cc056295fc175172d6a02/sites/svelte-5-preview/src/lib/workers/bundler/index.js - The Web Worker that does the bundling

It's really nice that this is already done as a self-contained Web Worker. There's a real possibility we could just copy in that entire Web Worker implementation into the VizHub codebase and use it as-is, replacing the old Svelte implementation.

[higsch]

Do you have time to implement it in the next days? I'm not feeling very confident to change the VizHub code. 😬 And it would be great to use Svelte 5 for courses right away.

[curran]

No, I don't think I'll be able to do this in the next few days. There is a slight chance, but I have a lot going on at the moment.

If anyone else wants to take a stab at it, that possibility is open! I can support a developer to get the env up and running via the VizHub Discord. If anyone picks this up, feel free to ping me in Discord. Cheers!

[higsch]

I tried changing the svelteUrl in runtime/src/v3Runtime/transformSvelte.ts to https://cdn.jsdelivr.net/npm/[email protected].
I also changed the svelteCompilerUrl to export const svelteCompilerUrl = ${svelteURL}/compiler/index.js``.

However, the current implementation needs access to svelte/internal (https://cdn.jsdelivr.net/npm/[email protected]/src/internal/) which is forbidden in Svelte version 5+. See lines 63ff in transformSvelte.ts.

So we have to find a solution without using svelte/internal.