JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

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

Babel + JSX

/* @jsx Kek.d */
function Kek(a,b,c){this.childs=b,this.props=a,this.name=c}var nodes={},cNodes=[];Kek.prototype.render=function(){return this},Kek.d=function(a,b){const c=Array.prototype.slice.call(arguments,2);if(nodes[b.id])return nodes[b.id].props=b,nodes[b.id].childs=c,nodes[b.id];const d="function"==typeof a?new a(b,c):new Kek(b,c,a);return nodes[b.id]=d,d},Kek.redraw=function(){cNodes=[],Kek.append(Kek.node,Kek.root);var a=Object.keys(nodes);cNodes.length!==a.length&&a.forEach(function(a){-1===cNodes.indexOf(nodes[a])&&(nodes[a].ref&&nodes[a].ref.remove(),delete nodes[a])})},Kek._each=function(a,b){var c=null;a.forEach(function(a){var d=typeof a;"object"===d?c=Kek.append(b,a,c):"boolean"!==d&&(b.innerText=a),c=a})},Kek.append=function(a,b,c){if("object"==typeof b){if(Array.isArray(b))return void Kek._each(b,a);const d=b.render();Kek.node||(Kek.node=a,Kek.root=b),b.ref||(b.ref=document.createElement(d.name),c?a.insertBefore(b.ref,c.ref.nextSibling):a.appendChild(b.ref),c&&(c.next=b)),d.props&&Object.keys(d.props).forEach(function(a){b.ref[a]=d.props[a]}),cNodes.push(b),Kek._each(d.childs,b.ref)}};

const state = {
    value: '',
    filter: false,
    todos: [
        {
            text: 'done item',
            done: true,
            id: 0
        },
        {
            text: 'item',
            done: false,
            id: 1
        }
    ]
};

const actions = {
    change(e) {
        state.value = e.target.value;
    },
    add() {
        state.todos.push({
            done: false,
            text: state.value + '',
            id: Date.now()
        });
        state.value = '';
        Kek.redraw();
    },
    check(id) {
        const t = state.todos.filter(t => t.id === id)[0];
        t.done = !t.done;
        Kek.redraw();
    },
    filter() {
        state.filter = !state.filter;
        Kek.redraw();
    }
};

function App(props) {
    this.render = function() {
        return (
            <div className="test-div" id="r">
               ...