JSFiddle - React, Tailwind, and code Playground

JavaScript

(function() {
    'use strict';

    var deferredShimBackground = { };

    var original = $.Deferred;
    $.Deferred = function() {
        var toReturn = original.apply(this, arguments);
        for(var listener in deferredShimBackground){
            if(deferredShimBackground.hasOwnProperty(listener)) {
                 deferredShimBackground[listener].addPromise(toReturn);
            }
        }
        return toReturn;
    }

    var resolvePromise = function(promise, promises) {

        //Force another async call.
        //This means that our .done call will actually finish resolving *after* all of the other ones
        //This is important, because one of those .done calls might chain another request, which we should wait for.
        window.setTimeout(function() {
            promises.splice(promises.indexOf(promise), 1);
            if(promises.length === 0) {
                this.ready = true;

                //If ready to fire off.
                if(this.onComplete) {
                    //Cleanup
                    delete deferredShimBackground[this.address];
                    this.onComplete(this.success);
                }
            }

        }.bind(this), 0);
    }

    var DeferredShim = function(address, onComplete) {
        var promises = [];
        deferredShimBackground[address] = this; //Attach.

        this.address = address;
        this.onComplete = null;
        this.ready = true;
        this.success = true;

        this.addPromise = function(promise) {
            promises.push(promise); this.ready = false;

            promise.done(function() {
                resolvePromise.call(this, promise, promises);
            }.bind(this));

            promise.fail(function() {
                this.success = false;
                resolvePromise.call(this, promise, promises);
            }.bind(this))
        };
    };

    window.deferredWrapper = {
        register : function(test) {
            var shim = new...