Svelte 5 upgrade

package.json

@@ -29,11 +29,11 @@
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-playwright": "^1.6.0",
-    "eslint-plugin-svelte": "^2.37.0",
+    "eslint-plugin-svelte": "^3.15.0",
     "husky": "^8.0.0",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-svelte": "^3.4.1",
     "syncpack": "^13.0.0",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.30.1"
@@ -44,6 +44,6 @@
     ]
   },
   "overrides": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2"
+    "@sveltejs/vite-plugin-svelte": "^6.2.4"
   }
 }

web-admin/package.json

@@ -20,18 +20,17 @@
   "devDependencies": {
     "@fontsource/fira-mono": "^4.5.0",
     "@playwright/test": "^1.50.1",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.7.1",
-    "@tanstack/svelte-query": "^5.69.0",
-    "@tanstack/svelte-table": "^8.11.8",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.52.0",
+    "@tanstack/svelte-query": "^6.0.18",
+    "@tanstack/svelte-table": "^9.0.0-alpha.10",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.7",
     "cronstrue": "^2.41.0",
-    "orval": "^7.8.0",
+    "orval": "^8.4.0",
     "postcss": "^8.4.47",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.4",
-    "svelte-preprocess": "^6.0.3",
+    "svelte": "^5.51.3",
+    "svelte-check": "^4.4.0",
     "tailwindcss": "^3.4.13",
     "vitest": "^3.1.1",
     "web-common": "*"

web-admin/src/features/alerts/history/AlertHistoryTable.svelte

@@ -26,9 +26,9 @@
         flexRender(AlertHistoryTableCompositeCell, {
           alertTime: info.row.original.executionTime,
           timeZone:
-            $alertQuery.data.resource.alert.spec.refreshSchedule.timeZone,
+            alertQuery.data.resource.alert.spec.refreshSchedule.timeZone,
           currentExecution:
-            $alertQuery.data.resource.alert.state.currentExecution,
+            alertQuery.data.resource.alert.state.currentExecution,
           result: info.row.original.result,
         }),
     },
@@ -40,19 +40,19 @@
     <h1 class="text-fg-secondary text-lg font-bold">Recent history</h1>
     <p class="text-fg-secondary text-sm">Showing up to 25 most recent checks</p>
   </div>
