Make router work on web

This commit is contained in:
Jonathan Kelley 2024-01-19 16:36:40 -08:00
parent b0038bb24b
commit 85c7c22619
No known key found for this signature in database
GPG key ID: 1FBB50F7EB0A08BE
51 changed files with 110 additions and 98 deletions

6
Cargo.lock generated
View file

@ -2527,11 +2527,9 @@ name = "dioxus-examples"
version = "0.4.3"
dependencies = [
"dioxus",
"dioxus-desktop",
"dioxus-router",
"dioxus-signals",
"dioxus-ssr",
"futures-util",
"getrandom 0.2.12",
"http-range",
"manganis",
"rand 0.8.5",
@ -3826,8 +3824,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "190092ea657667030ac6a35e305e62fc4dd69fd98ac98631e5d3a2b1575a12b5"
dependencies = [
"cfg-if",
"js-sys",
"libc",
"wasi 0.11.0+wasi-snapshot-preview1",
"wasm-bindgen",
]
[[package]]

View file

@ -128,22 +128,25 @@ reqwest = { version = "0.11.9", features = ["json"], optional = true}
http-range = {version = "0.1.5", optional = true }
[dev-dependencies]
dioxus = { workspace = true, features = ["desktop"] }
dioxus-desktop = { workspace = true, features = ["transparent"] }
dioxus = { workspace = true, features = ["router"]}
dioxus-ssr = { workspace = true }
dioxus-router = { workspace = true }
dioxus-signals = { workspace = true }
futures-util = "0.3.21"
separator = "0.4.1"
serde = { version = "1.0.136", features = ["derive"] }
serde_json = "1.0.79"
rand = { version = "0.8.4", features = ["small_rng"] }
[target.'cfg(target_arch = "wasm32")'.dev-dependencies]
getrandom = { version = "0.2.12", features = ["js"] }
[target.'cfg(not(target_arch = "wasm32"))'.dev-dependencies]
tokio = { version = "1.16.1", features = ["full"] }
# To make most examples faster to compile, we split out assets and http-related stuff
# This trims off like 270 dependencies, leading to a significant speedup in compilation time
[features]
default = []
default = ["dioxus/desktop"]
web = ["dioxus/web"]
collect-assets = ["manganis"]
http = ["reqwest", "http-range"]

View file

@ -3,10 +3,10 @@ This example is a simple iOS-style calculator. This particular example can run a
This calculator version uses React-style state management. All state is held as individual use_states.
*/
use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
use dioxus::events::*;
use dioxus::html::input_data::keyboard_types::Key;
use dioxus::prelude::*;
use dioxus_desktop::{Config, LogicalSize, WindowBuilder};
fn main() {
LaunchBuilder::desktop()

View file

@ -1,5 +1,4 @@
use dioxus::prelude::*;
use dioxus_signals::use_signal;
fn main() {
launch_desktop(app);

View file

@ -21,7 +21,7 @@ fn app() -> Element {
let open_compose_window = move |_evt: MouseEvent| {
let tx = handle.tx();
dioxus_desktop::window().new_window(
dioxus::desktop::window().new_window(
VirtualDom::new_with_props(compose, Rc::new(move |s| tx.unbounded_send(s).unwrap())),
Default::default(),
);
@ -51,7 +51,7 @@ fn compose(send: Rc<dyn Fn(String)>) -> Element {
button {
onclick: move |_| {
send(user_input.cloned());
dioxus_desktop::window().close();
dioxus::desktop::window().close();
},
"Click to send"
}

View file

@ -1,13 +1,15 @@
//! Tiny CRM: A port of the Yew CRM example to Dioxus.
use dioxus::prelude::*;
use dioxus_desktop::{LogicalSize, WindowBuilder};
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
fn main() {
LaunchBuilder::new()
.with_cfg(desktop!(
dioxus_desktop::Config::default()
.with_window(WindowBuilder::new().with_inner_size(LogicalSize::new(800, 600)))
.with_cfg(desktop!(
{
use dioxus::desktop::{LogicalSize, WindowBuilder};
dioxus::desktop::Config::default()
.with_window(WindowBuilder::new().with_inner_size(LogicalSize::new(800, 600)))
}
))
.launch(|| {
rsx! {
@ -79,7 +81,7 @@ fn ClientAdd() -> Element {
});
// And then navigate back to the client list
dioxus_router::router().push(Route::ClientList {});
dioxus::router::router().push(Route::ClientList {});
};
rsx! {
@ -140,7 +142,7 @@ fn Settings() -> Element {
class: "pure-button pure-button-primary red",
onclick: move |_| {
CLIENTS.write().clear();
dioxus_router::router().push(Route::ClientList {});
dioxus::router::router().push(Route::ClientList {});
},
"Remove all Clients"
}

View file

@ -1,8 +1,8 @@
//! This example shows how to use a custom index.html and custom <HEAD> extensions
//! to add things like stylesheets, scripts, and third-party JS libraries.
use dioxus::desktop::Config;
use dioxus::prelude::*;
use dioxus_desktop::Config;
fn main() {
LaunchBuilder::desktop()

View file

@ -1,5 +1,5 @@
use dioxus::desktop::{use_asset_handler, wry::http::Response};
use dioxus::prelude::*;
use dioxus_desktop::{use_asset_handler, wry::http::Response};
fn main() {
launch_desktop(app);

View file

@ -8,8 +8,8 @@
//! It also uses `use_ref` to maintain a model, rather than `use_state`. That way,
//! we dont need to clutter our code with `read` commands.
use dioxus::desktop::{Config, WindowBuilder};
use dioxus::prelude::*;
use dioxus_desktop::{Config, WindowBuilder};
fn main() {
LaunchBuilder::desktop()

View file

@ -1,5 +1,5 @@
use dioxus::desktop::Config;
use dioxus::prelude::*;
use dioxus_desktop::Config;
fn main() {
LaunchBuilder::desktop()

View file

@ -1,6 +1,6 @@
use dioxus::desktop::{tao::dpi::LogicalSize, Config, WindowBuilder};
use dioxus::prelude::*;
use dioxus_desktop::{tao::dpi::LogicalSize, Config, WindowBuilder};
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
fn main() {
LaunchBuilder::desktop()

View file

@ -9,8 +9,8 @@
//! In this example, we pre-render the page to HTML and then pass it into the desktop configuration. This serves as a
//! proof-of-concept for the hydration feature, but you'll probably only want to use hydration for the web.
use dioxus::desktop::Config;
use dioxus::prelude::*;
use dioxus_desktop::Config;
fn main() {
LaunchBuilder::desktop()

View file

@ -1,5 +1,5 @@
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
fn main() {
launch_desktop(App);

View file

@ -1,6 +1,6 @@
use anyhow::Result;
use dioxus::desktop::Config;
use dioxus::prelude::*;
use dioxus_desktop::Config;
#[cfg(target_os = "android")]
use wry::android_binding;

View file

@ -10,7 +10,7 @@ fn app() -> Element {
button {
onclick: move |_| {
let dom = VirtualDom::new(popup);
dioxus_desktop::window().new_window(dom, Default::default());
dioxus::desktop::window().new_window(dom, Default::default());
},
"New Window"
}

View file

@ -14,7 +14,7 @@ pub(crate) mod views;
use oidc::{AuthRequestState, AuthTokenState};
use router::Route;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
use crate::{
constants::{DIOXUS_FRONT_AUTH_REQUEST, DIOXUS_FRONT_AUTH_TOKEN},

View file

@ -1,6 +1,6 @@
use crate::views::{header::AuthHeader, home::Home, login::Login, not_found::NotFound};
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
#[derive(Routable, Clone)]
pub enum Route {

View file

@ -9,7 +9,7 @@ use crate::{
FERMI_AUTH_REQUEST, FERMI_AUTH_TOKEN, FERMI_CLIENT,
};
use dioxus::prelude::*;
use dioxus_router::prelude::{Link, Outlet};
use dioxus::router::prelude::{Link, Outlet};
use fermi::*;
use openidconnect::{url::Url, OAuth2TokenResponse, TokenResponse};

View file

@ -5,7 +5,7 @@ use crate::{
DIOXUS_FRONT_URL, FERMI_AUTH_REQUEST, FERMI_AUTH_TOKEN, FERMI_CLIENT,
};
use dioxus::prelude::*;
use dioxus_router::prelude::{Link, NavigationTarget};
use dioxus::router::prelude::{Link, NavigationTarget};
use fermi::*;
use openidconnect::{OAuth2TokenResponse, TokenResponse};

View file

@ -1,5 +1,5 @@
use dioxus::desktop::{tao::dpi::PhysicalPosition, LogicalSize, WindowBuilder};
use dioxus::prelude::*;
use dioxus_desktop::{tao::dpi::PhysicalPosition, LogicalSize, WindowBuilder};
fn main() {
LaunchBuilder::desktop().with_cfg(make_config());
@ -17,7 +17,7 @@ fn app() -> Element {
width: "100%",
height: "10px",
background_color: "black",
onmousedown: move |_| dioxus_desktop::window().drag(),
onmousedown: move |_| dioxus::desktop::window().drag(),
}
"This is an overlay!"
@ -25,8 +25,8 @@ fn app() -> Element {
}
}
fn make_config() -> dioxus_desktop::Config {
dioxus_desktop::Config::default()
fn make_config() -> dioxus::desktop::Config {
dioxus::desktop::Config::default()
.with_window(make_window())
.with_custom_head(
r#"

View file

@ -17,12 +17,12 @@
//! the RefCell will panic and crash. You can use `try_get_mut` or `.modify` to avoid this problem, or just not hold two
//! RefMuts at the same time.
use dioxus::desktop::tao::dpi::LogicalSize;
use dioxus::desktop::{Config, WindowBuilder};
use dioxus::events::*;
use dioxus::html::input_data::keyboard_types::Key;
use dioxus::html::MouseEvent;
use dioxus::prelude::*;
use dioxus_desktop::tao::dpi::LogicalSize;
use dioxus_desktop::{Config, WindowBuilder};
fn main() {
let cfg = Config::new().with_window(

View file

@ -8,7 +8,7 @@
use std::fmt::Display;
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
#[derive(Routable, Clone)]
#[rustfmt::skip]
@ -40,7 +40,7 @@ impl Display for ManualBlogQuerySegments {
}
}
/// The query segment is anything that implements <https://docs.rs/dioxus-router/latest/dioxus_router/routable/trait.FromQuery.html>. You can implement that trait for a struct if you want to parse multiple query parameters.
/// The query segment is anything that implements <https://docs.rs/dioxus-router/latest/dioxus::router/routable/trait.FromQuery.html>. You can implement that trait for a struct if you want to parse multiple query parameters.
impl FromQuery for ManualBlogQuerySegments {
fn from_query(query: &str) -> Self {
let mut name = None;

View file

@ -1,5 +1,5 @@
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
fn main() {
launch_desktop(|| {

View file

@ -1,5 +1,5 @@
use dioxus::desktop::use_global_shortcut;
use dioxus::prelude::*;
use dioxus_desktop::use_global_shortcut;
fn main() {
launch_desktop(app);

View file

@ -1,7 +1,7 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
fn main() {
launch_desktop(|| {

View file

@ -1,6 +1,7 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
#[derive(Routable, Clone, PartialEq)]
enum Route {

View file

@ -1,5 +1,4 @@
use dioxus::prelude::*;
use dioxus_signals::use_signal;
use futures_util::{future, stream, Stream, StreamExt};
use std::time::Duration;

View file

@ -13,8 +13,8 @@
//! We can achieve the majority of suspense functionality by composing "suspenseful"
//! primitives in our own custom components.
use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
use dioxus::prelude::*;
use dioxus_desktop::{Config, LogicalSize, WindowBuilder};
fn main() {
LaunchBuilder::desktop()

View file

@ -1,7 +1,7 @@
use dioxus::desktop::wry::http;
use dioxus::desktop::wry::http::Response;
use dioxus::desktop::{use_asset_handler, AssetRequest};
use dioxus::prelude::*;
use dioxus_desktop::wry::http;
use dioxus_desktop::wry::http::Response;
use dioxus_desktop::{use_asset_handler, AssetRequest};
use http::{header::*, response::Builder as ResponseBuilder, status::StatusCode};
use std::{io::SeekFrom, path::PathBuf};
use tokio::io::AsyncReadExt;

View file

@ -1,5 +1,5 @@
use dioxus::desktop::{window, Config, WindowBuilder};
use dioxus::prelude::*;
use dioxus_desktop::{window, Config, WindowBuilder};
fn main() {
LaunchBuilder::desktop()

View file

@ -1,8 +1,8 @@
use dioxus::desktop::tao::event::Event as WryEvent;
use dioxus::desktop::tao::event::WindowEvent;
use dioxus::desktop::use_wry_event_handler;
use dioxus::desktop::{Config, WindowCloseBehaviour};
use dioxus::prelude::*;
use dioxus_desktop::tao::event::Event as WryEvent;
use dioxus_desktop::tao::event::WindowEvent;
use dioxus_desktop::use_wry_event_handler;
use dioxus_desktop::{Config, WindowCloseBehaviour};
fn main() {
LaunchBuilder::desktop()

View file

@ -14,7 +14,7 @@ fn app() -> Element {
oninput: move |e| {
if let Ok(new_zoom) = e.value().parse::<f64>() {
level.set(new_zoom);
dioxus_desktop::window().webview.zoom(new_zoom);
dioxus::desktop::window().webview.zoom(new_zoom);
}
}
}

View file

@ -11,11 +11,11 @@ pub fn server_only(input: TokenStream) -> TokenStream {
if cfg!(any(feature = "ssr", feature = "liveview")) {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()
@ -26,11 +26,11 @@ pub fn client(input: TokenStream) -> TokenStream {
if cfg!(any(feature = "desktop", feature = "web", feature = "tui")) {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()
@ -41,11 +41,11 @@ pub fn web(input: TokenStream) -> TokenStream {
if cfg!(feature = "web") {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()
@ -56,11 +56,11 @@ pub fn desktop(input: TokenStream) -> TokenStream {
if cfg!(feature = "desktop") {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()
@ -71,11 +71,11 @@ pub fn fullstack(input: TokenStream) -> TokenStream {
if cfg!(feature = "web") {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()
@ -86,11 +86,11 @@ pub fn ssr(input: TokenStream) -> TokenStream {
if cfg!(feature = "ssr") {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()
@ -101,11 +101,11 @@ pub fn liveview(input: TokenStream) -> TokenStream {
if cfg!(feature = "liveview") {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()
@ -116,11 +116,11 @@ pub fn tui(input: TokenStream) -> TokenStream {
if cfg!(feature = "tui") {
let input = TokenStream2::from(input);
quote! {
Some(#input)
#input
}
} else {
quote! {
None
()
}
}
.into()

View file

@ -24,5 +24,5 @@ fn app() -> Element {
}
fn main() {
dioxus_desktop::launch::launch(app, Default::default(), Default::default());
dioxus::desktop::launch::launch(app, Default::default(), Default::default());
}

View file

@ -8,10 +8,11 @@ use dioxus_core::AnyProps;
use dioxus_core::VProps;
/// A builder for a fullstack app.
pub struct LaunchBuilder<Cfg = (), ContextFn: ?Sized = ValidContext> {
pub struct LaunchBuilder<Cfg: 'static = (), ContextFn: ?Sized = ValidContext> {
launch_fn: LaunchFn<Cfg, ContextFn>,
contexts: Vec<Box<ContextFn>>,
platform_config: Option<Cfg>,
platform_config: Option<Box<dyn Any>>,
}
pub type LaunchFn<Cfg, Context> = fn(fn() -> Element, Vec<Box<Context>>, Cfg);
@ -122,18 +123,22 @@ impl<Cfg> LaunchBuilder<Cfg, SendContext> {
}
}
impl<Cfg: Default, ContextFn: ?Sized> LaunchBuilder<Cfg, ContextFn> {
impl<Cfg: Default + 'static, ContextFn: ?Sized> LaunchBuilder<Cfg, ContextFn> {
/// Provide a platform-specific config to the builder.
pub fn with_cfg(mut self, config: impl Into<Option<Cfg>>) -> Self {
pub fn with_cfg<CG: 'static>(mut self, config: impl Into<Option<CG>>) -> Self {
if let Some(config) = config.into() {
self.platform_config = Some(config);
self.platform_config = Some(Box::new(config));
}
self
}
/// Launch your application.
pub fn launch(self, app: fn() -> Element) {
(self.launch_fn)(app, self.contexts, self.platform_config.unwrap_or_default())
let cfg: Box<Cfg> = self
.platform_config
.and_then(|c| c.downcast().ok())
.unwrap_or_default();
(self.launch_fn)(app, self.contexts, *cfg)
}
}

View file

@ -60,6 +60,9 @@ pub mod prelude {
#[cfg(feature = "fullstack")]
pub use dioxus_fullstack::prelude::*;
#[cfg(feature = "router")]
pub use dioxus_router;
}
#[cfg(feature = "web")]

View file

@ -73,6 +73,6 @@ desktop = ["dioxus-desktop"]
warp = ["dep:warp", "ssr"]
axum = ["dep:axum", "tower-http", "ssr"]
salvo = ["dep:salvo", "ssr", "http-body-util"]
ssr = ["server_fn/ssr", "dioxus_server_macro/ssr", "tokio", "tokio-util", "tokio-stream", "dioxus-ssr", "tower", "hyper", "http", "tower-layer", "anymap", "tracing-futures", "pin-project", "thiserror"]
ssr = ["server_fn/ssr", "dioxus_server_macro/ssr", "tokio", "tokio-util", "tokio-stream", "dioxus-ssr", "dioxus-ssr/incremental", "tower", "hyper", "http", "tower-layer", "anymap", "tracing-futures", "pin-project", "thiserror"]
default-tls = ["server_fn/default-tls"]
rustls = ["server_fn/rustls"]

View file

@ -9,5 +9,5 @@ use dioxus_fullstack::prelude::server_fn::set_server_url;
fn main() {
// Set the url of the server where server functions are hosted.
set_server_url("http://127.0.0.1:8080");
dioxus_desktop::launch(app)
dioxus::desktop::launch(app)
}

View file

@ -5,8 +5,8 @@
//! ```
use dioxus::prelude::*;
use dioxus::router::prelude::*;
use dioxus_fullstack::prelude::*;
use dioxus_router::prelude::*;
fn main() {
let config = LaunchBuilder::fullstack();

View file

@ -7,8 +7,8 @@
#![allow(unused)]
use dioxus::prelude::*;
use dioxus::router::prelude::*;
use dioxus_fullstack::{launch, prelude::*};
use dioxus_router::prelude::*;
use serde::{Deserialize, Serialize};
// Generate all routes and output them to the docs path

View file

@ -587,8 +587,8 @@ impl RouteEnum {
}
quote! {
impl ::dioxus_router::routable::Routable for #name where Self: Clone {
const SITE_MAP: &'static [::dioxus_router::routable::SiteMapSegment] = &[
impl dioxus_router::routable::Routable for #name where Self: Clone {
const SITE_MAP: &'static [dioxus_router::routable::SiteMapSegment] = &[
#(#site_map,)*
];
@ -605,14 +605,14 @@ impl RouteEnum {
fn component_impl(&self) -> TokenStream2 {
let name = &self.name;
let props = quote! { ::std::rc::Rc<::std::cell::Cell<::dioxus_router::prelude::RouterConfig<#name>>> };
let props = quote! { ::std::rc::Rc<::std::cell::Cell<dioxus_router::prelude::RouterConfig<#name>>> };
quote! {
impl dioxus_core::ComponentFunction<#props> for #name {
fn rebuild(&self, props: #props) -> dioxus_core::Element {
let initial_route = self.clone();
rsx! {
::dioxus_router::prelude::Router::<#name> {
dioxus_router::prelude::Router::<#name> {
config: move || props.take().initial_route(initial_route)
}
}

View file

@ -1,5 +1,5 @@
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
use std::str::FromStr;
#[cfg(feature = "liveview")]

View file

@ -1,7 +1,7 @@
use std::time::Duration;
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use dioxus::router::prelude::*;
use dioxus_ssr::incremental::{DefaultRenderer, IncrementalRendererConfig};
@ -29,7 +29,7 @@ async fn main() {
);
// This function is available if you enable the ssr feature
// on the dioxus_router crate.
// on the dioxus::router crate.
pre_cache_static_routes::<Route, _>(
&mut renderer,
&DefaultRenderer {

View file

@ -51,7 +51,7 @@ macro_rules! default_history {
{
// If we are on wasm32 and the web feature is enabled, use the web history.
#[cfg(all(target_arch = "wasm32", feature = "web"))]
return Box::<AnyHistoryProviderImplWrapper::<WebHistory::<R>>>::default();
return Box::new(AnyHistoryProviderImplWrapper::new(WebHistory::<R>::default()));
// If we are using dioxus fullstack and the ssr feature is enabled, use the memory history with the initial path set to the current path in fullstack
#[cfg(all(feature = "fullstack", feature = "ssr"))]
return dioxus_router::prelude::MemoryHistory::with_initial_path(

View file

@ -4,7 +4,7 @@ use dioxus::prelude::*;
use dioxus_signals::Signal;
fn main() {
// dioxus_desktop::launch(app);
// dioxus::desktop::launch(app);
}
// Because signal is never read in this component, this component will not rerun when the signal changes

View file

@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {
// dioxus_desktop::launch(app);
// dioxus::desktop::launch(app);
}
fn app() -> Element {

View file

@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {
// dioxus_desktop::launch(app);
// dioxus::desktop::launch(app);
}
#[derive(Clone, Copy)]

View file

@ -2,7 +2,7 @@ use dioxus::prelude::*;
use dioxus_signals::*;
fn main() {
// dioxus_desktop::launch(App);
// dioxus::desktop::launch(App);
}
#[component]

View file

@ -2,7 +2,7 @@ use dioxus::prelude::*;
use dioxus_signals::*;
fn main() {
// dioxus_desktop::launch(App);
// dioxus::desktop::launch(App);
}
#[component]

View file

@ -4,7 +4,7 @@ use dioxus::prelude::*;
use dioxus_signals::Signal;
fn main() {
// dioxus_desktop::launch(app);
// dioxus::desktop::launch(app);
}
#[derive(Clone, Copy, Default)]

View file

@ -33,5 +33,5 @@ fs_extra = "1.2.0"
dioxus-signals = { workspace = true }
[features]
default = ["incremental"]
default = []
incremental = ["dep:tokio"]