Demo use of @observable doesn't work

[ztolley]

If I install lit 3.3.0 with @adobe/lib-mobx 2.2.2 and create a my-element.ts with this the counter never updates on screen, though it does in the Counter class instance:

import { html, TemplateResult } from "lit";
import { customElement } from "lit/decorators.js";
import { observable, action } from "mobx";
import { MobxLitElement } from "@adobe/lit-mobx";

// create a mobx observable
class Counter {
  @observable
  public count = 0;

  @action
  public increment() {
    this.count++;
  }
}

// create instance that can be shared across components
const counter = new Counter();

// create a new custom element, and use the base MobxLitElement class
// alternatively you can use the MobxReactionUpdate mixin, e.g. `class MyElement extends MobxReactionUpdate(LitElement)`
@customElement("my-element")
export class MyElement extends MobxLitElement {
  private counter = counter;

  // any observables accessed in the render method will now trigger an update
  public render(): TemplateResult {
    return html`
      Count is ${this.counter.count}
      <br />
      <button @click=${this.incrementCount}>Add</button>
    `;
  }

  private incrementCount() {
    this.counter.increment();
  }
}

But if I replace the Counter class with this from the online demo it works:

class Counter {
    public count = 0;

    public increment() {
        this.count++;
    }

    public constructor() {
      makeObservable(this, {
        increment: action,
        count: observable
      })
    }
}

[nickschaap]

I believe you would need to add makeObservable() in the constructor of your Counter class

[benjamind]

Ah yeah the example code probably needs updating to reflect latest mobx patterns.