fix CI

examples/crm.rs

@@ -1,8 +1,5 @@
 //! Tiny CRM: A port of the Yew CRM example to Dioxus.
 #![allow(non_snake_case)]
-
-use std::sync::{Arc, Mutex};
-
 use dioxus::prelude::*;
 use dioxus_router::prelude::*;
 
@@ -10,6 +7,17 @@ fn main() {
     dioxus_desktop::launch(App);
 }
 
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    #[route("/")]
+    ClientList {},
+    #[route("/new")]
+    ClientAdd {},
+    #[route("/settings")]
+    Settings {},
+}
+
 #[derive(Clone, Debug, Default)]
 pub struct Client {
     pub first_name: String,
@@ -17,22 +25,10 @@ pub struct Client {
     pub description: String,
 }
 
-type ClientContext = Arc<Mutex<Vec<Client>>>;
+type ClientContext = Vec<Client>;
 
 fn App(cx: Scope) -> Element {
-    use_router(cx, &RouterConfiguration::default, &|| {
-        Segment::content(comp(ClientList))
-            .fixed(
-                "new",
-                Route::content(comp(ClientAdd)).name::<ClientAddName>(),
-            )
-            .fixed(
-                "settings",
-                Route::content(comp(Settings)).name::<SettingsName>(),
-            )
-    });
-
-    use_context_provider::<ClientContext>(cx, Default::default);
+    use_shared_state_provider::<ClientContext>(cx, Default::default);
 
     render! {
         link {
@@ -50,28 +46,29 @@ fn App(cx: Scope) -> Element {
 
         h1 { "Dioxus CRM Example" }
 
-        Outlet { }
+        Router {}
     }
 }
 
+#[inline_props]
 fn ClientList(cx: Scope) -> Element {
-    let clients = use_context::<ClientContext>(cx).unwrap();
+    let clients = use_shared_state::<ClientContext>(cx).unwrap();
 
     cx.render(rsx! {
         h2 { "List of Clients" }
 
         Link {
-            target: named::<ClientAddName>(),
+            target: Route::ClientAdd {},
             class: "pure-button pure-button-primary",
             "Add Client"
         }
         Link {
-            target: named::<SettingsName>(),
+            target: Route::Settings {},
             class: "pure-button",
             "Settings"
         }
 
-        clients.lock().unwrap().iter().map(|client| rsx! {
+        clients.read().iter().map(|client| rsx! {
             div {
                 class: "client",
                 style: "margin-bottom: 50px",
@@ -83,14 +80,14 @@ fn ClientList(cx: Scope) -> Element {
     })
 }
 
-struct ClientAddName;
+#[inline_props]
 fn ClientAdd(cx: Scope) -> Element {
-    let clients = use_context::<ClientContext>(cx).unwrap();
+    let clients = use_shared_state::<ClientContext>(cx).unwrap();
     let first_name = use_state(cx, String::new);
     let last_name = use_state(cx, String::new);
     let description = use_state(cx, String::new);
 
-    let navigator = use_navigate(cx).unwrap();
+    let navigator = use_navigator(cx);
 
     cx.render(rsx! {
         h2 { "Add new Client" }
@@ -98,7 +95,7 @@ fn ClientAdd(cx: Scope) -> Element {
         form {
             class: "pure-form pure-form-aligned",
             onsubmit: move |_| {
-                let mut clients = clients.lock().unwrap();
+                let mut clients = clients.write();
 
                 clients.push(Client {
                     first_name: first_name.to_string(),
@@ -106,7 +103,7 @@ fn ClientAdd(cx: Scope) -> Element {
                     description: description.to_string(),
                 });
 
-                navigator.push(named::<RootIndex>());
+                navigator.push(Route::ClientList {});
             },
 
             fieldset {
@@ -164,7 +161,7 @@ fn ClientAdd(cx: Scope) -> Element {
                         "Save"
                     }
                     Link {
-                        target: named::<RootIndex>(),
+                        target: Route::ClientList {},
                         class: "pure-button pure-button-primary red",
                         "Cancel"
                     }
@@ -176,9 +173,9 @@ fn ClientAdd(cx: Scope) -> Element {
     })
 }
 
-struct SettingsName;
+#[inline_props]
 fn Settings(cx: Scope) -> Element {
-    let clients = use_context::<ClientContext>(cx).unwrap();
+    let clients = use_shared_state::<ClientContext>(cx).unwrap();
 
     cx.render(rsx! {
         h2 { "Settings" }
@@ -186,14 +183,14 @@ fn Settings(cx: Scope) -> Element {
         button {
             class: "pure-button pure-button-primary red",
             onclick: move |_| {
-                let mut clients = clients.lock().unwrap();
+                let mut clients = clients.write();
                 clients.clear();
             },
             "Remove all Clients"
         }
 
         Link {
-            target: named::<RootIndex>(),
+            target: Route::ClientList {},
             class: "pure-button",
             "Go back"
         }

examples/flat_router.rs

@@ -17,13 +17,27 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    use_router(cx, &RouterConfiguration::default, &|| {
-        Segment::content(comp(Home))
-            .fixed("games", comp(Games))
-            .fixed("play", comp(Play))
-            .fixed("settings", comp(Settings))
-    });
+    render! {
+        Router {}
+    }
+}
 
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(Footer)]
+        #[route("/")]
+        Home {},
+        #[route("/games")]
+        Games {},
+        #[route("/play")]
+        Play {},
+        #[route("/settings")]
+        Settings {},
+}
+
+#[inline_props]
+fn Footer(cx: Scope) -> Element {
     render! {
         div {
             Outlet { }
@@ -34,28 +48,32 @@ fn app(cx: Scope) -> Element {
 
             nav {
                 ul {
-                    li { Link { target: "/", "Home" } }
-                    li { Link { target: "/games", "Games" } }
-                    li { Link { target: "/play", "Play" } }
-                    li { Link { target: "/settings", "Settings" } }
+                    li { Link { target: Route::Home {}, "Home" } }
+                    li { Link { target: Route::Games {}, "Games" } }
+                    li { Link { target: Route::Play {}, "Play" } }
+                    li { Link { target: Route::Settings {}, "Settings" } }
                 }
             }
         }
     }
 }
 
+#[inline_props]
 fn Home(cx: Scope) -> Element {
     render!("Home")
 }
 
+#[inline_props]
 fn Games(cx: Scope) -> Element {
     render!("Games")
 }
 
+#[inline_props]
 fn Play(cx: Scope) -> Element {
     render!("Play")
 }
 
+#[inline_props]
 fn Settings(cx: Scope) -> Element {
     render!("Settings")
 }

examples/link.rs

@@ -8,10 +8,6 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    use_router(cx, &RouterConfiguration::default, &|| {
-        Segment::content(comp(Home)).fixed("settings", comp(Settings))
-    });
-
     cx.render(rsx! (
         div {
             p {
@@ -27,20 +23,39 @@ fn app(cx: Scope) -> Element {
             }
         }
         div {
-            Outlet { }
-            p { "----"}
-            ul {
-                Link { target: "/", li { "Router link to home" } },
-                Link { target: "/settings", li { "Router link to settings" } },
-            }
+            Router {}
         }
     ))
 }
 
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(Header)]
+        #[route("/")]
+        Home {},
+        #[route("/settings")]
+        Settings {},
+}
+
+#[inline_props]
+fn Header(cx: Scope) -> Element {
+    render! {
+        h1 { "Your app here" }
+        ul {
+            li { Link { target: Route::Home {}, "home" } }
+            li { Link { target: Route::Settings {}, "settings" } }
+        }
+        Outlet {}
+    }
+}
+
+#[inline_props]
 fn Home(cx: Scope) -> Element {
     render!(h1 { "Home" })
 }
 
+#[inline_props]
 fn Settings(cx: Scope) -> Element {
     render!(h1 { "Settings" })
 }

examples/simple_desktop.rs

@@ -6,7 +6,6 @@ use dioxus_router::prelude::*;
 fn main() {
     simple_logger::SimpleLogger::new()
         .with_level(log::LevelFilter::Debug)
-        .with_module_level("dioxus_router", log::LevelFilter::Trace)
         .with_module_level("dioxus", log::LevelFilter::Trace)
         .init()
         .unwrap();
@@ -14,58 +13,69 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    use_router(cx, &RouterConfiguration::default, &|| {
-        Segment::content(comp(Home))
-            .fixed(
-                "blog",
-                Route::empty().nested(
-                    Segment::content(comp(BlogList)).catch_all((comp(BlogPost), PostId {})),
-                ),
-            )
-            .fixed("oranges", comp(Oranges))
-            .fixed("apples", "/oranges")
-    });
-
     render! {
-        h1 { "Your app here" }
-        ul {
-            li { Link { target: "/", "home" } }
-            li { Link { target: "/blog", "blog" } }
-            li { Link { target: "/blog/tim", "tims' blog" } }
-            li { Link { target: "/blog/bill", "bills' blog" } }
-            li { Link { target: "/blog/james", "james amazing' blog" } }
-            li { Link { target: "/apples", "go to apples" } }
-        }
-        Outlet { }
+        Router {}
     }
 }
 
+#[derive(Routable, Clone)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(NavBar)]
+        #[route("/")]
+        Home {},
+        #[nest("/new")]
+            #[route("/")]
+            BlogList {},
+            #[route("/:post")]
+            BlogPost {
+                post: String,
+            },
+        #[end_nest]
+        #[route("/oranges")]
+        Oranges {},
+}
+
+#[inline_props]
+fn NavBar(cx: Scope) -> Element {
+    render! {
+        h1 { "Your app here" }
+        ul {
+            li { Link { target: Route::Home {}, "home" } }
+            li { Link { target: Route::BlogList {}, "blog" } }
+            li { Link { target: Route::BlogPost { post: "tim".into() }, "tims' blog" } }
+            li { Link { target: Route::BlogPost { post: "bill".into() }, "bills' blog" } }
+            li { Link { target: Route::BlogPost { post: "james".into() }, "james amazing' blog" } }
+        }
+        Outlet {}
+    }
+}
+
+#[inline_props]
 fn Home(cx: Scope) -> Element {
     log::debug!("rendering home {:?}", cx.scope_id());
     render! { h1 { "Home" } }
 }
 
+#[inline_props]
 fn BlogList(cx: Scope) -> Element {
     log::debug!("rendering blog list {:?}", cx.scope_id());
     render! { div { "Blog List" } }
 }
 
-struct PostId;
-fn BlogPost(cx: Scope) -> Element {
-    let Some(id) = use_route(cx)?.parameter::<PostId>() else {
-        return render!(div { "No blog post id" });
-    };
-
-    log::debug!("rendering blog post {}", id);
+#[inline_props]
+fn BlogPost(cx: Scope, post: String) -> Element {
+    log::debug!("rendering blog post {}", post);
 
     render! {
         div {
-            h3 { "blog post: {id:?}"  }
-            Link { target: "/blog/", "back to blog list" }
+            h3 { "blog post: {post}"  }
+            Link { target: Route::BlogList {}, "back to blog list" }
         }
     }
 }
 
+#[inline_props]
 fn Oranges(cx: Scope) -> Element {
     render!("Oranges are not apples!")
 }