Scaffold Svelte frontend and browser test matrix

Establish the TypeScript 7, Oxlint, Vitest, and Playwright workspace with an isolated Svelte diagnostics compatibility boundary.

web/.oxlintrc.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "categories": {
+    "correctness": "error",
+    "suspicious": "error"
+  },
+  "ignorePatterns": ["node_modules/**", "tools/**"],
+  "options": {
+    "typeAware": true
+  },
+  "plugins": ["typescript", "vitest"],
+  "rules": {
+    "typescript/await-thenable": "error",
+    "typescript/no-floating-promises": "error",
+    "typescript/no-misused-promises": "error"
+  }
+}

web/.prettierignore

@@ -0,0 +1,5 @@
+.cache/
+dist/
+node_modules/
+playwright-report/
+test-results/

web/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "semi": false,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Remora durable transfer service" />
+    <title>Remora</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@remora/web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": "24.18.0",
+    "pnpm": "11.13.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "tsc --noEmit -p ./tsconfig.app.json && tsc --noEmit -p ./tsconfig.node.json && tsc --noEmit -p ./tsconfig.test.json && pnpm --filter @remora/svelte-check-compat check",
+    "lint": "oxlint --threads 1 --deny-warnings src tests *.config.ts && prettier --check .",
+    "test": "vitest run --config vitest.config.ts",
+    "test:unit": "vitest run --config vitest.unit.config.ts",
+    "test:component": "vitest run --config vitest.browser.config.ts",
+    "test:component:full": "vitest run --config vitest.browser-full.config.ts",
+    "test:e2e": "playwright test --project=chromium",
+    "test:e2e:full": "playwright test"
+  },
+  "dependencies": {
+    "svelte": "5.56.5"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.61.1",
+    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "@vitest/browser-playwright": "4.1.10",
+    "oxlint": "1.74.0",
+    "oxlint-tsgolint": "0.24.0",
+    "prettier": "3.9.5",
+    "prettier-plugin-svelte": "4.1.1",
+    "typescript": "7.0.2",
+    "vite": "8.1.4",
+    "vitest": "4.1.10",
+    "vitest-browser-svelte": "3.0.0"
+  }
+}

web/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  reporter: 'line',
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'pnpm preview --host 127.0.0.1 --port 4173',
+    url: 'http://127.0.0.1:4173',
+    reuseExistingServer: true,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: devices['Desktop Chrome'],
+    },
+    {
+      name: 'firefox',
+      use: devices['Desktop Firefox'],
+    },
+    {
+      name: 'webkit',
+      use: devices['Desktop Safari'],
+    },
+  ],
+})

web/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - tools/*
+
+minimumReleaseAgeExclude:
+  - [email protected]

web/src/App.browser.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest'
+import { render } from 'vitest-browser-svelte'
+
+import App from './App.svelte'
+
+test('renders the application shell', async () => {
+  const screen = await render(App)
+
+  await expect
+    .element(screen.getByRole('heading', { name: 'Remora' }))
+    .toBeVisible()
+})

web/src/App.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { applicationName } from './lib/application'
+</script>
+
+<svelte:head>
+  <title>{applicationName}</title>
+</svelte:head>
+
+<main>
+  <p>Durable transfer service</p>
+  <h1>{applicationName}</h1>
+</main>
+
+<style>
+  :global(*) {
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    margin: 0;
+    min-width: 20rem;
+    min-height: 100vh;
+    color: #14213d;
+    background: #f8f7f2;
+    font-family:
+      Inter,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      sans-serif;
+  }
+
+  main {
+    display: grid;
+    min-height: 100vh;
+    place-content: center;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  p {
+    margin: 0;
+    color: #52606d;
+    font-size: 0.875rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  h1 {
+    margin: 0.5rem 0 0;
+    font-size: clamp(3rem, 12vw, 7rem);
+    letter-spacing: -0.06em;
+  }
+</style>

web/src/lib/application.ts

@@ -0,0 +1,5 @@
+export const applicationName = 'Remora'
+
+export function componentLabel(component: string): string {
+  return `${applicationName} ${component}`
+}

web/src/lib/application.unit.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, test } from 'vitest'
+
+import { applicationName, componentLabel } from './application'
+
+describe('application identity', () => {
+  test('labels components consistently', () => {
+    expect(applicationName).toBe('Remora')
+    expect(componentLabel('Worker')).toBe('Remora Worker')
+  })
+})

web/src/main.ts

@@ -0,0 +1,11 @@
+import { mount } from 'svelte'
+
+import App from './App.svelte'
+
+const target = document.querySelector<HTMLElement>('#app')
+
+if (target === null) {
+  throw new Error('missing application mount point')
+}
+
+mount(App, { target })

web/tests/e2e/application.spec.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test'
+
+test('loads the application shell', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByRole('heading', { name: 'Remora' })).toBeVisible()
+})

web/tools/svelte-check/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@remora/svelte-check-compat",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "check": "svelte-check --workspace ../.. --tsconfig ./tsconfig.app.json"
+  },
+  "devDependencies": {
+    "svelte": "5.56.5",
+    "svelte-check": "4.7.2",
+    "typescript": "6.0.3"
+  }
+}

web/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "composite": true,
+    "isolatedModules": true,
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2024",
+    "tsBuildInfoFile": "./.cache/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}

web/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.test.json" }
+  ]
+}

web/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2024",
+    "tsBuildInfoFile": "./.cache/tsconfig.node.tsbuildinfo"
+  },
+  "include": ["*.config.ts"]
+}

web/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./.cache/tsconfig.test.tsbuildinfo"
+  },
+  "include": ["tests/**/*.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,6 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [svelte()],
+})