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   = 0;
    this.code  = {};
    this.stack = [];
    this.current = { 
        'name' : 'start',
        'jump' : 0
    };
}

Compiler.prototype.var = function( obj ){
    if( this.current.name === 'start' ){
        this.code[0] = {
            'var': obj
        }
        ++this.pos;
    } else {
        throw new Error('Only variables can be declared at the beginning')
    }
    return this;
}

Compiler.prototype.while = function( cond ) {
    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 Error('Unexpected ' + type + ' type of argument' );
    }
    return this;
}

Compiler.prototype.if = function( cond ) {
    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': 'if',
            'jump': this.pos
        };
        this.code[this.pos] = {
            'jump': { 'cond': f_cond }
        };
        ++this.pos;
    } else {
        throw new Error('Unexpected ' + type + ' type of argument' );
    }
    return this;
}

Compiler.prototype.else = function() {
    if( this.current.name === 'if' ) {
        var jump = this.current.jump;
        this.current = {
            'name': 'else',
            'jump': this.pos
        };

        this.code[this.pos] = {'jump': {} };
        ++this.pos;
        this.code[jump]['jump']['to'] = this.pos;
    } else {
        throw new Error( 'Unexpected _else' );
    }
    return...