LuAct

LuAct- a React-like framework

TENUM® ships a React-like framework called LuAct, which lets you structure your UI with hooks, component functions, and JSX-like syntax—except everything is done in Lua.

You’ll find many familiar concepts if you’ve used React before:

Functional Components: You export a Lua function that returns UI elements.
Hooks: A set of functions (useState, useEffect, etc.) that manage component state and lifecycle.
Virtual DOM: TENUM® updates the real DOM only when something changes.

You also have built-in access to UI widgets from Chakra UI (exposed as a Lua-friendly API) and other libraries.

Storybook & Playground

ADD HERE

Key Features of LuAct

Component-Based Architecture:

Similar to React, LuAct allows developers to build their applications using components. A component is a reusable piece of the UI that manages its own state and lifecycle. For instance, you can create a "TodoItem" as a LuAct component that displays a single ToDo item and handles actions like marking it as complete.

Declarative UI:

With LuAct, developers use a declarative approach to describe how the user interface should look. This means you define your UI structure by composing components, and LuAct takes care of rendering and updating the UI based on changes in state or properties.

State Management:

State management in LuAct is inspired by React Hooks, where you use functions like useState to manage the local state of a component. When the state changes, LuAct automatically re-renders the component, ensuring the UI always reflects the current state.

Example:

local value, setValue = LuAct.useState(0)

Here, useState helps maintain and update the state (value) within the component.

Hooks for Reusability:

LuAct provides various hooks that allow developers to add reusable logic to their components. Hooks like useEffect, useMemo, useCallback, and useRef are similar to their React counterparts and help with managing side effects, optimizing performance, and maintaining references across renders.

Rendering and Component Lifecycle:

LuAct manages component lifecycles, making it easy for developers to know when a component is being created, updated, or destroyed. It provides the necessary hooks to manage initialization and clean-up logic, such as rendering effects after the component has mounted or re-rendered.

Functional Approach:

LuAct components are implemented using functional programming. This approach makes them simpler and more predictable, as they do not rely on internal state mutation like traditional object-oriented components. Each LuAct component is defined as a function that takes props and returns UI elements.

Virtual DOM and Diffing:

LuAct implements a Virtual DOM concept, similar to React, to optimize rendering. It keeps a virtual representation of the DOM in memory and uses a diffing algorithm to determine the minimal set of changes required to update the actual DOM. This ensures that UI updates are efficient and performance is optimized.

Chakra UI Integration:

Components like Flex, VStack, and Text use Chakra UI, which provides a set of pre-built UI components for styling and layout. This means that you can quickly build sophisticated and consistent UIs using these components.

Example Usage

Here's an example of how LuAct is used to create a simple UI component:

local VStack = uiFactory("ChakraUi::VStack")
local Text = uiFactory("ChakraUi::Text")
local Button = uiFactory("ChakraUi::Button")

return LuAct.createComponent(function(props)
  local count, setCount = LuAct.useState(0)

  return VStack{}
    + Text{ text = "Counter: " .. count }
    + Button{
        text = "Increment",
        onClick = function()
          setCount(count + 1)
        end,
      }
end)

In this example:

TENUM® provides a simple helper function, often called uiFactory, to instantiate Chakra components in Lua.
useState is used to manage the count state.
The UI is built using Chakra UI components (VStack, Text, Button).
When the button is clicked, the onClick handler updates the count using setCount, which triggers a re-render of the component.

Last modified: 11 April 2025