JSFiddle - React, Tailwind, and code Playground

by dumptyd

JavaScript

const basicTemplate = `<div>Name is {{name}}</div>`;
const template = `
<div class="container">
  <div class="jumbotron text-center">Name: {{name}}</div>
  <div class="list-group">
    {% for person of people %}
    <div class="list-group-item">
      <h4>{{ $loop.index }}. {{ person.name }} ({{ $loop.length }} children).</h4>
      <div class="list-group">
        {% for person of people %}
        <div class="list-group-item">Child {{ $loop.$parent.index }}.{{ $loop.index }} - {{ person.name }} (Parent {{ $loop.$parent.person.name }})</div>
        {% end %}
      </div>
    </div>
    {% end %}
  </div>
</div>

`;

const jumpy = (function() {
  const token = {
    START: '{{',
    END: '}}',
    BLOCK_START: '{%',
    BLOCK_END: '%}'
  };

  const regex = (function() {
    const updateRegex = () => ({
      TOKENIZE: new RegExp(`(${token.START}.*?${token.END}|${token.BLOCK_START}.*?${token.BLOCK_END})`, 'g'),
      END_BLOCK: new RegExp(`^${token.BLOCK_START} *end *${token.BLOCK_END}$`),
      PARSE_KEY: new RegExp(`^${token.START} *([\\w$.]+) *${token.END}$`),
      PARSE_FOR: new RegExp(`^${token.BLOCK_START} *for *(\\w+) *of *(\\w+) *${token.BLOCK_END}$`)
    });
    return Object.assign({
      updateRegex
    }, updateRegex());
  })();

  const JNode = (function() {
    const getValueByDottedProperty = function(prop, scope) {
      try {
        return prop.split('.').reduce((acc, curr) => acc[curr], scope);
      } catch (err) {
        throw false;
      }
    };
    class Node {
      constructor(fragment) {
        this.rawText = fragment;
        this.createsScope = false;
        this.processFragment(fragment);
        this.children = [];
      }
      processFragment() {}
      render() {}
    }

    class ScopedNode extends Node {
      constructor(fragment) {
        super(fragment);
        this.createsScope = true;
      }
    }

    class TextNode extends Node {
      processFragment(fragment) {
        this.text = fragment;
      }
     ...