Forem: Danny Gim

TauriのDialogを試してみる

Danny Gim — Fri, 08 Apr 2022 12:49:08 +0000

Tauri Dialog API

TauriでDialogは以下の５種類を提供している

使いたい機能は src-tauri/tauri.config.json の allowlist に機能を許可する設定が必要。

Ask Dialog

"Yes", "No" ボタンがあるDialog

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "ask": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

const result = await dialog.ask('Are you sure?', 'Ask Dialog');
if (result) { // yes
  ...
} else { // no
  ...
}

Confirm Dialog

Ask Dialogとほぼ同じだが、ボタンが”OK","Cancel"になっているのが異なる。

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "confirm": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

const result = await dialog.confirm('Are you sure?', 'Confirm Dialog');
if (result) { // ok
  ...
} else { // cancel
  ...
}

Message Dialog

"OK"ボタンのみあるDialog

src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "message": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

await dialog.message('This is a message dialog.');

Open Dialog

FileやDirectory選択するDialog

OpenDialogOptions
- https://tauri.studio/docs/api/js/interfaces/dialog.opendialogoptions/
- 色んなOptionがあり、File選択なのかDirectory選択なのか、複数選択可能なのかやFilterなどが設定できる。
src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "open": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

const options: dialog.OpenDialogOptions = {
  filters: [
    {
      extensions: ["png", "jpeg"],
      name: "*",
    },
  ],
};

const result = await dialog.open(options);
if (Array.isArray(result)) { // string[]
  ...
} else if (result !== null) { // string
  ...
} else { // cancel
  ...
}

Save Dialog

File保存先を選択するDialog

SaveDialogOptions
- https://tauri.studio/docs/api/js/interfaces/dialog.savedialogoptions/
src-tauri/tauri.conf.jsonに機能許可

{
  "tauri": {
    "allowlist": {
      "dialog": {
+       "save": true
      }
    }
  }
}

main.ts

import { dialog } from "@tauri-apps/api";

const options: dialog.SaveDialogOptions = {
  title: 'Save Dialog Demo'
};

const result = await dialog.save(options);
if (result) { // path
  ...
} else { // cancel
  ...
}

Demo Repository & Environment

Repository : https://github.com/dannygim/tauri-demo/tree/main/dialog-demo
Tauri info

% npx tauri info

Environment
  › OS: Mac OS 12.3.1 X64
  › Node.js: 17.8.0
  › npm: 8.5.5
  › pnpm: Not installed!
  › yarn: Not installed!
  › rustup: Not installed!
  › rustc: 1.59.0
  › cargo: 1.59.0
  › Rust toolchain: 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.8)
  › @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.3)
  › tauri [RUST]: 1.0.0-rc.6,
  › tauri-build [RUST]: 1.0.0-rc.5,
  › tao [RUST]: 0.7.0,
  › wry [RUST]: 0.14.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../public
  › devPath: http://localhost:8080/
  › bundler: Rollup

App directory structure
  ├─ node_modules
  ├─ public
  ├─ src-tauri
  └─ src

Tauri + TypeScript and Svelte Templates

Danny Gim — Fri, 08 Apr 2022 11:23:48 +0000

Tauri + Rollup.js + TypeScript Tempalte

https://github.com/dannygim/tauri-demo/tree/main/template-tauri-typescript

npx degit dannygim/tauri-demo/template-tauri-typescript tauri-ts-app
cd tauri-ts-app
npm install
npx tauri dev

Tauri + Rollup.js + TypeScript + Svelte Tempalte

https://github.com/dannygim/template-tauri-svelte

npx degit dannygim/template-tauri-svelte tauri-svelte-app
cd tauri-svelte-app
npm install
npx tauri dev

Tauri + SvelteでHello World作成

Danny Gim — Sun, 03 Apr 2022 08:40:47 +0000

TauriとSvelteでHello Worldアプリを作ってみる。

環境

OS : macOS Monterey (12.3.1)
XCode : 13.1
Rust : 1.59.0
Node : 17.8.0

% uname -v
Darwin Kernel Version 21.4.0: Fri Mar 18 00:47:26 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T8101
% xcode-select -p
/Applications/Xcode-13.1.app/Contents/Developer
% rustc --version
rustc 1.59.0
% node --version
v17.8.0
% npm --version
8.5.5

Svelteプロジェクト作成

https://github.com/sveltejs/template を参照してSvelteセットアップ

