feat(api): add abstractions to updater and window event listeners

.changes/api-event-listeners.md

@@ -0,0 +1,5 @@
+---
+"api": patch
+---
+
+Added helper functions to listen to updater and window events.

examples/api/src-tauri/src/main.rs

@@ -197,24 +197,27 @@ fn main() {
       event: WindowEvent::CloseRequested { api, .. },
       ..
     } => {
-      let app_handle = app_handle.clone();
-      let window = app_handle.get_window(&label).unwrap();
-      // use the exposed close api, and prevent the event loop to close
-      api.prevent_close();
-      // ask the user if he wants to quit
-      ask(
-        Some(&window),
-        "Tauri API",
-        "Are you sure that you want to close this window?",
-        move |answer| {
-          if answer {
-            // .close() cannot be called on the main thread
-            std::thread::spawn(move || {
-              app_handle.get_window(&label).unwrap().close().unwrap();
-            });
-          }
-        },
-      );
+      // for other windows, we handle it in JS
+      if label == "main" {
+        let app_handle = app_handle.clone();
+        let window = app_handle.get_window(&label).unwrap();
+        // use the exposed close api, and prevent the event loop to close
+        api.prevent_close();
+        // ask the user if he wants to quit
+        ask(
+          Some(&window),
+          "Tauri API",
+          "Are you sure that you want to close this window?",
+          move |answer| {
+            if answer {
+              // .close() cannot be called on the main thread
+              std::thread::spawn(move || {
+                app_handle.get_window(&label).unwrap().close().unwrap();
+              });
+            }
+          },
+        );
+      }
     }
 
     // Keep the event loop running even if all windows are closed

examples/api/src/App.svelte

@@ -1,150 +1,193 @@
 <script>
-  import { onMount } from "svelte";
-  import { writable } from "svelte/store";
-  import hotkeys from "hotkeys-js";
-  import { open } from "@tauri-apps/api/shell";
-  import { invoke } from "@tauri-apps/api/tauri";
-  import { appWindow } from "@tauri-apps/api/window";
-
-  import Welcome from "./components/Welcome.svelte";
-  import Cli from "./components/Cli.svelte";
-  import Communication from "./components/Communication.svelte";
-  import Dialog from "./components/Dialog.svelte";
-  import FileSystem from "./components/FileSystem.svelte";
-  import Http from "./components/Http.svelte";
-  import Notifications from "./components/Notifications.svelte";
-  import Window from "./components/Window.svelte";
-  import Shortcuts from "./components/Shortcuts.svelte";
-  import Shell from "./components/Shell.svelte";
-  import Updater from "./components/Updater.svelte";
-  import Clipboard from "./components/Clipboard.svelte";
+  import { onMount } from 'svelte'
+  import { writable } from 'svelte/store'
+  import hotkeys from 'hotkeys-js'
+  import { open } from '@tauri-apps/api/shell'
+  import { invoke } from '@tauri-apps/api/tauri'
+  import { appWindow } from '@tauri-apps/api/window'
+  import { confirm } from '@tauri-apps/api/dialog'
+
+  import Welcome from './components/Welcome.svelte'
+  import Cli from './components/Cli.svelte'
+  import Communication from './components/Communication.svelte'
+  import Dialog from './components/Dialog.svelte'
+  import FileSystem from './components/FileSystem.svelte'
+  import Http from './components/Http.svelte'
+  import Notifications from './components/Notifications.svelte'
+  import Window from './components/Window.svelte'
+  import Shortcuts from './components/Shortcuts.svelte'
+  import Shell from './components/Shell.svelte'
+  import Updater from './components/Updater.svelte'
+  import Clipboard from './components/Clipboard.svelte'
   import WebRTC from './components/WebRTC.svelte'
-  import HttpForm from "./components/HttpForm.svelte";
+  import HttpForm from './components/HttpForm.svelte'
 
-  const MENU_TOGGLE_HOTKEY = 'ctrl+b';
+  const MENU_TOGGLE_HOTKEY = 'ctrl+b'
 
   onMount(() => {
     hotkeys(MENU_TOGGLE_HOTKEY, () => {
-      invoke('menu_toggle');
-    });
-  });
+      invoke('menu_toggle')
+    })
+  })
+
+  if (appWindow.label !== 'main') {
+    appWindow.onCloseRequested(async (event) => {
+      const confirmed = await confirm('Are you sure?')
+      if (!confirmed) {
+        // user did not confirm closing the window; let's prevent it
+        event.preventDefault()
+      }
+    })
+  }
 
-  appWindow.listen('tauri://file-drop', function (event) {
-    onMessage(`File drop: ${event.payload}`);
-  });
+  appWindow.onFileDrop((event) => {
+    onMessage(`File drop: ${JSON.stringify(event.payload)}`)
+  })
 
   const views = [
     {
-      label: "Welcome",
-      component: Welcome,
+      label: 'Welcome',
+      component: Welcome
     },
     {
-      label: "Messages",
-      component: Communication,
+      label: 'Messages',
+      component: Communication
     },
     {
-      label: "CLI",
-      component: Cli,
+      label: 'CLI',
+      component: Cli
     },
     {
-      label: "Dialog",
-      component: Dialog,
+      label: 'Dialog',
+      component: Dialog
     },
     {
-      label: "File system",
-      component: FileSystem,
+      label: 'File system',
+      component: FileSystem
     },
     {
-      label: "HTTP",
-      component: Http,
+      label: 'HTTP',
+      component: Http
     },
     {
-      label: "HTTP Form",
-      component: HttpForm,
+      label: 'HTTP Form',
+      component: HttpForm
     },
     {
-      label: "Notifications",
-      component: Notifications,
+      label: 'Notifications',
+      component: Notifications
     },
     {
-      label: "Window",
-      component: Window,
+      label: 'Window',
+      component: Window
     },
     {
-      label: "Shortcuts",
-      component: Shortcuts,
+      label: 'Shortcuts',
+      component: Shortcuts
     },
     {
-      label: "Shell",
-      component: Shell,
+      label: 'Shell',
+      component: Shell
     },
     {
-      label: "Updater",
-      component: Updater,
+      label: 'Updater',
+      component: Updater
     },
     {
-      label: "Clipboard",
-      component: Clipboard,
+      label: 'Clipboard',
+      component: Clipboard
     },
     {
-      label: "WebRTC",
-      component: WebRTC,
-    },
-  ];
+      label: 'WebRTC',
+      component: WebRTC
+    }
+  ]
 
