API example new ui (#1310)

Co-authored-by: Lucas Nogueira <lucas@tauri.studio>

examples/api/README.md

@@ -5,7 +5,7 @@ In the future, this app will be used on Tauri's integration tests.
 ![App screenshot](./screenshot.png?raw=true)
 
 ## Running the example
-- Install dependencies
+- Install dependencies (Run inside of this folder tauri/examples/api/)
 ```bash
 # with yarn
 $ yarn
@@ -13,12 +13,25 @@ $ yarn
 $ npm install
 ```
 
-- Compile the app
+- Compile tauri
+go to root of the tauri repo and run
+
+Linux / Mac:
+```
+sh .scripts/setup.sh
+```
+
+Windows:
+```
+./.scripts/setup.ps1
+```
+
+- Compile the app (Run inside of this folder tauri/examples/api/)
 ```bash
 # with yarn
-$ yarn tauri:build
+$ yarn tauri dev
 # with npm
-$ npm run tauri:build
+$ npm run tauri dev
 ```
 
 - Run the app

examples/api/public/global.css

@@ -1,15 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Tauri&display=swap');
+
 * {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Tauri, Arial, Helvetica, sans-serif;
 }
 
 body {
-  background: #889;
+  background: #18191a;
+}
+
+.noselect {
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
 }
 
 .logo-container {
   width: 95%;
   margin: 0px auto;
-  overflow: hidden;
 }
 
 .logo-link {
@@ -30,35 +40,37 @@ body {
 }
 
 #response {
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  top: 440px;
-  min-height: 110px;
-  background: #aab;
+  height:100%;
+  max-height: 100%;
+  margin-top: 1em;
+  background: rgb(36, 37, 38);
+  color: #f0f4f5;
+  border: solid 1px rgba(255, 255, 255, 0.055);
+  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
   font-family: "Courier New", Courier, monospace;
   font-size: 12px;
   word-wrap: break-word;
-  padding: 5px;
-  border-radius: 5px;
+  padding: 0px 15px;
   overflow-y: auto;
 }
 
 input,
-select {
-  background: white;
+select, textarea {
+  background: rgb(53, 53, 53);
+  color: #fff;
   font-family: system-ui, sans-serif;
-  border: 0;
+  border: none !important;
   border-radius: 0.25rem;
   font-size: 1rem;
   line-height: 1.2;
   padding: 0.25rem 0.5rem;
   margin: 0.25rem;
+  transition: 0.2s ease;
 }
 
 button:hover,
 button:focus {
-  background: #0053ba;
+  background: #ffe07a;
 }
 
 button:focus {
@@ -73,8 +85,8 @@ button:active {
 .button {
   border: 0;
   border-radius: 0.25rem;
-  background: #1e88e5;
-  color: white;
+  background: #67D6ED;
+  color: rgb(0, 0, 0);
   font-family: system-ui, sans-serif;
   font-size: 1rem;
   line-height: 1.2;
@@ -83,6 +95,7 @@ button:active {
   padding: 0.25rem 0.5rem;
   margin: 0.25rem;
   cursor: pointer;
+  transition: 0.2s ease;
 }
 
 .bottom {
@@ -99,64 +112,51 @@ button:active {
 .dark-link {
   color: white;
   text-decoration: none !important;
+  padding: 0.5em;
+  background: rgb(36, 37, 38);
+  transition: 0.2s ease;
+  border: solid 1px rgba(255, 255, 255, 0.055);
+  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
 }
 
-.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;
+.dark-link:hover{
+  background: #3d392a;
 }
 
-.tabs > .tabber {
-  border-top-left-radius: 5px;
+.nv{
+  color: #fff;
+  cursor: pointer;
+  transition: 0.25s ease;
 }
 
-.tabs > .tabber ~ .tabber {
-  border-top-left-radius: none;
+.nv:hover{
+  color: #ffe07a;
+  padding-left: 8px;
+  border-left: solid 5px #ffe07a;
 }
 
-.tab [type="radio"] {
-  display: none;
+.nv_selected{
+  color: #67D6ED;
+  padding-left: 8px;
+  border-left: solid 5px #67D6ED;
 }
 
 .content {
-  position: absolute;
-  top: 28px;
-  left: 0;
-  background: #bbc;
-  right: 0;
-  bottom: 0;
+  background: rgb(36, 37, 38);
+  color: #f0f4f5;
   padding: 20px;
-  border: 1px solid transparent;
-  border-top-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
+  width: 100%;
+  border: solid 1px rgba(255, 255, 255, 0.055);
+  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
+}
+
+main{
+  height: 100%;
 }
 
 [type="radio"]:checked ~ label {
-  background: #bbc;
+  background: rgb(36, 37, 38);
+  color: #67D6ED;
   border-bottom: 1px solid transparent;
   z-index: 2;
 }
@@ -164,3 +164,19 @@ button:active {
 [type="radio"]:checked ~ label ~ .content {
   z-index: 1;
 }
+
+.flex {
+  display: flex;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.col {
+  flex-direction: column;
+}
+
+.just-around{
+  justify-content: space-between;
+}

examples/api/src/App.svelte

@@ -1,52 +1,66 @@
 <script>
   import { onMount } from "svelte";
-  import { open } from "@tauri-apps/api/window"
+  import { open } from "@tauri-apps/api/window";
 
-  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 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 Welcome from "./components/Welcome.svelte";
 
-  const views = [{
-    label: 'Messages',
-    component: Communication
-  }, {
-    label: 'CLI',
-    component: Cli
-  }, {
-    label: 'Dialog',
-    component: Dialog
-  }, {
-    label: 'File system',
-    component: FileSystem
-  }, {
-    label: 'HTTP',
-    component: Http
-  }, {
-    label: 'Notifications',
-    component: Notifications
-  }, {
-    label: 'Window',
-    component: Window
-  }, {
-    label: 'Shortcuts',
-    component: Shortcuts
-  }]
+  const views = [
+    {
+      label: "Welcome",
+      component: Welcome,
+    },
+    {
+      label: "Messages",
+      component: Communication,
+    },
+    {
+      label: "CLI",
+      component: Cli,
+    },
+    {
+      label: "Dialog",
+      component: Dialog,
+    },
+    {
+      label: "File system",
+      component: FileSystem,
+    },
+    {
+      label: "HTTP",
+      component: Http,
+    },
+    {
+      label: "Notifications",
+      component: Notifications,
+    },
+    {
+      label: "Window",
+      component: Window,
+    },
+    {
+      label: "Shortcuts",
+      component: Shortcuts,
+    },
+  ];
 
-  let selected = views[0].label;
+  let selected = views[0];
 
-  let response = '';
+  let responses = [""];
 
   function select(view) {
-    selected = view.label
+    selected = view;
   }
 
   function onMessage(value) {
-    response = typeof value === "string" ? value : JSON.stringify(value);
+    responses += typeof value === "string" ? value : JSON.stringify(value);
   }
 
   function onLogoClick() {
@@ -55,36 +69,57 @@
 </script>
 
 <main>
-  <div class="logo-container">
-    <img src="icon.png" class="logo" on:click={onLogoClick} alt="logo" />
+  <div class="flex row noselect just-around" style="margin=1em;">
+    <img src="tauri.png" height="60" on:click={onLogoClick} alt="logo" />
+    <div>
+      <a
+        class="dark-link"
+        target="_blank"
+        href="https://tauri.studio/en/docs/getting-started/intro"
+      >
+        Documentation
+      </a>
+      <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"
+      >
+        Source
+      </a>
+    </div>
   </div>
-
-  <div class="tabs-container">
-    <div class="tabs">
+  <div class="flex row">
+    <div style="width:15em; margin-left:0.5em">
       {#each views as view}
-      <div class="tab">
-        <input id={`tab-${view.label}`} type="radio" checked={view.label===selected} />
-        <label for={`tab-${view.label}`} class="tabber" on:click={()=> select(view)}>{view.label}</label>
-        <div class="content">
-          <svelte:component this={view.component} {onMessage} />
-        </div>
-      </div>
+        <p
+          class="nv noselect {selected === view ? 'nv_selected' : ''}"
+          on:click={() => select(view)}
+        >
+          {view.label}
+        </p>
       {/each}
     </div>
+    <div class="content">
+      <svelte:component this={selected.component} {onMessage} />
+    </div>
   </div>
-  <div id="response">{@html 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/api">
-      Source for this App
-    </a>
+  <div id="response">
+    <p class="flex row just-around">
+      <strong>Tauri Console</strong>
+      <a
+        class="nv"
+        on:click={() => {
+          responses = [""];
+        }}>clear</a
+      >
+    </p>
+    {responses}
   </div>
 </main>

examples/api/src/components/Cli.svelte

@@ -4,14 +4,12 @@
   export let onMessage;
 
   function cliMatches() {
-    getMatches()
-      .then(onMessage)
-      .catch(onMessage);
+    getMatches().then(onMessage).catch(onMessage);
   }
 </script>
 
-<div style="margin-top: 24px">
+<div>
   <button class="button" id="cli-matches" on:click={cliMatches}>
     Get matches
   </button>
-</div>
+</div>

examples/api/src/components/Dialog.svelte

@@ -1,17 +1,12 @@
 <script>
-  import {
-    open,
-    save
-  } from '@tauri-apps/api/dialog'
-  import {
-    readBinaryFile
-  } from '@tauri-apps/api/fs'
+  import { open, save } from "@tauri-apps/api/dialog";
+  import { readBinaryFile } from "@tauri-apps/api/fs";
 
-  export let onMessage
-  let defaultPath = null
-  let filter = null
-  let multiple = false
-  let directory = false
+  export let onMessage;
+  let defaultPath = null;
+  let filter = null;
+  let multiple = false;
+  let directory = false;
 
   function arrayBufferToBase64(buffer, callback) {
     var blob = new Blob([buffer], {
@@ -28,57 +23,78 @@
   function openDialog() {
     open({
       defaultPath,
-      filters: filter ? [{
-        name: 'Tauri Example',
-        extensions: filter.split(',').map(f => f.trim())
-      }] : [],
+      filters: filter
+        ? [
+            {
+              name: "Tauri Example",
+              extensions: filter.split(",").map((f) => f.trim()),
+            },
+          ]
+        : [],
       multiple,
-      directory
-    }).then(function (res) {
-      if (Array.isArray(res)) {
-        onMessage(res)
-      } else {
-        var pathToRead = res
-        var isFile = pathToRead.match(/\S+\.\S+$/g)
-        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
-                onMessage('<img src="' + src + '"></img>')
-              })
-            } else {
-              onMessage(res)
-            }
-          } else {
-            onMessage(res)
-          }
-        }).catch(onMessage(res))
-      }
-    }).catch(onMessage)
+      directory,
+    })
+      .then(function (res) {
+        if (Array.isArray(res)) {
+          onMessage(res);
+        } else {
+          var pathToRead = res;
+          var isFile = pathToRead.match(/\S+\.\S+$/g);
+          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;
+                      onMessage('<img src="' + src + '"></img>');
+                    }
+                  );
+                } else {
+                  onMessage(res);
+                }
+              } else {
+                onMessage(res);
+              }
+            })
+            .catch(onMessage(res));
+        }
+      })
+      .catch(onMessage);
   }
 
   function saveDialog() {
     save({
       defaultPath,
-      filters: filter ? [{
-        name: 'Tauri Example',
-        extensions: filter.split(',').map(f => f.trim())
-      }] : [],
-    }).then(onMessage).catch(onMessage)
+      filters: filter
+        ? [
+            {
+              name: "Tauri Example",
+              extensions: filter.split(",").map((f) => f.trim()),
+            },
+          ]
+        : [],
+    })
+      .then(onMessage)
+      .catch(onMessage);
   }
-
 </script>
 
-<style>
-  #dialog-filter {
-    width: 260px;
-  }
-</style>
-
-<div style="margin-top: 24px">
-  <input id="dialog-default-path" placeholder="Default path" bind:value={defaultPath} />
-  <input id="dialog-filter" placeholder="Extensions filter, comma-separated" bind:value={filter} />
+<div>
+  <input
+    id="dialog-default-path"
+    placeholder="Default path"
+    bind:value={defaultPath}
+  />
+  <input
+    id="dialog-filter"
+    placeholder="Extensions filter, comma-separated"
+    bind:value={filter}
+  />
   <div>
     <input type="checkbox" id="dialog-multiple" bind:checked={multiple} />
     <label for="dialog-multiple">Multiple</label>
@@ -88,6 +104,16 @@
     <label for="dialog-directory">Directory</label>
   </div>
 
-  <button class="button" id="open-dialog" on:click={openDialog}>Open dialog</button>
-  <button class="button" id="save-dialog" on:click={saveDialog}>Open save dialog</button>
-</div>
+  <button class="button" id="open-dialog" on:click={openDialog}
+    >Open dialog</button
+  >
+  <button class="button" id="save-dialog" on:click={saveDialog}
+    >Open save dialog</button
+  >
+</div>
+
+<style>
+  #dialog-filter {
+    width: 260px;
+  }
+</style>

