Defer Middleware

[agubler]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code has been formatted with prettier as per the readme code style guidelines
• Unit or Functional tests are included in the PR

Description:

A middleware that allows the rendering engine to control whether a widget is rendered using pause and resume. When performing a merge this pauses the rest of the vdom processing until the widget is set back to "resume" in order to ensure that the correct DOM nodes are matched and hydrated into the tree. In the non merge scenario the rest of the application is rendered, only skipping the widget that has been set to "pause".

import { create, defer, invalidator } from '@dojo/framework/core/vdom';
import { cache } from '@dojo/framework/core/middleware/cache';

const factory = create({ defer, cache });

const myExampleMiddleware = factory(({ middleware: { defer, cache, invalidator }}) => {
    return {
        get(value: string) {
            // check a cache
            const cachedValue = cache.get(value);
            if (cachedValue) {
                return cachedValue;
            }
            // if no cache, do something that returns a promise
            const promise = foo(value);
            // pause the rendering of the widget
            defer.pause();
            promise.then((result) => {
                // set cache
                cache.set(value, result);
                // resume rendering for widget
                defer.resume();
                // invalidate for a re-render
                invalidator();
            });
            return null;
        }
    };
});

resolves #379