Rewrite router more

examples/router/src/main.rs

@@ -9,39 +9,52 @@ use pages::{
     author::Author, author_list::AuthorList, home::Home, page_not_found::PageNotFound, post::Post,
     post_list::PostList,
 };
+use yew_router::router::RouterUpdate;
 
 #[derive(Routable, PartialEq, Clone, Debug)]
 pub enum Route {
     #[at("/posts/:id")]
     Post { id: u64 },
     #[at("/posts")]
-    Posts,
+    Posts {
+        #[bind(query_arg = "p")]
+        page: u64,
+    },
     #[at("/authors/:id")]
     Author { id: u64 },
     #[at("/authors")]
     Authors,
     #[at("/")]
     Home,
-    #[not_found]
     #[at("/404")]
     NotFound,
 }
 
+impl Default for Route {
+    fn default() -> Self {
+        Route::NotFound
+    }
+}
+
 pub enum Msg {
     ToggleNavbar,
+    RouteChanged(RouterUpdate<Route>),
 }
 
 pub struct Model {
     link: ComponentLink<Self>,
+    router: Router<Route>,
     navbar_active: bool,
 }
 impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let router = Router::new(link.clone(), link.callback(Msg::RouteChanged));
         Self {
             link,
+            router,
             navbar_active: false,
         }
     }
@@ -52,6 +65,10 @@ impl Component for Model {
                 self.navbar_active = !self.navbar_active;
                 true
             }
+            Msg::RouteChanged(update) => {
+                self.router.update(update);
+                true
+            }
         }
     }
 
@@ -65,7 +82,7 @@ impl Component for Model {
                 { self.view_nav() }
 
                 <main>
-                    <Router<Route> render=Router::render(switch) />
+                    { switch(&self.router.route()) }
                 </main>
                 <footer class="footer">
                     <div class="content has-text-centered">
@@ -111,7 +128,7 @@ impl Model {
                         <Link<Route> classes=classes!("navbar-item") route=Route::Home>
                             { "Home" }
                         </Link<Route>>
-                        <Link<Route> classes=classes!("navbar-item") route=Route::Posts>
+                        <Link<Route> classes=classes!("navbar-item") route=Route::Posts { page: 1 }>
                             { "Posts" }
                         </Link<Route>>
 
@@ -139,8 +156,8 @@ fn switch(routes: &Route) -> Html {
         Route::Post { id } => {
             html! { <Post seed=*id /> }
         }
-        Route::Posts => {
-            html! { <PostList /> }
+        Route::Posts { page } => {
+            html! { <PostList page=*page /> }
         }
         Route::Author { id } => {
             html! { <Author seed=*id /> }

examples/router/src/pages/post_list.rs

@@ -1,64 +1,60 @@
 use crate::components::{pagination::Pagination, post_card::PostCard};
 use crate::Route;
-use serde::{Deserialize, Serialize};
 use yew::prelude::*;
+use yew_router::{Router, RouterAction};
 
 const ITEMS_PER_PAGE: u64 = 10;
 const TOTAL_PAGES: u64 = u64::MAX / ITEMS_PER_PAGE;
 
-pub enum Msg {
-    ShowPage(u64),
-}
-
-#[derive(Serialize, Deserialize)]
-struct PageQuery {
-    page: u64,
+#[derive(Properties, Clone)]
+pub struct PostListProps {
+    pub page: u64,
 }
 
 pub struct PostList {
-    link: ComponentLink<Self>,
+    router: Router<crate::Route>,
+    props: PostListProps,
 }
 impl Component for PostList {
-    type Message = Msg;
-    type Properties = ();
+    type Message = ();
+    type Properties = PostListProps;
 
-    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { link }
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let router = Router::new(link, Callback::noop());
+        Self { router, props }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            Msg::ShowPage(page) => {
-                yew_router::push_route_with_query(Route::Posts, PageQuery { page }).unwrap();
-                true
-            }
-        }
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        false
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        false
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        self.props = props;
+        true
     }
 
     fn view(&self) -> Html {
-        let page = self.current_page();
+        let on_switch_page = self
+            .router
+            .dispatcher(|page| Some(RouterAction::Push(Route::Posts { page })));
 
         html! {
             <div class="section container">
                 <h1 class="title">{ "Posts" }</h1>
                 <h2 class="subtitle">{ "All of our quality writing in one place" }</h2>
                 { self.view_posts() }
                 <Pagination
-                    page=page
+                    page=self.props.page
                     total_pages=TOTAL_PAGES
-                    on_switch_page=self.link.callback(Msg::ShowPage)
+                    on_switch_page=on_switch_page
                 />
             </div>
         }
     }
 }
 impl PostList {
     fn view_posts(&self) -> Html {
-        let start_seed = (self.current_page() - 1) * ITEMS_PER_PAGE;
+        let start_seed = (self.props.page - 1) * ITEMS_PER_PAGE;
         let mut cards = (0..ITEMS_PER_PAGE).map(|seed_offset| {
             html! {
                 <li class="list-item mb-5">
@@ -81,10 +77,4 @@ impl PostList {
             </div>
         }
     }
-
-    fn current_page(&self) -> u64 {
-        yew_router::parse_query::<PageQuery>()
-            .map(|it| it.page)
-            .unwrap_or(1)
-    }
 }

packages/yew-functional/src/lib.rs

@@ -149,7 +149,7 @@ where
     }
 }
 
-pub(crate) fn get_current_scope() -> Option<AnyScope> {
+pub fn get_current_scope() -> Option<AnyScope> {
     if CURRENT_HOOK.is_set() {
         Some(CURRENT_HOOK.with(|state| state.scope.clone()))
     } else {

packages/yew-router-macro/Cargo.toml

@@ -14,7 +14,8 @@ proc-macro = true
 heck = "0.3.2"
 proc-macro2 = "1.0.24"
 quote = "1.0.9"
-syn = { version = "1.0.64", features = ["full","extra-traits"] }
+syn = { version = "1.0.64", features = ["full", "extra-traits"] }
+regex = "1.5.4"
 
 [dev-dependencies]
 rustversion = "1.0"

packages/yew-router-macro/src/lib.rs

@@ -23,7 +23,7 @@ use syn::parse_macro_input;
 ///     NotFound,
 /// }
 /// ```
-#[proc_macro_derive(Routable, attributes(at, not_found))]
+#[proc_macro_derive(Routable, attributes(at, bind))]
 pub fn routable_derive(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
     let input = parse_macro_input!(input as Routable);
     routable_derive_impl(input).into()