feat: tauri serial polyfill

src/routes/+layout.svelte

@@ -9,9 +9,7 @@
   import Navigation from "./Navigation.svelte"
   import {canAutoConnect} from "$lib/serial/device"
   import {initSerial} from "$lib/serial/connection"
-  import {pwaInfo} from "virtual:pwa-info"
   import type {LayoutServerData} from "./$types"
-  import type {RegisterSWOptions} from "vite-plugin-pwa/types"
   import {browser} from "$app/environment"
   import BrowserWarning from "./BrowserWarning.svelte"
   import "tippy.js/animations/shift-away.css"
@@ -46,21 +44,15 @@
       const dark = it.mode === "dark" // window.matchMedia("(prefers-color-scheme: dark)").matches
       applyTheme(theme, {target: document.body, dark})
     })
-
-    if (pwaInfo) {
-      const {registerSW} = await import("virtual:pwa-register")
-      registerSW({
-        immediate: true,
-        onRegisterError(error) {
-          console.log("ServiceWorker Registration Error", error)
-        },
-      } satisfies RegisterSWOptions)
+    if (import.meta.env.TAURI_FAMILY === undefined) {
+      const {initPwa} = await import("./pwa-setup")
+      await initPwa()
     }
 
     if (browser && $userPreferences.autoConnect && (await canAutoConnect())) await initSerial()
   })
 
-  $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ""
+  let webManifestLink = ""
 </script>
 
 <svelte:head>
@@ -76,7 +68,7 @@
   <slot />
 </main>
 
-{#if !import.meta.env.TAURI_FAMILY && browser && !("serial" in navigator)}
+{#if import.meta.env.TAURI_FAMILY === undefined && browser && !("serial" in navigator)}
   <BrowserWarning />
 {/if}
 

src/routes/ConnectionPopup.svelte

@@ -31,7 +31,7 @@
         <button
           class="secondary"
           on:click={() => {
-            $serialPort.forget()
+            $serialPort?.forget()
             $serialPort = undefined
           }}><span class="icon">usb_off</span>{$LL.deviceManager.DISCONNECT()}</button
         >
@@ -45,7 +45,7 @@
           href="/terminal"
           title={$LL.deviceManager.TERMINAL()}
           class="icon"
-          disabled={$serialPort === undefined}
+          class:disabled={$serialPort === undefined}
           on:click={() => (terminal = !terminal)}>terminal</a
         >
         <button
@@ -62,13 +62,13 @@
         <h3>{$LL.deviceManager.bootMenu.TITLE()}</h3>
         <button
           on:click={() => {
-            $serialPort.reboot()
+            $serialPort?.reboot()
             $serialPort = undefined
           }}><span class="icon">restart_alt</span>{$LL.deviceManager.bootMenu.REBOOT()}</button
         >
         <button
           on:click={() => {
-            $serialPort.bootloader()
+            $serialPort?.bootloader()
             $serialPort = undefined
           }}><span class="icon">rule_settings</span>{$LL.deviceManager.bootMenu.BOOTLOADER()}</button
         >
@@ -176,31 +176,22 @@
 
     transition: all 250ms ease;
 
-    &:disabled {
-      cursor: default;
-      opacity: 0.5;
-    }
-
     &.icon {
       aspect-ratio: 1;
       padding-inline-end: 8px;
       font-size: 24px;
       border-radius: 50%;
     }
+  }
 
-    &.secondary {
-      color: var(--md-sys-color-on-secondary);
-      background: var(--md-sys-color-secondary);
-    }
+  a.disabled,
+  button:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
 
-    &.error {
-      color: var(--md-sys-color-on-error);
-      background: var(--md-sys-color-error);
-    }
-
-    &:active:not(:disabled) {
-      color: var(--md-sys-color-on-surface-variant);
-      background: var(--md-sys-color-surface-variant);
-    }
+  button:active:not(:disabled) {
+    color: var(--md-sys-color-on-surface-variant);
+    background: var(--md-sys-color-surface-variant);
   }
 </style>

src/routes/Navigation.svelte

@@ -47,9 +47,11 @@
       <button transition:fly={{x: -8}} class="icon" on:click={triggerShare}>share</button>
       <div transition:slide class="separator" />
     {/if}
-    {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
-      <PwaStatus />
-    {/await}
+    {#if import.meta.env.TAURI_FAMILY === undefined}
+      {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }}
+        <PwaStatus />
+      {/await}
+    {/if}
     {#if $serialPort}
       <button title={$LL.backup.TITLE()} use:popup={BackupPopup} class="icon {$syncStatus}">
         {#if $syncStatus === "downloading"}

src/routes/pwa-setup.ts

@@ -0,0 +1,16 @@
+import type {RegisterSWOptions} from "vite-plugin-pwa/types"
+
+export async function initPwa(): Promise<string> {
+  // @ts-expect-error confused TS
+  const {pwaInfo} = await import("virtual:pwa-info")
+  // @ts-expect-error confused TS
+  const {registerSW} = await import("virtual:pwa-register")
+  registerSW({
+    immediate: true,
+    onRegisterError(error) {
+      console.log("ServiceWorker Registration Error", error)
+    },
+  } satisfies RegisterSWOptions)
+
+  return pwaInfo ? pwaInfo.webManifest.linkTag : ""
+}