feat(plugins): use @tauri-apps namespace on NPM (#368)

Co-authored-by: Amr Bashir <amr.bashir2015@gmail.com>

examples/api/src/App.svelte

@@ -1,8 +1,8 @@
 <script>
   import { writable } from "svelte/store";
-  import { open } from "tauri-plugin-shell-api";
-  import { appWindow, getCurrent } from "tauri-plugin-window-api";
-  import * as os from "tauri-plugin-os-api";
+  import { open } from "@tauri-apps/plugin-shell";
+  import { appWindow, getCurrent } from "@tauri-apps/plugin-window";
+  import * as os from "@tauri-apps/plugin-os";
 
   import Welcome from "./views/Welcome.svelte";
   import Cli from "./views/Cli.svelte";
@@ -20,7 +20,7 @@
   import App from "./views/App.svelte";
 
   import { onMount } from "svelte";
-  import { ask } from "tauri-plugin-dialog-api";
+  import { ask } from "@tauri-apps/plugin-dialog";
 
   if (appWindow.label !== "main") {
     appWindow.onCloseRequested(async (event) => {

examples/api/src/views/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { show, hide } from "tauri-plugin-app-api";
+  import { show, hide } from "@tauri-apps/plugin-app";
 
   export let onMessage;
 

examples/api/src/views/Cli.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getMatches } from "tauri-plugin-cli-api";
+  import { getMatches } from "@tauri-apps/plugin-cli";
 
   export let onMessage;
 

examples/api/src/views/Clipboard.svelte

@@ -1,23 +1,23 @@
 <script>
-  import { writeText, readText } from 'tauri-plugin-clipboard-api'
+  import { writeText, readText } from "@tauri-apps/plugin-clipboard";
 
-  export let onMessage
-  let text = 'clipboard message'
+  export let onMessage;
+  let text = "clipboard message";
 
   function write() {
     writeText(text)
       .then(() => {
-        onMessage('Wrote to the clipboard')
+        onMessage("Wrote to the clipboard");
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 
   function read() {
     readText()
       .then((contents) => {
-        onMessage(`Clipboard contents: ${contents}`)
+        onMessage(`Clipboard contents: ${contents}`);
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 </script>
 

examples/api/src/views/Communication.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { appWindow } from "tauri-plugin-window-api";
+  import { appWindow } from "@tauri-apps/plugin-window";
   import { invoke } from "@tauri-apps/api/tauri";
   import { onMount, onDestroy } from "svelte";
 

examples/api/src/views/Dialog.svelte

@@ -1,99 +1,102 @@
 <script>
-  import { open, save, confirm } from 'tauri-plugin-dialog-api'
-  import { readBinaryFile } from 'tauri-plugin-fs-api'
+  import { open, save, confirm } from "@tauri-apps/plugin-dialog";
+  import { readBinaryFile } from "@tauri-apps/plugin-fs";
 
-  export let onMessage
-  export let insecureRenderHtml
-  let defaultPath = null
-  let filter = null
-  let multiple = false
-  let directory = false
+  export let onMessage;
+  export let insecureRenderHtml;
+  let defaultPath = null;
+  let filter = null;
+  let multiple = false;
+  let directory = false;
 
   function arrayBufferToBase64(buffer, callback) {
     var blob = new Blob([buffer], {
-      type: 'application/octet-binary'
-    })
-    var reader = new FileReader()
+      type: "application/octet-binary",
+    });
+    var reader = new FileReader();
     reader.onload = function (evt) {
-      var dataurl = evt.target.result
-      callback(dataurl.substr(dataurl.indexOf(',') + 1))
-    }
-    reader.readAsDataURL(blob)
+      var dataurl = evt.target.result;
+      callback(dataurl.substr(dataurl.indexOf(",") + 1));
+    };
+    reader.readAsDataURL(blob);
   }
 
   async function prompt() {
-    confirm('Is Tauri awesome?', {
-      okLabel: 'Absolutely',
-      cancelLabel: 'Totally',
-    }).then(res => onMessage(res
-      ? "Tauri is absolutely awesome"
-      : "Tauri is totally awesome"
-    )).catch(onMessage)
+    confirm("Is Tauri awesome?", {
+      okLabel: "Absolutely",
+      cancelLabel: "Totally",
+    })
+      .then((res) =>
+        onMessage(
+          res ? "Tauri is absolutely awesome" : "Tauri is totally awesome"
+        )
+      )
+      .catch(onMessage);
   }
 
   function openDialog() {
     open({
-      title: 'My wonderful open dialog',
+      title: "My wonderful open dialog",
       defaultPath,
       filters: filter
         ? [
             {
-              name: 'Tauri Example',
-              extensions: filter.split(',').map((f) => f.trim())
-            }
+              name: "Tauri Example",
+              extensions: filter.split(",").map((f) => f.trim()),
+            },
           ]
         : [],
       multiple,
-      directory
+      directory,
     })
       .then(function (res) {
         if (Array.isArray(res)) {
-          onMessage(res)
+          onMessage(res);
         } else {
-          var pathToRead = typeof res === 'string' ? res : res.path
-          var isFile = pathToRead.match(/\S+\.\S+$/g)
+          var pathToRead = typeof res === "string" ? res : res.path;
+          var isFile = pathToRead.match(/\S+\.\S+$/g);
           readBinaryFile(pathToRead)
             .then(function (response) {
               if (isFile) {
                 if (
-                  pathToRead.includes('.png') ||
-                  pathToRead.includes('.jpg')
+                  pathToRead.includes(".png") ||
+                  pathToRead.includes(".jpg")
                 ) {
                   arrayBufferToBase64(
                     new Uint8Array(response),
                     function (base64) {
-                      var src = 'data:image/png;base64,' + base64
-                      insecureRenderHtml('<img src="' + src + '"></img>')
+                      var src = "data:image/png;base64," + base64;
+                      insecureRenderHtml('<img src="' + src + '"></img>');
                     }
-                  )
+                  );
                 } else {
-                  onMessage(res)
+                  onMessage(res);
                 }
               } else {
-                onMessage(res)
+                onMessage(res);
               }
             })
-            .catch(onMessage(res))
+            .catch(onMessage(res));
         }
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 
   function saveDialog() {
     save({
-      title: 'My wonderful save dialog',
+      title: "My wonderful save dialog",
       defaultPath,
       filters: filter
         ? [
             {
-              name: 'Tauri Example',
-              extensions: filter.split(',').map((f) => f.trim())
-            }
+              name: "Tauri Example",
+              extensions: filter.split(",").map((f) => f.trim()),
+            },
           ]
-        : []
+        : [],
     })
       .then(onMessage)
-      .catch(onMessage)
+      .catch(onMessage);
   }
 </script>
 

examples/api/src/views/FileSystem.svelte

@@ -3,79 +3,79 @@
     readBinaryFile,
     writeTextFile,
     readDir,
-    Dir
-  } from 'tauri-plugin-fs-api'
-  import { convertFileSrc } from '@tauri-apps/api/tauri'
+    Dir,
+  } from "@tauri-apps/plugin-fs";
+  import { convertFileSrc } from "@tauri-apps/api/tauri";
 
-  export let onMessage
-  export let insecureRenderHtml
+  export let onMessage;
+  export let insecureRenderHtml;
 
-  let pathToRead = ''
-  let img
+  let pathToRead = "";
+  let img;
 
   function getDir() {
-    const dirSelect = document.getElementById('dir')
-    return dirSelect.value ? parseInt(dir.value) : null
+    const dirSelect = document.getElementById("dir");
+    return dirSelect.value ? parseInt(dir.value) : null;
   }
 
   function arrayBufferToBase64(buffer, callback) {
     const blob = new Blob([buffer], {
-      type: 'application/octet-binary'
-    })
-    const reader = new FileReader()
+      type: "application/octet-binary",
+    });
+    const reader = new FileReader();
     reader.onload = function (evt) {
-      const dataurl = evt.target.result
-      callback(dataurl.substr(dataurl.indexOf(',') + 1))
-    }
-    reader.readAsDataURL(blob)
+      const dataurl = evt.target.result;
+      callback(dataurl.substr(dataurl.indexOf(",") + 1));
+    };
+    reader.readAsDataURL(blob);
   }
 
   const DirOptions = Object.keys(Dir)
     .filter((key) => isNaN(parseInt(key)))
-    .map((dir) => [dir, Dir[dir]])
+    .map((dir) => [dir, Dir[dir]]);
 
   function read() {
-    const isFile = pathToRead.match(/\S+\.\S+$/g)
+    const isFile = pathToRead.match(/\S+\.\S+$/g);
     const opts = {
-      dir: getDir()
-    }
+      dir: getDir(),
+    };
     const promise = isFile
       ? readBinaryFile(pathToRead, opts)
-      : readDir(pathToRead, opts)
+      : readDir(pathToRead, opts);
     promise
       .then(function (response) {
         if (isFile) {
-          if (pathToRead.includes('.png') || pathToRead.includes('.jpg')) {
+          if (pathToRead.includes(".png") || pathToRead.includes(".jpg")) {
             arrayBufferToBase64(new Uint8Array(response), function (base64) {
-              const src = 'data:image/png;base64,' + base64
-              insecureRenderHtml('<img src="' + src + '"></img>')
-            })
+              const src = "data:image/png;base64," + base64;
+              insecureRenderHtml('<img src="' + src + '"></img>');
+            });
           } else {
-            const value = String.fromCharCode.apply(null, response)
+            const value = String.fromCharCode.apply(null, response);
             insecureRenderHtml(
               '<textarea id="file-response"></textarea><button id="file-save">Save</button>'
-            )
+            );
             setTimeout(() => {
-              const fileInput = document.getElementById('file-response')
-              fileInput.value = value
+              const fileInput = document.getElementById("file-response");
+              fileInput.value = value;
               document
-                .getElementById('file-save')
-                .addEventListener('click', function () {
+                .getElementById("file-save")
+                .addEventListener("click", function () {
                   writeTextFile(pathToRead, fileInput.value, {
-                    dir: getDir()
-                  }).catch(onMessage)
-                })
-            })
+                    dir: getDir(),
+                  }).catch(onMessage);
+                });
+            });
           }
         } else {
-          onMessage(response)
+          onMessage(response);
         }
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 
   function setSrc() {
-    img.src = convertFileSrc(pathToRead)
+    img.src = convertFileSrc(pathToRead);
   }
 </script>
 

