JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

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


<script type="text/x-handlebars-template" id="wrapperComponent">
  <h3 class="wrapperComponent">
		partial wrapper component
    {{> @partial-block }}
	</h3>
</script>

CSS

.wrapperComponent {
  border: 1px solid black;
}

JavaScript

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

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

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


function fix(htmlString) {
	var fixedString = htmlString
//	if(htmlString.match(/<\\(\s*.*\s*)> \{(\s*.*)*\} *<\\\/(\s*.*\s*)>/g)){
// var fixedString = fixedString.replace(/<\\(\s*.*\s*)> \{\s*(\s*.*)*\s*\} *<\\\/(\s*.*\s*)>/g, // '{{#> $1 }}$2{{/$3}}')
//  }
  
  return fixedString.replace(/(<\\\s*)(.*)(\s*\/>)/g, '{{> $2}}');
}

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

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

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