Svelte 5

[woutdp]

Closes:

• Svelte 5 support #124
• Slot Support #52

[christophertrudel]

While working off this branch I noticed when installing in a brand new Phoenix project the build mustn't run? When trying to import live_svelte, it can't find the module because the build artifacts don't exist ./priv/static/live_svelte.esm.js

[woutdp]

When using the version number (currently 0.15.0-rc4) it should work properly since I build the files and publish them as a package to hex. So I think this only applies when you're using the github branch. Not sure if this is really an issue. Also I think this might have been an issue in the previous version too, not specific to the Svelte 5 release I think.

[christophertrudel]

Ahhh, makes sense. Thanks for the clarification.

[christophertrudel]

I remember now why I was using this branch, I used my own fork to rebase master branch because this PRs branch doesn't include this commit 97ed136 from master. Which seems to resolve another issue where mix live_svelte.setup seems to have issues finishing correctly. It looks as if I am missing package.json.
Should you rebase and release a new RC?

[christophertrudel]

Just noticed this comment in this open issue. So I think to use the RC on a new project we will need the rebase with the fix.

[woutdp]

Makes sense!
Just released 0.15.0-rc.5

[woutdp]

Small update on this one, so the reason this is not merged yet is that I have a project where it's not working 100%. There's an issue when using components that use child Svelte components in that project. This does not occur in other projects. I haven't had the chance to look at it more deeply, as soon as that's fixed and I don't hear any issues in the community, this will be merged and released

[christophertrudel]

Thanks for the BUMP @woutdp
As for the merge of the PR, makes sense to let it bake and weed out any issues.
Great work on the project by the way.

[christophertrudel]

Worked like a charm.

[christophertrudel]

So for parity tests I copied the example_project into the new phoenix app. I ran into a Svelte 5 compatibility issue. Also pointed out in this issue

Sure enough, adding compatibility.componentApi fixes this.

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

I would have thought that this would not have happened because when I look at the changes on this branch it looks as if you have taken care of this here with the new hydrateOrMount.

I then experienced another issue

Something seemed off, and when I clicked into the offending code in the browser I could see that I was looking at old code.

Turns out 0.15.0-rc.5 seems to not have built the artifacts correctly.

I looked back at 0.15.0-rc.4 and it was fine.

I think we need to cut another release to resolve the issue with the artifacts.

[woutdp]

@christophertrudel thank you, just released 0.15.0-rc.6. I think the artifacts are correct now, can you test again?

[christophertrudel]

@christophertrudel thank you, just released 0.15.0-rc.6. I think the artifacts are correct now, can you test again?

Confirmed. Thanks for the quick turn around.

[christophertrudel]

Should be let textInput = $state("Content")

[christophertrudel]

Needs to be <TextInput bind:value={textInput} name="element" id="123456" />

[cvkmohan]

So, at this moment, to work with svelte 5, - for a new project, we add

{:live_svelte, "~> 0.15.0-rc.6"}

to the mix file - and - things should work?

[christophertrudel]

@cvkmohan that is correct.
Add {:live_svelte, "~> 0.15.0-rc.6"}

And follow instructions here https://github.com/woutdp/live_svelte/tree/svelte-5?tab=readme-ov-file#installation
Everything from the Example Project looks like it is working with the exception of the LiveJson example by the looks of it.
It loads in the first page load but removing an element seems to have issues.