feat: add Svelte 5 migration #12519
feat: add Svelte 5 migration #12519
Conversation
🦋 Changeset detectedLatest commit: b9e7c6f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Do I just need to link svelte-migrate globally and then run it inside a project? I’d try it on my Macbook just out of curiosity 😁 |
|
Yeah or you can do |
| colors | ||
| .bold() | ||
| .yellow( | ||
| '\nDetected Svelte 3. We recommend running the `svelte-4` migration first (`npx svelte-migrate svelte-4`).\n' |
There was a problem hiding this comment.
you sure they're not running svelte 1 or 2? 🤣
|
Some feedback from one file with issues:
let containerElement: HTMLElement;But when // Type 'HTMLElement | undefined' is not assignable to type 'HTMLElement'.
// Type 'undefined' is not assignable to type 'HTMLElement'.
let containerElement: HTMLElement = $state();I think this is fine, but is there anything more we should be doing?
const extraOpts = {
modifiers: [{ name: 'offset', options: { offset: [0, 3] } }]
};
export let offset: [number, number] = [0, 3];
// re-assign it the value of offset whenever offset changes
$: extraOpts.modifiers[0].options.offset = offset;
const extraOpts = $state({
modifiers: [{ name: 'offset', options: { offset: [0, 3] } }]
});
interface Props {
text: string;
offset?: [number, number];
children?: import('svelte').Snippet;
}
let { text, offset = [0, 3], children }: Props = $props();
// error
let extraOpts.modifiers[0].options.offset = $derived(offset);Should it just be like this? interface Props {
text: string;
offset?: [number, number];
children?: import('svelte').Snippet;
}
let { text, offset = [0, 3], children }: Props = $props();
const extraOpts = $derived(() => {
return {
modifiers: [{ name: 'offset', options: { offset } }]
};
}); |
|
I got a handful of errors like the below when testing against the |
…efully (so that file path is printed)
|
It fails to migrate https://www.reddit.com/r/sveltejs/comments/1778zq4/interface_props_mentioned_in_the_svelte_5_post/ |
|
The |
Can you give an example and post it over at the Svelte repo? This is likely something we need to fix within the
Same here: can you give the full code snippet? |
|
Also shared this on discord, but running this migration tool on a codebase at work (using obviously can't copy the stack trace, but the code snippet it tripped over was sth like this: but also: did not work despite being valid css |
|
regarding the recommended next steps displayed after the migration completes: this probably should also include installing the updated dependencies? |
|
Do we want to add a message along the lines of
until it's been more widely tested, or are we reasonably confident in it? |
|
The lint test is failing for projects created with svelte 5 but I think that can be fixed in another PR. EDIT: #12697 should fix them |
|
I cleaned up the error output before after |
Successfully tested on
kit.svelte.dev, but another manual test from a non-windows machine on a different project would be goodPlease don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.Edits