JSFiddle - React, Tailwind, and code Playground

HTML

<head>

</head>
<body>
    <script src="https://cdn.rawgit.com/cujojs/when/master/when.js"></script>
    <div class="content"><p>Promises that are compliant with the CommonJS Promises/A proposal must pass the .then duck-type test, but also <em>must implement the result forwarding/mutation called for in the spec</em>.  Sometimes promises that pass the test don't implement the forwarding behavior, such as jQuery's $.Deferred.  In that case, when.js's when() will transform non-compliant promises into compliant ones and guarantee forwarding.</p></div>
    <hr/>
</body>

CSS

p {
    margin: .5em;
}

em {
    font-style: italic;
}

.content {
    line-height: 1.25em;
}

.pass {
    color: #090;
}

.fail {
    color: #900;
}

JavaScript

var d, starting;

starting = 1;

// jQuery Deferred
// $.Deferred doesn't forward promise results
d = $.Deferred();

d.then(function(val) {
    return val + 1;
}).then(function(val) {
    verify(val, 2, '$.Deferred');
});
        
d.resolve(starting);

// $.when() observing jQuery Deferred
// $.when() returns a $.Deferred, so it doesn't
// forward promise results either
d = $.Deferred();

$.when(d).then(function(val) {
    return val + 1;
}).then(function(val) {
    verify(val, 2, '$.when() + $.Deferred');
});
        
d.resolve(starting);

// when.js when() observing jQuery Deferred
// when.js guarantees that it will always return
// a Promises/A compliant promise, even when it's
// input is not compliant
d = $.Deferred()
when(d, function(val) {
    return val + 1;
}).then(function(val) {
    verify(val, 2, 'when.js + $.Deferred');
});
        
d.resolve(starting);

// when.js when() observing a fake promise
// Even here, when.js guarantees Promises/A forwarding
function Promise(value) {
    this.then = function(callback) {
        callback(value);
        return this;
    };
}

when(new Promise(starting), function(val) {
    return val + 1;
}).then(function(val) {
    verify(val, 2, 'when.js + fake');
});

// when.js assimilates intermediate promises returned from callbacks.
// In this example, every promise returned from a callback in the chain
// is non-compliant, but forwarding still works correctly.
when(new Promise(starting), function(val) {
    return new Promise(val + 1);
}).then(function(val) {
    var $d = $.Deferred();
    $d.resolve(val + 1);
    return $d.promise();
}).then(function(val) {
    var $d = $.Deferred();
    $d.resolve(val + 1);
    return $d;
}).then(function(val) {
    verify(val, 4, 'when.js + non-compliant promise chain', 3);
});


// Helpers
function output(message) {
    var e = document.createElement('p');
    e.innerHTML = message;
    document.body.appendChild(e);
}

function verify(val, expected, name) {
    var success,...