Merge release v0.0.2 (#60)

* update v0.0.1

* update v0.0.1

* add rust cache

* rename step

* fix test workflow

* change to build

* add password

* move app.jpeg

* bump & update name

* remove logo

* untrack .vscode

* remove icon from readme

* use npx

* rename file and do dom element check

* formating

* added rust files

* generated bindings

* rename to ipc

* add more examples

* move file

* new img

* refactor

* add clippy and tests

* imrpove clippy

* add semi

* enable release profile

* refactor

* first changeset

* version changeset

* version app

* move version in front of tagname

* do not error on local

* run after build

* use another workflow for clippy

src/lib/ipc.ts

@@ -0,0 +1,28 @@
+// This file was generated by [tauri-specta](https://github.com/oscartbeaumont/tauri-specta). Do not edit this file manually.
+
+declare global {
+  interface Window {
+    __TAURI_INVOKE__<T>(
+      cmd: string,
+      args?: Record<string, unknown>
+    ): Promise<T>;
+  }
+}
+
+const invoke = window.__TAURI_INVOKE__;
+
+export function helloTauri() {
+  return invoke<string>('hello_tauri');
+}
+
+export function hash256sum(hashInput: string) {
+  return invoke<string>('hash256sum', { hashInput });
+}
+
+export function storeSetKey(key: string, value: string) {
+  return invoke<null>('store_set_key', { key, value });
+}
+
+export function storeReadKey(key: string) {
+  return invoke<string | null>('store_read_key', { key });
+}

src/lib/layout/BaseHeader.svelte

@@ -26,11 +26,8 @@
         </a>
       </li>
       <li>
-        <a
-          use:link
-          href="/#call_tauri"
-          class="transition-colors hover:text-secondary">
-          Call Tauri
+        <a use:link href="/#IPC" class="transition-colors hover:text-secondary">
+          IPC
         </a>
       </li>
 

src/lib/layout/BaseLayout.svelte

@@ -4,7 +4,8 @@
   import Header from '$layout/BaseHeader.svelte';
 </script>
 
-<div class="form-control min-h-screen bg-fixed heropattern-topography-white/10">
+<div
+  class="form-control min-h-screen bg-fixed heropattern-topography-black/10 dark:heropattern-topography-white/10">
   <Header />
   <main class="form-control flex-1" in:fade={{ delay: 300, duration: 1000 }}>
     <slot />

src/lib/router/Router.svelte

@@ -2,12 +2,12 @@
   import Router from 'svelte-spa-router';
 
   import Index from '$lib/router/routes/Index.svelte';
-  import CallTauri from '$router/routes/CallTauri.svelte';
+  import IPC from '$lib/router/routes/IPC.svelte';
   import Versions from '$router/routes/Versions.svelte';
 
   const routes = {
     '/': Index,
-    '/#call_tauri': CallTauri,
+    '/#ipc': IPC,
     '/#versions': Versions
   };
 </script>

src/lib/router/routes/CallTauri.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import { fade } from 'svelte/transition';
-  import { invoke } from '@tauri-apps/api';
-
-  let hashInput = 'Hello world';
-  let hashOutput = '';
-  $: (async () => {
-    hashOutput = await invoke('hash256sum', { hashInput });
-  })();
-
-  let message = '';
-
-  async function callTauri() {
-    message = await invoke('called_from_js');
-  }
-</script>
-
-<div
-  class="form-control h-full flex-1 items-center justify-center gap-y-8
-  [&>section]:form-control [&>section]:items-center [&>section]:justify-center [&>section]:gap-y-4">
-  <section class="">
-    <button
-      on:click={callTauri}
-      class="btn-outline btn-primary btn-md btn font-extrabold"
-      >Call Tauri</button>
-    <div class="flex h-20 items-center">
-      {#key message}
-        <p
-          class="whitespace-nowrap border-b-2 border-accent
-    text-2xl"
-          in:fade={{ duration: 300 }}>
-          {message}
-        </p>
-      {/key}
-    </div>
-  </section>
-  <section>
-    <label class="input-group flex max-w-max">
-      <span>Hash string</span>
-      <input
-        bind:value={hashInput}
-        type="text"
-        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
-    </label>
-    <p class="text-center text-lg">{hashOutput}</p>
-  </section>
-</div>

src/lib/router/routes/IPC.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { hash256sum, helloTauri, storeSetKey, storeReadKey } from '$ipc';
+
+  // Or you can also do this if you prefer
+
+  // import * as ipc from '$ipc';
+  // message = await ipc.helloTauri()
+
+  // Calling the hash256 function any time the `hashInput` variable  changes
+  let hashInput = 'Hello world';
+  let hashOutput = '';
+  $: (async () => {
+    hashOutput = await hash256sum(hashInput);
+  })();
+
+  // Calling the `helloTauri` when we click the call tauri button
+  let message = '';
+  async function callTauri() {
+    message = await helloTauri();
+  }
+
+  let storeMessage = '';
+  let key = '';
+  let val = '';
+  async function setKeyVal() {
+    await storeSetKey(key, val);
+    storeMessage = `You have set the key '${key}' to be the value of '${val}''`;
+  }
+
+  async function readValFromKey() {
+    const val = await storeReadKey(key);
+    storeMessage = `Using the key '${key}', you have just retrieved the value of '${val}''`;
+  }
+</script>
+
+<div
+  class="form-control h-full flex-1 items-center justify-center gap-y-8
+  [&>section]:form-control [&>section]:items-center [&>section]:justify-center [&>section]:gap-y-4">
+  <section class="">
+    <button
+      on:click={callTauri}
+      class="btn-outline btn-primary btn text-2xl capitalize"
+      >Call Tauri</button>
+    <div class="flex h-20 items-center">
+      {#key message}
+        <p
+          class="whitespace-nowrap border-b-2 border-accent
+    text-2xl"
+          in:fade={{ duration: 300 }}>
+          {message}
+        </p>
+      {/key}
+    </div>
+  </section>
+  <section>
+    <label class="input-group flex max-w-max">
+      <span>Hash string</span>
+      <input
+        bind:value={hashInput}
+        type="text"
+        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
+    </label>
+    <p class="text-center text-lg">{hashOutput}</p>
+  </section>
+
+  <div class="grid grid-cols-2 gap-4">
+    <label class="input-group flex max-w-max">
+      <span>Key</span>
+      <input
+        bind:value={key}
+        type="text"
+        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
+    </label>
+    <label class="input-group flex max-w-max">
+      <span>Value</span>
+      <input
+        bind:value={val}
+        type="text"
+        class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
+    </label>
+
+    <button on:click={setKeyVal} class="btn-outline btn-primary btn capitalize"
+      >Set key</button>
+    <button
+      on:click={readValFromKey}
+      class="btn-outline btn-primary btn capitalize">Read key</button>
+    <p class="text-bold font-2xl col-span-full text-center text-primary">
+      {storeMessage}
+    </p>
+  </div>
+</div>

src/main.ts

@@ -1,8 +1,14 @@
-import './styles.postcss';
+import './styles.pcss';
 import App from './App.svelte';
 
+const target = document.getElementById('app');
+if (!target)
+  throw new Error(
+    "The element with id of 'app' wasn't found on the base html file."
+  );
+
 const app = new App({
-  target: document.getElementById('app'),
+  target,
   intro: true
 });