Allow nested html in link component

examples/guide/src/guide.rs

@@ -100,13 +100,13 @@ fn render_page_list_item(props: PageProps, route: &Route) -> Html {
         log::debug!("Found an active");
         return html! {
             <li style="padding-left: 4px; padding-right: 4px; padding-top: 6px; padding-bottom: 6px; background-color: lightgray;">
-                <RouterLink link=props.page_url text={props.title} />
+                <RouterAnchor link=props.page_url.clone()> {&props.title} </RouterLink>
             </li>
         };
     } else {
         return html! {
             <li style="padding-left: 4px; padding-right: 4px; padding-top: 6px; padding-bottom: 6px; background-color: white;">
-                <RouterLink link=props.page_url text={props.title} />
+                <RouterAnchor link=props.page_url.clone()> {&props.title} </RouterLink>
             </li>
         };
     }

examples/router_component/src/a_component.rs

@@ -36,14 +36,12 @@ impl Component for AModel {
             <div>
                 { "I am the A component"}
                 <div>
-                    <RouterButton:
-                        text=String::from("Go to a/c"),
-                        link="/a/c",
-                    />
-                    <RouterButton:
-                        text=String::from("Go to a/d (route does not exist)"),
-                        link="/a/d",
-                    />
+                    <RouterButton link="/a/c">
+                        {"Go to a/c"}
+                    </RouterButton>
+                    <RouterButton link="/a/d">
+                        {"Go to a/d (route does not exist)"}
+                    </RouterButton>
                 </div>
                 <div>
                 {

examples/router_component/src/main.rs

@@ -43,13 +43,13 @@ impl Component for Model {
         html! {
             <div>
                 <nav class="menu",>
-                    <RouterButton: text=String::from("Go to A"), link="/a/", />
-                    <RouterLink: text=String::from("Go to B"), link="/b/#", />
-                    <RouterButton: text=String::from("Go to C"), link="/c", />
-                    <RouterButton: text=String::from("Go to A/C"), link="/a/c", />
-                    <RouterButton: text=String::from("Go to E (hello there)"), link="/e/there", />
-                    <RouterButton: text=String::from("Go to E (hello world)"), link="/e/world", />
-                    <RouterButton: text=String::from("Go to bad path"), link="/a_bad_path", />
+                    <RouterButton link="/a/"> {"Go to A"} </RouterButton>
+                    <RouterAnchor link="/b/#"> {"Go to B"} </RouterAnchor>
+                    <RouterButton link="/c"> {"Go to C"} </RouterButton>
+                    <RouterButton link="/a/c"> {"Go to A/C"} </RouterButton>
+                    <RouterButton link="/e/there"> {"Go to E (hello there)"} </RouterButton>
+                    <RouterButton link="/e/world"> {"Go to E (hello world)"} </RouterButton>
+                    <RouterButton link="/a_bad_path"> {"Go to bad path"} </RouterButton>
                 </nav>
                 <div>
                     <Router<AppRoute>

examples/servers/warp/src/main.rs

@@ -1,12 +1,13 @@
-use std::path::{PathBuf};
-use warp::filters::BoxedFilter;
-use warp::{Reply, Filter};
-use warp::path::Peek;
-use warp::fs::File;
-use warp::path;
+use std::path::PathBuf;
+use warp::{
+    filters::BoxedFilter,
+    fs::File,
+    path::{Peek},
+    path,
+    Filter, Reply,
+};
 
 fn main() {
-
     let localhost = [0, 0, 0, 0];
     let port = 8000;
     let addr = (localhost, port);
@@ -16,8 +17,7 @@ fn main() {
     const ASSETS_DIR: &str = "../../../target/deploy";
     let assets_dir: PathBuf = PathBuf::from(ASSETS_DIR);
 
-    let routes = api()
-        .or(static_files_handler(assets_dir));
+    let routes = api().or(static_files_handler(assets_dir));
 
     warp::serve(routes).run(addr);
 }
@@ -36,12 +36,10 @@ pub fn api() -> BoxedFilter<(impl Reply,)> {
 pub fn static_files_handler(assets_dir: PathBuf) -> BoxedFilter<(impl Reply,)> {
     const INDEX_HTML: &str = "index.html";
 
-    let files = assets(assets_dir.clone())
-        .or(index_static_file_redirect(assets_dir.join(INDEX_HTML)));
+    let files =
+        assets(assets_dir.clone()).or(index_static_file_redirect(assets_dir.join(INDEX_HTML)));
 
-    warp::any()
-        .and(files)
-        .boxed()
+    warp::any().and(files).boxed()
 }
 
 /// If the path does not start with /api, return the index.html, so the app will bootstrap itself
@@ -54,7 +52,7 @@ fn index_static_file_redirect(index_file_path: PathBuf) -> BoxedFilter<(impl Rep
             // Reject the request if the path starts with /api/
             if let Some(first_segment) = segments.segments().next() {
                 if first_segment == API_STRING {
-                    return Err(warp::reject::not_found())
+                    return Err(warp::reject::not_found());
                 }
             }
             Ok(file)

src/alias.rs

@@ -55,12 +55,22 @@ macro_rules! define_router_state {
             #[doc = ">](agent/struct.RouteAgentDispatcher.html)`."]
             pub type RouteAgentDispatcher = $crate::agent::RouteAgentDispatcher<$StateT>;
 
+
+            #[allow(deprecated)]
+            #[deprecated(note = "Has been renamed to RouterAnchor")]
             #[cfg(feature="components")]
             #[doc = "Alias to [RouterLink<"]
             #[doc = $StateName]
             #[doc = ">](components/struct.RouterLink.html)`."]
             pub type RouterLink = $crate::components::RouterLink<$StateT>;
 
+
+            #[cfg(feature="components")]
+            #[doc = "Alias to [RouterAnchor<"]
+            #[doc = $StateName]
+            #[doc = ">](components/struct.RouterAnchor.html)`."]
+            pub type RouterAnchor = $crate::components::RouterAnchor<$StateT>;
+
             #[cfg(feature="components")]
             #[doc = "Alias to [RouterButton<"]
             #[doc = $StateName]

src/components/mod.rs

@@ -6,20 +6,25 @@
 mod router_button;
 mod router_link;
 
-use yew::Properties;
+use yew::{Children, Properties};
 
-pub use self::{router_button::RouterButton, router_link::RouterLink};
+#[allow(deprecated)]
+pub use self::{router_button::RouterButton, router_link::RouterAnchor, router_link::RouterLink};
 use crate::RouterState;
 
+// TODO This should also be PartialEq and Clone. Its blocked on Children not supporting that.
 /// Properties for `RouterButton` and `RouterLink`.
-#[derive(Properties, Default, Clone, Debug, PartialEq)]
+#[derive(Properties, Default, Debug)]
 pub struct Props<T: for<'de> RouterState<'de>> {
     /// The route that will be set when the component is clicked.
     pub link: String,
     /// The state to set when changing the route.
     pub state: Option<T>,
+    #[deprecated(note = "Use children field instead (nested html)")]
     /// The text to display.
     pub text: String,
+    /// Html inside the component.
+    pub children: Children,
     /// Disable the component.
     pub disabled: bool,
     /// Classes to be added to component.

src/components/router_button.rs

@@ -56,7 +56,11 @@ impl<T: for<'de> RouterState<'de>> Component for RouterButton<T> {
                 onclick=cb(|_| Msg::Clicked),
                 disabled=self.props.disabled,
             >
-                {&self.props.text}
+                {
+                    #[allow(deprecated)]
+                    &self.props.text
+                }
+                {self.props.children.iter().collect::<VNode>()}
             </button>
         }
     }

src/components/router_link.rs

@@ -9,21 +9,27 @@ use super::{Msg, Props};
 use crate::RouterState;
 use yew::virtual_dom::VNode;
 
+/// An anchor tag Component that when clicked, will navigate to the provided route.
+///
+/// Alias to RouterAnchor.
+#[deprecated(note = "Has been renamed to RouterAnchor")]
+pub type RouterLink<T> = RouterAnchor<T>;
+
 /// An anchor tag Component that when clicked, will navigate to the provided route.
 #[derive(Debug)]
-pub struct RouterLink<T: for<'de> RouterState<'de>> {
+pub struct RouterAnchor<T: for<'de> RouterState<'de>> {
     link: ComponentLink<Self>,
     router: RouteAgentDispatcher<T>,
     props: Props<T>,
 }
 
-impl<T: for<'de> RouterState<'de>> Component for RouterLink<T> {
+impl<T: for<'de> RouterState<'de>> Component for RouterAnchor<T> {
     type Message = Msg;
     type Properties = Props<T>;
 
     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
         let router = RouteAgentDispatcher::new();
-        RouterLink {
+        RouterAnchor {
             link,
             router,
             props,
@@ -63,7 +69,11 @@ impl<T: for<'de> RouterState<'de>> Component for RouterLink<T> {
                 disabled=self.props.disabled,
                 href=target,
             >
-                {&self.props.text}
+                {
+                    #[allow(deprecated)]
+                    &self.props.text
+                }
+                {self.props.children.iter().collect::<VNode>()}
             </a>
         }
     }