JSFiddle - React, Tailwind, and code Playground

by mathheadinclouds

HTML

<head>
    <meta charset="UTF-8">
    <title>load</title>
    <style type="text/css"></style>
    <script src="https://mathheadinclouds.github.io/thirdparty/esprima.js"></script>
    <script src="https://mathheadinclouds.github.io/thirdparty/escodegen.browser.js"></script>
    <script src="https://mathheadinclouds.github.io/js/astWomb.js"></script>
    
    <script type="unsavoryPervert" id="initialCode">
function multiDimensionalFind(isNeedle, haystack) {
    var LEVEL = haystack.length;
    function inner(stack) {
        var level = stack.length;
        if (level >= LEVEL) {
            if (isNeedle(stack)) return.multiDimensionalFind stack;
        } else {
            var arr = haystack[level];
            for (var i = 0; i < arr.length; i++) {
                inner(stack.concat([arr[i]]));
            }
        }
    }
    inner([]);
    return 'not found'
}
    </script>
</head>
<body>
  
<textarea id='inputCodeTA' rows=20 cols=80></textarea>
<br><br>
<button onclick='transpileButtonClick()'>transpile</button>
<br><br>
<textarea id='outputCodeTA' rows=30 cols=80></textarea>
  
</body>

JavaScript

inputCodeTA = document.getElementById('inputCodeTA')
outputCodeTA = document.getElementById('outputCodeTA')
initialCodeElt = document.getElementById('initialCode');
inputCodeTA.value = initialCodeElt.textContent;

function range(upto){ return Array(upto).fill(0).map(function(dontCare, index){ return index; }); }
function transpile(code){
	var tokens, found_at_index, code1, ast, items, absynt;
	tokens = esprima.tokenize(code, {range: true});
	found_at_index = range(tokens.length-2).filter(function(idx){
		var tok1 = tokens[idx], tok2 = tokens[idx+1], tok3 = tokens[idx+2];
		return (tok1.type==='Keyword') && (tok2.type==='Punctuator') && (tok3.type==='Identifier') &&
			   (tok1.value==='return') && (tok2.value==='.') &&
			   (tok1.range[1]===tok2.range[0]) &&
			   (tok2.range[1]===tok3.range[0]);
	});
	code1 = '';
	var start = 0, section;
	items = {};
	found_at_index.forEach(function(idx){
		section = code.slice(start, tokens[idx].range[1]);
		code1 = code1 + section;
		start = tokens[idx+2].range[1];
		var position = code1.length;
		var identifier = code.slice(tokens[idx+2].range[0],tokens[idx+2].range[1]);
		items[position] = identifier;
	});
	section = code.slice(start);
	code1 = code1 + section;
	ast = esprima.parse(code1, {range: true});
	traverseAST(ast, function(node,stack,keyStack){
		if (node.type==="ReturnStatement"){
			var r = node.range;
			var position = r[0] + 6;
			if (position in items){
				var nameOfFunctionToReturnFrom = items[position];
				for (var j=stack.length-1; j>=1; j--){
					var ancestor = stack[j], aboveAncestor = stack[j-1], matchFound = false;
					if ( (ancestor.type==="FunctionDeclaration") && ((typeof ancestor.id)==='object') ){
						if (ancestor.id.type==='Identifier'){
							var funcName = ancestor.id.name;
							if (funcName===nameOfFunctionToReturnFrom){
								matchFound = true;
								var parent = stack[stack.length-1];
								var parentKeys = Object.keys(parent);
								var pivotKeys =...