examples/api/src/views/Http.svelte

@@ -1,60 +1,60 @@
 <script>
-  import { getClient, Body, ResponseType } from 'tauri-plugin-http-api'
-  import { JsonView } from '@zerodevx/svelte-json-view'
+  import { getClient, Body, ResponseType } from "@tauri-apps/plugin-http";
+  import { JsonView } from "@zerodevx/svelte-json-view";
 
-  let httpMethod = 'GET'
-  let httpBody = ''
+  let httpMethod = "GET";
+  let httpBody = "";
 
-  export let onMessage
+  export let onMessage;
 
   async function makeHttpRequest() {
     const client = await getClient().catch((e) => {
-      onMessage(e)
-      throw e
-    })
-    let method = httpMethod || 'GET'
+      onMessage(e);
+      throw e;
+    });
+    let method = httpMethod || "GET";
 
     const options = {
-      url: 'http://localhost:3003',
-      method: method || 'GET'
-    }
+      url: "http://localhost:3003",
+      method: method || "GET",
+    };
 
     if (
-      (httpBody.startsWith('{') && httpBody.endsWith('}')) ||
-      (httpBody.startsWith('[') && httpBody.endsWith(']'))
+      (httpBody.startsWith("{") && httpBody.endsWith("}")) ||
+      (httpBody.startsWith("[") && httpBody.endsWith("]"))
     ) {
-      options.body = Body.json(JSON.parse(httpBody))
-    } else if (httpBody !== '') {
-      options.body = Body.text(httpBody)
+      options.body = Body.json(JSON.parse(httpBody));
+    } else if (httpBody !== "") {
+      options.body = Body.text(httpBody);
     }
 
