Files to replace

Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "tauri-app-ui"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+[dependencies]
+dioxus = { version = "0.7", features = ["web"] }
+dioxus-logger = "0.6"
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+web-sys = "0.3"
+js-sys = "0.3"
+serde = { version = "1", features = ["derive"] }
+serde-wasm-bindgen = "0.6"
+
+[workspace]
+members = ["src-tauri"]

app.rs

@@ -0,0 +1,81 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+use serde::{Deserialize, Serialize};
+use wasm_bindgen::prelude::*;
+
+static CSS: Asset = asset!("/assets/styles.css");
+static TAURI_ICON: Asset = asset!("/assets/tauri.svg");
+static DIOXUS_ICON: Asset = asset!("/assets/dioxus.png");
+
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
+    async fn invoke(cmd: &str, args: JsValue) -> JsValue;
+}
+
+#[derive(Serialize, Deserialize)]
+struct GreetArgs<'a> {
+    name: &'a str,
+}
+
+pub fn App() -> Element {
+    let mut name = use_signal(|| String::new());
+    let mut greet_msg = use_signal(|| String::new());
+
+    // Wir geben dem Parameter einen expliziten Typ Option<()>
+    let greet = move |_: Option<()>| async move {
+        if name.read().is_empty() {
+            return;
+        }
+
+        let name_val = name.read();
+        let args = serde_wasm_bindgen::to_value(&GreetArgs { name: &*name_val }).unwrap();
+
+        let new_msg = invoke("greet", args).await.as_string().unwrap();
+        greet_msg.set(new_msg);
+    };
+
+    rsx! {
+        link { rel: "stylesheet", href: CSS }
+        main {
+            class: "container",
+            h1 { "Welcome to Tauri + Dioxus" }
+
+            div {
+                class: "row",
+                a { href: "https://tauri.app", target: "_blank",
+                    img { src: TAURI_ICON, class: "logo tauri", alt: "Tauri logo" }
+                }
+                a { href: "https://dioxuslabs.com/", target: "_blank",
+                    img { src: DIOXUS_ICON, class: "logo dioxus", alt: "Dioxus logo" }
+                }
+            }
+
+            p { "Click on the Tauri and Dioxus logos to learn more." }
+
+            div {
+                class: "row",
+                input {
+                    id: "greet-input",
+                    placeholder: "Enter a name...",
+                    value: "{name}",
+                    oninput: move |event| name.set(event.value()),
+                    onkeydown: move |event| {
+                        if event.key() == Key::Enter {
+                            spawn(greet(None));
+                        }
+                    }
+                }
+                button {
+                    onclick: move |_| {
+                        spawn(greet(None));
+                    },
+                    "Greet"
+                }
+            }
+
+            p { "{greet_msg}" }
+        }
+    }
+}