feat: update [email protected].* + @sveltejs/[email protected]

[ndom91]

Changes

• Update svelte and @sveltejs/kit to their latest versions

• Refactor out the usage of SLOTS = $$props.$$slots

• Components are no longer classes under the hood, therefore refactored out the few new Component instantiations to use the mount import from svelte instead

• CommitMessageInput was throwing an error regarding it's use of the ResizeObserver ("loop completed with undelivered messages"), with a bit of simplification it doesn't seem like the useResize action was necessary in the textareas/textinputs. The preexisting event handlers adjusting the input's height oninput or onchange were enough, so I removed the use:useResize action on those components.

• Upgraded the @sentry/sveltekit package

• <-- svelte-ignore .. options now are snake_case instead of kebab-case

• Example Convert <Modal /> component to svelte 5

  • $props() instead of export let ..
  • i.e. onclose prop / function instead of createEventDispatcher and dispatch('close' ...)
  • #snippets instead of <slots />
  • Refactor out <form /> in Modal body and therefore also rm the implicit relationship with type="submit" buttons in favor of explicit onclick handlers on those submit btns

• svelte-check / eslint now complains about the following, so I cleaned these up:

  • $page is an invalid variable - seems to be something that's just not supported in eslint-plugin-svelte yet so I disable-next-line-ed it for now
  • Removed unused / left over classes
  • Removed unused / left over props
  • Couldn't find types for tinykeys, so I added a dummy module declaration to the root app.d.ts
  • Refactored self-closing html tags for non-void elements (i.e. <div /> -> <div></div>)
  • It didn't like the Action enum in PullRequestButton.svelte, so updated that to an as const object

Todos

• Double check the #snippet usage when passing arguments to the nameless default snippet, i.e. children. Do you pick up those arguments like in v4? (<Modal ... let:items />)?

Notes

• Great site comparing Svelte 4 vs. Svelte 5 mini-examples: https://component-party.dev/compare/svelte4-vs-svelte5
• Svelte 5 docs; Old vs. New general overview: https://svelte-5-preview.vercel.app/docs/old-vs-new
• Svelte 5 docs: https://svelte-5-preview.vercel.app/docs
• Svelte 5 preview playground: https://svelte-5-preview.vercel.app
• Nice version of the changelog: https://svelte-changelog.vercel.app