rrender

rrender - framework for building user interfaces

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

online demo:

            
class component_todo extends component {
    state = {
        counter: 0,
        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>
        `;
       }
    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 + ';'
            }
        };
        body() {
            return '<div> <span r-bind="variable"></span> <span r-bind.style="cssColor">world</span></div> ';
        }
        init() {
            console.log('init')
        }
    }

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

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

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

</html>