YGStyle: wrap all fields into accessors

Summary:
@public

In order to encapsulate property access on `YGStyle`, as a first measure we wrap all fields with accessors.

This will e.g. enable dynamic property storage and instrumentation in the future.

All accessors have a `const` version that allows direct access via `const&`. For mutation, bit fields are wrapped with a custom reference object.

This style allows for the least amount of changes in client code. Property access simply needs appended parens, eg `style.direction` becomes `style.direction`.

Reviewed By: shergin

Differential Revision: D14999096

fbshipit-source-id: fbf29f7ddab520513d4618f5e70094c4f6330b30

React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -185,8 +185,8 @@ - (void)updateProps:(SharedProps)props oldProps:(SharedProps)oldProps
   }
 
   // `overflow`
-  if (oldViewProps.yogaStyle.overflow != newViewProps.yogaStyle.overflow) {
-    self.clipsToBounds = newViewProps.yogaStyle.overflow != YGOverflowVisible;
+  if (oldViewProps.yogaStyle.overflow() != newViewProps.yogaStyle.overflow()) {
+    self.clipsToBounds = newViewProps.yogaStyle.overflow() != YGOverflowVisible;
     needsInvalidateLayer = YES;
   }
 

ReactAndroid/src/main/java/com/facebook/react/fabric/jsi/jni/Binding.cpp

@@ -161,7 +161,7 @@ local_ref<JString> getPlatformComponentName(const ShadowView& shadowView) {
       std::dynamic_pointer_cast<const ScrollViewProps>(shadowView.props);
 
   if (newViewProps &&
-      newViewProps->yogaStyle.flexDirection == YGFlexDirectionRow) {
+      newViewProps->yogaStyle.flexDirection() == YGFlexDirectionRow) {
     componentName = make_jstring("AndroidHorizontalScrollView");
   } else {
     componentName = make_jstring(shadowView.componentName);

ReactCommon/fabric/components/root/RootProps.cpp

@@ -16,17 +16,17 @@ namespace react {
 static YGStyle yogaStyleFromLayoutConstraints(
     const LayoutConstraints &layoutConstraints) {
   auto yogaStyle = YGStyle{};
-  yogaStyle.minDimensions[YGDimensionWidth] =
+  yogaStyle.minDimensions()[YGDimensionWidth] =
       yogaStyleValueFromFloat(layoutConstraints.minimumSize.width);
-  yogaStyle.minDimensions[YGDimensionHeight] =
+  yogaStyle.minDimensions()[YGDimensionHeight] =
       yogaStyleValueFromFloat(layoutConstraints.minimumSize.height);
 
-  yogaStyle.maxDimensions[YGDimensionWidth] =
+  yogaStyle.maxDimensions()[YGDimensionWidth] =
       yogaStyleValueFromFloat(layoutConstraints.maximumSize.width);
-  yogaStyle.maxDimensions[YGDimensionHeight] =
+  yogaStyle.maxDimensions()[YGDimensionHeight] =
       yogaStyleValueFromFloat(layoutConstraints.maximumSize.height);
 
-  yogaStyle.direction =
+  yogaStyle.direction() =
       yogaDirectionFromLayoutDirection(layoutConstraints.layoutDirection);
 
   return yogaStyle;

ReactCommon/fabric/components/view/ViewProps.cpp

@@ -121,18 +121,20 @@ BorderMetrics ViewProps::resolveBorderMetrics(
       bool{layoutMetrics.layoutDirection == LayoutDirection::RightToLeft};
 
   auto borderWidths = CascadedBorderWidths{
-      /* .left = */ optionalFloatFromYogaValue(yogaStyle.border[YGEdgeLeft]),
-      /* .top = */ optionalFloatFromYogaValue(yogaStyle.border[YGEdgeTop]),
-      /* .right = */ optionalFloatFromYogaValue(yogaStyle.border[YGEdgeRight]),
+      /* .left = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeLeft]),
+      /* .top = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeTop]),
+      /* .right = */
+      optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeRight]),
       /* .bottom = */
-      optionalFloatFromYogaValue(yogaStyle.border[YGEdgeBottom]),
-      /* .start = */ optionalFloatFromYogaValue(yogaStyle.border[YGEdgeStart]),
-      /* .end = */ optionalFloatFromYogaValue(yogaStyle.border[YGEdgeEnd]),
+      optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeBottom]),
+      /* .start = */
+      optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeStart]),
+      /* .end = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeEnd]),
       /* .horizontal = */
-      optionalFloatFromYogaValue(yogaStyle.border[YGEdgeHorizontal]),
+      optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeHorizontal]),
       /* .vertical = */
