feat: add dioxus template (#784)

amrbashir · web-flow · commit 27524c369210 · 2024-09-17T05:08:44.000+03:00
diff --git a/.changes/dioxus.md b/.changes/dioxus.md
@@ -0,0 +1,7 @@
+---
+"create-tauri-app": "patch"
+"create-tauri-app-js": "patch"
+---
+
+Add `dioxus` template
+
diff --git a/.github/workflows/templates-test.yml b/.github/workflows/templates-test.yml
@@ -106,6 +106,10 @@ jobs:
           rustup target add wasm32-unknown-unknown
           cargo install --locked trunk
         if: matrix.settings.install_trunk
+      - run: |
+          rustup target add wasm32-unknown-unknown
+          cargo install --locked dioxus-cli
+        if: matrix.settings.install_dioxus_cli
 
       - name: install system dependencies
         if: matrix.settings.rc != true
diff --git a/.scripts/generate-templates-matrix.js b/.scripts/generate-templates-matrix.js
@@ -24,7 +24,7 @@ const matrixConfig = [
     manager: "cargo",
     install_cmd: "",
     run_cmd: "cargo",
-    templates: ["vanilla", "yew", "sycamore", "leptos"],
+    templates: ["vanilla", "yew", "sycamore", "leptos", "dioxus"],
   },
   {
     manager: "pnpm",
@@ -78,6 +78,7 @@ matrixConfig
         const jobInfo = {
           template: t,
           install_trunk: ["yew", "sycamore", "leptos"].includes(t),
+          install_dioxus_cli: t === "dioxus",
           rc: false,
           no_bundle_flag: "-b none",
           ...managerInfo,
diff --git a/src/deps.rs b/src/deps.rs
@@ -37,6 +37,14 @@ fn is_trunk_installed() -> bool {
         .unwrap_or(false)
 }
 
+fn is_dioxus_cli_installed() -> bool {
+    Command::new("dx")
+        .arg("-V")
+        .output()
+        .map(|o| o.status.success())
+        .unwrap_or(false)
+}
+
 fn is_appropriate_tauri_cli_installed(rc: bool) -> bool {
     let check = |o: Output| match o.status.success() {
         true => String::from_utf8_lossy(&o.stdout)
@@ -212,6 +220,12 @@ pub fn print_missing_deps(pkg_manager: PackageManager, template: Template, rc: b
             exists: &is_trunk_installed,
             skip: pkg_manager.is_node() || !template.needs_trunk(),
         },
+        Dep {
+            name: "Dioxus CLI",
+            instruction: format!("Run `{BLUE}{BOLD}cargo install dioxus-cli{RESET}`"),
+            exists: &is_dioxus_cli_installed,
+            skip: pkg_manager.is_node() || !template.needs_dioxus_cli(),
+        },
         Dep {
             name: "wasm32 target",
             instruction: format!("Run `{BLUE}{BOLD}rustup target add wasm32-unknown-unknown{RESET}`"),
diff --git a/src/package_manager.rs b/src/package_manager.rs
@@ -81,6 +81,7 @@ impl PackageManager {
                 Template::Yew,
                 Template::Leptos,
                 Template::Sycamore,
+                Template::Dioxus,
             ],
             PackageManager::Pnpm
             | PackageManager::Yarn
@@ -105,6 +106,7 @@ impl PackageManager {
                 Template::Yew,
                 Template::Leptos,
                 Template::Sycamore,
+                Template::Dioxus,
             ],
             PackageManager::Pnpm
             | PackageManager::Yarn
diff --git a/src/template.rs b/src/template.rs
@@ -58,6 +58,7 @@ pub enum Template {
     Preact,
     PreactTs,
     Blazor,
+    Dioxus,
 }
 
 impl Display for Template {
@@ -80,6 +81,7 @@ impl Display for Template {
             Template::Preact => write!(f, "preact"),
             Template::PreactTs => write!(f, "preact-ts"),
             Template::Blazor => write!(f, "blazor"),
+            Template::Dioxus => write!(f, "dioxus"),
         }
     }
 }
@@ -105,6 +107,7 @@ impl FromStr for Template {
             "preact" => Ok(Template::Preact),
             "preact-ts" => Ok(Template::PreactTs),
             "blazor" => Ok(Template::Blazor),
+            "dioxus" => Ok(Template::Dioxus),
             _ => Err(format!(
                 "{YELLOW}{s}{RESET} is not a valid template. Valid templates are [{}]",
                 Template::ALL
@@ -133,6 +136,7 @@ impl Template {
             Template::Blazor => {
                 "Blazor - (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)"
             }
+            Template::Dioxus => "Dioxus - (https://dioxuslabs.com/)",
             _ => unreachable!(),
         }
     }
@@ -157,6 +161,7 @@ impl<'a> Template {
         Template::Preact,
         Template::PreactTs,
         Template::Blazor,
+        Template::Dioxus,
     ];
 
     pub fn flavors<'b>(&self, pkg_manager: PackageManager) -> Option<&'b [Flavor]> {
@@ -222,7 +227,9 @@ impl<'a> Template {
             | Template::Angular
             | Template::Preact
             | Template::PreactTs => PackageManager::NODE,
-            Template::Yew | Template::Leptos | Template::Sycamore => &[PackageManager::Cargo],
+            Template::Yew | Template::Leptos | Template::Sycamore | Template::Dioxus => {
+                &[PackageManager::Cargo]
+            }
             Template::Blazor => &[PackageManager::Dotnet],
         }
     }
@@ -242,6 +249,10 @@ impl<'a> Template {
         matches!(self, Template::Blazor)
     }
 
+    pub const fn needs_dioxus_cli(&self) -> bool {
+        matches!(self, Template::Dioxus)
+    }
+
     pub const fn needs_wasm32_target(&self) -> bool {
         matches!(self, Template::Sycamore | Template::Yew | Template::Leptos)
     }
diff --git a/templates/template-dioxus/.manifest b/templates/template-dioxus/.manifest
@@ -0,0 +1,13 @@
+# Copyright 2019-2022 Tauri Programme within The Commons Conservancy
+# SPDX-License-Identifier: Apache-2.0
+# SPDX-License-Identifier: MIT
+
+beforeDevCommand = dx serve --port 1420
+beforeBuildCommand = dx build
+devPath = http://localhost:1420
+distDir = ../dist
+withGlobalTauri = true
+
+[files]
+tauri.svg = assets/tauri.svg
+styles.css = assets/styles.css
diff --git a/templates/template-dioxus/.taurignore b/templates/template-dioxus/.taurignore
@@ -0,0 +1,3 @@
+/src
+/assets
+/Cargo.toml
diff --git a/templates/template-dioxus/.vscode/extensions.json b/templates/template-dioxus/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer",
+    "DioxusLabs.dioxus"
+  ]
+}
diff --git a/templates/template-dioxus/Cargo.toml.lte b/templates/template-dioxus/Cargo.toml.lte
@@ -0,0 +1,18 @@
+[package]
+name = "{% package_name %}-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.5", features = ["web"] }
+dioxus-logger = "0.5"
+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"]
diff --git a/templates/template-dioxus/Dioxus.toml.lte b/templates/template-dioxus/Dioxus.toml.lte
@@ -0,0 +1,12 @@
+[application]
+name = "{% package_name %}-ui"
+default_platform = "web"
+out_dir = "dist"
+asset_dir = "assets"
+
+[web.app]
+title = "Tauri + Dioxus App"
+
+[web.watcher]
+reload_html = true
+watch_path = ["src", "assets"]
diff --git a/templates/template-dioxus/README.md b/templates/template-dioxus/README.md
@@ -0,0 +1,7 @@
+# Tauri + Dioxus
+
+This template should help get you started developing with Tauri and Dioxus.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) + [Dioxus](https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus).
diff --git a/templates/template-dioxus/_gitignore b/templates/template-dioxus/_gitignore
@@ -0,0 +1,3 @@
+/dist/
+/target/
+/Cargo.lock
diff --git a/templates/template-dioxus/assets/dioxus.png b/templates/template-dioxus/assets/dioxus.png
diff --git a/templates/template-dioxus/assets/styles.css b/templates/template-dioxus/assets/styles.css
@@ -0,0 +1,3 @@
+.logo.dioxus:hover {
+  filter: drop-shadow(0 0 2em #2076a8);
+}
diff --git a/templates/template-dioxus/src/app.rs.lte b/templates/template-dioxus/src/app.rs.lte
@@ -0,0 +1,79 @@
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+use serde::{Deserialize, Serialize};
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "{% if rc %}core{% else %}tauri{% endif %}"])]
+    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());
+
+    let greet = move |_: FormEvent| async move {
+        if name.read().is_empty() {
+            return;
+        }
+
+        let name = name.read();
+        let args = serde_wasm_bindgen::to_value(&GreetArgs { name: &*name }).unwrap();
+        // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+        let new_msg = invoke("greet", args).await.as_string().unwrap();
+        greet_msg.set(new_msg);
+    };
+
+    rsx! {
+        link { rel: "stylesheet", href: "styles.css" }
+        main {
+            class: "container",
+            div {
+                class: "row",
+                a {
+                    href: "https://tauri.app",
+                    target: "_blank",
+                    img {
+                        src: "/tauri.svg",
+                        class: "logo tauri",
+                         alt: "Tauri logo"
+                    }
+                }
+                a {
+                    href: "https://dioxuslabs.com/",
+                    target: "_blank",
+                    img {
+                        src: "/dioxus.png",
+                        class: "logo dioxus",
+                        alt: "Dioxus logo"
+                    }
+                }
+            }
+
+            p { "Click on the Tauri and Dioxus logos to learn more." }
+
+            form {
+                class: "row",
+                onsubmit: greet,
+                input {
+                    id: "greet-input",
+                    placeholder: "Enter a name...",
+                    value: "{name}",
+                    oninput: move |event| name.set(event.value())
+                }
+                button { r#type: "submit", "Greet" }
+            }
+
+            p {
+                b { "{greet_msg}" }
+            }
+        }
+    }
+}
diff --git a/templates/template-dioxus/src/main.rs b/templates/template-dioxus/src/main.rs
@@ -0,0 +1,10 @@
+mod app;
+
+use app::App;
+use dioxus::prelude::*;
+use dioxus_logger::tracing::Level;
+
+fn main() {
+    dioxus_logger::init(Level::INFO).expect("failed to init logger");
+    launch(App);
+}
diff --git a/templates/template-leptos/src/app.rs.lte b/templates/template-leptos/src/app.rs.lte
@@ -1,7 +1,6 @@
 use leptos::leptos_dom::ev::SubmitEvent;
 use leptos::*;
 use serde::{Deserialize, Serialize};