% mkdir tauri-helloworld
% cd tauri-helloworld
% npm i -D degit
% npx degit sveltejs/template --force
% node scripts/setupTypeScript.js <-- Typescript対応

Svelteプロジェク動作確認

% npm i
% npm run dev

> svelte-app@1.0.0 dev
> rollup -c -w

rollup v2.70.1
bundles src/main.ts → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 571ms

[2022-04-03 16:05:28] waiting for changes...

> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"

  Your application is ready~! 🚀

  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

Tauri プロジェクト作成

Project directoryを作成して @tauri-apps/cli と @tauri-apps/api をインストール

% npm i -D @tauri-apps/cli @tauri-apps/api

Tauriプロジェクを初期化
1. Web Assets Location : FrontendのProductionモードでビルド先を指定。 ../public
2. The URL of Dev Server : Frontend開発時に使うURL指定。 http://localhost:8080

% npx tauri init
✔ What is your app name? · svelte-app
✔ What should the window title be? · Tauri Hello World
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../public
✔ What is the url of your dev server? · http://localhost:8080

src-tauri/tauri.conf.json 編集
1. build.beforeDevCommand : npm run dev
2. build.beforeBuildCommand : npm run build

{
  "package": {
    "productName": "svelte-app",
    "version": "0.1.0"
  },
  "build": {
    "distDir": "../public",
    "devPath": "http://localhost:8080",
-    "beforeDevCommand": "",
-    "beforeBuildCommand": ""
+    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "npm run build"
  },
  "tauri": {
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.dev",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "resources": [],
      "externalBin": [],
      "copyright": "",
      "category": "DeveloperTool",
      "shortDescription": "",
      "longDescription": "",
      "deb": {
        "depends": [],
        "useBootstrapper": false
      },
      "macOS": {
        "frameworks": [],
        "useBootstrapper": false,
        "exceptionDomain": "",
        "signingIdentity": null,
        "providerShortName": null,
        "entitlements": null
      },
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "updater": {
      "active": false
    },
    "allowlist": {
      "all": true
    },
    "windows": [
      {
        "title": "Tauri Hello World",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": null
    }
  }
}

Tauriアプリ動作確認

% npx tauri dev

Tauri Info

% npx tauri info

Environment
  › OS: Mac OS 12.3.1 X64
  › Node.js: 17.8.0
  › npm: 8.5.5
  › pnpm: Not installed!
  › yarn: Not installed!
  › rustup: Not installed!
  › rustc: 1.59.0
  › cargo: 1.59.0
  › Rust toolchain: 

Packages
  › @tauri-apps/cli [NPM]: 1.0.0-rc.7(outdated, latest: 1.0.0-rc.8)
  › @tauri-apps/api [NPM]: 1.0.0-rc.3(outdated, latest: 1.0.0-rc.3)
  › tauri [RUST]: 1.0.0-rc.6,
  › tauri-build [RUST]: 1.0.0-rc.5,
  › tao [RUST]: 0.7.0,
  › wry [RUST]: 0.14.0,

App
  › build-type: bundle
  › CSP: unset
  › distDir: ../public
  › devPath: http://localhost:8080/
  › framework: Svelte
  › bundler: Rollup

App directory structure
  ├─ node_modules
  ├─ public
  ├─ src-tauri
  ├─ .git
  ├─ .vscode
  └─ src

Rust Commandを試してみる

hello_command 作成

// src-tauri/src/main.rs

fn main() {
  tauri::Builder::default()
+   .invoke_handler(tauri::generate_handler![hello_command])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

+#[tauri::command]
+fn hello_command(name: String) -> String {
+  return format!("Hello {}!", name).into()
+}

Svelteの方から hello_command をinvoke

// src/App.svelte
 <script lang="ts">
+       import { invoke } from "@tauri-apps/api";
+
        export let name: string;
+       let messagePromise = invoke("hello_command", { name });
 </script>

 <main>
-       <h1>Hello {name}!</h1>
+       {#await messagePromise}
+               <h1>Loading.invoke.</h1>
+       {:then message}
+               <h1>{message}</h1>
+       {:catch err}
+               <h1>{err}</h1>
+       {/await}
        <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
 </main>

// src/main.ts

 const app = new App({
        target: document.body,
        props: {
-               name: 'world'
+               name: 'Tauri'
        }
 });

Template化したもの

https://github.com/dannygim/template-tauri-svelte

npx degit dannygim/template-tauri-svelte tauri-svelte-app