-  let selected = views[0];
+  let selected = views[0]
 
-  let responses = writable([]);
+  let responses = writable([])
 
   function select(view) {
-    selected = view;
+    selected = view
   }
 
   function onMessage(value) {
-    responses.update(r => [{ text: `[${new Date().toLocaleTimeString()}]` + ': ' + (typeof value === "string" ? value : JSON.stringify(value)) }, ...r])
+    responses.update((r) => [
+      {
+        text:
+          `[${new Date().toLocaleTimeString()}]` +
+          ': ' +
+          (typeof value === 'string' ? value : JSON.stringify(value))
+      },
+      ...r
+    ])
   }
 
   // this function is renders HTML without sanitizing it so it's insecure
   // we only use it with our own input data
   function insecureRenderHtml(html) {
-    responses.update(r => [{ html }, ...r])
+    responses.update((r) => [{ html }, ...r])
   }
 
   function clear() {
-    responses.update(() => []);
+    responses.update(() => [])
   }
 
   function onLogoClick() {
-    open("https://tauri.app/");
+    open('https://tauri.app/')
   }
 </script>
 
 <main>
   <div class="flex row noselect just-around container" data-tauri-drag-region>
-    <img class="logo" src="tauri logo.png" height="60" on:click={onLogoClick} alt="logo" />
+    <img
+      class="logo"
+      src="tauri logo.png"
+      height="60"
+      on:click={onLogoClick}
+      alt="logo"
+    />
     <div>
-      <a class="dark-link" target="_blank" href="https://tauri.app/en/docs/get-started/intro">
+      <a
+        class="dark-link"
+        target="_blank"
+        href="https://tauri.app/en/docs/get-started/intro"
+      >
         Documentation
       </a>
-      <a class="dark-link" target="_blank" href="https://github.com/tauri-apps/tauri">
+      <a
+        class="dark-link"
+        target="_blank"
+        href="https://github.com/tauri-apps/tauri"
+      >
         Github
       </a>
-      <a class="dark-link" target="_blank" href="https://github.com/tauri-apps/tauri/tree/dev/tauri/examples/api">
+      <a
+        class="dark-link"
+        target="_blank"
+        href="https://github.com/tauri-apps/tauri/tree/dev/tauri/examples/api"
+      >
         Source
       </a>
     </div>
   </div>
   <div class="flex row">
     <div class="view-container">
       {#each views as view}
-      <p class="nv noselect {selected === view ? 'nv_selected' : ''}" on:click={()=> select(view)}
+        <p
+          class="nv noselect {selected === view ? 'nv_selected' : ''}"
+          on:click={() => select(view)}
         >
-        {view.label}
-      </p>
+          {view.label}
+        </p>
       {/each}
     </div>
     <div class="content">
-      <svelte:component this={selected.component} {onMessage} {insecureRenderHtml} />
+      <svelte:component
+        this={selected.component}
+        {onMessage}
+        {insecureRenderHtml}
+      />
     </div>
   </div>
   <div id="response">
@@ -154,9 +197,9 @@
     </p>
     {#each $responses as r}
       {#if r.text}
-      <p>{r.text}</p>
+        <p>{r.text}</p>
       {:else}
-      {@html r.html}
+        {@html r.html}
       {/if}
     {/each}
   </div>
@@ -168,8 +211,8 @@
   }
 
   .view-container {
-    width:15em;
-    margin-left:0.5em;
+    width: 15em;
+    margin-left: 0.5em;
   }
 
   #response {

tooling/api/src/helpers/event.ts

@@ -5,7 +5,6 @@
 import { WindowLabel } from '../window'
 import { invokeTauriCommand } from './tauri'
 import { transformCallback } from '../tauri'
-import { LiteralUnion } from 'type-fest'
 
 export interface Event<T> {
   /** Event name */
@@ -18,25 +17,7 @@ export interface Event<T> {
   payload: T
 }
 
-export type EventName = LiteralUnion<
-  | 'tauri://update'
-  | 'tauri://update-available'
-  | 'tauri://update-download-progress'
-  | 'tauri://update-install'
-  | 'tauri://update-status'
-  | 'tauri://resize'
-  | 'tauri://move'
-  | 'tauri://close-requested'
-  | 'tauri://focus'
-  | 'tauri://blur'
-  | 'tauri://scale-change'
-  | 'tauri://menu'
-  | 'tauri://file-drop'
-  | 'tauri://file-drop-hover'
-  | 'tauri://file-drop-cancelled'
-  | 'tauri://theme-changed',
-  string
->
+export type EventName = string
 
 export type EventCallback<T> = (event: Event<T>) => void