Lua web framework idea

lframework.lua

-- luacheck: ignore

local HelloWorld = Component {

    -- Everything is wrote in Lua so rendered html
    -- is always valid.
    -- Chain of functions could build up a string
    -- or a vdom
    template = function(self)
        return
            div {
                class = { "greetings", "container" },
            } > -- Subscribe to `data.name` changes
                span("Hello World" .. self.name):bind "name"
                + button {
                    "Go",

                    events = {
                        click = function(self, event)
                            alert "hello!"
                        end
                    }
                }
    end,

    -- Also in lua for the same reasons
    style = {
        -- Could selectors be expressed in lua too?
        [".greetings"] = {
            display     = display.inline_block,
            margin      = px(0, 3),
            padding     = { px(1), rem(2) },
            font_weight = em(2),
        }
    },

    -- Observed somehow by the component
    data = {
        name = "John"
    },

    lifecyle = {
        before_render = function()
            print "before_render"
        end,

        after_render = function()
            print "after_render"
        end,

        -- ...
    }

}

HelloWorld:mount(dom_element)

-- Would generate
[[
<div class="greetings container">
    <span>Hello World John</span>
    <button>Go</button>
</div>

.greetings {
    display: inline-block;
    margin: 0 3px;
    padding: 1px 2rem;
    font-weight = 2em;
}
]]