Rendering islands from Routes and best way to load data with islands feature enabled #1960
Replies: 3 comments 1 reply
-
Taking this piece by piece: Using Most of the Passing context between siblings that are both islands This is kind of interesting. Context passes parent to child, but the "parents" in this case are not actually components -- rather they're the reactive ownership tree. So I guess you can pass context between siblings, because providing context in I'm not sure why Data fetching
You should still just do that. The point about reduced boilerplate was that you can safely run server-only code in non-island But the same mental model of Suspense/Transition/Await still works identically in islands mode, so you don't need to change what you're already used to doing, and it should work just the same and be just as efficient. (Note also that HTML streaming with Suspense still works with islands and is still great.) I'm uncertain about directly supporting |
Beta Was this translation helpful? Give feedback.
-
@gbj Thank you for walking through this, that makes perfect sense.
I tested with a match statement to confirm. I thought that maybe initially on the frontend it would be #[island]
fn SomeComponent() -> impl IntoView {
// let app_state = expect_context::<AppState>();
// let app_state = use_context::<AppState>().unwrap();
let app_state = use_context::<AppState>();
match app_state {
Some(state) => {
log::warn!("STATE");
view! {<p>has state</p>}.into_view()
},
None => {
log::warn!("NO STATE");
view!{<p>no state</p>}.into_view()
}
}
} The only logs I see are for |
Beta Was this translation helpful? Give feedback.
-
I ran into the ie, #[component]
pub fn Works() -> impl IntoView {
view! {
<Player1>
<Controls src="https://stream.dinxperfm.nl/1".to_string()/>
</Player1>
}
}
#[component]
pub fn DoesNotWork() -> impl IntoView {
view! {
<Player2/>
<Controls src="https://stream.dinxperfm.nl/1".to_string()/>
}
}
#[island]
pub fn Player1(children: Children) -> impl IntoView {
let player_src: RwSignal<Option<String>> = RwSignal::new(None);
provide_context(player_src);
view! {
<audio src=player_src></audio>
{children()}
}
}
#[island]
pub fn Player2() -> impl IntoView {
let player_src: RwSignal<Option<String>> = RwSignal::new(None);
provide_context(player_src);
view! { <audio src=player_src></audio> }
}
#[island]
pub fn Controls(src: String) -> impl IntoView {
let player_src = expect_context::<RwSignal<Option<String>>>();
view! {
<button
on:click=move |_| {
player_src.set(Some(src.clone()));
}>
"Play!"
<button>
}
}
|
Beta Was this translation helpful? Give feedback.
-
I'm attempting to add islands functionality to my toy app, but have hit a couple of (hopefully simple) snags.
An island which renders a
<Outlet />
causes a warning and an error. The following code produces these logs:and
Its easy enough to resolve that by providing a closure to the Route's view prop instead:
However, now when I convert
SomeComponent
into an island and attempt toexpect_context
, a similar error as before occurs:But if I
use_context
instead and map theOption
, it works correctly:Is this expected behavior or am I going about islands in the wrong way?
My second question is around how data is loaded server-side in components. Before the islands feature was enabled I could use a resource to fetch data and wait for it with
<Await />
. That still works, but I noted here:So I was wondering, what is the recommended way to go about loading async data inside a component where currently I would have something like
Beta Was this translation helpful? Give feedback.
All reactions