fix(v2/templates): migrate svelte templates to the Svelte 5 mount API

[haoku123]

Problem

Fixes #6001

The v2 svelte and svelte-ts templates pin svelte: ^5.55.7 (Svelte 5), but their generated main.js/main.ts still bootstrap the app with the Svelte 4 component instantiation API:

const app = new App({ target: document.getElementById('app') })

This API was removed in Svelte 5 in favor of mount(). A freshly scaffolded project (wails init -t svelte-ts) builds and runs but renders a blank page, with a runtime error in the browser console.

Solution

Migrate both templates to the Svelte 5 mount() API, matching what the v3 svelte template already does:

import { mount } from 'svelte'
const app = mount(App, { target: document.getElementById('app') })

For the TS template, target is cast to HTMLElement since getElementById returns HTMLElement | null.

Changes

• v2/pkg/templates/templates/svelte/frontend/src/main.js
• v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts
• Added changelog entry under [Unreleased] in website/src/pages/changelog.mdx

Verification

• Both templates previously used the identical new App() bootstrap; v3's svelte template already uses mount(), confirming the correct API.
• Svelte 5 removed new Component({ target }) in favor of mount() (see Svelte 5 migration guide).

Summary by CodeRabbit

• Bug Fixes

  • Fixed blank pages in newly generated Svelte and Svelte TypeScript applications.
  • Updated app startup to use Svelte 5’s supported mounting approach.

• Documentation

  • Added an unreleased changelog entry describing the template fix.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e66450ae-ac0b-45c7-bd10-35ca642ecfc6

📥 Commits

Reviewing files that changed from the base of the PR and between f38ae26 and b71ee68.

📒 Files selected for processing (3)

• v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts
• v2/pkg/templates/templates/svelte/frontend/src/main.js
• website/src/pages/changelog.mdx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

Both v2 Svelte templates now initialize applications with Svelte 5’s mount() API. The TypeScript template casts the mount target to HTMLElement. The changelog records the fix for blank generated pages.

Changes

Svelte 5 bootstrap

Layer / File(s)	Summary
Update template initialization v2/pkg/templates/templates/svelte/frontend/src/main.js, v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts, website/src/pages/changelog.mdx	Both template entry points use mount(App, ...) instead of new App(...). The TypeScript entry point casts the target to HTMLElement. The changelog documents the update.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to b71ee

The change updates the v2 Svelte templates to use the Svelte 5 mounting API, preventing blank-page runtime behavior in newly generated projects; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: leaanthony

Poem

A rabbit hops through Svelte’s new gate,
mount(App) makes the page awake.
Two templates now start bright,
No blank screen in sight,
And the changelog records the update.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the migration of the v2 Svelte templates to Svelte 5's mount API.
Description check	✅ Passed	The description explains the problem, issue, solution, affected files, and verification, but it does not complete the repository checklists or provide detailed test results.
Linked Issues check	✅ Passed	The changes update both v2 Svelte templates to use mount() and add the requested changelog entry, satisfying issue #6001.
Out of Scope Changes check	✅ Passed	All changes are directly related to issue #6001 and the stated objectives for migrating the v2 Svelte templates.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}