React Lua

repository·main·Indexed 20 days ago

https://github.com/jsdotlua/react-lua

A high-performance Lua translation of ReactJS 17.x designed for Lua and Roblox environments with Luau type support. This community fork includes ports of core React packages such as react-reconciler, scheduler, react-is, and react-shallow-renderer, as well as a Roblox-opinionated renderer (react-roblox-reconciler) and a compatibility layer for Roact 1.4.0 (roact-compat).

Tokens
28K
Snippets
87
Records
140
Agent score
69%

What's inside react-lua

  1. What is roact-compat?

    main

    roact-compat is a thin compatibility layer designed to bridge Roact 1.4.0 with the newer Roact alignment effort (often called "Roact 17").

    It is not an upstream package; instead, it is a specialized layer used to encapsulate specific deviations required to maintain compatibility with production Roact environments during the transition to the new alignment.

  2. Overview of ReactNoopRenderer

    main
    ReactNoopRenderer is a Roblox Lua port of the react-noop-renderer package from the original React repository. It provides a 'no-op' (no operation) renderer, which is typically used for testing or for scenarios where you want to execute React logic (like hooks or component lifecycles) without actually rendering to a physical UI or DOM.
  3. Overview of react-cache

    main

    The react-cache package provides a basic caching mechanism for React applications. It is primarily intended as a reference implementation for more advanced caching strategies and is designed to be used alongside experimental React features.

    Warning: This package is unstable and intended for demonstration purposes only. Do not use it in a production application.

  4. Overview of React Lua

    main

    React Lua is a Roblox Lua port of the official react package from Facebook's React. It serves as the main entry point for using React within a Lua/Roblox environment.

    Note on Implementation: This port includes significant deviations in ReactBaseClasses.lua to better accommodate Lua-specific idioms for objects, constructors, and inheritance compared to the original JavaScript implementation.

  5. Overview of React Lua

    main

    React Lua is a comprehensive translation of ReactJS 17.x from JavaScript into Lua. It is designed for high performance and correctness, specifically targeting the Lua and Roblox ecosystems.

    Key features include:

    • Luau Type Annotations: Upstream Flowtype and DefinitelyTyped definitions are translated into Luau types where possible.
    • Version Alignment: Major and minor versions align with upstream ReactJS (currently 17.x), making most React JS advice, articles, and patterns applicable to React Lua.
    • Community-Driven: This repository is a community fork of roblox/react-lua, intended to provide a public, contributable, and easily accessible version of React for the global Lua community.
  6. Use react-is for element type checking

    main
    The @jsdotlua/react-is package is a Roblox Lua port of the original React react-is package. It provides constants and runtime check functions used to identify various valid types of React elements. This is useful when you need to perform type checks on elements or components during runtime to ensure they match expected patterns.
  7. Understand the shared module in React Lua

    main

    The shared module is a Roblox Lua port of the shared pseudo-package from the original React monorepo. It provides common utilities and definitions used across the React ecosystem.

    Note that because this is a port to Luau, some behaviors and types differ from the JavaScript original:

    • Types: Complex Flow-type definitions from ReactTypes.js are simplified into a stub named ReactTypes.roblox.lua.
    • Stack Frames: ReactComponentStackFrame.roblox.lua is a partially-ported stub. It does not yet contain the full logic for parsing/navigating JS-specific stack structures.
    • Element Validation: isValidElement.lua has slight modifications to accommodate the fact that in this port, Components and PureComponents are tables, whereas in JavaScript they are functions.
  8. Understand react-test-renderer

    main

    react-test-renderer is a Roblox Lua port of the react-test-reconciler package from React. It is designed for running integration-level tests.

    Current Status: 🔨 Partially Ported.

    Currently, the package only includes configurations for testing with the noop renderer. The actual test renderer implementation is currently excluded from this port.