AsyncDirectives prevent mobx observables retriggering update
- 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
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