🌊 Flow

A Flexbox layouting engine for Lua

About

Flow aims to be a high-performance Flexbox layout engine that adheres closely to the Flexbox specification. It is based on Meta's Yoga library. For more details, refer to the Acknowledgements section.

Testing

Adding Tests

Flow generates many of its tests automatically from HTML fixtures. These fixtures describe the node structure and are rendered in Chrome to get expected layout outcomes. To add new fixtures, place them in the scripts/gentest/fixtures directory.

<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
  <div style="width: 50px; height: 50px;"></div>
</div>

To generate new tests:

1. Navigate to the scripts/gentest directory and run npm install to set up the test generator.
2. Execute node index.js in the same directory.

Running Tests

Roblox Studio is required to execute Flow's benchmarks unit tests. See this issue for more details.

To run tests in Roblox Studio:

1. Use just install-packages to set up required packages.
2. Build the project via rojo build --output Flow.rbxl.
3. Open the generated Roblox file and toggle the RunBench or RunTests scripts as needed (found under ServerScriptService).
4. Run the game and the results will be printed to the output.

Benchmarks

TODO: Add benchmarks here

Acknowledgements

Flow is a Lua adaptation of Typeflex, a Typescript port of Yoga. It also incorporates some work by Roblox for Flexbox exploration in Lua.

As time goes on, it's likely Flow will deviate from Typeflex and align more closely with upstream Yoga. See this issue for more details.