Fix: add recursive option to directory APIs (#1141)

* Add recursive option

* Fix ESLint

* Fix all other possible code style issues

* Add .changes file

.changes/bugfix.md

@@ -0,0 +1,5 @@
+---
+"tauri.js": patch
+---
+
+Fixed a TypeScript issue where it didn't allow you to put the "recursive" option in the directory functions.

cli/tauri.js/api-src/fs.ts

@@ -25,6 +25,11 @@ export interface FsOptions {
   dir?: BaseDirectory
 }
 
+export interface FsDirOptions {
+  dir?: BaseDirectory
+  recursive?: boolean
+}
+
 export interface FsTextFileOption {
   path: string
   contents: string
@@ -184,7 +189,7 @@ async function writeBinaryFile(
  */
 async function readDir(
   dir: string,
-  options: FsOptions = {}
+  options: FsDirOptions = {}
 ): Promise<FileEntry[]> {
   return await promisified({
     cmd: 'readDir',
@@ -204,7 +209,10 @@ async function readDir(
  * @param [options.dir] base directory
  * @return
  */
-async function createDir(dir: string, options: FsOptions = {}): Promise<void> {
+async function createDir(
+  dir: string,
+  options: FsDirOptions = {}
+): Promise<void> {
   return await promisified({
     cmd: 'createDir',
     path: dir,
@@ -222,7 +230,10 @@ async function createDir(dir: string, options: FsOptions = {}): Promise<void> {
  * @param [options.dir] base directory
  * @return
  */
-async function removeDir(dir: string, options: FsOptions = {}): Promise<void> {
+async function removeDir(
+  dir: string,
+  options: FsDirOptions = {}
+): Promise<void> {
   return await promisified({
     cmd: 'removeDir',
     path: dir,

tauri/examples/communication/dist/cli.js

@@ -1,5 +1,6 @@
-document.getElementById('cli-matches').addEventListener('click', function () {
-  window.__TAURI__.cli.getMatches()
+document.getElementById("cli-matches").addEventListener("click", function () {
+  window.__TAURI__.cli
+    .getMatches()
     .then(registerResponse)
-    .catch(registerResponse)
-})
+    .catch(registerResponse);
+});

tauri/examples/communication/dist/communication.js

@@ -1,22 +1,25 @@
-document.getElementById('log').addEventListener('click', function () {
+document.getElementById("log").addEventListener("click", function () {
   window.__TAURI__.tauri.invoke({
-    cmd: 'logOperation',
-    event: 'tauri-click',
-    payload: 'this payload is optional because we used Option in Rust'
-  })
-})
+    cmd: "logOperation",
+    event: "tauri-click",
+    payload: "this payload is optional because we used Option in Rust",
+  });
+});
 
-document.getElementById('request').addEventListener('click', function () {
-  window.__TAURI__.tauri.promisified({
-    cmd: 'performRequest',
-    endpoint: 'dummy endpoint arg',
-    body: {
-      id: 5,
-      name: 'test'
-    }
-  }).then(registerResponse).catch(registerResponse)
-})
+document.getElementById("request").addEventListener("click", function () {
+  window.__TAURI__.tauri
+    .promisified({
+      cmd: "performRequest",
+      endpoint: "dummy endpoint arg",
+      body: {
+        id: 5,
+        name: "test",
+      },
+    })
+    .then(registerResponse)
+    .catch(registerResponse);
+});
 
-document.getElementById('event').addEventListener('click', function () {
-  window.__TAURI__.event.emit('js-event', 'this is the payload string')
-})
+document.getElementById("event").addEventListener("click", function () {
+  window.__TAURI__.event.emit("js-event", "this is the payload string");
+});

tauri/examples/communication/dist/dialog.js

@@ -1,38 +1,47 @@
-var defaultPathInput = document.getElementById('dialog-default-path')
-var filterInput = document.getElementById('dialog-filter')
-var multipleInput = document.getElementById('dialog-multiple')
-var directoryInput = document.getElementById('dialog-directory')
+var defaultPathInput = document.getElementById("dialog-default-path");
+var filterInput = document.getElementById("dialog-filter");
+var multipleInput = document.getElementById("dialog-multiple");
+var directoryInput = document.getElementById("dialog-directory");
 
-document.getElementById('open-dialog').addEventListener('click', function () {
-  window.__TAURI__.dialog.open({
-    defaultPath: defaultPathInput.value || null,
-    filter: filterInput.value || null,
-    multiple: multipleInput.checked,
-    directory: directoryInput.checked
-  }).then(function (res) {
-    console.log(res)
-    var pathToRead = res
-    var isFile = pathToRead.match(/\S+\.\S+$/g)
-    window.__TAURI__.fs.readBinaryFile(pathToRead).then(function (response) {
-      if (isFile) {
-        if (pathToRead.includes('.png') || pathToRead.includes('.jpg')) {
-          arrayBufferToBase64(new Uint8Array(response), function (base64) {
-            var src = 'data:image/png;base64,' + base64
-            registerResponse('<img src="' + src + '"></img>')
-          })
-        } else {
-          registerResponse(res)
-        }
-      } else {
-        registerResponse(res)
-      }
-    }).catch(registerResponse(res))
-  }).catch(registerResponse)
-})
+document.getElementById("open-dialog").addEventListener("click", function () {
+  window.__TAURI__.dialog
+    .open({
+      defaultPath: defaultPathInput.value || null,
+      filter: filterInput.value || null,
+      multiple: multipleInput.checked,
+      directory: directoryInput.checked,
+    })
+    .then(function (res) {
+      console.log(res);
+      var pathToRead = res;
+      var isFile = pathToRead.match(/\S+\.\S+$/g);
+      window.__TAURI__.fs
+        .readBinaryFile(pathToRead)
+        .then(function (response) {
+          if (isFile) {
+            if (pathToRead.includes(".png") || pathToRead.includes(".jpg")) {
+              arrayBufferToBase64(new Uint8Array(response), function (base64) {
+                var src = "data:image/png;base64," + base64;
+                registerResponse('<img src="' + src + '"></img>');
+              });
+            } else {
+              registerResponse(res);
+            }
+          } else {
+            registerResponse(res);
+          }
+        })
+        .catch(registerResponse(res));
+    })
+    .catch(registerResponse);
+});
 
-document.getElementById('save-dialog').addEventListener('click', function () {
-  window.__TAURI__.dialog.save({
-    defaultPath: defaultPathInput.value || null,
-    filter: filterInput.value || null
-  }).then(registerResponse).catch(registerResponse)
-})
+document.getElementById("save-dialog").addEventListener("click", function () {
+  window.__TAURI__.dialog
+    .save({
+      defaultPath: defaultPathInput.value || null,
+      filter: filterInput.value || null,
+    })
+    .then(registerResponse)
+    .catch(registerResponse);
+});

tauri/examples/communication/dist/fs.js

@@ -1,57 +1,66 @@
-var dirSelect = document.getElementById('dir')
+var dirSelect = document.getElementById("dir");
 
 function getDir() {
-  return dirSelect.value ? parseInt(dir.value) : null
+  return dirSelect.value ? parseInt(dir.value) : null;
 }
 
 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);
 }
 
-var pathInput = document.getElementById('path-to-read')
+var pathInput = document.getElementById("path-to-read");
 
-addClickEnterHandler(
-  document.getElementById('read'),
-  pathInput,
-  function () {
-    var pathToRead = pathInput.value
-    var isFile = pathToRead.match(/\S+\.\S+$/g)
-    var opts = {
-      dir: getDir()
-    }
-    var promise = isFile ? window.__TAURI__.fs.readBinaryFile(pathToRead, opts) : window.__TAURI__.fs.readDir(pathToRead, opts)
-    promise.then(function (response) {
+addClickEnterHandler(document.getElementById("read"), pathInput, function () {
+  var pathToRead = pathInput.value;
+  var isFile = pathToRead.match(/\S+\.\S+$/g);
+  var opts = {
+    dir: getDir(),
+  };
+  var promise = isFile
+    ? window.__TAURI__.fs.readBinaryFile(pathToRead, opts)
+    : window.__TAURI__.fs.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) {
-            var src = 'data:image/png;base64,' + base64
-            registerResponse('<img src="' + src + '"></img>')
-          })
+            var src = "data:image/png;base64," + base64;
+            registerResponse('<img src="' + src + '"></img>');
+          });
         } else {
-          var value = String.fromCharCode.apply(null, response)
-          registerResponse('<textarea id="file-response" style="height: 400px"></textarea><button id="file-save">Save</button>')
-          var fileInput = document.getElementById('file-response')
-          fileInput.value = value
-          document.getElementById('file-save').addEventListener('click', function () {
-            window.__TAURI__.fs.writeFile({
-              file: pathToRead,
-              contents: fileInput.value
-            }, {
-              dir: getDir()
-            }).catch(registerResponse)
-          })
+          var value = String.fromCharCode.apply(null, response);
+          registerResponse(
+            '<textarea id="file-response" style="height: 400px"></textarea><button id="file-save">Save</button>'
+          );
+          var fileInput = document.getElementById("file-response");
+          fileInput.value = value;
+          document
+            .getElementById("file-save")
+            .addEventListener("click", function () {
+              window.__TAURI__.fs
+                .writeFile(
+                  {
+                    file: pathToRead,
+                    contents: fileInput.value,
+                  },
+                  {
+                    dir: getDir(),
+                  }
+                )
+                .catch(registerResponse);
+            });
         }
       } else {
-        registerResponse(response)
+        registerResponse(response);
       }
-    }).catch(registerResponse)
-  }
-)
+    })
+    .catch(registerResponse);
+});

tauri/examples/communication/dist/http.js

@@ -1,23 +1,29 @@
-const methodSelect = document.getElementById('request-method')
-const requestUrlInput = document.getElementById('request-url')
-const requestBodyInput = document.getElementById('request-body')
+const methodSelect = document.getElementById("request-method");
+const requestUrlInput = document.getElementById("request-url");
+const requestBodyInput = document.getElementById("request-body");
 
-document.getElementById('make-request').addEventListener('click', function () {
-  const method = methodSelect.value || 'GET'
-  const url = requestUrlInput.value || ''
+document.getElementById("make-request").addEventListener("click", function () {
+  const method = methodSelect.value || "GET";
+  const url = requestUrlInput.value || "";
 
   const options = {
     url: url,
-    method: method
-  }
+    method: method,
+  };
 
-  let body = requestBodyInput.value || ''
-  if ((body.startsWith('{') && body.endsWith('}')) || (body.startsWith('[') && body.endsWith(']'))) {
-    body = JSON.parse(body)
-  } else if (body.startsWith('/') || body.match(/\S:\//g)) {
-    options.bodyAsFile = true
+  let body = requestBodyInput.value || "";
+  if (
+    (body.startsWith("{") && body.endsWith("}")) ||
+    (body.startsWith("[") && body.endsWith("]"))
+  ) {
+    body = JSON.parse(body);
+  } else if (body.startsWith("/") || body.match(/\S:\//g)) {
+    options.bodyAsFile = true;
   }
-  options.body = body
+  options.body = body;
 
-  window.__TAURI__.http.request(options).then(registerResponse).catch(registerResponse)
-})
+  window.__TAURI__.http
+    .request(options)
+    .then(registerResponse)
+    .catch(registerResponse);
+});

tauri/examples/communication/dist/index.html

@@ -1,316 +1,330 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <style>
+      * {
+        font-family: Arial, Helvetica, sans-serif;
+      }
+
+      body {
+        background: #889;
+      }
+
+      .logo-container {
+        width: 95%;
+        margin: 0px auto;
+        overflow: hidden;
+      }
+
+      .logo-link {
+        font-weight: 700;
+        position: absolute;
+        top: 150px;
+        right: 10px;
+      }
+
+      .logo {
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        position: fixed;
+        z-index: 10;
+        top: 7px;
+        right: 10px;
+      }
+
+      #response {
+        position: absolute;
+        left: 10px;
+        right: 10px;
+        top: 440px;
+        min-height: 110px;
+        background: #aab;
+        font-family: "Courier New", Courier, monospace;
+        font-size: 12px;
+        word-wrap: break-word;
+        padding: 5px;
+        border-radius: 5px;
+        overflow-y: auto;
+      }
+
+      input,
+      select {
+        background: white;
+        font-family: system-ui, sans-serif;
+        border: 0;
+        border-radius: 0.25rem;
+        font-size: 1rem;
+        line-height: 1.2;
+        padding: 0.25rem 0.5rem;
+        margin: 0.25rem;
+      }
+
+      button:hover,
+      button:focus {
+        background: #0053ba;
+      }
+
+      button:focus {
+        outline: 1px solid #fff;
+        outline-offset: -4px;
+      }
+
+      button:active {
+        transform: scale(0.99);
+      }
+
+      .button {
+        border: 0;
+        border-radius: 0.25rem;
+        background: #1e88e5;
+        color: white;
+        font-family: system-ui, sans-serif;
+        font-size: 1rem;
+        line-height: 1.2;
+        white-space: nowrap;
+        text-decoration: none;
+        padding: 0.25rem 0.5rem;
+        margin: 0.25rem;
+        cursor: pointer;
+      }
+
+      .bottom {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        text-align: center;
+        width: 100%;
+        padding: 5px;
+        background: #333;
+        color: #eef;
+      }
+
+      .dark-link {
+        color: white;
+        text-decoration: none !important;
+      }
+
+      .tabs-container {
+        position: fixed;
+        height: 400px;
+        top: 20px;
+        left: 10px;
+        right: 10px;
+        z-index: 9;
+      }
+
+      .tabs {
+        position: relative;
+        min-height: 400px;
+        clear: both;
+      }
+
+      .tab {
+        float: left;
+      }
 
-<head>
-  <style>
-    * {
-      font-family: Arial, Helvetica, sans-serif;
-    }
-
-    body {
-      background: #889;
-    }
-
-    .logo-container {
-      width: 95%;
-      margin: 0px auto;
-      overflow: hidden;
-    }
-
-    .logo-link {
-      font-weight: 700;
-      position: absolute;
-      top: 150px;
-      right: 10px;
-    }
-
-    .logo {
-      width: 32px;
-      height: 32px;
-      cursor: pointer;
-      position: fixed;
-      z-index: 10;
-      top: 7px;
-      right: 10px;
-    }
-
-    #response {
-      position: absolute;
-      left: 10px;
-      right: 10px;
-      top: 440px;
-      min-height: 110px;
-      background: #aab;
-      font-family: 'Courier New', Courier, monospace;
-      font-size: 12px;
-      word-wrap: break-word;
-      padding: 5px;
-      border-radius: 5px;
-      overflow-y: auto;
-    }
-
-    input,
-    select {
-      background: white;
-      font-family: system-ui, sans-serif;
-      border: 0;
-      border-radius: 0.25rem;
-      font-size: 1rem;
-      line-height: 1.2;
-      padding: 0.25rem 0.5rem;
-      margin: 0.25rem;
-    }
-
-    button:hover,
-    button:focus {
-      background: #0053ba;
-    }
-
-    button:focus {
-      outline: 1px solid #fff;
-      outline-offset: -4px;
-    }
-
-    button:active {
-      transform: scale(0.99);
-    }
-
-    .button {
-      border: 0;
-      border-radius: 0.25rem;
-      background: #1E88E5;
-      color: white;
-      font-family: system-ui, sans-serif;
-      font-size: 1rem;
-      line-height: 1.2;
-      white-space: nowrap;
-      text-decoration: none;
-      padding: 0.25rem 0.5rem;
-      margin: 0.25rem;
-      cursor: pointer;
-    }
-
-    .bottom {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      text-align: center;
-      width: 100%;
-      padding: 5px;
-      background: #333;
-      color: #eef;
-    }
-
-    .dark-link {
-      color: white;
-      text-decoration: none !important;
-    }
-
-    .tabs-container {
-      position: fixed;
-      height: 400px;
-      top: 20px;
-      left: 10px;
-      right: 10px;
-      z-index: 9;
-    }
-
-    .tabs {
-      position: relative;
-      min-height: 400px;
-      clear: both;
-    }
-
-    .tab {
-      float: left;
-    }
-
-    .tab>label {
-      background: #eee;
-      padding: 10px;
-      border: 1px solid transparent;
-      margin-left: -1px;
-      position: relative;
-      left: 1px;
-    }
-
-    .tabs>.tabber {
-      border-top-left-radius: 5px;
-    }
-
-    .tabs>.tabber~.tabber {
-      border-top-left-radius: none;
-    }
-
-    .tab [type=radio] {
-      display: none;
-    }
-
-    .content {
-      position: absolute;
-      top: 28px;
-      left: 0;
-      background: #bbc;
-      right: 0;
-      bottom: 0;
-      padding: 20px;
-      border: 1px solid transparent;
-      border-top-right-radius: 5px;
-      border-bottom-left-radius: 5px;
-      border-bottom-right-radius: 5px;
-    }
-
-    [type=radio]:checked~label {
-      background: #bbc;
-      border-bottom: 1px solid transparent;
-      z-index: 2;
-    }
-
-    [type=radio]:checked~label~.content {
-      z-index: 1;
-    }
-
-  </style>
-</head>
-
-<body>
-  <div class="logo-container">
-    <img src="icon.png" class="logo">
-  </div>
-
-  <div class="tabs-container">
-    <div class="tabs">
-      <div class="tab">
-        <input type="radio" id="tab-1" name="tab-group-1" checked>
-        <label class="tabber" for="tab-1">Messages</label>
-        <div class="content">
-          <button class="button" id="log">Call Log API</button>
-          <button class="button" id="request">Call Request (async) API</button>
-          <button class="button" id="event">Send event to Rust</button>
-          <button class="button" id="notification">Send test notification</button>
-
-          <div style="margin-top: 24px">
-            <input id="title" value="Awesome Tauri Example!">
-            <button class="button" id="set-title">Set title</button>
+      .tab > label {
+        background: #eee;
+        padding: 10px;
+        border: 1px solid transparent;
+        margin-left: -1px;
+        position: relative;
+        left: 1px;
+      }
+
+      .tabs > .tabber {
+        border-top-left-radius: 5px;
+      }
+
+      .tabs > .tabber ~ .tabber {
+        border-top-left-radius: none;
+      }
+
+      .tab [type="radio"] {
+        display: none;
+      }
+
+      .content {
+        position: absolute;
+        top: 28px;
+        left: 0;
+        background: #bbc;
+        right: 0;
+        bottom: 0;
+        padding: 20px;
+        border: 1px solid transparent;
+        border-top-right-radius: 5px;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+
+      [type="radio"]:checked ~ label {
+        background: #bbc;
+        border-bottom: 1px solid transparent;
+        z-index: 2;
+      }
+
+      [type="radio"]:checked ~ label ~ .content {
+        z-index: 1;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="logo-container">
+      <img src="icon.png" class="logo" />
+    </div>
+
+    <div class="tabs-container">
+      <div class="tabs">
+        <div class="tab">
+          <input type="radio" id="tab-1" name="tab-group-1" checked />
+          <label class="tabber" for="tab-1">Messages</label>
+          <div class="content">
+            <button class="button" id="log">Call Log API</button>
+            <button class="button" id="request">
+              Call Request (async) API
+            </button>
+            <button class="button" id="event">Send event to Rust</button>
+            <button class="button" id="notification">
+              Send test notification
+            </button>
+
+            <div style="margin-top: 24px">
+              <input id="title" value="Awesome Tauri Example!" />
+              <button class="button" id="set-title">Set title</button>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="tab">
-        <input type="radio" id="tab-2" name="tab-group-1">
-        <label class="tabber" for="tab-2">File System</label>
-        <div class="content">
-          <div style="margin-top: 24px">
-            <select class="button" id="dir">
-              <option value="">None</option>
-            </select>
-            <input id="path-to-read" placeholder="Type the path to read...">
-            <button class="button" id="read">Read</button>
-          </div>
-          <div style="margin-top: 24px">
-            <input id="dialog-default-path" placeholder="Default path">
-            <input id="dialog-filter" placeholder="Extensions filter">
-            <div>
-              <input type="checkbox" id="dialog-multiple">
-              <label>Multiple</label>
+        <div class="tab">
+          <input type="radio" id="tab-2" name="tab-group-1" />
+          <label class="tabber" for="tab-2">File System</label>
+          <div class="content">
+            <div style="margin-top: 24px">
+              <select class="button" id="dir">
+                <option value="">None</option>
+              </select>
+              <input id="path-to-read" placeholder="Type the path to read..." />
+              <button class="button" id="read">Read</button>
             </div>
-            <div>
-              <input type="checkbox" id="dialog-directory">
-              <label>Directory</label>
+            <div style="margin-top: 24px">
+              <input id="dialog-default-path" placeholder="Default path" />
+              <input id="dialog-filter" placeholder="Extensions filter" />
+              <div>
+                <input type="checkbox" id="dialog-multiple" />
+                <label>Multiple</label>
+              </div>
+              <div>
+                <input type="checkbox" id="dialog-directory" />
+                <label>Directory</label>
+              </div>
+
+              <button class="button" id="open-dialog">Open dialog</button>
+              <button class="button" id="save-dialog">Open save dialog</button>
             </div>
-
-            <button class="button" id="open-dialog">Open dialog</button>
-            <button class="button" id="save-dialog">Open save dialog</button>
           </div>
         </div>
-      </div>
 
-      <div class="tab">
-        <input type="radio" id="tab-3" name="tab-group-1">
-        <label class="tabber" for="tab-3">Communication</label>
-        <div class="content">
-          <div style="margin-top: 24px">
-            <input id="url" value="https://tauri.studio">
-            <button class="button" id="open-url">Open URL</button>
-          </div>
+        <div class="tab">
+          <input type="radio" id="tab-3" name="tab-group-1" />
+          <label class="tabber" for="tab-3">Communication</label>
+          <div class="content">
+            <div style="margin-top: 24px">
+              <input id="url" value="https://tauri.studio" />
+              <button class="button" id="open-url">Open URL</button>
+            </div>
 
-          <div style="margin-top: 24px">
-            <select class="button" id="request-method">
-              <option value="GET">GET</option>
-              <option value="POST">POST</option>
-              <option value="PUT">PUT</option>
-              <option value="PATCH">PATCH</option>
-              <option value="DELETE">DELETE</option>
-            </select>
-            <input id="request-url" placeholder="Type the request URL...">
-            <br />
-            <textarea id="request-body" placeholder="Request body" rows="5"
-              style="width:100%;margin-right:10px;font-size:12px"></textarea>
-            </br>
-            <button class="button" id="make-request">Make request</button>
+            <div style="margin-top: 24px">
+              <select class="button" id="request-method">
+                <option value="GET">GET</option>
+                <option value="POST">POST</option>
+                <option value="PUT">PUT</option>
+                <option value="PATCH">PATCH</option>
+                <option value="DELETE">DELETE</option>
+              </select>
+              <input id="request-url" placeholder="Type the request URL..." />
+              <br />
+              <textarea
+                id="request-body"
+                placeholder="Request body"
+                rows="5"
+                style="width: 100%; margin-right: 10px; font-size: 12px"
+              ></textarea>
+              <br />
+              <button class="button" id="make-request">Make request</button>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="tab">
-        <input type="radio" id="tab-4" name="tab-group-1">
-        <label class="tabber" for="tab-4">CLI</label>
-        <div class="content">
-          <div style="margin-top: 24px">
-            <button class="button" id="cli-matches">Get matches</button>
+        <div class="tab">
+          <input type="radio" id="tab-4" name="tab-group-1" />
+          <label class="tabber" for="tab-4">CLI</label>
+          <div class="content">
+            <div style="margin-top: 24px">
+              <button class="button" id="cli-matches">Get matches</button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div id="response"></div>
-  <div class="bottom">
-    <a class="dark-link" target="_blank" href="https://tauri.studio">Tauri Documentation</a>&nbsp;&nbsp;&nbsp;
-    <a class="dark-link" target="_blank" href="https://github.com/tauri-apps/tauri">Github Repo</a>&nbsp;&nbsp;&nbsp;
-    <a class="dark-link" target="_blank"
-      href="https://github.com/tauri-apps/tauri/tree/dev/tauri/examples/communication">Source for this App</a>
-  </div>
-  <script>
-    function registerResponse(response) {
-      document.getElementById('response').innerHTML = typeof response === 'object' ?
-        JSON.stringify(response) :
-        response
-    }
-
-    function addClickEnterHandler(button, input, handler) {
-      button.addEventListener('click', handler)
-      input.addEventListener('keyup', function (e) {
-        if (e.keyCode === 13) {
-          handler()
-        }
-      })
-    }
-
-    window.__TAURI__.event.listen('rust-event', function (res) {
-      document.getElementById('response').innerHTML = JSON.stringify(res)
-    })
-
-    document.querySelector('.logo').addEventListener('click', function () {
-      window.__TAURI__.window.open('https://tauri.studio/')
-    })
-
-    var dirSelect = document.getElementById('dir')
-    for (var key in window.__TAURI__.fs.Dir) {
-      if (isNaN(parseInt(key))) {
-        var value = window.__TAURI__.fs.Dir[key]
-        var opt = document.createElement("option")
-        opt.value = value
-        opt.innerHTML = key
-        dirSelect.appendChild(opt)
+    <div id="response"></div>
+    <div class="bottom">
+      <a class="dark-link" target="_blank" href="https://tauri.studio"
+        >Tauri Documentation</a
+      >&nbsp;&nbsp;&nbsp;
+      <a
+        class="dark-link"
+        target="_blank"
+        href="https://github.com/tauri-apps/tauri"
+        >Github Repo</a
+      >&nbsp;&nbsp;&nbsp;
+      <a
+        class="dark-link"
+        target="_blank"
+        href="https://github.com/tauri-apps/tauri/tree/dev/tauri/examples/communication"
+        >Source for this App</a
+      >
+    </div>
+    <script>
+      function registerResponse(response) {
+        document.getElementById("response").innerHTML =
+          typeof response === "object" ? JSON.stringify(response) : response;
       }
-    }
-
-  </script>
-  <script src="communication.js"></script>
-  <script src="fs.js"></script>
-  <script src="window.js"></script>
-  <script src="dialog.js"></script>
-  <script src="http.js"></script>
-  <script src="cli.js"></script>
-  <script src="notification.js"></script>
-</body>
 
+      function addClickEnterHandler(button, input, handler) {
+        button.addEventListener("click", handler);
+        input.addEventListener("keyup", function (e) {
+          if (e.keyCode === 13) {
+            handler();
+          }
+        });
+      }
+
+      window.__TAURI__.event.listen("rust-event", function (res) {
+        document.getElementById("response").innerHTML = JSON.stringify(res);
+      });
+
+      document.querySelector(".logo").addEventListener("click", function () {
+        window.__TAURI__.window.open("https://tauri.studio/");
+      });
+
+      var dirSelect = document.getElementById("dir");
+      for (var key in window.__TAURI__.fs.Dir) {
+        if (isNaN(parseInt(key))) {
+          var value = window.__TAURI__.fs.Dir[key];
+          var opt = document.createElement("option");
+          opt.value = value;
+          opt.innerHTML = key;
+          dirSelect.appendChild(opt);
+        }
+      }
+    </script>
+    <script src="communication.js"></script>
+    <script src="fs.js"></script>
+    <script src="window.js"></script>
+    <script src="dialog.js"></script>
+    <script src="http.js"></script>
+    <script src="cli.js"></script>
+    <script src="notification.js"></script>
+  </body>
 </html>

tauri/examples/communication/dist/notification.js

@@ -1,21 +1,23 @@
 function sendNotification() {
-  new Notification('Notification title', {
-    body: 'This is the notification body'
-  })
+  new Notification("Notification title", {
+    body: "This is the notification body",
+  });
 }
 
-document.getElementById('notification').addEventListener('click', function () {
-  if (Notification.permission === 'default') {
-    Notification.requestPermission().then(function (response) {
-      if (response === 'granted') {
-        sendNotification()
-      } else {
-        registerResponse('Permission is ' + response)
-      }
-    }).catch(registerResponse)
-  } else if (Notification.permission === 'granted') {
-    sendNotification()
+document.getElementById("notification").addEventListener("click", function () {
+  if (Notification.permission === "default") {
+    Notification.requestPermission()
+      .then(function (response) {
+        if (response === "granted") {
+          sendNotification();
+        } else {
+          registerResponse("Permission is " + response);
+        }
+      })
+      .catch(registerResponse);
+  } else if (Notification.permission === "granted") {
+    sendNotification();
   } else {
-    registerResponse('Permission is denied')
+    registerResponse("Permission is denied");
   }
-})
+});

tauri/examples/communication/dist/window.js

@@ -1,19 +1,19 @@
-var urlInput = document.getElementById('url')
+var urlInput = document.getElementById("url");
 
 addClickEnterHandler(
-  document.getElementById('open-url'),
+  document.getElementById("open-url"),
   urlInput,
   function () {
-    window.__TAURI__.window.open(urlInput.value)
+    window.__TAURI__.window.open(urlInput.value);
   }
-)
+);
 
-var titleInput = document.getElementById('title')
+var titleInput = document.getElementById("title");
 
 addClickEnterHandler(
-  document.getElementById('set-title'),
+  document.getElementById("set-title"),
   titleInput,
   function () {
-    window.__TAURI__.window.setTitle(titleInput.value)
+    window.__TAURI__.window.setTitle(titleInput.value);
   }
-)
+);

tauri/examples/communication/src-tauri/tauri.conf.json

@@ -8,31 +8,37 @@
   "tauri": {
     "cli": {
       "description": "Tauri communication example",
-      "args": [{
-        "short": "c",
-        "name": "config",
-        "takesValue": true,
-        "description": "Config path"
-      }, {
-        "short": "t",
-        "name": "theme",
-        "takesValue": true,
-        "description": "App theme",
-        "possibleValues": ["light", "dark", "system"]
-      }, {
-        "short": "v",
-        "name": "verbose",
-        "multipleOccurrences": true,
-        "description": "Verbosity level"
-      }],
+      "args": [
+        {
+          "short": "c",
+          "name": "config",
+          "takesValue": true,
+          "description": "Config path"
+        },
+        {
+          "short": "t",
+          "name": "theme",
+          "takesValue": true,
+          "description": "App theme",
+          "possibleValues": ["light", "dark", "system"]
+        },
+        {
+          "short": "v",
+          "name": "verbose",
+          "multipleOccurrences": true,
+          "description": "Verbosity level"
+        }
+      ],
       "subcommands": {
         "update": {
           "description": "Updates the app",
-          "args": [{
-            "short": "b",
-            "name": "background",
-            "description": "Update in background"
-          }]
+          "args": [
+            {
+              "short": "b",
+              "name": "background",
+              "description": "Update in background"
+            }
+          ]
         }
       }
     },
@@ -43,7 +49,11 @@
       "active": true,
       "identifier": "com.tauri.communication",
       "icon": [
-        "icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"
+        "icons/32x32.png",
+        "icons/128x128.png",
+        "icons/128x128@2x.png",
+        "icons/icon.icns",
+        "icons/icon.ico"
       ]
     },
     "allowlist": {

tauri/test/fixture/config.json

@@ -1 +1 @@
-{"devPath": "http://localhost"}
+{ "devPath": "http://localhost" }

tauri/test/fixture/dist/index.tauri.html

@@ -1 +1,6 @@
-<html><head></head><body><iframe id=mainframe></iframe></body></html>
+<html>
+  <head></head>
+  <body>
+    <iframe id="mainframe"></iframe>
+  </body>
+</html>