Fix: Migrate all templates to current versions - Issue #2888 #4562
Conversation
dosubot
bot
added
the
size:L
WalkthroughTemplate frontends were modernized across frameworks: dependencies/tooling upgraded (Vite 7, TS 5), TypeScript configs restructured to bundler mode with project references, some Vite configs removed or reformatted, CSS entry imports renamed to index/app, Svelte templates migrated to new mount and $state APIs, and new ESLint configs/docs added for React templates. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant B as Browser
participant V as Vite Dev Server
participant SA as Svelte App
U->>B: Load index.html
B->>V: Request assets (JS/CSS)
V-->>B: Serve bundled modules
Note over SA,B: New mount() API used
B->>SA: mount(App, { target: #app })
SA-->>B: Initializes $state, binds events
U->>SA: Click "Greet"
SA->>SA: Greet(name).then(set resultText)
SA-->>U: UI updates with result
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate 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. Comment |
|
Related Documentation Checked 1 published document(s). No updates required. How did I do? Any feedback? |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
🧹 Nitpick comments (45)
v2/pkg/templates/templates/vanilla/frontend/package.json (2)
5-5: ESM switch looks good; declare Node engine for Vite 7.Vite 7 requires a modern Node runtime. Add an engines field to prevent installs on unsupported Node versions.
"version": "0.0.0", "type": "module", + "engines": { + "node": ">=18.0.0" + },
12-12: Upgrade to Vite 7 acknowledged; consider pinning minor to reduce template drift.Caret can pull breaking minors in practice for fresh scaffolds. Consider tilde.
- "vite": "^7.1.2" + "vite": "~7.1.2"v2/pkg/templates/templates/vanilla-ts/frontend/package.json (2)
5-5: ESM is fine; mirror engines across TS template too."version": "0.0.0", "type": "module", + "engines": { + "node": ">=18.0.0" + },
12-13: TS/Vite versions OK; add a dedicated typecheck script and consider tilde for Vite."scripts": { "dev": "vite", "build": "tsc && vite build", + "typecheck": "tsc --noEmit", "preview": "vite preview" }, "devDependencies": { "typescript": "~5.8.3", - "vite": "^7.1.2" + "vite": "~7.1.2" }v2/pkg/templates/templates/vanilla-ts/frontend/tsconfig.json (1)
11-13: Avoid encouraging .ts extension imports.allowImportingTsExtensions isn’t typically needed in Vite apps and can promote non-idiomatic imports.
- "allowImportingTsExtensions": true, + // Import paths should omit .ts; keep this disabled for consistency. + "allowImportingTsExtensions": false,v2/pkg/templates/templates/preact/frontend/package.json (1)
1-18: Add Node engines per Vite 7 requirements; optionally pin packageManager
Vite 7.1.2 requires Node ^20.19.0 or ≥22.12.0—updateengines.node. You can also add apackageManagerfield for reproducible installs.{ "name": "frontend", "private": true, "version": "0.0.0", "type": "module", - "engines": { - "node": ">=18.0.0" - }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "packageManager": "npm@9", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },v2/pkg/templates/templates/svelte/frontend/package.json (1)
1-16: Add engines for Node (align with Vite’s requirement) & consider pinning packageManager
Align the Node engine range with Vite 7.1.2’s minimum (>=20.19.0); optionally add"packageManager"to lock the package manager version.{ "name": "frontend", "private": true, "version": "0.0.0", "type": "module", + "engines": { + "node": ">=20.19.0" + }, + // e.g. "packageManager": "[email protected]" "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },v2/pkg/templates/templates/react/frontend/src/main.jsx (1)
6-10: Add guard for missing#rootelement
Prevent passingnullintocreateRootby throwing if the container isn’t found.const container = document.getElementById('root') +if (!container) throw new Error('Root element "#root" not found') const root = createRoot(container)v2/pkg/templates/templates/lit/frontend/src/my-element.js (1)
84-89: Handle greet() errors to improve resiliency.
Add minimal error handling to avoid silent failures if the backend rejects.- greet() { - let thisName = this.shadowRoot.getElementById('name').value - Greet(thisName).then(result => { - this.resultText = result - }); - } + async greet() { + const nameEl = this.shadowRoot?.getElementById('name') + const thisName = nameEl?.value ?? '' + try { + this.resultText = await Greet(thisName) + } catch (err) { + console.error(err) + this.resultText = 'An error occurred. Please try again.' + } + }v2/pkg/templates/templates/vue-ts/frontend/src/App.vue (1)
2-2: LGTM; tiny formatting nitMove </script> to its own line for readability.
-<script lang="ts" setup> -import HelloWorld from './components/HelloWorld.vue';</script> +<script lang="ts" setup> +import HelloWorld from './components/HelloWorld.vue'; +</script>v2/pkg/templates/templates/vue/frontend/README.md (1)
3-5: Update docs link and casingUse the current Vue docs URL and lowercase “support”.
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. +This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs—see the [script setup docs](https://vuejs.org/api/sfc-script-setup.html) to learn more. -Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support). +Learn more about IDE support for Vue in the [Vue Docs Scaling Up guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).v2/pkg/templates/templates/vue/frontend/package.json (1)
12-17: Deps bump looks good; add Node engines for Vite 7Specify Node engines to prevent install/build surprises.
{ "name": "frontend", "private": true, "version": "0.0.0", "type": "module", + "engines": { + "node": ">=18.0.0" + }, "scripts": {v2/pkg/templates/templates/svelte-ts/frontend/src/App.svelte (2)
5-6: Prefer inference or generic with $state for clearer TS.Either rely on inference or use the generic form.
- let resultText: string = $state("Please enter your name below 👇") - let name: string = $state("") + let resultText = $state("Please enter your name below 👇") + let name = $state<string>("")
3-3: Extensionless import improves TS resolution across JS/TS emit.Avoid hardcoding .js so TS can resolve .ts/.d.ts correctly.
- import {Greet} from '../wailsjs/go/main/App.js' + import { Greet } from '../wailsjs/go/main/App'v2/pkg/templates/templates/vue/frontend/src/App.vue (1)
2-2: Move closing</script>to its own line for clarity.Improves readability and avoids style/lint surprises.
-import HelloWorld from './components/HelloWorld.vue';</script> +import HelloWorld from './components/HelloWorld.vue'; +</script>v2/pkg/templates/templates/vue-ts/frontend/tsconfig.app.json (2)
4-4: Move tsBuildInfoFile out of node_modules for portability.Writing build info into node_modules can be blocked (PNPM/CIs) and is routinely wiped. Prefer a project-local cache directory.
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "tsBuildInfoFile": "./.tsbuild/app.tsbuildinfo",Optional: add ".tsbuild/" to the template’s .gitignore.
6-12: Guard against false-positive TS errors from side‑effect CSS imports.
noUncheckedSideEffectImportsmay flagimport './app.css'(used across templates). Also ensure Vite ambient types are loaded."compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "tsBuildInfoFile": "./.tsbuild/app.tsbuildinfo", + "types": ["vite/client"], @@ - "noUncheckedSideEffectImports": true + // Consider dropping this to avoid noise on CSS/asset side-effect imports + // "noUncheckedSideEffectImports": true },Action: run
tsc -bin the template and confirm there are no errors on CSS imports. If you want to keep the flag, we can wire declarations to satisfy side-effect imports instead.v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts (1)
5-7: Fail fast with a descriptive error if the mount element is missing.-const app = mount(App, { - target: document.getElementById('app')!, -}) +const target = document.getElementById('app') +if (!target) throw new Error('Missing #app mount element') +const app = mount(App, { target })v2/pkg/templates/templates/preact-ts/frontend/src/app.tsx (1)
9-14: Type the change handler and handle backend errors from Greet().Improves DX and avoids unhandled rejections.
- const updateName = (e: any) => setName(e.target.value); + const updateName = (e: JSX.TargetedEvent<HTMLInputElement, Event>) => + setName(e.currentTarget.value); @@ - function greet() { - Greet(name).then(updateResultText); - } + async function greet() { + try { + updateResultText(await Greet(name)); + } catch (err) { + console.error(err); + updateResultText('An error occurred'); + } + }Add import to support the typed event:
// at top of file import type { JSX } from 'preact'v2/pkg/templates/templates/svelte/frontend/src/main.js (1)
5-7: Null-guard the mount target for clearer runtime errors.-const app = mount(App, { - target: document.getElementById('app'), -}) +const target = document.getElementById('app') +if (!target) throw new Error('Missing #app mount element') +const app = mount(App, { target })v2/pkg/templates/templates/svelte/frontend/svelte.config.js (2)
3-3: Fix JSDoc type: use Svelte’s Config, not the plugin’s type.The exported object is a Svelte config. Point the type to 'svelte' for proper editor/TS inference.
-/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */ +/** @type {import('svelte').Config} */
5-6: Update docs link to the current Svelte 5 docs for preprocess.Minor DX polish; please verify the exact anchor before applying.
-// Consult https://svelte.dev/docs#compile-time-svelte-preprocess +// Consult https://svelte.dev/docs/svelte-compiler#preprocessv2/pkg/templates/templates/lit-ts/frontend/package.json (1)
7-10: Add a dedicated typecheck script for CI and dev flows.Keeps “vite build” clean and gives a fast “just types” check.
"scripts": { "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview" + "build": "tsc && vite build", + "typecheck": "tsc --noEmit", + "preview": "vite preview" },v2/pkg/templates/templates/svelte-ts/frontend/tsconfig.node.json (1)
16-22: Watch for side-effect imports in vite.config.ts with noUncheckedSideEffectImports.If you rely on imports like 'dotenv/config', this setting will flag them. Prefer Vite’s loadEnv or explicit configuration.
v2/pkg/templates/templates/svelte-ts/frontend/tsconfig.app.json (3)
1-20: Adopt bundler-mode options for consistency and correct ESM resolution.Add bundler flags (as used elsewhere in this PR) to avoid resolution quirks and align with Vite defaults.
"compilerOptions": { "target": "ES2022", "useDefineForClassFields": true, "module": "ESNext", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "allowImportingTsExtensions": true, "resolveJsonModule": true, @@ - "moduleDetection": "force" + "moduleDetection": "force", + "noEmit": true },
3-18: Optional: enable incremental info to speed up TS re-checks."compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2022", @@ },
14-15: ConfirmcheckJs: trueis intended.This increases noise by typechecking JS; many templates default it off.
v2/pkg/templates/templates/svelte-ts/frontend/README.md (1)
11-11: Minor copy edits for clarity and consistency.Hyphenate the compound adjective and capitalize IntelliSense; tighten phrasing.
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out-of-the-box support for TypeScript, SCSS, and Less, and easily added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. +This template contains as little as possible to get started with Vite + TypeScript + Svelte, while considering developer experience regarding HMR and IntelliSense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners.Also applies to: 20-20
v2/pkg/templates/templates/react-ts/frontend/package.json (1)
8-27: Optional: declare Node engine and add a typecheck script.Helps avoid installs on unsupported Node versions and separates type checking from builds.
"scripts": { "dev": "vite", - "build": "tsc -b && vite build", - "lint": "eslint .", + "build": "tsc -b && vite build", + "lint": "eslint .", + "typecheck": "tsc -b --pretty false", "preview": "vite preview" }, + "engines": { + "node": ">=18.0.0" + },v2/pkg/templates/templates/react-ts/frontend/eslint.config.js (1)
9-9: Ignore generated Wails bindings to keep lint runs clean and fast.Wails generates a wailsjs folder; excluding it prevents noisy lint errors on generated code.
- globalIgnores(['dist']), + globalIgnores(['dist', 'wailsjs']),v2/pkg/templates/templates/preact-ts/frontend/tsconfig.node.json (1)
2-23: Add Node types for Vite config IntelliSense.Including Node types improves editor hints for vite.config.ts without impacting bundler mode.
"compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", "target": "ES2023", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, + "types": ["node"],v2/pkg/templates/templates/lit-ts/frontend/tsconfig.json (1)
25-25: Exclude build output from the program.Exclude node_modules and dist to speed up tooling and reduce noise.
Apply this diff:
- "include": ["src"] + "include": ["src"], + "exclude": ["dist", "node_modules"]v2/pkg/templates/templates/svelte-ts/frontend/package.json (1)
10-10: Prefer project build mode for type-checks.If tsconfig.json has references (app + node), "tsc -b" is more robust and incremental than pointing at node directly.
Apply this diff:
- "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json" + "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -b --pretty --noEmit"v2/pkg/templates/templates/react/frontend/eslint.config.js (2)
16-24: Remove redundant parserOptions; rely on flat-config languageOptions.In flat config, languageOptions supersede parserOptions; keeping both is confusing.
Apply this diff:
languageOptions: { - ecmaVersion: 2020, + ecmaVersion: 'latest', globals: globals.browser, - parserOptions: { - ecmaVersion: 'latest', - ecmaFeatures: { jsx: true }, - sourceType: 'module', - }, + parserOptions: { ecmaFeatures: { jsx: true } }, },
8-9: Ignore generated Wails bindings.The Wails-generated frontend/wailsjs directory is noisy for ESLint.
Apply this diff:
- globalIgnores(['dist']), + globalIgnores(['dist', 'wailsjs']),v2/pkg/templates/templates/svelte/frontend/README.md (3)
11-11: Fix hyphenation: “out of the box” → “out-of-the-box”.Minor readability improvement.
Apply this diff:
-...with out of the box support for TypeScript... +...with out-of-the-box support for TypeScript...
20-21: Tighten wording.Shorter phrasing.
Apply this diff:
-...while taking into account the developer experience with regards to HMR and intellisense. +...while considering developer experience for HMR and IntelliSense.
7-7: Typo: missing “that”.Apply this diff:
-...a framework tha... +...a framework that...v2/pkg/templates/templates/vue-ts/frontend/package.json (1)
6-10: Add an explicit type-check script.Helpful for CI without triggering a build.
Apply this diff:
"scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", - "preview": "vite preview" + "preview": "vite preview", + "type-check": "vue-tsc -b --pretty --noEmit" },v2/pkg/templates/templates/lit/frontend/package.json (1)
8-9: Vite/Lit upgrades look good; consider adding Node engine constraints.Nice alignment with Vite 7 and Lit 3. To reduce “works on my machine” issues across platforms, add an engines stanza matching Vite 7’s Node requirements.
"dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "lit": "^3.3.1" }, "devDependencies": { "vite": "^7.1.2" -} +}, +"engines": { + "node": ">=20.19.0 || >=22.12.0" +}Also applies to: 12-12, 15-15, 17-17
v2/pkg/templates/templates/react/frontend/README.md (1)
1-12: Add quickstart and Node/Vite version notes to match the template.Since package.json adds a lint script and targets Vite 7, a brief section with:
- Node requirement (e.g., Node 20.19+ or 22.12+),
- Commands: npm i, npm run dev, npm run build, npm run preview, npm run lint,
will save users time.v2/pkg/templates/templates/preact-ts/frontend/tsconfig.app.json (2)
9-12: TS path aliases: prefer module IDs over node_modules paths.Using explicit ./node_modules paths can be brittle. Map to package IDs; TS will resolve them, and it reads clearer.
"paths": { - "react": ["./node_modules/preact/compat/"], - "react-dom": ["./node_modules/preact/compat/"] + "react": ["preact/compat"], + "react-dom": ["preact/compat"] },
3-3: Consider moving tsbuildinfo cache outside node_modules.Some CI/package managers treat node_modules as ephemeral/readonly. A safer default is a project-local cache dir.
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "tsBuildInfoFile": "./.cache/ts/tsconfig.app.tsbuildinfo",v2/pkg/templates/templates/react/frontend/package.json (2)
17-19: Drop @types packages in the JS template (unless using type-aware JS).For a plain JS React template, @types/react and @types/react-dom add weight without benefit. If you aren’t enabling checkJs or type-aware ESLint, remove them.
"devDependencies": { "@eslint/js": "^9.33.0", - "@types/react": "^19.1.10", - "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", "eslint": "^9.33.0",If you intend to use JSDoc types or type-aware linting, keep them and mention it in the README.
7-11: Document the new “lint” script in the README.Add a short note so users discover npm run lint alongside dev/build/preview.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (61)
v2/pkg/templates/templates/lit-ts/frontend/package.json(1 hunks)v2/pkg/templates/templates/lit-ts/frontend/src/my-element.ts(2 hunks)v2/pkg/templates/templates/lit-ts/frontend/tsconfig.json(1 hunks)v2/pkg/templates/templates/lit-ts/frontend/tsconfig.node.json(0 hunks)v2/pkg/templates/templates/lit-ts/frontend/vite.config.ts(0 hunks)v2/pkg/templates/templates/lit/frontend/package.json(1 hunks)v2/pkg/templates/templates/lit/frontend/src/my-element.js(1 hunks)v2/pkg/templates/templates/lit/frontend/vite.config.js(0 hunks)v2/pkg/templates/templates/preact-ts/frontend/package.json(1 hunks)v2/pkg/templates/templates/preact-ts/frontend/src/app.tsx(1 hunks)v2/pkg/templates/templates/preact-ts/frontend/src/main.tsx(1 hunks)v2/pkg/templates/templates/preact-ts/frontend/tsconfig.app.json(1 hunks)v2/pkg/templates/templates/preact-ts/frontend/tsconfig.json(1 hunks)v2/pkg/templates/templates/preact-ts/frontend/tsconfig.node.json(1 hunks)v2/pkg/templates/templates/preact-ts/frontend/vite.config.ts(1 hunks)v2/pkg/templates/templates/preact/frontend/package.json(1 hunks)v2/pkg/templates/templates/preact/frontend/src/main.jsx(1 hunks)v2/pkg/templates/templates/preact/frontend/vite.config.js(1 hunks)v2/pkg/templates/templates/react-ts/frontend/README.md(1 hunks)v2/pkg/templates/templates/react-ts/frontend/eslint.config.js(1 hunks)v2/pkg/templates/templates/react-ts/frontend/package.json(1 hunks)v2/pkg/templates/templates/react-ts/frontend/src/main.tsx(1 hunks)v2/pkg/templates/templates/react-ts/frontend/tsconfig.app.json(1 hunks)v2/pkg/templates/templates/react-ts/frontend/tsconfig.json(1 hunks)v2/pkg/templates/templates/react-ts/frontend/tsconfig.node.json(1 hunks)v2/pkg/templates/templates/react-ts/frontend/vite.config.ts(1 hunks)v2/pkg/templates/templates/react/frontend/README.md(1 hunks)v2/pkg/templates/templates/react/frontend/eslint.config.js(1 hunks)v2/pkg/templates/templates/react/frontend/package.json(1 hunks)v2/pkg/templates/templates/react/frontend/src/main.jsx(1 hunks)v2/pkg/templates/templates/react/frontend/vite.config.js(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/README.md(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/package.json(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/src/App.svelte(2 hunks)v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/svelte.config.js(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/tsconfig.app.json(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/tsconfig.json(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/tsconfig.node.json(1 hunks)v2/pkg/templates/templates/svelte-ts/frontend/vite.config.ts(1 hunks)v2/pkg/templates/templates/svelte/frontend/README.md(1 hunks)v2/pkg/templates/templates/svelte/frontend/jsconfig.json(2 hunks)v2/pkg/templates/templates/svelte/frontend/package.json(1 hunks)v2/pkg/templates/templates/svelte/frontend/src/App.svelte(2 hunks)v2/pkg/templates/templates/svelte/frontend/src/main.js(1 hunks)v2/pkg/templates/templates/svelte/frontend/svelte.config.js(1 hunks)v2/pkg/templates/templates/svelte/frontend/vite.config.js(1 hunks)v2/pkg/templates/templates/vanilla-ts/frontend/package.json(1 hunks)v2/pkg/templates/templates/vanilla-ts/frontend/tsconfig.json(1 hunks)v2/pkg/templates/templates/vanilla/frontend/package.json(1 hunks)v2/pkg/templates/templates/vue-ts/frontend/README.md(1 hunks)v2/pkg/templates/templates/vue-ts/frontend/package.json(1 hunks)v2/pkg/templates/templates/vue-ts/frontend/src/App.vue(1 hunks)v2/pkg/templates/templates/vue-ts/frontend/tsconfig.app.json(1 hunks)v2/pkg/templates/templates/vue-ts/frontend/tsconfig.json(1 hunks)v2/pkg/templates/templates/vue-ts/frontend/tsconfig.node.json(1 hunks)v2/pkg/templates/templates/vue-ts/frontend/vite.config.ts(1 hunks)v2/pkg/templates/templates/vue/frontend/README.md(1 hunks)v2/pkg/templates/templates/vue/frontend/package.json(1 hunks)v2/pkg/templates/templates/vue/frontend/src/App.vue(1 hunks)v2/pkg/templates/templates/vue/frontend/vite.config.js(1 hunks)
💤 Files with no reviewable changes (3)
- v2/pkg/templates/templates/lit-ts/frontend/tsconfig.node.json
- v2/pkg/templates/templates/lit/frontend/vite.config.js
- v2/pkg/templates/templates/lit-ts/frontend/vite.config.ts
🧰 Additional context used
🧬 Code graph analysis (2)
v2/pkg/templates/templates/preact/frontend/src/main.jsx (1)
v2/pkg/templates/templates/preact-ts/frontend/src/app.tsx (1)
App(6-29)
v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts (1)
v2/pkg/templates/templates/svelte/frontend/src/main.js (1)
app(5-7)
🪛 LanguageTool
v2/pkg/templates/templates/vue/frontend/README.md
[grammar] ~5-~5: There might be a mistake here.
Context: ...de/scaling-up/tooling.html#ide-support).
(QB_NEW_EN)
v2/pkg/templates/templates/vue-ts/frontend/README.md
[grammar] ~5-~5: There might be a mistake here.
Context: ...typescript/overview.html#project-setup).
(QB_NEW_EN)
v2/pkg/templates/templates/svelte-ts/frontend/README.md
[grammar] ~17-~17: There might be a mistake here.
Context: ... might not be preferable for some users. - It is first and foremost a framework tha...
(QB_NEW_EN)
[style] ~20-~20: ‘taking into account’ might be wordy. Consider a shorter alternative.
Context: ... with Vite + TypeScript + Svelte, while taking into account the developer experience with regards t...
(EN_WORDINESS_PREMIUM_TAKING_INTO_ACCOUNT)
v2/pkg/templates/templates/svelte/frontend/README.md
[grammar] ~17-~17: There might be a mistake here.
Context: ... might not be preferable for some users. - It is first and foremost a framework tha...
(QB_NEW_EN)
[style] ~20-~20: ‘taking into account’ might be wordy. Consider a shorter alternative.
Context: ...o get started with Vite + Svelte, while taking into account the developer experience with regards t...
(EN_WORDINESS_PREMIUM_TAKING_INTO_ACCOUNT)
🔇 Additional comments (42)
v2/pkg/templates/templates/vanilla/frontend/package.json (1)
14-14: No action needed.EOF change only.
v2/pkg/templates/templates/vanilla-ts/frontend/tsconfig.json (1)
3-7: Vite env types reference confirmed:src/vite-env.d.tsincludes/// <reference types="vite/client" />.v2/pkg/templates/templates/preact/frontend/package.json (1)
12-17: Deps bump LGTM for Vite 7 + Preact.
No functional concerns spotted here.v2/pkg/templates/templates/svelte/frontend/package.json (1)
12-15: Version jump to Svelte 5—confirm scope vs Issue #2888 (Svelte 4).
This template targets Svelte ^5.38.1 while the linked issue requests Svelte 4. Confirm intended upgrade or adjust the issue/PR title to avoid confusion.v2/pkg/templates/templates/react/frontend/src/main.jsx (1)
3-3: index.css rename: OK.
Change is consistent with other templates.v2/pkg/templates/templates/react-ts/frontend/src/main.tsx (1)
3-3: index.css rename: OK.
Non-null assertion on container is appropriate in TS template.v2/pkg/templates/templates/lit/frontend/src/my-element.js (1)
4-4: index.css import: OK.
Matches the repo-wide rename.v2/pkg/templates/templates/preact/frontend/vite.config.js (1)
1-7: Formatting parity with upstream — looks goodNo functional changes; matches current Vite guidance.
v2/pkg/templates/templates/svelte/frontend/jsconfig.json (1)
3-5: Svelte templates meet bundler‐resolution requirements.
Thesvelte-tstemplate declares TypeScript ~5.8.3 alongside Svelte ^5.38.1 and @sveltejs/vite-plugin-svelte ^6.1.1, satisfying the ≥5.0 requirement. The pure JSsveltetemplate relies on the editor’s built-in TS (≥5.0). No changes needed.v2/pkg/templates/templates/vue-ts/frontend/vite.config.ts (1)
1-7: LGTM: formatting + docs URL update only.v2/pkg/templates/templates/svelte-ts/frontend/vite.config.ts (1)
1-7: LGTM: standard Vite + Svelte plugin config; docs URL aligned.v2/pkg/templates/templates/preact/frontend/src/main.jsx (2)
3-3: Index.css present and no stray style.css references found; no action required.
5-5: Guard against missing mount point
Optional: fail fast ifdocument.getElementById('app')returns null.--- v2/pkg/templates/templates/preact/frontend/src/main.jsx @@ -5,1 +5,4 @@ -render(<App/>, document.getElementById('app')); +const target = document.getElementById('app'); +if (!target) throw new Error('Mount point #app not found'); +render(<App />, target);Confirm that your HTML template defines a
<div id="app">before proceeding.v2/pkg/templates/templates/react/frontend/vite.config.js (1)
1-1: LGTM — formatting and docs URL refresh only.No behavioral changes; matches the pattern used across templates.
Also applies to: 4-4, 6-6
v2/pkg/templates/templates/svelte/frontend/vite.config.js (1)
1-6: Confirm docs link consistency and PR scope
- All eight template configs (vue, vue-ts, svelte, svelte-ts, react, react-ts, preact, preact-ts) use
https://vite.dev/config/in theirvite.config.*files.- Verify this change is intentional and that the PR scope aligns strictly with Issue #2888 (Svelte 4) without introducing any Svelte 5 updates.
v2/pkg/templates/templates/vue/frontend/vite.config.js (1)
1-6: LGTM: standardized import spacing, URL, trailing comma.
Matches current Vite conventions; no behavior change.v2/pkg/templates/templates/lit-ts/frontend/src/my-element.ts (1)
5-5: Confirm CSS files exist/removed.
Search didn’t locateindex.cssin the template; please ensurev2/pkg/templates/templates/lit-ts/frontend/src/index.cssexists for theimport './index.css'and remove any straystyle.cssto avoid 404s.v2/pkg/templates/templates/react-ts/frontend/vite.config.ts (1)
1-6: LGTM: formatting-only; aligns with Vite 7 templates.
No functional impact.v2/pkg/templates/templates/preact-ts/frontend/vite.config.ts (1)
1-6: LGTM: consistent import spacing, docs URL, and trailing comma.
No behavior change.v2/pkg/templates/templates/svelte-ts/frontend/src/main.ts (1)
1-7: Verify target Svelte major version (mount() is Svelte 5).This template uses
mount()which targets Svelte 5, while linked Issue #2888 asked for Svelte 4. Please confirm intent and update the PR title/description and generator docs accordingly—or revert to the Svelte 4 bootstrap (new App({ target })) if that’s the requirement.v2/pkg/templates/templates/svelte/frontend/svelte.config.js (1)
1-8: Clarify mismatch with linked Issue #2888 (Svelte 4) vs. this template (Svelte 5).If this PR intentionally leapfrogs to Svelte 5, note it in the changelog and in the issue thread to avoid confusion.
v2/pkg/templates/templates/react-ts/frontend/tsconfig.node.json (2)
3-24: Bundler-mode Node tsconfig looks solid.Settings (ES2023, moduleResolution: "bundler", strict flags) align with Vite 7 + TS 5.
3-24: TS version compatibility verified
All TS-based frontend templates declare TypeScript ~5.8.3, which supportserasableSyntaxOnlyandnoUncheckedSideEffectImports.v2/pkg/templates/templates/react-ts/frontend/tsconfig.json (2)
2-6: Project references aggregator LGTM.This layout plays nicely with separate app/node configs.
2-6: All referenced TSConfig files are present.Verified that both
tsconfig.app.jsonandtsconfig.node.jsonexist alongsidetsconfig.json.v2/pkg/templates/templates/lit-ts/frontend/package.json (1)
12-17: Deps upgrade looks reasonable for Lit 3 + Vite 7.No issues spotted here.
v2/pkg/templates/templates/svelte-ts/frontend/tsconfig.node.json (1)
3-24: Consistent, modern Node-side tsconfig.Matches the React-TS template; good strictness and bundler-mode flags.
v2/pkg/templates/templates/svelte-ts/frontend/svelte.config.js (1)
1-8: Switch tovitePreprocessis correct and modern.v2/pkg/templates/templates/react-ts/frontend/tsconfig.app.json (1)
1-27: Bundler-mode TS settings for React approved. TS version ~5.8.3 (≥ 5.5) supportsnoUncheckedSideEffectImportsanderasableSyntaxOnly.v2/pkg/templates/templates/vue-ts/frontend/tsconfig.node.json (1)
3-24: Skip adding Node types to tsconfig.node.json
Verified thatvite.config.tsdoesn’t reference Node globals (process,path,fs), so including"types": ["node"]is unnecessary.v2/pkg/templates/templates/vue-ts/frontend/tsconfig.json (1)
2-5: LGTM: Bundler-mode root tsconfig is set up correctly.files: [] + references to app/node is the recommended aggregator pattern.
v2/pkg/templates/templates/svelte-ts/frontend/package.json (2)
13-19: Preprocessing configuration is correct
svelte.config.js imports and uses only vitePreprocess(), with no remaining svelte-preprocess references.
13-19: Verify peer dependencies in the Svelte-TS frontend templateRun the install and peer-dependency check from the
v2/pkg/templates/templates/svelte-ts/frontenddirectory to confirm that@sveltejs/vite-plugin-svelte@^6,svelte@^5andvite@^7ranges are satisfied:cd v2/pkg/templates/templates/svelte-ts/frontend npm install --ignore-scripts npx svelte-check --version npx vite --version npm ls @sveltejs/vite-plugin-svelte svelte vitev2/pkg/templates/templates/react/frontend/eslint.config.js (1)
11-15: LGTM on base rules and extends.Hooks and react-refresh presets are appropriate for Vite; config shape is valid.
v2/pkg/templates/templates/svelte/frontend/README.md (1)
1-48: README Svelte version consistency verified. Confirmed package.json pins Svelte ^5.38.1 and README$stateexamples align with Svelte 5; no Svelte 4 guidance remains.v2/pkg/templates/templates/vue-ts/frontend/package.json (2)
8-9: Build pipeline change LGTM.Switching to “vue-tsc -b && vite build” matches the new project-references layout.
12-20: Peer dependencies verified; no conflicts found.v2/pkg/templates/templates/lit/frontend/package.json (1)
8-9: Double-check CSS entry rename across the template.If src/my-element.js switched from './style.css' to './index.css', ensure the new file actually exists and any docs/snippets reflect the rename.
v2/pkg/templates/templates/preact-ts/frontend/tsconfig.json (1)
4-6: Ignore outdated missing-file warning in tsconfig.jsonThe file
v2/pkg/templates/templates/preact-ts/frontend/tsconfig.node.jsonexists, so the project reference is valid and no change is needed.Likely an incorrect or invalid review comment.
v2/pkg/templates/templates/preact-ts/frontend/tsconfig.app.json (2)
14-22: Ensure runtime aliasing too (Vite) to match TS paths.TS paths affect type-checking only. Confirm Vite’s resolve.alias maps react/react-dom to preact/compat so runtime and HMR behave correctly.
You can add something like the following in vite.config.ts (outside this file):
import { defineConfig } from 'vite' export default defineConfig({ resolve: { alias: { react: 'preact/compat', 'react-dom': 'preact/compat', }, }, })
23-29: New compiler flags are solid; keep an eye on side-effect imports.noUncheckedSideEffectImports can flag CSS/asset side-effect imports. If this trips on e.g. import './style.css', include a global d.ts like src/globals.d.ts with declare module '*.css'.
v2/pkg/templates/templates/react/frontend/package.json (1)
13-15: React/Vite/ESLint upgrades look consistent; verify plugin-react v5 with Vite 7.react/react-dom 19.1.x with @vitejs/plugin-react ^5 and Vite ^7 is the right combo. Good.
Run npm ls vite @vitejs/plugin-react to confirm peer requirements resolve cleanly on all platforms.
Also applies to: 17-26
| /* Bundler mode */ | ||
| "moduleResolution": "bundler", | ||
| "allowImportingTsExtensions": true, | ||
| "verbatimModuleSyntax": true, | ||
| "moduleDetection": "force", | ||
| "noEmit": true, | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add essential bundler typings and isolation.
To avoid missing Vite globals/types and to keep files transpile-safe with bundlers, add "types" and "isolatedModules".
Apply this diff:
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
+ "isolatedModules": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
+ "types": ["vite/client"]Also applies to: 23-25
🤖 Prompt for AI Agents
In v2/pkg/templates/templates/lit-ts/frontend/tsconfig.json around lines 10–16
(and again for the similar block at lines 23–25), the bundler-related compiler
options are missing essential entries; add the "types" array including
"vite/client" to surface Vite globals and set "isolatedModules": true to keep
files transpile-safe with bundlers (place both entries alongside the existing
bundler options so TypeScript picks up Vite types and enforces isolated module
transpilation).
| "noUnusedLocals": true, | ||
| "noUnusedParameters": true, | ||
| "noImplicitReturns": true, | ||
| "erasableSyntaxOnly": true, |
There was a problem hiding this comment.
Invalid TypeScript option: remove "erasableSyntaxOnly".
TypeScript doesn't recognize "erasableSyntaxOnly" and will fail the build. Drop it (or add a real compiler flag like "noImplicitReturns": true if that was the intent).
Apply this diff:
- "erasableSyntaxOnly": true,
+ "noImplicitReturns": true,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "erasableSyntaxOnly": true, | |
| "noImplicitReturns": true, |
🤖 Prompt for AI Agents
In v2/pkg/templates/templates/lit-ts/frontend/tsconfig.json at line 21, remove
the invalid TypeScript compiler option "erasableSyntaxOnly" (TypeScript will
fail to parse unknown compiler options); either delete that line entirely or
replace it with the intended valid flag (for example "noImplicitReturns": true)
and ensure the JSON remains valid (comma placement adjusted if needed).
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "tsc && vite build", | ||
| "build": "tsc -b && vite build", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
TypeScript build mode: verify project references; document Node engine baseline.
tsc -brequires referenced projects with"composite": true. Ensuretsconfig.jsonusesreferencesand relatedtsconfig.*.jsonfiles exist; otherwise-bcan fail.- Consider adding
engines.nodeto reflect Vite’s minimum Node version and acheckscript for type-only checks.
"scripts": {
"dev": "vite",
- "build": "tsc -b && vite build",
+ "build": "tsc -b && vite build",
+ "check": "tsc -b --pretty"
"preview": "vite preview"
},
@@
"devDependencies": {
"@preact/preset-vite": "^2.10.2",
"typescript": "~5.8.3",
"vite": "^7.1.2"
- }
+ },
+ "engines": {
+ "node": ">=20"
+ }
}Also applies to: 12-18
🏁 Script executed:
#!/bin/bash
# Validate TS project references/composite flags in preact-ts template
fd -a 'tsconfig*.json' v2/pkg/templates/templates/preact-ts/frontend
echo "---- references in root tsconfig.json ----"
rg -n '"references"' v2/pkg/templates/templates/preact-ts/frontend/tsconfig.json || true
echo "---- composite flags ----"
rg -n '"composite"\s*:\s*true' -g 'tsconfig*.json' v2/pkg/templates/templates/preact-ts/frontend || trueLength of output: 514
🌐 Web query:
What Node.js versions are supported by Vite 7.x?
💡 Result:
Vite 7.x requires Node.js 20.19+ or 22.12+. [1][2]
Sources:
[1] Vite announcement blog — Vite 7.0.
[2] Vite docs migration guide (Vite 7 / main).
Enable TypeScript composite builds and set accurate Node engine requirement
- Add
"composite": trueto v2/pkg/templates/templates/preact-ts/frontend/tsconfig.json (or its referenced configs) sotsc -bsucceeds. - Add
"engines": { "node": ">=20.19" }
to package.json (Vite 7.x requires Node.js 20.19+ or 22.12+) (vite.dev, medium.com). - (Optional) add a
"check": "tsc -b --pretty"script for type-only checks.
🤖 Prompt for AI Agents
In v2/pkg/templates/templates/preact-ts/frontend/package.json around line 8, the
build script uses "tsc -b" but the TypeScript config(s) lack "composite": true
and package.json is missing an engines entry; update the project's tsconfig.json
(or any referenced tsconfigs) to include "composite": true so tsc -b can perform
composite builds, add an "engines": { "node": ">=20.19" } field to package.json
to reflect Vite 7.x requirements, and optionally add a "check": "tsc -b
--pretty" script to package.json for type-only checks; ensure any project
references are correct so the composite build succeeds.
| import {render} from 'preact'; | ||
| import {App} from './app'; | ||
| import './style.css'; | ||
| import './index.css'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
CSS entry rename: verify the file exists across templates
Ensure index.css exists and no stale imports of style.css remain.
🏁 Script executed:
#!/bin/bash
# Verify all 'index.css' files exist where imports were changed
fd -a index.css v2/pkg/templates/templates --max-depth 5
# Ensure no leftover imports of style.css
rg -nP "import\\s+['\"]\\./style\\.css['\"]" v2/pkg/templates/templates -SLength of output: 911
Rename and update CSS imports in Vue and Vanilla templates
The following templates still import style.css (which should be renamed to index.css) and lack an index.css entry file—rename style.css → index.css in each directory and update the import in:
v2/pkg/templates/templates/vue/frontend/src/main.jsv2/pkg/templates/templates/vue-ts/frontend/src/main.tsv2/pkg/templates/templates/vanilla/frontend/src/main.jsv2/pkg/templates/templates/vanilla-ts/frontend/src/main.ts
🤖 Prompt for AI Agents
In v2/pkg/templates/templates/preact-ts/frontend/src/main.tsx around line 3 and
the listed template entry files (vue/frontend/src/main.js,
vue-ts/frontend/src/main.ts, vanilla/frontend/src/main.js,
vanilla-ts/frontend/src/main.ts), update the CSS entry to use index.css rather
than style.css: rename any existing style.css files in each template directory
to index.css (or add a new index.css if missing) and change the import
statements in each main.* file to import './index.css'; ensure file paths match
the templates' src structure so the bundler can resolve the stylesheet.
| ```js | ||
| export default tseslint.config([ | ||
| globalIgnores(['dist']), | ||
| { | ||
| files: ['**/*.{ts,tsx}'], | ||
| extends: [ | ||
| // Other configs... | ||
|
|
||
| // Remove tseslint.configs.recommended and replace with this | ||
| ...tseslint.configs.recommendedTypeChecked, | ||
| // Alternatively, use this for stricter rules | ||
| ...tseslint.configs.strictTypeChecked, | ||
| // Optionally, add this for stylistic rules | ||
| ...tseslint.configs.stylisticTypeChecked, | ||
|
|
||
| // Other configs... | ||
| ], | ||
| languageOptions: { | ||
| parserOptions: { | ||
| project: ['./tsconfig.node.json', './tsconfig.app.json'], | ||
| tsconfigRootDir: import.meta.dirname, | ||
| }, | ||
| // other options... | ||
| }, | ||
| }, | ||
| ]) | ||
| ``` |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Replace non-standard globalIgnores with flat-config ignores.
ESLint flat config uses an object with ignores, not globalIgnores(...). This correction prevents copy/paste breakage.
-export default tseslint.config([
- globalIgnores(['dist']),
- {
+export default tseslint.config([
+ { ignores: ['dist'] },
+ {
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
@@
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])Note: ensure ESLint version supports import.meta.dirname (ESLint 9+ flat config). Otherwise use new URL('.', import.meta.url).pathname.
🏁 Script executed:
#!/bin/bash
# Search for occurrences of globalIgnores in the repository
rg -n "globalIgnores" -C3 .
# Confirm that README.md exists at the specified path
if [[ -f "v2/pkg/templates/templates/react-ts/frontend/README.md" ]]; then
echo "README.md exists at v2/pkg/templates/templates/react-ts/frontend/README.md"
else
echo "README.md not found"
fi
# Check frontend package.json for ESLint version
if [[ -f "v2/pkg/templates/templates/react-ts/frontend/package.json" ]]; then
echo "package.json found, extracting ESLint version specification:"
grep -E '"eslint"' -n v2/pkg/templates/templates/react-ts/frontend/package.json || echo "eslint not listed"
else
echo "package.json not found at expected location"
fiLength of output: 3585
Replace globalIgnores with flat-config ignores
ESLint flat config requires an ignores field instead of the globalIgnores() helper. Update the first entry in the config array accordingly:
-export default tseslint.config([
- globalIgnores(['dist']),
+export default tseslint.config([
+ { ignores: ['dist'] },
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])Note: this template’s ESLint (^9.33.0) supports import.meta.dirname in flat config. For older ESLint versions, replace it with new URL('.', import.meta.url).pathname in parserOptions.tsconfigRootDir.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```js | |
| export default tseslint.config([ | |
| globalIgnores(['dist']), | |
| { | |
| files: ['**/*.{ts,tsx}'], | |
| extends: [ | |
| // Other configs... | |
| // Remove tseslint.configs.recommended and replace with this | |
| ...tseslint.configs.recommendedTypeChecked, | |
| // Alternatively, use this for stricter rules | |
| ...tseslint.configs.strictTypeChecked, | |
| // Optionally, add this for stylistic rules | |
| ...tseslint.configs.stylisticTypeChecked, | |
| // Other configs... | |
| ], | |
| languageOptions: { | |
| parserOptions: { | |
| project: ['./tsconfig.node.json', './tsconfig.app.json'], | |
| tsconfigRootDir: import.meta.dirname, | |
| }, | |
| // other options... | |
| }, | |
| }, | |
| ]) | |
| ``` | |
| export default tseslint.config([ | |
| { ignores: ['dist'] }, | |
| { | |
| files: ['**/*.{ts,tsx}'], | |
| extends: [ | |
| // Other configs... | |
| // Remove tseslint.configs.recommended and replace with this | |
| ...tseslint.configs.recommendedTypeChecked, | |
| // Alternatively, use this for stricter rules | |
| ...tseslint.configs.strictTypeChecked, | |
| // Optionally, add this for stylistic rules | |
| ...tseslint.configs.stylisticTypeChecked, | |
| // Other configs... | |
| ], | |
| languageOptions: { | |
| parserOptions: { | |
| project: ['./tsconfig.node.json', './tsconfig.app.json'], | |
| tsconfigRootDir: import.meta.dirname, | |
| }, | |
| // other options... | |
| }, | |
| }, | |
| ]) |
🤖 Prompt for AI Agents
v2/pkg/templates/templates/react-ts/frontend/README.md lines 14-40: the ESLint
flat config uses globalIgnores(['dist']) which is not valid; replace that array
entry with an object that defines ignores: ['dist'] as the first config entry
(i.e., remove the globalIgnores helper and add { ignores: ['dist'] }), and keep
the rest of the config intact; ensure parserOptions.tsconfigRootDir remains as
import.meta.dirname (or replace with new URL('.', import.meta.url).pathname for
older ESLint versions) if needed.
| **Why is HMR not preserving my local component state?** | ||
|
|
||
| HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` | ||
| and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the | ||
| details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). | ||
| HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state). | ||
|
|
||
| If you have state that's important to retain within a component, consider creating an external store which would not be | ||
| replaced by HMR. | ||
| If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Event binding directive is incorrect for Svelte.
Use on:click, not onclick, in Svelte components.
Apply this diff:
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+Example event binding in Svelte components:
+
+```svelte
+<button on:click={greet}>Greet</button>
+```Scan for accidental replacements:
🏁 Script executed:
#!/bin/bash
rg -nP '\bonclick\s*=' v2/pkg/templates/templates/svelte -C2 || true
rg -nP 'on:click' v2/pkg/templates/templates/svelte -C2 || trueLength of output: 625
Use on:click instead of onclick for Svelte event bindings
- In
v2/pkg/templates/templates/svelte/frontend/src/App.svelteat line 18, replacewith<button class="btn" onclick={greet}>Greet</button>
<button class="btn" on:click={greet}>Greet</button>
- Enhance the README (
v2/pkg/templates/templates/svelte/frontend/README.md) to show a correct event-binding example:
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+Example event binding in Svelte components:
+
+```svelte
+<button on:click={greet}>Greet</button>
+```🤖 Prompt for AI Agents
In v2/pkg/templates/templates/svelte/frontend/README.md around lines 36 to 41
and in v2/pkg/templates/templates/svelte/frontend/src/App.svelte at line 18, the
README and template use the non-Svelte DOM event attribute `onclick` instead of
Svelte's event binding `on:click`; update the App.svelte button to use
on:click={greet} and modify the README example to show the correct Svelte
event-binding snippet (replace the onclick example with <button
on:click={greet}>Greet</button>) so the docs and template match Svelte
conventions.
| let resultText = $state("Please enter your name below 👇") | ||
| let name = $state("") |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Svelte 5 runes in a PR linked to a Svelte 4 issue—clarify intent and deps.
You’re using $state (Svelte 5). If the goal is “current Svelte,” update the linked issue/changelog/docs to reflect Svelte 5; if the goal is Svelte 4, this is a breaking deviation.
Quick audit for runes and onclick usage:
🏁 Script executed:
#!/bin/bash
# Find runes usage and accidental 'onclick' in Svelte files
rg -n --glob 'v2/pkg/templates/**/*.svelte' '\$state\(|\bonclick=' -C1Length of output: 1438
🏁 Script executed:
#!/bin/bash
# Check Svelte version in package.json for both templates
grep -R '"svelte"' -n v2/pkg/templates/templates/svelte/frontend/package.json
grep -R '"svelte"' -n v2/pkg/templates/templates/svelte-ts/frontend/package.jsonLength of output: 218
Clarify Svelte version & update related docs
- Both
svelteandsvelte-tstemplates declare Svelte ^5.38.1, so using$state(a Svelte 5 rune) is valid. - If the intent is to ship with Svelte 5, update the linked issue, changelog and documentation to reflect Svelte 5 support; if the aim is to remain on Svelte 4, revert the
$staterunes to avoid a breaking change. - Swap the native
onclick={greet}in your components to Svelte’son:click={greet}event binding.
🤖 Prompt for AI Agents
In v2/pkg/templates/templates/svelte/frontend/src/App.svelte around lines 5-6,
the file uses Svelte 5 runes ($state) and native onclick attribute which may not
match intended Svelte version; either (A) keep Svelte 5 support: confirm
package.json versions, update the linked issue, changelog and docs to state
Svelte 5 compatibility and keep $state usage, and replace any native onclick
attributes with Svelte event binding syntax on:click={greet} throughout the
template; or (B) remain on Svelte 4: revert the $state runes to the equivalent
Svelte 4 reactive/state code and change onclick to on:click={greet}. Ensure the
template, package.json, changelog, linked issue and docs are consistent with the
chosen Svelte version.
| <div class="input-box" id="input"> | ||
| <input autocomplete="off" bind:value={name} class="input" id="name" type="text"/> | ||
| <button class="btn" on:click={greet}>Greet</button> | ||
| <button class="btn" onclick={greet}>Greet</button> |
There was a problem hiding this comment.
Fix event binding: use on:click, not onclick.
Svelte attaches listeners via directives. The current onclick won’t wire the handler.
- <button class="btn" onclick={greet}>Greet</button>
+ <button class="btn" on:click={greet}>Greet</button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <button class="btn" onclick={greet}>Greet</button> | |
| <button class="btn" on:click={greet}>Greet</button> |
🤖 Prompt for AI Agents
In v2/pkg/templates/templates/svelte/frontend/src/App.svelte around line 18, the
button uses the DOM attribute "onclick" which Svelte ignores for component event
binding; replace it with the Svelte directive "on:click" so the greet handler is
properly attached (i.e., change onclick={greet} to on:click={greet}) and keep
the existing greet function in the component scope.
| "noFallthroughCasesInSwitch": true, | ||
| "noUncheckedSideEffectImports": true |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
noUncheckedSideEffectImports may flag CSS/asset side-effect imports. Validate template compiles cleanly.
Run a type check to confirm no false positives (e.g., import './style.css'):
🏁 Script executed:
#!/bin/bash
# Look for side-effect imports and then type-check.
rg -nP -g 'v2/pkg/templates/templates/vanilla-ts/frontend/**' $'^\s*import\s+[\'"][^\'"]+\.(css|scss|less|sass|svg|png|jpg)[\'"];' || true
(
cd v2/pkg/templates/templates/vanilla-ts/frontend 2>/dev/null || exit 0
npx -y typescript@latest tsc --noEmit
)Length of output: 558
Add global CSS module declarations for side-effect imports
The side-effect imports (import './style.css', import './app.css') will error under "noUncheckedSideEffectImports": true. Add an ambient module declaration for *.css (e.g., in a global.d.ts) so the compiler recognizes these imports, then run npm install && tsc --noEmit in v2/pkg/templates/templates/vanilla-ts/frontend to verify clean compilation.
🤖 Prompt for AI Agents
In v2/pkg/templates/templates/vanilla-ts/frontend/tsconfig.json around lines
21-22, TypeScript's "noUncheckedSideEffectImports" will cause side-effect CSS
imports (e.g., import './style.css') to error; add an ambient module declaration
file (e.g., create src/global.d.ts or types/global.d.ts) that declares modules
for '*.css' (and any other static asset extensions used) so the compiler accepts
side-effect imports, include that file in tsconfig "files" or ensure it's
covered by "include", then run npm install && tsc --noEmit in
v2/pkg/templates/templates/vanilla-ts/frontend to verify compilation succeeds.
| This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | ||
|
|
||
| ## Recommended IDE Setup | ||
|
|
||
| - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) | ||
|
|
||
| ## Type Support For `.vue` Imports in TS | ||
|
|
||
| Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type | ||
| by default. In most cases this is fine if you don't really care about component prop types outside of templates. | ||
| However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using | ||
| manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: | ||
|
|
||
| 1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look | ||
| for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, | ||
| Take Over mode will enable itself if the default TypeScript extension is disabled. | ||
| 2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. | ||
|
|
||
| You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). | ||
| Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
There was a problem hiding this comment.
Fix minor grammar and point to canonical docs URL.
Tighten wording and prefer the current Vue docs domain.
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+This template gets you started with Vue 3 and TypeScript in Vite. It uses Vue 3 `<script setup>` SFCs—see the [script setup docs](https://vuejs.org/api/sfc-script-setup.html) to learn more.
-
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+Learn more about recommended project setup and IDE support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | |
| ## Recommended IDE Setup | |
| - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) | |
| ## Type Support For `.vue` Imports in TS | |
| Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type | |
| by default. In most cases this is fine if you don't really care about component prop types outside of templates. | |
| However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using | |
| manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: | |
| 1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look | |
| for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, | |
| Take Over mode will enable itself if the default TypeScript extension is disabled. | |
| 2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. | |
| You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). | |
| Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). | |
| This template gets you started with Vue 3 and TypeScript in Vite. It uses Vue 3 `<script setup>` SFCs—see the [script setup docs](https://vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | |
| Learn more about recommended project setup and IDE support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). |
🧰 Tools
🪛 LanguageTool
[grammar] ~5-~5: There might be a mistake here.
Context: ...typescript/overview.html#project-setup).
(QB_NEW_EN)
🤖 Prompt for AI Agents
v2/pkg/templates/templates/vue-ts/frontend/README.md around lines 3 to 5:
tighten wording for grammar and update the docs link to the canonical Vue docs
domain; rephrase sentences to be more concise (e.g., "This template helps you
get started with Vue 3 and TypeScript using Vite."), change "check out the
[script setup docs](...)" to a concise pointer using the vuejs.org URL for
script-setup, and update the TypeScript guide link to the vuejs.org TypeScript
guide; ensure punctuation and capitalization are consistent.
1 participant
Description
Migrated all the templates so they are in sync with vite. Came across issue #2888 after wanting a template in Svelte 5.
Fixes #2888
Type of change
Please select the option that is relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration using
wails doctor.If you checked Linux, please specify the distro and version.
Test Configuration
System
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
| OS | MacOS |
| Version | 15.6.1 |
| ID | 24G90 |
| Branding | |
| Go Version | go1.24.2 |
| Platform | darwin |
| Architecture | arm64 |
| CPU 1 | Apple M3 |
| CPU 2 | Apple M3 |
| GPU | Chipset Model: Apple M3 Type: GPU Bus: Built-In Total Number of Cores: 10 Vendor: Apple (0x106b) Metal Support: Metal 3 |
| Memory | 8GB |
└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Dependencies
┌────────────────────────────────────────────────────────────────────────┐
| Dependency | Package Name | Status | Version |
| Xcode command line tools | N/A | Installed | 2410 |
| Nodejs | N/A | Installed | 22.13.0 |
| npm | N/A | Installed | 10.9.2 |
| *Xcode | N/A | Installed | 16.2 (16C5032a) |
| *upx | N/A | Available | |
| *nsis | N/A | Available | |
| |
└─────────────────────── * - Optional Dependency ────────────────────────┘
Checklist:
website/src/pages/changelog.mdxwith details of this PRSummary by CodeRabbit