Skip to content

Upgrade to Svelte 5, bits-ui 2.x, and tanstack-table-8-svelte-5#9045

Draft
ericpgreen2 wants to merge 4 commits intomainfrom
ericgreen/svelte-5-upgrade
Draft

Upgrade to Svelte 5, bits-ui 2.x, and tanstack-table-8-svelte-5#9045
ericpgreen2 wants to merge 4 commits intomainfrom
ericgreen/svelte-5-upgrade

Conversation

@ericpgreen2
Copy link
Contributor

@ericpgreen2 ericpgreen2 commented Mar 13, 2026

  • Bump Svelte from v4 to v5 with @sveltejs/vite-plugin-svelte v4
  • Replace @tanstack/svelte-table with tanstack-table-8-svelte-5 (Svelte 5-compatible fork using flexRender/renderComponent)
  • Upgrade bits-ui from 0.22 to 2.x: rewrite wrapper components (asChildchild snippet bridge, Selected type removal, on:eventonclick, transitions removed)
  • Replace cmdk-sv with bits-ui's built-in Command component
  • Fix Svelte 5 runtime errors: component_api_invalid_new (new Component()mount()/unmount()), $set()$state reactive props, TypeScript enums → const objects, self-closing HTML tags, display:contents trigger wrappers → <div> for floating UI positioning

TODO:

  • Get all e2e tests passing
  • Clean up build logs

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Developed in collaboration with Claude Code

- svelte ^4.2.19 → ^5.0.0 (all workspaces)
- @sveltejs/vite-plugin-svelte override ^3.1.2 → ^4.0.0
- @tanstack/svelte-table → tanstack-table-8-svelte-5 (Svelte 5 compat)
- bits-ui ^0.22.0 → ^2.14.4 (Svelte 5 required)
- Remove cmdk-sv (replaced by bits-ui Command in next commit)
Step 2+3 of Svelte 5 upgrade:
- Rewrite all bits-ui wrapper components for v2 API changes
- Create Svelte 5 Trigger bridge wrappers (asChild → child snippet)
- Migrate Select API: selected → value, onSelectedChange → onValueChange
- Replace cmdk-sv with bits-ui Command components
- Migrate on:event → onevent callback props on runes-mode wrappers
- Remove deprecated props: transition, portal, fitViewport, typeahead,
  closeOnItemClick, CustomEventHandler, disableFocusFirstItem
- Move onOutsideClick from Dialog.Root to onInteractOutside on Content
- Replace RadioIndicator/CheckboxIndicator/ItemIndicator with CSS
- Change Label → GroupHeading in select/dropdown/context menus
- Convert TypeScript enums to const objects in .svelte files
- Fix HTML validity: div inside tr → td, remove empty CSS declarations
- Add missing peer deps: @internationalized/date, @tiptap/suggestion,
  vega-embed
- Add npm overrides for svelte and @sveltejs/vite-plugin-svelte to
  resolve peer dep conflicts with storybook
…onent

- Replace `new Component()` / `$set()` / `$destroy()` with `mount()` / `unmount()` / `$state` in
  create-placeholder and editor-plugins (renamed to .svelte.ts for rune support)
- Use `renderComponent` instead of `flexRender` for custom cell components in PartitionsTable
- Update imports in ChatInput, UserMessage, and MetricsEditor for renamed files
Replace `<span style="display:contents">` with `<div>` in dropdown menu,
popover, tooltip, and context menu trigger wrappers. Elements with
`display:contents` have no bounding rect, causing floating UI to position
dropdowns at (0,0) instead of next to the trigger.
@ericpgreen2 ericpgreen2 self-assigned this Mar 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant