Providing context to children

[syakupov]

I am not sure whether this is a bug or a feature. Anyway, I need to find a workaround for this.

Let's assume the following example:

use leptos::*;

#[component]
fn App(cx: Scope) -> impl IntoView {
    provide_context(cx, 10_usize);
    view! { cx,
        <List>
            <ListItem>"ten"</ListItem>
            <ListItem>"eleven"</ListItem>
            <ListItem>"twelve"</ListItem>
        </List>
    }
}

#[component]
fn List(cx: Scope, children: Children) -> impl IntoView {
    let context = use_context::<usize>(cx).unwrap();
    let children = children(cx)
        .nodes
        .into_iter()
        .enumerate()
        .map(|(i, child)| {
            let value = context + i;
            view! { cx, <ContextProvider context=value>{child}</ContextProvider> }
        })
        .collect_view(cx);
    view! { cx, <ul>{children}</ul> }
}

#[component]
fn ListItem(cx: Scope, children: Children) -> impl IntoView {
    let context = use_context::<usize>(cx).unwrap();
    view! { cx, <li>{children(cx)} " -> " {context}</li> }
}

#[component]
fn ContextProvider<T>(cx: Scope, context: T, children: Children) -> impl IntoView
where
    T: Clone + 'static,
{
    provide_context(cx, context);
    children(cx)
}

fn main() {
    mount_to_body(App);
}

Expected result:

• ten -> 10
• eleven -> 11
• twelve -> 12

Result:

• ten -> 10
• eleven -> 10
• twelve -> 10

Is there a way to override context within the List component? Why ListItem doesn't consider ContextProvider as a context parent?

[gbj]

If you add a couple logs, you'll see more about the order your components run in, which will help.

#[component]
fn ListItem(cx: Scope, children: Children) -> impl IntoView {
    let context = use_context::<usize>(cx).unwrap();
    log!("using context in {cx:?}");
    view! { cx, <li>{children(cx)} " -> " {context}</li> }
}

#[component]
fn ContextProvider<T>(cx: Scope, context: T, children: Children) -> impl IntoView
where
    T: Clone + Debug + 'static,
{
    log!("providing {context:?} on {cx:?}");
    provide_context(cx, context);
    children(cx)
}

yields

