Router (#29)

.github/workflows/rust.yml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
-    - run: rustfmt --check **/*.rs
+    - run: cargo fmt -- --check
       if: ${{ github.event_name == 'pull_request' }}
     - uses: actions-rs/clippy-check@v1
       with:

.rustfmt.toml

@@ -0,0 +1,3 @@
+error_on_line_overflow = true
+error_on_unformatted = true
+newline_style = "Unix"

Cargo.lock

@@ -18,6 +18,12 @@ version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "33954243bd79057c2de7338850b85983a44588021f8a5fee574a8888c6de4344"
 
+[[package]]
+name = "arrayvec"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cff77d8686867eceff3105329d4698d96c2391c176d5d03adc90c7389162b5b8"
+
 [[package]]
 name = "autocfg"
 version = "1.0.1"
@@ -359,6 +365,19 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "830d08ce1d1d941e6b30645f1a0eb5643013d835ce3779a5fc208261dbe10f55"
 
+[[package]]
+name = "lexical-core"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db65c6da02e61f55dae90a0ae427b2a5f6b3e8db09f58d10efab23af92592616"
+dependencies = [
+ "arrayvec",
+ "bitflags",
+ "cfg-if",
+ "ryu",
+ "static_assertions",
+]
+
 [[package]]
 name = "libc"
 version = "0.2.77"
@@ -405,6 +424,17 @@ dependencies = [
  "autocfg",
 ]
 
+[[package]]
+name = "nom"
+version = "5.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ffb4262d26ed83a1c0a33a38fe2bb15797329c85770da05e6b828ddb782627af"
+dependencies = [
+ "lexical-core",
+ "memchr",
+ "version_check",
+]
+
 [[package]]
 name = "num-integer"
 version = "0.1.43"
@@ -607,6 +637,12 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "27207bb65232eda1f588cf46db2fee75c0808d557f6b3cf19a75f5d6d7c94df1"
 
+[[package]]
+name = "static_assertions"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
+
 [[package]]
 name = "syn"
 version = "1.0.39"
@@ -672,6 +708,12 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f7fe0bb3479651439c9112f72b6c505038574c9fbb575ed1bf3b797fa39dd564"
 
+[[package]]
+name = "version_check"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b5a972e5669d67ba988ce3dc826706fb0a8b01471c088cb0b6110b805cc36aed"
+
 [[package]]
 name = "walkdir"
 version = "2.3.1"
@@ -847,6 +889,45 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "yew-router"
+version = "0.14.0"
+source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
+dependencies = [
+ "cfg-if",
+ "cfg-match",
+ "gloo",
+ "js-sys",
+ "log",
+ "nom",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+ "yew-router-route-parser",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.14.0"
+source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "yew-router-route-parser",
+]
+
+[[package]]
+name = "yew-router-route-parser"
+version = "0.14.0"
+source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
+dependencies = [
+ "nom",
+]
+
 [[package]]
 name = "yewprint"
 version = "0.1.0"
@@ -867,6 +948,7 @@ dependencies = [
  "wasm-bindgen",
  "web-sys",
  "yew",
+ "yew-router",
  "yewprint",
 ]
 

yewprint-doc/Cargo.toml

@@ -14,6 +14,7 @@ wasm-bindgen = "^0.2"
 yew = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
 web-sys = { version = "0.3", features = ["Window", "MediaQueryList"] }
 yewprint = { path = "../yewprint" }
+yew-router = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
 
 [build-dependencies]
 syntect = "4.4.0"

yewprint-doc/src/app.rs

@@ -2,17 +2,21 @@ use crate::buttons::*;
 use crate::callout::*;
 use crate::collapse::*;
 use crate::icon::*;
-use crate::switch::*;
-use crate::tree::*;
 use crate::progressbar::*;
+use crate::tree::*;
 
 use yew::prelude::*;
+use yew_router::{
+    agent::{RouteAgentDispatcher, RouteRequest},
+    router::Router,
+    Switch,
+};
 use yewprint::{ConditionalClass, IconName, Menu, MenuItem};
 
 pub struct App {
     link: ComponentLink<Self>,
-    doc_menu: DocMenu,
     dark_theme: ConditionalClass,
+    route_dispatcher: RouteAgentDispatcher,
 }
 
 pub enum Msg {
@@ -31,8 +35,8 @@ impl Component for App {
                 .map(|x| x.matches())
                 .unwrap_or(true)
                 .into(),
-            doc_menu: DocMenu::Button,
             link,
+            route_dispatcher: RouteAgentDispatcher::new(),
         }
     }
 
@@ -40,7 +44,8 @@ impl Component for App {
         match msg {
             Msg::ToggleLight => *self.dark_theme ^= true,
             Msg::GoToMenu(doc_menu) => {
-                self.doc_menu = doc_menu;
+                self.route_dispatcher
+                    .send(RouteRequest::ChangeRoute(doc_menu.into()));
             }
         }
         true
@@ -142,13 +147,11 @@ impl Component for App {
                     </div>
                     <main class="docs-content-wrapper" role="main">
                         <div class="docs-page">
-                            {
+                            <Router<DocMenu, ()>
-                                match self.doc_menu {
+                                render=Router::render(|switch: DocMenu| {
-                                    DocMenu::Button => html! (<ButtonDoc />),
+                                    match switch {
-                                    DocMenu::Switch => html! (<SwitchDoc
+                                        DocMenu::Button | DocMenu::Home => html! (<ButtonDoc />),
-                                        dark_theme=self.dark_theme
+                                        DocMenu::Switch => html! (),
-                                        onclick=self.link.callback(|_| Msg::ToggleLight)
-                                        />),
                                         DocMenu::Callout => html!(<CalloutDoc />),
                                         DocMenu::Collapse => html!(<CollapseDoc />),
                                         DocMenu::Tree => html!(<TreeDoc />),
@@ -156,7 +159,8 @@ impl Component for App {
                                         DocMenu::ProgressBar => html!(<ProgressBarDoc />),
                                         DocMenu::Menu => html!(),
                                     }
-                            }
+                                })
+                            />
                         </div>
                     </main>
                 </div>
@@ -165,14 +169,24 @@ impl Component for App {
     }
 }
 
-#[derive(Debug, Copy, Clone)]
+#[derive(Debug, Copy, Clone, Switch)]
 pub enum DocMenu {
+    #[to = "/#button"]
     Button,
+    #[to = "/#callout"]
     Callout,
+    #[to = "/#collapse"]
     Collapse,
+    #[to = "/#icon"]
     Icon,
+    #[to = "/#menu"]
     Menu,
+    #[to = "/#switch"]
     Switch,
+    #[to = "/#tree"]
     Tree,
+    #[to = "/#progress-bar"]
     ProgressBar,
+    #[to = "/"]
+    Home,
 }

yewprint-doc/src/lib.rs

@@ -4,9 +4,9 @@ mod callout;
 mod collapse;
 mod example;
 mod icon;
+mod progressbar;
 mod switch;
 mod tree;
-mod progressbar;
 
 pub use app::*;
 pub use example::*;

yewprint-doc/src/progressbar/example.rs

@@ -1,5 +1,5 @@
 use yew::prelude::*;
-use yewprint::{ProgressBar, Intent};
+use yewprint::{Intent, ProgressBar};
 
 pub struct Example {
     props: ExampleProps,

yewprint-doc/src/progressbar/mod.rs

@@ -5,7 +5,6 @@ use example::*;
 use yew::prelude::*;
 use yewprint::{Intent, Menu, MenuItem, Switch, H1, H5};
 
-
 pub struct ProgressBarDoc {
     callback: Callback<ExampleProps>,
     state: ExampleProps,
@@ -21,7 +20,7 @@ impl Component for ProgressBarDoc {
             state: ExampleProps {
                 intent: None,
                 animate: false,
-                stripes: false
+                stripes: false,
             },
         }
     }