Re-Export Manganis & Update Examples (#2625)

* feat: export manganis

* revision: use manganis in examples

* fix: manganis dep

* fix: workspace root finder

* fix: manganis dep

* fix: ci

examples/all_events.rs

@@ -6,6 +6,8 @@
 use dioxus::prelude::*;
 use std::{collections::VecDeque, fmt::Debug, rc::Rc};
 
+const STYLE: &str = asset!(file("./examples/assets/events.css"));
+
 fn main() {
     launch(app);
 }
@@ -24,7 +26,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        style { {include_str!("./assets/events.css")} }
+        link { rel: "stylesheet", href: STYLE }
         div { id: "container",
             // focusing is necessary to catch keyboard events
             div { id: "receiver", tabindex: 0,

examples/calculator.rs

@@ -12,6 +12,8 @@ use dioxus::events::*;
 use dioxus::html::input_data::keyboard_types::Key;
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/calculator.css"));
+
 fn main() {
     LaunchBuilder::desktop()
         .with_cfg(desktop!({
@@ -52,7 +54,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        style { {include_str!("./assets/calculator.css")} }
+        link { rel: "stylesheet", href: STYLE }
         div { id: "wrapper",
             div { class: "app",
                 div { class: "calculator", tabindex: "0", onkeydown: handle_key_down_event,

examples/clock.rs

@@ -5,6 +5,8 @@
 
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/clock.css"));
+
 fn main() {
     launch_desktop(app);
 }
@@ -36,7 +38,7 @@ fn app() -> Element {
     );
 
     rsx! {
-        style { {include_str!("./assets/clock.css")} }
+        link { rel: "stylesheet", href: STYLE }
         div { id: "app",
             div { id: "title", "Carpe diem 🎉" }
             div { id: "clock-display", "{time}" }

examples/control_focus.rs

@@ -3,9 +3,10 @@
 //! This example shows how to manage focus in a Dioxus application. We implement a "roulette" that focuses on each input
 //! in the grid every few milliseconds until the user interacts with the inputs.
 
+use dioxus::prelude::*;
 use std::rc::Rc;
 
-use dioxus::prelude::*;
+const STYLE: &str = asset!(file("./examples/assets/roulette.css"));
 
 fn main() {
     launch_desktop(app);
@@ -37,7 +38,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        style { {include_str!("./assets/roulette.css")} }
+        link { rel: "stylesheet", href: STYLE }
         h1 { "Input Roulette" }
         button { onclick: move |_| running.toggle(), "Toggle roulette" }
         div { id: "roulette-grid",

examples/counters.rs

@@ -2,6 +2,8 @@
 
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/counter.css"));
+
 fn main() {
     launch(app);
 }
@@ -14,7 +16,7 @@ fn app() -> Element {
     let sum = use_memo(move || counters.read().iter().copied().sum::<i32>());
 
     rsx! {
-        style { {include_str!("./assets/counter.css")} }
+        link { rel: "stylesheet", href: STYLE }
 
         div { id: "controls",
             button { onclick: move |_| counters.write().push(0), "Add counter" }

examples/crm.rs

@@ -11,6 +11,8 @@
 
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/crm.css"));
+
 fn main() {
     LaunchBuilder::new()
         .with_cfg(desktop!({
@@ -26,7 +28,7 @@ fn main() {
                     integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
                     crossorigin: "anonymous"
                 }
-                style { {include_str!("./assets/crm.css")} }
+                link { rel: "stylesheet", href: STYLE }
                 h1 { "Dioxus CRM Example" }
                 Router::<Route> {}
             }

examples/dog_app.rs

@@ -16,8 +16,8 @@ fn main() {
 
 fn app() -> Element {
     // Breed is a signal that will be updated when the user clicks a breed in the list
-    // `deerhound` is just a default that we know will exist. We could also use a `None` instead
-    let mut breed = use_signal(|| "deerhound".to_string());
+    // `shiba` is just a default that we know will exist. We could also use a `None` instead
+    let mut breed = use_signal(|| "shiba".to_string());
 
     // Fetch the list of breeds from the Dog API
     // Since there are no dependencies, this will never restart
@@ -55,7 +55,6 @@ fn app() -> Element {
     };
 
     rsx! {
-        style { {include_str!("./assets/dog_app.css")} }
         h1 { "Select a dog breed!" }
         div { height: "500px", display: "flex",
             ul { width: "100px", {breed_list} }

examples/dynamic_asset.rs

@@ -7,6 +7,8 @@
 use dioxus::desktop::{use_asset_handler, wry::http::Response};
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/custom_assets.css"));
+
 fn main() {
     launch_desktop(app);
 }
@@ -22,7 +24,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        style { {include_str!("./assets/custom_assets.css")} }
+        link { rel: "stylesheet", href: STYLE }
         h1 { "Dynamic Assets" }
         img { src: "/logos/logo.png" }
     }

examples/file_upload.rs

@@ -8,6 +8,8 @@ use std::sync::Arc;
 use dioxus::prelude::*;
 use dioxus::{html::HasFileData, prelude::dioxus_elements::FileEngine};
 
+const STYLE: &str = asset!(file("./examples/assets/file_upload.css"));
+
 fn main() {
     launch(app);
 }
@@ -41,7 +43,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        style { {include_str!("./assets/file_upload.css")} }
+        link { rel: "stylesheet", href: STYLE }
 
         h1 { "File Upload Example" }
         p { "Drop a .txt, .rs, or .js file here to read it" }

examples/flat_router.rs

@@ -9,10 +9,12 @@
 
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/flat_router.css"));
+
 fn main() {
     launch(|| {
         rsx! {
-            style { {include_str!("./assets/flat_router.css")} }
+            link { rel: "stylesheet", href: STYLE }
             Router::<Route> {}
         }
     })

examples/global.rs

@@ -7,16 +7,18 @@
 
 use dioxus::prelude::*;
 
-fn main() {
-    launch(app);
-}
+const STYLE: &str = asset!(file("./examples/assets/counter.css"));
 
 static COUNT: GlobalSignal<i32> = Signal::global(|| 0);
 static DOUBLED_COUNT: GlobalMemo<i32> = Signal::global_memo(|| COUNT() * 2);
 
+fn main() {
+    launch(app);
+}
+
 fn app() -> Element {
     rsx! {
-        style { {include_str!("./assets/counter.css")} }
+        link { rel: "stylesheet", href: STYLE }
         Increment {}
         Decrement {}
         Reset {}

examples/link.rs

@@ -8,13 +8,15 @@
 
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/links.css"));
+
 fn main() {
     launch(app);
 }
 
 fn app() -> Element {
     rsx! (
-        style { {include_str!("./assets/links.css")} }
+        link { rel: "stylesheet", href: STYLE }
         Router::<Route> {}
     )
 }

examples/reducer.rs

@@ -7,6 +7,8 @@
 
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/radio.css"));
+
 fn main() {
     launch(app);
 }
@@ -15,7 +17,7 @@ fn app() -> Element {
     let mut state = use_signal(|| PlayerState { is_playing: false });
 
     rsx!(
-        style { {include_str!("./assets/radio.css")} }
+        link { rel: "stylesheet", href: STYLE }
         h1 {"Select an option"}
 
         // Add some cute animations if the radio is playing!

examples/router.rs

@@ -8,10 +8,12 @@
 
 use dioxus::prelude::*;
 
+const STYLE: &str = asset!(file("./examples/assets/router.css"));
+
 fn main() {
     launch(|| {
         rsx! {
-            style { {include_str!("./assets/router.css")} }
+            link { rel: "stylesheet", href: STYLE }
             Router::<Route> {}
         }
     });

examples/todomvc.rs

@@ -3,6 +3,8 @@
 use dioxus::prelude::*;
 use std::collections::HashMap;
 
+const STYLE: &str = asset!(file("./examples/assets/todomvc.css"));
+
 fn main() {
     launch(app);
 }
@@ -63,7 +65,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        style { {include_str!("./assets/todomvc.css")} }
+        link { rel: "stylesheet", href: STYLE }
         section { class: "todoapp",
             TodoHeader { todos }
             section { class: "main",