fix(cli): properly migrate svelte to v5 in the plugin example template (#13912)

* fix: update vite.config.ts to support Svelte 4 in example app

* Migrate the code to svelte 5 instead

* Add change file

---------

Co-authored-by: Tony <[email protected]>

Author: takecchi

.changes/fix-plugin-template-svelte.md

@@ -0,0 +1,6 @@
+---
+"tauri-cli": "patch:bug"
+"@tauri-apps/cli": "patch:bug"
+---
+
+Properly migrate svelte to v5 in the plugin example template

crates/tauri-cli/templates/plugin/__example-api/tauri-app/jsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "target": "ESNext",
     "module": "ESNext",
     /**
      * svelte-preprocess cannot figure out whether you have
      * a value or a type, so tell TypeScript to enforce using
      * `import type` instead of `import` for Types.
      */
-    "importsNotUsedAsValues": "error",
+    "verbatimModuleSyntax": true,
     "isolatedModules": true,
     "resolveJsonModule": true,
     /**

crates/tauri-cli/templates/plugin/__example-api/tauri-app/src/App.svelte

@@ -2,7 +2,7 @@
   import Greet from './lib/Greet.svelte'
   import { ping } from 'tauri-plugin-{{ plugin_name }}-api'
 
-	let response = ''
+	let response = $state('')
 
 	function updateResponse(returnValue) {
 		response += `[${new Date().toLocaleTimeString()}] ` + (typeof returnValue === 'string' ? returnValue : JSON.stringify(returnValue)) + '<br>'
@@ -37,7 +37,7 @@
   </div>
 
   <div>
-    <button on:click="{_ping}">Ping</button>
+    <button onclick="{_ping}">Ping</button>
     <div>{@html response}</div>
   </div>
 

crates/tauri-cli/templates/plugin/__example-api/tauri-app/src/lib/Greet.svelte

@@ -1,8 +1,8 @@
 <script>
   import { invoke } from "@tauri-apps/api/core"
 
-  let name = "";
-  let greetMsg = ""
+  let name = $state("");
+  let greetMsg = $state("")
 
   async function greet(){
     // Learn more about Tauri commands at https://v2.tauri.app/develop/calling-rust/#commands
@@ -13,7 +13,7 @@
 <div>
   <div class="row">
     <input id="greet-input" placeholder="Enter a name..." bind:value={name} />
-    <button on:click={greet}>
+    <button onclick={greet}>
       Greet
     </button>
   </div>

crates/tauri-cli/templates/plugin/__example-api/tauri-app/src/main.js

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