akarras/leptos-broken-outlet.rs

## leptos-broken-outlet.rs
use crate::error_template::{AppError, ErrorTemplate};
use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[derive(Debug, Clone, Copy)]
struct GlobalResource(Resource<(), String>);

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();
    let global_resource = create_resource(|| {}, move |_| async move {
        "resources are great!".to_string()
    });
    provide_context(GlobalResource(global_resource));
    view! {
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/ibreakleptos.css"/>

        // sets the document title
        <Title text="Welcome to Leptos"/>

        // content for this welcome page
        <Router fallback=|| {
            let mut outside_errors = Errors::default();
            outside_errors.insert_with_default_key(AppError::NotFound);
            view! {
                <ErrorTemplate outside_errors/>
            }
            .into_view()
        }>
            <main>
                <AnimatedRoutes outro="route-out" intro="route-in" outro_back="route-out-back" intro_back="route-in-back">
                    <Route path="" view=|| view! { <HomePage/> }/>
                    <Route path="/someotherpage" view=|| view! { <SomeOtherPage/> }/>
                    <Route path="/animatedoutlet" view=OutletDemo>
                        <Route path="" view=move || view!{ "This is the page with no path" }/>
                        <Route path=":id" view=OutletChild />
                    </Route>
                </AnimatedRoutes>
            </main>
        </Router>
    }
}

/// Renders the home page of your application.
#[component]
fn HomePage() -> impl IntoView {
    // Creates a reactive value to update the button
    let (count, set_count) = create_signal(0);
    let on_click = move |_| set_count.update(|count| *count += 1);
    let resource = use_context::<GlobalResource>().unwrap();
    view! {
        <h1>"Welcome to Leptos!"</h1>
        <a href="/animatedoutlet">"animated outlet"</a>
        <button on:click=on_click>"Click Me: " {count}</button>
        <Suspense fallback=move || {
            "Loading"
        }>
        {move || resource.0.with(|value| {
            value.clone()
        })}
        </Suspense>
    }
}

#[component]
fn OutletDemo() -> impl IntoView {
    view! {
        <div >
            <A href="/">"home"</A>
            {(0..10).into_iter().map(|i| view!{<A href=format!("/animatedoutlet/{i}")>"Page "{i}</A>}).collect::<Vec<_>>()}
            <AnimatedOutlet outro="route-out" intro="route-in"/>
        </div>
    }
}

#[component]
fn OutletChild() -> impl IntoView {
    let params = use_params_map();
    view!{
        "hello i have some data "{move || params.get().get("id").cloned()}
    }
}

#[component]
fn SomeOtherPage() -> impl IntoView {
    let resource = use_context::<GlobalResource>().unwrap();
    view!{
        <Suspense fallback=move || {
            "Loading"
        }>
        {move || resource.0.with(|value| {
            value.clone()
        })}
        </Suspense>
    }
}

## main.scss
body {
	font-family: sans-serif;
	text-align: center;
}


:root {
	--page-transition-time: .1s;
}

