JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

<script type="text/javascript">

</script>
<div id="main" style="height:10000px">
This is a demo of the generated API, showing some example Api calls. Various code snippets will slide in as you scroll, and get evaluated
    
<div class="topmarg">
    The first example, simply fetches the "/users/1/" method and displays the result in an alert.
    Scroll down to run it.
    <div id="ex0" class="out">    
            <pre class="eval" >
                <code>
                    StackApi.users.fetch ({
                        ids: [1],
                        site: "stackoverflow"
                    }).success (function (r) {
                        alert (JSON.stringify (r));
                    })
                </code>
            </pre>
    </div>
    </div>
<div class="topmarg">
    The first example, simply fetches the "/users/1/" method and displays the result in an alert.
    Scroll down to run it.
    <div id="ex3" class="out">    
            <pre class="eval" >
                <code>
                    StackApi.comments.fetch ({
                        site: "stackoverflow",
                        pagesize: 100,
                        filter: "!-.Caby4xVEgH"
                    }).success (console.log.bind (console))
                </code>
            </pre>
    </div>
    </div>
    <div id="ex1" class="out">    
            <pre class="eval" >
                <code>
                StackApi.users.fetch ({
                    ids: [1,2,4],
                    site: "stackoverflow"
                }).success (function (r) {
                    var users = r.items;
                    for (var i=0,j; j = users [i]; i++) {
                        var img = document.createElement ("img");
                        img.src = j.profile_image;
                        currentEvalEl.appendChild (img);
                    }
                })
                </code>
            </pre>
    </div>

    
<div class="topmarg">
    Lets try to make an call with...

CSS

.topmarg {
       margin-top: 100px; 
}

.out {
    margin-top: 100px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    margin-left: 70% !important;
}
.in {
    margin-top: 100px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    border-left: 2px solid silver;
    margin-left: 0% !important;
}

JavaScript

var StackApi = (function StackApi () {
   var util = (function utilIIF() {
    return {
        enforceSignature: function enforcesSignature(options, args, fn) { //I guess, parsing function definitions is not a good practice, maybe remove it, we don't really need named parameters.
            var params, i, l, j, k, res;

            res = true;


            for (i = 0, l = options.length; i < l; i++) {
                var types = options[i] = Array.isArray(options[i]) ? options[i] : [options[i]];
                var mismatch = true;
                for (j = 0, k = types.length; j < k; j++) {
                    if ((args[i] && args[i].constructor === types[j]) || (types[j] === args[i])) {
                        mismatch = false;
                        break;
                    }
                }
                if (mismatch) {
                    res = false;
                    break;
                }
            }

            j--;

            if (!res) {
                var err = [
                    i >= 0 ? i : "?",
                    options[i][j] && (options[i][j].name || "asd"),
                    args[i] && args[i].constructor && args[i].constructor.name || '"' + args[i] + '"'
                ];

                if ("function" === typeof fn) {
                    params = ("" + fn).match(/\((.*)\)/)[1].split(",");
                    err.push(params[i] || "unknown");

                    throw new TypeError("Type mismatch on " + fn.name + " " + err[0] + " (" + err[1] + "). Expected " + err[2] + ", got " + err[3] + " instead");
                } else {
                    throw new TypeError("Type mismatch on parameter" + err[1] + ". Expected " + err[2] + ", got " + err[3] + " instead");
                }
            }

            return true;
        },
        formatString: function () {
            var args, str, i;

            i = 0;

            args = Array.prototype.slice.call(arguments);
            str = args.shift();
            str...