Add codegen for DimensionType diffing (#52242)

Summary:
Pull Request resolved: #52242

Codegen supports `DimensionType` props which represents a YGValue. This diff adds a conversion to `folly::dynamic` supporting all the existing value types `YGValue` can represent.

This completes codegen support for all allowed `ReservedPropTypeAnnotation` prop types.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D77234061

fbshipit-source-id: 6c3aef5e3ab0459d8a68ebd8efaccfecb83b0b08

Author: Nick Lefever

packages/react-native-codegen/e2e/deep_imports/__tests__/components/__snapshots__/GeneratePropsCpp-test.js.snap

@@ -213,6 +213,9 @@ folly::dynamic DimensionPropNativeComponentViewProps::getDiffProps(
   }
   folly::dynamic result = HostPlatformViewProps::getDiffProps(prevProps);
   
+  if (marginBack != oldProps->marginBack) {
+    result[\\"marginBack\\"] = toDynamic(marginBack);
+  }
   return result;
 }
 #endif

packages/react-native-codegen/e2e/deep_imports/__tests__/components/__snapshots__/GeneratePropsH-test.js.snap

@@ -16,6 +16,7 @@ Object {
 #include <cinttypes>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Point.h>
@@ -265,6 +266,7 @@ Object {
 
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <yoga/Yoga.h>
 
 namespace facebook::react {

packages/react-native-codegen/e2e/namespaced/__tests__/components/__snapshots__/GeneratePropsCpp-test.js.snap

@@ -213,6 +213,9 @@ folly::dynamic DimensionPropNativeComponentViewProps::getDiffProps(
   }
   folly::dynamic result = HostPlatformViewProps::getDiffProps(prevProps);
   
+  if (marginBack != oldProps->marginBack) {
+    result[\\"marginBack\\"] = toDynamic(marginBack);
+  }
   return result;
 }
 #endif

packages/react-native-codegen/e2e/namespaced/__tests__/components/__snapshots__/GeneratePropsH-test.js.snap

@@ -16,6 +16,7 @@ Object {
 #include <cinttypes>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Point.h>
@@ -265,6 +266,7 @@ Object {
 
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <yoga/Yoga.h>
 
 namespace facebook::react {

packages/react-native-codegen/src/generators/components/ComponentsGeneratorUtils.js

@@ -245,6 +245,7 @@ function getLocalImports(
         return;
       case 'DimensionPrimitive':
         imports.add('#include <yoga/Yoga.h>');
+        imports.add('#include <react/renderer/core/graphicsConversions.h>');
         return;
       default:
         (name: empty);

packages/react-native-codegen/src/generators/components/GeneratePropsCpp.js

@@ -123,8 +123,10 @@ function generatePropsDiffString(
     result["${prop.name}"] = toDynamic(${prop.name});
   }`;
             case 'DimensionPrimitive':
-              // TODO: Implement diffProps for complex types
-              return '';
+              return `
+  if (${prop.name} != oldProps->${prop.name}) {
+    result["${prop.name}"] = toDynamic(${prop.name});
+  }`;
             default:
               (typeAnnotation.name: empty);
               throw new Error('Received unknown ReservedPropTypeAnnotation');

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GeneratePropsCpp-test.js.snap

@@ -349,6 +349,9 @@ folly::dynamic DimensionPropNativeComponentProps::getDiffProps(
   }
   folly::dynamic result = HostPlatformViewProps::getDiffProps(prevProps);
   
+  if (marginBack != oldProps->marginBack) {
+    result[\\"marginBack\\"] = toDynamic(marginBack);
+  }
   return result;
 }
 #endif

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GeneratePropsH-test.js.snap

@@ -16,6 +16,7 @@ Map {
 #include <cinttypes>
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Point.h>
@@ -469,6 +470,7 @@ Map {
 
 #include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <yoga/Yoga.h>
 
 namespace facebook::react {

packages/react-native/ReactCommon/react/renderer/core/CMakeLists.txt

@@ -24,6 +24,7 @@ target_link_libraries(react_renderer_core
         react_renderer_mapbuffer
         react_renderer_runtimescheduler
         react_utils
-        runtimeexecutor)
+        runtimeexecutor
+        yoga)
 target_compile_reactnative_options(react_renderer_core PRIVATE)
 target_compile_options(react_renderer_core PRIVATE -Wpedantic)

packages/react-native/ReactCommon/react/renderer/core/graphicsConversions.h

@@ -24,6 +24,10 @@
 #include <react/renderer/graphics/RectangleEdges.h>
 #include <react/renderer/graphics/Size.h>
 
+#ifdef RN_SERIALIZABLE_STATE
+#include <yoga/Yoga.h>
+#endif
+
 namespace facebook::react {
 
 #pragma mark - Color
@@ -61,6 +65,27 @@ inline std::string toString(const SharedColor& value) {
 #pragma mark - Geometry
 
 #ifdef RN_SERIALIZABLE_STATE
+inline folly::dynamic toDynamic(const YGValue& dimension) {
+  switch (dimension.unit) {
+    case YGUnitUndefined:
+      return nullptr;
+    case YGUnitAuto:
+      return "auto";
+    case YGUnitMaxContent:
+      return "max-content";
+    case YGUnitFitContent:
+      return "fit-content";
+    case YGUnitStretch:
+      return "stretch";
+    case YGUnitPoint:
+      return dimension.value;
+    case YGUnitPercent:
+      return std::format("{}%", dimension.value);
+  }
+
+  return nullptr;
+}
+
 inline folly::dynamic toDynamic(const Point& point) {
   folly::dynamic pointResult = folly::dynamic::object();
   pointResult["x"] = point.x;