Upgrade to Svelte 5 (#2587)

* Upgrade svelte and dependencies

* Update and fix ErrorBoundary

* Fix self-closing html tags

* Fix prop type errors

* Format code

* Fix storybook

* Fix search attribute filter

* Fix tsconfig warnings, use svelte config for those valeus

* Latest upgrades

* Fix svelte check errors

* Fix formatting

---------

Co-authored-by: Alex Thomsen <[email protected]>

Author: laurakwhit

.eslintrc.cjs

@@ -9,7 +9,7 @@ module.exports = {
     'plugin:storybook/recommended',
   ],
   plugins: ['svelte', '@typescript-eslint', 'vitest', 'import'],
-  ignorePatterns: ['**/*.cjs', '/server'],
+  ignorePatterns: ['**/*.cjs', '/server', '**/error-boundary.svelte'],
   overrides: [
     {
       files: ['src/**/*.svelte'],

.storybook/main.ts

@@ -6,7 +6,13 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-svelte-csf',
+    {
+      name: '@storybook/addon-svelte-csf',
+      options: {
+        // REMOVE WHEN STORIES ARE UPGRADED TO NEW CSF SYNTAX
+        legacyTemplate: true,
+      },
+    },
     '@storybook/addon-a11y',
     '@storybook/addon-themes',
     '@chromatic-com/storybook',

.vscode/temporal-ui.code-snippets

@@ -2,6 +2,6 @@
   "Playwright Test": {
     "prefix": "pwt",
     "body": ["test('${1}', async ({ page }) => {", "  $0", "});"],
-    "description": "useState()"
-  }
+    "description": "useState()",
+  },
 }

package.json

@@ -83,12 +83,11 @@
     "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.29.0",
-    "@crownframework/svelte-error-boundary": "^1.0.3",
     "@fontsource-variable/inter": "^5.0.8",
     "@fontsource/noto-sans-mono": "^5.0.9",
     "@lezer/highlight": "^1.1.3",
-    "@storybook/addon-actions": "^8.4.7",
-    "@sveltejs/package": "^2.2.6",
+    "@storybook/addon-actions": "^8.6.4",
+    "@sveltejs/package": "^2.3.10",
     "@sveltejs/svelte-virtual-list": "^3.0.1",
     "class-variance-authority": "^0.7.0",
     "date-fns": "^2.29.3",
@@ -118,25 +117,25 @@
     "@axe-core/playwright": "^4.10.1",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.18.6",
-    "@chromatic-com/storybook": "^3.2.3",
+    "@chromatic-com/storybook": "^3.2.6",
     "@grpc/grpc-js": "^1.8.22",
     "@playwright/test": "^1.49.1",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7 ",
-    "@storybook/addon-svelte-csf": "^4.2.0",
-    "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/icons": "^1.3.0",
-    "@storybook/svelte": "^8.4.7",
-    "@storybook/sveltekit": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/test-runner": "^0.21.0",
-    "@sveltejs/adapter-static": "^3.0.0",
+    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-links": "^8.6.11",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.23",
+    "@storybook/addon-themes": "^8.6.11",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/icons": "^1.4.0",
+    "@storybook/svelte": "^8.6.11",
+    "@storybook/sveltekit": "^8.6.11",
+    "@storybook/test": "^8.6.11",
+    "@storybook/test-runner": "^0.22.0",
+    "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/adapter-vercel": "^4.0.0",
-    "@sveltejs/kit": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@sveltejs/kit": "^2.20.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@temporalio/activity": "1.11.6",
     "@temporalio/client": "1.11.6",
     "@temporalio/common": "1.11.6",
@@ -157,8 +156,8 @@
     "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
-    "@vitest/coverage-v8": "^1.6.0",
-    "@vitest/ui": "^1.6.0",
+    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/ui": "^3.1.1",
     "autoprefixer": "^10.4.13",
     "axe-playwright": "^2.0.3",
     "c8": "^7.12.0",
@@ -173,7 +172,7 @@
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-playwright": "^0.15.3",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-svelte": "^2.33.0",
+    "eslint-plugin-svelte": "^2.46.1",
     "eslint-plugin-vitest": "^0.2.8",
     "esno": "^0.16.3",
     "express": "^4.18.2",
@@ -192,8 +191,8 @@
     "postcss-html": "^1.5.0",
     "postcss-import": "^14.1.0",
     "postcss-load-config": "^3.1.4",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
+    "prettier": "^3.5.1",
+    "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -205,27 +204,27 @@
     "remark-parse": "^10.0.2",
     "remark-toc": "^8.0.1",
     "rimraf": "^4.3.1",
-    "storybook": "^8.4.7",
+    "storybook": "^8.6.11",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.5.0",
-    "svelte-eslint-parser": "^0.33.0",
-    "svelte-highlight": "^3.4.0",
-    "svelte-loader": "^3.1.4",
-    "svelte-preprocess": "^5.0.4",
-    "svelte2tsx": "^0.6.21",
+    "svelte": "^5.25.5",
+    "svelte-check": "^4.1.5",
+    "svelte-eslint-parser": "^0.43.0",
+    "svelte-highlight": "^7.8.2",
+    "svelte-loader": "^3.2.4",
+    "svelte-preprocess": "^6.0.3",
+    "svelte2tsx": "^0.7.35",
     "tailwindcss": "^3.4.1",
     "tar-fs": "^2.1.1",
     "ts-node": "^10.9.1",
     "ts-proto": "^1.138.0",
     "tslib": "^2.4.1",
     "typescript": "^5.2.2",
     "unist-util-visit": "^5.0.0",
-    "vite": "^5.0.12",
-    "vite-node": "^0.23.4",
-    "vitest": "^1.6.0",
+    "vite": "^6.2.4",
+    "vite-node": "^3.1.1",
+    "vitest": "^3.1.1",
     "vitest-localstorage-mock": "^0.1.2",
     "wait-port": "^1.0.4",
     "webpack": "^5.76.0",