-    client.request(options).then(onMessage).catch(onMessage)
+    client.request(options).then(onMessage).catch(onMessage);
   }
 
   /// http form
-  let foo = 'baz'
-  let bar = 'qux'
-  let result = null
-  let multipart = true
+  let foo = "baz";
+  let bar = "qux";
+  let result = null;
+  let multipart = true;
 
   async function doPost() {
     const client = await getClient().catch((e) => {
-      onMessage(e)
-      throw e
-    })
+      onMessage(e);
+      throw e;
+    });
 
     result = await client.request({
-      url: 'http://localhost:3003',
-      method: 'POST',
+      url: "http://localhost:3003",
+      method: "POST",
       body: Body.form({
         foo,
-        bar
+        bar,
       }),
       headers: multipart
-        ? { 'Content-Type': 'multipart/form-data' }
+        ? { "Content-Type": "multipart/form-data" }
         : undefined,
-      responseType: ResponseType.Text
-    })
+      responseType: ResponseType.Text,
+    });
   }
 </script>
 

examples/api/src/views/Shell.svelte

@@ -1,65 +1,65 @@
 <script>
-  import { Command } from 'tauri-plugin-shell-api'
+  import { Command } from "@tauri-apps/plugin-shell";
 
-  const windows = navigator.userAgent.includes('Windows')
-  let cmd = windows ? 'cmd' : 'sh'
-  let args = windows ? ['/C'] : ['-c']
+  const windows = navigator.userAgent.includes("Windows");
+  let cmd = windows ? "cmd" : "sh";
+  let args = windows ? ["/C"] : ["-c"];
 
