refactor(tauri): use imported event and dialog APIs

Author: shantur

package-lock.json

@@ -19,6 +19,7 @@
     "@suid/material": "^0.19.0",
     "@suid/system": "^0.14.0",
     "@tauri-apps/api": "^2.10.1",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
     "@tauri-apps/plugin-notification": "^2.3.3",
     "@tauri-apps/plugin-opener": "^2.5.3",
     "ansi-sequence-parser": "^1.1.3",

packages/ui/package.json

@@ -1,3 +1,4 @@
+import { listen } from "@tauri-apps/api/event"
 import { getLogger } from "../logger"
 import { runtimeEnv } from "../runtime-env"
 
@@ -107,13 +108,8 @@ export async function listenForNativeFolderDrops(onDrop: (paths: string[]) => vo
     return () => {}
   }
 
-  const eventApi = window.__TAURI__?.event
-  if (!eventApi?.listen) {
-    return () => {}
-  }
-
   try {
-    const unlisten = await eventApi.listen("desktop:folder-drop", (event) => {
+    const unlisten = await listen("desktop:folder-drop", (event) => {
       const payload = (event.payload ?? {}) as TauriFolderDropPayload
       const paths = normalizePathList(payload.paths)
       if (paths.length > 0) {
@@ -134,15 +130,10 @@ export async function listenForNativeFolderDropState(onState: (state: NativeFold
     return () => {}
   }
 
-  const eventApi = window.__TAURI__?.event
-  if (!eventApi?.listen) {
-    return () => {}
-  }
-
   try {
     const [unlistenEnter, unlistenLeave] = await Promise.all([
-      eventApi.listen("desktop:folder-drag-enter", () => onState("enter")),
-      eventApi.listen("desktop:folder-drag-leave", () => onState("leave")),
+      listen("desktop:folder-drag-enter", () => onState("enter")),
+      listen("desktop:folder-drag-leave", () => onState("leave")),
     ])
     return () => {
       unlistenEnter()

packages/ui/src/lib/native/desktop-file-drop.ts

@@ -1,43 +1,21 @@
+import { open } from "@tauri-apps/plugin-dialog"
 import type { NativeDialogOptions } from "../native-functions"
 import { getLogger } from "../../logger"
 const log = getLogger("actions")
 
-
-interface TauriDialogModule {
-  open?: (
-    options: {
-      title?: string
-      defaultPath?: string
-      filters?: { name?: string; extensions: string[] }[]
-      directory?: boolean
-      multiple?: boolean
-    },
-  ) => Promise<string | string[] | null>
-}
-
-interface TauriBridge {
-  dialog?: TauriDialogModule
-}
-
 export async function openTauriNativeDialog(options: NativeDialogOptions): Promise<string | null> {
   if (typeof window === "undefined") {
     return null
   }
 
-  const tauriBridge = (window as Window & { __TAURI__?: TauriBridge }).__TAURI__
-  const dialogApi = tauriBridge?.dialog
-  if (!dialogApi?.open) {
-    return null
-  }
-
   try {
-    const response = await dialogApi.open({
+    const response = await open({
       title: options.title,
       defaultPath: options.defaultPath,
       directory: options.mode === "directory",
       multiple: false,
       filters: options.filters?.map((filter) => ({
-        name: filter.name,
+        name: filter.name ?? "Files",
         extensions: filter.extensions,
       })),
     })

packages/ui/src/lib/native/tauri/functions.ts

@@ -17,13 +17,6 @@ declare global {
     electronAPI?: unknown
     __TAURI__?: {
       core?: TauriCoreModule
-      event?: {
-        listen: (event: string, handler: (payload: { payload: unknown }) => void) => Promise<() => void>
-      }
-      dialog?: {
-        open?: (options: Record<string, unknown>) => Promise<string | string[] | null>
-        save?: (options: Record<string, unknown>) => Promise<string | null>
-      }
     }
   }
 }

packages/ui/src/lib/runtime-env.ts

@@ -1,3 +1,5 @@
+import { invoke } from "@tauri-apps/api/core"
+import { listen } from "@tauri-apps/api/event"
 import { Show, createSignal, onCleanup, onMount } from "solid-js"
 import { render } from "solid-js/web"
 import iconUrl from "../../images/CodeNomad-Icon.png"
@@ -27,13 +29,6 @@ interface CliStatus {
   error?: string | null
 }
 
-interface TauriBridge {
-  invoke?: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T>
-  event?: {
-    listen: (event: string, handler: (payload: { payload: unknown }) => void) => Promise<() => void>
-  }
-}
-
 function pickPhraseKey(previous?: PhraseKey) {
   const filtered = phraseKeys.filter((key) => key !== previous)
   const source = filtered.length > 0 ? filtered : phraseKeys
@@ -46,17 +41,6 @@ function navigateTo(url?: string | null) {
   window.location.replace(url)
 }
 
-function getTauriBridge(): TauriBridge | null {
-  if (typeof window === "undefined") {
-    return null
-  }
-  const bridge = (window as { __TAURI__?: TauriBridge }).__TAURI__
-  if (!bridge || !bridge.event || !bridge.invoke) {
-    return null
-  }
-  return bridge
-}
-
 function annotateDocument() {
   if (typeof document === "undefined") {
     return
@@ -77,25 +61,22 @@ function LoadingApp() {
     setPhraseKey(pickPhraseKey())
     const unsubscribers: Array<() => void> = []
 
-    async function bootstrapTauri(tauriBridge: TauriBridge | null) {
-      if (!tauriBridge || !tauriBridge.event || !tauriBridge.invoke) {
-        return
-      }
+    async function bootstrapTauri() {
       try {
-        const readyUnlisten = await tauriBridge.event.listen("cli:ready", (event) => {
+        const readyUnlisten = await listen("cli:ready", (event) => {
           const payload = (event?.payload as CliStatus) || {}
           setError(null)
           setStatusKey(null)
           navigateTo(payload.url)
         })
-        const errorUnlisten = await tauriBridge.event.listen("cli:error", (event) => {
+        const errorUnlisten = await listen("cli:error", (event) => {
           const payload = (event?.payload as CliStatus) || {}
           if (payload.error) {
             setError(payload.error)
             setStatusKey("loadingScreen.status.issue")
           }
         })
-        const statusUnlisten = await tauriBridge.event.listen("cli:status", (event) => {
+        const statusUnlisten = await listen("cli:status", (event) => {
           const payload = (event?.payload as CliStatus) || {}
           if (payload.state === "error" && payload.error) {
             setError(payload.error)
@@ -109,7 +90,7 @@ function LoadingApp() {
         })
         unsubscribers.push(readyUnlisten, errorUnlisten, statusUnlisten)
 
-        const result = await tauriBridge.invoke<CliStatus>("cli_get_status")
+        const result = await invoke<CliStatus>("cli_get_status")
         if (result?.state === "ready" && result.url) {
           navigateTo(result.url)
         } else if (result?.state === "error" && result.error) {
@@ -123,7 +104,7 @@ function LoadingApp() {
     }
 
     if (isTauriHost()) {
-      void bootstrapTauri(getTauriBridge())
+      void bootstrapTauri()
     }
 
     onCleanup(() => {

packages/ui/src/renderer/loading/main.tsx

@@ -47,19 +47,10 @@ declare global {
     webkitGetAsEntry?: () => FileSystemEntry | null
   }
 
-  interface TauriDialogModule {
-    open?: (options: Record<string, unknown>) => Promise<string | string[] | null>
-    save?: (options: Record<string, unknown>) => Promise<string | null>
-  }
-
   interface TauriBridge {
     core?: {
       invoke: <T = unknown>(cmd: string, args?: Record<string, unknown>) => Promise<T>
     }
-    dialog?: TauriDialogModule
-    event?: {
-      listen: (event: string, handler: (payload: { payload: unknown }) => void) => Promise<() => void>
-    }
   }
 
   interface Window {