swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update doc examples

Browse Source
This commit is contained in:
Evan Almloff committed 2023-05-31 15:51:26 -05:00
1 parent 35befa1784
commit 09cabe4e8b
22 files changed
+474 -518
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/router/src/components/default_errors.rs
+9 -4
View File
@@ -1,11 +1,12 @@
use crate::{
components::GenericLink, hooks::use_route, navigation::NavigationTarget, routable::Routable,
components::GenericLink, hooks::use_generic_route, navigation::NavigationTarget,
routable::Routable,
};
use dioxus::prelude::*;
#[allow(non_snake_case)]
pub fn FailureExternalNavigation<R: Routable + Clone>(cx: Scope) -> Element {
let href = use_route::<R>(cx).expect(
let href = use_generic_route::<R>(cx).expect(
"`FailureExternalNavigation` can only be mounted by the router itself, \
since it is not exposed",
);
@@ -38,7 +39,9 @@ pub fn FailureNamedNavigation<R: Routable + Clone>(cx: Scope) -> Element {
"there is no guarantee."
}
GenericLink::<R> {
target: NavigationTarget::External("https://google.com".into()),
target: NavigationTarget::Internal(R::from_str("/").unwrap_or_else(|_| {
panic!("Failed to parse `/` as a Route")
})),
"Click here to try to fix the failure."
}
}
@@ -58,7 +61,9 @@ pub fn FailureRedirectionLimit<R: Routable + Clone>(cx: Scope) -> Element {
"there is no guarantee."
}
GenericLink::<R> {
target: NavigationTarget::External("https://google.com".into()),
target: NavigationTarget::Internal(R::from_str("/").unwrap_or_else(|_| {
panic!("Failed to parse `/` as a Route")
})),
"Click here to try to fix the failure."
}
}
packages/router/src/components/history_buttons.rs
+42 -32
View File
@@ -1,41 +1,44 @@
use dioxus::prelude::*;
use log::error;
use crate::{routable::Routable, utils::use_router_internal::use_router_internal};
use crate::{prelude::*, utils::use_router_internal::use_router_internal};
/// The properties for a [`GoBackButton`] or a [`GoForwardButton`].
#[derive(Debug, Props)]
pub struct HistoryButtonProps<'a> {
pub struct GenericHistoryButtonProps<'a> {
/// The children to render within the generated HTML button tag.
pub children: Element<'a>,
}
/// A button to go back through the navigation history. Similar to a browsers back button.
///
/// Only works as descendant of a component calling [`use_router`], otherwise it will be inactive.
/// Only works as descendant of a [`GenericRouter`] component, otherwise it will be inactive.
///
/// The button will disable itself if it is known that no prior history is available.
///
/// [`use_router`]: crate::hooks::use_router
///
/// # Panic
/// - When the [`GoBackButton`] is not nested within another component calling the [`use_router`]
/// - When the [`GoBackButton`] is not nested within a [`GenericRouter`] component
/// hook, but only in debug builds.
///
/// # Example
/// ```rust
/// # use dioxus::prelude::*;
/// # use dioxus_router::prelude::*;
/// fn App(cx: Scope) -> Element {
/// use_router(
/// &cx,
/// &|| RouterConfiguration {
/// synchronous: true, // asynchronicity not needed for doc test
/// ..Default::default()
/// },
/// &|| Segment::empty()
/// );
/// # use serde::{Deserialize, Serialize};
/// #[derive(Clone, Serialize, Deserialize, Routable)]
/// enum Route {
/// #[route("/")]
/// Index {},
/// }
///
/// fn App(cx: Scope) -> Element {
/// render! {
/// Router {}
/// }
/// }
///
/// #[inline_props]
/// fn Index(cx: Scope) -> Element {
/// render! {
/// GoBackButton {
/// "go back"
@@ -51,8 +54,10 @@ pub struct HistoryButtonProps<'a> {
/// # );
/// ```
#[allow(non_snake_case)]
pub fn GoBackButton<'a, R: Routable>(cx: Scope<'a, HistoryButtonProps<'a>>) -> Element {
let HistoryButtonProps { children } = cx.props;
pub fn GenericGoBackButton<'a, R: Routable>(
cx: Scope<'a, GenericHistoryButtonProps<'a>>,
) -> Element {
let GenericHistoryButtonProps { children } = cx.props;
// hook up to router
let router = match use_router_internal::<R>(cx) {
@@ -81,30 +86,33 @@ pub fn GoBackButton<'a, R: Routable>(cx: Scope<'a, HistoryButtonProps<'a>>) -> E
/// A button to go forward through the navigation history. Similar to a browsers forward button.
///
/// Only works as descendant of a component calling [`use_router`], otherwise it will be inactive.
/// Only works as descendant of a [`GenericRouter`] component, otherwise it will be inactive.
///
/// The button will disable itself if it is known that no later history is available.
///
/// [`use_router`]: crate::hooks::use_router
///
/// # Panic
/// - When the [`GoForwardButton`] is not nested within another component calling the [`use_router`]
/// - When the [`GoForwardButton`] is not nested within a [`GenericRouter`] component
/// hook, but only in debug builds.
///
/// # Example
/// ```rust
/// # use dioxus::prelude::*;
/// # use dioxus_router::prelude::*;
/// fn App(cx: Scope) -> Element {
/// use_router(
/// &cx,
/// &|| RouterConfiguration {
/// synchronous: true, // asynchronicity not needed for doc test
/// ..Default::default()
/// },
/// &|| Segment::empty()
/// );
/// # use serde::{Deserialize, Serialize};
/// #[derive(Clone, Serialize, Deserialize, Routable)]
/// enum Route {
/// #[route("/")]
/// Index {},
/// }
///
/// fn App(cx: Scope) -> Element {
/// render! {
/// Router {}
/// }
/// }
///
/// #[inline_props]
/// fn Index(cx: Scope) -> Element {
/// render! {
/// GoForwardButton {
/// "go forward"
@@ -120,8 +128,10 @@ pub fn GoBackButton<'a, R: Routable>(cx: Scope<'a, HistoryButtonProps<'a>>) -> E
/// # );
/// ```
#[allow(non_snake_case)]
pub fn GoForwardButton<'a, R: Routable>(cx: Scope<'a, HistoryButtonProps<'a>>) -> Element {
let HistoryButtonProps { children } = cx.props;
pub fn GenericGoForwardButton<'a, R: Routable>(
cx: Scope<'a, GenericHistoryButtonProps<'a>>,
) -> Element {
let GenericHistoryButtonProps { children } = cx.props;
// hook up to router
let router = match use_router_internal::<R>(cx) {
packages/router/src/components/link.rs
+32 -34
View File
@@ -4,7 +4,7 @@ use dioxus::prelude::*;
use log::error;
use crate::navigation::NavigationTarget;
use crate::routable::Routable;
use crate::prelude::*;
use crate::utils::use_router_internal::use_router_internal;
/// The properties for a [`Link`].
@@ -63,56 +63,54 @@ impl<R: Routable> Debug for GenericLinkProps<'_, R> {
/// A link to navigate to another route.
///
/// Only works as descendant of a component calling [`use_router`], otherwise it will be inactive.
/// Only works as descendant of a [`GenericRouter`] component, otherwise it will be inactive.
///
/// Unlike a regular HTML anchor, a [`Link`] allows the router to handle the navigation and doesn't
/// Unlike a regular HTML anchor, a [`GenericLink`] allows the router to handle the navigation and doesn't
/// cause the browser to load a new page.
///
/// However, in the background a [`Link`] still generates an anchor, which you can use for styling
/// However, in the background a [`GenericLink`] still generates an anchor, which you can use for styling
/// as normal.
///
/// [`use_router`]: crate::hooks::use_router
///
/// # External targets
/// When the [`Link`]s target is an [`External`] target, that is used as the `href` directly. This
/// means that a [`Link`] can always navigate to an [`External`] target.
///
/// This is different from a [`Navigator`], which can only navigate to external targets when the
/// routers [`HistoryProvider`] supports it.
///
/// [`External`]: dioxus_router_core::navigation::NavigationTarget::External
/// [`HistoryProvider`]: dioxus_router_core::history::HistoryProvider
/// [`Navigator`]: dioxus_router_core::Navigator
/// When the [`GenericLink`]s target is an [`NavigationTarget::External`] target, that is used as the `href` directly. This
/// means that a [`GenericLink`] can always navigate to an [`NavigationTarget::External`] target, even if the [`HistoryProvider`] does not support it.
///
/// # Panic
/// - When the [`Link`] is not nested within another component calling the [`use_router`] hook, but
/// - When the [`GenericLink`] is not nested within a [`GenericRouter`], but
/// only in debug builds.
///
/// # Example
/// ```rust
/// # use dioxus::prelude::*;
/// # use dioxus_router::prelude::*;
/// # use serde::{Deserialize, Serialize};
///
/// #[derive(Clone, Serialize, Deserialize, Routable)]
/// enum Route {
/// #[route("/")]
/// Index {},
/// }
///
/// fn App(cx: Scope) -> Element {
/// use_router(
/// &cx,
/// &|| RouterConfiguration {
/// synchronous: true, // asynchronicity not needed for doc test
/// ..Default::default()
/// },
/// &|| Segment::empty()
/// );
///
/// render! {
/// Link {
/// active_class: "active",
/// class: "link_class",
/// exact: true,
/// id: "link_id",
/// new_tab: true,
/// rel: "link_rel",
/// target: "/",
/// Router {}
/// }
/// }
///
/// "A fully configured link"
/// #[inline_props]
/// fn Index(cx: Scope) -> Element {
/// render! {
/// render! {
/// Link {
/// active_class: "active",
/// class: "link_class",
/// id: "link_id",
/// new_tab: true,
/// rel: "link_rel",
/// target: Route::Index {},
///
/// "A fully configured link"
/// }
/// }
/// }
/// }
packages/router/src/components/outlet.rs
+43 -16
View File
@@ -3,13 +3,11 @@ use dioxus::prelude::*;
/// An outlet for the current content.
///
/// Only works as descendant of a component calling [`use_router`], otherwise it will be inactive.
/// Only works as descendant of a [`GenericRouter`] component, otherwise it will be inactive.
///
/// The [`Outlet`] is aware of how many [`Outlet`]s it is nested within. It will render the content
/// of the active route that is __exactly as deep__.
///
/// [`use_router`]: crate::hooks::use_router
///
/// # Panic
/// - When the [`Outlet`] is not nested within another component calling the [`use_router`] hook,
/// but only in debug builds.
@@ -17,32 +15,61 @@ use dioxus::prelude::*;
/// # Example
/// ```rust
/// # use dioxus::prelude::*;
/// # use serde::{Deserialize, Serialize};
/// # use dioxus_router::prelude::*;
/// fn App(cx: Scope) -> Element {
/// use_router(
/// &cx,
/// &|| RouterConfiguration {
/// synchronous: true, // asynchronicity not needed for doc test
/// ..Default::default()
/// },
/// &|| Segment::content(comp(Content))
/// );
/// #[derive(Clone, Serialize, Deserialize, Routable)]
/// #[rustfmt::skip]
/// enum Route {
/// #[nest("/wrap")]
/// #[layout(Wrapper)] // Every layout component must have one Outlet
/// #[route("/")]
/// Child {},
/// #[end_layout]
/// #[end_nest]
/// #[route("/")]
/// Index {},
/// }
///
/// #[inline_props]
/// fn Index(cx: Scope) -> Element {
/// render! {
/// div {
/// "Index"
/// }
/// }
/// }
///
/// #[inline_props]
/// fn Wrapper(cx: Scope) -> Element {
/// render! {
/// h1 { "App" }
/// Outlet { } // The content component will be rendered here
/// Outlet {} // The content of child routes will be rendered here
/// }
/// }
///
/// fn Content(cx: Scope) -> Element {
/// #[inline_props]
/// fn Child(cx: Scope) -> Element {
/// render! {
/// p { "Content" }
/// p {
/// "Child"
/// }
/// }
/// }
///
/// # fn App(cx: Scope) -> Element {
/// # render! {
/// # Router {
/// # config: RouterConfiguration {
/// # history: Box::new(MemoryHistory::with_initial_path("/wrap").unwrap()),
/// # ..Default::default()
/// # }
/// # }
/// # }
/// # }
/// #
/// # let mut vdom = VirtualDom::new(App);
/// # let _ = vdom.rebuild();
/// # assert_eq!(dioxus_ssr::render(&vdom), "<h1>App</h1><p>Content</p>");
/// # assert_eq!(dioxus_ssr::render(&vdom), "<h1>App</h1><p>Child</p>");
/// ```
pub fn GenericOutlet<R: Routable + Clone>(cx: Scope) -> Element {
OutletContext::render::<R>(cx)
packages/router/src/components/router.rs
+7 -4
View File
@@ -1,5 +1,6 @@
use dioxus::prelude::*;
use log::error;
use serde::{de::DeserializeOwned, Serialize};
use std::{cell::RefCell, str::FromStr};
use crate::{
@@ -13,7 +14,7 @@ pub struct RouterCfg<R: Routable> {
config: RefCell<Option<RouterConfiguration<R>>>,
}
impl<R: Routable> Default for RouterCfg<R>
impl<R: Routable + Serialize + DeserializeOwned> Default for RouterCfg<R>
where
<R as FromStr>::Err: std::fmt::Display,
{
@@ -34,7 +35,7 @@ impl<R: Routable> From<RouterConfiguration<R>> for RouterCfg<R> {
/// The props for [`Router`].
#[derive(Props)]
pub struct GenericRouterProps<R: Routable>
pub struct GenericRouterProps<R: Routable + Serialize + DeserializeOwned>
where
<R as FromStr>::Err: std::fmt::Display,
{
@@ -42,7 +43,7 @@ where
config: RouterCfg<R>,
}
impl<R: Routable> PartialEq for GenericRouterProps<R>
impl<R: Routable + Serialize + DeserializeOwned> PartialEq for GenericRouterProps<R>
where
<R as FromStr>::Err: std::fmt::Display,
{
@@ -53,7 +54,9 @@ where
}
/// A component that renders the current route.
pub fn GenericRouter<R: Routable + Clone>(cx: Scope<GenericRouterProps<R>>) -> Element
pub fn GenericRouter<R: Routable + Clone + Serialize + DeserializeOwned>(
cx: Scope<GenericRouterProps<R>>,
) -> Element
where
<R as FromStr>::Err: std::fmt::Display,
{