Skip to content

Commit 93278d5

Browse files
Nick Lefevermeta-codesync[bot]
Nick Lefever
authored and
meta-codesync[bot]
committed
Fix binary size regression for BackgroundImage (#54126)
Summary: Pull Request resolved: #54126 The binary size for RN builds increased by ~180KiB due to the implementation of the `experimental_backgroundImage` property diffing. This diff removes default inlining for the `toDynamic` serialization functions of the structs used by the linear and radial gradient styles. Combined with the binary size improvements done previously for `ColorStop` and `ValueUnit`, the binary size has been reduced by 176.0KiB Changelog: [Internal] Reviewed By: javache Differential Revision: D84214151 fbshipit-source-id: 58b045eee839beb4f944689e752096df8f310e77
1 parent fc74d8c commit 93278d5

File tree

6 files changed

+173
-128
lines changed

6 files changed

+173
-128
lines changed

‎packages/react-native/ReactCommon/react/renderer/graphics/BackgroundImage.cpp‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
#include "BackgroundImage.h"
9+
10+
namespace facebook::react {
11+
12+
#ifdef RN_SERIALIZABLE_STATE
13+
folly::dynamic toDynamic(const BackgroundImage& backgroundImage) {
14+
if (std::holds_alternative<LinearGradient>(backgroundImage)) {
15+
return std::get<LinearGradient>(backgroundImage).toDynamic();
16+
} else if (std::holds_alternative<RadialGradient>(backgroundImage)) {
17+
return std::get<RadialGradient>(backgroundImage).toDynamic();
18+
}
19+
return folly::dynamic(nullptr);
20+
}
21+
#endif
22+
23+
} // namespace facebook::react

‎packages/react-native/ReactCommon/react/renderer/graphics/BackgroundImage.h‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,13 @@
1010
#include <react/renderer/graphics/ColorComponents.h>
1111
#include <react/renderer/graphics/LinearGradient.h>
1212
#include <react/renderer/graphics/RadialGradient.h>
13-
#include <vector>
1413

1514
namespace facebook::react {
1615

1716
using BackgroundImage = std::variant<LinearGradient, RadialGradient>;
1817

1918
#ifdef RN_SERIALIZABLE_STATE
20-
inline folly::dynamic toDynamic(const BackgroundImage& backgroundImage) {
21-
if (std::holds_alternative<LinearGradient>(backgroundImage)) {
22-
return std::get<LinearGradient>(backgroundImage).toDynamic();
23-
} else if (std::holds_alternative<RadialGradient>(backgroundImage)) {
24-
return std::get<RadialGradient>(backgroundImage).toDynamic();
25-
}
26-
return folly::dynamic(nullptr);
27-
}
19+
folly::dynamic toDynamic(const BackgroundImage& backgroundImage);
2820
#endif
2921

3022
}; // namespace facebook::react

‎packages/react-native/ReactCommon/react/renderer/graphics/LinearGradient.cpp‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
#include "LinearGradient.h"
9+
10+
namespace facebook::react {
11+
12+
#ifdef RN_SERIALIZABLE_STATE
13+
folly::dynamic GradientDirection::toDynamic() const {
14+
folly::dynamic result = folly::dynamic::object();
15+
result["type"] = [&]() {
16+
switch (type) {
17+
case GradientDirectionType::Angle:
18+
return "angle";
19+
case GradientDirectionType::Keyword:
20+
return "keyword";
21+
}
22+
return "";
23+
}();
24+
25+
if (std::holds_alternative<Float>(value)) {
26+
result["value"] = std::get<Float>(value);
27+
} else if (std::holds_alternative<GradientKeyword>(value)) {
28+
result["value"] = [&]() {
29+
switch (std::get<GradientKeyword>(value)) {
30+
case GradientKeyword::ToTopRight:
31+
return "to top right";
32+
case GradientKeyword::ToBottomRight:
33+
return "to bottom right";
34+
case GradientKeyword::ToTopLeft:
35+
return "to top left";
36+
case GradientKeyword::ToBottomLeft:
37+
return "to bottom left";
38+
}
39+
return "";
40+
}();
41+
}
42+
return result;
43+
}
44+
45+
folly::dynamic LinearGradient::toDynamic() const {
46+
folly::dynamic result = folly::dynamic::object();
47+
result["type"] = "linear-gradient";
48+
result["direction"] = direction.toDynamic();
49+
50+
folly::dynamic colorStopsArray = folly::dynamic::array();
51+
for (const auto& colorStop : colorStops) {
52+
colorStopsArray.push_back(colorStop.toDynamic());
53+
}
54+
result["colorStops"] = colorStopsArray;
55+
return result;
56+
}
57+
#endif
58+
59+
}; // namespace facebook::react

‎packages/react-native/ReactCommon/react/renderer/graphics/LinearGradient.h‎

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
#include <react/renderer/graphics/ColorStop.h>
1111
#include <react/renderer/graphics/Float.h>
1212
#include <react/renderer/graphics/ValueUnit.h>
13+
#include <stdexcept>
1314
#include <string>
1415
#include <variant>
1516
#include <vector>
@@ -18,40 +19,13 @@ namespace facebook::react {
1819

1920
enum class GradientDirectionType { Angle, Keyword };
2021

21-
inline std::string toString(
22-
const GradientDirectionType& gradientDirectionType) {
23-
switch (gradientDirectionType) {
24-
case GradientDirectionType::Angle:
25-
return "angle";
26-
case GradientDirectionType::Keyword:
27-
return "keyword";
28-
}
29-
30-
return "";
31-
}
32-
3322
enum class GradientKeyword {
3423
ToTopRight,
3524
ToBottomRight,
3625
ToTopLeft,
3726
ToBottomLeft,
3827
};
3928

40-
inline std::string toString(const GradientKeyword& gradientKeyword) {
41-
switch (gradientKeyword) {
42-
case GradientKeyword::ToTopRight:
43-
return "to top right";
44-
case GradientKeyword::ToBottomRight:
45-
return "to bottom right";
46-
case GradientKeyword::ToTopLeft:
47-
return "to top left";
48-
case GradientKeyword::ToBottomLeft:
49-
return "to bottom left";
50-
}
51-
52-
return "";
53-
}
54-
5529
struct GradientDirection {
5630
GradientDirectionType type;
5731
std::variant<Float, GradientKeyword> value;
@@ -61,17 +35,7 @@ struct GradientDirection {
6135
}
6236

6337
#ifdef RN_SERIALIZABLE_STATE
64-
folly::dynamic toDynamic() const {
65-
folly::dynamic result = folly::dynamic::object();
66-
result["type"] = toString(type);
67-
68-
if (std::holds_alternative<Float>(value)) {
69-
result["value"] = std::get<Float>(value);
70-
} else if (std::holds_alternative<GradientKeyword>(value)) {
71-
result["value"] = toString(std::get<GradientKeyword>(value));
72-
}
73-
return result;
74-
}
38+
folly::dynamic toDynamic() const;
7539
#endif
7640
};
7741

@@ -84,18 +48,7 @@ struct LinearGradient {
8448
}
8549

8650
#ifdef RN_SERIALIZABLE_STATE
87-
folly::dynamic toDynamic() const {
88-
folly::dynamic result = folly::dynamic::object();
89-
result["type"] = "linear-gradient";
90-
result["direction"] = direction.toDynamic();
91-
92-
folly::dynamic colorStopsArray = folly::dynamic::array();
93-
for (const auto& colorStop : colorStops) {
94-
colorStopsArray.push_back(colorStop.toDynamic());
95-
}
96-
result["colorStops"] = colorStopsArray;
97-
return result;
98-
}
51+
folly::dynamic toDynamic() const;
9952
#endif
10053
};
10154

‎packages/react-native/ReactCommon/react/renderer/graphics/RadialGradient.cpp‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
#include "RadialGradient.h"
9+
10+
namespace facebook::react {
11+
12+
#ifdef RN_SERIALIZABLE_STATE
13+
folly::dynamic RadialGradientSize::Dimensions::toDynamic() const {
14+
folly::dynamic result = folly::dynamic::object();
15+
result["x"] = x.toDynamic();
16+
result["y"] = y.toDynamic();
17+
return result;
18+
}
19+
20+
folly::dynamic RadialGradientSize::toDynamic() const {
21+
if (std::holds_alternative<SizeKeyword>(value)) {
22+
switch (std::get<SizeKeyword>(value)) {
23+
case SizeKeyword::ClosestSide:
24+
return "closest-side";
25+
case SizeKeyword::FarthestSide:
26+
return "farthest-side";
27+
case SizeKeyword::ClosestCorner:
28+
return "closest-corner";
29+
case SizeKeyword::FarthestCorner:
30+
return "farthest-corner";
31+
}
32+
} else if (std::holds_alternative<Dimensions>(value)) {
33+
return std::get<Dimensions>(value).toDynamic();
34+
}
35+
36+
return nullptr;
37+
}
38+
39+
folly::dynamic RadialGradientPosition::toDynamic() const {
40+
folly::dynamic result = folly::dynamic::object();
41+
if (top.has_value()) {
42+
result["top"] = top.value().toDynamic();
43+
}
44+
if (left.has_value()) {
45+
result["left"] = left.value().toDynamic();
46+
}
47+
if (right.has_value()) {
48+
result["right"] = right.value().toDynamic();
49+
}
50+
if (bottom.has_value()) {
51+
result["bottom"] = bottom.value().toDynamic();
52+
}
53+
return result;
54+
}
55+
56+
folly::dynamic RadialGradient::toDynamic() const {
57+
folly::dynamic result = folly::dynamic::object();
58+
result["type"] = "radial-gradient";
59+
60+
switch (shape) {
61+
case RadialGradientShape::Circle:
62+
result["shape"] = "circle";
63+
break;
64+
case RadialGradientShape::Ellipse:
65+
result["shape"] = "ellipse";
66+
break;
67+
default:
68+
break;
69+
}
70+
71+
result["size"] = size.toDynamic();
72+
result["position"] = position.toDynamic();
73+
74+
folly::dynamic colorStopsArray = folly::dynamic::array();
75+
for (const auto& colorStop : colorStops) {
76+
colorStopsArray.push_back(colorStop.toDynamic());
77+
}
78+
result["colorStops"] = colorStopsArray;
79+
80+
return result;
81+
}
82+
#endif
83+
}; // namespace facebook::react

‎packages/react-native/ReactCommon/react/renderer/graphics/RadialGradient.h‎

Lines changed: 4 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
#include <react/renderer/graphics/Float.h>
1212
#include <react/renderer/graphics/ValueUnit.h>
1313
#include <optional>
14-
#include <string>
1514
#include <variant>
1615
#include <vector>
1716

@@ -23,19 +22,6 @@ namespace facebook::react {
2322

2423
enum class RadialGradientShape { Circle, Ellipse };
2524

26-
#ifdef RN_SERIALIZABLE_STATE
27-
inline std::string toString(const RadialGradientShape& radialGradientShape) {
28-
switch (radialGradientShape) {
29-
case RadialGradientShape::Circle:
30-
return "circle";
31-
case RadialGradientShape::Ellipse:
32-
return "ellipse";
33-
}
34-
35-
return "";
36-
}
37-
#endif
38-
3925
struct RadialGradientSize {
4026
enum class SizeKeyword {
4127
ClosestSide,
@@ -56,12 +42,7 @@ struct RadialGradientSize {
5642
}
5743

5844
#ifdef RN_SERIALIZABLE_STATE
59-
folly::dynamic toDynamic() const {
60-
folly::dynamic result = folly::dynamic::object();
61-
result["x"] = x.toDynamic();
62-
result["y"] = y.toDynamic();
63-
return result;
64-
}
45+
folly::dynamic toDynamic() const;
6546
#endif
6647
};
6748

@@ -84,24 +65,7 @@ struct RadialGradientSize {
8465
}
8566

8667
#ifdef RN_SERIALIZABLE_STATE
87-
folly::dynamic toDynamic() const {
88-
if (std::holds_alternative<SizeKeyword>(value)) {
89-
switch (std::get<SizeKeyword>(value)) {
90-
case SizeKeyword::ClosestSide:
91-
return "closest-side";
92-
case SizeKeyword::FarthestSide:
93-
return "farthest-side";
94-
case SizeKeyword::ClosestCorner:
95-
return "closest-corner";
96-
case SizeKeyword::FarthestCorner:
97-
return "farthest-corner";
98-
}
99-
} else if (std::holds_alternative<Dimensions>(value)) {
100-
return std::get<Dimensions>(value).toDynamic();
101-
}
102-
103-
return nullptr;
104-
}
68+
folly::dynamic toDynamic() const;
10569
#endif
10670
};
10771

@@ -121,22 +85,7 @@ struct RadialGradientPosition {
12185
}
12286

12387
#ifdef RN_SERIALIZABLE_STATE
124-
folly::dynamic toDynamic() const {
125-
folly::dynamic result = folly::dynamic::object();
126-
if (top.has_value()) {
127-
result["top"] = top.value().toDynamic();
128-
}
129-
if (left.has_value()) {
130-
result["left"] = left.value().toDynamic();
131-
}
132-
if (right.has_value()) {
133-
result["right"] = right.value().toDynamic();
134-
}
135-
if (bottom.has_value()) {
136-
result["bottom"] = bottom.value().toDynamic();
137-
}
138-
return result;
139-
}
88+
folly::dynamic toDynamic() const;
14089
#endif
14190
};
14291

@@ -155,21 +104,7 @@ struct RadialGradient {
155104
}
156105

157106
#ifdef RN_SERIALIZABLE_STATE
158-
folly::dynamic toDynamic() const {
159-
folly::dynamic result = folly::dynamic::object();
160-
result["type"] = "radial-gradient";
161-
result["shape"] = toString(shape);
162-
result["size"] = size.toDynamic();
163-
result["position"] = position.toDynamic();
164-
165-
folly::dynamic colorStopsArray = folly::dynamic::array();
166-
for (const auto& colorStop : colorStops) {
167-
colorStopsArray.push_back(colorStop.toDynamic());
168-
}
169-
result["colorStops"] = colorStopsArray;
170-
171-
return result;
172-
}
107+
folly::dynamic toDynamic() const;
173108
#endif
174109
};
175110

0 commit comments

Comments
 (0)