using context in Scope { runtime: RuntimeId, id: ScopeId(4v1) } [weird-7a64856119b98e60.js:353:17](http://127.0.0.1:8080/weird-7a64856119b98e60.js)
using context in Scope { runtime: RuntimeId, id: ScopeId(5v1) } [weird-7a64856119b98e60.js:353:17](http://127.0.0.1:8080/weird-7a64856119b98e60.js)
using context in Scope { runtime: RuntimeId, id: ScopeId(6v1) } [weird-7a64856119b98e60.js:353:17](http://127.0.0.1:8080/weird-7a64856119b98e60.js)
providing 10 on Scope { runtime: RuntimeId, id: ScopeId(7v1) } [weird-7a64856119b98e60.js:353:17](http://127.0.0.1:8080/weird-7a64856119b98e60.js)
providing 11 on Scope { runtime: RuntimeId, id: ScopeId(8v1) } [weird-7a64856119b98e60.js:353:17](http://127.0.0.1:8080/weird-7a64856119b98e60.js)
providing 12 on Scope { runtime: RuntimeId, id: ScopeId(9v1) }

This makes sense: you construct the children, after all, here, as children of the <List/> scope, before you've wrapped them in <ContextProvider/>

let children = children(cx)

then you project the already-created child node into the children of <ContextProvider/>

view! { cx, <ContextProvider context=value>{child}</ContextProvider> }

I guess a way to do this would be not to consume the context until you've provided it via the context provider. Here would be an example of how to achieve that without changing the API/how you're using it in <App/>

#[component]
fn List(cx: Scope, children: Children) -> impl IntoView {
    let context = use_context::<usize>(cx).unwrap();
    let children = children(cx)
        .nodes
        .into_iter()
        .enumerate()
        .map(|(i, child)| {
            let value = context + i;
            view! { cx, <ContextProvider context=value>
                <ListItemInner>{child}</ListItemInner>
            </ContextProvider> }
        })
        .collect_view(cx);
    view! { cx, <ul>{children}</ul> }
}

#[component]
fn ListItem(cx: Scope, children: Children) -> impl IntoView {
    children(cx)
}

#[component]
fn ListItemInner(cx: Scope, children: Children) -> impl IntoView {
    let context = use_context::<usize>(cx).unwrap();
    view! { cx, <li>{children(cx)} " -> " {context}</li> }
}

[syakupov]

Thanks a lot, @gbj, for such a detailed answer! I've logged cx.id indeed and noted that it is greater in ContextProvider than in ListItem.

The solution you've provided is good, but I can't find a way to use it in my task. Let me reveal some details about it.

I am trying to rewrite my Lerni slides framework from Yew to Leptos.

E.g., I have a Label component that is rendered within a Frame provided: https://github.com/noviga/lerni/blob/master/src/ng/label.rs

Label knows nothing about its parent; it just uses Frame provided by the context. For example Grid component just cuts its Frame into cells. Here is the Yew code: https://github.com/noviga/lerni/blob/master/src/widgets/grid.rs#L48-L52

The same thing doesn't work for Leptos-based Grid (you've explained why): https://github.com/noviga/lerni/blob/master/src/ng/grid.rs#L38-L41

How can I provide some property to the child if I don't know the type of child in advance? Children are Label, Button, or even Grid etc. Here is an example of using Grid: https://github.com/noviga/lerni/blob/master/examples/grid.rs (rendered: https://lerni.noviga.com/grid/).

Leptos alternative: https://github.com/noviga/lerni/blob/master/examples/ng_grid.rs
Doesn't work yet: https://lerni.noviga.com/ng_grid/

I really like Leptos and want to rewrite my framework to it, but I'm stumped by this problem and can't find a solution.

[gbj]

Ah, okay. So, let me take another try at this that doesn't cheat by introducing a new component, and might be closer to what you need.

For what it's worth: I think the core issue here is that without the blessing of a virtual DOM (and the curse of its overhead), and because components don't re-run when state changes, Leptos tends to construct things eagerly: in this case, children is lazy, but each individual child node is not, so as soon as you call children(cx), all the children are built.

So the model of wrapping components in context providers is never quite going to work exactly the same, because the control flow is just different enough between the two frameworks.

However, we can still do some fun and cool stuff with context to make this work. We just need to make sure the context is provided by <List/>, which is where the children are constructed. In the example below, I do this by replacing the iteration over the children with a provide_index and use_index that use interior mutability to get the correct result each time you call it.

Not having looked at Lerni in depth, I'm not sure how well this solves the context problem you need to solve. But to the extent that it solves the problem as originally formulated, without needing to introduce additional wrapper components, and supports multiple different types of child component (see the <Label/> I added this time), it may be useful!

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    provide_context(cx, 10_usize);
    view! { cx,
        <List>
            <ListItem>"ten"</ListItem>
            <ListItem>"eleven"</ListItem>
            <ListItem>"twelve"</ListItem>
            <Label>"thirteen"</Label>
        </List>
    }
}

fn provide_index(cx: Scope, initial: usize) {
    provide_context(cx, Rc::new(Cell::new(initial)));
}

fn use_index(cx: Scope) -> usize {
    let stored = expect_context::<Rc<Cell<usize>>>(cx);
    let current = stored.get();
    stored.set(current + 1);
    current
}

#[component]
fn List(cx: Scope, children: Children) -> impl IntoView {
    let context = use_context::<usize>(cx).unwrap();
    provide_index(cx, context);
    view! { cx, <ul>{children(cx)}</ul> }
}

#[component]
fn ListItem(cx: Scope, children: Children) -> impl IntoView {
    let index = use_index(cx);
    view! { cx, <li>"List Item " {children(cx)} " -> " {index}</li> }
}

#[component]
fn Label(cx: Scope, children: Children) -> impl IntoView {
    let index = use_index(cx);
    view! { cx, <li>"Label " {children(cx)} " -> " {index}</li> }
}

[syakupov]

Mutable context is a great idea! It will solve my problem, I guess. The only thing is that I need to change the context for each child in the List function. But I can do it by saving VecDeque in a context and filling it before constructing children.

Greg, you are a fantastic man! And Leptos is a fascinating project. Thanks a lot for your work and assistance!

[gbj]

You're very kind to say so... Enjoy!