JSFiddle - React, Tailwind, and code Playground

by thai

HTML

<textarea id="code" cols=50 rows=5>
function plus(a,b){
	return (a+b);
}
</textarea>
<br>
<textarea id="input" cols=50 rows=5>
plus(10,12);
</textarea>
<br>
<textarea id="output" cols=50 rows=5>
</textarea><br>
<input type="button" id="run" value="run">

JavaScript

$('#run').on('click', function() {
    var code = $('#code').val();
    var input = $('#input').val();
    runCode(code, input, function(error, result) {
        if (error) {
            alert(error);
            return;
        }
        $('#output').val(result);
    })
});

function runCode(code, input, callback) {
    var runCode = code + ';\npostMessage(eval(' + JSON.stringify(input) + '));';
    var blob = new Blob([runCode], { type: 'text/javascript' });
    var worker = new Worker(window.URL.createObjectURL(blob));
    var timeout;
    function post(err, res) {
        if (callback == null) return;
        callback(err, res);
        callback = null;
        clearTimeout(timeout);
    }
    worker.onmessage = function(e) {
        post(null, e.data);
    };
    worker.onerror = function(e) {
        post(e, null);
    };
    timeout = setTimeout(function() {
        post(new Error('Time Out'), null);
        worker.terminate();
    }, 1000);
}