next: migrate to svelte 5

[00casanova00]

This PR migrates Svelte UX to Svelte 5. Key changes include:

• Migrated all components to Svelte 5.
• Migrated the documentation website to Svelte 5.
• Updated all relevant code snippets in the documentation.

Note: This PR is a submission for the Svelte Hackathon. Any feedback received will be addressed following the announcement of the winners.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 02ca0dc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[techniq]

Wow @00casanova00, this is massive. Thanks!

I just enabled the CI/CD workflows to run on this PR and notice pnpm check is failing. Could you please fix those errors so the PR preview deployment can run and easily allow visual validation (to spot regressions, etc)?

Curious how far npx sv migrate svelte-5 got you vs manual migrations?

Lastly, my roadmap is:

• Merge Migrate to @layerstack/* packages #489 which extracts all the svelte stores, actions, theming, and utils to new @layerstack/* packages (to allow using on non Svelte UX or even non-Svelte projects) and allow switching from stores to runes easier
• Release a 1.0.0 release with the current Svelte 3-5 compatibility
• Start a new next branch which will migrate to Svelte 5 (runes, snippets, etc) and release as 2.x

With that said, we'll need to rebase this PR after we release 1.0.0 onto a new next branch.

Thanks again!

[00casanova00]

Hi @techniq , thanks for the feedback!

I just enabled the CI/CD workflows to run on this PR and notice pnpm check is failing. Could you please fix those errors so the PR preview deployment can run and easily allow visual validation (to spot regressions, etc)?

Done 😄

Curious how far npx sv migrate svelte-5 got you vs manual migrations?

Unfortunately it wasn't straightforward. I had to manually migrate, either because of $$props or slot names collisions or legacy "unmigratable" stuff like createEventDispatcher etc.

Lastly, my roadmap is: ...

Sounds like a great plan! I somehow missed your PR that migrates to layerstack. I would have done it in this PR if I knew about the migration. Sorry about that!

Thanks again Sean!

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
svelte-ux	✅ Ready (View Log)	Visit Preview	02ca0dc

[techniq]

I really appreciate this massive PR! It's going to take a while to fully review and regression test (sadly I only have some non-visual unit tests) but this is a massive start in the right direction 🫶

Done 😄

Thanks! The PR preview is now available so I can kick it around and try to find regressions. I've took a few minutes and clicked around and found the following so far:

• Opening quick search (command+k) and typing a few characters will trigger

• DateRangeField throw an props_invalid_value error. I've encountered this one on a different project but ultimately worked around it by setting a non-undefined default

actually I'm getting this on most of the pages now (not sure if it's because SvelteKit loaded a chunk, but AppLayout no longer loads after it did initially).

The next steps will be walking through each component doc/examples and locating errors or visual/behavior regressions.

Are you on discord? Chatting through these in a thread might be a good way to proceed, and track the findings in an issue (or in the description of this PR)

Also, I see the format linting (prettier) is failing. Could you run pnpm format to reformat the project and fix this CI failure?

Unfortunately it wasn't straightforward. I had to manually migrate, either because of $$props or slot names collisions or legacy "unmigratable" stuff like createEventDispatcher etc.

Ouch, that's rough (and one of the reasons I hadn't started the migration 🙃). I know slot names that used to be valid (ex. above-content) are not valid JS function snippet names and have to be renamed (ex. aboveContent) and fully expected to encounter these types of issues. It's amazing how much you were able to update.

Sounds like a great plan! I somehow missed your PR that migrates to layerstack. I would have done it in this PR if I knew about the migration. Sorry about that!

No worries at all, that's more on me. I've been sitting on that PR for a bit as I wanted to merge it just before the 1.0 release and hoped to improved the docs / migration guide (it's all just importing the applicable @layerstack/* package and updating the related import. I need to migrate this project to Svelte 5, and going to create a new @layerstack/svelte-state project and migrate all the @layerstack/svelte-stores stores to use runes.

My biggest priorities at the moment are:

• LayerChart
  • Finish the Canvas overhaul PR in LayerChart (should be done today)
  • Release 1.0
  • Start next branch and begin Svelte 5 migration. This will include some bigger changes as well (likely removing LayerCake to enable more control in some areas)
  • Publish a lot of -next releases as progress is made
  • Release 2.0
• Svelte UX
  • Merge Migrate to @layerstack/* packages #489
  • Release 1.0
  • Create next branch and review this PR
  • I've got a lot of improvement ideas after the Svelte 5 migration is complete (more agnostic icons, etc)
  • Publish a lot of -next releases as progress is made
  • Release 2.0
• LayerStack
  • Release 1.0
  • Start next branch and begin Svelte 5 migration (namely creating @layerstack/svelte-state)
  • Release 2.0

Probably a few steps missing in that roadmap, but a general idea. My primary focus at the moment is on LayerChart and will likely be for a bit, but I try to multitask as I can :).

Thanks again!

[techniq]

@00casanova00 Svelte UX is now using @layerstack/* packages and 1.0 has been released. I've also started the next branch / PR and moved the library to use Tailwind 4.

I needed to close this PR as it was causing a conflict with aviator tooling I use and had a lot of conflicts from the aforementioned changes.

Let me know if you are still interested in helping migrate the library to Svelte 5 runes/snippets and working through the regressions. No worries if not, just trying to coordinate future work.

Once I migrate LayerChart to Tailwind 4 I will begin on the Svelte 5 migration for all libraries (which will take some time).