JSFiddle - React, Tailwind, and code Playground

by Harris Brakmic

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<div id="app"></div>

<script id='template' type='text/ractive'>
    <h1 class="me-red">Hello, {{name}}!</h1>
    <div>Ractive v{{version}}</div>
    <Animal />
</script>

CSS

<style>
  .me-red {
   color: red;
  }
</style>

JavaScript

function RactiveExtendTypeScriptClass(tsClass) {
    var instance = new tsClass();
    var r = {};
    for (var key in instance) {
        r[key] = instance[key];
        console.log(key);
    }
    return Ractive.extend(r);
}
var Animal = (function () {
    function Animal() {
        this.data = {
            key: "value"
        };
    }
    Animal.prototype.onrender = function (options) {
        var self = this;
        self.add('a');
        console.log('init');
        console.log(options);
    };
    Animal.prototype.say = function(msg) {
        console.log('Animal says ' + msg);
    };
    return Animal;
})();
Ractive.components.Animal = RactiveExtendTypeScriptClass(Animal);



ractive = new Ractive.components.Animal({
    el: 'app',
    template: '#template',
    data: {
        name: 'world', 
        version: Ractive.VERSION
    }
});
ractive.say('hello');