-  export let onMessage
+  export let onMessage;
 
-  let script = 'echo "hello world"'
-  let cwd = null
-  let env = 'SOMETHING=value ANOTHER=2'
-  let encoding = ''
-  let stdin = ''
-  let child
+  let script = 'echo "hello world"';
+  let cwd = null;
+  let env = "SOMETHING=value ANOTHER=2";
+  let encoding = "";
+  let stdin = "";
+  let child;
 
   function _getEnv() {
-    return env.split(' ').reduce((env, clause) => {
-      let [key, value] = clause.split('=')
+    return env.split(" ").reduce((env, clause) => {
+      let [key, value] = clause.split("=");
       return {
         ...env,
-        [key]: value
-      }
-    }, {})
+        [key]: value,
+      };
+    }, {});
   }
 
   function spawn() {
-    child = null
+    child = null;
     const command = Command.create(cmd, [...args, script], {
       cwd: cwd || null,
       env: _getEnv(),
       encoding: encoding || undefined,
-    })
+    });
 
-    command.on('close', (data) => {
+    command.on("close", (data) => {
       onMessage(
         `command finished with code ${data.code} and signal ${data.signal}`
-      )
-      child = null
-    })
-    command.on('error', (error) => onMessage(`command error: "${error}"`))
+      );
+      child = null;
+    });
+    command.on("error", (error) => onMessage(`command error: "${error}"`));
 
