From 6aeea9b79081a2a711d8eee7e6edd299caf379ef Mon Sep 17 00:00:00 2001
From: Jonathan Kelley <jkelleyrtp@gmail.com>
Date: Wed, 20 Jan 2021 17:48:58 -0500
Subject: [PATCH] Feat: add router

---
 Cargo.toml                 |  2 ++
 README.md                  |  3 ++-
 packages/core/src/lib.rs   |  2 +-
 packages/dioxus/src/lib.rs | 41 ++++++++++++++++++++++++++++++++++
 packages/router/Cargo.toml |  9 ++++++++
 packages/router/README.md  | 45 ++++++++++++++++++++++++++++++++++++++
 packages/router/src/lib.rs |  7 ++++++
 7 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 packages/router/Cargo.toml
 create mode 100644 packages/router/README.md
 create mode 100644 packages/router/src/lib.rs

diff --git a/Cargo.toml b/Cargo.toml
index 749472725..7aa77ea52 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -7,6 +7,8 @@ members = [
     "packages/recoil",
     "packages/redux",
     "packages/core-macro",
+    "packages/router",
+    # "packages/macro",
     # TODO @Jon, share the validation code
     # "packages/web",
     "packages/cli",
diff --git a/README.md b/README.md
index aa1e9369f..6e5b34b1c 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,8 @@ Dioxus Core supports:
 - [ ] State management integrations
 
 On top of these, we have several projects you can find in the `packages` folder.
-- [x] `Diopack`: Testing, development, and packaging tools for Dioxus apps
+- [x] `dioxuscli`: Testing, development, and packaging tools for Dioxus apps
+- [ ] `dioxus-router`: A hook-based router implementation for Dioxus web apps
 - [ ] `Dioxus-vscode`: Syntax highlighting, code formatting, and hints for Dioxus html! blocks
 - [ ] `Redux-rs`: Redux-style global state management
 - [ ] `Recoil-rs`: Recoil-style global state management
diff --git a/packages/core/src/lib.rs b/packages/core/src/lib.rs
index 0304a80a8..3d7bca957 100644
--- a/packages/core/src/lib.rs
+++ b/packages/core/src/lib.rs
@@ -149,7 +149,7 @@ pub mod virtual_dom {
     /// }
     /// ```
     pub struct Context<'source, T> {
-        _props: std::marker::PhantomData<&'source T>,
+        pub props: &'source T,
     }
 
     pub trait Properties {}
diff --git a/packages/dioxus/src/lib.rs b/packages/dioxus/src/lib.rs
index 89297af93..bf350b5ce 100644
--- a/packages/dioxus/src/lib.rs
+++ b/packages/dioxus/src/lib.rs
@@ -2,10 +2,21 @@ pub mod prelude {
     pub use dioxus_core::prelude::*;
 }
 
+use dioxus_core::prelude::FC;
+
 // Re-export core completely
 pub use dioxus_core as core;
 
 struct App {}
+impl App {
+    fn at(&mut self, pat: &str) -> Route {
+        todo!()
+    }
+
+    // start the app in a new thread
+    // pass updates to it via state manager?
+    fn start(self) {}
+}
 
 fn new() -> App {
     todo!()
@@ -14,3 +25,33 @@ fn new() -> App {
 struct Router {}
 
 struct Route {}
+
+struct RouteInfo {}
+
+impl RouteInfo {
+    fn query<T>(&self) -> T {
+        todo!()
+    }
+}
+
+impl Route {
+    fn serve(&self, app: FC<RouteInfo>) {}
+}
+
+#[cfg(test)]
+mod test {
+    use super::*;
+    use crate::prelude::*;
+
+    #[test]
+    fn app_example() {
+        let mut app = crate::new();
+
+        app.at("/").serve(|ctx| {
+            let parsed: u32 = ctx.props.query();
+            html! { <div>"hello " </div> }
+        });
+
+        app.start();
+    }
+}
diff --git a/packages/router/Cargo.toml b/packages/router/Cargo.toml
new file mode 100644
index 000000000..5e8480a60
--- /dev/null
+++ b/packages/router/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "dioxus-router"
+version = "0.0.0"
+authors = ["Jonathan Kelley <jkelleyrtp@gmail.com>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
\ No newline at end of file
diff --git a/packages/router/README.md b/packages/router/README.md
new file mode 100644
index 000000000..3635c9e71
--- /dev/null
+++ b/packages/router/README.md
@@ -0,0 +1,45 @@
+# Router hook for Dioxus apps
+
+Dioxus-router provides a use_router hook that returns a different value depending on the route. 
+The router is generic over any value, however it makes sense to return a different set of VNodes 
+and feed them into the App's return VNodes.
+
+Using the router should feel similar to tide's routing framework where an "address" book is assembled at the head.
+
+Here's an example of how to use the router hook:
+
+```rust
+static App: FC<()> = |ctx| {
+
+    // Route returns the associated VNodes 
+    // This hook re-fires when the route changes
+    let route = use_router(ctx, |cfg| {
+        cfg.at("/").serve(|ctx| {
+            html!{ <LandingPage /> }
+        });
+        
+        cfg.at("/shoes/:id").serve(|ctx| {
+            let id: Uuid = ctx.props.parse().unwrap();
+            html!{ <ShoesPage id=id /> }
+        });
+
+        cfg.at("/pants/:id").serve(|ctx| {
+            let id: Uuid = ctx.props.parse().unwrap();
+            html!{ <PantsPage id=id /> }
+        });
+    });
+
+    html! {
+        <PanicBoundary model={|_| html!{<div>"Uh oh!"</div>}}>
+            <StateManager>
+                <ThemeSystem>
+                    <Header />
+                    {route}
+                </ThemeSystem>
+            </StateManager>
+        </PanicBoundary >
+    }
+};
+```
+
+Currently, the router is only supported in a web environment, but we plan to add 1st-party support via the context API when new renderers are available.
diff --git a/packages/router/src/lib.rs b/packages/router/src/lib.rs
new file mode 100644
index 000000000..31e1bb209
--- /dev/null
+++ b/packages/router/src/lib.rs
@@ -0,0 +1,7 @@
+#[cfg(test)]
+mod tests {
+    #[test]
+    fn it_works() {
+        assert_eq!(2 + 2, 4);
+    }
+}