examples/api/src/components/FileSystem.svelte

@@ -1,78 +1,89 @@
 <script>
-  import {
-    readBinaryFile,
-    readDir,
-    Dir,
-  } from '@tauri-apps/api/fs'
+  import { readBinaryFile, readDir, Dir } from "@tauri-apps/api/fs";
 
-  export let onMessage
+  export let onMessage;
 
-  let pathToRead = ''
+  let pathToRead = "";
 
   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]]);
+    .filter((key) => isNaN(parseInt(key)))
+    .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()
-    }
-    const promise = isFile ? readBinaryFile(pathToRead, opts) : readDir(pathToRead, opts)
-    promise.then(function (response) {
-      if (isFile) {
-        if (pathToRead.includes('.png') || pathToRead.includes('.jpg')) {
-          arrayBufferToBase64(new Uint8Array(response), function (base64) {
-            const src = 'data:image/png;base64,' + base64
-            onMessage('<img src="' + src + '"></img>')
-          })
+      dir: getDir(),
+    };
+    const promise = isFile
+      ? readBinaryFile(pathToRead, opts)
+      : readDir(pathToRead, opts);
+    promise
+      .then(function (response) {
+        if (isFile) {
+          if (pathToRead.includes(".png") || pathToRead.includes(".jpg")) {
+            arrayBufferToBase64(new Uint8Array(response), function (base64) {
+              const src = "data:image/png;base64," + base64;
+              onMessage('<img src="' + src + '"></img>');
+            });
+          } else {
+            const value = String.fromCharCode.apply(null, response);
+            onMessage(
+              '<textarea id="file-response" style="height: 400px"></textarea><button id="file-save">Save</button>'
+            );
+            setTimeout(() => {
+              const fileInput = document.getElementById("file-response");
+              fileInput.value = value;
+              document
+                .getElementById("file-save")
+                .addEventListener("click", function () {
+                  writeFile(
+                    {
+                      file: pathToRead,
+                      contents: fileInput.value,
+                    },
+                    {
+                      dir: getDir(),
+                    }
+                  ).catch(onMessage);
+                });
+            });
+          }
         } else {
-          const value = String.fromCharCode.apply(null, response)
-          onMessage('<textarea id="file-response" style="height: 400px"></textarea><button id="file-save">Save</button>')
-          setTimeout(() => {
-            const fileInput = document.getElementById('file-response')
-            fileInput.value = value
-            document.getElementById('file-save').addEventListener('click', function () {
-              writeFile({
-                file: pathToRead,
-                contents: fileInput.value
-              }, {
-                dir: getDir()
-              }).catch(onMessage)
-            })
-          })
+          onMessage(response);
         }
-      } else {
-        onMessage(response)
-      }
-    }).catch(onMessage)
+      })
+      .catch(onMessage);
   }
 </script>
 
