adobe / adobe/lit-mobx

AsyncDirectives prevent mobx observables retriggering update

Open
#164 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
270
Forks
15
PR merge metrics
No merged PRs in 30d

Description

### Expected Behaviour
Using async directives should 'just work' with the rendering component updating whenever an observable inside of the async directive is updated. The async directive of course should do what it always does.

### Actual Behaviour
Mobx observables are not tracked within the callbacks of renders invoked by async directives like `when` and `until`.

Couple of possible approaches to fixing/workaround this:

* Wrap all async directive render functions with helper functions to track the invocations and re-render the hosting component
* Never use mobx observables directly in async directive render functions and instead always pass down the observable to a MobxLitElement that itself handles the re-render.
* Extend Lits ReactiveElement with new hooks that are driven by AsyncDirective calls to `setValue` within their render tree. This is a much bigger change at the core of the library and would likely need updates to the AsyncDirective API.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the MobX observable update problem described for async directives such as `when` and `until`, then compare the three possible approaches in the issue. Done means the hosting rendering component updates when an observable used in an async directive changes, while the directive retains its existing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.