-  {#if $alertQuery.error}
+  {#if alertQuery.error}
     <div class="text-red-500">
-      {$alertQuery.error.message}
+      {alertQuery.error.message}
     </div>
-  {:else if $alertQuery.isLoading}
+  {:else if alertQuery.isLoading}
     <div class="text-fg-secondary">Loading...</div>
-  {:else if !$alertQuery.data?.resource.alert.state.executionHistory.length}
+  {:else if !alertQuery.data?.resource.alert.state.executionHistory.length}
     <NoAlertRunsYet />
   {:else}
     <ResourceList
       kind="alert"
       {columns}
-      data={$alertQuery.data?.resource.alert.state.executionHistory}
+      data={alertQuery.data?.resource.alert.state.executionHistory}
       toolbar={false}
       fixedRowHeight={false}
     />

web-admin/src/features/alerts/metadata/AlertMetadata.svelte

@@ -45,18 +45,18 @@
 
   // Get dashboard
   $: exploreName = useAlertDashboardName(instanceId, alert);
-  $: validSpecResp = useExploreValidSpec(instanceId, $exploreName.data);
-  $: exploreSpec = $validSpecResp.data?.explore;
+  $: validSpecResp = useExploreValidSpec(instanceId, exploreName.data);
+  $: exploreSpec = validSpecResp.data?.explore;
   $: metricsViewName = exploreSpec?.metricsView;
-  $: dashboardTitle = exploreSpec?.displayName || $exploreName.data;
-  $: dashboardDoesNotExist = $validSpecResp.error?.response?.status === 404;
+  $: dashboardTitle = exploreSpec?.displayName || exploreName.data;
+  $: dashboardDoesNotExist = validSpecResp.error?.response?.status === 404;
 
   $: exploreIsValid = hasValidMetricsViewTimeRange(
     instanceId,
-    $exploreName.data,
+    exploreName.data,
   );
 
-  $: alertSpec = $alertQuery.data?.resource?.alert?.spec;
+  $: alertSpec = alertQuery.data?.resource?.alert?.spec;
 
   // Get human-readable frequency
   $: humanReadableFrequency = alertSpec?.refreshSchedule?.cron
@@ -83,7 +83,7 @@
 
   $: exploreUrl = getMappedExploreUrl(
     {
-      exploreName: $exploreName.data,
+      exploreName: exploreName.data,
       queryName,
       queryArgsJson,
     },
@@ -102,10 +102,10 @@
   const deleteAlert = createAdminServiceDeleteAlert();
 
   async function handleDeleteAlert() {
-    await $deleteAlert.mutateAsync({
+    await deleteAlert.mutateAsync({
       org: organization,
       project,
-      name: $alertQuery.data.resource.meta.name.name,
+      name: alertQuery.data.resource.meta.name.name,
     });
     await queryClient.invalidateQueries({
       queryKey: getRuntimeServiceListResourcesQueryKey(instanceId),
@@ -123,7 +123,7 @@
         <!-- Author -->
         <ProjectAccessControls {organization} {project}>
           <svelte:fragment slot="manage-project">
-            {#if $alertQuery.data}
+            {#if alertQuery.data}
               <AlertOwnerBlock
                 {organization}
                 {project}
@@ -138,8 +138,8 @@
           {alertSpec.displayName}
         </h1>
         <div class="grow" />
-        {#if !$isAlertCreatedByCode.data}
-          <EditAlert {alertSpec} disabled={!$exploreIsValid} />
+        {#if !isAlertCreatedByCode.data}
+          <EditAlert {alertSpec} disabled={!exploreIsValid} />
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
               <IconButton ariaLabel="Alert context menu">
@@ -174,15 +174,15 @@
                 </Tooltip>
               </div>
             {:else}
-              <a href={$exploreUrl}>
+              <a href={exploreUrl}>
                 {dashboardTitle}
               </a>
             {/if}
           </MetadataValue>
         {:else}
           <MetadataLabel>Name</MetadataLabel>
           <MetadataValue>
-            {$alertQuery.data?.resource?.meta?.name?.name}
+            {alertQuery.data?.resource?.meta?.name?.name}
           </MetadataValue>
         {/if}
       </div>
@@ -212,7 +212,7 @@
     <AlertFilters
       {metricsViewName}
       filters={metricsViewAggregationRequest?.where}
-      dimensionsWithInlistFilter={$dashboardState.data
+      dimensionsWithInlistFilter={dashboardState.data
         ?.dimensionsWithInlistFilter ?? []}
       timeRange={metricsViewAggregationRequest?.timeRange}
       comparisonTimeRange={metricsViewAggregationRequest?.comparisonTimeRange}

web-admin/src/features/bookmarks/Bookmarks.svelte

@@ -68,10 +68,10 @@
   const projectIdQuery = createQuery(
     getProjectIdQueryOptions(orgAndProjectNameStore),
   );
-  $: projectId = $projectIdQuery.data ?? "";
+  $: projectId = projectIdQuery.data ?? "";
 
   $: projectPermissions = getProjectPermissions(organization, project);
-  $: manageProject = $projectPermissions.data?.manageProject;
+  $: manageProject = projectPermissions.data?.manageProject;
 
   $: curUrlParams = $page.url.searchParams;
 
@@ -88,7 +88,7 @@
     const homeBookmark = bookmarks.find(isHomeBookmark);
 
     if (homeBookmark) {
-      await $bookmarkUpdater.mutateAsync({
+      await bookmarkUpdater.mutateAsync({
         data: {
           bookmarkId: homeBookmark.id,
           displayName: "Go to Home",
@@ -99,7 +99,7 @@
         },
       });
     } else {
-      await $bookmarkCreator.mutateAsync({
+      await bookmarkCreator.mutateAsync({
         data: {
           displayName: "Go to Home",
           description: "",
@@ -132,7 +132,7 @@
 
   async function deleteBookmark(bookmark: BookmarkEntry) {
     // TODO: add confirmation?
-    await $bookmarkDeleter.mutateAsync({
+    await bookmarkDeleter.mutateAsync({
       bookmarkId: bookmark.resource.id,
     });
     eventBus.emit("notification", {

web-admin/src/features/bookmarks/ExploreBookmarks.svelte

@@ -46,7 +46,7 @@
       exploreNameStore,
     ),
   );
-  $: bookmarks = $bookmarksQuery.data?.bookmarks ?? [];
+  $: bookmarks = bookmarksQuery.data?.bookmarks ?? [];
 
   // Parse bookmarks and fill in metadata based on bookmark data.
   $: parsedBookmarks = parseBookmarks(

web-admin/src/features/navigation/TopNavigationBar.svelte

@@ -69,15 +69,15 @@
   $: onPublicURLPage = isPublicURLPage($page);
   $: onOrgPage = isOrganizationPage($page);
 
-  $: loggedIn = !!$user.data?.user;
+  $: loggedIn = !!user.data?.user;
   $: rillLogoHref = !loggedIn ? "https://www.rilldata.com" : "/";
   $: logoUrl = organizationLogoUrl;
 
   $: organizationQuery = listOrgs(
     { pageSize: 100 },
     {
       query: {
-        enabled: !!$user.data?.user,
+        enabled: !!user.data?.user,
         retry: 2,
         refetchOnMount: true,
       },
@@ -103,11 +103,11 @@
   $: alertsQuery = useAlerts(instanceId, onAlertPage);
   $: reportsQuery = useReports(instanceId, onReportPage);
 
-  $: organizations = $organizationQuery.data?.organizations ?? [];
-  $: projects = $projectsQuery.data?.projects ?? [];
-  $: visualizations = $visualizationsQuery.data ?? [];
-  $: alerts = $alertsQuery.data?.resources ?? [];
-  $: reports = $reportsQuery.data?.resources ?? [];
+  $: organizations = organizationQuery.data?.organizations ?? [];
+  $: projects = projectsQuery.data?.projects ?? [];
+  $: visualizations = visualizationsQuery.data ?? [];
+  $: alerts = alertsQuery.data?.resources ?? [];
+  $: reports = reportsQuery.data?.resources ?? [];
 
   $: organizationPaths = {
     options: createOrgPaths(organizations, organization, planDisplayName),
@@ -192,12 +192,12 @@
   $: exploreQuery = useExplore(instanceId, dashboard, {
     enabled: !!instanceId && !!dashboard && !!onMetricsExplorerPage,
   });
-  $: exploreSpec = $exploreQuery.data?.explore?.explore?.state?.validSpec;
+  $: exploreSpec = exploreQuery.data?.explore?.explore?.state?.validSpec;
   $: isDashboardValid = !!exploreSpec;
-  $: hasUserAccess = $user.isSuccess && $user.data.user && !onPublicURLPage;
+  $: hasUserAccess = user.isSuccess && user.data.user && !onPublicURLPage;
 
   $: publicURLDashboardTitle =
-    $exploreQuery.data?.explore?.explore?.state?.validSpec?.displayName ||
+    exploreQuery.data?.explore?.explore?.state?.validSpec?.displayName ||
     dashboard;
 
   $: currentPath = [organization, project, dashboard, report || alert];
@@ -279,8 +279,8 @@
       <CanvasBookmarks {organization} {project} canvasName={dashboard} />
       <ShareDashboardPopover createMagicAuthTokens={false} />
     {/if}
-    {#if $user.isSuccess}
-      {#if $user.data && $user.data.user}
+    {#if user.isSuccess}
+      {#if user.data && user.data.user}
         <AvatarButton />
       {:else}
         <SignIn />

web-admin/src/features/organizations/user-management/dialogs/CreateUserGroupDialog.svelte

@@ -74,24 +74,24 @@
       },
     );
 
-  $: organizationUsers = $organizationUsersInfiniteQuery.data?.pages
-    ? $organizationUsersInfiniteQuery.data.pages.flatMap((p) => p.members ?? [])
+  $: organizationUsers = organizationUsersInfiniteQuery.data?.pages
+    ? organizationUsersInfiniteQuery.data.pages.flatMap((p) => p.members ?? [])
     : [];
 
   $: hasMoreUsers =
     // Prefer built-in flag if available
-    ($organizationUsersInfiniteQuery?.hasNextPage ??
-      (($organizationUsersInfiniteQuery?.data?.pages?.length ?? 0) > 0 &&
-        ($organizationUsersInfiniteQuery?.data?.pages?.[
-          ($organizationUsersInfiniteQuery?.data?.pages?.length ?? 1) - 1
+    (organizationUsersInfiniteQuery?.hasNextPage ??
+      ((organizationUsersInfiniteQuery?.data?.pages?.length ?? 0) > 0 &&
+        (organizationUsersInfiniteQuery?.data?.pages?.[
+          (organizationUsersInfiniteQuery?.data?.pages?.length ?? 1) - 1
         ]?.nextPageToken ?? "") !== "")) ||
     false;
 
   $: isLoadingMoreUsers =
-    $organizationUsersInfiniteQuery?.isFetchingNextPage ?? false;
+    organizationUsersInfiniteQuery?.isFetchingNextPage ?? false;
 
   function loadMoreUsers() {
-    const fetchNext = $organizationUsersInfiniteQuery?.fetchNextPage;
+    const fetchNext = organizationUsersInfiniteQuery?.fetchNextPage;
     if (typeof fetchNext === "function") {
       fetchNext();
     }
@@ -103,7 +103,7 @@
 
   async function handleCreate(newName: string) {
     try {
-      await $createUserGroup.mutateAsync({
+      await createUserGroup.mutateAsync({
         org: organization,
         data: {
           name: newName,
@@ -141,7 +141,7 @@
     try {
       // Add pending users to the group
       for (const email of pendingAdditions) {
-        await $addUsergroupMemberUser.mutateAsync({
+        await addUsergroupMemberUser.mutateAsync({
           org: organization,
           usergroup: usergroup,
           email: email,

web-admin/src/features/organizations/user-management/dialogs/EditUserGroupDialog.svelte

@@ -55,7 +55,7 @@
     groupName,
   );
 
-  $: userGroupMembersUsers = $listUsergroupMemberUsers.data?.members ?? [];
+  $: userGroupMembersUsers = listUsergroupMemberUsers.data?.members ?? [];
 
   // Query organization users when user types (debounced)
   // Use a more stable pattern - create query once and let params drive it
@@ -75,7 +75,7 @@
   );
 
   $: allOrganizationUsers =
-    $organizationUsersQuery.data?.members?.filter(
+    organizationUsersQuery.data?.members?.filter(
       (u) =>
         !selectedUsers.some((selected) => selected.userEmail === u.userEmail),
     ) ?? [];
@@ -105,7 +105,7 @@
 
   async function handleRename(groupName: string, newName: string) {
     try {
-      await $updateUserGroup.mutateAsync({
+      await updateUserGroup.mutateAsync({
         org: organization,
         usergroup: groupName,
         data: {
@@ -148,7 +148,7 @@
   async function applyPendingChanges() {
     try {
       for (const email of pendingAdditions) {
-        await $addUsergroupMemberUser.mutateAsync({
+        await addUsergroupMemberUser.mutateAsync({
           org: organization,
           usergroup: groupName,
           email: email,
@@ -157,7 +157,7 @@
       }
 
       for (const email of pendingRemovals) {
-        await $removeUserGroupMember.mutateAsync({
+        await removeUserGroupMember.mutateAsync({
           org: organization,
           usergroup: groupName,
           email: email,