Tauriに入門する

$ rustup update

$ rustc --version
rustc 1.64.0 (a55dd71d5 2022-09-19)

yarn create next-app --typescript

diff --git a/next.config.js b/next.config.js
index ae88795..ef62ca3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,14 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  // Note: This experimental feature is required to use NextJS Image in SSG mode.
+  // See https://nextjs.org/docs/messages/export-image-api for different workaroun
+  images: {
+    unoptimized: true,
+  },
 }

 module.exports = nextConfig
+
diff --git a/package.json b/package.json
index f7a791d..393225d 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "export": "next export",
     "start": "next start",
+    "tauri": "tauri",
     "lint": "next lint"
   },
   "dependencies": {

yarn add -D @tauri-apps/cli

$ yarn tauri init
yarn run v1.22.19
$ tauri init
✔ What is your app name? · my-app
✔ What should the window title be? · my-app
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/s
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../out
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · yarn dev
✔ What is your frontend build command? · yarn build && yarn export
✨  Done in 70.41s.

:CocInstall coc-rust-analyzer

yarn tauri dev

yarn add @tauri-apps/api

 import { invoke } from "@tauri-apps/api";
+import { open } from "@tauri-apps/api/dialog";
 import type { NextPage } from "next";
 import Head from "next/head";
 import styles from "../styles/Home.module.css";

 const Home: NextPage = () => {
+  const openDialog = () => {
+    open().then((files) => console.log(files));
+  };
+
   const executeCommands = () => {
     invoke("simple_commnad");
   };
@@ -18,6 +23,8 @@ const Home: NextPage = () => {
       <main>
         <div>exec rust code</div>
         <button onClick={executeCommands}>Clickt execute command</button>
+        <div>open dialog</div>
+        <button onClick={openDialog}>openDialog</button>
       </main>
     </div>
   );

$ git rev-parse --short HEAD
4036e15f

$ pwd
/Users/shuntaka/repos/github.com/tauri-apps/tauri
$ bash .scripts/setup.sh
Tauri Rust CLI installed. Run it with '$ cargo tauri [COMMAND]'.
Do you want to install the Node.js CLI?
1) Yes # 1を選択
# M1のため追加
$ yarn add @tauri-apps/cli-darwin-arm64
$ cd examples/api
$ yarn
# うまく行かない、、
$ yarn tauri dev
yarn run v1.22.19
warning package.json: No license field
$ node ../../tooling/cli/node/tauri.js dev
     Running BeforeDevCommand (`yarn dev`)
warning package.json: No license field
$ vite --clearScreen false --port 5173

  vite v2.9.13 dev server running at:

  > Local: http://localhost:5173/
  > Network: use `--host` to expose

  ready in 433ms.

        Info Watching /Users/shuntaka/repos/github.com/tauri-apps/tauri/examples/api/src-tauri for changes...
    Updating git repository `https://github.com/tauri-apps/wry`
    Updating git repository `https://github.com/tauri-apps/tao`
    Updating crates.io index
error: failed to select a version for `uuid`.
    ... required by package `tao v0.14.0 (https://github.com/tauri-apps/tao?branch=dev#7c7ce8ab)`
    ... which satisfies git dependency `tao` of package `wry v0.21.1 (https://github.com/tauri-apps/wry?branch=dev#17d324b7)`
    ... which satisfies git dependency `wry` of package `tauri-runtime-wry v0.11.1 (/Users/shuntaka/repos/github.com/tauri-apps/tauri/core/tauri-runtime-wry)`
    ... which satisfies path dependency `tauri-runtime-wry` (locked to 0.11.1) of package `api v0.1.0 (/Users/shuntaka/repos/github.com/tauri-apps/tauri/examples/api/src-tauri)`
versions that meet the requirements `^1.2` are: 1.2.1

all possible versions conflict with previously selected packages.

  previously selected package `uuid v1.1.2`
    ... which satisfies dependency `uuid = "^1"` (locked to 1.1.2) of package `cfb v0.7.3`
    ... which satisfies dependency `cfb = "^0.7.0"` (locked to 0.7.3) of package `infer v0.9.0`
    ... which satisfies dependency `infer = "^0.9"` (locked to 0.9.0) of package `tauri v1.1.1 (/Users/shuntaka/repos/github.com/tauri-apps/tauri/core/tauri)`
    ... which satisfies path dependency `tauri` (locked to 1.1.1) of package `api v0.1.0 (/Users/shuntaka/repos/github.com/tauri-apps/tauri/examples/api/src-tauri)`

failed to select a version for `uuid` which could resolve this conflict
error Command failed with exit code 101.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ pwd
/Users/shuntaka/repos/github.com/tauri-apps/tauri/examples/api
$ git diff src-tauri/Cargo.toml
diff --git a/examples/api/src-tauri/Cargo.toml b/examples/api/src-tauri/Cargo.to
index 168704e6..2e0e59a1 100644
--- a/examples/api/src-tauri/Cargo.toml
+++ b/examples/api/src-tauri/Cargo.toml
@@ -13,6 +13,7 @@ tauri-build = { path = "../../../core/tauri-build", features =
 serde_json = "1.0"
 serde = { version = "1.0", features = [ "derive" ] }
 tiny_http = "0.11"
+uuid = "1.2.1"

 [dependencies.tauri]
 path = "../../../core/tauri"

$ yarn tauri dev

$ yarn tauri dev
yarn run v1.22.19
$ tauri dev
     Running BeforeDevCommand (`yarn dev`)
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 231 ms (173 modules)
        Info Watching /Users/shuntaka/repos/github.com/shuntaka9576/my-app/src-tauri for changes...
   Compiling app v0.1.0 (/Users/shuntaka/repos/github.com/shuntaka9576/my-app/src-tauri)
    Finished dev [unoptimized + debuginfo] target(s) in 4.91s
wait  - compiling / (client and server)...
event - compiled client and server successfully in 239 ms (205 modules)
error - ReferenceError: navigator is not defined
    at n (file:///Users/shuntaka/repos/github.com/shuntaka9576/my-app/node_modules/@tauri-apps/api/os-check-27fe6e2b.js:1:14)
    at file:///Users/shuntaka/repos/github.com/shuntaka9576/my-app/node_modules/@tauri-apps/api/path-5af4eed5.js:1:3723
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
  page: '/'
}
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 28 ms (206 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
error - ReferenceError: navigator is not defined
    at n (file:///Users/shuntaka/repos/github.com/shuntaka9576/my-app/node_modules/@tauri-apps/api/os-check-27fe6e2b.js:1:14)
    at file:///Users/shuntaka/repos/github.com/shuntaka9576/my-app/node_modules/@tauri-apps/api/path-5af4eed5.js:1:3723
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
  page: '/'
}

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

// 注意：開発でNext.jsを扱う場合、2つの実行コンテキストがあります。
// サーバーサイドでは、コンテキストから外れているため、タウリを呼び出すことができません。
// - サーバーサイドでは、コンテキストの外にあるため、タウリを呼び出すことができない // - クライアントサイドでは、タウリが実行できる。
// サーバ側かクライアント側かを知るには、以下のようにします。
const isClient = typeof window !== 'undefined'

// これでコマンドを呼び出すことができます!
// アプリケーションの背景を右クリックし、開発者ツールを開きます。
// コンソールに「Hello, World!
isClient &&
  invoke('greet', { name: 'World' }).then(console.log).catch(console.error)

import { invoke } from "@tauri-apps/api/tauri"

const Home: NextPage = () => {
  useEffect(() => {
    invoke('greet', { name: 'World' })
    .then(console.log)
    .catch(console.error)
  }, []);

$ yarn add -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

+        <h1 className="text-3xl text-red-300 font-bold underline">
+          Hello world!
+        </h1>

(中略)
  useEffect(() => {
    (async () => {
      await fs.createDir("images", {
        dir: fs.BaseDirectory.App,
        recursive: true,
      });
    })();
  }, []);

@@ -12,7 +12,10 @@
   },
   "tauri": {
     "allowlist": {
-      "all": true
+      "all": true,
+      "fs": {
+        "scope": ["$APP/*"]
+      }
     },
     "bundle": {
       "active": true,