Summary: This is meant to show a possible route format for a persistent form of Yoga. Where previous layouts can remain intact while still taking advantage of incremental layout by reusing previous subtrees. ```c YGNodeRef YGNodeClone(const YGNodeRef node); ``` The core of this functionality is a new API to clone an existing node. This makes a new detached node with all the same values as the previous one. Conceptually this makes the original node "frozen" from that point on. It's now immutable. (This is not yet enforced at runtime in this PR but something we should add.) Since the original is frozen, we reuse the children set from the original node. Their parent pointers still point back to the original tree though. The cloned node is still mutable. It can have its styles updated, and nodes can be inserted or deleted. If an insertion/deletion happens on a cloned node whose children were reused, it'll first shallow clone its children automatically. As a convenience I also added an API to clear all children: ```c void YGNodeRemoveAllChildren(const YGNodeRef node); ``` During insert/delete, or as a result of layout a set of reused children may need to be first cloned. A kind of copy-on-write. When that happens, the host may want to respond. E.g. by updating the `context` such as by cloning any wrapper objects and attaching them to the new node. ```c typedef void (*YGNodeClonedFunc)(YGNodeRef oldNode, YGNodeRef newNode, YGNodeRef parent, int childIndex); void YGConfigSetNodeClonedFunc(YGConfigRef config, YGNodeClonedFunc callback); ``` This PR doesn't change any existing semantics for trees that are not first cloned. It's possible for a single node to exist in two trees at once and be used by multiple threads. Therefore it's not safe to recursively free a whole tree when you use persistence. To solve this, any user of the library has to manually manage ref counting or tracing GC. E.g. by replicating the tree structure in a wrapper. In a follow up we could consider moving ref counting into Yoga. Closes https://github.com/facebook/yoga/pull/636 Reviewed By: emilsjolander Differential Revision: D5941921 Pulled By: sebmarkbage fbshipit-source-id: c8e93421824c112d09c4773bed4e3141b6491ccf
Yoga

Building
Yoga builds with buck. Make sure you install buck before contributing to Yoga. Yoga's main implementation is in C, with bindings to supported languages and frameworks. When making changes to Yoga please ensure the changes are also propagated to these bindings when applicable.
Testing
For testing we rely on gtest as a submodule. After cloning Yoga run git submodule init
followed by git submodule update
.
For any changes you make you should ensure that all the tests are passing. In case you make any fixes or additions to the library please also add tests for that change to ensure we don't break anything in the future. Tests are located in the tests
directory. Run the tests by executing buck test //:yoga
.
Instead of manually writing a test which ensures parity with web implementations of Flexbox you can run gentest/gentest.rb
to generated a test for you. You can write html which you want to verify in Yoga, in gentest/fixtures
folder, such as the following.
<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
<div style="width: 50px; height: 50px;"></div>
</div>
Run gentest/gentest.rb
to generate test code and re-run buck test //:yoga
to validate the behavior. One test case will be generated for every root div
in the input html.
You may need to install the latest watir-webdriver gem (gem install watir-webdriver
) and ChromeDriver to run gentest/gentest.rb
Ruby script.
.NET
.NET testing is not integrated in buck yet, you might need to set up .NET testing environment. We have a script which to launch C# test on macOS, csharp/tests/Facebook.Yoga/test_macos.sh
.
Code style
For the main C implementation of Yoga clang-format is used to ensure a consistent code style. Please run bash format.sh
before submitting a pull request. For other languages just try to follow the current code style.
Benchmarks
Benchmarks are located in benchmark/YGBenchmark.c
and can be run with buck run //benchmark:benchmark
. If you think your change has affected performance please run this before and after your change to validate that nothing has regressed. Benchmarks are run on every commit in CI.
JavaScript
Installing through NPM
npm install yoga-layout
By default this will install the library and try to build for all platforms (node, browser asm, and standalone webpack). You may receive errors if you do not have the required platform development tools already installed. To preset the platform you'd like to build for you can set a .npmrc property first.
npm config set yoga-layout:platform standalone
This will now only run the standalone webpack build upon install.
Build Platforms
name | description |
---|---|
all (default) | Builds all of these platforms. |
browser | Builds asm js browser version. |
node | Builds node js version. |
standalone | Runs webpack. |
none | Does nothing. You can use the prepackaged libs. |