Demo use of @observable doesn't work
- Dominant language
- TypeScript
- Stars
- 270
- Forks
- 15
- PR merge metrics
- No merged PRs in 30d
Description
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}
Add
`;
}
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
})
}
}
```
Contributor guide
Assessment
This issue has not been assessed yet.