-
|
leptos-rs/start-axum project... with islands from https://book.leptos.dev/islands.html src/app.rs use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
use leptos_router::{
components::{Route, Router, Routes, A},
StaticSegment,
};
pub fn shell(options: LeptosOptions) -> impl IntoView {
view! {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<AutoReload options=options.clone() />
<HydrationScripts options islands=true/>
<MetaTags/>
</head>
<body>
<App/>
</body>
</html>
}
}
#[component]
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context();
view! {
// injects a stylesheet into the document <head>
// id=leptos means cargo-leptos will hot-reload this stylesheet
<Stylesheet id="leptos" href="/pkg/islands.css"/>
// sets the document title
<Title text="Welcome to Leptos"/>
// content for this welcome page
<Router>
<main>
<Routes fallback=|| "Page not found.".into_view()>
<Route path=StaticSegment("") view=HomePage/>
<Route path=StaticSegment("about") view=AboutPage/>
</Routes>
</main>
</Router>
}
}
/// Renders the home page of your application.
#[island]
fn HomePage() -> impl IntoView {
// Creates a reactive value to update the button
let count = RwSignal::new(0);
let on_click = move |_| *count.write() += 1;
view! {
<h1>"Welcome to Leptos!"</h1>
<button on:click=on_click>"Click Me: " {count}</button>
<A href="/about">"About"</A>
}
}
#[island]
fn AboutPage() -> impl IntoView {
view! {
<h1>"About"</h1>
}
}src/lib.rs pub mod app;
#[cfg(feature = "hydrate")]
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
use crate::app::*;
console_error_panic_hook::set_once();
//leptos::mount::hydrate_body(App);
leptos::mount::hydrate_islands();
}cmd: on home page http://127.0.0.1:3000/ I got an error in web console: So I have a question, how I can use |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
You can't really, unfortunately; they depend on router APIs that are not available in the client in islands mode. Your example, for what it's worth, can be rewritten fairly easily to move the button into a separate island. This is what most of the technique of using islands consists of: figuring out the right way to layer/interleave islands and non-islands so that the islands are as small as possible. You almost never want whole pages to be islands: that really reduces the benefit. Of course if you literally need the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your reply! To be honest, I just didn’t really understand what “islands” are. At first, I thought these components were loaded on demand, as separate parts. (As you probably noticed from my other question, I’m looking for a way to do bundle splitting because my small Leptos app is already 3 megabytes.) After reading a bit more about it, I just realized that “islands” are mainly used to help reduce the bundle size, since only selected components end up in the bundle. It seems like this approach isn’t quite what I need, since even on the simpler pages, the entire bundle still gets loaded. :) |
Beta Was this translation helpful? Give feedback.
You can't really, unfortunately; they depend on router APIs that are not available in the client in islands mode.
Your example, for what it's worth, can be rewritten fairly easily to move the button into a separate island. This is what most of the technique of using islands consists of: figuring out the right way to layer/interleave islands and non-islands so that the islands are as small as possible. You almost never want whole pages to be islands: that really reduces the benefit.
Of course if you literally need the
<A>in an island, then it's just not workable. But you can replicate parts of how the<A>component works yourself, based on built-in browser APIs.