Open2022/06/24にコメント追加5

tauri (react) 試す

プロジェクトの作成

create-tauri-app とかいうプロジェクトテンプレート作成してくれるツールがあるらしい

npx create-tauri-app

ウィザード形式で聞かれるので入力していく
View側はTypeScript + Reactの構成を選ぶ

Press any key to continue...
? What is your app name? try-tauri-react
? What should the window title be? try-tauri-react
? What UI recipe would you like to add? create-react-app (https://create-react-app.dev/)
? Add "@tauri-apps/api" npm package? Yes
? Which create-react-app template would you like to use? create-react-app (Typescript)
>> Running initial command(s)

まあまあ時間がかかる

>> Updating "tauri.conf.json"
>> Running final command(s)

    Your installation completed.

    $ cd try-tauri-react
    $ npm run tauri dev

終わるとこんな感じの表示
次にやるコマンドを表示してくれて親切だな

実行

ディレクトリ内に入り以下のコマンドを実行

npm run tauri-react

初回ビルド結構時間がかかる

ウィンドウが立ち上がる

ホットリロードも動くみたい

画面ロード時の処理書いてみる

src/App.tsx にてこんな感じのやつを追記

function onLoad() {
  console.log('call onLoad');
}
function App() {
  return (
    <div className="App" onLoad={onLoad}>

起動
DevelopperToolどこで開くか分からなかったけどいつものF12キー押下したら開いた

呼び出されているっぽい

TypeScript -> Rustの呼び出し書いてみる

TypeScript 側はこんな感じで書き換え

declare global {
  interface Window {
    __TAURI__:any
  }
}
async function onLoad() {
  console.log('call onLoad');

  const invoke = window.__TAURI__.invoke;
  const response = await invoke('greet', { name: 'aaaa' });
  console.log(response);
}

参考にした資料
- https://dev.classmethod.jp/articles/typings-of-window-object/

tauri.conf.jsに追記

{
  "build": {
    "withGlobalTauri": true

Rust側にハンドラー追加

#[tauri::command]
fn greet(name: &str) -> String {
  format!("Hello, {}", name)
}

fn main() {
  let context = tauri::generate_context!();
  tauri::Builder::default()
    .menu(tauri::Menu::os_default(&context.package_info().name))
    .invoke_handler(tauri::generate_handler![greet])

実行してみたらちゃんと呼べてるみたい

このページ参考にした

これ書いてて思ったけど、たぶんTypeScriptはちゃんとした型付いたやつあると思う....

普通に型あったわ

というかプロジェクト作成時に入れるか聞かれてたわ

import { invoke } from '@tauri-apps/api';

async function onLoad() {
  console.log('call onLoad');
  const response = await invoke('greet', { name: 'aaaa' });
  console.log(response);
}