adobe / adobe/lit-mobx

Demo use of @observable doesn't work

Open
#175 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.