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

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: FabianLars <fabianlars@fabianlars.de>

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,42 +334,46 @@
       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}
@@ -377,13 +381,13 @@
 <!-- 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,7 +423,7 @@
       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"
@@ -430,7 +431,7 @@
       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"
@@ -438,10 +439,10 @@
       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>

examples/api/src/views/Scanner.svelte

@@ -1,38 +1,44 @@
 <script>
-  import { scan, checkPermissions, requestPermissions, Format, cancel } from "@tauri-apps/plugin-barcode-scanner";
+  import {
+    scan,
+    checkPermissions,
+    requestPermissions,
+    Format,
+    cancel
+  } from '@tauri-apps/plugin-barcode-scanner'
 
-  export let onMessage;
+  export let onMessage
 
-  let scanning = false;
-  let windowed = true;
-  let formats = [Format.QRCode];
-  const supportedFormats = [Format.QRCode, Format.EAN13];
+  let scanning = false
+  let windowed = true
+  let formats = [Format.QRCode]
+  const supportedFormats = [Format.QRCode, Format.EAN13]
 
   async function startScan() {
-    let permission = await checkPermissions();
+    let permission = await checkPermissions()
     if (permission === 'prompt') {
-      permission = await requestPermissions();
+      permission = await requestPermissions()
     }
     if (permission === 'granted') {
-      scanning = true;
+      scanning = true
       scan({ windowed, formats })
         .then((res) => {
-          scanning = false;
-          onMessage(res);
+          scanning = false
+          onMessage(res)
         })
         .catch((error) => {
-          scanning = false;
-          onMessage(error);
-        });
+          scanning = false
+          onMessage(error)
+        })
     } else {
       onMessage('Permission denied')
     }
   }
 
   async function cancelScan() {
-    await cancel();
-    scanning = false;
-    onMessage("cancelled");
+    await cancel()
+    scanning = false
+    onMessage('cancelled')
   }
 </script>
 
@@ -59,11 +65,12 @@
       <div class="barcode-scanner--area--container">
         <div class="relative">
           <p>Aim your camera at a QR code</p>
-          <button class="btn" type="button" on:click={cancelScan}>Cancel</button>
+          <button class="btn" type="button" on:click={cancelScan}>Cancel</button
+          >
         </div>
         <div class="square surround-cover">
           <div class="barcode-scanner--area--outer surround-cover">
-            <div class="barcode-scanner--area--inner" />
+            <div class="barcode-scanner--area--inner"></div>
           </div>
         </div>
       </div>
@@ -111,7 +118,7 @@
     transition: 0.3s;
   }
   .square:after {
-    content: "";
+    content: '';
     top: 0;
     display: block;
     padding-bottom: 100%;
@@ -141,7 +148,8 @@
     width: 100%;
     margin: 1rem;
     border: 2px solid #fff;
-    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 0.5),
+    box-shadow:
+      0px 0px 2px 1px rgb(0 0 0 / 0.5),
       inset 0px 0px 2px 1px rgb(0 0 0 / 0.5);
     border-radius: 1rem;
   }

examples/api/src/views/Updater.svelte

@@ -1,56 +1,56 @@
 <script>
-  import { check } from "@tauri-apps/plugin-updater";
-  import { relaunch } from "@tauri-apps/plugin-process";
+  import { check } from '@tauri-apps/plugin-updater'
+  import { relaunch } from '@tauri-apps/plugin-process'
 
-  export let onMessage;
+  export let onMessage
 
-  let isChecking, isInstalling, newUpdate;
+  let isChecking, isInstalling, newUpdate
   let totalSize = 0,
-    downloadedSize = 0;
+    downloadedSize = 0
 
   async function checkUpdate() {
-    isChecking = true;
+    isChecking = true
     try {
-      const update = await check();
-      onMessage(`Should update: ${update.available}`);
-      onMessage(update);
+      const update = await check()
+      onMessage(`Should update: ${update.available}`)
+      onMessage(update)
 
-      newUpdate = update;
+      newUpdate = update
     } catch (e) {
-      onMessage(e);
+      onMessage(e)
     } finally {
-      isChecking = false;
+      isChecking = false
     }
   }
 
   async function install() {
-    isInstalling = true;
-    downloadedSize = 0;
+    isInstalling = true
+    downloadedSize = 0
     try {
       await newUpdate.downloadAndInstall((downloadProgress) => {
         switch (downloadProgress.event) {
-          case "Started":
-            totalSize = downloadProgress.data.contentLength;
-            break;
-          case "Progress":
-            downloadedSize += downloadProgress.data.chunkLength;
-            break;
-          case "Finished":
-            break;
+          case 'Started':
+            totalSize = downloadProgress.data.contentLength
+            break
+          case 'Progress':
+            downloadedSize += downloadProgress.data.chunkLength
+            break
+          case 'Finished':
+            break
         }
-      });
-      onMessage("Installation complete, restarting...");
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-      await relaunch();
+      })
+      onMessage('Installation complete, restarting...')
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+      await relaunch()
     } catch (e) {
-      console.error(e);
-      onMessage(e);
+      console.error(e)
+      onMessage(e)
     } finally {
-      isInstalling = false;
+      isInstalling = false
     }
   }
 
-  $: progress = totalSize ? Math.round((downloadedSize / totalSize) * 100) : 0;
+  $: progress = totalSize ? Math.round((downloadedSize / totalSize) * 100) : 0
 </script>
 
 <div class="flex children:grow children:h10">
@@ -61,7 +61,7 @@
   {:else}
     <div class="progress">
       <span>{progress}%</span>
-      <div class="progress-bar" style="width: {progress}%" />
+      <div class="progress-bar" style="width: {progress}%"></div>
     </div>
   {/if}
 </div>