c60050d0cb
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1380 X-link: https://github.com/facebook/react-native/pull/39433 Back when rolling out flex gap, we encountered a bug where gap was added to the end of the main axis when a size was not specified. During flex line justification/sizing, we calculate the amount of space that should be in between children. We erroneously add this, even after the last child element. For `justify-content`, this space between children is derived from free space along the axis. The only time we have free space is if we had a dimension/dimension constraint already set on the parent. In this case, the extra space added to the end of the flex line is usually never noticed, because we bound `maxLineMainDim` to container dimension constraints at the end of layout, and the error doesn't effect how any children are positioned or sized. There was at least one screenshot test where this issue showed up though, and I was able to add a slightly different repro where we may have free space without a definite dimension by enforcing a min dimension and not stretching. {F1091401183} The new reference is correct, and looking back at diffs, is what this seemed to originally look like when added three years ago. Seems like there may have been a potential regression, but I didn't spot anything suspicious when I looked around the code history. `betweenMainDim` may still be set for `gap` even if we don't have a sized parent, which makes the extra space propagated to `maxLineMainDim` effect parent size. Because we were in a code freeze, I opted to have us go with a solution just effecting flex gap, instead of the right one, in case there were any side effects. This cleans up the code to use the right calculation everywhere, and fixes a separate bug, where `endOfLineIndex` and `startOfLineIndex` may not be the last/first in the line if they are out of the layout flow (absolutely positioned, or display: none_ See the original conversation on https://github.com/facebook/yoga/pull/1188 Reviewed By: javache Differential Revision: D49260049 fbshipit-source-id: 218552c5ff938668b9f257df7a1493e13ded4d0d
yoga-layout
This package provides prebuilt JavaScript bindings for the Yoga layout engine. Both WebAssembly and asm.js variants are packaged, with the optimal loaded based on platform.
Usage
The default entrypoint provides an asynchronous loader function to return a Yoga instance.
import {loadYoga, Align} from 'yoga-layout';
const Yoga = await loadYoga();
const node = Yoga.Node.create();
node.setAlignContent(Align.Center);
An alternative synchronous API is provided for compatibility, but requires using asm.js in browsers instead of WebAssembly, leading to worse performance and larger assets.
import Yoga, {Align} from 'yoga-layout/sync';
const node = Yoga.Node.create();
node.setAlignContent(Align.Center);
Objects created by Yoga.<>.create() are not automatically garbage collected and should be freed once they are no longer in use.
// Free a config
config.free();
// Free a tree of Nodes
node.freeRecursive();
// Free a single Node
node.free();
Selecting WebAssembly or asm.js
For better performance and smaller packages, WebAssembly is preferred to asm.js where available. yoga-layout tries to provide the right default using export maps so that platforms which can take advantage of WebAssembly use it by default.
Different entrypoints are exposed to choose a flavor explicitly.
import {loadYoga} from 'yoga-layout/wasm-async';
Using TypeScript
This package provides out-of-the-box TypeScript typings so long as tsc is configured to support ESM resolution. It is recommended to set moduleResolution: 'bundler' or moduleResolution: node16 in your tsconfig.json according to your environment.
Contributing
Requirements
- Emscripten SDK
- CMake >= 3.13
- (Optional) ninja, for faster builds
Building
git clone https://github.com/facebook/yoga.git
cd yoga/javascript
yarn install
yarn build
Testing
# Build and test all entrypoints
yarn test
# Build and test a specific entrypoint
yarn test:asmjs-sync