JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

<div id="app"></div>

Babel + JSX

/* @jsx Kek.d */

var nodes = {};
var cNodes = [];

function Kek(props, childs, name) {
    this.childs = childs;
    this.props = props;
    this.name = name;
}

Kek.prototype.render = function() {
    return this;
};

Kek.d = function(name, props) {
    const childs = Array.prototype.slice.call(arguments, 2);

    if (nodes[props.id]) {
        nodes[props.id].props = props;
        nodes[props.id].childs = childs;
        return nodes[props.id];
    }

    const component = (typeof name === 'function') ? 
        new name(props, childs) : 
        new Kek(props, childs, name);

    nodes[props.id] = component;
    return component;
}

Kek.redraw = function() {
    cNodes = [];
    Kek.append(Kek.node, Kek.root);

    var nodeKeys = Object.keys(nodes);
    if (cNodes.length !== nodeKeys.length) {
       nodeKeys.forEach(function(name) {
            if (cNodes.indexOf(nodes[name]) === -1) {
                if (nodes[name].ref) {
                    nodes[name].ref.remove();
                }
                delete nodes[name];
            }
       });
    }
}

Kek.append = function(node, component) {
    if (typeof component !== 'object') return;

    const componentInstance = component.render();
    
    
    if (!Kek.node) {
        Kek.node = node;
        Kek.root = component;
    }

    if (!component.ref) {
        component.ref = document.createElement(componentInstance.name);
        node.appendChild(component.ref);
    }

    if(componentInstance.props) {
        Object.keys(componentInstance.props).forEach(function(name) {
            component.ref[name] = componentInstance.props[name];
        });
    }
    
    cNodes.push(component);

    componentInstance.childs.forEach(function(child) {
        var type = typeof child;
        if (type === 'object') {
            Kek.append(component.ref, child);
        }
        else if (type !== 'boolean'){
            component.ref.innerText = child;
        }
    });
}


let count = 0;
let isVisible =...