mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 14:44:12 +00:00
Feat: add router
This commit is contained in:
parent
9b41161628
commit
6aeea9b790
7 changed files with 107 additions and 2 deletions
|
@ -7,6 +7,8 @@ members = [
|
||||||
"packages/recoil",
|
"packages/recoil",
|
||||||
"packages/redux",
|
"packages/redux",
|
||||||
"packages/core-macro",
|
"packages/core-macro",
|
||||||
|
"packages/router",
|
||||||
|
# "packages/macro",
|
||||||
# TODO @Jon, share the validation code
|
# TODO @Jon, share the validation code
|
||||||
# "packages/web",
|
# "packages/web",
|
||||||
"packages/cli",
|
"packages/cli",
|
||||||
|
|
|
@ -21,7 +21,8 @@ Dioxus Core supports:
|
||||||
- [ ] State management integrations
|
- [ ] State management integrations
|
||||||
|
|
||||||
On top of these, we have several projects you can find in the `packages` folder.
|
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
|
- [ ] `Dioxus-vscode`: Syntax highlighting, code formatting, and hints for Dioxus html! blocks
|
||||||
- [ ] `Redux-rs`: Redux-style global state management
|
- [ ] `Redux-rs`: Redux-style global state management
|
||||||
- [ ] `Recoil-rs`: Recoil-style global state management
|
- [ ] `Recoil-rs`: Recoil-style global state management
|
||||||
|
|
|
@ -149,7 +149,7 @@ pub mod virtual_dom {
|
||||||
/// }
|
/// }
|
||||||
/// ```
|
/// ```
|
||||||
pub struct Context<'source, T> {
|
pub struct Context<'source, T> {
|
||||||
_props: std::marker::PhantomData<&'source T>,
|
pub props: &'source T,
|
||||||
}
|
}
|
||||||
|
|
||||||
pub trait Properties {}
|
pub trait Properties {}
|
||||||
|
|
|
@ -2,10 +2,21 @@ pub mod prelude {
|
||||||
pub use dioxus_core::prelude::*;
|
pub use dioxus_core::prelude::*;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
use dioxus_core::prelude::FC;
|
||||||
|
|
||||||
// Re-export core completely
|
// Re-export core completely
|
||||||
pub use dioxus_core as core;
|
pub use dioxus_core as core;
|
||||||
|
|
||||||
struct App {}
|
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 {
|
fn new() -> App {
|
||||||
todo!()
|
todo!()
|
||||||
|
@ -14,3 +25,33 @@ fn new() -> App {
|
||||||
struct Router {}
|
struct Router {}
|
||||||
|
|
||||||
struct Route {}
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
9
packages/router/Cargo.toml
Normal file
9
packages/router/Cargo.toml
Normal file
|
@ -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]
|
45
packages/router/README.md
Normal file
45
packages/router/README.md
Normal file
|
@ -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.
|
7
packages/router/src/lib.rs
Normal file
7
packages/router/src/lib.rs
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
#[cfg(test)]
|
||||||
|
mod tests {
|
||||||
|
#[test]
|
||||||
|
fn it_works() {
|
||||||
|
assert_eq!(2 + 2, 4);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue