Commit Graph

2587 Commits

Author SHA1 Message Date
Joe Vilches
f8d048bb1a Fix bug where we used border box for size of containing block in a certain case (#1486)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1486

X-link: https://github.com/facebook/react-native/pull/41688

Somehow missed this case. We never want to measure the CB as that gets border box but we want padding box

Reviewed By: NickGerleman

Differential Revision: D51376309

fbshipit-source-id: 2b5119c421ef92fadb28a70254cb7fe02aeb8c28
2023-12-07 21:25:45 -08:00
Joe Vilches
d1dda2185e Fix bug with align start not taking into account parent padding (#1484)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1484

X-link: https://github.com/facebook/react-native/pull/41687

Tsia. Added test and accounted for parent padding

Reviewed By: NickGerleman

Differential Revision: D51374086

fbshipit-source-id: ed9d79887aa1613ea93c10c639cd1465271d23d8
2023-12-07 21:25:45 -08:00
Joe Vilches
a5c955a579 Relayout test for containing block changing size (#1483)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1483

This test is for ensuring caching does not break layout when a CB changes. No changes were needed to get this passing it just works this way with the implementation we chose earlier.

Reviewed By: NickGerleman

Differential Revision: D51333812

fbshipit-source-id: b3b603fc641d470cb61e63c44c71f7544f3c7727
2023-12-07 21:25:45 -08:00
Joe Vilches
9b87d8b3f3 Fix issue where percentages were off of the border box, not padding box (#1485)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1485

X-link: https://github.com/facebook/react-native/pull/41686

The size of the containing block is the size of the padding box of the containing node for absolute nodes. We were looking at  `containingNode->getLayout().measuredDimension(Dimension::Width)` which is the border box. So we need to subtract the border from this.

Added a test that was failing before this change as well

Reviewed By: NickGerleman

Differential Revision: D51330526

fbshipit-source-id: adc448dfb71b54f1bbed0d9d61c5553bda4b106c
2023-12-07 21:25:45 -08:00
Joe Vilches
f6c4a8e8e4 Make position static behave like position static (#1482)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1482

X-link: https://github.com/facebook/react-native/pull/41685

This is the final step (that I know of) to get the core features of static working. Here we turn on all of the tests and pass down the correct owner size for the call to `calculateLayoutInternal` that is in `layoutAbsoluteChild`

Reviewed By: NickGerleman

Differential Revision: D51293606

fbshipit-source-id: 972259e7ebecb19b55aef2ef866bd7cb57aaf0ca
2023-12-07 21:25:45 -08:00
Joe Vilches
1b146cd8a8 Make positionAbsoluteChild the sole place that matters when determining absolute node's position (#1481)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1481

X-link: https://github.com/facebook/react-native/pull/41684

Absolute nodes can be laid out by themselves and do not have to care about what is happening to their siblings. Because of this we can make `positionAbsoluteChild` the sole place where we handle this logic. Right now that is scattered around algorithm with many `if (child is absolute)` cases everywhere. This makes implementing position static a lot harder since we are relying on the CB to do all this work, not the parent.

With this change the only time we set position for an absolute node and it matter (i.e. not overwritten) is in `positionAbsoluteChild`

Reviewed By: NickGerleman

Differential Revision: D51290723

fbshipit-source-id: 405d81b1d28826cbb0323dc117c406a44d381dff
2023-12-07 21:25:45 -08:00
Joe Vilches
c93734f579 Fix issue in gentest where border-<edge> would add a border to test (#1496)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1496

Gentest code has a problem where we try to apply a border in our test when the web browser is not actually adding one. This happens when we do something like `border-top: 10px`. This will actually set the style of the border to `initial` which is just `none`, so nothing renders. This is causing at least 1 test to pass when it actually fails.

I changed it so we ignore setting this value if the style is one of these values. I then re-ran the gentest code and excluded the now failing test (which gets fixed in my static stack).

Reviewed By: NickGerleman

Differential Revision: D51831754

fbshipit-source-id: a325e4a42b2d7cd6f19efc6cd5a2445574467fb7
2023-12-05 13:30:03 -08:00
Nicola Corti
7b3b66d288 Re-enabled disabled tests ReactPropForShadowNodeSpecTest and ReactPropForShadowNodeSetterTest (#1494)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1494

X-link: https://github.com/facebook/react-native/pull/41788

Those tests are currently disabled due to Yoga attempting to do JNI calls.
I've added infra to bypass .so loading during tests, and we should be good to re-enable those tests by now.

Changelog:
[Internal] [Changed] - Re-enabled disabled tests ReactPropForShadowNodeSpecTest and ReactPropForShadowNodeSetterTest

Reviewed By: NickGerleman

Differential Revision: D51814491

fbshipit-source-id: adbbace19c94a0c6d8947f61221fafafd7797ac8
2023-12-05 07:14:20 -08:00
Joe Vilches
dde0fda9f5 New file for layout methods related to absolute children (#1495)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1495

X-link: https://github.com/facebook/react-native/pull/41794

This is a copy of D51369722 to make it so that it preserves the file history

CalculateLayout.cpp is massive and approaching 3k lines. I added a few large functions dealing with layout of absolute nodes and was thinking it would be nice if that logic was just in its own file so it was more isolated and easier to reason about. So I made AbsoluteLayout.cpp and AbsoluteLayout.h to house this logic. In order for this to work I had to expose calculateLayoutInternal in CalculateLayout.h as layoutAbsoluteChild calls it. This is unideal and I would like to find a better way...

I also make LayoutUtils.h to house misc small helper methods as they are called in AbsoluteLayout.cpp and CalculateLayout.cpp

Reviewed By: NickGerleman

Differential Revision: D51824115

fbshipit-source-id: 9b27449e3c1516492c01e6167a6b2c4568a33807
2023-12-04 19:35:30 -08:00
Joe Vilches
7893c4bd85 Fix issue where start/end would not be respected in flex edge getters (#1479)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1479

X-link: https://github.com/facebook/react-native/pull/41682

There are two ways to get the value of a style for a specific edge right now:

1) From the inline start/end edge which is determined via the writing direction (ltr or rtl), assuming you do not have errata on
2) From the flex start/end edge which is determined via the flex direction (row, row-reverse, column, column-reverse)

There is a weird curiosity in the second case: you can define a style to be on the "start" or "end" edge when writing the stylex/css. The physical edge that this refers to is dependent on the writing direction. So `start` would be `left` in `ltr` and `right` in `rtl`, with `end` the opposite. It is **never** determined via the flex direction. Additionally, `start`/`end` takes precedence over the physical edge it corresponds to in the case both are defined.

So, all of this means that to actually get the value of a style from the flex start/end edges, we need to account for the case that one of these relative edges was defined and would overwrite any physical edge. Since this mapping is solely determined by the writing direction, we need to pass that in to all the flex start/end getters and do that logic. This is done in  `flexStartRelativeEdge`/`flexEndRelativeEdge` which was added earlier but for some reason only being used on border.

Reviewed By: NickGerleman

Differential Revision: D51293315

fbshipit-source-id: 26fafff54827134e7c5b10354ff9bfdf67096f5b
2023-12-04 19:35:30 -08:00
Joe Vilches
4ad9330fb9 Introduce positionAbsoluteChild (#1473)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1473

X-link: https://github.com/facebook/react-native/pull/41491

To simplify the logic a bit I introduce a new function called `positionAbsoluteChild`. This function will, eventually, be the **sole function that matters** when determining the layout position of an absolute node. Because [absolute nodes do not participate in flex layout](https://drafts.csswg.org/css-flexbox/#abspos-items), we can determine the position of said node independently of its siblings. The only information we need are the node itself, its parent, and its containing block - which we have all of in `layoutAbsoluteChild`.

Right now, however, this is purely a BE change with no functionality different. There was a big set of if statements at the end of `layoutAbsoluteChild` that would position the node on the main and cross axis for certain cases. The old code had it so that the main and cross axis had basically the same logic but the code was repeated. This puts that logic, as is, in `positionAbsoluteChild` and calls that from `layoutAbsoluteChild`.

I will soon edit this function to actually do what it is envisioned to do (i.e. be the sole place that position is set for absolute nodes).

Reviewed By: NickGerleman

Differential Revision: D51272855

fbshipit-source-id: 68fa1f0e0f4d595faf2af1d9eaceb467382ca406
2023-12-04 19:35:30 -08:00
Joe Vilches
e042cb102c Use containing block to adjust absolute child position (#1472)
Summary:
X-link: https://github.com/facebook/react-native/pull/41490

Pull Request resolved: https://github.com/facebook/yoga/pull/1472

This change has most of the logic needed for supporting `position: static`. We do two things here that fix a lot of the broken static test:

1) We pass in the containing node to `layoutAbsoluteChild` and use it to properly position the child in the case that insets are defined.
2) We rewrite the absolute child's position to be relative to it's parent in the event that insets are defined for that child (and thus it is positioned relative to its CB). Yoga's layout position has always be relative to parent, so I feel it is easier to just adjust the coordinates of a node to adhere to that design rather than change the consumers of yoga.

The "hard" part of this algorithm is determining how to iterate the offset from the containing block needed to do this translation described above. That is handled in `layoutAbsoluteDescendants`.

Reviewed By: NickGerleman

Differential Revision: D51224327

fbshipit-source-id: ae6dc54fe2a71bebb4090ba21a0afb0125264cbc
2023-12-04 19:35:30 -08:00
Joe Vilches
2222c2c475 Allow the containing block to set trailing position of absolute descendants (#1471)
Summary:
X-link: https://github.com/facebook/react-native/pull/41489

Pull Request resolved: https://github.com/facebook/yoga/pull/1471

If we are going to allow the containing block to layout its absolute descendants and NOT the direct parent then we need to change step 11 which is concerned with setting the trailing position in the case we are row or column reverse. This is the very last step in the function and is positioned that way because it operates on the assumption that all children have their position set by this time. That is no longer a valid assumption if CBs layout their absolute children. In that case the CB also needs to take care of setting the position here.

Because of this problem I moved some things around. It now works like:

* If errata is set, the direct parent will set trailing position for all non absolute children in step 11
* If errata is set the CB will set trailing position of absolute descendants after they are laid out inside of layoutAbsoluteDescendants

Reviewed By: NickGerleman

Differential Revision: D51217291

fbshipit-source-id: a7eea0d3623f9041b73d609a1de2bfb0f0343a26
2023-12-04 19:35:30 -08:00
Joe Vilches
5a24c81672 Let containing blocks layout their absolute descendants, not parents (#1470)
Summary:
X-link: https://github.com/facebook/react-native/pull/41488

Pull Request resolved: https://github.com/facebook/yoga/pull/1470

The way we plan on implementing `position: static` is by changing how we lay out absolutely positioned nodes. Instead of letting their direct parent lay them out we are going to let their containing block handle it. This is useful because by the time the containing block gets to this step it will already know its size, which is needed to ensure that absolute nodes can get the right value with percentage units. Additionally, it means that we can "translate" the position of the absolute nodes to be relative to their parent fairly easily, instead of some second pass that would not be possible with a different design.

This change just gets the core pieces of this process going. It makes it so that containing blocks will layout out absolute descendants that they contain. We also pass in the containing block size to the owner size args for `layoutAbsoluteChild`. This new path will only happen if we have the errata turned off. If there is no positioned ancestor for a given node we just assume the root is. This is not exactly how it works on the web - there is a notion of an initial containing block - but we are not implementing that as of right now.

Reviewed By: NickGerleman

Differential Revision: D51182593

fbshipit-source-id: 88b5730f7f4fec4f33ec64288618e23363091857
2023-12-04 19:35:30 -08:00
Joe Vilches
59bf902a17 Insets no longer apply to statically positioned nodes (#1454)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1454

X-link: https://github.com/facebook/react-native/pull/41369

One of the most basic aspects of statically positioned nodes is that [insets do not apply to them](https://developer.mozilla.org/en-US/docs/Web/CSS/position#static). So I put a guard inside `Node::relativePosition` where we take that into account when setting the position.

Reviewed By: NickGerleman

Differential Revision: D50507808

fbshipit-source-id: 7aab4138b06e60936db0ddb6019a9a30f1ded2db
2023-12-04 19:35:30 -08:00
Nick Gerleman
382faa3f44 Change default back to position: "relative" (#1469)
Summary:
X-link: https://github.com/facebook/react-native/pull/41480

Pull Request resolved: https://github.com/facebook/yoga/pull/1469

The previous version of static didn't do anything inside of Yoga. Now that we're making it do something, this changes the default back to relative so that users with no errata set don't see their deafult styles changing.

Reviewed By: joevilches

Differential Revision: D51182955

fbshipit-source-id: c0ea357694e1367fb6786f1907dfff784b19a4bc
2023-11-28 18:51:34 -08:00
Nick Gerleman
bb8fd593ff Remove NumericBitfield (#1463)
Summary:
X-link: https://github.com/facebook/react-native/pull/41394

Pull Request resolved: https://github.com/facebook/yoga/pull/1463

Now that are enums are unsigned, and we don't have BitfieldRef, we can convert the last remaining user of NumericBitfield to a plain old bitfield,  for better readability (e.g. the default values), debugability, and less complexity. We also break a cycle which lets us properly group public vs private members.

Reviewed By: joevilches

Differential Revision: D51159415

fbshipit-source-id: 7842a8330eed6061b863de3f175c761dcf4aa2be
2023-11-27 21:20:20 -08:00
Nick Gerleman
9b0fd09ec6 Remove yoga::Style::BitfieldRef (#1459)
Summary:
X-link: https://github.com/facebook/react-native/pull/41393

Pull Request resolved: https://github.com/facebook/yoga/pull/1459

Removes the last of the non setter-style style setters.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D51155925

fbshipit-source-id: 2921c87d95ad36495b7013e592d5169015321545
2023-11-27 21:20:20 -08:00
Nick Gerleman
ed6e91479c Remove yoga::Style::Ref (#1462)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1462

X-link: https://github.com/facebook/react-native/pull/41389

Moves the last usages of `yoga::Style::Ref` to setters.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D51154501

fbshipit-source-id: 52dbca7a76de500a8841387eb59fded463864de7
2023-11-27 21:20:20 -08:00
Nick Gerleman
325ccea068 YGEdge -> yoga::Edge (#1461)
Summary:
X-link: https://github.com/facebook/react-native/pull/41391

Pull Request resolved: https://github.com/facebook/yoga/pull/1461

Converts usages of `YGEdge` within internal APIs to `yoga::Edge` scoped enum.

With the exception of YGUnit which is in its own state of transition, this is the last public yoga enum to need to be moved to scoped enum form for usages internal to the Yoga public API.

Changelog: [internal]

Reviewed By: rshest

Differential Revision: D51152779

fbshipit-source-id: 06554f67bfd7709cbc24fdd9a5474e897e9e95d8
2023-11-25 20:41:22 -08:00
Nick Gerleman
a121483e81 Use CSS terminology for sizing rules (#1460)
Summary:
X-link: https://github.com/facebook/react-native/pull/41390

Pull Request resolved: https://github.com/facebook/yoga/pull/1460

Yoga passes `MeasureMode`/`YGMeasureMode` to express constraints in how a box should be measured, given definite or indefinite available space.

This is modeled after Android [MeasureSpec](https://developer.android.com/reference/android/view/View.MeasureSpec), with a table above `calculateLayoutImpl()` explaining the CSS terms they map to. This can be confusing when flipping between the spec, and code.

This switches internal usages to the CSS terms, but leaves around `YGMeasureMode` since it is the public API passed to measure functions.

Reviewed By: joevilches

Differential Revision: D51068417

fbshipit-source-id: 0a76266a4e7e0cc39996164607229c3c41de2818
2023-11-25 20:41:22 -08:00
Nick Gerleman
aca02406ef CompactValue -> Style::Length (#1458)
Summary:
X-link: https://github.com/facebook/react-native/pull/41392

Pull Request resolved: https://github.com/facebook/yoga/pull/1458

We're moving `CompactValue` to be an internal detail of `yoga::Style`, where users outside of the style will be dealing with a resolved/non-compact representation.

This change renames usages of `CompactValue` to `Style::Length`, which will be Yoga's representation for CSS input lengths. Right now one is just a type alias of the other, but this will let us change the internals of CompactValue with the rest of the world looking the same.

A few factory functions are added to `yoga::value` for creating CSS values. There are some shenanigans around how we want to represent CSS pixels (one YGUnitPoint), when we also end up adding CSS points (slightly larger than one YGUnitPoint). For now, I reused `point` until making other changes.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D51000389

fbshipit-source-id: 00f55e72bfb8aa291b53308f8a62ac8797be490f
2023-11-25 20:41:22 -08:00
Nick Gerleman
a822f2635e Do not expose aggregate style edges (#1477)
Summary:
X-link: https://github.com/facebook/react-native/pull/41610

Pull Request resolved: https://github.com/facebook/yoga/pull/1477

A reland of the main change in D50998164, moving away from exposing compound edge arrays directly.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D51512611

fbshipit-source-id: 2d4ceb89c9d76317feb9074aa271358a3abc0ee1
2023-11-22 22:43:41 -08:00
Nick Gerleman
0ebac779aa Remove YGStyleAccessorsTest (#1476)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1476

Up the stack, Style uses just plain getters and setters. These tests aren't particularly useful enough to update.

Previously landed as part of D50998164

Reviewed By: joevilches

Differential Revision: D51481328

fbshipit-source-id: b0413270fd5951c7c8d783269b08cca9f939ce25
2023-11-22 22:43:41 -08:00
Nick Gerleman
0eb861b459 Don't enable ordinalCount() or bitCount() for bitset enums
Summary:
Bitfield enums are not sequential, so use of these functions on these enums would be invalid.

I looked at whether we could trivially move `bitCount` to template based on `ordinalCount`. `bitCount` must be constexpr, since we use it directly as a bit-field size constant. `log2` and `ceil` to be constexpr, which isn't here until C++ 26.

Reviewed By: javache

Differential Revision: D51518899

fbshipit-source-id: 256f15bbed517be6f90bf43baa43ce96e9259a71
2023-11-22 11:06:31 -08:00
Nick Gerleman
c7c81e3c89 Remove composite border comparisons (#1475)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1475

X-link: https://github.com/facebook/react-native/pull/41568

Removes cases where we rely on comparing composite of Yoga edges, since we are removing that internal API (public API is already one at a time). Extracted from D50998164, with more sound facility for looping through edges.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D51478403

fbshipit-source-id: 162170b91345ff86db44a49a04a2345f0fbd0911
2023-11-21 23:17:32 -08:00
Nick Gerleman
a713a598c8 Fix modulemap typo (#1474)
Summary:
X-link: https://github.com/facebook/react-native/pull/41564

Pull Request resolved: https://github.com/facebook/yoga/pull/1474

Fixes https://github.com/facebook/yoga/issues/1468

We build with Swift, but don't build something consuming Yoga module, and don't use modulemap and CocoaPods. This is a gap in validation we should figure out, but in the meantime, we should fix the typo.

Reviewed By: christophpurrer

Differential Revision: D51472493

fbshipit-source-id: 60e05cc49969f51d5fc4856cf25ce2afede72f36
2023-11-20 14:10:56 -08:00
Nick Gerleman
27af596359 Revert D50998164: Allow lazy resolution of edge dimension values
Differential Revision:
D50998164

Original commit changeset: 248396f9587e

Original Phabricator Diff: D50998164

fbshipit-source-id: 4f592158324d758bb9e3731ced36b8e3587c459c
2023-11-15 18:34:47 -08:00
Nick Gerleman
f2c8acad2c Allow lazy resolution of edge dimension values (#1453)
Summary:
X-link: https://github.com/facebook/react-native/pull/41347

Pull Request resolved: https://github.com/facebook/yoga/pull/1453

This follows the previous patterns used for `Gutters` and `Dimension`, where we hide CompactValue array implementation from `yoga::Style` callers.

This allows a single read of a style to only need access to the resolved values of a single edge, vs all edges. This is cheap now because the interface is the representation, but gets expensive if `StyleValuePool` is the actual implementation.

This prevents us from needing to resolve nine dimensions, in order to read a single value like `marginLeft`. Doing this, in the new style, also lets us remove `IdxRef` from the API.

We unroll the structure dependent parts in the props parsing code, for something more verbose, but also a bit clearer.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D50998164

fbshipit-source-id: 248396f9587e29d62cde05ae7512d8194f60c809
2023-11-14 09:12:35 -08:00
Nick Gerleman
bb892af3a4 Make trunk builds "0.0.0" (#1466)
Summary:
X-link: https://github.com/facebook/react-native/pull/41423

Pull Request resolved: https://github.com/facebook/yoga/pull/1466

Right now Yoga's main branch says it's 2.0.0, and RN's dirsync says its 1.14.0, but the code is really closer to what will be Yoga 3.0.0.

This changes trunk builds to "0.0.0" for clarity, which will be assigned a real version number the first time publishing a new Yoga branch.

This is separately a good practice to prevent the chance of accidental publishes causing damage.

Changelog: [Internal]

Reviewed By: christophpurrer

Differential Revision: D51236778

fbshipit-source-id: 06cac89bcca1c707ce5c00f9c346f627eef6b4bc
2023-11-13 22:09:35 -08:00
Nick Gerleman
8c1a672f92 GitHub Actions Cleanup (#1467)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1467

1. Avoid reusing workflow names between validation and publish jobs, since they show up with the same UI when wanting to adhoc trigger a publish.
2. Merge SwiftPM checks into Validate Apple job
3. Merge remnants of website-next workflow into website workflow (and remove a redundant explicit build step already removed in one workflow)
4. Run more validation on push to release branch
5. Do not run website validation off of main, since it is only ever deployed from main branch

Reviewed By: cipolleschi

Differential Revision: D51236885

fbshipit-source-id: dd8165aa9871f173d8914f345569c6cde1edda72
2023-11-13 03:57:52 -08:00
Nick Gerleman
6f41a27e31 "yogalayout.com" to "yogalayout.dev" (#1465)
Summary:
X-link: https://github.com/facebook/react-native/pull/41420

Pull Request resolved: https://github.com/facebook/yoga/pull/1465

https://yogalayout.com now redirects to https://yogalayout.dev

This replaces references to "yogalayout.com" with "yogalayout.dev", the same website, with a new domain. This includes:
1. Code comments
2. Yoga website config (publish action CNAME, Docusaurus config)
3. Documentation URLs in Yoga packages

Changelog:
[General][Fixed] - "yogalayout.com" to "yogalayout.dev"

Reviewed By: christophpurrer

Differential Revision: D51229587

fbshipit-source-id: b1c336a52aab5e02565071b61430d5435381dc0a
2023-11-13 02:48:29 -08:00
Nick Gerleman
1b1df3a87e Simplify YGConfigSetPointScaleFactor (#1451)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1451

X-link: https://github.com/facebook/react-native/pull/41327

The special meaning of `0.0` is now explained in the function header, and we aren't doing any sort of insensitive compare here, so the code after should be equivalent and a bit simpler.

Reviewed By: yungsters

Differential Revision: D51014264

fbshipit-source-id: 60f4a2df039f74089d5c7fabd4b7d8ac6234ba72
2023-11-10 16:31:46 -08:00
Nick Gerleman
c46ea9c6f5 Modularize and document public API (#1449)
Summary:
X-link: https://github.com/facebook/react-native/pull/41317

Pull Request resolved: https://github.com/facebook/yoga/pull/1449

This aims to clean up the public Yoga C API, by:
1. Documenting public YGNode, YGValue, YGConfig APIs
2. Splitting APIs for specific objects into different header files (because Yoga.h was big enough without documentation)
3. Reordering headers and definitions for consistent grouping

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D50963424

fbshipit-source-id: 45124b7370256fc63aefd6d5b7641466e9a79d3b
2023-11-10 16:31:46 -08:00
Nick Gerleman
12a8d16b62 Remove Yoga-internal.h (#1452)
Summary:
X-link: https://github.com/facebook/react-native/pull/41346

Pull Request resolved: https://github.com/facebook/yoga/pull/1452

This removes the last remnant from `Yoga-interna.h`, `YGNodeDellocate()`. The API is renamed to `YGNodeFinalize` to give it the explicit purpose of freeing the node from a garbage collector, and made public with that documented contract.

With that, every top-level header is now a public API, and Yoga's JNI bindings do not need to rely on private headers anymore.

Changelog: [Internal]

Reviewed By: joevilches

Differential Revision: D51014340

fbshipit-source-id: 553f04b62c78b76f9102cd6197146650955aeec5
2023-11-07 21:27:59 -08:00
Nick Gerleman
9eb8a62739 Remove YGNodeMarkDirtyAndPropagateToDescendants (#1448)
Summary:
X-link: https://github.com/facebook/react-native/pull/41305

Pull Request resolved: https://github.com/facebook/yoga/pull/1448

This should not be part of Yoga's API. If benchmarks want to do this, they still can (though I don't know the ones we have for it are super valuable).

Reviewed By: javache

Differential Revision: D50963933

fbshipit-source-id: 6482bd269928188b6469a358ffde5c4f9f5f9527
2023-11-07 21:27:59 -08:00
Joe Vilches
283e3203f6 Fix issue where absolute children of row-reverse containers would inset on the wrong side (#1446)
Summary:
X-link: https://github.com/facebook/react-native/pull/41293

Pull Request resolved: https://github.com/facebook/yoga/pull/1446

NickGerleman pointed out that my recent changes to fix the slew of row-reverse problems in Yoga actually ended up regressing some parts. Specifically, absolute children of row-reverse containers would have their insets set to the wrong side. So if you set left: 10 it would apply it to the right.

Turns out, in `layoutAbsoluteChild` there were cases where we were applying inlineStart/End values to the flexStart/End edge, which can never be right. So I changed the values to also be flexStart/End as the fix here.

Reviewed By: NickGerleman

Differential Revision: D50945475

fbshipit-source-id: 290de06dcc04e8e644a3a32c127af12fdabb2f75
2023-11-07 11:02:20 -08:00
Joe Vilches
c09554056d Introduce isDefined() and remove cases of !isUndefined() (#1439)
Summary:
X-link: https://github.com/facebook/react-native/pull/41209

Pull Request resolved: https://github.com/facebook/yoga/pull/1439

There are so many instances in this code base where we use the double negative of `!yoga::isUndefined(<something>)`. This is not as easy to read since because of this double negative imo. Additionally, sometimes we have really long chains like `!longVariableName.longFunctionName(longArgumentName).isUndefined()` and it is hard to see that this undefined is inverted.

This just replaces all instances of inverted `isUndefined()` with `isDefined()` so its easier to read.

Reviewed By: NickGerleman

Differential Revision: D50705523

fbshipit-source-id: edc7d3f2cbbae38ddaeb2030a419320caf73feff
2023-11-07 11:02:20 -08:00
Joe Vilches
e90f2a8e2c Simplify getting padding + border for cross axis in algorithm (#1437)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1437

X-link: https://github.com/facebook/react-native/pull/41208

Reading through the sizing logic and this seemed a bit redundant/confusing. Lets use the same function we just used for the main axis for the cross axis as well so people do not think its special. Also we will need one less variable. The reason this was done it seems is because we need the leading padding + border elsewhere so this is technically a few less steps but this is cleaner

Reviewed By: NickGerleman

Differential Revision: D50704177

fbshipit-source-id: 1a091edbfee6482a2bf472aca2980702bd75ad94
2023-11-07 11:02:20 -08:00
Joe Vilches
484118c89b Change gentest to only write position relative to parent
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
2023-11-07 09:57:04 -08:00
Joe Vilches
301ed20296 Remove unused arg in calculateTree in gentest.js
Summary: tsia

Reviewed By: NickGerleman

Differential Revision: D51050456

fbshipit-source-id: bd3ef113bd612f6d257b9adce5501f8e8bb32d26
2023-11-07 09:57:04 -08:00
Nick Gerleman
92860077f9 Port more content to website-next (#1435)
Summary:
This builds upon https://github.com/facebook/yoga/pull/1433 and starts porting over and fixing some of the code in website-next.

1. Create a hero similar to current https://yogalayout.com hero
2. Start moving from `antd` and harcoded colors to [Infima](https://infima.dev/docs/getting-started/introduction/) primitives provided by Docusaurus
3. Replaced some more stock docusaurus assets, links, and text with the ones for Yoga.

There is still a lot to do here (not the least, adding real content), but it's beginning to look like a website, and is already pretty snappy. Eventually I want to get SSR working correctly with Playground, which is still a little broken in the port.

Pull Request resolved: https://github.com/facebook/yoga/pull/1435

Test Plan:
**Gatsby Original**
<img width="1795" alt="image" src="https://github.com/facebook/yoga/assets/835219/7670d53a-00a8-4146-a100-e4a05dd77488">

**New (light mode)**
<img width="800" alt="image" src="https://github.com/facebook/yoga/assets/835219/ebe11d15-5f6f-445f-bcc8-9ec51ecfac62">

**New (dark mode)**
<img width="800" alt="image" src="https://github.com/facebook/yoga/assets/835219/ca44a492-46df-410a-8303-baec3029ec49">

Reviewed By: yungsters

Differential Revision: D50523462

Pulled By: NickGerleman

fbshipit-source-id: 61b4610104f695a4e38a7d4bb6a0c2488bd6f89e
2023-11-03 05:23:56 -07:00
Joe Vilches
a20559063e Regenerate YGStaticPositionTest.test.ts that was failing github CI checks (#1447)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1447

Just ran

```
ruby xplat/yoga/gentest/gentest.rb
```

It seems that D50453324 changed a bunch of the import directories in these test files but for some reason it did not get picked up for this test. As a result we are seeing failing github checks like https://github.com/facebook/yoga/actions/runs/6738747977/job/18318958442. Should be good now.

Reviewed By: yungsters

Differential Revision: D50951161

fbshipit-source-id: a2472022782f64f840a64ed991f5f35c3ef556dc
2023-11-02 16:52:18 -07:00
Nick Gerleman
ef1d772447 Consolidate JavaScript Flavors (#1433)
Summary:
Fixes https://github.com/facebook/yoga/issues/1417

This dramatically simplifies the matrix of Node vs web, ASM vs WASM, sync vs async compilation, or CommonJS vs ES Modules. We have one variant, using wasm, with ESModule top-level await to do async compilation. Web/node share the same binary, and we base64 encode the WASM into a wrapper JS file for compatibility with Node and bundlers.

This has some downsides, like requiring an environment with top level await, but also has upsides, like a consistent, sync looking API compatible with older Yoga, and mitigating TypeScript issues with package exports and typings resolution.

As part of this work I also removed `ts-node` from the toolchain (at the cost of a couple of config files needing to be vanilla JS).

Pull Request resolved: https://github.com/facebook/yoga/pull/1433

Test Plan:
1. `yarn test`
2. `yarn lint`
3. `yarn tsc`
4. `yarn benchmark`
5. `yarn build` website-next
6. `yarn lint` website-next
7. Locally test website-next
8. Examine package artifact created by GitHub
9. All Automation passes

Reviewed By: yungsters

Differential Revision: D50453324

Pulled By: NickGerleman

fbshipit-source-id: fe1192acc69e57fa69a1ff056dd7b5844d2198d5
2023-10-31 20:41:38 -07:00
Nick Gerleman
b19a07cff9 Use libc++ in Ubuntu Clang Build (#1440)
Summary:
An ubuntu-latest image update caused build failures, where GTest importing chrono headers caused an error inside of stdlib++ when being compiled by Clang.

This switches to explicitly asking for libc++ (LLVM stdlib) in the reference Ubuntu Clang build instead of stdlibc++ (GCC stdlib).

We don’t force this in CMake logic, to not force a specific stdlib for users compiling Yoga alongside other libraries. E.g. https://github.com/facebookexperimental/libunifex/issues/86

Pull Request resolved: https://github.com/facebook/yoga/pull/1440

Reviewed By: joevilches

Differential Revision: D50790965

Pulled By: NickGerleman

fbshipit-source-id: fe525cfb4385a9a5ae6a02fcbc6decad0e07ff6e
2023-10-30 14:52:45 -07:00
Joe Vilches
4f98bfe40a Add tests for absolute positioning of children with padding in the parent
Summary:
I was playing around with absolute children and padding and noticed an issue so adding tests to track.

Made a github issue: https://github.com/facebook/yoga/issues/1436

Reviewed By: yungsters

Differential Revision: D50670457

fbshipit-source-id: 4672d1e8b831a0a42509d95e91178944fc0f5c06
2023-10-26 10:12:04 -07:00
Joe Vilches
52ae53a7c8 Add errata supporting changes to position: static (#1434)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1434

X-link: https://github.com/facebook/react-native/pull/41130

I will use this errata to gate my changes that actually make position: static behave like the web. We have future plans to make position: relative the default again but users could still have declared certain nodes as position: static, so I think this is needed regardless.

Reviewed By: NickGerleman

Differential Revision: D50506915

fbshipit-source-id: b0d9e6883167de6ff002352c9288053324464cb9
2023-10-23 18:20:24 -07:00
Joe Vilches
6cc9e58246 Add more tests to eventually test position: static
Summary:
Doing some test-driven-development to support this feature, so I will start by adding a ton of tests to ensure the nuance of position: static is captured in Yoga. Specifically I have a slew of tests to capture:

* Insets have no effect on static elements
* Insets are relative to the nearest non-static ancestor
* Percentage values for insets, padding, and margin of absolute children respect the correct dimension of the nearest non-static ancestor
  * Also added similar ones for static and relative children which should just respect their ancestor (static only because it is a flexbox by default)
  * This rule does NOT apply to border
* The containing block for absolute children is the padding box of their nearest non-static ancestor
* The containing block for static children is the content box of their parent (because all elements are flex containers in yoga, at least right now)

Reviewed By: NickGerleman

Differential Revision: D50475939

fbshipit-source-id: 7988ffc9bea3317875128dd1908d787b9b714a45
2023-10-23 18:20:24 -07:00
Joe Vilches
2ea4c043fd gentest support for position: static + initial test
Summary:
I am about to embark on supporting `position: static` in Yoga. The enum exists already (and is the default position type, lol) but does not actually do anything and just behaves like `position: relative`.

My approach here is to write a bunch of tests to test for the various behaviors of static positions and then develop on Yoga afterwards to get those tests passing. To do this, we need to make a few changes to the gentest files as there is not support for adding `position: static` at the moment:

* Make it so that the gentest code can physically write `YGPositionTypeStatic` if it encounters `position: static` in the style
* Make it so that gentest.js knows that Yoga's default is actually static. This way the code generated in the tests will actually label nodes for non default values
* Explicitly label the position type even when it is not declared in the style prop (with the exception of the default)
* Regenerate all the tests

Additionally I added the first, basic test: making sure insets do nothing on a statically positioned element.

Reviewed By: NickGerleman

Differential Revision: D50437855

fbshipit-source-id: 0e8bbf1c224d477ea4592b7563d0b70d2ffa79c8
2023-10-23 18:20:24 -07:00
Joe Vilches
7e91004b90 Remove skips on passing position tests and add errata tests
Summary: Now that the tests are passing let's not skip it anymore. Also adding errata tests to make sure most prod builds are still protected.

Reviewed By: NickGerleman

Differential Revision: D50390993

fbshipit-source-id: cb91a7a377e919eaca24fb25e3d73d3c92eb8931
2023-10-18 17:30:18 -07:00