updated not called if observable not used in render

[madeleineostoja]

Expected Behaviour

Observables should trigger updated() when extending MobxLitElement

Actual Behaviour

Observables only trigger an update if used within the render callback

Platform and Version

• @adobe/lit-mobx: 2.0.0
• mobx: 6.6.1
• lit: 2.2.8

Sample Code that illustrates the problem

This is not reactive to observable/store updates

export class Element extends MobxLitElement {
   private store = store;

  updated() {
    console.log(this.store)
  }
}

This is reactive

export class Element extends MobxLitElement {
   private store = store;

  render() {
    html`<span>${this.store}</span>`
  }
}

[benjamind]

What purpose would triggering an update (render) be useful for if that property is not used in the render function?

It's relatively trivial to use autorun or other mobx observable methods to drive a computation that is stored on a property of the component that then drives the render update naturally like other property updated callbacks.

[madeleineostoja]

Other than being an opinionated and undocumented footgun (it took me SO long to debug why my lit-mobx integration wasn't working), I don't think it's beyond imagination to use pure logic/state based observables whose output aren't directly rendered but instead change what is rendered through local state/props. Like layout settings, global state, etc.

[benjamind]

In those cases you should just be using mobx directly. There's no need to automatically wrap every property into an observable context since 99% of them wouldn't be mobx observable.

[madeleineostoja]

Sure but it should still be documented if nothing else

[benjamind]

Added a note to the README.