Modernize frontend/build stack for Svelte 5

cypress.config.ts

@@ -7,9 +7,6 @@ export default defineConfig({
   viewportWidth: 1536,
 
   e2e: {
-    setupNodeEvents(on, config) {
-      return require("./cypress/plugins/index.js")(on, config)
-    },
     baseUrl: "http://localhost:5000",
     supportFile: "cypress/support/e2e.js",
     // baseUrl: "https://simple-comment.netlify.app",

docs/plans/Priority4DependencyModernizationPlan.md → docs/archive/Priority4DependencyModernizationPlan.md

@@ -1,6 +1,6 @@
 # Priority 4 Plan — Dependency Modernization
 
-Status: proposed
+Status: archived
 
 Source backlog: `docs/RepoHealthImprovementBacklog.md` (`Priority 4: Dependency Modernization`)
 

docs/archive/Priority4FrontendBuildModernizationChecklist01.md

@@ -0,0 +1,34 @@
+# Priority 4 — Frontend / Build Checklist 01
+
+Status: archived
+
+Source plan: `docs/archive/Priority4FrontendBuildModernizationPlan.md`
+
+QC mode: Conformance QC
+
+## Scope Lock
+
+- Complete the deferred frontend/build modernization lane from Priority 4.
+- Keep the work inside frontend/build compatibility and validation.
+- Restore local embed/runtime behavior after the Svelte 5 shift.
+- Do not absorb unrelated backend/runtime or MongoDB work into this slice.
+
+## Atomic Checklist Items
+
+- [x] C01 `[inventory]` Confirm the current frontend/build target stack and record the intended Svelte 5-compatible dependency surface in `package.json` / `yarn.lock`.
+- [x] C02 `[config]` Align the frontend TypeScript, Vite, and Svelte preprocess path so the Svelte 5 toolchain uses the correct frontend tsconfig and no longer emits the stale `verbatimModuleSyntax` warning.
+- [x] C03 `[test]` Align the frontend Jest path with the post-upgrade ESM dependency graph so frontend tests remain runnable under the updated stack.
+- [x] C04 `[source]` Fix the source-level compatibility fallout surfaced by the upgrade, including `noImplicitAny` regressions, type-only imports, and invalid non-void self-closing tags.
+- [x] C05 `[runtime]` Update the embed entrypoint from the legacy Svelte component-constructor API to the Svelte 5 mount API so local runtime mounting succeeds again.
+- [x] C06 `[docs]` Finalize the validation notes with the final dependency/config state, command evidence, and any residual environment caveats that are outside the frontend/build lane itself.
+
+## Validation Items
+
+- [x] T01 `[validation]` Command validation: `yarn lint`, `yarn run prettier --list-different .`, `yarn typecheck`, `yarn test:frontend`, `yarn run build:frontend`
+- [x] T02 `[validation]` Runtime validation: confirm the `simple-comment` embed mounts again in local development once the backend/runtime prerequisites are available.
+- [x] T03 `[validation]` Process validation: record any residual issue that is environmental/generated-artifact noise rather than a frontend/build regression.
+
+## Outcome
+
+- Frontend/build modernization completed successfully.
+- Priority 4 no longer has an active frontend/build lane.

docs/archive/Priority4FrontendBuildModernizationChecklist01Validation.md

@@ -0,0 +1,78 @@
+# Priority 4 — Frontend / Build Checklist 01 Validation
+
+Status: archived
+
+Checklist: `docs/archive/Priority4FrontendBuildModernizationChecklist01.md`
+
+## Final Frontend / Build State
+
+- `svelte`: `^5.55.0`
+- `@sveltejs/vite-plugin-svelte`: `^4.0.0`
+- `svelte-preprocess`: `^6.0.3`
+- `vite`: `^5.4.14`
+- `ts-jest`: `^29.4.6`
+- `xstate`: `^4.38.1`
+- `@xstate/svelte`: `^2.1.0`
+
+Relevant final config state:
+
+- `vite.config.ts`
+  - `sveltePreprocess({ typescript: { tsconfigFile: "tsconfig.frontend.json" } })`
+- `jest.frontend.config.ts`
+  - `useESM: true`
+  - `transformIgnorePatterns: ["/node_modules/(?!svelte|esm-env)"]`
+  - `extensionsToTreatAsEsm: [".ts"]`
+- `tsconfig.frontend.json`
+  - `verbatimModuleSyntax: true`
+  - `moduleResolution: "bundler"`
+
+## Source Compatibility Fixes Completed
+
+- `src/simple-comment.ts`
+  - migrated from `new SimpleComment(...)` to `mount(SimpleComment, ...)`
+- `src/simple-comment-icebreakers.ts`
+  - typed previously implicit-`any` callback parameters
+- `src/components/Login.svelte`
+  - `StateValue` import made type-only
+- `src/components/CommentInput.svelte`
+  - `StateValue` import made type-only
+  - invalid self-closing `<textarea />` fixed
+- `src/components/CommentEdit.svelte`
+  - `StateValue` import made type-only
+  - invalid self-closing `<textarea />` fixed
+- `src/components/CommentDisplay.svelte`
+  - invalid self-closing non-void `<div />` placeholders fixed
+- `src/components/low-level/SkeletonText.svelte`
+  - invalid self-closing non-void `<p />` / `<div />` placeholders fixed
+
+## Command Evidence
+
+- `yarn lint`
+  - passes
+- `yarn run prettier --list-different .`
+  - passes
+- `yarn typecheck`
+  - passes
+- `yarn test:frontend`
+  - passes
+- `yarn run build:frontend`
+  - passes
+
+## Runtime Evidence
+
+- Before the Svelte 5 mount-path fix, the local embed/runtime failed at component creation with:
+  - `Cannot use 'in' operator to search for 'Symbol($state)' in undefined`
+- After changing `src/simple-comment.ts` to use `mount(...)`, the `simple-comment` frontend loads locally again.
+- The next local runtime blocker after that was backend/runtime availability rather than frontend mount failure.
+- Once MongoDB/backend runtime was started locally, the app ran successfully.
+
+## Residual Caveat
+
+- A fresh `yarn run ci:local` pass was previously confirmed green during the upgrade loop.
+- A later rerun after local Netlify dev/runtime activity failed because ESLint walked generated `.netlify/functions-serve/*` artifacts.
+- That failure is classified as environment/generated-artifact noise, not a frontend/build regression from this slice.
+
+## Closeout
+
+- The frontend/build modernization lane for Priority 4 is complete.
+- The umbrella Priority 4 dependency-modernization plan is archived because all named follow-on lanes have now been completed and documented.

docs/archive/Priority4FrontendBuildModernizationPlan.md

@@ -0,0 +1,66 @@
+# Priority 4 Mini-Plan — Frontend / Build Modernization
+
+Status: archived
+
+Source backlog: `docs/RepoHealthImprovementBacklog.md` via `docs/archive/Priority4DependencyModernizationPlan.md`
+
+Classification: historical plan artifact
+
+## Goal
+
+Modernize the frontend/build lane enough to support the Svelte 5 ecosystem shift while keeping contributor commands and the local runtime working.
+
+## Intent
+
+This slice completed the previously deferred frontend/build modernization lane from Priority 4.
+
+Success for this lane meant:
+
+- the frontend stack runs on the current Svelte 5-compatible toolchain,
+- `yarn run build:frontend`, `yarn test:frontend`, and `yarn typecheck` remain green,
+- local `simple-comment` runtime mounting works again after the Svelte 5 upgrade,
+- the resulting warning/error cleanup is narrow and reviewable rather than a broad rewrite,
+- and remaining runtime concerns are separated from frontend/build work.
+
+## In Scope
+
+- Svelte 5 ecosystem alignment in the existing frontend/build stack
+- Vite/Svelte preprocess alignment with the repo's frontend tsconfig
+- frontend Jest compatibility work required by the Svelte 5 dependency graph
+- source-level compatibility fixes required to restore clean frontend build/test/typecheck behavior
+- embed/runtime entrypoint compatibility fixes required by Svelte 5's mount model
+
+## Out of Scope
+
+- backend/runtime MongoDB configuration changes
+- runtime/platform dependency work outside frontend/build coupling
+- broad component rewrites unrelated to upgrade compatibility
+- architecture changes to the comment application itself
+
+## Result
+
+This lane is complete and archived.
+
+Implemented outcomes:
+
+- `svelte` upgraded to `^5.55.0`
+- `@sveltejs/vite-plugin-svelte` upgraded to `^4.0.0`
+- `svelte-preprocess` upgraded to `^6.0.3`
+- frontend Jest path aligned to the current ESM dependency edge (`esm-env`)
+- frontend tsconfig/build path aligned to `verbatimModuleSyntax`
+- Svelte 5 invalid non-void self-closing tags fixed
+- type-only XState imports applied to remove build noise
+- `src/simple-comment.ts` migrated from `new Component(...)` to `mount(...)`
+
+## Validation Summary
+
+- `yarn lint` passes
+- `yarn run prettier --list-different .` passes
+- `yarn typecheck` passes
+- `yarn test:frontend` passes
+- `yarn run build:frontend` passes
+- local runtime works once the backend and MongoDB are available
+
+## Follow-on Note
+
+During post-upgrade validation, rerunning `yarn run ci:local` after local Netlify dev/runtime activity caused ESLint to walk generated `.netlify/functions-serve/*` artifacts. That is an environment/generated-artifact issue, not a frontend/build regression, and should be handled separately from this archived frontend lane.

eslint.config.mjs

@@ -8,7 +8,13 @@ import tsParser from "@typescript-eslint/parser"
 export default defineConfig([
   // Base ignores for generated and intentionally skipped files.
   {
-    ignores: ["*.js", "functions/**/*.js", "dist/**/*.js", "src/policy.ts"],
+    ignores: [
+      "*.js",
+      ".netlify/**",
+      "functions/**/*.js",
+      "dist/**/*.js",
+      "src/policy.ts",
+    ],
   },
 
   // Shared repo defaults.
@@ -55,7 +61,7 @@ export default defineConfig([
         "warn",
         {
           argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
+          varsIgnorePattern: "^(state|_.*)$",
         },
       ],
     },

jest.frontend.config.ts

@@ -22,5 +22,6 @@ export default {
       },
     ],
   },
-  transformIgnorePatterns: ["/node_modules/(?!svelte)"],
+  transformIgnorePatterns: ["/node_modules/(?!svelte|esm-env)"],
+  extensionsToTreatAsEsm: [".ts"],
 }

package.json

@@ -7,7 +7,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@shelf/jest-mongodb": "^6.0.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/bcryptjs": "^2.4.2",
     "@types/jest": "^29.5.3",
     "@types/jsonwebtoken": "^8.5.0",
@@ -52,15 +52,15 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
     "@sendgrid/mail": "^8.1.6",
-    "@tsconfig/svelte": "^5.0.0",
+    "@tsconfig/svelte": "^5.0.8",
     "@types/aws-lambda": "^8.10.95",
     "@types/node": "^25.5.0",
     "@typescript-eslint/eslint-plugin": "^8.57.2",
     "@typescript-eslint/parser": "^8.57.2",
     "@xstate/svelte": "^2.1.0",
     "babel-jest": "^29.6.1",
     "bcryptjs": "^2.4.3",
-    "carbon-icons-svelte": "^13.9.1",
+    "carbon-icons-svelte": "^13.10.0",
     "concurrently": "^7.1.0",
     "dotenv": "^16.0.0",
     "eslint": "^10.1.0",
@@ -81,10 +81,10 @@
     "prettier-plugin-svelte": "^3.5.1",
     "rimraf": "^3.0.2",
     "sass": "^1.63.6",
-    "svelte": "^4.2.20",
+    "svelte": "^5.55.0",
     "svelte-eslint-parser": "^1.6.0",
-    "svelte-preprocess": "^5.0.4",
-    "ts-jest": "^29.1.1",
+    "svelte-preprocess": "^6.0.3",
+    "ts-jest": "^29.4.6",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",

src/components/CommentDisplay.svelte

@@ -131,15 +131,15 @@
   {:else if comment.dateDeleted}
     <header class="comment-header">
       <div class="user-avatar">
-        <div class="gray-block" />
+        <div class="gray-block"></div>
       </div>
       <div class="comment-info">
         <div class="user-name">
-          <div class="gray-block" />
-          <div class="gray-block" />
+          <div class="gray-block"></div>
+          <div class="gray-block"></div>
         </div>
         <div class="comment-date">
-          <div class="gray-block" />
+          <div class="gray-block"></div>
         </div>
       </div>
     </header>

src/components/CommentEdit.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import SkeletonCommentInput from "./low-level/SkeletonCommentInput.svelte"
   import type { CommentId } from "../lib/simple-comment-types"
-  import { StateValue } from "xstate"
+  import type { StateValue } from "xstate"
   import { commentEditMachine } from "../lib/commentEdit.xstate"
   import { onMount } from "svelte"
   import { isResponseOk } from "../frontend-utilities"
@@ -125,7 +125,7 @@
     {autofocus}
     {placeholder}
     dir="auto"
-  />
+  ></textarea>
   {#if errorText && errorText.length > 0}
     <p class="is-error">{errorText}</p>
   {/if}

src/components/CommentInput.svelte

@@ -7,7 +7,7 @@
     ServerResponse,
     User,
   } from "../lib/simple-comment-types"
-  import { StateValue } from "xstate"
+  import type { StateValue } from "xstate"
   import { commentPostMachine } from "../lib/commentPost.xstate"
   import { createEventDispatcher, onDestroy, onMount } from "svelte"
   import { dispatchableStore, loginStateStore } from "../lib/svelte-stores"
@@ -210,7 +210,7 @@
     {autofocus}
     {placeholder}
     dir="auto"
-  />
+  ></textarea>
   <Login {currentUser} />
   {#if !currentUser || (commentText && commentText.length)}
     <div class="button-row">

src/components/DiscussionDisplay.svelte

@@ -249,6 +249,6 @@
   {/if}
   {#if $state.value === "loading"}
     <SkeletonComment />
-    <div style="margin-bottom:10rem" />
+    <div style="margin-bottom:10rem"></div>
   {/if}
 </section>

src/components/Login.svelte

@@ -48,7 +48,7 @@
   import PasswordInput from "./low-level/PasswordInput.svelte"
   import PasswordTwinInput from "./low-level/PasswordTwinInput.svelte"
   import Avatar from "./low-level/Avatar.svelte"
-  import { StateValue } from "xstate"
+  import type { StateValue } from "xstate"
 
   const DISPLAY_NAME_HELPER_TEXT = "This is the name that others will see"
   const USER_EMAIL_HELPER_TEXT =

src/components/low-level/SkeletonText.svelte

@@ -29,13 +29,13 @@
 {#if paragraph}
   <div {...$$restProps}>
     {#each rows as { width }}
-      <p class="skeleton line" style:width style:height />
+      <p class="skeleton line" style:width style:height></p>
     {/each}
   </div>
 {:else if avatar}
-  <div class="skeleton avatar" />
+  <div class="skeleton avatar"></div>
 {:else}
-  <div class="skeleton line" style:width style:height />
+  <div class="skeleton line" style:width style:height></div>
 {/if}
 
 <style lang="scss">

src/simple-comment-icebreakers.ts

@@ -40,7 +40,11 @@ const fetchAndStoreQuestions = () =>
     fetchQuestions(currentTimestamp, resolve, reject)
   })
 
-const fetchQuestions = async (currentTimestamp, resolve, reject) => {
+const fetchQuestions = async (
+  currentTimestamp: string,
+  resolve: (questions: string[]) => void,
+  reject: (reason?: unknown) => void
+) => {
   try {
     const questionFile = await fetch(
       "https://raw.githubusercontent.com/rendall/icebreakers/master/QUESTIONS.md"

src/simple-comment.ts

@@ -1,4 +1,4 @@
-/// <reference types="svelte" />
+import { mount } from "svelte"
 import { getDefaultDiscussionId } from "./apiClient"
 import SimpleComment from "./components/SimpleComment.svelte"
 
@@ -57,7 +57,7 @@ window.setSimpleCommentDiscussion = (discussionId: string) =>
 
 const loadSimpleComment = (setupOptions: Options) => {
   options = { ...options, ...setupOptions }
-  simpleComment = new SimpleComment({
+  simpleComment = mount(SimpleComment, {
     target: options.target,
     props: { discussionId: options.discussionId, title: options.title },
   })