-    command.stdout.on('data', (line) => onMessage(`command stdout: "${line}"`))
-    command.stderr.on('data', (line) => onMessage(`command stderr: "${line}"`))
+    command.stdout.on("data", (line) => onMessage(`command stdout: "${line}"`));
+    command.stderr.on("data", (line) => onMessage(`command stderr: "${line}"`));
 
     command
       .spawn()
       .then((c) => {
-        child = c
+        child = c;
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 
   function kill() {
     child
       .kill()
-      .then(() => onMessage('killed child process'))
-      .catch(onMessage)
+      .then(() => onMessage("killed child process"))
+      .catch(onMessage);
   }
 
   function writeToStdin() {
-    child.write(stdin).catch(onMessage)
+    child.write(stdin).catch(onMessage);
   }
 </script>
 

examples/api/src/views/Shortcuts.svelte

@@ -1,46 +1,46 @@
 <script>
-  import { writable } from 'svelte/store'
+  import { writable } from "svelte/store";
   import {
     register as registerShortcut,
     unregister as unregisterShortcut,
-    unregisterAll as unregisterAllShortcuts
-  } from 'tauri-plugin-global-shortcut-api'
+    unregisterAll as unregisterAllShortcuts,
+  } from "@tauri-apps/plugin-global-shortcut";
 
-  export let onMessage
-  const shortcuts = writable([])
-  let shortcut = 'CmdOrControl+X'
+  export let onMessage;
+  const shortcuts = writable([]);
+  let shortcut = "CmdOrControl+X";
 
   function register() {
-    const shortcut_ = shortcut
+    const shortcut_ = shortcut;
     registerShortcut(shortcut_, () => {
-      onMessage(`Shortcut ${shortcut_} triggered`)
+      onMessage(`Shortcut ${shortcut_} triggered`);
     })
       .then(() => {
-        shortcuts.update((shortcuts_) => [...shortcuts_, shortcut_])
-        onMessage(`Shortcut ${shortcut_} registered successfully`)
+        shortcuts.update((shortcuts_) => [...shortcuts_, shortcut_]);
+        onMessage(`Shortcut ${shortcut_} registered successfully`);
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 
   function unregister(shortcut) {
-    const shortcut_ = shortcut
+    const shortcut_ = shortcut;
     unregisterShortcut(shortcut_)
       .then(() => {
         shortcuts.update((shortcuts_) =>
           shortcuts_.filter((s) => s !== shortcut_)
-        )
-        onMessage(`Shortcut ${shortcut_} unregistered`)
+        );
+        onMessage(`Shortcut ${shortcut_} unregistered`);
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 
   function unregisterAll() {
     unregisterAllShortcuts()
       .then(() => {
-        shortcuts.update(() => [])
-        onMessage(`Unregistered all shortcuts`)
+        shortcuts.update(() => []);
+        onMessage(`Unregistered all shortcuts`);
       })
-      .catch(onMessage)
+      .catch(onMessage);
   }
 </script>
 

examples/api/src/views/Updater.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { check } from "tauri-plugin-updater-api";
-  import { relaunch } from "tauri-plugin-process-api";
+  import { check } from "@tauri-apps/plugin-updater";
+  import { relaunch } from "@tauri-apps/plugin-process";
 
   export let onMessage;
 

examples/api/src/views/Welcome.svelte

@@ -1,27 +1,27 @@
 <script>
-  import { getName, getVersion, getTauriVersion } from 'tauri-plugin-app-api'
-  import { relaunch, exit } from 'tauri-plugin-process-api'
+  import { getName, getVersion, getTauriVersion } from "@tauri-apps/plugin-app";
+  import { relaunch, exit } from "@tauri-apps/plugin-process";
 
-  let version = '0.0.0'
-  let tauriVersion = '0.0.0'
-  let appName = 'Unknown'
+  let version = "0.0.0";
+  let tauriVersion = "0.0.0";
+  let appName = "Unknown";
 
   getName().then((n) => {
-    appName = n
-  })
+    appName = n;
+  });
   getVersion().then((v) => {
-    version = v
-  })
+    version = v;
+  });
   getTauriVersion().then((v) => {
-    tauriVersion = v
-  })
+    tauriVersion = v;
+  });
 
   async function closeApp() {
-    await exit()
+    await exit();
   }
 
   async function relaunchApp() {
-    await relaunch()
+    await relaunch();
   }
 </script>
 

examples/api/src/views/Window.svelte

@@ -6,9 +6,9 @@
     UserAttentionType,
     PhysicalSize,
     PhysicalPosition,
-  } from "tauri-plugin-window-api";
-  import { open as openDialog } from "tauri-plugin-dialog-api";
-  import { open } from "tauri-plugin-shell-api";
+  } from "@tauri-apps/plugin-window";
+  import { open as openDialog } from "@tauri-apps/plugin-dialog";
+  import { open } from "@tauri-apps/plugin-shell";
 
   let selectedWindow = appWindow.label;
   const windowMap = {