Merge branch 'master' into jk/unify

README.md

@@ -50,6 +50,14 @@
   </h3>
 </div>
 
+<div align="center">
+  <h4>
+    <a href="https://github.com/DioxusLabs/dioxus/blob/master/README.md"> English </a>
+    <span> | </span>
+    <a href="https://github.com/DioxusLabs/dioxus/blob/master/notes/README/ZH_CN.md"> 中文 </a>
+  </h3>
+</div>
+
 <br/>
 
 Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust.
@@ -108,7 +116,7 @@ cargo run --example EXAMPLE
 | [![File Explorer](https://github.com/DioxusLabs/example-projects/raw/master/file-explorer/image.png)](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) | [![Wifi Scanner Demo](https://github.com/DioxusLabs/example-projects/raw/master/wifi-scanner/demo_small.png)](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner) | [![TodoMVC example](https://github.com/DioxusLabs/example-projects/raw/master/todomvc/example.png)](https://github.com/DioxusLabs/example-projects/blob/master/todomvc) | [![E-commerce Example](https://github.com/DioxusLabs/example-projects/raw/master/ecommerce-site/demo.png)](https://github.com/DioxusLabs/example-projects/blob/master/ecommerce-site) |
 
 
-See the awesome-dioxus page for a curated list of content in the Dioxus Ecosystem.
+See the [awesome-dioxus](https://github.com/DioxusLabs/awesome-dioxus) page for a curated list of content in the Dioxus Ecosystem.
 
 
 ## Why Dioxus and why Rust?
@@ -151,7 +159,7 @@ You shouldn't use Dioxus if:
 ### Comparison with other Rust UI frameworks
 Dioxus primarily emphasizes **developer experience** and **familiarity with React principles**. 
 
-- [Yew](https://github.com/yewstack/yew): prefers the elm pattern instead of React-hooks, no borrowed props, no SSR.
+- [Yew](https://github.com/yewstack/yew): prefers the elm pattern instead of React-hooks, no borrowed props, supports SSR (no hydration).
 - [Percy](https://github.com/chinedufn/percy): Supports SSR but less emphasis on state management and event handling.
 - [Sycamore](https://github.com/sycamore-rs/sycamore): VDOM-less using fine-grained reactivity, but lacking in ergonomics.
 - [Dominator](https://github.com/Pauan/rust-dominator): Signal-based zero-cost alternative, less emphasis on community and docs.

docs/guide/book.toml

@@ -10,8 +10,8 @@ edition = "2018"
 [output.html]
 mathjax-support = true
 site-url = "/mdBook/"
-git-repository-url = "https://github.com/rust-lang/mdBook/tree/master/guide"
-edit-url-template = "https://github.com/rust-lang/mdBook/edit/master/guide/{path}"
+git-repository-url = "https://github.com/DioxusLabs/dioxus/edit/master/docs/guide"
+edit-url-template = "https://github.com/DioxusLabs/dioxus/edit/master/docs/guide/{path}"
 
 [output.html.playground]
 editable = true

examples/dog_app.rs

@@ -61,7 +61,7 @@ fn app(cx: Scope) -> Element {
 
 #[inline_props]
 fn Breed(cx: Scope, breed: String) -> Element {
-    #[derive(serde::Deserialize)]
+    #[derive(serde::Deserialize, Debug)]
     struct DogApi {
         message: String,
     }
@@ -72,6 +72,12 @@ fn Breed(cx: Scope, breed: String) -> Element {
         reqwest::get(endpoint).await.unwrap().json::<DogApi>().await
     });
 
+    let breed_name = use_state(&cx, || breed.clone());
+    if breed_name.get() != breed {
+        breed_name.set(breed.clone());
+        fut.restart();
+    }
+
     cx.render(match fut.value() {
         Some(Ok(resp)) => rsx! {
             button {

examples/link.rs

@@ -0,0 +1,28 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! (
+        div {
+            p {
+                a {
+                    href: "http://dioxuslabs.com/",
+                    "default link"
+                }
+            }
+            p {
+                a {
+                    href: "http://dioxuslabs.com/",
+                    prevent_default: "onclick",
+                    onclick: |_| {
+                        println!("Hello Dioxus");
+                    },
+                    "custom event link",
+                }
+            }
+        }
+    ))
+}

examples/optional_props.rs

@@ -1,3 +1,5 @@
+#![allow(non_snake_case)]
+
 //! Example: README.md showcase
 //!
 //! The example from the README.md.
@@ -14,6 +16,7 @@ fn app(cx: Scope) -> Element {
             a: "asd".to_string(),
             c: Some("asd".to_string()),
             d: "asd".to_string(),
+            e: "asd".to_string(),
         }
     })
 }
@@ -30,8 +33,19 @@ struct ButtonProps {
 
     #[props(default, strip_option)]
     d: Option<String>,
+
+    #[props(optional)]
+    e: Option<String>,
 }
 
 fn Button(cx: Scope<ButtonProps>) -> Element {
-    todo!()
+    cx.render(rsx! {
+        button {
+            "{cx.props.a}"
+            "{cx.props.b:?}"
+            "{cx.props.c:?}"
+            "{cx.props.d:?}"
+            "{cx.props.e:?}"
+        }
+    })
 }

examples/router.rs

@@ -2,6 +2,7 @@
 
 use dioxus::prelude::*;
 use dioxus::router::{Link, Route, Router};
+use serde::Deserialize;
 
 fn main() {
     dioxus::desktop::launch(app);
@@ -30,7 +31,7 @@ fn app(cx: Scope) -> Element {
 }
 
 fn BlogPost(cx: Scope) -> Element {
-    let post = dioxus::router::use_route(&cx).last_segment()?;
+    let post = dioxus::router::use_route(&cx).last_segment();
 
     cx.render(rsx! {
         div {
@@ -40,9 +41,14 @@ fn BlogPost(cx: Scope) -> Element {
     })
 }
 
+#[derive(Deserialize)]
+struct Query {
+    bold: bool,
+}
+
 fn User(cx: Scope) -> Element {
-    let post = dioxus::router::use_route(&cx).last_segment()?;
-    let bold = dioxus::router::use_route(&cx).param::<bool>("bold");
+    let post = dioxus::router::use_route(&cx).last_segment();
+    let query = dioxus::router::use_route(&cx).query::<Query>();
 
     cx.render(rsx! {
         div {

notes/README/ZH_CN.md

@@ -0,0 +1,168 @@
+<div align="center">
+  <h1>🌗🚀 Dioxus</h1>
+  <p>
+    <strong>Frontend that scales.</strong>
+  </p>
+</div>
+
+<div align="center">
+  <!-- Crates version -->
+  <a href="https://crates.io/crates/dioxus">
+    <img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
+    alt="Crates.io version" />
+  </a>
+  <!-- Downloads -->
+  <a href="https://crates.io/crates/dioxus">
+    <img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
+      alt="Download" />
+  </a>
+  <!-- docs -->
+  <a href="https://docs.rs/dioxus">
+    <img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
+      alt="docs.rs docs" />
+  </a>
+  <!-- CI -->
+  <a href="https://github.com/jkelleyrtp/dioxus/actions">
+    <img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
+      alt="CI status" />
+  </a>
+</div>
+
+<div align="center">
+  <!--Awesome -->
+  <a href="https://github.com/dioxuslabs/awesome-dioxus">
+    <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
+  </a>
+  <!-- Discord -->
+  <a href="https://discord.gg/XgGxMSkvUM">
+    <img src="https://badgen.net/discord/members/XgGxMSkvUM" alt="Awesome Page" />
+  </a>
+</div>
+
+
+<div align="center">
+  <h3>
+    <a href="https://dioxuslabs.com"> 官网 </a>
+    <span> | </span>
+    <a href="https://dioxuslabs.com/guide"> 手册 </a>
+    <span> | </span>
+    <a href="https://github.com/DioxusLabs/example-projects"> 示例 </a>
+  </h3>
+</div>
+
+<div align="center">
+  <h4>
+    <a href="https://github.com/DioxusLabs/dioxus/blob/master/README.md"> English </a>
+    <span> | </span>
+    <a href="https://github.com/DioxusLabs/dioxus/blob/master/README.md"> 中文 </a>
+  </h3>
+</div>
+
+
+<br/>
+
+Dioxus 是一个可移植、高性能的框架，用于在 Rust 中构建跨平台的用户界面。
+
+```rust
+fn app(cx: Scope) -> Element {
+    let mut count = use_state(&cx, || 0);
+
+    cx.render(rsx!(
+        h1 { "High-Five counter: {count}" }
+        button { onclick: move |_| count += 1, "Up high!" }
+        button { onclick: move |_| count -= 1, "Down low!" }
+    ))
+}
+```
+
+Dioxus 可用于制作 网页程序、桌面应用、静态站点、移动端应用。
+
+Dioxus 为不同的平台都提供了很好的开发文档。
+
+如果你会使用 React ，那 Dioxus 对你来说会很简单。 
+
+### 项目特点:
+- 对桌面应用的原生支持。
+- 强大的状态管理工具。
+- 支持所有 HTML 标签，监听器和事件。
+- 超高的内存使用率，稳定的组件分配器。
+- 多通道异步调度器，超强的异步支持。
+- 更多信息请查阅： [版本发布文档](https://dioxuslabs.com/blog/introducing-dioxus/).
+
+### 示例
+
+本项目中的所有例子都是 `桌面应用` 程序，请使用 `cargo run --example XYZ` 运行这些例子。
+
+```
+cargo run --example EXAMPLE
+```
+
+## 进入学习
+
+<table style="width:100%" align="center">
+    <tr >
+        <th><a href="https://dioxuslabs.com/guide/">教程</a></th>
+        <th><a href="https://dioxuslabs.com/reference/web">网页端</a></th>
+        <th><a href="https://dioxuslabs.com/reference/desktop/">桌面端</a></th>
+        <th><a href="https://dioxuslabs.com/reference/ssr/">SSR</a></th>
+        <th><a href="https://dioxuslabs.com/reference/mobile/">移动端</a></th>
+        <th><a href="https://dioxuslabs.com/guide/concepts/managing_state.html">状态管理</a></th>
+    <tr>
+</table>
+
+
+## Dioxus 项目
+
+| 文件浏览器 (桌面应用)                                                                                                                                                        | WiFi 扫描器 (桌面应用)                                                                                                                                                                 | Todo管理 (所有平台)                                                                                                                                                 | 商城系统 (SSR/liveview)                                                                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [![File Explorer](https://github.com/DioxusLabs/example-projects/raw/master/file-explorer/image.png)](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) | [![Wifi Scanner Demo](https://github.com/DioxusLabs/example-projects/raw/master/wifi-scanner/demo_small.png)](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner) | [![TodoMVC example](https://github.com/DioxusLabs/example-projects/raw/master/todomvc/example.png)](https://github.com/DioxusLabs/example-projects/blob/master/todomvc) | [![E-commerce Example](https://github.com/DioxusLabs/example-projects/raw/master/ecommerce-site/demo.png)](https://github.com/DioxusLabs/example-projects/blob/master/ecommerce-site) |
+
+
+查看 [awesome-dioxus](https://github.com/DioxusLabs/awesome-dioxus) 查看更多有趣（~~NiuBi~~）的项目！
+
+## 为什么使用 Dioxus 和 Rust ？
+
+TypeScript 是一个不错的 JavaScript 拓展集，但它仍然算是 JavaScript。
+
+TS 代码运行效率不高，而且有大量的配置项。
+
+相比之下，Dioxus 使用 Rust 编写将大大的提高效能。
+
+使用 Rust 开发，我们能获得：
+
+- 静态类型支持。
+- 变量默认不变性。
+- 简单直观的模块系统。
+- 内部集成的文档系统。
+- 先进的模式匹配系统。
+- 简洁、高效、强大的迭代器。
+- 内置的 单元测试 / 集成测试。
+- 优秀的异常处理系统。
+- 强大且健全的标准库。
+- 灵活的 `宏` 系统。
+- 使用 `crates.io` 管理包。
+
+Dioxus 能为开发者提供的：
+
+- 安全使用数据结构。
+- 安全的错误处理结果。
+- 拥有原生移动端的性能。
+- 直接访问系统的IO层。
+
+Dioxus 使 Rust 应用程序的编写速度和 React 应用程序一样快，但提供了更多的健壮性，让团队能在更短的时间内做出强大功能。
+
+### 不建议使用 Dioxus 的情况？
+
+您不该在这些情况下使用 Dioxus ：
+
+- 您不喜欢类似 React 的开发风格。
+- 您需要一个 `no-std` 的渲染器。
+- 您希望应用运行在 `不支持 Wasm 或 asm.js` 的浏览器。
+- 您需要一个 `Send + Sync` UI 解决方案（目前不支持）。
+
+
+## 协议
+
+这个项目使用 [MIT 协议].
+
+[MIT 协议]: https://github.com/dioxuslabs/dioxus/blob/master/LICENSE

packages/core-macro/src/props/mod.rs

@@ -364,6 +364,14 @@ mod field_info {
                                 Some(syn::parse(quote!(Default::default()).into()).unwrap());
                             Ok(())
                         }
+
+                        "optional" => {
+                            self.default =
+                                Some(syn::parse(quote!(Default::default()).into()).unwrap());
+                            self.strip_option = true;
+                            Ok(())
+                        }
+
                         _ => {
                             macro_rules! handle_fields {
                                 ( $( $flag:expr, $field:ident, $already:expr; )* ) => {

packages/core/src/nodes.rs

@@ -351,31 +351,25 @@ type ExternalListenerCallback<'bump, T> = BumpBox<'bump, dyn FnMut(T) + 'bump>;
 /// }
 ///
 /// ```
+#[derive(Default)]
 pub struct EventHandler<'bump, T = ()> {
-    pub callback: &'bump RefCell<Option<ExternalListenerCallback<'bump, T>>>,
+    pub callback: RefCell<Option<ExternalListenerCallback<'bump, T>>>,
 }
 
 impl<T> EventHandler<'_, T> {
+    /// Call this event handler with the appropriate event type
     pub fn call(&self, event: T) {
         if let Some(callback) = self.callback.borrow_mut().as_mut() {
             callback(event);
         }
     }
 
+    /// Forcibly drop the internal handler callback, releasing memory
     pub fn release(&self) {
         self.callback.replace(None);
     }
 }
 
-impl<T> Copy for EventHandler<'_, T> {}
-impl<T> Clone for EventHandler<'_, T> {
-    fn clone(&self) -> Self {
-        Self {
-            callback: self.callback,
-        }
-    }
-}
-
 /// Virtual Components for custom user-defined components
 /// Only supports the functional syntax
 pub struct VComponent<'src> {
@@ -677,7 +671,7 @@ impl<'a> NodeFactory<'a> {
     pub fn event_handler<T>(self, f: impl FnMut(T) + 'a) -> EventHandler<'a, T> {
         let handler: &mut dyn FnMut(T) = self.bump.alloc(f);
         let caller = unsafe { BumpBox::from_raw(handler as *mut dyn FnMut(T)) };
-        let callback = self.bump.alloc(RefCell::new(Some(caller)));
+        let callback = RefCell::new(Some(caller));
         EventHandler { callback }
     }
 }

packages/core/src/scopes.rs

@@ -198,12 +198,9 @@ impl ScopeArena {
             // run the hooks (which hold an &mut Reference)
             // recursively call ensure_drop_safety on all children
             items.borrowed_props.drain(..).for_each(|comp| {
-                let scope_id = comp
-                    .scope
-                    .get()
-                    .expect("VComponents should be associated with a valid Scope");
-
-                self.ensure_drop_safety(scope_id);
+                if let Some(scope_id) = comp.scope.get() {
+                    self.ensure_drop_safety(scope_id);
+                }
 
                 drop(comp.props.take());
             });

packages/desktop/Cargo.toml

@@ -29,6 +29,7 @@ tokio = { version = "1.12.0", features = [
 ], optional = true, default-features = false }
 dioxus-core-macro = { path = "../core-macro", version ="^0.1.6"}
 dioxus-html = { path = "../html", features = ["serialize"], version ="^0.1.4"}
+webbrowser = "0.5.5"
 
 [features]
 default = ["tokio_runtime"]

packages/desktop/src/lib.rs

@@ -187,6 +187,20 @@ pub fn launch_with_props<P: 'static + Send>(
                                 is_ready.store(true, std::sync::atomic::Ordering::Relaxed);
                                 let _ = proxy.send_event(UserWindowEvent::Update);
                             }
+                            "browser_open" => {
+                                let data = req.params.unwrap();
+                                log::trace!("Open browser: {:?}", data);
+                                if let Some(arr) = data.as_array() {
+                                    if let Some(temp) = arr[0].as_object() {
+                                        if temp.contains_key("href") {
+                                            let url = temp.get("href").unwrap().as_str().unwrap();
+                                            if let Err(e) = webbrowser::open(url) {
+                                                log::error!("Open Browser error: {:?}", e);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
                             _ => {}
                         }
                         None

packages/router/src/components/link.rs

@@ -31,6 +31,9 @@ pub struct LinkProps<'a> {
     #[props(default, strip_option)]
     id: Option<&'a str>,
 
+    #[props(default, strip_option)]
+    title: Option<&'a str>,
+
     children: Element<'a>,
 
     #[props(default)]
@@ -38,17 +41,25 @@ pub struct LinkProps<'a> {
 }
 
 pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
-    let service = cx.consume_context::<RouterService>()?;
-    cx.render(rsx! {
-        a {
-            href: "{cx.props.to}",
-            class: format_args!("{}", cx.props.class.unwrap_or("")),
-            id: format_args!("{}", cx.props.id.unwrap_or("")),
-
-            prevent_default: "onclick",
-            onclick: move |_| service.push_route(cx.props.to),
-
-            &cx.props.children
-        }
-    })
+    log::debug!("render Link to {}", cx.props.to);
+    if let Some(service) = cx.consume_context::<RouterService>() {
+        return cx.render(rsx! {
+            a {
+                href: "{cx.props.to}",
+                class: format_args!("{}", cx.props.class.unwrap_or("")),
+                id: format_args!("{}", cx.props.id.unwrap_or("")),
+                title: format_args!("{}", cx.props.title.unwrap_or("")),
+
+                prevent_default: "onclick",
+                onclick: move |_| service.push_route(cx.props.to),
+
+                &cx.props.children
+            }
+        });
+    }
+    log::warn!(
+        "Attempted to create a Link to {} outside of a Router context",
+        cx.props.to,
+    );
+    None
 }

packages/router/src/components/route.rs

@@ -30,6 +30,7 @@ pub fn Route<'a>(cx: Scope<'a, RouteProps<'a>>) -> Element {
             Some(ctx) => ctx.total_route.to_string(),
             None => cx.props.to.to_string(),
         };
+        log::trace!("total route for {} is {}", cx.props.to, total_route);
 
         // provide our route context
         let route_context = cx.provide_context(RouteContext {

packages/router/src/components/router.rs

@@ -12,7 +12,7 @@ pub struct RouterProps<'a> {
     children: Element<'a>,
 
     #[props(default, strip_option)]
-    onchange: Option<&'a Fn(&'a str)>,
+    onchange: Option<&'a dyn Fn(&'a str)>,
 }
 
 #[allow(non_snake_case)]

packages/router/src/hooks/use_route.rs

@@ -1,30 +1,83 @@
 use dioxus_core::ScopeState;
+use gloo::history::{HistoryResult, Location};
+use serde::de::DeserializeOwned;
+use std::{rc::Rc, str::FromStr};
 
-pub struct UseRoute<'a> {
-    cur_route: String,
-    cx: &'a ScopeState,
+use crate::RouterService;
+
+/// This struct provides is a wrapper around the internal router
+/// implementation, with methods for getting information about the current
+/// route.
+pub struct UseRoute {
+    router: Rc<RouterService>,
 }
 
-impl<'a> UseRoute<'a> {
-    /// Parse the query part of the URL
-    pub fn param<T>(&self, param: &str) -> Option<&T> {
-        todo!()
+impl UseRoute {
+    /// This method simply calls the [`Location::query`] method.
+    pub fn query<T>(&self) -> HistoryResult<T>
+    where
+        T: DeserializeOwned,
+    {
+        self.current_location().query::<T>()
+    }
+
+    /// Returns the nth segment in the path. Paths that end with a slash have
+    /// the slash removed before determining the segments. If the path has
+    /// fewer segments than `n` then this method returns `None`.
+    pub fn nth_segment(&self, n: usize) -> Option<String> {
+        let mut segments = self.path_segments();
+        let len = segments.len();
+        if len - 1 < n {
+            return None;
+        }
+        Some(segments.remove(n))
+    }
+
+    /// Returns the last segment in the path. Paths that end with a slash have
+    /// the slash removed before determining the segments. The root path, `/`,
+    /// will return an empty string.
+    pub fn last_segment(&self) -> String {
+        let mut segments = self.path_segments();
+        segments.remove(segments.len() - 1)
     }
 
-    pub fn nth_segment(&self, n: usize) -> Option<&str> {
-        todo!()
+    /// Get the named parameter from the path, as defined in your router. The
+    /// value will be parsed into the type specified by `T` by calling
+    /// `value.parse::<T>()`. This method returns `None` if the named
+    /// parameter does not exist in the current path.
+    pub fn segment<T>(&self, name: &str) -> Option<Result<T, T::Err>>
+    where
+        T: FromStr,
+    {
+        self.router
+            .current_path_params()
+            .get(name)
+            .and_then(|v| Some(v.parse::<T>()))
     }
 
-    pub fn last_segment(&self) -> Option<&'a str> {
-        todo!()
+    /// Returns the [Location] for the current route.
+    pub fn current_location(&self) -> Location {
+        self.router.current_location()
     }
 
-    /// Parse the segments of the URL, using named parameters (defined in your router)
-    pub fn segment<T>(&self, name: &str) -> Option<&T> {
-        todo!()
+    fn path_segments(&self) -> Vec<String> {
+        let location = self.router.current_location();
+        let path = location.path();
+        if path == "/" {
+            return vec![String::new()];
+        }
+        let stripped = &location.path()[1..];
+        stripped.split('/').map(str::to_string).collect::<Vec<_>>()
     }
 }
 
-pub fn use_route<'a>(cx: &'a ScopeState) -> UseRoute<'a> {
-    todo!()
+/// This hook provides access to information about the current location in the
+/// context of a [`Router`]. If this function is called outside of a `Router`
+/// component it will panic.
+pub fn use_route(cx: &ScopeState) -> UseRoute {
+    let router = cx
+        .consume_context::<RouterService>()
+        .expect("Cannot call use_route outside the scope of a Router component")
+        .clone();
+    UseRoute { router }
 }

packages/router/src/platform/mod.rs

@@ -1,5 +1,3 @@
-use url::Url;
-
 pub trait RouterProvider {
     fn get_current_route(&self) -> String;
     fn subscribe_to_route_changes(&self, callback: Box<dyn Fn(String)>);

packages/router/src/service.rs

@@ -1,6 +1,6 @@
-use gloo::history::{BrowserHistory, History, HistoryListener};
+use gloo::history::{BrowserHistory, History, HistoryListener, Location};
 use std::{
-    cell::{Cell, RefCell},
+    cell::{Cell, Ref, RefCell},
     collections::HashMap,
     rc::Rc,
 };
@@ -10,10 +10,9 @@ use dioxus_core::ScopeId;
 pub struct RouterService {
     pub(crate) regen_route: Rc<dyn Fn(ScopeId)>,
     history: Rc<RefCell<BrowserHistory>>,
-    registerd_routes: RefCell<RouteSlot>,
     slots: Rc<RefCell<Vec<(ScopeId, String)>>>,
-    root_found: Rc<Cell<bool>>,
-    cur_root: RefCell<String>,
+    root_found: Rc<Cell<Option<ScopeId>>>,
+    cur_path_params: Rc<RefCell<HashMap<String, String>>>,
     listener: HistoryListener,
 }
 
@@ -40,48 +39,54 @@ impl RouterService {
 
         let _slots = slots.clone();
 
-        let root_found = Rc::new(Cell::new(false));
+        let root_found = Rc::new(Cell::new(None));
         let regen = regen_route.clone();
         let _root_found = root_found.clone();
         let listener = history.listen(move || {
-            _root_found.set(false);
+            _root_found.set(None);
             // checking if the route is valid is cheap, so we do it
-            for (slot, _) in _slots.borrow_mut().iter().rev() {
-                log::trace!("regenerating slot {:?}", slot);
+            for (slot, root) in _slots.borrow_mut().iter().rev() {
+                log::trace!("regenerating slot {:?} for root '{}'", slot, root);
                 regen(*slot);
             }
         });
 
         Self {
-            registerd_routes: RefCell::new(RouteSlot::Routes {
-                partial: String::from("/"),
-                total: String::from("/"),
-                rest: Vec::new(),
-            }),
             root_found,
             history: Rc::new(RefCell::new(history)),
             regen_route,
             slots,
-            cur_root: RefCell::new(path.to_string()),
+            cur_path_params: Rc::new(RefCell::new(HashMap::new())),
             listener,
         }
     }
 
     pub fn push_route(&self, route: &str) {
+        log::trace!("Pushing route: {}", route);
         self.history.borrow_mut().push(route);
     }
 
     pub fn register_total_route(&self, route: String, scope: ScopeId, fallback: bool) {
-        self.slots.borrow_mut().push((scope, route));
+        let clean = clean_route(route);
+        log::trace!("Registered route '{}' with scope id {:?}", clean, scope);
+        self.slots.borrow_mut().push((scope, clean));
     }
 
     pub fn should_render(&self, scope: ScopeId) -> bool {
-        if self.root_found.get() {
+        log::trace!("Should render scope id {:?}?", scope);
+        if let Some(root_id) = self.root_found.get() {
+            log::trace!("  we already found a root with scope id {:?}", root_id);
+            if root_id == scope {
+                log::trace!("    yes - it's a match");
+                return true;
+            }
+            log::trace!("    no - it's not a match");
             return false;
         }
 
         let location = self.history.borrow().location();
         let path = location.path();
+        log::trace!("  current path is '{}'", path);
 
         let roots = self.slots.borrow();
 
@@ -89,15 +94,24 @@ impl RouterService {
 
         // fallback logic
         match root {
-            Some((_id, route)) => {
-                if route == path {
-                    self.root_found.set(true);
+            Some((id, route)) => {
+                log::trace!(
+                    "  matched given scope id {:?} with route root '{}'",
+                    scope,
+                    route,
+                );
+                if let Some(params) = route_matches_path(route, path) {
+                    log::trace!("    and it matches the current path '{}'", path);
+                    self.root_found.set(Some(*id));
+                    *self.cur_path_params.borrow_mut() = params;
                     true
                 } else {
                     if route == "" {
-                        self.root_found.set(true);
+                        log::trace!("    and the route is the root, so we will use that without a better match");
+                        self.root_found.set(Some(*id));
                         true
                     } else {
+                        log::trace!("    and the route '{}' is not the root nor does it match the current path", route);
                         false
                     }
                 }
@@ -105,6 +119,70 @@ impl RouterService {
             None => false,
         }
     }
+
+    pub fn current_location(&self) -> Location {
+        self.history.borrow().location().clone()
+    }
+
+    pub fn current_path_params(&self) -> Ref<HashMap<String, String>> {
+        self.cur_path_params.borrow()
+    }
+}
+
+fn clean_route(route: String) -> String {
+    if route.as_str() == "/" {
+        return route;
+    }
+    route.trim_end_matches('/').to_string()
+}
+
+fn clean_path(path: &str) -> &str {
+    if path == "/" {
+        return path;
+    }
+    path.trim_end_matches('/')
+}
+
+fn route_matches_path(route: &str, path: &str) -> Option<HashMap<String, String>> {
+    let route_pieces = route.split('/').collect::<Vec<_>>();
+    let path_pieces = clean_path(path).split('/').collect::<Vec<_>>();
+
+    log::trace!(
+        "  checking route pieces {:?} vs path pieces {:?}",
+        route_pieces,
+        path_pieces,
+    );
+
+    if route_pieces.len() != path_pieces.len() {
+        log::trace!("    the routes are different lengths");
+        return None;
+    }
+
+    let mut matches = HashMap::new();
+    for (i, r) in route_pieces.iter().enumerate() {
+        log::trace!("    checking route piece '{}' vs path", r);
+        // If this is a parameter then it matches as long as there's
+        // _any_thing in that spot in the path.
+        if r.starts_with(':') {
+            log::trace!(
+                "      route piece '{}' starts with a colon so it matches anything",
+                r,
+            );
+            let param = &r[1..];
+            matches.insert(param.to_string(), path_pieces[i].to_string());
+            continue;
+        }
+        log::trace!(
+            "      route piece '{}' must be an exact match for path piece '{}'",
+            r,
+            path_pieces[i],
+        );
+        if path_pieces[i] != *r {
+            return None;
+        }
+    }
+
+    Some(matches)
 }
 
 pub struct RouterCfg {

packages/web/src/bindings.rs

@@ -43,13 +43,7 @@ extern "C" {
     pub fn CreatePlaceholder(this: &Interpreter, root: u64);
 
     #[wasm_bindgen(method)]
-    pub fn NewEventListener(
-        this: &Interpreter,
-        name: &str,
-        scope: usize,
-        root: u64,
-        handler: &Function,
-    );
+    pub fn NewEventListener(this: &Interpreter, name: &str, root: u64, handler: &Function);
 
     #[wasm_bindgen(method)]
     pub fn RemoveEventListener(this: &Interpreter, root: u64, name: &str);

packages/web/src/dom.rs

@@ -21,7 +21,7 @@ pub struct WebsysDom {
 
     pub(crate) root: Element,
 
-    handler: Closure<dyn FnMut(&Event)>,
+    pub handler: Closure<dyn FnMut(&Event)>,
 }
 
 impl WebsysDom {
@@ -74,15 +74,12 @@ impl WebsysDom {
                 }
                 DomEdit::CreatePlaceholder { root } => self.interpreter.CreatePlaceholder(root),
                 DomEdit::NewEventListener {
-                    event_name,
-                    scope,
-                    root,
+                    event_name, root, ..
                 } => {
-                    //
                     let handler: &Function = self.handler.as_ref().unchecked_ref();
-                    self.interpreter
-                        .NewEventListener(event_name, scope.0, root, handler);
+                    self.interpreter.NewEventListener(event_name, root, handler);
                 }
+
                 DomEdit::RemoveEventListener { root, event } => {
                     self.interpreter.RemoveEventListener(root, event)
                 }
@@ -104,6 +101,7 @@ impl WebsysDom {
 pub struct DioxusWebsysEvent(web_sys::Event);
 
 // safety: currently the web is not multithreaded and our VirtualDom exists on the same thread
+#[allow(clippy::non_send_fields_in_send_ty)]
 unsafe impl Send for DioxusWebsysEvent {}
 unsafe impl Sync for DioxusWebsysEvent {}
 

packages/web/src/rehydrate.rs

@@ -121,6 +121,14 @@ impl WebsysDom {
                     self.rehydrate_single(nodes, place, dom, child, &mut last_node_was_text)?;
                 }
 
+                for listener in vel.listeners {
+                    self.interpreter.NewEventListener(
+                        listener.event,
+                        listener.mounted_node.get().unwrap().as_u64(),
+                        self.handler.as_ref().unchecked_ref(),
+                    );
+                }
+
                 place.pop();
                 nodes.pop();