JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.min.js"></script>
<script type='ractive/template' id='templ'>
    <a href="#/home" on-click='navigate'>home</a>
    <a href="#/section1" on-click='navigate'>section1</a>
 	<a href="#/section2" on-click='navigate'>section2</a>
 	<a href="#/section3" on-click='navigate'>section3</a>
</script>
<script type='ractive/template' id='details-message'>
    {{message}}
</script>
<script type='ractive/template' id='details-text'>
    {{text}}
</script>
<div id='main'></div>
<div id="result"></div>

JavaScript

var ractive = new Ractive({
    template: '#templ',
    el: '#main'
});

/*ractive.on('navigate', function (e) {
    console.log(e.node.hash);
    routr.navigate(e, true, {
        'message': 'New Message',
        'text': 'new Text'
    });
});*/

/*
Ractive.components.home = Ractive.extend({
    template: '#details-message',
    oninit: function () {},
    data: {
        message: 'This is home'
    }
});

Ractive.components.section = Ractive.extend({
    template: '#details-text',
    oninit: function () {},
    data: {
        message: 'This is section'
    }
});
*/

var Router = function (ractive) {
    this._ractive = ractive;
    this._routes = {};
};

var paintComponent = function(componentName, el, append, i) {
	new Ractive.components[componentName]({
        el: el,
        append: i ? append: false, // clean up DOM space
    });
};

var applyNavigation = function() {
    var self = this;
    self._ractive.on('navigate', function (e) {
        console.log(e.node.hash);
        self.navigate(e);
    });
}


Router.prototype.defineRoutes = function (routes) {
    var self = this;
    routes.forEach(function (routeObj) {
        self._routes[routeObj.pattern] = function (append, data) {
            if (Array.isArray(routeObj.componentNames)) {
                routeObj.componentNames.forEach(function (componentName, i) {
                    paintComponent(componentName, routeObj.el, append, i);
                });
            } else {
                paintComponent(routeObj.componentNames, routeObj.el);
            }
        };
    });
    applyNavigation.call(self);
};
Router.prototype.navigate = function (e) {
    this._routes[e.node.hash](true);
    //e.original.preventDefault();
};

Router.prototype.defineComponent = function(instanceName, Component) {
    if (instanceName) {
    	Ractive.components[instanceName] = Component ? Component : Ractive.extend({ template: '{{warning}}', data: { warning: 'Component was not provided. Please provide a valid...