Updates and build chain improvements

src/App.svelte

@@ -1,25 +1,41 @@
-<script>
-  import { onDestroy } from 'svelte'
-  import { invoke } from '@tauri-apps/api'
-  import { listen, once } from '@tauri-apps/api/event'
-  
-  let seconds = 5
+<script type="ts">
+  import { onDestroy, onMount } from "svelte";
+  import type { UnlistenFn } from "@tauri-apps/api/event";
+  import { invoke } from "@tauri-apps/api";
+  import { listen } from "@tauri-apps/api/event";
+
+  let seconds = 5;
+  let timer_tick_unlisten: Promise<UnlistenFn> | null = null;
+  let timer_done_unlisten: Promise<UnlistenFn> | null = null;
+
+  type Timer = {
+    id: string;
+    elapsed: {
+      secs: number;
+      nsecs: number;
+    };
+  };
+
+  onMount(() => {
+    timer_tick_unlisten = listen<Timer>("timer-tick", (event) => {
+      console.log("Tick!", event.payload.id, event.payload.elapsed);
+    });
+
+    timer_done_unlisten = listen<Timer>("timer-done", (event) => {
+      console.log("Done!", event.payload.id);
+    });
+  });
+
+  onDestroy(() => {
+    timer_tick_unlisten?.then((ttu) => ttu());
+    timer_done_unlisten?.then((tdu) => tdu());
+  });
 
   function start_timer() {
-    invoke('start_timer', {
+    invoke("start_timer", {
       duration: { secs: seconds, nanos: 0 },
       message: "Hi!",
-    })
-
-    let timer_tick_unlisten = listen('timer-tick', (event) => {
-      console.log("Tick!", event.payload.id, event.payload.elapsed)
-    })
-
-    once('timer-done', (event) => {
-      console.log("Done!", event.payload.id)
-
-      timer_tick_unlisten.then(ttu => ttu())
-    })
+    });
   }
 </script>
 
@@ -28,5 +44,5 @@
     Fire after
     <input type="number" bind:value={seconds} />
   </label>
-  <button on:click="{start_timer}">Fire!</button>
+  <button on:click={start_timer}>Fire!</button>
 </main>