Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1617
tsia, this was added recently and did not exist in the old docs
Reviewed By: yungsters
Differential Revision: D54830687
fbshipit-source-id: bbc7c833fdabe281367edeb0fbdc85960fe982fb
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1616
This is based on a few comments earlier in the stack and my own discretion on what should change. But I went through all of the examples and changed the following:
* Only add code tick marks in a few cases where it would make sense. Things like `start` and `end`, `undefined` as a value, etc. There ends up not being that many after this. Previously, any property or value was tick marked even if it was more of a concept than actual code. **I replaced those cases with a link to their respective documentation as I feel like this keeps the indication that this is a keyword without labeling it as code**.
* Any reference to "element" was changed to "node"
* Capitalize words that follow a colon
* Run code examples through prettier for consistent style
Reviewed By: yungsters
Differential Revision: D54816609
fbshipit-source-id: 20ee925cf46bd1c519cc88bab9327321e926ac56
Summary: Remove some outdated information and make sure that npmjs shows the builtin TypeScript typings (now that we no longer have clever resolution schemes).
Reviewed By: javache
Differential Revision: D54788636
fbshipit-source-id: 76e7663924189fd68ac62b27730f44213b13ad85
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1608
Fixes up layout when embedded into document, and removes the copy button taking more horizontal real estate than it is worth, when we want to show a horizontal playground at 75% width.
Before:
{F1467611957}
{F1467613069}
{F1467613795}
After:
{F1467611817}
{F1467612896}
{F1467613557}
Reviewed By: javache
Differential Revision: D54787261
fbshipit-source-id: 2177d896baf81971d1b979c060eecf51535de4c5
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1599
tsia. Had to add JS api support for set/get direction
Reviewed By: yungsters
Differential Revision: D54778992
fbshipit-source-id: 346152e1d61c80aa524b515e8b30a96fe32fe7c3
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1593
X-link: https://github.com/facebook/react-native/pull/43417
There was a bug where we did not position absolute nodes correctly if the static node had a different main/cross axis from the containing node. This fixes that. The change is somewhat complicated unfortunately but I tried to add sufficient comments to explain what is happening
Reviewed By: NickGerleman
Differential Revision: D54703955
fbshipit-source-id: 096c643f61d4f9bb3ee6278d675ebd69b57350d7
Summary:
X-link: https://github.com/facebook/react-native/pull/43405
Pull Request resolved: https://github.com/facebook/yoga/pull/1592
Fixes https://github.com/facebook/yoga/issues/1590
Yoga may be built with a high warning level. This is helpful in letting Yoga be used in more places, and finding defects. We currently set these in the internal BUCK build, the CMake reference build, and the Yoga Standalone (not RN) CocoaPods build.
Yoga's reference CMake build and spec are consumed today by users of Yoga, instead of just Yoga developers. Here, it makes more sense to avoid anything that could break compiler-to-compiler compatibility.
We default these to a less intense (`-Wall -Werror`). I kept `/W4`, for pragmatic reasons, and since it is relatively standard for MSVC.
We continue to build with strict flags on Buck build on Clang.
Reviewed By: cortinico
Differential Revision: D54735661
fbshipit-source-id: 130e35ac9dcffa2f7e70e48d18770f1275864e2a
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1589
Adds a skeleton to the new website of documentation and such for us to fill out.
Reviewed By: joevilches
Differential Revision: D54567186
fbshipit-source-id: 700dfe0787fcb9806c3daa0675e838540119bbc0
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1587
Adds release notes for Yoga 3.0. Tentatively going to try to polish up the rest of the website bits, to be able to put this out on Monday.
If we get the website bits finished, I will add some bits about the new documentation.
Reviewed By: joevilches
Differential Revision: D54560841
fbshipit-source-id: 237f94985d2b804cf5a1e1737a23dc8a7a03695a
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1588
This was previously running on Ubuntu, but just happened to work until the setup job assumed macOS. Run the job on macOS.
Reviewed By: cipolleschi
Differential Revision: D54563775
fbshipit-source-id: 2311029cf9b56527608e9cb000d5c09320607a99
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1585
When used alone, yoga has no visibility over the USE_FRAMEWORKS variable set by React Native.
In this case, there is no other way to know whether the current target that will install the spec is using use_framewors or not. As a failsafe, condition, let's always add the `"$(PODS_TARGET_SRCROOT)"` to the search paths to make sure that archiving won't fail.
Whe used in other context, that should not be a problem: search paths are just directory Xcode uses to find headers that are needed.
Reviewed By: NickGerleman
Differential Revision: D54417386
fbshipit-source-id: aa2ae41c077e4346c0417c73291a37c992a06b58
Summary:
X-link: https://github.com/facebook/litho/pull/976
Pull Request resolved: https://github.com/facebook/yoga/pull/1586
X-link: https://github.com/facebook/react-native/pull/43299
Add the React Clang Tidy config to Yoga, run the auto fixes, and make some manual mechanical tweaks.
Notably, the automatic changes to the infra for generating a Yoga tree from JSON capture make it 70% faster.
Before:
{F1463947076}
After:
{F1463946802}
This also cleans up all the no-op shallow const parameters in headers.
{F1463943386}
Not all checks are available in all environments, but that is okay, as Clang Tidy will gracefully skip them.
Changelog: [Internal]
Reviewed By: sammy-SC
Differential Revision: D54461054
fbshipit-source-id: dbd2d9ce51afd3174d1f2c6d439fa7d08baff46f
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1581
This is better than just trusting the order of the measure func call. Now each measure function I/O is associated with a node in the JSON.
Reviewed By: NickGerleman
Differential Revision: D53776790
fbshipit-source-id: 793cf2d9cbf6f663d24848af0af30aa297614eea
Summary:
To sanity check that a capture is working as expected when running benchmark
We could maybe even throw here as a bad measure function will throw off the rest of the benchmark.
Reviewed By: NickGerleman
Differential Revision: D53681506
fbshipit-source-id: f5ab7e00e76df0ac899d62c3f6b4535b3780d45d
Summary: A much smaller tree than the previous one. It only has 100 or so nodes
Reviewed By: NickGerleman
Differential Revision: D53632451
fbshipit-source-id: 1268499fa768f3b6673ff8bcedac23cf6d9395ac
Summary: You need to provide the benchmark binary with a path to the captures. This is annoying and there is not a great way to do this in c++ that is cross-plat. So I just made this bash script to ease it. It can do buck and cmake.
Reviewed By: NickGerleman
Differential Revision: D53632438
fbshipit-source-id: 98b0ad52f91f2581e09f787da24f2ec2fff58bf4
Summary:
In addition to all the state that gets set on the node that is easy to serialize - like floats, enums, bools, etc - we also need to serialize measure functions. This is because these functions take a nontrivial amount of time up during layout and we should capture that. Also, they are important to the ability to truly replay layout as it was captured as the results of the measure functions determine many of the steps the layout algorithm takes.
Capturing this is rather tricky however, but I think I found a solution that is relatively simple and non-error prone. Essentially, since we are capturing the entire tree and virtually every input that goes into the flexbox algorithm, we *should* be able to replay layout exactly as it was captured. This means that the order in which measure functions are called *should* be the same. If this is the case, then all we need to do to capture the measure functions is store their input, output, and duration in a big array. During deserialization we just keep track of an index and use that to determine which measure function we should call. That is the premise behind what happens in this diff. In theory the algorithm could change and the capture would be wrong but it is easy enough to recapture again. Additionally we need to dirty the tree so that we get rid of caching which might omit some measure func calls
In order to capture you need to insert a method exposed by CaptureTree.h into the client measure func, which is kind of annoying but not that bad. In future diffs I will put a macro in place to make this even easier.
I also add our first capture! Which is of a large react native desktop app
Reviewed By: NickGerleman
Differential Revision: D53581121
fbshipit-source-id: 876a230208d67f0ecf76844a4f1b80048353aae2
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1575
If we want to replay layouts for benchmark, we should also capture the inputs. This diff does that as well as changing the API in CaptureTree.h. We now expose YGCalculateLayoutWithCapture designed to be a drop-in replacement for YGCalculateLayout. This allows us to have a bit more control on the order of everything and lets us capture measure functions in the next diff much easier.
Reviewed By: NickGerleman
Differential Revision: D53444261
fbshipit-source-id: 616e39153c21e7b472911502b6a717e92c88a4d1
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1573
Noticed a recent stack of commits cause the MVSC builds of benchmark to fail. This was due to forgetting to call `.string()` of a path and trying to escape a character that cannot be escaped.
Reviewed By: philIip
Differential Revision: D53461723
fbshipit-source-id: b6cc034d53b3a61929012965e257a3984c3bff47
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1569
Added a `benchmark` function that takes a path representing a directory to read captures from. This is supplied by the caller due to annoyance with filesystem access in C++. This calls into timing code with <chrono> and prints it out to the console.
Reviewed By: NickGerleman
Differential Revision: D53104632
fbshipit-source-id: fe8bcb0a87198701865fb04193894591d2eff821
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1566
In the previous diffs we serialized the in-memory representation of a node into json. This diff exposes a `generateBenchmark` method that reads from that json executes the proper public Yoga API functions to recreate the same tree. It then calls calculate layout so that we can time that in the next diff.
This diff is really only focusing on the core aspects of a yoga tree like style, children, and calculating layout; there are still more things to add coming up:
* Support for configs, experiments, and errata
* Support for measure functions
* Support for general node state that is not style (like always forming a containing block)
* Actually running all of these benchmarks together
* Tests
Reviewed By: NickGerleman
Differential Revision: D52987588
fbshipit-source-id: 7f7c9ca9956f693be62bc5e3cebdf1aed6f58aec
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1565
This adds a `captureTree` method intended to be injected in somewhere where you would like a JSON representation of a yoga tree. Right now it is very simple and just calls on `nodeToString` to serialize a node into JSON, and then saves that into a file in the given path. Some buck file changes needed to be done as well to use this in other files.
Reviewed By: NickGerleman
Differential Revision: D52972995
fbshipit-source-id: f4e09a815edef92ab959cfc76bacccbce225d940
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1563
X-link: https://github.com/facebook/react-native/pull/42645
We want to be able to capture Yoga trees in production. To do this we need to serialize and deserialize the in-memory representation of a tree. We have a way to turn a tree into html using NodeToString.cpp but that outputs html, which is going to be hard to deserialize. So, I added the [nlohmann json library](https://github.com/nlohmann/json/tree/develop?tab=readme-ov-file) so that we can serialize into JSON instead. Then we need to change the inner workings of NodeToString.cpp to use this library instead of its html.
One of the bigger structural changes I made was standardizing the checks need to append something to the string. What we want is to only add something if it is not the default style. The existing logic does that but bears the burden of knowing what the default of certain styles actually is. This just calls the getter on a new node to obtain that value, which should simplify things a bit.
Reviewed By: NickGerleman
Differential Revision: D52929268
fbshipit-source-id: 06eff1e10061bcb55fcdeb6f3ebe7e95155b4c86
Summary:
X-link: https://github.com/facebook/react-native/pull/42688
Pull Request resolved: https://github.com/facebook/yoga/pull/1567
We are planning on overhauling NodeToString to output JSON instead of HTML for the purposes of better benchmarking and capturing trees in JSON format to benchmark later. This gives us a bit of a headache as we have to revise several build files to ensure this new library works, ensure that it is only included in certain debug builds, and deal with the benchmark <-> internal cross boundary that arises as the benchmark code (which is a separate binary) tries to interact with it.
On top of it all this is really not used at all.
The plan is to rip out this functionality and just put it in a separate binary that one can include if they really want to debug. That means that it cannot exist in the public API, so I am removing it here.
Private internals come next
Changelog: [Internal]
Reviewed By: NickGerleman
Differential Revision: D53137544
fbshipit-source-id: 7571d243b914cd9bf09ac2418d9a1b86d1bee64a
Summary:
X-link: https://github.com/facebook/react-native/pull/42411
Pull Request resolved: https://github.com/facebook/yoga/pull/1562
I added a small regression D52605596, where negative border would not be correctly floored. This fixes that, and starts adding tests specifically targeting the computed style API, now decoupled from the yoga node.
Reviewed By: joevilches
Differential Revision: D52930827
fbshipit-source-id: e165dade705a8de54c92d65f3664c9081137788c
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1561
Back when I introduced the inline functions that would get the edge according to the writing direction I swapped some instances of `setLayoutPosition` which wrote to the flexStart edge erroneously. We should basically never read from some inline style and write to the flex edge. This changes them all to use the flex values.
Reviewed By: NickGerleman
Differential Revision: D52921401
fbshipit-source-id: 92b74d652018596134c91827806272ed7418ef6c