-      optionalFloatFromYogaValue(yogaStyle.border[YGEdgeVertical]),
-      /* .all = */ optionalFloatFromYogaValue(yogaStyle.border[YGEdgeAll]),
+      optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeVertical]),
+      /* .all = */ optionalFloatFromYogaValue(yogaStyle.border()[YGEdgeAll]),
   };
 
   return {

ReactCommon/fabric/components/view/ViewShadowNode.cpp

@@ -23,7 +23,7 @@ bool ViewShadowNode::isLayoutOnly() const {
       // Accessibility Props
       !viewProps.accessible &&
       // Style Props
-      viewProps.yogaStyle.overflow == YGOverflowVisible &&
+      viewProps.yogaStyle.overflow() == YGOverflowVisible &&
       viewProps.opacity == 1.0 && !viewProps.backgroundColor &&
       !viewProps.foregroundColor && !viewProps.shadowColor &&
       viewProps.transform == Transform{} && viewProps.zIndex == 0 &&

ReactCommon/fabric/components/view/conversions.h

@@ -107,7 +107,7 @@ inline LayoutMetrics layoutMetricsFromYogaNode(YGNode &yogaNode) {
       layoutMetrics.borderWidth.bottom +
           floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeBottom))};
 
-  layoutMetrics.displayType = yogaNode.getStyle().display == YGDisplayNone
+  layoutMetrics.displayType = yogaNode.getStyle().display() == YGDisplayNone
       ? DisplayType::None
       : DisplayType::Flex;
 
