chore(deps): update dependency svelte to v5 (v2)

examples/api/package.json

@@ -32,10 +32,10 @@
   "devDependencies": {
     "@iconify-json/codicon": "^1.1.37",
     "@iconify-json/ph": "^1.1.8",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tauri-apps/cli": "2.0.4",
     "@unocss/extractor-svelte": "^0.63.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.0",
     "unocss": "^0.63.0",
     "vite": "^5.4.7"
   }

examples/api/src-tauri/capabilities/base.json

@@ -53,6 +53,7 @@
         }
       ]
     },
+    "shell:allow-open",
     "shell:allow-kill",
     "shell:allow-stdin-write",
     "process:allow-exit",

examples/api/src/App.svelte

@@ -205,7 +205,7 @@
     if (consoleTextEl) consoleTextEl.scrollTop = consoleTextEl.scrollHeight
   }
 
-  // this function is renders HTML without sanitizing it so it's insecure
+  // this function renders HTML without sanitizing it so it's insecure
   // we only use it with our own input data
   async function insecureRenderHtml(html) {
     messages.update((r) => [
@@ -334,56 +334,60 @@
       children:h-100% children:w-12 children:inline-flex
       children:items-center children:justify-center"
     >
-      <span
+      <button
+        aria-label="Toggle dark mode"
         title={isDark ? 'Switch to Light mode' : 'Switch to Dark mode'}
-        class="hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
+        class="bg-inherit border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
         on:click={toggleDark}
       >
         {#if isDark}
-          <div class="i-ph-sun" />
+          <div class="i-ph-sun"></div>
         {:else}
-          <div class="i-ph-moon" />
+          <div class="i-ph-moon"></div>
         {/if}
-      </span>
-      <span
+      </button>
+      <button
+        aria-label="Minimize window"
         title="Minimize"
-        class="hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
+        class="bg-inherit border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
         on:click={minimize}
       >
-        <div class="i-codicon-chrome-minimize" />
-      </span>
-      <span
+        <div class="i-codicon-chrome-minimize"></div>
+      </button>
+      <button
+        aria-label="Maximize window"
         title={isWindowMaximized ? 'Restore' : 'Maximize'}
-        class="hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
+        class="bg-inherit border-none hover:bg-hoverOverlay active:bg-hoverOverlayDarker dark:hover:bg-darkHoverOverlay dark:active:bg-darkHoverOverlayDarker"
         on:click={toggleMaximize}
       >
         {#if isWindowMaximized}
-          <div class="i-codicon-chrome-restore" />
+          <div class="i-codicon-chrome-restore"></div>
         {:else}
-          <div class="i-codicon-chrome-maximize" />
+          <div class="i-codicon-chrome-maximize"></div>
         {/if}
-      </span>
-      <span
+      </button>
+      <button
+        aria-label="Close window"
         title="Close"
-        class="hover:bg-red-700 dark:hover:bg-red-700 hover:text-darkPrimaryText active:bg-red-700/90 dark:active:bg-red-700/90 active:text-darkPrimaryText"
+        class="bg-inherit border-none hover:bg-red-700 dark:hover:bg-red-700 hover:text-darkPrimaryText active:bg-red-700/90 dark:active:bg-red-700/90 active:text-darkPrimaryText"
         on:click={close}
       >
-        <div class="i-codicon-chrome-close" />
-      </span>
+        <div class="i-codicon-chrome-close"></div>
+      </button>
     </span>
   </div>
 {/if}
 
 <!-- Sidebar toggle, only visible on small screens -->
 <div
   id="sidebarToggle"
-  class="z-2000 sidebar-toggle display-none lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8
+  class="z-2000 sidebar-toggle hidden lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8
             bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark"
 >
   {#if isSideBarOpen}
-    <span class="i-codicon-close animate-duration-300ms animate-fade-in" />
+    <span class="i-codicon-close animate-duration-300ms animate-fade-in"></span>
   {:else}
-    <span class="i-codicon-menu animate-duration-300ms animate-fade-in" />
+    <span class="i-codicon-menu animate-duration-300ms animate-fade-in"></span>
   {/if}
 </div>
 
@@ -395,24 +399,21 @@
     class="lt-sm:h-screen lt-sm:shadow-lg lt-sm:shadow lt-sm:transition-transform lt-sm:absolute lt-sm:z-1999
       bg-darkPrimaryLighter transition-colors-250 overflow-hidden grid select-none px-2"
   >
-    <img
-      on:click={() => open('https://tauri.app/')}
-      class="self-center p-7 cursor-pointer"
-      src="tauri_logo.png"
-      alt="Tauri logo"
-    />
+    <a href="https://tauri.app" target="_blank">
+      <img class="p-7" src="tauri_logo.png" alt="Tauri logo" />
+    </a>
     {#if !isWindows}
       <a href="##" class="nv justify-between h-8" on:click={toggleDark}>
         {#if isDark}
           Switch to Light mode
-          <div class="i-ph-sun" />
+          <div class="i-ph-sun"></div>
         {:else}
           Switch to Dark mode
-          <div class="i-ph-moon" />
+          <div class="i-ph-moon"></div>
         {/if}
       </a>
       <br />
-      <div class="bg-white/5 h-2px" />
+      <div class="bg-white/5 h-2px"></div>
       <br />
     {/if}
 
@@ -422,26 +423,26 @@
       href="https://tauri.app/v1/guides/"
     >
       Documentation
-      <span class="i-codicon-link-external" />
+      <span class="i-codicon-link-external"></span>
     </a>
     <a
       class="nv justify-between h-8"
       target="_blank"
       href="https://github.com/tauri-apps/tauri"
     >
       GitHub
-      <span class="i-codicon-link-external" />
+      <span class="i-codicon-link-external"></span>
     </a>
     <a
       class="nv justify-between h-8"
       target="_blank"
       href="https://github.com/tauri-apps/tauri/tree/dev/examples/api"
     >
       Source
-      <span class="i-codicon-link-external" />
+      <span class="i-codicon-link-external"></span>
     </a>
     <br />
-    <div class="bg-white/5 h-2px" />
+    <div class="bg-white/5 h-2px"></div>
     <br />
     <div
       class="flex flex-col overflow-y-auto children-h-10 children-flex-none gap-1"
@@ -456,7 +457,7 @@
               isSideBarOpen = false
             }}
           >
-            <div class="{view.icon} mr-2" />
+            <div class="{view.icon} mr-2"></div>
             <p>{view.label}</p></a
           >
         {/if}
@@ -485,21 +486,23 @@
       id="console"
       class="select-none h-15rem grid grid-rows-[2px_2rem_1fr] gap-1 overflow-hidden"
     >
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
         on:mousedown={startResizingConsole}
         class="bg-black/20 h-2px cursor-ns-resize"
-      />
+      ></div>
       <div class="flex justify-between items-center px-2">
         <p class="font-semibold">Console</p>
-        <div
-          class="cursor-pointer h-85% rd-1 p-1 flex justify-center items-center
+        <button
+          aria-label="Clear Console"
+          class="cursor-pointer h-85% rd-1 p-1 flex justify-center items-center border-none bg-inherit
                 hover:bg-hoverOverlay dark:hover:bg-darkHoverOverlay
                 active:bg-hoverOverlay/25 dark:active:bg-darkHoverOverlay/25
           "
           on:click={clear}
         >
-          <div class="i-codicon-clear-all" />
-        </div>
+          <div class="i-codicon-clear-all"></div>
+        </button>
       </div>
       <div
         bind:this={consoleTextEl}

examples/api/src/main.js

@@ -5,8 +5,9 @@
 import 'uno.css'
 import './app.css'
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.querySelector('#app')
 })
 

examples/api/src/views/Cli.svelte

@@ -1,14 +1,14 @@
 <script>
-  import { getMatches } from "@tauri-apps/plugin-cli";
+  import { getMatches } from '@tauri-apps/plugin-cli'
 
-  export let onMessage;
+  export let onMessage
 
   function cliMatches() {
-    getMatches().then(onMessage).catch(onMessage);
+    getMatches().then(onMessage).catch(onMessage)
   }
 </script>
 
-<p>
+<div>
   This binary can be run from the terminal and takes the following arguments:
   <code class="code-block flex flex-wrap my-2">
     <pre>
@@ -17,7 +17,7 @@
   --verbose</pre>
   </code>
   Additionally, it has a <code>update --background</code> subcommand.
-</p>
+</div>
 <br />
 <div class="note">
   Note that the arguments are only parsed, not implemented.

examples/api/src/views/Http.svelte

@@ -1,69 +1,69 @@
 <script>
-  import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
-  import { JsonView } from "@zerodevx/svelte-json-view";
+  import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
+  import { JsonView } from '@zerodevx/svelte-json-view'
 
-  let httpMethod = "GET";
-  let httpBody = "";
+  let httpMethod = 'GET'
+  let httpBody = ''
 
-  export let onMessage;
+  export let onMessage
 
   async function makeHttpRequest() {
-    let method = httpMethod || "GET";
+    let method = httpMethod || 'GET'
 
     const options = {
-      method: method || "GET",
-      headers: {},
-    };
+      method: method || 'GET',
+      headers: {}
+    }
 
-    let bodyType;
+    let bodyType
 
-    if (method !== "GET") {
-      options.body = httpBody;
+    if (method !== 'GET') {
+      options.body = httpBody
 
       if (
-        (httpBody.startsWith("{") && httpBody.endsWith("}")) ||
-        (httpBody.startsWith("[") && httpBody.endsWith("]"))
+        (httpBody.startsWith('{') && httpBody.endsWith('}')) ||
+        (httpBody.startsWith('[') && httpBody.endsWith(']'))
       ) {
-        options.headers["Content-Type"] = "application/json";
-        bodyType = "json";
-      } else if (httpBody !== "") {
-        bodyType = "text";
+        options.headers['Content-Type'] = 'application/json'
+        bodyType = 'json'
+      } else if (httpBody !== '') {
+        bodyType = 'text'
       }
     }
 
-    const response = await tauriFetch("http://localhost:3003", options);
+    const response = await tauriFetch('http://localhost:3003', options)
     const body =
-      bodyType === "json" ? await response.json() : await response.text();
+      bodyType === 'json' ? await response.json() : await response.text()
 
     onMessage({
       url: response.url,
       status: response.status,
       ok: response.ok,
       headers: Object.fromEntries(response.headers.entries()),
-      body,
-    });
+      body
+    })
   }
 
   /// http form
-  let foo = "baz";
-  let bar = "qux";
-  let result = null;
+  let foo = 'baz'
+  let bar = 'qux'
+  let result = null
 
   async function doPost() {
-    const form = new FormData();
-    form.append("foo", foo);
-    form.append("bar", bar);
-    const response = await tauriFetch("http://localhost:3003/tauri", {
-      method: "POST",
-      body: form,
-    });
+    const form = new FormData()
+    form.append('foo', foo)
+    form.append('bar', bar)
+    const response = await tauriFetch('http://localhost:3003/tauri', {
+      method: 'POST',
+      body: form
+    })
     result = {
       url: response.url,
       status: response.status,
       ok: response.ok,
       headers: Object.fromEntries(response.headers.entries()),
-      body: await response.text(),
-    };
+      body: await response.text()
+    }
   }
 </script>
 
@@ -82,7 +82,7 @@
     placeholder="Request body"
     rows="5"
     bind:value={httpBody}
-  />
+  ></textarea>
   <br />
   <button class="btn" id="make-request"> Make request </button>
 </form>