JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

<div id="root"></div>

Babel + JSX

/* @jsx Kek.d */
function K(){}K.n={},K.r=[],K.d=function(n,e){return{n:n,p:e,c:K.r.slice.call(arguments,2)}},K.redraw=function(n,e,r){K.r=[],K.a(n,e,r);var o=Object.keys(K.n);o.length!==K.r&&o.forEach(function(n){-1===K.r.indexOf(n)&&(K.n[n].remove(),delete K.n[n])})},K.e=function(n,e,r){e instanceof Array&&e.forEach(function(e,o){K.a(n,e,r+(!e.p||e.p.id)+o+".")})},K.a=function(n,e,r){K.e(n,e,r),K.node||(K.node=n,K.root=e),n=n||K.node,e=e||K.root,r=r||"0.";var o=e.n,t=e.p,c=e.c;if("boolean"!=typeof e){if(K.r.push(r),"function"==typeof o)return K.a(n,new o(t,c).render(),r);if("string"==typeof e)return n.innerText=e;var a=K.n[r]||document.createElement(o);t&&Object.keys(t).forEach(function(n){a[n]!==t[n]&&(a[n]=t[n])}),n.appendChild(K.n[r]=a),K.e(a,c,r)}},K.append=K.a;var Kek=K;

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() {
    		if (state.value === '') return;
        
        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() {
    		const hiddenCount = state.todos.filter(t => t.done !== state.filter).length;
        return (
            <div className="todos">
                <h2>Todos</h2>
                <div>
                    <span>Filter</span>
                    <input type="checkbox" onclick={actions.filter} checked={state.filter}/>
                    <span>{`...