JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script id="template-Test" type="text/template">
<style>
.entry h1{
    color:green;
}
.entry h2{
    color:Blue;
}
.entry .body{
    color:red;
}
</style>
<div class="entry">
  <h1>{header.title}</h1>
  <h2>{header.subtitle}
  <div class="body">
    {body}
  </div>
</div>
</script>
<div id="output">
</div>

JavaScript

var ST = new (new Class({
    compile: function(template){
        var self = this;
        return function(data){
            return self.expand(template, data);
        }
    },
    expand : function(template, data){
return (''+template).replace(/\{(.*?)\}/g, function(match, capture){
            var current = data, error = false;

                var tree = capture.split('.');
                for(var i=0,max=tree.length;i<max;i++){
                    if(current[tree[i]]){
                        current = current[tree[i]];
                    }else{
                        error = true;
                        break;
                    }
                }
                if(error){
                    return match;
                }else{
                    return ''+current;
                }
        });
    }
}));

        var IElement = new Class({
            toElement : function(){return this.element}
        });
            
var ITemplate = new Class({
    getTemplate : function(){
        var output = ''
        if('name' in this) output = $('template-'+this.name).get('html')
        return output
    }
});

        var Test = new Class({
            name : 'Test',
            options:{
                header: {
                    title: 'Yahoo!',
                    subtitle: 'Hurray!'
                },
                body : 'My body is ready'
            },
            Implements:[IElement, ITemplate, Options, Events],
            initialize : function(options){
this.setOptions(options);
                var template = ST.compile(this.getTemplate());
                this.element = new Element('div', {
                    html : template(this.options)
                });
            }
        })
     

            var output = $(new Test());
output.inject('output');