JSFiddle - React, Tailwind, and code Playground

by Brondem Brondem

HTML

<table id='table'>
      <tr>
        <td>AAA</td>
        <td>BBBBBB</td>
        <td>XXXX</td>
        <td class='bg-blue'>MM</td>
      </tr>
      <tr>
        <td>CCCCCC</td>
        <td>D</td>
        <td class='bg-blue'>YY</td>
        <td>HHHH</td>
      </tr>
      <tr>
        <td class='bg-blue'>WWW</td>
        <td>Z</td>
        <td>OOO</td>
        <td>GGGGGG</td>
      </tr>
      <tr>
        <td>UUUU</td>
        <td class='bg-blue'>E</td>
        <td>PPPPPP</td>
        <td>LLL</td>
      </tr>
    </table>

CSS

table {
  border-collapse: collapse;
  text-align: center;
}

td {
  border: solid black 1px;
}

.bg-red {
  background-color: red !important;
}

.bg-blue {
  background-color: #aaf;
}

.bg-green {
  background-color: green;
}

JavaScript

function Compiler(){
    this.pos   = 1;
    this.code  = { 0: {'var': {} } };
    this.stack = [];
    this.current = { 
        'name' : 'start',
        'jump' : 1
    };
}

Compiler.prototype.startOff = function() {
    if( this.current.name === 'start')
        this.current.name = 'code';
}

Compiler.prototype.insertVar = function( key, value ) {
    if( key in this.code[0]['var'] ) {
        throw new Error( 'Cannot redeclare variable \'' + key + '\'' );
    } else {
        this.code[0]['var'][key] = value;
    }
}

Compiler.prototype.var = function(){
    if( this.current.name === 'start' ){
        var n = arguments.length;
        var arg0 = arguments[0];
        if( n === 2 ) {
            if( typeof arg0 === 'string' ) {
                this.insertVar( arg0, arguments[1] );
            } else {
                throw new Error( 'Invalid variable declaration' );
            }
        } else if( n === 1 && typeof arg0 === 'object' ) {
            for( var key in arg0 ) {
                this.insertVar( key, arg0[key] );
            }
        } else {
            for( var i = 0; i < n; ++i ){
                if( typeof arguments[i] === 'string' ) {
                    this.insertVar( arguments[i] );
                } else {
                    throw new Error( 'Invalid variable declaration' );
                }
            }
        }
    } else {
        throw new Error('Only variables can be declared at the beginning');
    }
    return this;
}

Compiler.prototype.while = function( cond ) {
    this.startOff();
    var type = typeof cond;
    if( type === 'string' ) {
        cond = cond.replace( /(\$[a-z0-9_]+)/gi , "this.$1" );
        var f_cond = new Function( 'return ' + cond );
        this.stack.push( this.current );
        this.current = {
            'name': 'while',
            'jump': this.pos 
        };
        this.code[this.pos] = {
            'jump': { 'cond': f_cond }
        };
        ++this.pos;
    } else {
        throw new...