Jonathan Kelley
bdeedc13eb
* feat: wasm-split base implementation * kinda sorta works with the cli * okay great it actually works * fix: cache busting for chunks * cleaned up version * it works with the router * wip: migrate to a faster linear solution using id remapping * add a good harness * it works completely on the docsite * the super tight build works too * make parallelizable * works on the docsite but not the harness * light cleanups, fix for both harness and docsite * make codegen smaller by extract some shared functions to prevent monos * chunking works, but tbd on tuning heuristics * extract used module * wip: cleaning up module * wip: much better understanding of how imports work * fix the call graph * working again... * wip: thinking about ifuncs * ifunc approach works * yes the ifunc approach works!! * it all works completely even with chunks * small cleanups * comments * actually locate all of the symbols * clean up final implementation * clean up tomls, revert some mono changs * clean up, add some more comments / docs in places * hoist more packages * clean up impl a bit more * clean cli * move harness to playwright * update playwright * extract codgen * add lazy to components * Add docs to split loader * clippy * typos * clippy, don't generate splits if not on wasm * whoops, const * Typos and docs * enable optimizations in ci * add optimizations to ci * add wasm-split router feature * parallel playwright? * fix no case check * disable pre-compress... think that might be the issue * better logging, no default pre-compress, caching of shared symbols * Fix: compressing assets * fix non-interactive logging for serve * cache playwright even on failure, use the cli with optimizations * fix prebuild * fix playwright webserver
Dioxus Router
Website | Guides | API Docs | Chat
Overview
Dioxus Router is a first-party Router for all your Dioxus Apps. It provides an interface similar to React Router, but takes advantage of types for more expressiveness.
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use std::str::FromStr;
#[rustfmt::skip]
#[derive(Clone, Debug, PartialEq, Routable)]
enum Route {
#[nest("/blog")]
#[layout(Blog)]
#[route("/")]
BlogList {},
#[route("/:blog_id")]
BlogPost { blog_id: usize },
#[end_layout]
#[end_nest]
#[route("/")]
Index {},
}
#[component]
fn App() -> Element {
rsx! {
Router::<Route> { }
}
}
#[component]
fn Index() -> Element {
rsx! {
h1 { "Index" }
Link {
to: Route::BlogList {},
"Go to the blog"
}
}
}
#[component]
fn Blog() -> Element {
rsx! {
h1 { "Blog" }
Outlet::<Route> { }
}
}
#[component]
fn BlogList() -> Element {
rsx! {
h2 { "List of blog posts" }
Link {
to: Route::BlogPost { blog_id: 0 },
"Blog post 1"
}
Link {
to: Route::BlogPost { blog_id: 1 },
"Blog post 2"
}
}
}
#[component]
fn BlogPost(blog_id: usize) -> Element {
rsx! {
h2 { "Blog Post" }
}
}
You need to enable the right features for the platform you're targeting since these are not determined automatically!
Bundle Splitting
The Dioxus Router supports automatic bundle splitting along route variants. To enable this, you need to manually turn on the wasm-split feature explicitly on the dioxus-router crate:
[dependencies]
dioxus = { version = "*", features = ["router", "wasm-split"] }
dioxus-router = { version = "*", features = ["wasm-split"] }
Note that wasm-split must also be turned on in dioxus since the macro uses the re-exported wasm-split from the dioxus prelude.
Enabling splitting disconnects the call graph, meaning if you try to run your app with a normal dx serve, it won't work. When running with router splitting, you need to pass --experimental-wasm-split.
dx serve --experimental-wasm-split
In practice, we recommend passing dioxus-router?/wasm-split as a feature only when bundling:
dx bundle --features "dioxus-router?/wasm-split" --experimental-wasm-split
Note that the router will call .suspend() so you should add a SuspenseBoundary above the Outlet to prevent suspending the entire page.
Contributing
- Report issues on our issue tracker.
- Join the discord and ask questions!
License
This project is licensed under the MIT license.
Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you shall be licensed as MIT without any additional terms or conditions.