Upgrade build tooling to Vite 8

package.json

@@ -152,7 +152,7 @@
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/adapter-vercel": "^6.3.2",
     "@sveltejs/kit": "2.70.2",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
     "@temporalio/client": "1.24.0",
     "@temporalio/common": "1.24.0",
     "@temporalio/proto": "1.24.0",
@@ -161,12 +161,12 @@
     "@types/express": "^4.17.17",
     "@types/js-yaml": "^4.0.9",
     "@types/json-bigint": "^1.0.1",
-    "@types/node": "^18.15.3",
+    "@types/node": "22.18.0",
     "@types/tar-fs": "^2.0.4",
     "@types/yargs": "^17.0.24",
     "@typescript/native-preview": "7.0.0-dev.20260506.1",
-    "@vitest/coverage-v8": "^4.1.5",
-    "@vitest/ui": "^3.1.1",
+    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/ui": "4.1.11",
     "autoprefixer": "^10.4.13",
     "axe-core": "^4.10.0",
     "axe-playwright": "^2.0.3",
@@ -221,8 +221,8 @@
     "typescript": "6.0.3",
     "typescript-eslint": "^8.54.0",
     "unist-util-visit": "^5.0.0",
-    "vite": "^6.4.2",
-    "vitest": "^3.2.6",
+    "vite": "8.3.4",
+    "vitest": "4.1.11",
     "vitest-localstorage-mock": "^0.1.2",
     "wait-port": "^1.0.4",
     "yargs": "^17.7.2",
@@ -254,7 +254,7 @@
       "@tootallnate/once": ">=2.0.1 <3",
       "cookie": "0.7.0",
       "micromatch": "^4.0.8",
-      "esbuild": "^0.25.0",
+      "esbuild": "^0.28.0",
       "serialize-javascript": "^7.0.5",
       "picomatch@>=2 <3": "^2.3.2",
       "picomatch@>=4": "^4.0.4",

scripts/catalog/catalog-artifacts.test.ts

