AsyncDirectives prevent mobx observables retriggering update

[benjamind]

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.

[dnsflnv]

Use runInAction() in async.

    @action
    async deleteComment(id: number): Promise<void> {
        try {
            await api.delete(`comments/${id}`);
        } catch (error) {
            console.error(error);

            return;
        }

        const changedCommentThreads = { ...this.commentThreads };

        changedCommentThreads.data[id] = null;
        runInAction(() => {
            this.commentThreads = { ...changedCommentThreads };
        });
    }

[benjamind]

Not quite the same thing, thats an async action. In an async directive like asyncAppend that will invoke the template and update the DOM in an asynchronous callback that is outside of the reaction that is being used to capture template usage of mobx observables. Therefore observables inside of the asyncAppend callback will not cause further updates to the template. This can be quite surprising given the magic that happens elsewhere.

[kamathln]

Thanks a lot Benjamin, I was about to lose my mind.