JSFiddle - React, Tailwind, and code Playground

by kirkchen

HTML

<script src="https://raw.github.com/JeffreyZhao/jscex/master/src/jscex.js"></script>
<script src="https://raw.github.com/JeffreyZhao/jscex/master/src/jscex-parser.js"></script>
<script src="https://raw.github.com/JeffreyZhao/jscex/master/src/jscex-jit.js"></script>
<script src="https://raw.github.com/JeffreyZhao/jscex/master/src/jscex-builderbase.js"></script>
<script src="https://raw.github.com/JeffreyZhao/jscex/master/src/jscex-async.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
Result: <span id="result"></span>

JavaScript

var isAjaxMocked = true;
if (isAjaxMocked) {
    $.mockjax({
        url: '/WebApi/CalculateService.svc',
        status: 200,
        responseTime: 750,
        response: function (settings) {
            this.responseText = { sum: settings.data.a + settings.data.b };
        }
    });
    $.mockjax({
        url: '/WebApi/CalculateService.svc',
        status: 200,
        responseTime: 750,
        response: function (settings) {
            this.responseText = { sum: settings.data.a + settings.data.b };
        }
    });
    $.mockjax({
        url: '/WebApi/CalculateService.svc',
        status: 200,
        responseTime: 750,
        response: function (settings) {
            this.responseText = { sum: settings.data.a + settings.data.b };
        }
    });
}

var Task = Jscex.Async.Task;
$.ajaxAsync = function (options) {
    return Task.create(function (t) {

        options.success = function (data, textStatus, jqXHR) {
            t.complete("success", {
                data: data,
                textStatus: textStatus,
                jqXHR: jqXHR
            });
        }

        options.error = function (jqXHR, textStatus, errorThrow) {
            t.complete("failure", {
                jqXHR: jqXHR,
                textStatus: textStatus,
                errorThrow: errorThrow
            });
        };

        $.ajax(options);
    });
};

var calculate = eval(Jscex.compile("async", function (a, b) {
    var result = $await($.ajaxAsync({
        url: '/WebApi/CalculateService.svc',
        type: 'GET',
        data: { a: a, b: b },
        dataType: "json"
    }));

    return result.data.sum;
}));

var a = 1, b = 2, c = 3, d = 4;
var main = eval(Jscex.compile("async", function () {
    var result = 0;
    result = $await(calculate(a, b));
    result = $await(calculate(result, c));
    result = $await(calculate(result, d));

    $("#result").text(result);
}));

main().start();