JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/x-handlebars-template" id="main">
  {{#each partials}}
  <\ plugInPartial text=this.text /> {{/each}}
  <\ component props=this.props />
</script>

<script type="text/x-handlebars-template" id="plug-in-partial">
  <h3 id="mycontent">
        plug-in-partial {{text}}
    </h3>
</script>

<script type="text/x-handlebars-template" id="component">
  <h3 id="mycontent">
        CMP props: {{props.text}}
        <\ childComponent props={id: props.id}/>
    </h3>
</script>

<script type="text/x-handlebars-template" id="childComponent">
  <h5 id="mycontent">
        child {{props.id}}
    </h5>
</script>

JavaScript

var source = $("#main").html();
var plugInPartial = $("#plug-in-partial").html();
var component = $("#component").html();
var childComponent = $("#childComponent").html();

var compile = function(source) {
  var formattedSource = fix(source);
  return Handlebars.compile(formattedSource);
}


var partialTemplate = compile(plugInPartial);
var template = compile(source);
var componentTemplate = compile(component);
var childComponentTemplate = compile(childComponent);

function fix(htmlString) {
  return htmlString.replace(/(<\\\s*)(.*)(\s*\/>)/g, '{{> $2}}');
}

Handlebars.registerPartial("plugInPartial", partialTemplate);
Handlebars.registerPartial("component", componentTemplate);
Handlebars.registerPartial("component", childComponentTemplate);

var context = {
  partials: [{
    text: '1'
  }, {
    text: '2'
  }, ],
  props: {
    text: 'text!',
    id: 123
  }
};

var html = template(context);
$("body").html(html);