feat(api/invoke): separate cmd arg (#1321)

.changes/separate-cmd-arg.md

@@ -0,0 +1,5 @@
+---
+"api": minor
+---
+
+The invoke function can now be called with the cmd as the first parameter and the args as the second.

api/src/tauri.ts

@@ -1,7 +1,7 @@
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Window {
-    __TAURI_INVOKE_HANDLER__: (command: string) => void
+    __TAURI_INVOKE_HANDLER__: (command: { [key: string]: unknown }) => void
   }
 }
 
@@ -56,7 +56,10 @@ function transformCallback(
  *
  * @return {Promise<T>} Promise resolving or rejecting to the backend response
  */
-async function invoke<T>(args: any): Promise<T> {
+async function invoke<T>(
+  cmd: string | { [key: string]: unknown },
+  args: { [key: string]: unknown } = {}
+): Promise<T> {
   return new Promise((resolve, reject) => {
     const callback = transformCallback((e) => {
       resolve(e)
@@ -67,6 +70,14 @@ async function invoke<T>(args: any): Promise<T> {
       Reflect.deleteProperty(window, callback)
     }, true)
 
+    if (typeof cmd === 'string') {
+      args.cmd = cmd
+    } else if (typeof cmd === 'object') {
+      args = cmd
+    } else {
+      return reject(new Error('Invalid argument type.'))
+    }
+
     window.__TAURI_INVOKE_HANDLER__({
       callback,
       error,

cli/core/src/templates/tauri.js

@@ -103,7 +103,7 @@ if (!String.prototype.startsWith) {
     return identifier;
   };
 
-  window.__TAURI__.invoke = function invoke(args) {
+  window.__TAURI__.invoke = function invoke(cmd, args = {}) {
     var _this = this;
 
     return new Promise(function (resolve, reject) {
@@ -116,6 +116,14 @@ if (!String.prototype.startsWith) {
         delete window[callback];
       }, true);
 
+      if (typeof cmd === "string") {
+        args.cmd = cmd;
+      } else if (typeof cmd === "object") {
+        args = cmd;
+      } else {
+        return reject(new Error("Invalid argument type."));
+      }
+
       if (window.__TAURI_INVOKE_HANDLER__) {
         window.__TAURI_INVOKE_HANDLER__(
           _objectSpread(
@@ -191,18 +199,18 @@ if (!String.prototype.startsWith) {
   }
 
   window.__TAURI__.invoke({
-    __tauriModule: 'Event',
+    __tauriModule: "Event",
     message: {
-      cmd: 'listen',
-      event: 'tauri://window-created',
+      cmd: "listen",
+      event: "tauri://window-created",
       handler: window.__TAURI__.transformCallback(function (event) {
         if (event.payload) {
-          var windowLabel = event.payload.label
-          window.__TAURI__.__windows.push({ label: windowLabel })
+          var windowLabel = event.payload.label;
+          window.__TAURI__.__windows.push({ label: windowLabel });
         }
-      })
-    }
-  })
+      }),
+    },
+  });
 
   let permissionSettable = false;
   let permissionValue = "default";

tauri/examples/api/src/components/Communication.svelte

@@ -2,26 +2,24 @@
   import { listen, emit } from "@tauri-apps/api/event";
   import { invoke } from "@tauri-apps/api/tauri";
 
-  export let onMessage
+  export let onMessage;
 
   listen("rust-event", onMessage);
 
   function log() {
-    invoke({
-      cmd: "log_operation",
+    invoke("log_operation", {
       event: "tauri-click",
-      payload: "this payload is optional because we used Option in Rust"
+      payload: "this payload is optional because we used Option in Rust",
     });
   }
 
   function performRequest() {
-    invoke({
-      cmd: "perform_request",
+    invoke("perform_request", {
       endpoint: "dummy endpoint arg",
       body: {
         id: 5,
-        name: "test"
-      }
+        name: "test",
+      },
     })
       .then(onMessage)
       .catch(onMessage);
@@ -40,4 +38,4 @@
   <button class="button" id="event" on:click={emitEvent}>
     Send event to Rust
   </button>
-</div>
+</div>