Invoke Tauri command from Gleam

gleam.toml

@@ -13,6 +13,7 @@ target = "javascript"
 [dependencies]
 gleam_stdlib = "~> 0.32"
 lustre = "~> 3.1"
+gleam_javascript = "~> 0.7"
 
 [dev-dependencies]
 gleeunit = "~> 1.0"

manifest.toml

@@ -5,14 +5,16 @@ packages = [
   { name = "argv", version = "1.0.1", build_tools = ["gleam"], requirements = [], otp_app = "argv", source = "hex", outer_checksum = "A6E9009E50BBE863EB37D963E4315398D41A3D87D0075480FC244125808F964A" },
   { name = "gleam_community_ansi", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_stdlib"], otp_app = "gleam_community_ansi", source = "hex", outer_checksum = "FE79E08BF97009729259B6357EC058315B6FBB916FAD1C2FF9355115FEB0D3A4" },
   { name = "gleam_community_colour", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_community_colour", source = "hex", outer_checksum = "A49A5E3AE8B637A5ACBA80ECB9B1AFE89FD3D5351FF6410A42B84F666D40D7D5" },
+  { name = "gleam_javascript", version = "0.7.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "EEA30D1ABF62B06FC378764D598DF041303CFA33A6586BFF4C4BFEFFA83DBDBE" },
   { name = "gleam_stdlib", version = "0.35.1", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "5443EEB74708454B65650FEBBB1EF5175057D1DEC62AEA9D7C6D96F41DA79152" },
   { name = "gleeunit", version = "1.0.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "D364C87AFEB26BDB4FB8A5ABDE67D635DC9FA52D6AB68416044C35B096C6882D" },
-  { name = "glint", version = "0.14.0", build_tools = ["gleam"], requirements = ["snag", "gleam_community_ansi", "gleam_stdlib", "gleam_community_colour"], otp_app = "glint", source = "hex", outer_checksum = "21AB16D5A50D4EF34DF935915FDBEE06B2DAEDEE3FCC8584C6E635A866566B38" },
+  { name = "glint", version = "0.14.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_community_colour", "gleam_stdlib", "snag"], otp_app = "glint", source = "hex", outer_checksum = "21AB16D5A50D4EF34DF935915FDBEE06B2DAEDEE3FCC8584C6E635A866566B38" },
-  { name = "lustre", version = "3.1.4", build_tools = ["gleam"], requirements = ["argv", "gleam_stdlib", "gleam_community_ansi", "glint"], otp_app = "lustre", source = "hex", outer_checksum = "E651E39189F55473837FB7386C06BAED7276B37B5058302CAC880F89C25CB4E9" },
+  { name = "lustre", version = "3.1.4", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "argv", "glint", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "E651E39189F55473837FB7386C06BAED7276B37B5058302CAC880F89C25CB4E9" },
   { name = "snag", version = "0.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "snag", source = "hex", outer_checksum = "54D32E16E33655346AA3E66CBA7E191DE0A8793D2C05284E3EFB90AD2CE92BCC" },
 ]
 
 [requirements]
+gleam_javascript = { version = "~> 0.7" }
 gleam_stdlib = { version = "~> 0.32" }
 gleeunit = { version = "~> 1.0" }
 lustre = { version = "~> 3.1" }

package-lock.json

@@ -8,6 +8,7 @@
       "name": "videopls",
       "version": "0.0.0",
       "dependencies": {
+        "@tauri-apps/api": "^2.0.0-beta.0",
         "vite-gleam": "^0.4.0"
       },
       "devDependencies": {
@@ -556,6 +557,20 @@
         "win32"
       ]
     },
+    "node_modules/@tauri-apps/api": {
+      "version": "2.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.0.0-beta.0.tgz",
+      "integrity": "sha512-WLoh/Vk8cgY7XrJV7Vpb6PssReBZWQCATfYBb1aCRDk+sp0NyPwumx6fZ2ECAKzAcs3OeanluwZcajruIW4CPQ==",
+      "engines": {
+        "node": ">= 18",
+        "npm": ">= 6.6.0",
+        "yarn": ">= 1.19.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tauri"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",

package.json

@@ -12,6 +12,7 @@
     "vite": "^5.1.0"
   },
   "dependencies": {
+    "@tauri-apps/api": "^2.0.0-beta.0",
     "vite-gleam": "^0.4.0"
   }
 }

src-tauri/src/main.rs

@@ -2,7 +2,10 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 fn main() {
-  app_lib::run();
+  tauri::Builder::default()
+      .invoke_handler(tauri::generate_handler![greet])
+      .run(tauri::generate_context!())
+      .expect("error while running tauri application");
 }
 
 #[tauri::command]

src/ffi/commands.js

@@ -0,0 +1,10 @@
+import { invoke } from '@tauri-apps/api/core';
+import { Ok, Error } from "../../build/dev/javascript/videopls/gleam.mjs"; // FIXME: Is this the right way to do this?
+
+export async function greet(name) {
+  try {
+    return new Ok(await invoke('greet', { name: name }));
+  } catch (error) {
+    return new Error(error.toString());
+  }
+}

src/videopls.gleam

@@ -1,4 +1,6 @@
 import gleam/int
+import gleam/javascript/promise.{type Promise}
+import gleam/io
 import lustre
 import lustre/attribute
 import lustre/element.{type Element}
@@ -22,33 +24,42 @@ fn init(_) -> Model {
 pub type Msg {
   Increment
   Decrement
+  Greet
 }
 
 fn update(model: Model, msg: Msg) -> Model {
   case msg {
     Increment -> model + 1
     Decrement -> model - 1
+    Greet -> {
+      {
+        use greeting <- promise.await(greet("Gleam"))
+        case greeting {
+          Ok(g) -> io.print(g)
+          Error(e) -> io.print("greeting err: " <> e)
+        }
+        promise.resolve(#())
+      }
+      model
+    }
   }
 }
 
+@external(javascript, "./ffi/commands.js", "greet")
+pub fn greet(name: String) -> Promise(Result(String, String))
+
 fn view(model: Model) -> Element(Msg) {
   let count = int.to_string(model)
 
-  html.div(
+  html.div([], [
-    [],
+    html.h1([], [element.text("Gleam + Vite + Tauri")]),
-    [
+    html.p([attribute.style([#("text-align", "center")])], [
-      html.h1([], [element.text("Gleam + Vite + Tauri")]),
+      element.text("Gleam counter " <> count <> " ✨"),
-      html.p(
+    ]),
-        [attribute.style([#("text-align", "center")])],
+    html.p([attribute.style([#("text-align", "center")])], [
-        [element.text("Gleam counter " <> count <> " ✨")],
+      html.button([event.on_click(Decrement)], [element.text("-")]),
-      ),
+      html.button([event.on_click(Increment)], [element.text("+")]),
-      html.p(
+      html.button([event.on_click(Greet)], [element.text("Greet")]),
-        [attribute.style([#("text-align", "center")])],
+    ]),
-        [
+  ])
-          html.button([event.on_click(Decrement)], [element.text("-")]),
-          html.button([event.on_click(Increment)], [element.text("+")]),
-        ],
-      ),
-    ],
-  )
 }

style.css

@@ -68,6 +68,7 @@ button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
+  margin: 0 0.5em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;