@lit-labs/context data update issue

[miketests]

Hi, I've started to learn Lit recently and very excited about it!
I tried @lit-labs/context but I can't figure out how to update data in all related elements.

So, I created a simple context:

// context-data.ts
import { createContext } from '@lit-labs/context';

export interface DataObjectInterface {
  name: string;
  age: number;
}

export const dataContext = createContext<DataObjectInterface>('data');

And I want to use it in two elements: parent and children. Also I want to update these elements automatically whenever I change the context data only. So I have context provider in the parent element and consumer in the children element.

// parent-element.ts
@customElement('parent-element')
export class ParentElement extends LitElement {
  @provide({ context: dataContext })
  @property()
  public data: DataObjectInterface = {
    name: 'John',
    age: 25,
  };

  changeData() {
    this.data.name = 'Bob';
    this.data.age = 20;
  }

  render() {
    return html`
      <fieldset>
        <legend>Parent:</legend>
        <label>Name: ${this.data.name}</label><br>
        <label>Age: ${this.data.age}</label><br>
        <button @click=${this.changeData}>Update Data</button>
      </fieldset>
      <br>
      <children-element></children-element>
      `;
  }
}

// children-element.ts
@customElement('children-element')
export class ChildrenElement extends LitElement {
  @consume({ context: dataContext, subscribe: true })
  public data?: DataObjectInterface;

  render() {
    return html`
      <fieldset>
        <legend>Children:</legend>
        <label>Name: ${this.data.name}</label><br>
        <label>Age: ${this.data.age}</label><br>
      </fieldset>
    `;
  }
}

Unfortunately, I noticed that context data is changed successfully on its own but it does not force to update related elements (parent and children). So I have to trigger element update separately by this.requestUpdate() method which is not what I want.
I've read the docs and searched for any info with context update example but didn't find any comprehensive code sample.

Here is an example where I am trying to update elements when context data is changed: https://stackblitz.com/edit/vitejs-vite-ktujia

Any advice or working code example will be appreciated!

[augustjk]

The context value is updated by a setter on the property so you need to set the data property for the context to be updated and its subscribers to be updated. This is the same requirement we have for reactive properties.

You should update the whole object instead of mutating the existing object.

  changeData() {
-   this.data.name = 'Bob';
-   this.data.age = 20;
+   this.data = { name: 'Bob', age: 20 };
  }

See it in action here: https://stackblitz.com/edit/vitejs-vite-m7cs1f?file=src%2Fparent-element.ts