Migrate from Svelte 4 to Svelte 5

[grmbyrn]

With the release of Svelte 5, it's a good time to migrate from Svelte 4. The benefits of Svelte 5 include:

• Enhanced compiler optimisations which lead to smaller bundles and faster load times.
• The introduction of "runes" allows for more intuitive reactivity, reducing boilerplate code and simplifying state management​.
• Native TypeScript support means direct TypeScript annotations in Svelte files improve development efficiency and maintainability without additional preprocessing.

[da2ce7]

Hello @grmbyrn What of these enhancements of Svelte 5 provides benefits for our project?

[grmbyrn]

Hello @grmbyrn What of these enhancements of Svelte 5 provides benefits for our project?

Hi @da2ce7 I'm still digging into the changes but the big enhancements for us that I see so far are:

• Quicker load times for blog pages as Svelte 5's fine-grained reactivity ensures only necessary components are re-rendered. In Svelte 4, when state change occurred, the entire component would re-render.
• Changing from the reactivity marker $ to runes will improve state management as reactive variables can now be defined directly. This will make the flow of data through our project easier to manage and to understand.
• Also, Svelte 4 syntax will be phased out over time, so it would be proactive to make changes now before it eventually starts breaking in places. This is also Svelte's first major update since Svelte 3 in 2019 so it's reasonable to suggest that these changes haven't been made lightly and will be around for the long-term.

[grmbyrn]

@histoire/[email protected] has a strict peer dependency on svelte@^3.0.0 || ^4.0.0, and cannot resolve [email protected]. This is the main reason for the ERESOLVE conflict:

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @histoire/[email protected]
npm error Found: [email protected]
npm error node_modules/svelte
npm error   peer svelte@">4.0.0" from @iconify/[email protected]
npm error   node_modules/@iconify/svelte
npm error     dev @iconify/svelte@"^4.0.2" from the root project
npm error   peer svelte@"^4.0.0 || ^5.0.0-next.0" from @sveltejs/[email protected]
npm error   node_modules/@sveltejs/kit
npm error     peer @sveltejs/kit@"^2.0.0" from @sveltejs/[email protected]
npm error     node_modules/@sveltejs/adapter-static
npm error       dev @sveltejs/adapter-static@"^3.0.1" from the root project
npm error     dev @sveltejs/kit@"^2.5.27" from the root project
npm error   6 more (eslint-plugin-svelte, prettier-plugin-svelte, ...)
npm error
npm error Could not resolve dependency:
npm error peer svelte@"^3.0.0 || ^4.0.0" from @histoire/[email protected]
npm error node_modules/@histoire/plugin-svelte
npm error   dev @histoire/plugin-svelte@"^0.17.17" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/svelte
npm error   peer svelte@"^3.0.0 || ^4.0.0" from @histoire/[email protected]
npm error   node_modules/@histoire/plugin-svelte
npm error     dev @histoire/plugin-svelte@"^0.17.17" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/macbookair/.npm/_logs/2024-10-30T18_33_29_085Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/macbookair/.npm/_logs/2024-10-30T18_33_29_085Z-debug-0.log