@@ -304,7 +304,7 @@ inline void fromRawValue(const RawValue &value, YGDisplay &result) {
 
 inline void fromRawValue(
     const RawValue &value,
-    decltype(YGStyle{}.margin[0]) /* type is subject to change */ &result) {
+    decltype(YGStyle{}.margin()[0]) /* type is subject to change */ &result) {
   if (value.hasType<Float>()) {
     result = yogaStyleValueFromFloat((Float)value);
     return;

ReactCommon/fabric/components/view/propsConversions.h

@@ -115,71 +115,77 @@ static inline YGStyle convertRawProp(
     const RawProps &rawProps,
     const YGStyle &sourceValue) {
   auto yogaStyle = YGStyle{};
-  yogaStyle.direction = convertRawProp(
-      rawProps, "direction", sourceValue.direction, yogaStyle.direction);
-  yogaStyle.flexDirection = convertRawProp(
+  yogaStyle.direction() = convertRawProp(
+      rawProps, "direction", sourceValue.direction(), yogaStyle.direction());
+  yogaStyle.flexDirection() = convertRawProp(
       rawProps,
       "flexDirection",
-      sourceValue.flexDirection,
-      yogaStyle.flexDirection);
-  yogaStyle.justifyContent = convertRawProp(
+      sourceValue.flexDirection(),
+      yogaStyle.flexDirection());
+  yogaStyle.justifyContent() = convertRawProp(
       rawProps,
       "justifyContent",
-      sourceValue.justifyContent,
-      yogaStyle.justifyContent);
-  yogaStyle.alignContent = convertRawProp(
+      sourceValue.justifyContent(),
+      yogaStyle.justifyContent());
+  yogaStyle.alignContent() = convertRawProp(
       rawProps,
       "alignContent",
-      sourceValue.alignContent,
-      yogaStyle.alignContent);
-  yogaStyle.alignItems = convertRawProp(
-      rawProps, "alignItems", sourceValue.alignItems, yogaStyle.alignItems);
-  yogaStyle.alignSelf = convertRawProp(
-      rawProps, "alignSelf", sourceValue.alignSelf, yogaStyle.alignSelf);
-  yogaStyle.positionType = convertRawProp(
-      rawProps, "position", sourceValue.positionType, yogaStyle.positionType);
-  yogaStyle.flexWrap = convertRawProp(
-      rawProps, "flexWrap", sourceValue.flexWrap, yogaStyle.flexWrap);
-  yogaStyle.overflow = convertRawProp(
-      rawProps, "overflow", sourceValue.overflow, yogaStyle.overflow);
-  yogaStyle.display = convertRawProp(
-      rawProps, "display", sourceValue.display, yogaStyle.display);
-  yogaStyle.flex =
-      convertRawProp(rawProps, "flex", sourceValue.flex, yogaStyle.flex);
-  yogaStyle.flexGrow = convertRawProp(
-      rawProps, "flexGrow", sourceValue.flexGrow, yogaStyle.flexGrow);
-  yogaStyle.flexShrink = convertRawProp(
-      rawProps, "flexShrink", sourceValue.flexShrink, yogaStyle.flexShrink);
-  yogaStyle.flexBasis = convertRawProp(
-      rawProps, "flexBasis", sourceValue.flexBasis, yogaStyle.flexBasis);
-  yogaStyle.margin = convertRawProp(
-      rawProps, "margin", "", sourceValue.margin, yogaStyle.margin);
-  yogaStyle.position =
-      convertRawProp(rawProps, sourceValue.position, yogaStyle.position);
-  yogaStyle.padding = convertRawProp(
-      rawProps, "padding", "", sourceValue.padding, yogaStyle.padding);
-  yogaStyle.border = convertRawProp(
-      rawProps, "border", "Width", sourceValue.border, yogaStyle.border);
-  yogaStyle.dimensions = convertRawProp(
+      sourceValue.alignContent(),
+      yogaStyle.alignContent());
+  yogaStyle.alignItems() = convertRawProp(
+      rawProps, "alignItems", sourceValue.alignItems(), yogaStyle.alignItems());
+  yogaStyle.alignSelf() = convertRawProp(
+      rawProps, "alignSelf", sourceValue.alignSelf(), yogaStyle.alignSelf());
+  yogaStyle.positionType() = convertRawProp(
+      rawProps,
+      "position",
+      sourceValue.positionType(),
+      yogaStyle.positionType());
+  yogaStyle.flexWrap() = convertRawProp(
+      rawProps, "flexWrap", sourceValue.flexWrap(), yogaStyle.flexWrap());
+  yogaStyle.overflow() = convertRawProp(
+      rawProps, "overflow", sourceValue.overflow(), yogaStyle.overflow());
+  yogaStyle.display() = convertRawProp(
+      rawProps, "display", sourceValue.display(), yogaStyle.display());
+  yogaStyle.flex() =
+      convertRawProp(rawProps, "flex", sourceValue.flex(), yogaStyle.flex());
+  yogaStyle.flexGrow() = convertRawProp(
+      rawProps, "flexGrow", sourceValue.flexGrow(), yogaStyle.flexGrow());
+  yogaStyle.flexShrink() = convertRawProp(
+      rawProps, "flexShrink", sourceValue.flexShrink(), yogaStyle.flexShrink());
+  yogaStyle.flexBasis() = convertRawProp(
+      rawProps, "flexBasis", sourceValue.flexBasis(), yogaStyle.flexBasis());
+  yogaStyle.margin() = convertRawProp(
+      rawProps, "margin", "", sourceValue.margin(), yogaStyle.margin());
+  yogaStyle.position() =
+      convertRawProp(rawProps, sourceValue.position(), yogaStyle.position());
+  yogaStyle.padding() = convertRawProp(
+      rawProps, "padding", "", sourceValue.padding(), yogaStyle.padding());
+  yogaStyle.border() = convertRawProp(
+      rawProps, "border", "Width", sourceValue.border(), yogaStyle.border());
+  yogaStyle.dimensions() = convertRawProp(
       rawProps,
       "width",
       "height",
-      sourceValue.dimensions,
-      yogaStyle.dimensions);
-  yogaStyle.minDimensions = convertRawProp(
+      sourceValue.dimensions(),
+      yogaStyle.dimensions());
+  yogaStyle.minDimensions() = convertRawProp(
       rawProps,
       "minWidth",
       "minHeight",
-      sourceValue.minDimensions,
-      yogaStyle.minDimensions);
-  yogaStyle.maxDimensions = convertRawProp(
+      sourceValue.minDimensions(),
+      yogaStyle.minDimensions());
+  yogaStyle.maxDimensions() = convertRawProp(
       rawProps,
       "maxWidth",
       "maxHeight",
-      sourceValue.maxDimensions,
-      yogaStyle.maxDimensions);
-  yogaStyle.aspectRatio = convertRawProp(
-      rawProps, "aspectRatio", sourceValue.aspectRatio, yogaStyle.aspectRatio);
+      sourceValue.maxDimensions(),
+      yogaStyle.maxDimensions());
+  yogaStyle.aspectRatio() = convertRawProp(
+      rawProps,
+      "aspectRatio",
+      sourceValue.aspectRatio(),
+      yogaStyle.aspectRatio());
   return yogaStyle;
 }
 

ReactCommon/fabric/components/view/yoga/YogaLayoutableShadowNode.cpp

@@ -135,8 +135,8 @@ void YogaLayoutableShadowNode::setSize(Size size) const {
   ensureUnsealed();
 
   auto style = yogaNode_.getStyle();
-  style.dimensions[YGDimensionWidth] = yogaStyleValueFromFloat(size.width);
-  style.dimensions[YGDimensionHeight] = yogaStyleValueFromFloat(size.height);
+  style.dimensions()[YGDimensionWidth] = yogaStyleValueFromFloat(size.width);
+  style.dimensions()[YGDimensionHeight] = yogaStyleValueFromFloat(size.height);
   yogaNode_.setStyle(style);
   yogaNode_.setDirty(true);
 }
@@ -146,7 +146,7 @@ void YogaLayoutableShadowNode::setPositionType(
   ensureUnsealed();
 
   auto style = yogaNode_.getStyle();
-  style.positionType = positionType;
+  style.positionType() = positionType;
   yogaNode_.setStyle(style);
   yogaNode_.setDirty(true);
 }

ReactCommon/fabric/components/view/yoga/YogaStylableProps.cpp

@@ -31,63 +31,66 @@ YogaStylableProps::YogaStylableProps(
 
 #if RN_DEBUG_STRING_CONVERTIBLE
 SharedDebugStringConvertibleList YogaStylableProps::getDebugProps() const {
-  auto defaultYogaStyle = YGStyle{};
+  const auto defaultYogaStyle = YGStyle{};
   return {
       debugStringConvertibleItem(
-          "direction", yogaStyle.direction, defaultYogaStyle.direction),
+          "direction", yogaStyle.direction(), defaultYogaStyle.direction()),
       debugStringConvertibleItem(
           "flexDirection",
-          yogaStyle.flexDirection,
-          defaultYogaStyle.flexDirection),
+          yogaStyle.flexDirection(),
+          defaultYogaStyle.flexDirection()),
       debugStringConvertibleItem(
           "justifyContent",
-          yogaStyle.justifyContent,
-          defaultYogaStyle.justifyContent),
+          yogaStyle.justifyContent(),
+          defaultYogaStyle.justifyContent()),
       debugStringConvertibleItem(
           "alignContent",
-          yogaStyle.alignContent,
-          defaultYogaStyle.alignContent),
+          yogaStyle.alignContent(),
+          defaultYogaStyle.alignContent()),
       debugStringConvertibleItem(
-          "alignItems", yogaStyle.alignItems, defaultYogaStyle.alignItems),
+          "alignItems", yogaStyle.alignItems(), defaultYogaStyle.alignItems()),
       debugStringConvertibleItem(
-          "alignSelf", yogaStyle.alignSelf, defaultYogaStyle.alignSelf),
+          "alignSelf", yogaStyle.alignSelf(), defaultYogaStyle.alignSelf()),
       debugStringConvertibleItem(
           "positionType",
-          yogaStyle.positionType,
-          defaultYogaStyle.positionType),
+          yogaStyle.positionType(),
+          defaultYogaStyle.positionType()),
       debugStringConvertibleItem(
-          "flexWrap", yogaStyle.flexWrap, defaultYogaStyle.flexWrap),
+          "flexWrap", yogaStyle.flexWrap(), defaultYogaStyle.flexWrap()),
       debugStringConvertibleItem(
-          "overflow", yogaStyle.overflow, defaultYogaStyle.overflow),
+          "overflow", yogaStyle.overflow(), defaultYogaStyle.overflow()),
       debugStringConvertibleItem(
-          "display", yogaStyle.display, defaultYogaStyle.display),
-      debugStringConvertibleItem("flex", yogaStyle.flex, defaultYogaStyle.flex),
+          "display", yogaStyle.display(), defaultYogaStyle.display()),
       debugStringConvertibleItem(
-          "flexGrow", yogaStyle.flexGrow, defaultYogaStyle.flexGrow),
+          "flex", yogaStyle.flex(), defaultYogaStyle.flex()),
       debugStringConvertibleItem(
-          "flexShrink", yogaStyle.flexShrink, defaultYogaStyle.flexShrink),
+          "flexGrow", yogaStyle.flexGrow(), defaultYogaStyle.flexGrow()),
       debugStringConvertibleItem(
-          "flexBasis", yogaStyle.flexBasis, defaultYogaStyle.flexBasis),
+          "flexShrink", yogaStyle.flexShrink(), defaultYogaStyle.flexShrink()),
       debugStringConvertibleItem(
-          "margin", yogaStyle.margin, defaultYogaStyle.margin),
+          "flexBasis", yogaStyle.flexBasis(), defaultYogaStyle.flexBasis()),
       debugStringConvertibleItem(
-          "position", yogaStyle.position, defaultYogaStyle.position),
+          "margin", yogaStyle.margin(), defaultYogaStyle.margin()),
       debugStringConvertibleItem(
-          "padding", yogaStyle.padding, defaultYogaStyle.padding),
+          "position", yogaStyle.position(), defaultYogaStyle.position()),
       debugStringConvertibleItem(
-          "border", yogaStyle.border, defaultYogaStyle.border),
+          "padding", yogaStyle.padding(), defaultYogaStyle.padding()),
       debugStringConvertibleItem(
-          "dimensions", yogaStyle.dimensions, defaultYogaStyle.dimensions),
+          "border", yogaStyle.border(), defaultYogaStyle.border()),
+      debugStringConvertibleItem(
+          "dimensions", yogaStyle.dimensions(), defaultYogaStyle.dimensions()),
       debugStringConvertibleItem(
           "minDimensions",
-          yogaStyle.minDimensions,
-          defaultYogaStyle.minDimensions),
+          yogaStyle.minDimensions(),
+          defaultYogaStyle.minDimensions()),
       debugStringConvertibleItem(
           "maxDimensions",
-          yogaStyle.maxDimensions,
-          defaultYogaStyle.maxDimensions),
+          yogaStyle.maxDimensions(),
+          defaultYogaStyle.maxDimensions()),
       debugStringConvertibleItem(
-          "aspectRatio", yogaStyle.aspectRatio, defaultYogaStyle.aspectRatio),
+          "aspectRatio",
+          yogaStyle.aspectRatio(),
+          defaultYogaStyle.aspectRatio()),
   };
 }
 #endif

ReactCommon/fabric/core/propsConversions.h

@@ -45,12 +45,12 @@ void fromRawValue(const RawValue &rawValue, std::vector<T> &result) {
   result.push_back(itemResult);
 }
 
-template <typename T>
+template <typename T, typename U = T>
 T convertRawProp(
     const RawProps &rawProps,
     const std::string &name,
     const T &sourceValue,
-    const T &defaultValue = T()) {
+    const U &defaultValue = U()) {
   const auto rawValue = rawProps.at(name);
 
   if (!rawValue) {