JSFiddle - React, Tailwind, and code Playground

Enhanced Boolean logic helper with block and inline expression capability.

by Gerald Fullam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
  <div class="row">
    {{#each orderData}}
    <div class="col-md-3">
      <div class="thumbnail">
        <div class="caption">
          <p>
            {{is}}
            {{#is name.length "&&" (is name.length "===" 7 "&&" (is name "Order 1") )}}
            right length and name
            {{else}}
            wrong length or name
            {{/is}}

            <b>Key {{@key}}:</b> {{name}}
          </p>
        </div>
      </div>
    </div>
    {{/each}}
  </div>
</script>

<div id="rendered"></div>

CSS

#rendered {
  display: table;
}

.row {
  display: table-row;
}

.row > div {
  display: table-cell;
  padding: 0.5em;
  border: 1px solid white;
  background-color: silver;
}

JavaScript

var precedence = {
    "typeof": 15,
    "!": 15,
    "*": 14,
    "/": 14,
    "+": 13,
    "-": 13,
    "instanceof": 11,
    ">": 11,
    ">=": 11,
    "<": 11,
    "<=": 11,
    "==": 10,
    "===": 10,
    "!=": 10,
    "!==": 10,
    "&&": 6,
    "||": 5
  }, //precedence values follow MDN spec
  unary = {
    "!": true
  },
  rl = {
    "!": true
  },
  evaluate = function(left, right, operator) {
    //three arguments, so determine what condition the user wanted
    switch (operator) {
      case 'typeof':
        return typeof(left) === right;
      case '!':
        return !left; //unary
      case '*':
        return left * right;
      case '/':
        return left / right;
      case '+':
        return left + right;
      case '-':
        return left - right;
      case 'instanceof':
        return left instanceof right;
      case '>':
        return left > right;
      case '>=':
        return left >= right;
      case '<':
        return left < right;
      case '<=':
        return left <= right;
      case '==':
        return left == right;
      case '===':
        return left === right;
      case '!=':
        return left != right;
      case '!==':
        return left !== right;
      case '&&':
        return left && right;
      case '||':
        return left || right;
    }
    return false;
  },
  runexpr = function(input) {
    var i = 0,
      len = input.length,
      token, p1, p2, peek, popop,
      stack = [],
      output = [];

    //Convert Infix notation to Postfix notation, evaluating on the fly
    //  http://en.wikipedia.org/wiki/Shunting-yard_algorithm + direct eval
    //
    //Performance Notes:
    //  Precedence Climbing is usually faster on more complex (read: nested) expressions.
    //  However, shunting yard wins in the typical use cases, so using it instead.
    //  http://jsperf.com/infix-expression-evaluation/2               
    while (i < len) {
      token = input[i++];
      p1 = precedence[token];...