chore(deps): migrate to Svelte 5, Vite 8, and related ecosystem packages#484
Open
chore(deps): migrate to Svelte 5, Vite 8, and related ecosystem packages#484
Conversation
c3e390b to
13b2ccc
Compare
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
13b2ccc to
998c411
Compare
…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
This reverts commit acad3a7.
Documents the staging deployment and verification workflow for automated agents testing frontend changes against production data. Made-with: Cursor
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
Remove the canister_ids.json swap hack that pointed staging at the production backend. Staging now deploys against its own backend. Made-with: Cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Dependabot PRs #475, #480, and #482 all fail because
@sveltejs/vite-plugin-svelte@7.0.0requiressvelte@^5.46.4as a peer dependency, but the project usessvelte@4.2.12. There is no version of@sveltejs/vite-plugin-sveltethat supports both Vite 8 and Svelte 4 — the migration must be done together.This PR upgrades both
frontend/andcli-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.sveltefile rewrites are needed.Key changes
frontend/
svelte-preprocessin favor ofvitePreprocessfrom@sveltejs/vite-plugin-svelte@dfinity/candid@1.0.1via overrides (pre-existing transitive peer conflict with@dfinity/agent@1.0.1— without this, npm resolves candid@2.x which is ABI-incompatible)compatibility.componentApi: 4— the entry point andsvelte-spa-history-routerusenew Component()which is invalid in Svelte 5 without this flagcli-releases/frontend/
compatibility.componentApineeded — cli-releases components don't useexport letBoth projects: svelte-check 3→4, eslint-plugin-svelte 2.35→2.46 (adds Svelte 5 peer support)
Additional fixes discovered during staging verification
<style global>is deprecated — replaced with<style>and:global()wrappers inApp.svelteto preserve global stylesprocess.envpolyfill: Added"process.env": "({})"fallback invite.config.ts— Vite 8 no longer auto-polyfillsprocess.env, causingReferenceErroron package detail pagesMOPS_NETWORKstaging fix: ChangedPackage.svelteto setMOPS_NETWORKto"ic"for all non-local deployments — previously theic-mopsnpm package used hardcoded staging canister IDs whenDFX_NETWORK=staging, causing "Package not found" errorsfetchRootKeyguard: Tighteneddeclarations/main/index.jsanddeclarations/bench/index.jsto only callfetchRootKey()forDFX_NETWORK === "local"(was!== "ic", which unnecessarily triggered for staging)ConfigDoc.sveltecleanup: Added<thead>/<tbody>for semantic HTML, removed commented-out table rowsimport typefixes: Changed all.did.jstype imports to useimport type(required by Svelte 5's stricter TypeScript handling)Security advisories addressed
Supersedes
Test plan
npm ci+ci:postinstallresolves without ERESOLVE errors (all 23 checks green)npm run lintpassesnpm run build-frontend)npm run build-cli-releases)