JSFiddle - React, Tailwind, and code Playground

by unscriptable

HTML

<script src="https://raw.github.com/unscriptable/curl/dev/dist/curl/curl.js"></script>
<p>I had seen some intermittent failures while building my demo app for the Boston jQuery meetup, but figured I was doing something dumb or there was a bug in my dev version of curl.js.  I finally tracked down the issue to the fact that jQuery is calling AMD's define() before it is completely defined.</p>
<p>RequireJS does not fail in this situation because it waits for a script to finish evaluating before it executes dependent modules or callbacks. However, the AMD spec doesn't state that this is necessary.  Besides... why wait?  A module or resource shouldn't declare that it's defined until it actually is.</p>
<p>Here's what happens when a dev tries to add a domready callback after waiting for "jquery":</p>

CSS

body {
    font-family: courier;
    margin: 0.5em;
}
p {
    font-family: helvetica, arial;
    margin-bottom: 1em;
}

JavaScript

/***** these functions are just for showing the results to the Result Pane *****/
var doc = document, messages = [];

window.onload = function () {
    addMessage = writeMessage;
    for (var i = 0; i < messages.length; i++) {
        writeMessage(messages[i]);
    }
};

function writeMessage (msg) {
    doc.body.appendChild(doc.createTextNode(msg));
    doc.body.appendChild(doc.createElement('br'));
}
function addMessage (msg) {
    messages.push(msg);
}

/***** here, curl requests jquery and then tries to set a domready callback *****/
curl(
    { paths : {'jquery': 'http://code.jquery.com/jquery-1.7'} }, 
    ['jquery'], 
    function ($) {
        try {
            addMessage('does jQuery exist? ' + !!$);
            // anything that references jQuery helper objects (such as
            // jQuery.Callbacks) fails here
            $(function () { addMessage('successed!'); });
        }
        catch (ex) {
            addMessage('failed: ' + ex.message);
        }
    }
);