rrender

rrender - framework for building user interfaces

https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js

How does it work? - read online

online demo:

            
class component_todo extends component {
    state = {
        counter: 0,
        ttext: '2WayBinding',
        todos: [
            { title: 'wash the dishes' },
            { title: 'cook lunch' },
            { title: 'cook dinner' }
        ],
    };
    body() {
        return `
            <div class="">
                <ul>
                    <li r-for="todos">
                    <span r-bind="title"></span>
                    </li>
                </uL>
                <span r-bind="counter"></span>
                <button class="btn-primary" r-click="increment">
                    +
                </button>
            </div>
            <div>
                <div>
                    <input class="form-control" type="text" 
                            r-model="ttext">
                </div>
                <div>
                    <span r-bind="ttext">
                </div>
            </div>
        `;
       }
    increment(){
        this.state.counter++;
    }
}

fast start:

<html>
<script src="https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js"></script>

<body>
    <div class="main">
        <hello />
    </div>
</body>
<script>
    class component_hello extends component {
        state = {
            variable: "hello",
            color: "red",
            cssColor: () => {
                return 'color:' + this.state.color + ';'
            },
            time: new Date().toLocaleTimeString(),
        };
        body() {
            return `<div>
                        <span r-bind="variable"></span>
                        <span r-bind.style="cssColor">world</span>
                        <span r-bind="time"></span>
                    </div>`;
        }
        init() {
            this.timer = setInterval(() => {
                this.state.time = new Date().toLocaleTimeString();
                this.dirtyCheck();
                Render.renderDom();
            }, 1000);
        }
        destroy() {
            clearInterval(this.timer);
        }
    }

    var components = [
        {
            name: 'hello',
            component: component_hello
        },
    ];

    var Render = new render(document.querySelector(".main"), components);

    function main() {
        Render.renderDom();
    }
    main();
</script>

</html>