feat(updater): add plugin (#350)

Co-authored-by: Fabian-Lars <fabianlars@fabianlars.de>

examples/api/src/views/Updater.svelte

@@ -1,76 +1,86 @@
 <script>
-  import { onMount, onDestroy } from 'svelte'
+  import { check } from "tauri-plugin-updater-api";
+  import { relaunch } from "tauri-plugin-process-api";
 
-  // This example show how updater events work when dialog is disabled.
-  // This allow you to use custom dialog for the updater.
-  // This is your responsibility to restart the application after you receive the STATUS: DONE.
+  export let onMessage;
 
-  import { checkUpdate, installUpdate } from '@tauri-apps/api/updater'
-  import { listen } from '@tauri-apps/api/event'
-  import { relaunch } from 'tauri-plugin-process-api'
+  let isChecking, isInstalling, newUpdate;
+  let totalSize = 0,
+    downloadedSize = 0;
 
-  export let onMessage
-  let unlisten
-
-  onMount(async () => {
-    unlisten = await listen('tauri://update-status', onMessage)
-  })
-  onDestroy(() => {
-    if (unlisten) {
-      unlisten()
-    }
-  })
-
-  let isChecking, isInstalling, newUpdate
-
-  async function check() {
-    isChecking = true
+  async function checkUpdate() {
+    isChecking = true;
     try {
-      const { shouldUpdate, manifest } = await checkUpdate()
-      onMessage(`Should update: ${shouldUpdate}`)
-      onMessage(manifest)
+      const update = await check();
+      onMessage(`Should update: ${update.response.available}`);
+      onMessage(update.response);
 
-      newUpdate = shouldUpdate
+      newUpdate = update;
     } catch (e) {
-      onMessage(e)
+      onMessage(e);
     } finally {
-      isChecking = false
+      isChecking = false;
     }
   }
 
   async function install() {
-    isInstalling = true
+    isInstalling = true;
+    downloadedSize = 0;
     try {
-      await installUpdate()
-      onMessage('Installation complete, restart required.')
-      await relaunch()
+      await newUpdate.downloadAndInstall((downloadProgress) => {
+        switch (downloadProgress.event) {
+          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();
     } catch (e) {
-      onMessage(e)
+      console.error(e);
+      onMessage(e);
     } finally {
-      isInstalling = false
+      isInstalling = false;
     }
   }
+
+  $: progress = totalSize ? Math.round((downloadedSize / totalSize) * 100) : 0;
 </script>
 
 <div class="flex children:grow children:h10">
   {#if !isChecking && !newUpdate}
-    <button class="btn" on:click={check}>Check update</button>
+    <button class="btn" on:click={checkUpdate}>Check update</button>
   {:else if !isInstalling && newUpdate}
     <button class="btn" on:click={install}>Install update</button>
   {:else}
-    <button
-      class="btn text-accentText dark:text-darkAccentText flex items-center justify-center"
-      ><div class="spinner animate-spin" /></button
-    >
+    <div class="progress">
+      <span>{progress}%</span>
+      <div class="progress-bar" style="width: {progress}%" />
+    </div>
   {/if}
 </div>
 
 <style>
-  .spinner {
-    height: 1.2rem;
-    width: 1.2rem;
-    border-radius: 50rem;
-    color: currentColor;
-    border: 2px dashed currentColor;
+  .progress {
+    width: 100%;
+    height: 50px;
+    position: relative;
+    margin-top: 5%;
+  }
+
+  .progress > span {
+    font-size: 1.2rem;
+  }
+
+  .progress-bar {
+    height: 30px;
+    background-color: hsl(32, 94%, 46%);
+    border: 1px solid #333;
   }
 </style>