-<form style="margin-top: 24px" on:submit|preventDefault={read}>
+<form on:submit|preventDefault={read}>
   <select class="button" id="dir">
     <option value="">None</option>
     {#each DirOptions as dir}
-    <option value={dir[1]}>{dir[0]}</option>
+      <option value={dir[1]}>{dir[0]}</option>
     {/each}
   </select>
-  <input id="path-to-read" placeholder="Type the path to read..." bind:value={pathToRead} />
+  <input
+    id="path-to-read"
+    placeholder="Type the path to read..."
+    bind:value={pathToRead}
+  />
   <button class="button" id="read">Read</button>
-</form>
+</form>

examples/api/src/components/Http.svelte

@@ -7,13 +7,13 @@
   export let onMessage;
 
   async function makeHttpRequest() {
-    const client = await getClient()
+    const client = await getClient();
     let method = httpMethod || "GET";
     let url = httpUrl || "";
 
     const options = {
       url: url || "",
-      method: method || "GET"
+      method: method || "GET",
     };
 
     if (
@@ -21,13 +21,11 @@
       (httpBody.startsWith("[") && httpBody.endsWith("]"))
     ) {
       options.body = Body.json(JSON.parse(httpBody));
-    } else if (httpBody !== '') {
-      options.body = Body.text(httpBody)
+    } else if (httpBody !== "") {
+      options.body = Body.text(httpBody);
     }
 
-    client.request(options)
-      .then(onMessage)
-      .catch(onMessage);
+    client.request(options).then(onMessage).catch(onMessage);
   }
 </script>
 
@@ -39,11 +37,18 @@
     <option value="PATCH">PATCH</option>
     <option value="DELETE">DELETE</option>
   </select>
-  <input id="request-url" placeholder="Type the request URL..." bind:value={httpUrl} />
+  <input
+    id="request-url"
+    placeholder="Type the request URL..."
+    bind:value={httpUrl}
+  />
   <br />
-  <textarea id="request-body" placeholder="Request body" rows="5" style="width:100%;margin-right:10px;font-size:12px"
-    bind:value={httpBody} />
-  <button class="button" id="make-request">
-    Make request
-  </button>
-</form>
+  <textarea
+    id="request-body"
+    placeholder="Request body"
+    rows="5"
+    style="width:100%;margin-right:10px;font-size:12px"
+    bind:value={httpBody}
+  />
+  <button class="button" id="make-request"> Make request </button>
+</form>

examples/api/src/components/Notifications.svelte

@@ -3,7 +3,7 @@
 
   function _sendNotification() {
     new Notification("Notification title", {
-      body: "This is the notification body"
+      body: "This is the notification body",
     });
   }
 
@@ -28,4 +28,4 @@
 
 <button class="button" id="notification" on:click={sendNotification}>
   Send test notification
-</button>
+</button>

examples/api/src/components/Shortcuts.svelte

@@ -1,55 +1,68 @@
 <script>
-  import { writable } from 'svelte/store'
+  import { writable } from "svelte/store";
   import {
     register as registerShortcut,
     unregister as unregisterShortcut,
-    unregisterAll as unregisterAllShortcuts
-  } from '@tauri-apps/api/globalShortcut'
+    unregisterAll as unregisterAllShortcuts,
+  } from "@tauri-apps/api/globalShortcut";
 
