484118c89b
Summary: `child.offsetLeft/Top` calculates the offset from child to its nearest positioned ancestor, not its direct parent. These are often the same and have not mattered in the past since we have not supported position static. Since are are in the process of supporting that, we would like our tests to be usable so this adjusts the gentest methodology to only speak the same language as Yoga - that is left/top are always relative to direct parents. It works by using `getBoundingClientRect().left/top` instead. Then we pass that down to children and subtract it from the childs `getBoundingClientRect()` to get the position relative to the parent. Note we have to round the final result as `child.offsetLeft/Top` is rounded. Reviewed By: NickGerleman Differential Revision: D51053629 fbshipit-source-id: 8809588d12953565228ae50fdf38197213c46182
yoga-layout
This package provides prebuilt WebAssembly bindings for the Yoga layout engine.
Usage
import {Yoga, Align} from 'yoga-layout';
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();
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.
ES Modules
yoga-layout is only provided as an ES Module, relying on top-level await. This allows providing a synchronous API, while still allowing async WebAssembly compilation in browsers, and will allow eventual usage of ESM/WASM interop.
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