Rewrite router

.github/workflows/pull-request.yml

@@ -158,6 +158,11 @@ jobs:
           cd packages/yew
           wasm-pack test --chrome --firefox --headless -- --features "wasm_test"
 
+      - name: Run tests - yew-router
+        run: |
+          cd packages/yew-router
+          wasm-pack test --chrome --firefox --headless
+
       - name: Run tests - yew-functional
         run: |
           cd packages/yew-functional

Cargo.toml

@@ -9,7 +9,6 @@ members = [
   # Router
   "packages/yew-router",
   "packages/yew-router-macro",
-  "packages/yew-router-route-parser",
 
   # Function components
   "packages/yew-functional",

docs/concepts/router.md

@@ -5,87 +5,69 @@ description: Yew's official router
 
 [The router on crates.io](https://crates.io/crates/yew-router)
 
-Routers in Single Page Applications \(SPA\) handle displaying different pages depending on what the URL is. Instead of the default behavior of requesting a different remote resource when a link is clicked, the router instead sets the URL locally to point to a valid route in your application. The router then detects this change and then decides what to render.
+Routers in Single Page Applications (SPA) handle displaying different pages depending on what the URL is. 
+Instead of the default behavior of requesting a different remote resource when a link is clicked, 
+the router instead sets the URL locally to point to a valid route in your application. 
+The router then detects this change and then decides what to render.
 
 ## Core Elements
 
-### `Route`
-
-Contains a String representing everything after the domain in the url and optionally the state stored in the history API.
-
-### `RouteService`
-
-Communicates with the browser to get and set Routes.
-
-### `RouteAgent`
-
-Owns a RouteService and is used to coordinate updates when the route changes, either from within the application logic or from an event fired from the browser.
-
-### `Switch`
-
-The `Switch` trait is used to convert a `Route` to and from the implementer of this trait.
-
 ### `Router`
 
-The Router component communicates with `RouteAgent` and will automatically resolve Routes it gets from the agent into switches, which it will expose via a `render` prop that allows specifying how the resulting switch gets converted to `Html`.
+The Router component. It takes in a callback and renders the HTML based on the returned value of the callback. It is usually placed 
+at the top of application.
 
-## How to use the router
+### `RouteService`
 
-First, you want to create a type that represents all the states of your application. Do note that while this typically is an enum, structs are supported as well, and that you can nest other items that implement `Switch` inside.
+Interfaces with the `Router`. It can be used to navigate to a specific route. 
 
-Then you should derive `Switch` for your type. For enums, every variant must be annotated with `
-#[at = "/some/route"]` (or `#[at = "/some/route"]`, but this is being phased out in favor of "at"),
-or if you use a struct instead, that must appear outside the struct declaration.
+## Usage
 
+Routes are defined by an `enum` which derives `Routable`:
 ```rust
-#[derive(Switch)]
-enum AppRoute {
-  #[at = "/login"]
-  Login,
-  #[at = "/register"]
-  Register,
-  #[at = "/delete_account"]
-  Delete, 
-  #[at = "/posts/{id}"]
-  ViewPost(i32),
-  #[at = "/posts/view"]
-  ViewPosts,
-  #[at = "/"]
-  Home
+enum Routes {
+    #[at("/")]
+    Home,
+    #[at("/secure")]
+    Secure,
+    #[not_found]
+    #[at("/404")]
+    NotFound,
 }
 ```
 
-:::caution
-Do note that the implementation generated by the derive macro for `Switch` will try to match each 
-variant in order from first to last, so if any route could possibly match two of your specified 
-`to` annotations, then the first one will match, and the second will never be tried. For example, 
-if you defined the following `Switch`, the only route that would be matched would be 
-`AppRoute::Home`.
+`Router` component takes that enum that defines the routes as its type parameter, finds the one whose path matches the 
+browser's current URL and passes it to the `render` callback. The callback returns the HTML which is to be rendered. 
+In case no path is matched, the router navigates to the path with `not_found` attribute. If no route is specified, 
+nothing is rendered, and a message is logged to console stating that no route was matched.
 
 ```rust
-#[derive(Switch)]
-enum AppRoute {
-  #[at = "/"]
-  Home,
-  #[at = "/login"]
-  Login,
-  #[at = "/register"]
-  Register,
-  #[at = "/delete_account"]
-  Delete, 
-  #[at = "/posts/{id}"]
-  ViewPost(i32),
-  #[at = "/posts/view"]
-  ViewPosts,
+#[function_component(Main)]
+fn app() -> Html {
+    html! {
+        <Router<Routes> render=RenderFn::new(switch) />
+    }
 }
-```
-:::
 
-You can also capture sections using variations of `{}` within your `#[at = ""]` annotation. `{}` means capture text until the next separator \(either "/", "?", "&", or "\#" depending on the context\). `{*}` means capture text until the following characters match, or if no characters are present, it will match anything. `{<number>}` means capture text until the specified number of separators are encountered \(example: `{2}` will capture until two separators are encountered\).
+fn switch(routes: Routes) -> Html {
+    let onclick_callback = Callback::from(|_| RouterService::push(Routes::Home, None));
+    match routes {
+        Routes::Home => html! { <h1>{ "Home" }</h1> },
+        Routes::Secure => html! {
+            <div>
+                <h1>{ "Secure" }</h1>
+                <button onclick=onclick_callback>{ "Go Home" }</button>
+            </div>
+        },
+        Routes::NotFound => html! {<h1>{"404"}</h1>},
+    }
+}
+```
 
-For structs and enums with named fields, you must specify the field's name within the capture group like so: `{user_name}` or `{*:age}`.
+### Navigation
 
-The Switch trait works with capture groups that are more structured than just Strings. You can specify any type that implements `Switch`. So you can specify that the capture group is a `usize`, and if the captured section of the URL can't be converted to it, then the variant won't match.
+In order to navigate between pages, either `Link` component (which renders a `<a>` element) or `RouterService::push` 
+function is used.
 
 ## Relevant examples
 - [Router](https://github.com/yewstack/yew/tree/master/examples/router)

examples/router/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>Yew • Router</title>
-    <base data-trunk-public-url />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"

examples/router/src/components/author_card.rs

@@ -1,9 +1,6 @@
-use crate::{
-    content::Author,
-    generator::Generated,
-    switch::{AppAnchor, AppRoute},
-};
+use crate::{content::Author, generator::Generated, Routes};
 use yew::prelude::*;
+use yew_router::prelude::Link;
 
 #[derive(Clone, Debug, PartialEq, Properties)]
 pub struct Props {
@@ -57,9 +54,9 @@ impl Component for AuthorCard {
                     </div>
                 </div>
                 <footer class="card-footer">
-                    <AppAnchor classes="card-footer-item" route=AppRoute::Author(author.seed)>
+                    <Link<Routes> classes="card-footer-item" route=Routes::Author { id: author.seed }>
                         { "Profile" }
-                    </AppAnchor>
+                    </Link<Routes>>
                 </footer>
             </div>
         }

examples/router/src/components/post_card.rs

@@ -1,9 +1,6 @@
-use crate::{
-    content::Post,
-    generator::Generated,
-    switch::{AppAnchor, AppRoute},
-};
+use crate::{content::Post, generator::Generated, Routes};
 use yew::prelude::*;
+use yew_router::prelude::Link;
 
 #[derive(Clone, Debug, PartialEq, Properties)]
 pub struct Props {
@@ -46,12 +43,12 @@ impl Component for PostCard {
                     </figure>
                 </div>
                 <div class="card-content">
-                    <AppAnchor classes="title is-block" route=AppRoute::Post(post.seed)>
+                    <Link<Routes> classes="title is-block" route=Routes::Post {id: post.seed}>
                         { &post.title }
-                    </AppAnchor>
-                    <AppAnchor classes="subtitle is-block" route=AppRoute::Author(post.author.seed)>
+                    </Link<Routes>>
+                    <Link<Routes> classes="subtitle is-block" route=Routes::Author {id: post.author.seed}>
                         { &post.author.name }
-                    </AppAnchor>
+                    </Link<Routes>>
                 </div>
             </div>
         }

examples/router/src/main.rs

@@ -1,5 +1,5 @@
 use yew::prelude::*;
-use yew_router::{route::Route, switch::Permissive};
+use yew_router::prelude::*;
 
 mod components;
 mod content;
@@ -9,8 +9,24 @@ use pages::{
     author::Author, author_list::AuthorList, home::Home, page_not_found::PageNotFound, post::Post,
     post_list::PostList,
 };
-mod switch;
-use switch::{AppAnchor, AppRoute, AppRouter, PublicUrlSwitch};
+use yew_router::{RenderFn, Routable};
+
+#[derive(Routable, PartialEq, Clone, Debug)]
+pub enum Routes {
+    #[at("/posts/:id")]
+    Post { id: u64 },
+    #[at("/posts")]
+    Posts,
+    #[at("/authors/:id")]
+    Author { id: u64 },
+    #[at("/authors")]
+    Authors,
+    #[at("/")]
+    Home,
+    #[not_found]
+    #[at("/404")]
+    NotFound,
+}
 
 pub enum Msg {
     ToggleNavbar,
@@ -50,12 +66,7 @@ impl Component for Model {
                 { self.view_nav() }
 
                 <main>
-                    <AppRouter
-                        render=AppRouter::render(Self::switch)
-                        redirect=AppRouter::redirect(|route: Route| {
-                            AppRoute::PageNotFound(Permissive(Some(route.route))).into_public()
-                        })
-                    />
+                    <Router<Routes> render=RenderFn::new(switch) />
                 </main>
                 <footer class="footer">
                     <div class="content has-text-centered">
@@ -98,22 +109,22 @@ impl Model {
                 </div>
                 <div class=classes!("navbar-menu", active_class)>
                     <div class="navbar-start">
-                        <AppAnchor classes="navbar-item" route=AppRoute::Home>
+                        <Link<Routes> classes="navbar-item" route=Routes::Home>
                             { "Home" }
-                        </AppAnchor>
-                        <AppAnchor classes="navbar-item" route=AppRoute::PostList>
+                        </Link<Routes>>
+                        <Link<Routes> classes="navbar-item" route=Routes::Posts>
                             { "Posts" }
-                        </AppAnchor>
+                        </Link<Routes>>
 
                         <div class="navbar-item has-dropdown is-hoverable">
                             <a class="navbar-link">
                                 { "More" }
                             </a>
                             <div class="navbar-dropdown">
                                 <a class="navbar-item">
-                                    <AppAnchor classes="navbar-item" route=AppRoute::AuthorList>
+                                    <Link<Routes> classes="navbar-item" route=Routes::Authors>
                                         { "Meet the authors" }
-                                    </AppAnchor>
+                                    </Link<Routes>>
                                 </a>
                             </div>
                         </div>
@@ -122,30 +133,27 @@ impl Model {
             </nav>
         }
     }
+}
 
-    fn switch(switch: PublicUrlSwitch) -> Html {
-        match switch.route() {
-            AppRoute::Post(id) => {
-                html! { <Post seed=id /> }
-            }
-            AppRoute::PostListPage(page) => {
-                html! { <PostList page=page.max(1) /> }
-            }
-            AppRoute::PostList => {
-                html! { <PostList page=1 /> }
-            }
-            AppRoute::Author(id) => {
-                html! { <Author seed=id /> }
-            }
-            AppRoute::AuthorList => {
-                html! { <AuthorList /> }
-            }
-            AppRoute::Home => {
-                html! { <Home /> }
-            }
-            AppRoute::PageNotFound(Permissive(route)) => {
-                html! { <PageNotFound route=route /> }
-            }
+fn switch(routes: Routes) -> Html {
+    match routes {
+        Routes::Post { id } => {
+            html! { <Post seed=id /> }
+        }
+        Routes::Posts => {
+            html! { <PostList /> }
+        }
+        Routes::Author { id } => {
+            html! { <Author seed=id /> }
+        }
+        Routes::Authors => {
+            html! { <AuthorList /> }
+        }
+        Routes::Home => {
+            html! { <Home /> }
+        }
+        Routes::NotFound => {
+            html! { <PageNotFound /> }
         }
     }
 }

examples/router/src/pages/page_not_found.rs

@@ -1,28 +1,21 @@
 use yew::prelude::*;
-use yewtil::NeqAssign;
 
-#[derive(Clone, Debug, Eq, PartialEq, Properties)]
-pub struct Props {
-    pub route: Option<String>,
-}
+pub struct PageNotFound;
 
-pub struct PageNotFound {
-    props: Props,
-}
 impl Component for PageNotFound {
     type Message = ();
-    type Properties = Props;
+    type Properties = ();
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
+    fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self
     }
 
     fn update(&mut self, _msg: Self::Message) -> ShouldRender {
         unimplemented!()
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props.neq_assign(props)
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
     }
 
     fn view(&self) -> Html {
@@ -34,7 +27,7 @@ impl Component for PageNotFound {
                             { "Page not found" }
                         </h1>
                         <h2 class="subtitle">
-                            { "This page does not seem to exist" }
+                            { "Page page does not seem to exist" }
                         </h2>
                     </div>
                 </div>