JSFiddle - React, Tailwind, and code Playground

HTML

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

<script id='template' type='text/ractive'>
    <h1>Hello, {{name}}!</h1>
    <Animal />
</script>

JavaScript

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



ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        name: 'world', version: Ractive.VERSION
    }
});