Defold + Yoga + Luact

luact_gui.lua

local luact = require "main.luact_defold.luact_defold"

local Button = luact.component(function(props)
    return luact.Box {
        on = props.on,
        style = {
            width = 50,
            height = 50,
            color = {1, 1, 1, 1},
            scale = {1, 1, 1},
            margin = 20,
            align_items = "center",
            justify_content = "center",
            [":hovered"] = {
                scale = {1, 1, 1},
                color = {1, 0, 1, 1},
            },
            [":pressed"] = {
                scale = {1.1, 1.1, 1},
            },
            [":animate"] = {
                scale = {0.2, gui.EASING_OUTCUBIC}
            }
        },
        children = {
            luact.Text {
                text = props.text,
                style = {
                    color = {0, 0, 0, 1}
                }
            }
        }
    }
end)

local Row = luact.component(function(props)
    return luact.Box {
        style = {
            flex_direction = "row"
        },
        children = props.children
    }
end)


local Column = luact.component(function(props)
    return luact.Box {
        style = {
            flex_direction = "column",
            align_items = "center",
        },
        children = props.children
    }
end)

local Counter = luact.component(function(props)
    local count, set_count = luact.use_state(props.val)

    return luact.Box {
        style = {
            justify_content = "center",
            align_items = "center",
            width = "100%",
            height = "100%",
        },
        children = {
            Column {
                children = {
                    luact.Text {
                        text = count,
                        style = {
                            color = {0, 0, 0, 1}
                        }
                    },
                    Row {
                        children = {
                            Button { 
                                text = "-",
                                on = {
                                    mousedown = function(e)
                                        set_count(function(c) return c - 1 end)
                                    end,
                                }
                            },
                            Button { 
                                text = "+",
                                on = {
                                    mousedown = function()
                                        set_count(function(c) return c + 1 end)
                                    end,
                                }
                            },
                        }
                    }
                }
            }
        }
    }
end)

local Screen = luact.component(function(props)
    local w, h = window.get_size()
    local ref = luact.use_ref()

    luact.use_layout_effect(function()
        ref.current:layout()
    end)
    
    return luact.Box({
        ref = ref,
        style = {
            width = w / 2,
            height = h / 2,
            color = {0, 1, 1, 1},
            padding = 20,
        },
        children = props.children
    })
end)

function init(self)
    msg.post(".", "acquire_input_focus")
    
    luact.render(Screen { 
        children = {
            Counter {
                val = 5
            },
        }
    })
end

function update(self, dt)
    luact.work_loop(function()
        return dt * 1000
    end)

    luact.document:update(dt)
end

function on_input(self, action_id, action)
    luact.document:on_input(action_id, action)
end

function on_message(self, message_id, message, sender)
    luact.document:on_message(message_id, message, sender)
end