@@ -1442,9 +1442,13 @@ registry.registerExample({
           'svelte.config.js',
           'tsconfig.json',
           'scripts/generate-exports.mjs',
+          'src/lib/holocene/alert.svelte',
           'src/lib/holocene/button.svelte',
           'src/lib/holocene/card.svelte',
+          'src/lib/holocene/chip.svelte',
           'src/lib/holocene/copyable',
+          'src/lib/holocene/drawer-content.svelte',
+          'src/lib/holocene/drawer.svelte',
           'src/lib/io/badge',
           'src/lib/io/badge-count',
           'src/lib/io/badge-status',
@@ -1456,6 +1460,7 @@ registry.registerExample({
           'src/lib/holocene/label.svelte',
           'src/lib/holocene/link.svelte',
           'src/lib/holocene/markdown-editor/preview.svelte',
+          'src/lib/holocene/outside-click.ts',
           'src/lib/holocene/portal',
           'src/lib/holocene/progress-bar.svelte',
           'src/lib/holocene/table/table-header-row.svelte',
@@ -1476,6 +1481,7 @@ registry.registerExample({
           'src/lib/utilities/core-provider.ts',
           'src/lib/utilities/dark-mode',
           'src/lib/utilities/encode-uri.ts',
+          'src/lib/utilities/focus-trap.ts',
           'src/lib/utilities/format-time.ts',
           'src/lib/utilities/has.ts',
           'src/lib/utilities/is-function.ts',
@@ -1581,9 +1587,9 @@ registry.registerExample({
           type: 'module',
           dependencies: { '@temporalio/ui': `file:${tarballPath}` },
           devDependencies: {
-            '@sveltejs/vite-plugin-svelte': '^6.2.4',
+            '@sveltejs/vite-plugin-svelte': '7.3.1',
             svelte: '^5.55.7',
-            vite: '^6.4.3',
+            vite: '8.3.4',
           },
         }),
       );
@@ -1660,7 +1666,7 @@ registry.registerExample({
           "import { svelte } from '@sveltejs/vite-plugin-svelte';",
           "import { defineConfig } from 'vite';",
           '',
-          "export default defineConfig({ plugins: [svelte({ hot: false })], resolve: { alias: { $app: '@temporalio/ui/svelte-mocks/app' } } });",
+          "export default defineConfig({ plugins: [svelte({ compilerOptions: { hmr: false } })], resolve: { alias: { $app: '@temporalio/ui/svelte-mocks/app' } } });",
         ].join('\n'),
       );
       await writeFile(

src/lib/catalog/browser/catalog-client-test-runner.ts

@@ -47,7 +47,12 @@ export async function getCatalogClientTestRunner(): Promise<ClientRunner> {
         root: projectRoot,
         configFile: false,
         appType: 'custom',
-        plugins: [svelte({ hot: false, prebundleSvelteLibraries: false })],
+        plugins: [
+          svelte({
+            compilerOptions: { hmr: false },
+            prebundleSvelteLibraries: false,
+          }),
+        ],
         optimizeDeps: {
           noDiscovery: true,
           exclude: ['svelte'],

src/lib/catalog/browser/catalog-detail.test.ts

@@ -77,7 +77,7 @@ beforeAll(async () => {
       root: projectRoot,
       configFile: false,
       appType: 'custom',
-      plugins: [svelte({ hot: false })],
+      plugins: [svelte({ compilerOptions: { hmr: false } })],
       resolve: {
         alias: {
           '$lib/holocene/markdown-editor/preview.svelte': path.resolve(

src/lib/catalog/browser/catalog-list.test.ts

@@ -28,7 +28,7 @@ beforeAll(async () => {
       root: projectRoot,
       configFile: false,
       appType: 'custom',
-      plugins: [svelte({ hot: false })],
+      plugins: [svelte({ compilerOptions: { hmr: false } })],
       resolve: {
         alias: {
           $lib: path.resolve(projectRoot, 'src/lib'),

src/lib/catalog/worker/runner.test.ts

@@ -1,4 +1,4 @@
-import { existsSync, statSync } from 'node:fs';
+import * as fs from 'node:fs';
 import { resolve } from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 
@@ -8,8 +8,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { createCatalogRegistry, generateCatalog } from './registry';
 import { startCatalogRunner } from './runner';
 
-vi.mock('node:fs', { spy: true });
-
 const createNexusHandler = (name: string) => {
   const definition = service(name, {
     'catalog-operation': operation<string, string>(),
@@ -195,10 +193,9 @@ describe('catalog runner', () => {
       target: { ...binding.target, workflowsPath: './workflows.js' },
     }));
 
-    expect(statSync(sourceWorkflowsPath).isFile()).toBe(true);
-    vi.mocked(existsSync).mockImplementation(
-      (path) => path === sourceWorkflowsPath,
-    );
+    expect(fs.existsSync(packagedWorkflowsPath)).toBe(false);
+    expect(fs.statSync(sourceWorkflowsPath).isFile()).toBe(true);
+
     try {
       const sourceRunner = await startCatalogRunner({
         bindings,
@@ -211,7 +208,7 @@ describe('catalog runner', () => {
         expect.objectContaining({ workflowsPath: sourceWorkflowsPath }),
       );
 
-      vi.mocked(existsSync).mockReturnValue(true);
+      fs.closeSync(fs.openSync(packagedWorkflowsPath, 'wx'));
       const packagedRunner = await startCatalogRunner({
         bindings,
         connection,
@@ -223,7 +220,7 @@ describe('catalog runner', () => {
         expect.objectContaining({ workflowsPath: packagedWorkflowsPath }),
       );
     } finally {
-      vi.mocked(existsSync).mockRestore();
+      fs.rmSync(packagedWorkflowsPath, { force: true });
     }
   });
 

src/lib/catalog/worker/workflow-execution-logger.test.ts

@@ -1,8 +1,12 @@
 import type { Logger } from '@temporalio/common';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { createCatalogExecutionLogger } from './workflow-execution-logger.js';
 
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
 const createFallbackLogger = (): Logger => ({
   log: vi.fn(),
   trace: vi.fn(),

src/lib/components/deployments/deployment-client-test-runner.ts

@@ -51,7 +51,12 @@ export async function getDeploymentClientTestRunner(): Promise<ClientRunner> {
         root: projectRoot,
         configFile: false,
         appType: 'custom',
-        plugins: [svelte({ hot: false, prebundleSvelteLibraries: false })],
+        plugins: [
+          svelte({
+            compilerOptions: { hmr: false },
+            prebundleSvelteLibraries: false,
+          }),
+        ],
         optimizeDeps: {
           noDiscovery: true,
           exclude: ['svelte'],

src/lib/components/lines-and-dots/timeline-graph/group-details-row-client-test-runner.ts

@@ -46,7 +46,12 @@ export async function getGroupDetailsRowClientTestRunner(): Promise<ClientRunner
       root: projectRoot,
       configFile: false,
       appType: 'custom',
-      plugins: [svelte({ hot: false, prebundleSvelteLibraries: false })],
+      plugins: [
+        svelte({
+          compilerOptions: { hmr: false },
+          prebundleSvelteLibraries: false,
+        }),
+      ],
       optimizeDeps: {
         noDiscovery: true,
         exclude: ['svelte'],

src/lib/components/workers/serverless-worker-form/cloud-run-latency-notice.test.ts

@@ -23,7 +23,7 @@ beforeAll(async () => {
       root: projectRoot,
       configFile: false,
       appType: 'custom',
-      plugins: [svelte({ hot: false })],
+      plugins: [svelte({ compilerOptions: { hmr: false } })],
       resolve: {
         alias: [
           {

src/lib/components/workers/serverless-worker-form/compute-fields.test.ts

@@ -34,7 +34,7 @@ beforeAll(async () => {
       root: projectRoot,
       configFile: false,
       appType: 'custom',
-      plugins: [svelte({ hot: false })],
+      plugins: [svelte({ compilerOptions: { hmr: false } })],
       resolve: {
         alias: [
           {

src/lib/i18n/translate.test.ts

@@ -1,23 +1,21 @@
 import * as i18next from 'i18next';
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { afterEach, describe, expect, test, vi } from 'vitest';
 
 import { translate } from './translate';
 
-describe('translate', () => {
-  beforeEach(() => {
-    vi.mock('i18next', async (importOriginal) => {
-      const actual = (await importOriginal()) as i18next.i18n;
-      const mockT = vi.fn();
-      return {
-        default: {
-          ...actual,
-          t: mockT,
-        },
-        t: mockT,
-      };
-    });
-  });
+vi.mock('i18next', async (importOriginal) => {
+  const actual = (await importOriginal()) as i18next.i18n;
+  const mockT = vi.fn();
+  return {
+    default: {
+      ...actual,
+      t: mockT,
+    },
+    t: mockT,
+  };
+});
 
+describe('translate', () => {
   afterEach(() => {
     vi.clearAllMocks();
   });

src/lib/models/event-history/get-event-attributes.test.ts

@@ -1,11 +1,29 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import type { HistoryEvent } from '$lib/types/events';
+import type { DecodeFunctions } from '$lib/utilities/decode-payload';
 
 import { getEventAttributes, toEventHistory } from '.';
 
 import eventsFixture from '$fixtures/raw-events.descending.completed.json';
 
+vi.mock('$lib/utilities/decode-payload', () => {
+  const fn = async <T>(x: T): Promise<T> => x;
+
+  const decodeEventAttributes = vi.fn(fn);
+  const parsePayloadAttributes = vi.fn(fn);
+
+  return {
+    decodeEventAttributes,
+    parsePayloadAttributes,
+  };
+});
+
+const createConvertWithCodec = () =>
+  vi.fn<NonNullable<DecodeFunctions['convertWithCodec']>>(async (value) => {
+    return value;
+  });
+
 const historyEvent = {
   eventId: '1',
   eventTime: '2022-07-01T20:28:48.796369169Z',
@@ -78,20 +96,6 @@ const historyEvent = {
 } as unknown as HistoryEvent;
 
 describe('getEventAttributes', () => {
-  beforeEach(() => {
-    vi.mock('$lib/utilities/decode-payload', () => {
-      const fn = async <T>(x: T): Promise<T> => x;
-
-      const decodeEventAttributes = vi.fn(fn);
-      const parsePayloadAttributes = vi.fn(fn);
-
-      return {
-        decodeEventAttributes,
-        parsePayloadAttributes,
-      };
-    });
-  });
-
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -103,7 +107,7 @@ describe('getEventAttributes', () => {
   });
 
   it('should call convertWithCodec if not provided an endpoint', async () => {
-    const convertWithCodec = vi.fn(async <T>(x: T): Promise<T> => x);
+    const convertWithCodec = createConvertWithCodec();
 
     await getEventAttributes(historyEvent, {
       convertWithCodec,
@@ -113,7 +117,7 @@ describe('getEventAttributes', () => {
   });
 
   it('should call convertWithCodec if provided an endpoint in settings', async () => {
-    const convertWithCodec = vi.fn(async <T>(x: T): Promise<T> => x);
+    const convertWithCodec = createConvertWithCodec();
 
     await getEventAttributes(historyEvent, {
       convertWithCodec,
@@ -123,7 +127,7 @@ describe('getEventAttributes', () => {
   });
 
   it('should call convertWithCodec if provided an endpoint in settings', async () => {
-    const convertWithCodec = vi.fn(async <T>(x: T): Promise<T> => x);
+    const convertWithCodec = createConvertWithCodec();
 
     await getEventAttributes(historyEvent, {
       convertWithCodec,