fix(examples): update vite svelte 5 example to svelte 5 syntax (#5109)

henrikvilhelmberglund · web-flow · commit 09d9af88fe42 · 2026-02-25T10:05:25.000+08:00
diff --git a/examples/vite-svelte/src/App.svelte b/examples/vite-svelte/src/App.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
     import { fade, fly } from 'svelte/transition'
     import Footer from './Footer.svelte'
-    let logo = false
-    let red = false
-    let x = 'abc?cbd'
+
+    let logo = $state(false)
+    let red = $state(false)
+    let x = $state('abc?cbd')
+    $inspect(x)
+    const button = $derived(logo ? 'Hide logo' : 'Show logo')
+    const span = $derived(red ? 'Normal' : 'Red')
+
     function toggleLogo() {
         logo = !logo
     }
+    
     function toggleSpan() {
         red = !red
     }
-    $: button = logo ? 'Hide logo' : 'Show logo'
-    $: span = red ? 'Normal' : 'Red'
-    $: console.log(x)
 </script>
 
 <main>
@@ -24,22 +27,28 @@
 
   <h1 class="animate-bounce">Hello Typescript!</h1>
 
+  <h2 class="text-lg font-semibold text-orange-600">Use shift+ctrl for the inspector</h2>
+
   <br/>
 
   <div class:bg-red-400={red}>BG Color should change</div>
 
   <br/>
 
-  <button class="bg-red-100" on:click={toggleLogo}>{button}</button>
-  <button on:click={toggleSpan}>Change BG Color: {span}</button>
+  <button class="bg-red-100" onclick={toggleLogo}>{button}</button>
+  <button onclick={toggleSpan}>Change BG Color: {span}</button>
 
   <br />
 
+  <input bind:value={x} type="text" name="" id="">
+
   <div class="absolute mt-20px bottom-0">absolute</div>
 
 </main>
 
 <Footer />
+<Footer foo={true} name=Footer2 />
+<Footer customclasses={"bg-blue-500 text-xl"} name=Footer3 />
 
 
 <style>
diff --git a/examples/vite-svelte/src/Footer.svelte b/examples/vite-svelte/src/Footer.svelte
@@ -1,12 +1,7 @@
 <script lang="ts">
-  let foo = true
+  const { foo = false, customclasses = "", name = "Footer" } = $props()
 </script>
+
 <footer>
-  <div
-      class="bar"
-      class:foo
-  >Footer</div>
-  <div class="bar" class:foo>Footer2</div>
+  <div class="bar {customclasses}" class:foo>{name}</div>
 </footer>
-
-
diff --git a/examples/vite-svelte/src/main.ts b/examples/vite-svelte/src/main.ts
@@ -1,8 +1,9 @@
+import { mount } from 'svelte'
 import App from './App.svelte'
 
 import 'uno.css'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('app'),
 })
 
diff --git a/examples/vite-svelte/vite.config.js b/examples/vite-svelte/vite.config.js
@@ -6,6 +6,12 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   plugins: [
     UnoCSS(),
-    svelte(),
+    svelte({
+      inspector: {
+        toggleKeyCombo: 'control-shift',
+        showToggleButton: 'always',
+        toggleButtonPos: 'bottom-right',
+      },
+    }),
   ],
 })
