JSFiddle - React, Tailwind, and code Playground

by xavierm02

HTML

<link rel="stylesheet" type="text/css" href="http://xjslib.github.com/src/XJSTree/XJSNode.css" />
<script src="http://xjslib.github.com/src/XJSLib.js"></script>

<script src="http://xjslib.github.com/src/XJSIterator/src/XJSIterator.js"></script>
<script src="http://xjslib.github.com/src/XJSIterator/src/XJSStringIterator.js"></script>

<script src="http://xjslib.github.com/src/XJSTree/XJSNode.js"></script>
<script src="http://xjslib.github.com/src/XJSTree/XJSToken.js"></script>

<script src="http://xjslib.github.com/src/XJSParser/src/XJSParser.js"></script>

<script src="http://xjslib.github.com/src/XJSParser/src/Rule.js"></script>

<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Operator.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Operator/And.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Operator/Or.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Operator/Repeat.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Operator/Repeat/Optionnal.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Operator/Or.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Production.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/ProductionReference.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/ProductionSet.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/Rule/Terminal.js"></script>
<script src="http://xjslib.github.com/src/XJSParser/src/TMP.js"></script>
<input type="text" id="input" />
<div id="output" />

JavaScript

XJSParser.syntaxes.Bool = new ProductionSet(function(operators, options) {
    'use strict';
    var And = operators.And;
    var Or = operators.Or;
    var Repeat = operators.Repeat;
    var Rule = operators.Production;
    var Optionnal = operators.Optionnal;
    var s = Rule('OptionnalSpaces');
    return [{
        name: 'Digit',
        rules: Or([
            '0',
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9'
            ])
    }, {
        name: 'Number',
        rules: Repeat(And([
            Rule('Digit')
            ]), '+'),
        join: true
    }, {
        name: 'Expression',
        start: true,
        rules: And([
            Rule('Operand'),
            Optionnal(
        And([
            Or(['^', 'v']),
            Rule('Operand')
            ]))])
    }, {
        name: 'Operand',
        rules: Or([
            And([
                '(', Rule('Expression'), ')'
            ]), 
            And(['x', Rule('Number')]
               )]),
        join:true
    }, {
        name: 'OptionnalSpaces',
        rules: Repeat(Or([
            ' ',
            '\r',
            '\n'
            ]), '*'),
        join: true
    }];
});

var parser = new XJSParser( 'Bool' );

var input = document.getElementById('input');
input.onchange = function() {
    output.innerHTML = '';
    var result = parser.parse( new XJSStringIterator( this.value ), {
        join: true,
        removeEmpty: true
    } );
    output.appendChild(result.toHTML());
};