-  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`)
-    }).then(() => {
-      shortcuts.update(shortcuts_ => [...shortcuts_, shortcut_])
-      onMessage(`Shortcut ${shortcut_} registered successfully`)
-    }).catch(onMessage)
+      onMessage(`Shortcut ${shortcut_} triggered`);
+    })
+      .then(() => {
+        shortcuts.update((shortcuts_) => [...shortcuts_, shortcut_]);
+        onMessage(`Shortcut ${shortcut_} registered successfully`);
+      })
+      .catch(onMessage);
   }
 
   function unregister(shortcut) {
-    const shortcut_ = shortcut
-    unregisterShortcut(shortcut_).then(() => {
-      shortcuts.update(shortcuts_ => shortcuts_.filter(s => s !== shortcut_))
-      onMessage(`Shortcut ${shortcut_} unregistered`)
-    }).catch(onMessage)
+    const shortcut_ = shortcut;
+    unregisterShortcut(shortcut_)
+      .then(() => {
+        shortcuts.update((shortcuts_) =>
+          shortcuts_.filter((s) => s !== shortcut_)
+        );
+        onMessage(`Shortcut ${shortcut_} unregistered`);
+      })
+      .catch(onMessage);
   }
 
   function unregisterAll() {
-    unregisterAllShortcuts().then(() => {
-      shortcuts.update(() => [])
-      onMessage(`Unregistered all shortcuts`)
-    }).catch(onMessage)
+    unregisterAllShortcuts()
+      .then(() => {
+        shortcuts.update(() => []);
+        onMessage(`Unregistered all shortcuts`);
+      })
+      .catch(onMessage);
   }
 </script>
 
-<div style="margin-top: 24px">
+<div>
   <div>
-    <input placeholder="Type a shortcut with '+' as separator..." bind:value={shortcut}>
+    <input
+      placeholder="Type a shortcut with '+' as separator..."
+      bind:value={shortcut}
+    />
     <button type="button" on:click={register}>Register</button>
   </div>
   <div>
     {#each $shortcuts as savedShortcut}
-    <div>
-      {savedShortcut}
-      <button type="button" on:click={()=> unregister(savedShortcut)}>Unregister</button>
-    </div>
+      <div>
+        {savedShortcut}
+        <button type="button" on:click={() => unregister(savedShortcut)}
+          >Unregister</button
+        >
+      </div>
     {/each}
     {#if $shortcuts.length}
-    <button type="button" on:click={unregisterAll}>Unregister all</button>
+      <button type="button" on:click={unregisterAll}>Unregister all</button>
     {/if}
   </div>
-</div>
+</div>

examples/api/src/components/Welcome.svelte

@@ -0,0 +1,6 @@
+<h1>Welcome</h1>
+<p>
+  Tauri's API capabilities using the ` @tauri-apps/api ` package. It's used as
+  the main validation app, serving as the testbed of our development process. In
+  the future, this app will be used on Tauri's integration tests.
+</p>

examples/api/src/components/Window.svelte

@@ -1,6 +1,6 @@
 <script>
   import { appWindow } from "@tauri-apps/api/window";
-  import { open as openDialog } from '@tauri-apps/api/dialog'
+  import { open as openDialog } from "@tauri-apps/api/dialog";
   import { open } from "@tauri-apps/api/shell";
 
   const {
@@ -12,6 +12,7 @@
     unminimize,
     show,
     hide,
+    setTransparent,
     setDecorations,
     setAlwaysOnTop,
     setWidth,
@@ -23,30 +24,29 @@
     setY,
     // setPosition,
     setFullscreen,
-    setIcon
-  } = appWindow
-
-  export let onMessage;
-  let pathValue = "https://tauri.studio";
-  let openWith = "";
-  let resizable = true
-  let maximized = false
-  let decorations = false
-  let alwaysOnTop = false
-  let fullscreen = false
-  let width = 600
-  let height = 600
-  let minWidth = 600
-  let minHeight = 600
-  let maxWidth = null
-  let maxHeight = null
-  let x = 300
-  let y = 300
-
-  let windowTitle = 'Awesome Tauri Example!';
+    setIcon,
+  } = appWindow;
+
+  let urlValue = "https://tauri.studio";
+  let resizable = true;
+  let maximized = false;
+  let transparent = false;
+  let decorations = true;
+  let alwaysOnTop = false;
+  let fullscreen = false;
+  let width = 900;
+  let height = 700;
+  let minWidth = 600;
+  let minHeight = 600;
+  let maxWidth = null;
+  let maxHeight = null;
+  let x = 100;
+  let y = 100;
+
+  let windowTitle = "Awesome Tauri Example!";
 
   function openUrl() {
-    open(pathValue, !!openWith ? openWith : undefined).catch(onMessage);
+    open(urlValue);
   }
 
   function setTitle_() {
@@ -54,65 +54,44 @@
   }
 
   function hide_() {
-    hide()
-    setTimeout(show, 2000)
+    hide();
+    setTimeout(show, 2000);
   }
 
   function minimize_() {
-    minimize()
-    setTimeout(unminimize, 2000)
+    minimize();
+    setTimeout(unminimize, 2000);
   }
 
   function getIcon() {
     openDialog({
-      multiple: false
-    }).then(setIcon)
+      multiple: false,
+    }).then(setIcon);
   }
 
-  $: setResizable(resizable)
-  $: maximized ? maximize() : unmaximize()
-  $: setDecorations(decorations)
-  $: setAlwaysOnTop(alwaysOnTop)
-  $: setFullscreen(fullscreen)
-
-  $: setWidth(width)
-  $: setHeight(height)
-  $: minWidth && minHeight && setMinSize(minWidth, minHeight)
-  $: maxWidth && maxHeight && setMaxSize(maxWidth, maxHeight)
-  $: setX(x)
-  $: setY(y)
+  $: setResizable(resizable);
+  $: maximized ? maximize() : unmaximize();
+  //$: setTransparent(transparent)
+  $: setDecorations(decorations);
+  $: setAlwaysOnTop(alwaysOnTop);
+  $: setFullscreen(fullscreen);
+
+  $: setWidth(width);
+  $: setHeight(height);
+  $: minWidth && minHeight && setMinSize(minWidth, minHeight);
+  $: maxWidth && maxHeight && setMaxSize(maxWidth, maxHeight);
+  $: setX(x);
+  $: setY(y);
 </script>
 
-<style>
-  .flex {
-    display: flex;
-  }
-
-  .flex-row {
-    flex-direction: row;
-  }
-
-  .flex-column {
-    flex-direction: column;
-  }
-
-  .grow {
-    flex-grow: 1;
-  }
-
-  .window-controls input {
-    width: 50px;
-  }
-</style>
-
-<div class="flex flex-column">
+<div class="flex col">
   <div>
     <label>
-      <input type="checkbox" bind:checked={resizable}>
+      <input type="checkbox" bind:checked={resizable} />
       Resizable
     </label>
     <label>
-      <input type="checkbox" bind:checked={maximized}>
+      <input type="checkbox" bind:checked={maximized} />
       Maximize
     </label>
     <button title="Unminimizes after 2 seconds" on:click={minimize_}>
@@ -122,64 +101,66 @@
       Hide
     </button>
     <label>
-      <input type="checkbox" bind:checked={decorations}>
+      <input type="checkbox" bind:checked={transparent} />
+      Transparent
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={decorations} />
       Has decorations
     </label>
     <label>
-      <input type="checkbox" bind:checked={alwaysOnTop}>
+      <input type="checkbox" bind:checked={alwaysOnTop} />
       Always on top
     </label>
     <label>
-      <input type="checkbox" bind:checked={fullscreen}>
+      <input type="checkbox" bind:checked={fullscreen} />
       Fullscreen
     </label>
-    <button on:click={getIcon}>
-      Change icon
-    </button>
+    <button on:click={getIcon}> Change icon </button>
   </div>
   <div>
     <div class="window-controls flex flex-row">
-      <div class="flex flex-column grow">
+      <div class="flex col grow">
         <div>
           X
-          <input type="number" bind:value={x} min="0">
+          <input type="number" bind:value={x} min="0" />
         </div>
         <div>
           Y
-          <input type="number" bind:value={y} min="0">
+          <input type="number" bind:value={y} min="0" />
         </div>
       </div>
 
-      <div class="flex flex-column grow">
+      <div class="flex col grow">
         <div>
           Width
-          <input type="number" bind:value={width} min="400">
+          <input type="number" bind:value={width} min="400" />
         </div>
         <div>
           Height
-          <input type="number" bind:value={height} min="400">
+          <input type="number" bind:value={height} min="400" />
         </div>
       </div>
 
-      <div class="flex flex-column grow">
+      <div class="flex col grow">
         <div>
           Min width
-          <input type="number" bind:value={minWidth}>
+          <input type="number" bind:value={minWidth} />
         </div>
         <div>
           Min height
-          <input type="number" bind:value={minHeight}>
+          <input type="number" bind:value={minHeight} />
         </div>
       </div>
 
-      <div class="flex flex-column grow">
+      <div class="flex col grow">
         <div>
           Max width
-          <input type="number" bind:value={maxWidth} min="400">
+          <input type="number" bind:value={maxWidth} min="400" />
         </div>
         <div>
           Max height
-          <input type="number" bind:value={maxHeight} min="400">
+          <input type="number" bind:value={maxHeight} min="400" />
         </div>
       </div>
     </div>
@@ -190,15 +171,20 @@
   <button class="button" type="submit">Set title</button>
 </form>
 <form style="margin-top: 24px" on:submit|preventDefault={openUrl}>
-  <div>
-    <label for="path">Path or URL:</label>
-    <input id="path" bind:value={pathValue} />
-  </div>
-  <div>
-    <label for="openWith">Open With (Optional):</label>
-    <input id="openWith" bind:value={openWith} />
-  </div>
-  <button class="button" id="open-path">
-    Open Path or Url
-  </button>
-</form>
+  <input id="url" bind:value={urlValue} />
+  <button class="button" id="open-url"> Open URL </button>
+</form>
+
+<style>
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  .window-controls input {
+    width: 50px;
+  }
+</style>