feat(create-vite): update to svelte 5

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

@@ -1,8 +1,7 @@
 /* @refresh reload */
 import { render } from 'solid-js/web'
-
+import App from './App.tsx'
 import './index.css'
-import App from './App'
 
 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 App from './App.jsx'
 import './index.css'
-import App from './App'
 
 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.7.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 './app.css'
+import { mount } from 'svelte'
 import App from './App.svelte'
+import './app.css'
 
-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 './app.css'
+import { mount } from 'svelte'
 import App from './App.svelte'
+import './app.css'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app'),
 })
 

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

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
+import './style.css'
 
 createApp(App).mount('#app')

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

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
+import './style.css'
 
 createApp(App).mount('#app')