Conversation
carsonbot
added
Feature
|
Some reading here: https://svelte-5-preview.vercel.app/docs/breaking-changes (just passing by) |
| this.dispatch(name, { detail, prefix: 'svelte' }); | ||
| } | ||
| async mountSvelteComponent(Component, options) { | ||
| const { mount } = await import('svelte'); |
There was a problem hiding this comment.
This will not work with AssetMapper right ? In which cas we need to find a solution because this would be a giant BC break :)
There was a problem hiding this comment.
That was my first thought but it worked when I tried it in ux.symfony.com !
I also tried to have import { mount } from 'svelte' at the top of the file but it doesn't work with AssetMapper with Svelte 4, an error was thrown because mount only exists in v5
I can't explain why but with a dynamic import there is no error, mount is just undefined
There was a problem hiding this comment.
I'll test this next week, thanks for the explanations :)
|
Well that's pretty clear: https://svelte-omnisite.vercel.app/docs/svelte/v5-migration-guide |
|
I'm starting to investigate what's missing to make Svelte 5 happy here, just personal notes:
|
Small tips: you can get rid of the |
|
Ok I think I'm on something. I believe that's because the context between In one of the module, I believe this is related to no-build scenarios, like we do with AssetMapper/importmap. I will investigate more and try to find a solution. |
It is, and some people are trying weird stuff with chunks (i'm not sure to even understand what i'm saying here haha) |
|
To be honest, due to how files are bundled on JSDelivr and how Svelte 5 works, I don't know if we can have Svelte 5 support for AssetMapper... :/ |
|
I'd be ok if the support was only for webpack :| But no BC break for AssetMapper please :) But i don't get how this work as... in the end... there are only compiled assets in a directory right ? |
Not with AssetMapper / CDN stuff. When you compile this <script>
export let name = "Svelte";
</script>
<div>Hello {name}</div>It becomes: import * as $ from "svelte/internal/client";
var root = $.template(`<div> </div>`);
export default function _unknown_($$anchor, $$props) {
let name = $.prop($$props, "name", 8, "Svelte");
var div = root();
var text = $.child(div);
$.reset(div);
$.template_effect(() => $.set_text(text, `Hello ${name() ?? ""}`));
$.append($$anchor, div);
}Here, we have a dependency to In the The thing is, that both dependencies One dependency defines IMO, the best we can do is to:
I'm more in favor of a new dedicated |
|
The potential issue I see with creating a new |
|
There is not much code in the package, i'm sure we can make something in it to load or or the other file :) |
Yeah, but for the moment Svelte 5 only works with Webpack, not with AssetMapper. Even if we can do something "to load or not the other file", it still won't work :s or am I missing something? |
That's what i reacted on when i said "i'd be ok to no have AssetMapper support" We can announce a compatibility for only Webpack no ? |
|
Yes we can |
|
Up for review :) For those who struggle whith the same problem:
And it worked ! |
📊 Packages dist files size differenceThanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
|
||||||||||||
…hen controller is disconnected
ChqThomas
force-pushed
the
svelte-5-support
branch
from
827eb8a to
bbfda3a
Compare
| "importmap": { | ||
| "@hotwired/stimulus": "^3.0.0", | ||
| "svelte/internal": "^3.0", | ||
| "svelte": "^3.0 || ^4.0 || ^5.0", |
There was a problem hiding this comment.
@Kocal How to make it work if we need different packages/versions between peerDependencies and symfony.importmap ?
There was a problem hiding this comment.
That's a good point, here we maybe broke Svelte 3 support by depending on svelte instead of svelte/internal.
Unfortunately, we can't say "if the user wants to install Svelte 3, then import svelte/internal, otherwise import svelte" 🤔
Maybe we will remove support of Svelte 3, but it requires UX 3 to be released.
|
Would someone be so kind to share a reproducible to setup Symfony with Svelte 5? Thanks in advance! Some errors I had along the way while trying to set it up:
Edit: Shortened for relevancy. |
@telelek You can ask for help in the discussions tab Here is a reproducer that should work without modifying config files generated by Symfony recipes: symfony new . --webapp
# Switch from asset-mapper to webpack-encore and install ux-svelte
composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle
composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle symfony/ux-svelte
# Copy the code from the svelte 5 fork
wget https://github.com/ChqThomas/ux/archive/refs/heads/svelte-5-support.zip
rm -r vendor/symfony/ux-svelte/
unzip svelte-5-support.zip "ux-svelte-5-support/src/Svelte/*" -d vendor/symfony/ux-svelte
mv vendor/symfony/ux-svelte/ux-svelte-5-support/src/Svelte/* vendor/symfony/ux-svelte/
rm -r vendor/symfony/ux-svelte/ux-svelte-5-support
# Install svelte 5 and svelte-loader
npm install svelte@^5.0.0 svelte-loader --save-dev
# Create a controller and a template
php bin/console make:controller HelloControllerCreate a Svelte 5 component in file <script>
let { name } = $props();
let count = $state(0);
</script>
<div>Hello {name}</div>
<button onclick={() => count += 1}>Count : {count}</button>Add this line to <div {{ svelte_component('Counter', { 'name': 'Svelte 5 !' }) }}></div>Build the assets : npm run buildGo to the URL |
|
Thanks @ChqThomas, I setup a full example based on your explaination #2643 |
|
It's been a couple months, can we fix the conflicts? |
|
FYI this is something planned for UX 3.x |
|
I'm closing this PR in favor of #3177, some help would be really appreciated. 🙏🏻 Thanks for your contribution! |
7 participants
Svelte 5 was just released 🚀