-use serde_wasm_bindgen::to_value;
 use wasm_bindgen::prelude::*;
 
 #[wasm_bindgen]
@@ -33,7 +32,7 @@ pub fn App() -> impl IntoView {
                 return;
             }
 
-            let args = to_value(&GreetArgs { name: &name }).unwrap();
+            let args = serde_wasm_bindgen::to_value(&GreetArgs { name: &name }).unwrap();
             // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
             let new_msg = invoke("greet", args).await.as_string().unwrap();
             set_greet_msg.set(new_msg);
diff --git a/templates/template-sycamore/src/app.rs.lte b/templates/template-sycamore/src/app.rs.lte
@@ -1,5 +1,4 @@
 use serde::{Deserialize, Serialize};
-use serde_wasm_bindgen::to_value;
 use sycamore::futures::spawn_local_scoped;
 use sycamore::prelude::*;
 use sycamore::rt::Event;
@@ -9,9 +8,6 @@ use wasm_bindgen::prelude::*;
 extern "C" {
     #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "{% if rc %}core{% else %}tauri{% endif %}"])]
     async fn invoke(cmd: &str, args: JsValue) -> JsValue;
-
-    #[wasm_bindgen(js_namespace = console)]
-    fn log(s: &str);
 }
 
 #[derive(Serialize, Deserialize)]
