feat(create-vite): update to svelte 5 (#18407)

Co-authored-by: Ben McCann <[email protected]>

Author: sapphi-red

packages/create-vite/src/index.ts

@@ -205,7 +205,7 @@ const FRAMEWORKS: Framework[] = [
         name: 'custom-svelte-kit',
         display: 'SvelteKit ↗',
         color: red,
-        customCommand: 'npm create svelte@latest TARGET_DIR',
+        customCommand: 'npm exec sv create TARGET_DIR',
       },
     ],
   },

packages/create-vite/template-preact-ts/src/main.tsx

@@ -1,5 +1,5 @@
 import { render } from 'preact'
-import { App } from './app.tsx'
 import './index.css'
+import { App } from './app.tsx'
 
 render(<App />, document.getElementById('app')!)

packages/create-vite/template-preact/src/main.jsx

@@ -1,5 +1,5 @@
 import { render } from 'preact'
-import { App } from './app.jsx'
 import './index.css'
+import { App } from './app.jsx'
 
 render(<App />, document.getElementById('app'))

packages/create-vite/template-qwik-ts/src/main.tsx

@@ -1,7 +1,7 @@
 import '@builder.io/qwik/qwikloader.js'
 
 import { render } from '@builder.io/qwik'
-import { App } from './app.tsx'
 import './index.css'
+import { App } from './app.tsx'
 
 render(document.getElementById('app') as HTMLElement, <App />)

packages/create-vite/template-qwik/src/main.jsx

@@ -1,7 +1,7 @@
 import '@builder.io/qwik/qwikloader.js'
 
 import { render } from '@builder.io/qwik'
-import { App } from './app.jsx'
 import './index.css'
+import { App } from './app.jsx'
 
 render(document.getElementById('app'), <App />)

packages/create-vite/template-react-ts/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
 import './index.css'
+import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

packages/create-vite/template-react/src/main.jsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
 import './index.css'
+import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>

packages/create-vite/template-solid-ts/src/index.tsx

@@ -1,8 +1,7 @@
 /* @refresh reload */
 import { render } from 'solid-js/web'
-
 import './index.css'
-import App from './App'
+import App from './App.tsx'
 
 const root = document.getElementById('root')
 

packages/create-vite/template-solid/src/index.jsx

@@ -1,8 +1,7 @@
 /* @refresh reload */
 import { render } from 'solid-js/web'
-
 import './index.css'
-import App from './App'
+import App from './App.jsx'
 
 const root = document.getElementById('root')
 

packages/create-vite/template-svelte-ts/package.json

@@ -10,9 +10,9 @@
     "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.3",
     "svelte-check": "^4.0.5",
     "tslib": "^2.8.0",
     "typescript": "~5.6.2",

packages/create-vite/template-svelte-ts/src/lib/Counter.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  let count: number = 0
+  let count: number = $state(0)
   const increment = () => {
     count += 1
   }
 </script>
 
-<button on:click={increment}>
+<button onclick={increment}>
   count is {count}
 </button>

packages/create-vite/template-svelte-ts/src/main.ts

@@ -1,7 +1,8 @@
+import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app')!,
 })
 

packages/create-vite/template-svelte/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.19",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.3",
     "vite": "^5.4.9"
   }
 }

packages/create-vite/template-svelte/src/lib/Counter.svelte

@@ -1,10 +1,10 @@
 <script>
-  let count = 0
+  let count = $state(0)
   const increment = () => {
     count += 1
   }
 </script>
 
-<button on:click={increment}>
+<button onclick={increment}>
   count is {count}
 </button>

packages/create-vite/template-svelte/src/main.js

@@ -1,7 +1,8 @@
+import { mount } from 'svelte'
 import './app.css'
 import App from './App.svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app'),
 })