How can the state be changed in a consumers-side component using @lit/context?

[ouweiya]

I'm trying to change the state in the consumer component, but no rendering occurs. What is the correct way to update values in @lit/context?

Lit Playground Demo Link

import {html, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {provide, consume, createContext} from '@lit/context';

export const myContext = createContext<number>(Symbol('my-context'));

@customElement('my-paren')
class MyParent extends LitElement {
    @provide({ context: myContext })
    @property({ type: Number })
    count = 1;

    render() {
        return html`
            <div>
                <h1>${this.count}</h1>
                <my-child></my-child>
            </div>
        `;
    }
}

@customElement('my-child')
class MyChild extends LitElement {
    @consume({ context: myContext, subscribe: true })
    count: number;

    incrementHandle = () => {
        this.count++;
        console.log(this.count);
    };

    render() {
        return html`
            <div class="">
                <h3>${this.count * 2}</h3>
                <button @click=${this.incrementHandle}>Increment</button>
            </div>
        `;
    }
}

I tried sharing the event function as a state value to other components, which renders successfully, but what is the best way to change the state of @lit/context?

Modified Demo Playground

export const myContext = createContext<number>(Symbol('my-context'));
export const myContextHandle = createContext<(s: string) => void>(Symbol('my-context-handle'));

@customElement('my-paren')
class MyParent extends LitElement {
    @provide({ context: myContext })
    @property({ type: Number })
    count = 1;

    @provide({ context: myContextHandle })
    incrementHandle = () => {
        this.count++;
        console.log(this.count);
    };

    render() {
        return html`
            <div>
                <h1>${this.count}</h1>
                <my-child></my-child>
            </div>
        `;
    }
}

@customElement('my-child')
class MyChild extends LitElement {
    @consume({ context: myContext, subscribe: true })
    count: number;

    @consume({ context: myContextHandle, subscribe: true })
    incrementHandle: (s: string) => void;

    render() {
        return html`
            <div class="">
                <h3>${this.count * 2}</h3>
                <button @click=${this.incrementHandle}>Increment</button>
            </div>
        `;
    }
}

I've tried changing the state through custom events, which can successfully update the value, but what approach is in line with the design of @lit/context?

Custom Events Playground

export const myContext = createContext<number>(Symbol('my-context'));

@customElement('my-paren')
class MyParent extends LitElement {
    @provide({ context: myContext })
    @property({ type: Number })
    count = 1;

    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('my-event', this.incrementHandle);
    }
  
    incrementHandle = () => {
        this.count++;
        console.log(this.count);
    };

    render() {
        return html`
            <div>
                <h1>${this.count}</h1>
                <my-child></my-child>
            </div>
        `;
    }
}

@customElement('my-child')
class MyChild extends LitElement {
    @consume({ context: myContext, subscribe: true })
    count: number;

    private incrementHandle = (e: Event) => {
        const event = new CustomEvent<undefined>('my-event', { bubbles: true, composed: true });
        this.dispatchEvent(event);
    };
  
    render() {
        return html`
            <div class="">
                <h3>${this.count * 2}</h3>
                <button @click=${this.incrementHandle}>Increment</button>
            </div>
        `;
    }
}

[augustjk]

Both are valid approaches.

It is possible to combine the value and the updater into a single context like this: https://lit.dev/playground/#sample=examples%2Fcontext-basics&gist=5aa7d41fe7a1f3132601a9363e70879d

I'd prefer this over having to manage a separate context just for the updater.

But using events is also quite idiomatic for web components so using it to update the value seems fine. Depending on how other providers are configured, you may want to stop propagation of the event so it doesn't update any providers further up.

[herrKlein]

I'm also trying different approaches. I like this approach except for the fact that I can't use my-child as a single instance ( without its parent )
example here: https://lit.dev/playground/#sample=examples%2Fcontext-basics&gist=bf79214b366a9476bf6f38743c363754

How would you go, having the child working as a single instance, and updating also its parent if its available. The use case for us is, we dynamically add different child components, they should register and the parent should also have their state. So when removing and adding the child components the state can be retained.

We also want those child components function on their own.

[augustjk]

There's probably a better way to organize this but a quick stab would be something like this: https://lit.dev/playground/#sample=examples%2Fcontext-basics&gist=ff90d62806f2f1752d818ab86ce93086

Using a custom accessor to either use the context, if present, or default to an internal property.

Edit to add: Other things can be done depending on requirements, like should the child component be able to also take the count value as a property.

[herrKlein]

Thank, I will try this and maybe make a more comprehensive example for what I need. adding and removing child components, while their state is retained by the provider. updated by the child and given to the child when its added again.

[ouweiya]

Both are valid approaches.

It is possible to combine the value and the updater into a single context like this: https://lit.dev/playground/#sample=examples%2Fcontext-basics&gist=5aa7d41fe7a1f3132601a9363e70879d

I'd prefer this over having to manage a separate context just for the updater.

But using events is also quite idiomatic for web components so using it to update the value seems fine. Depending on how other providers are configured, you may want to stop propagation of the event so it doesn't update any providers further up.

Unfortunately, it seems that the provided playground link is incorrect. Please upload it again. Thank you.

[augustjk]

That's odd. It works fine on my end. Maybe it's some GitHub issue.
Here's a long link instead.

[ouweiya]

Can I use @lit/context in Reactive Controllers?

I need to get shared data in Reactive Controllers, but using @consume({context: xxx}) results in an error.

[augustjk]

You can use the ContextConsumer controller from within the controller. See https://lit.dev/docs/composition/controllers/#building-controllers-from-other-controllers