chore(templates): upgrade Svelte templates to Svelte 5 + Vite 8#5385
Conversation
- Bump svelte ^4 → ^5, @sveltejs/vite-plugin-svelte ^3 → ^7, vite ^5 → ^8
across all four Svelte templates (svelte, svelte-ts, sveltekit, sveltekit-ts)
- Update @tsconfig/svelte ^5.0.2 → ^5.0.8 and svelte-check ^3 → ^4.4.8
- Rewrite App.svelte / +page.svelte to Svelte 5 runes syntax:
let x = $state('') instead of let x = '', onclick instead of on:click
- Replace deprecated new App({target}) constructor with mount() API in main.js/ts
Co-authored-by: multica-agent <github@multica.ai>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
WalkthroughAll Svelte frontend templates across four variants are upgraded to Svelte 5: dependency version bumps, app bootstrapping moves to mount(), component-local state uses Svelte $state runes, and button event bindings change from ChangesSvelte 5 Template Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
v3/internal/templates/sveltekit-ts/frontend/src/routes/+page.svelte.tmpl (1)
5-7: 💤 Low valueConsider adding TypeScript type annotations.
While the
$state()calls will work without explicit types, consider whether type annotations should be added for consistency with thesvelte-tstemplate (which useslet name: string = $state('')). However, if type inference works correctly in SvelteKit context, the current approach is acceptable.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@v3/internal/templates/sveltekit-ts/frontend/src/routes/`+page.svelte.tmpl around lines 5 - 7, Add explicit TypeScript type annotations to the reactive state variables created with $state to match the svelte-ts template: annotate let name, let result, and let time (e.g. let name: string = $state(''), let result: string = $state('Please enter your name below 👇'), let time: string = $state('Listening for Time event...')) so types are clear and consistent with the svelte-ts pattern while leaving the $state initializer values unchanged.v3/internal/templates/svelte-ts/frontend/src/main.ts (1)
4-4: ⚡ Quick winNon-null assertion could cause runtime errors.
The non-null assertion
!ondocument.getElementById('app')assumes the element always exists. While the template'sindex.htmlshould include this element, if it's missing or has a different ID, this will cause a runtime error rather than a helpful error message.Consider a safer approach:
const target = document.getElementById('app') if (!target) throw new Error('Failed to find mount target `#app`') mount(App, { target })This provides a clearer error message and makes the assumption explicit.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@v3/internal/templates/svelte-ts/frontend/src/main.ts` at line 4, Replace the unsafe non-null assertion on document.getElementById('app') used when calling mount(App, { target: ... }) with an explicit null check: call document.getElementById('app') into a const (e.g., target), throw a clear Error like 'Failed to find mount target `#app`' if target is null, and then pass that target to mount(App, { target }) so mount only runs with a validated element.v3/internal/templates/svelte/frontend/src/main.js (1)
1-4: 💤 Low valueVerify null safety for mount target.
The code correctly uses the Svelte 5
mount(App, { target })API. However,document.getElementById('app')returnsElement | null, and sincetargetis a required parameter that must be aDocument,Element, orShadowRoot, passingnullwould cause a runtime error if the element doesn't exist.Consider adding a null check:
Suggested defensive check
const target = document.getElementById('app') if (!target) throw new Error('Mount target not found') mount(App, { target })🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@v3/internal/templates/svelte/frontend/src/main.js` around lines 1 - 4, The mount call may receive null because document.getElementById('app') can be null; modify main.js to resolve the target first (const target = document.getElementById('app')) and guard it before calling mount(App, { target })—if target is null, throw a clear Error or provide a sensible fallback—so that mount(App, ...) always receives a non-null Element/Document/ShadowRoot.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@v3/internal/templates/sveltekit-ts/frontend/package.json`:
- Around line 18-24: The package version ranges for vite and
`@sveltejs/vite-plugin-svelte` are too broad for the specified `@sveltejs/kit`
range; update package.json to either (A) bump `@sveltejs/kit` to a minimum of
2.53.0 so it is compatible with vite@^8.0.0 and
`@sveltejs/vite-plugin-svelte`@^7.0.0, or (B) constrain vite to a Kit-compatible
range (e.g., "vite":"^5.0.3") and `@sveltejs/vite-plugin-svelte` to a
Kit-compatible range (e.g., "@sveltejs/vite-plugin-svelte":"^3.0.0") while
keeping `@sveltejs/kit`@"^2.0.0"; adjust only the version strings for "vite",
"@sveltejs/vite-plugin-svelte", or "@sveltejs/kit" accordingly.
---
Nitpick comments:
In `@v3/internal/templates/svelte-ts/frontend/src/main.ts`:
- Line 4: Replace the unsafe non-null assertion on
document.getElementById('app') used when calling mount(App, { target: ... })
with an explicit null check: call document.getElementById('app') into a const
(e.g., target), throw a clear Error like 'Failed to find mount target `#app`' if
target is null, and then pass that target to mount(App, { target }) so mount
only runs with a validated element.
In `@v3/internal/templates/svelte/frontend/src/main.js`:
- Around line 1-4: The mount call may receive null because
document.getElementById('app') can be null; modify main.js to resolve the target
first (const target = document.getElementById('app')) and guard it before
calling mount(App, { target })—if target is null, throw a clear Error or provide
a sensible fallback—so that mount(App, ...) always receives a non-null
Element/Document/ShadowRoot.
In `@v3/internal/templates/sveltekit-ts/frontend/src/routes/`+page.svelte.tmpl:
- Around line 5-7: Add explicit TypeScript type annotations to the reactive
state variables created with $state to match the svelte-ts template: annotate
let name, let result, and let time (e.g. let name: string = $state(''), let
result: string = $state('Please enter your name below 👇'), let time: string =
$state('Listening for Time event...')) so types are clear and consistent with
the svelte-ts pattern while leaving the $state initializer values unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 493b16f6-4d3f-401d-b87f-3a74a0fb740f
📒 Files selected for processing (10)
v3/internal/templates/svelte-ts/frontend/package.jsonv3/internal/templates/svelte-ts/frontend/src/App.svelte.tmplv3/internal/templates/svelte-ts/frontend/src/main.tsv3/internal/templates/svelte/frontend/package.jsonv3/internal/templates/svelte/frontend/src/App.svelte.tmplv3/internal/templates/svelte/frontend/src/main.jsv3/internal/templates/sveltekit-ts/frontend/package.jsonv3/internal/templates/sveltekit-ts/frontend/src/routes/+page.svelte.tmplv3/internal/templates/sveltekit/frontend/package.jsonv3/internal/templates/sveltekit/frontend/src/routes/+page.svelte.tmpl
There was a problem hiding this comment.
Pull request overview
Upgrades the v3 Svelte and SvelteKit project templates to Svelte 5 + Vite 8, updating template component code to the Svelte 5 idioms described in the PR.
Changes:
- Bumped Svelte/SvelteKit template dependencies to Svelte
^5,@sveltejs/vite-plugin-svelte^7, and Vite^8(plus related tool bumps where present). - Updated template components to use Svelte 5 runes (
$state) and replacedon:clickwithonclick. - Updated non-Kit Svelte entrypoints from
new App(...)tomount(App, ...).
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| v3/internal/templates/sveltekit/frontend/src/routes/+page.svelte.tmpl | Uses $state and onclick in the SvelteKit JS template page component. |
| v3/internal/templates/sveltekit/frontend/package.json | Updates SvelteKit JS template dependency versions (Svelte 5 / Vite 8). |
| v3/internal/templates/sveltekit-ts/frontend/src/routes/+page.svelte.tmpl | Uses $state and onclick in the SvelteKit TS template page component. |
| v3/internal/templates/sveltekit-ts/frontend/package.json | Updates SvelteKit TS template dependency versions (incl. svelte-check). |
| v3/internal/templates/svelte/frontend/src/main.js | Switches app bootstrap to Svelte 5 mount(...). |
| v3/internal/templates/svelte/frontend/src/App.svelte.tmpl | Uses $state and onclick in the Svelte (non-Kit) template component. |
| v3/internal/templates/svelte/frontend/package.json | Updates Svelte (non-Kit) template dependency versions. |
| v3/internal/templates/svelte-ts/frontend/src/main.ts | Switches app bootstrap to Svelte 5 mount(...) (TS entrypoint). |
| v3/internal/templates/svelte-ts/frontend/src/App.svelte.tmpl | Uses $state and onclick in the Svelte TS template component. |
| v3/internal/templates/svelte-ts/frontend/package.json | Updates Svelte TS template dependency versions (incl. @tsconfig/svelte + svelte-check). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "@sveltejs/adapter-static": "^3.0.10", | ||
| "@sveltejs/kit": "^2.0.0", | ||
| "@sveltejs/vite-plugin-svelte": "^3.0.0", | ||
| "svelte": "^4.2.7", | ||
| "vite": "^5.0.3" | ||
| "@sveltejs/vite-plugin-svelte": "^7.0.0", | ||
| "svelte": "^5.0.0", | ||
| "vite": "^8.0.0" |
|
Test connection Taliesin is an AI agent. CC @leaanthony |
Svelte 5 Template Smoke Test — PASS ✅Tested BuildNo errors. No Svelte deprecation warnings. Screenshot 1 — Initial Render ✅
Screenshot 2 — Greet Flow ✅
Bug:
|
Smoke test finding — svelte peer dep version too lowSmoke-tested this branch (commit
Suggested fix (applies to both - "svelte": "^5.0.0",
+ "svelte": "^5.46.4",Files:
CC @leaanthony Taliesin is an AI agent. CC @leaanthony |
…te-ts templates @sveltejs/vite-plugin-svelte@^7.0.0 resolves to 7.x which requires svelte@^5.46.4 as a peer. The template declared svelte@^5.0.0 causing npm ERESOLVE on a fresh `npm install` without --legacy-peer-deps. Co-authored-by: multica-agent <github@multica.ai>
|
Fix pushed: bumped Why: This is the only change needed beyond the original Svelte 5 upgrade — the rest of the template (CSS, Svelte 5 runes, CC @leaanthony |
- Bump @sveltejs/kit from ^2.0.0 to ^2.53.0 in sveltekit and sveltekit-ts so vite@^8.0.0 and @sveltejs/vite-plugin-svelte@^7.0.0 are in range (kit@^2.53.0 is the minimum that supports these deps) - Add missing svelte-check devDependency to sveltekit (non-TS) template - Fix check/check:watch scripts to use tsconfig.json, not jsconfig.json (the template ships a tsconfig.json generated by svelte-kit sync) - Bump svelte to ^5.46.4 in both sveltekit templates (peer dep alignment) Co-authored-by: multica-agent <github@multica.ai>
|
Addressing review comments (commit d6f6bb6): CodeRabbit — Copilot —
Also bumped Separately, Vite 8 is now being rolled out to all remaining templates (base, ios, vanilla, react, vue, etc.) in PR #5386. CC @leaanthony |
Vite 8.0.0-8.0.4 contain a path traversal vulnerability in optimized dep .map handling (published 2026-04-06, MODERATE severity). Co-authored-by: multica-agent <github@multica.ai>
* chore(templates): upgrade all remaining templates to Vite 8 Bumps vite from ^5.x to ^8.0.0 across all non-Svelte templates. Also bumps framework-specific plugins that require a major version update to remain compatible with Vite 8: | Plugin | Old | New | |--------|-----|-----| | @vitejs/plugin-react | ^4.2.1 | ^6.0.0 | | @vitejs/plugin-react-swc | ^3.5.0 | ^4.0.0 | | @vitejs/plugin-vue | ^4.0.0 | ^6.0.0 | Plugins that already support Vite 8 without a major bump (vite-plugin-solid, @preact/preset-vite) are left at their current ranges. Svelte/SvelteKit templates are excluded — covered by PR #5385. Co-authored-by: multica-agent <github@multica.ai> * fix(templates): bump vite minimum to ^8.0.5 to fix path traversal CVE Vite 8.0.0-8.0.4 contain a path traversal vulnerability in optimized dep .map handling (published 2026-04-06, MODERATE severity). Pinning to ^8.0.5 ensures newly generated projects cannot install a vulnerable version. Co-authored-by: multica-agent <github@multica.ai> --------- Co-authored-by: taliesin <bot@taliesin.ai> Co-authored-by: multica-agent <github@multica.ai>
Summary
Upgrades all four Svelte templates to Svelte 5 (stable since Oct 2024) and Vite 8.
Also bumps
@tsconfig/svelte5.0.2 → 5.0.8 andsvelte-check^3 → ^4.4.8.Component changes
Svelte 5 deprecates/removes the
on:event directive and thenew App()constructor. Updated templates to idiomatic Svelte 5:let x = ''→let x = $state('')(runes)on:click={fn}→onclick={fn}new App({ target })→mount(App, { target })inmain.js/main.tsNotes
@sveltejs/kitstays at^2.0.0— already supports Svelte 5@sveltejs/adapter-staticminor bump ^3.0.5 → ^3.0.10bind:valueis unchanged — still valid in Svelte 5server.host/port— that's handled by the in-flight PR fix(v3): configure Vite port via env var so pnpm (and other package managers) work in dev mode #5365Test plan
wails3 init -n test -t svelte && cd test && wails3 dev— window loadssvelte-ts,sveltekit,sveltekit-tsSummary by CodeRabbit
Chores
Refactor