@@ -28,11 +24,8 @@ pub fn App<G: Html>(cx: Scope) -> View<G> {
         e.prevent_default();
         spawn_local_scoped(cx, async move {
             // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-            let new_msg =
-                invoke("greet", to_value(&GreetArgs { name: &name.get() }).unwrap()).await;
-
-            log(&new_msg.as_string().unwrap());
-
+            let args = serde_wasm_bindgen::to_value(&GreetArgs { name: &name.get() }).unwrap();
+            let new_msg = invoke("greet", args).await;
             greet_msg.set(new_msg.as_string().unwrap());
         })
     };
diff --git a/templates/template-yew/src/app.rs.lte b/templates/template-yew/src/app.rs.lte
@@ -1,5 +1,4 @@
 use serde::{Deserialize, Serialize};
-use serde_wasm_bindgen::to_value;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
@@ -34,7 +33,7 @@ pub fn app() -> Html {
                         return;
                     }
 
-                    let args = to_value(&GreetArgs { name: &*name }).unwrap();
+                    let args = serde_wasm_bindgen::to_value(&GreetArgs { name: &*name }).unwrap();
                     // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
                     let new_msg = invoke("greet", args).await.as_string().unwrap();
                     greet_msg.set(new_msg);

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ pub enum Template {`
`58`	`58`	`Preact,`
`59`	`59`	`PreactTs,`
`60`	`60`	`Blazor,`
	`61`	`+ Dioxus,`
`61`	`62`	`}`
`62`	`63`
`63`	`64`	`impl Display for Template {`
`@@ -80,6 +81,7 @@ impl Display for Template {`
`80`	`81`	`Template::Preact => write!(f, "preact"),`
`81`	`82`	`Template::PreactTs => write!(f, "preact-ts"),`
`82`	`83`	`Template::Blazor => write!(f, "blazor"),`
	`84`	`+ Template::Dioxus => write!(f, "dioxus"),`
`83`	`85`	`}`
`84`	`86`	`}`
`85`	`87`	`}`
`@@ -105,6 +107,7 @@ impl FromStr for Template {`
`105`	`107`	`"preact" => Ok(Template::Preact),`
`106`	`108`	`"preact-ts" => Ok(Template::PreactTs),`
`107`	`109`	`"blazor" => Ok(Template::Blazor),`
	`110`	`+ "dioxus" => Ok(Template::Dioxus),`
`108`	`111`	`_ => Err(format!(`
`109`	`112`	`"{YELLOW}{s}{RESET} is not a valid template. Valid templates are [{}]",`
`110`	`113`	`Template::ALL`
`@@ -133,6 +136,7 @@ impl Template {`
`133`	`136`	`Template::Blazor => {`
`134`	`137`	`"Blazor - (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)"`
`135`	`138`	`}`
	`139`	`+ Template::Dioxus => "Dioxus - (https://dioxuslabs.com/)",`
`136`	`140`	`_ => unreachable!(),`
`137`	`141`	`}`
`138`	`142`	`}`
`@@ -157,6 +161,7 @@ impl<'a> Template {`
`157`	`161`	`Template::Preact,`
`158`	`162`	`Template::PreactTs,`
`159`	`163`	`Template::Blazor,`
	`164`	`+ Template::Dioxus,`
`160`	`165`	`];`
`161`	`166`
`162`	`167`	`pub fn flavors<'b>(&self, pkg_manager: PackageManager) -> Option<&'b [Flavor]> {`
`@@ -222,7 +227,9 @@ impl<'a> Template {`
`222`	`227`	`\| Template::Angular`
`223`	`228`	`\| Template::Preact`
`224`	`229`	`\| Template::PreactTs => PackageManager::NODE,`
`225`		`- Template::Yew \| Template::Leptos \| Template::Sycamore => &[PackageManager::Cargo],`
	`230`	`+ Template::Yew \| Template::Leptos \| Template::Sycamore \| Template::Dioxus => {`
	`231`	`+ &[PackageManager::Cargo]`
	`232`	`+ }`
`226`	`233`	`Template::Blazor => &[PackageManager::Dotnet],`
`227`	`234`	`}`
`228`	`235`	`}`
`@@ -242,6 +249,10 @@ impl<'a> Template {`
`242`	`249`	`matches!(self, Template::Blazor)`
`243`	`250`	`}`
`244`	`251`
	`252`	`+ pub const fn needs_dioxus_cli(&self) -> bool {`
	`253`	`+ matches!(self, Template::Dioxus)`
	`254`	`+ }`
	`255`	`+`
`245`	`256`	`pub const fn needs_wasm32_target(&self) -> bool {`
`246`	`257`	`matches!(self, Template::Sycamore \| Template::Yew \| Template::Leptos)`
`247`	`258`	`}`