feat: tauri serial polyfill

src/env.d.ts

@@ -0,0 +1,14 @@
+/// <references types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly TAURI_FAMILY?: string
+  readonly TAURI_PLATFORM_VERSION?: string
+  readonly TAURI_TARGET_TRIPLE?: string
+  readonly TAURI_ARCH?: string
+  readonly TAURI_DEBUG?: boolean
+  readonly TAURI_PLATFORM_TYPE?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/i18n/de/index.ts

@@ -41,8 +41,7 @@ const de = {
       "Auch wenn alle Chromium-basieren Desktop Browser diese Voraussetzung grundsätzlich erfüllen, haben einige Browser ",
     INFO_BROWSER_INFIX: "wie zum Beispiel Brave",
     INFO_BROWSER_SUFFIX: " sich bewusst dazu entschieden die API zu deaktivieren.",
-    DOWNLOAD_CHROMIUM: "Chromium herunterladen",
-    OTHER_OPTIONS: "Andere häufig genutzte Alternativen",
+    DOWNLOAD_APP: "Desktop-app herunterladen",
   },
   configure: {
     chords: {

src/i18n/en/index.ts

@@ -39,8 +39,7 @@ const en = {
       "Though all chromium-based desktop browsers fulfill this requirement, some derivations such as Brave ",
     INFO_BROWSER_INFIX: "have been known to disable the API intentionally",
     INFO_BROWSER_SUFFIX: ".",
-    DOWNLOAD_CHROMIUM: "Download Chromium",
-    OTHER_OPTIONS: "Other popular options include",
+    DOWNLOAD_APP: "Download the desktop app",
   },
   configure: {
     chords: {

src/lib/serial/device.ts

@@ -2,10 +2,16 @@ import {LineBreakTransformer} from "$lib/serial/line-break-transformer"
 import {serialLog} from "$lib/serial/connection"
 import type {Chord} from "$lib/serial/chord"
 import {parseChordActions, parsePhrase, stringifyChordActions, stringifyPhrase} from "$lib/serial/chord"
+import {browser} from "$app/environment"
 
 export const VENDOR_ID = 0x239a
 
+if (browser && import.meta.env.TAURI_FAMILY !== undefined) {
+  await import("./tauri-serial")
+}
+
 export async function getViablePorts(): Promise<SerialPort[]> {
+  console.log(await navigator.serial.getPorts().then(it => it.map(it => it.getInfo())))
   return navigator.serial.getPorts().then(ports => ports.filter(it => it.getInfo().usbVendorId === VENDOR_ID))
 }
 

src/lib/serial/tauri-serial.ts

@@ -0,0 +1,22 @@
+import {invoke} from "@tauri-apps/api"
+
+// @ts-expect-error polyfill
+// noinspection JSConstantReassignment
+navigator.serial = {
+  getPorts(): Promise<SerialPort[]> {
+    return invoke<any[]>("plugin:serial|get_serial_ports").then(ports =>
+      ports.map<Partial<SerialPort>>(port => ({
+        getInfo() {
+          return {
+            name: port["name"],
+            usbVendorId: port["vendor_id"],
+            usbProductId: port["product_id"],
+            serialNumber: port["serial_number"],
+            manufacturer: port["manufacturer"],
+            product: port["product"],
+          } as SerialPortInfo
+        },
+      })),
+    ) as Promise<SerialPort[]>
+  },
+}

src/routes/+layout.svelte

@@ -57,7 +57,7 @@
       } satisfies RegisterSWOptions)
     }
 
-    if ($userPreferences.autoConnect && (await canAutoConnect())) await initSerial()
+    if (browser && $userPreferences.autoConnect && (await canAutoConnect())) await initSerial()
   })
 
   $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ""
@@ -76,7 +76,7 @@
   <slot />
 </main>
 
-{#if browser && !("serial" in navigator)}
+{#if !import.meta.env.TAURI_FAMILY && browser && !("serial" in navigator)}
   <BrowserWarning />
 {/if}
 

src/routes/BrowserWarning.svelte

@@ -17,19 +17,10 @@
     >{$LL.browserWarning.INFO_BROWSER_SUFFIX()}
   </p>
   <div>
-    <a href="https://www.chromium.org/getting-involved/download-chromium/" target="_blank" class="chrome"
-      >{$LL.browserWarning.DOWNLOAD_CHROMIUM()}</a
+    <a href="https://github.com/Theaninova/dotio/releases" target="_blank"
+      >{$LL.browserWarning.DOWNLOAD_APP()}</a
     >
   </div>
-  <h5>{$LL.browserWarning.OTHER_OPTIONS()}</h5>
-  <div>
-    <a href="https://www.google.com/chrome/" target="_blank" class="chrome">Chrome</a>
-    <a href="https://www.microsoft.com/en-us/edge/download?form=MA13FJ" target="_blank" class="edge"
-      >Microsoft Edge</a
-    >
-    <a href="https://www.opera.com/" target="_blank" class="opera">Opera</a>
-    <a href="https://vivaldi.com/download/" class="vivaldi">Vivaldi</a>
-  </div>
 </dialog>
 
 <style lang="scss">
@@ -77,22 +68,6 @@
 
       background: var(--md-sys-color-on-error);
     }
-
-    &.chrome::before {
-      mask: url("/browsers/googlechrome.svg");
-    }
-
-    &.edge::before {
-      mask: url("/browsers/microsoftedge.svg");
-    }
-
-    &.opera::before {
-      mask: url("/browsers/opera.svg");
-    }
-
-    &.vivaldi::before {
-      mask: url("/browsers/vivaldi.svg");
-    }
   }
 
   dialog::backdrop {

src/routes/Profile.svelte

@@ -12,6 +12,18 @@
     await loadLocaleAsync(locale)
     setLocale(locale)
   })()
+
+  function switchTheme() {
+    const mode = $theme.mode === "light" ? "dark" : "light"
+    if (document.startViewTransition) {
+      document.startViewTransition(async () => {
+        $theme.mode = mode
+        await tick()
+      })
+    } else {
+      $theme.mode = mode
+    }
+  }
 </script>
 
 <section>
@@ -26,12 +38,7 @@
     <button
       title={$theme.mode === "light" ? $LL.profile.theme.LIGHT_MODE() : $LL.profile.theme.DARK_MODE()}
       class="icon"
-      on:click={() => {
-        document.startViewTransition(async () => {
-          $theme.mode = $theme.mode === "light" ? "dark" : "light"
-          await tick()
-        })
-      }}
+      on:click={switchTheme}
     >
       {#if $theme.mode === "light"}
         light_mode