Skip to content

chore(deps): migrate to Svelte 5, Vite 8, and related ecosystem packages#484

Open
Kamirus wants to merge 13 commits intomainfrom
chore/svelte5-vite8-migration
Open

chore(deps): migrate to Svelte 5, Vite 8, and related ecosystem packages#484
Kamirus wants to merge 13 commits intomainfrom
chore/svelte5-vite8-migration

Conversation

@Kamirus
Copy link
Copy Markdown
Collaborator

@Kamirus Kamirus commented Apr 10, 2026

Summary

Dependabot PRs #475, #480, and #482 all fail because @sveltejs/vite-plugin-svelte@7.0.0 requires svelte@^5.46.4 as a peer dependency, but the project uses svelte@4.2.12. There is no version of @sveltejs/vite-plugin-svelte that supports both Vite 8 and Svelte 4 — the migration must be done together.

This PR upgrades both frontend/ and cli-releases/frontend/ to Svelte 5 + Vite 8 in one shot. Svelte 5's compatibility mode preserves full Svelte 4 component syntax (export let, on:click, reactive $: blocks, etc.), so no .svelte file rewrites are needed.

Key changes

frontend/

  • svelte 4.2.12 → 5.55.2, vite 5.2.6 → 8.0.8, @sveltejs/vite-plugin-svelte 3.0.2 → 7.0.0
  • svelte-chartjs 3.1.5 → 4.0.1, vite-plugin-static-copy 1.0.2 → 4.0.1
  • Drop svelte-preprocess in favor of vitePreprocess from @sveltejs/vite-plugin-svelte
  • Pin @dfinity/candid@1.0.1 via overrides (pre-existing transitive peer conflict with @dfinity/agent@1.0.1 — without this, npm resolves candid@2.x which is ABI-incompatible)
  • Enable compatibility.componentApi: 4 — the entry point and svelte-spa-history-router use new Component() which is invalid in Svelte 5 without this flag

cli-releases/frontend/

  • svelte 4.2.12 → 5.55.2, vite 5.4.21 → 8.0.8, @sveltejs/vite-plugin-svelte 3.0.2 → 7.0.0
  • @sveltejs/kit 2.55.0 → 2.57.1 (adds explicit Vite 8 support)
  • No compatibility.componentApi needed — cli-releases components don't use export let

Both projects: svelte-check 3→4, eslint-plugin-svelte 2.35→2.46 (adds Svelte 5 peer support)

