Svelte 5 upgrade#8867
Draft
ericokuma wants to merge 5 commits into
Draft
Conversation
- Upgrade svelte from 4.2.19 to 5.51.3 - Upgrade @sveltejs/kit from 2.7.1 to 2.52.0 - Upgrade @tanstack/svelte-query from 5.x to 6.0.18 - Upgrade @tanstack/svelte-table to 9.0.0-alpha.10 - Upgrade bits-ui from 0.22.0 to 2.15.6 (Svelte 5 compatible) - Upgrade lucide-svelte from 0.298.0 to 0.574.0 - Upgrade svelte-radix from 1.1.0 to 3.0.2 - Upgrade svelte-vega from 2.3.0 to 4.1.0 - Upgrade vega-lite from 5.23.0 to 6.4.2 - Upgrade @xyflow/svelte from 0.1.39 to 1.5.0 - Upgrade Storybook packages from 7.x to 8.6.16 - Upgrade orval from 7.8.0 to 8.4.0 - Upgrade eslint-plugin-svelte from 2.37.0 to 3.15.0 - Remove svelte-preprocess (built into Svelte 5) Breaking changes addressed: - Update component instantiation from new Component() to mount() - Update component destruction from $destroy() to unmount() - Update TanStack Query createQuery calls to use function getters - Add getQueryClient helper for TanStack Query v6 compatibility - Regenerate orval client for TanStack Query v6 API Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
Svelte 5 does not support TypeScript enums directly in script tags. Convert enums to const objects for compatibility: - Day.svelte: OverlapType enum - DateInput.svelte: ErrorType enum - TimestampProfileSummary.svelte: NicerTimeGrain enum Also add mock for createQuery in conversation tests to handle TanStack Query v6's Svelte 5 runes requirement. Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
|
Cursor Agent can help with this pull request. Just |
Update web-local files to use TanStack Query v6 direct property access instead of Svelte store syntax ($) for query results. Changes: - Remove $ prefix from query result accesses (user, metadata, etc.) - Keep $ prefix for derived stores and true Svelte stores - Update derived() usages to use reactive statements instead Note: Some TypeScript type inference issues remain to be resolved. Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
Update more files to use direct property access for query results: - FileExplorer.svelte - LocalAvatarButton.svelte Migration in progress - additional files still need updates. Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
In Svelte 5 with TanStack Query v6, createQuery() returns a reactive object rather than a Svelte store. This commit removes the $ prefix from TanStack Query results (data, error, isLoading, isPending, isFetching, mutateAsync, etc.) in both web-common and web-admin Svelte components. This change affects 67 files across: - Alerts (forms, criteria, data tab, delivery tab, history, metadata) - Authentication (RepresentingUserBanner) - Bookmarks (Bookmarks, ExploreBookmarks) - Canvas (Builder, MenuItems, PreviewCTAs) - Chat (Messages, ConversationSidebar, SidebarHeader) - Connectors (RefreshButton, ConnectorEntry, TableEntry, TableSchema) - Dashboards (DimensionDisplay, Filters, ViewAsButton, Leaderboard, RowsViewer, etc.) - Entity management (AddAssetButton) - Explores (MenuItems, PreviewCTAs) - Metrics views (GoToDashboardButton, MenuItems, Placeholder) - Models (ModelMenuItems, PartitionsTable, TriggerPartition, CreateDashboardButton, etc.) - Navigation (TopNavigationBar) - Organizations user management (CreateUserGroupDialog, EditUserGroupDialog) - Projects (DeploymentSection, ErrorsSection, ProjectResources, ShareProjectDialog) - Reports (ScheduledReportDialog, BaseScheduledReportForm, ScheduleForm, etc.) - Sources (ErrorPane, AddDataModal, SourceMenuItems) - Workspaces (ModelWorkspace, VisualMetrics, WorkspaceBreadcrumbs) Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Upgrade to Svelte 5, SvelteKit, TanStack Query v6, TanStack Table v9, Storybook v8, and Orval v8.
This PR addresses initial breaking changes required for the Svelte 5 ecosystem, including:
new Component()tomount()).queryClientas a getter function,createQueryoptions as a function).Unit tests are now 99.8% passing.
Note: This PR does not include the full migration for TanStack Query v6's new reactivity model (changing
$query.datatoquery.data), which affects ~75 Svelte files and will be completed in a follow-up PR. E2E tests are blocked until this subsequent migration.Checklist:
Linear Issue: APP-755