.route-out-back {
	animation-name: fade-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  .route-in-back {
	animation-name: fade-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  .route-out-back>* {
	animation-name: slide-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  .route-in-back>* {
	animation-name: slide-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  .route-out {
	animation-name: fade-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  .route-in {
	animation-name: fade-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  .route-out>* {
	animation-name: slide-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  .route-in>* {
	animation-name: slide-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
  }

  @keyframes fade-out {
	0% {
	  transform: translateY(0px);
	  background-color: rgba(0, 0, 0, 0);
	}
	70% {
	  transform: translateY(-100px) scaleY(110%);
	  background-color: rgba(0, 0, 0, 1.0);
	}
	100% {
	  transform: translateY(-100px) scaleY(110%);
	  background-color: rgba(0, 0, 0, 1.0);
	}
  }

  @keyframes fade-in {
	0% {
	  transform: translateY(-100px) scaleY(110%);
	  background-color: rgba(0, 0, 0, 1.0);
	}
	75% {
	  transform: translateY(-100px) scaleY(110%);
	  background-color: rgba(0, 0, 0, 1.0);
	}
	100% {
	  transform: translateY(0px);
	  background-color: #00000000;
	}
  }

  @keyframes slide-in {
	0% {
	  transform: translate(0%, 30vh) scale(1, 0.5);
	  /* color: #ffffff; */
	}
	75% {
	  transform: translateX(0, 10vh) scale(1, 0.8)
	}
	99% {
	  /* color: #00000000; */
	  transform: translate(0, 0) scale(1.0, 1.0);
	}
  }

  @keyframes slide-out {
	0% {
	  /* color: #00000000; */
	  transform: translate(0%, 0) scale(1, 1);
	}
	30% {
	  transform: translate(0, 10vh) scale(1, 0.8);
	}
	100% {
	  /* color: #ffffff; */
	  transform: translate(0, 30vh) scale(1, 0.5);
	}
  }
	use crate::error_template::{AppError, ErrorTemplate};
	use leptos::*;
	use leptos_meta::*;
	use leptos_router::*;

	#[derive(Debug, Clone, Copy)]
	struct GlobalResource(Resource<(), String>);

	#[component]
	pub fn App() -> impl IntoView {
	// Provides context that manages stylesheets, titles, meta tags, etc.
	provide_meta_context();
	let global_resource = create_resource(\|\| {}, move \|_\| async move {
	"resources are great!".to_string()
	});
	provide_context(GlobalResource(global_resource));
	view! {
	// injects a stylesheet into the document <head>
	// id=leptos means cargo-leptos will hot-reload this stylesheet
	<Stylesheet id="leptos" href="/pkg/ibreakleptos.css"/>

	// sets the document title
	<Title text="Welcome to Leptos"/>

	// content for this welcome page
	<Router fallback=\|\| {
	let mut outside_errors = Errors::default();
	outside_errors.insert_with_default_key(AppError::NotFound);
	view! {
	<ErrorTemplate outside_errors/>
	}
	.into_view()
	}>
	<main>
	<AnimatedRoutes outro="route-out" intro="route-in" outro_back="route-out-back" intro_back="route-in-back">
	<Route path="" view=\|\| view! { <HomePage/> }/>
	<Route path="/someotherpage" view=\|\| view! { <SomeOtherPage/> }/>
	<Route path="/animatedoutlet" view=OutletDemo>
	<Route path="" view=move \|\| view!{ "This is the page with no path" }/>
	<Route path=":id" view=OutletChild />
	</Route>
	</AnimatedRoutes>
	</main>
	</Router>
	}
	}

	/// Renders the home page of your application.
	#[component]
	fn HomePage() -> impl IntoView {
	// Creates a reactive value to update the button
	let (count, set_count) = create_signal(0);
	let on_click = move \|_\| set_count.update(\|count\| *count += 1);
	let resource = use_context::<GlobalResource>().unwrap();
	view! {
	<h1>"Welcome to Leptos!"</h1>
	<a href="/animatedoutlet">"animated outlet"</a>
	<button on:click=on_click>"Click Me: " {count}</button>
	<Suspense fallback=move \|\| {
	"Loading"
	}>
	{move \|\| resource.0.with(\|value\| {
	value.clone()
	})}
	</Suspense>
	}
	}

	#[component]
	fn OutletDemo() -> impl IntoView {
	view! {
	<div >
	<A href="/">"home"</A>
	{(0..10).into_iter().map(\|i\| view!{<A href=format!("/animatedoutlet/{i}")>"Page "{i}</A>}).collect::<Vec<_>>()}
	<AnimatedOutlet outro="route-out" intro="route-in"/>
	</div>
	}
	}

	#[component]
	fn OutletChild() -> impl IntoView {
	let params = use_params_map();
	view!{
	"hello i have some data "{move \|\| params.get().get("id").cloned()}
	}
	}

	#[component]
	fn SomeOtherPage() -> impl IntoView {
	let resource = use_context::<GlobalResource>().unwrap();
	view!{
	<Suspense fallback=move \|\| {
	"Loading"
	}>
	{move \|\| resource.0.with(\|value\| {
	value.clone()
	})}
	</Suspense>
	}
	}
	body {
	font-family: sans-serif;
	text-align: center;
	}


	:root {
	--page-transition-time: .1s;
	}

	.route-out-back {
	animation-name: fade-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	.route-in-back {
	animation-name: fade-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	.route-out-back>* {
	animation-name: slide-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	.route-in-back>* {
	animation-name: slide-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	.route-out {
	animation-name: fade-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	.route-in {
	animation-name: fade-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	.route-out>* {
	animation-name: slide-out;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	.route-in>* {
	animation-name: slide-in;
	animation-duration: var(--page-transition-time);
	animation-iteration-count: 1;
	animation-timing-function: linear;
	}

	@keyframes fade-out {
	0% {
	transform: translateY(0px);
	background-color: rgba(0, 0, 0, 0);
	}
	70% {
	transform: translateY(-100px) scaleY(110%);
	background-color: rgba(0, 0, 0, 1.0);
	}
	100% {
	transform: translateY(-100px) scaleY(110%);
	background-color: rgba(0, 0, 0, 1.0);
	}
	}

	@keyframes fade-in {
	0% {
	transform: translateY(-100px) scaleY(110%);
	background-color: rgba(0, 0, 0, 1.0);
	}
	75% {
	transform: translateY(-100px) scaleY(110%);
	background-color: rgba(0, 0, 0, 1.0);
	}
	100% {
	transform: translateY(0px);
	background-color: #00000000;
	}
	}

	@keyframes slide-in {
	0% {
	transform: translate(0%, 30vh) scale(1, 0.5);
	/* color: #ffffff; */
	}
	75% {
	transform: translateX(0, 10vh) scale(1, 0.8)
	}
	99% {
	/* color: #00000000; */
	transform: translate(0, 0) scale(1.0, 1.0);
	}
	}

	@keyframes slide-out {
	0% {
	/* color: #00000000; */
	transform: translate(0%, 0) scale(1, 1);
	}
	30% {
	transform: translate(0, 10vh) scale(1, 0.8);
	}
	100% {
	/* color: #ffffff; */
	transform: translate(0, 30vh) scale(1, 0.5);
	}
	}