Additional fixes discovered during staging verification

  • Svelte 5 CSS scoping: <style global> is deprecated — replaced with <style> and :global() wrappers in App.svelte to preserve global styles
  • Vite 8 process.env polyfill: Added "process.env": "({})" fallback in vite.config.ts — Vite 8 no longer auto-polyfills process.env, causing ReferenceError on package detail pages
  • MOPS_NETWORK staging fix: Changed Package.svelte to set MOPS_NETWORK to "ic" for all non-local deployments — previously the ic-mops npm package used hardcoded staging canister IDs when DFX_NETWORK=staging, causing "Package not found" errors
  • fetchRootKey guard: Tightened declarations/main/index.js and declarations/bench/index.js to only call fetchRootKey() for DFX_NETWORK === "local" (was !== "ic", which unnecessarily triggered for staging)
  • ConfigDoc.svelte cleanup: Added <thead>/<tbody> for semantic HTML, removed commented-out table rows
  • import type fixes: Changed all .did.js type imports to use import type (required by Svelte 5's stricter TypeScript handling)

Security advisories addressed

  • vite <=6.4.1 (esbuild vulnerability)
  • vite-plugin-static-copy 0.4.3–2.3.1 (GHSA-pp7p-q8fx-2968, path traversal)

Supersedes

Test plan

  • CI passes: npm ci + ci:postinstall resolves without ERESOLVE errors (all 23 checks green)
  • npm run lint passes
  • Frontend builds successfully (npm run build-frontend)
  • CLI releases frontend builds (npm run build-cli-releases)
  • CLI tests pass (11 suites, 69 tests, 52 snapshots)
  • Bundle smoke test passes (verified in CI)
  • Frontend dev server loads with production canister — no runtime errors
  • CLI releases frontend serves pre-built assets correctly
  • Staging deploy verified: homepage (272 packages), package detail pages (/core, /vector), correct fonts/styles, no console errors

@Kamirus Kamirus force-pushed the chore/svelte5-vite8-migration branch 2 times, most recently from c3e390b to 13b2ccc Compare April 10, 2026 09:07
Svelte 5's compatibility mode preserves full Svelte 4 component syntax,
so no .svelte file rewrites are needed. This resolves the peer-dependency
conflicts that blocked Dependabot PRs #475, #480, and #482.

frontend:
- svelte 4.2.12 → 5.55.2
- vite 5.2.6 → 8.0.8
- @sveltejs/vite-plugin-svelte 3.0.2 → 7.0.0
- svelte-chartjs 3.1.5 → 4.0.1
- vite-plugin-static-copy 1.0.2 → 4.0.1
- svelte-check 3.6.8 → 4.4.6
- eslint-plugin-svelte 2.35.1 → 2.46.1
- @types/node 20.11.30 → 22.15.3
- Drop svelte-preprocess in favor of vitePreprocess
- Pin @dfinity/candid@1.0.1 via overrides to preserve compat with @dfinity/agent@1.0.1

cli-releases/frontend:
- svelte 4.2.12 → 5.55.2
- vite 5.4.21 → 8.0.8
- @sveltejs/vite-plugin-svelte 3.0.2 → 7.0.0
- @sveltejs/kit 2.55.0 → 2.57.1
- svelte-check 3.6.8 → 4.4.6
- eslint-plugin-svelte 2.35.1 → 2.46.1

root:
- eslint-plugin-svelte 2.35.1 → 2.46.1

Made-with: Cursor
@Kamirus Kamirus force-pushed the chore/svelte5-vite8-migration branch from 13b2ccc to 998c411 Compare April 10, 2026 09:21
Kamirus and others added 11 commits April 10, 2026 11:46
…instantiation

The frontend entry point and svelte-spa-history-router use `new Component()`
which is invalid in Svelte 5. Setting componentApi: 4 restores backward
compatibility without requiring rewrites.

Made-with: Cursor
Bump dfx version pin to fix ColorOutOfRange panic on deploy and
avoid confusing dfxvm version resolution for automated agents.

Made-with: Cursor
Documents the staging deployment and verification workflow for
automated agents testing frontend changes against production data.

Made-with: Cursor
…nd add process.env polyfill

Svelte 5 no longer supports `<style global>` — it silently ignores the
attribute and strips all unscoped selectors as "unused". This caused the
entire app to lose base styles (fonts, button styles, link colors, input
styling).

Also adds a `process.env` catch-all define in vite.config.ts to prevent
`ReferenceError: process is not defined` on pages that import modules
referencing undeclared process.env variables (e.g. bench declarations).

Made-with: Cursor
MOPS_NETWORK was set to DFX_NETWORK verbatim, causing the ic-mops
package to query the staging backend (which lacks most packages) when
deployed to staging. Now only "local" is forwarded; all other
environments default to "ic" (production).

Also tighten fetchRootKey guard to local-only — staging deployments
talk to the IC mainnet and don't need it.

Made-with: Cursor
Phase 3 (staging deploy) is now explicitly a human step due to dfx
TTY bugs in Cursor's shell. Phase 4 documents both agent (browser MCP)
and human verification paths.

Made-with: Cursor
npm derived the name from the worktree directory instead of the
project root. Revert to "mops".

Made-with: Cursor
- Align storage/index.js fetchRootKey guard with main/bench (DFX_NETWORK === "local")
- Add compatibility.componentApi: 4 to cli-releases svelte config for consistency
- Document process.env catch-all ordering dependency in vite.config.ts

Made-with: Cursor
@Kamirus Kamirus marked this pull request as ready for review April 10, 2026 14:14
@Kamirus Kamirus requested a review from a team as a code owner April 10, 2026 14:14
Remove the canister_ids.json swap hack that pointed staging at the
production backend. Staging now deploys against its own backend.

Made-with: Cursor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant