Skip to content

Commit f156ef2

Browse files
rubennortemeta-codesync[bot]
rubennorte
authored and
meta-codesync[bot]
committed
Consolidate generated view config imports (#58651)
Summary: Pull Request resolved: #58651 Generated view configs currently emit repeated property accesses from React Native entry-point requires and route commands through a renderer namespace. Consolidate imports by source and expose `dispatchCommand` directly from the unstable internals entry point, reducing generated Hermes bytecode while preserving existing stable root exports. Metro's inline-require transform would otherwise expand the consolidated unstable-internals binding back into repeated `require(...)` calls, so keep that dependency non-inlined while leaving other generated imports eligible for lazy loading. Make the unstable `HMRClient` export follow React Native's normal development/production selection so production consumers receive `HMRClientProdShim` instead of including HMR tooling. Changelog: [General][Fixed] - Reduce generated native component bundle overhead Reviewed By: javache Differential Revision: D121383217 fbshipit-source-id: 3b81db620bcff172d43d0493dd4ca22b30f305d6
1 parent c33c241 commit f156ef2

8 files changed

Lines changed: 142 additions & 110 deletions

File tree

‎packages/babel-plugin-codegen/__tests__/__snapshots__/index-test.js.snap‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -99,15 +99,13 @@ interface NativeCommands {
9999
+hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: Int32, y: Int32) => void,
100100
+scrollTo: (viewRef: React.ElementRef<NativeType>, y: Int32, animated: boolean) => void,
101101
}
102-
const {
103-
ConditionallyIgnoredEventHandlers
104-
} = require('react-native/unstable-internals-do-not-use');
105102
const {
106103
NativeComponentRegistry
107104
} = require('react-native');
108105
const {
109-
Renderer
110-
} = require(\\"react-native/unstable-internals-do-not-use\\");
106+
ConditionallyIgnoredEventHandlers,
107+
dispatchCommand
108+
} = require('react-native/unstable-internals-do-not-use');
111109
let nativeComponentName = 'RCTModule';
112110
export const __INTERNAL_VIEW_CONFIG = {
113111
uiViewClassName: \\"RCTModule\\",
@@ -135,10 +133,10 @@ export const __INTERNAL_VIEW_CONFIG = {
135133
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
136134
export const Commands = {
137135
hotspotUpdate(ref, x, y) {
138-
Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
136+
dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
139137
},
140138
scrollTo(ref, y, animated) {
141-
Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
139+
dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
142140
}
143141
};"
144142
`;
@@ -164,15 +162,13 @@ interface NativeCommands {
164162
+hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: Int32, y: Int32) => void,
165163
+scrollTo: (viewRef: React.ElementRef<NativeType>, y: Int32, animated: boolean) => void,
166164
}
167-
const {
168-
ConditionallyIgnoredEventHandlers
169-
} = require('react-native/unstable-internals-do-not-use');
170165
const {
171166
NativeComponentRegistry
172167
} = require('react-native');
173168
const {
174-
Renderer
175-
} = require(\\"react-native/unstable-internals-do-not-use\\");
169+
ConditionallyIgnoredEventHandlers,
170+
dispatchCommand
171+
} = require('react-native/unstable-internals-do-not-use');
176172
let nativeComponentName = 'RCTModule';
177173
export const __INTERNAL_VIEW_CONFIG = {
178174
uiViewClassName: \\"RCTModule\\",
@@ -200,10 +196,10 @@ export const __INTERNAL_VIEW_CONFIG = {
200196
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
201197
export const Commands = {
202198
hotspotUpdate(ref, x, y) {
203-
Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
199+
dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
204200
},
205201
scrollTo(ref, y, animated) {
206-
Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
202+
dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
207203
}
208204
};"
209205
`;

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

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Map {
1717
'use strict';
1818
1919
const {NativeComponentRegistry} = require('react-native');
20+
const {processColorArray} = require('react-native/unstable-internals-do-not-use');
2021
2122
let nativeComponentName = 'ArrayPropsNativeComponentView';
2223
export const __INTERNAL_VIEW_CONFIG = {
@@ -27,7 +28,7 @@ export const __INTERNAL_VIEW_CONFIG = {
2728
progress: true,
2829
radii: true,
2930
colors: {
30-
process: require('react-native/unstable-internals-do-not-use').processColorArray
31+
process: processColorArray
3132
},
3233
srcs: true,
3334
points: true,
@@ -92,12 +93,13 @@ Map {
9293
'use strict';
9394
9495
const {NativeComponentRegistry} = require('react-native');
96+
const {colorAttribute} = require('react-native/unstable-internals-do-not-use');
9597
9698
let nativeComponentName = 'ColorPropNativeComponentView';
9799
export const __INTERNAL_VIEW_CONFIG = {
98100
uiViewClassName: \\"ColorPropNativeComponentView\\",
99101
validAttributes: {
100-
tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute
102+
tintColor: colorAttribute
101103
}
102104
};
103105
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -210,8 +212,8 @@ Map {
210212
211213
'use strict';
212214
213-
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
214215
const {NativeComponentRegistry} = require('react-native');
216+
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
215217
216218
let nativeComponentName = 'EventNestedObjectPropsNativeComponentView';
217219
export const __INTERNAL_VIEW_CONFIG = {
@@ -252,8 +254,8 @@ Map {
252254
253255
'use strict';
254256
255-
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
256257
const {NativeComponentRegistry} = require('react-native');
258+
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
257259
258260
let nativeComponentName = 'EventPropsNativeComponentView';
259261
export const __INTERNAL_VIEW_CONFIG = {
@@ -358,14 +360,14 @@ Map {
358360
359361
'use strict';
360362
361-
const {NativeComponentRegistry} = require('react-native');
363+
const {Image, NativeComponentRegistry} = require('react-native');
362364
363365
let nativeComponentName = 'ImagePropNativeComponentView';
364366
export const __INTERNAL_VIEW_CONFIG = {
365367
uiViewClassName: \\"ImagePropNativeComponentView\\",
366368
validAttributes: {
367369
thumbImage: {
368-
process: require('react-native').Image.resolveAssetSource
370+
process: Image.resolveAssetSource
369371
}
370372
}
371373
};
@@ -422,8 +424,8 @@ Map {
422424
423425
'use strict';
424426
425-
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
426427
const {NativeComponentRegistry} = require('react-native');
428+
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
427429
428430
let nativeComponentName = 'RCTInterfaceOnlyComponent';
429431
export const __INTERNAL_VIEW_CONFIG = {
@@ -494,19 +496,20 @@ Map {
494496
495497
'use strict';
496498
497-
const {NativeComponentRegistry} = require('react-native');
499+
const {Image, NativeComponentRegistry} = require('react-native');
500+
const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use');
498501
499502
let nativeComponentName = 'MultiNativePropNativeComponentView';
500503
export const __INTERNAL_VIEW_CONFIG = {
501504
uiViewClassName: \\"MultiNativePropNativeComponentView\\",
502505
validAttributes: {
503506
thumbImage: {
504-
process: require('react-native').Image.resolveAssetSource
507+
process: Image.resolveAssetSource
505508
},
506-
color: require('react-native/unstable-internals-do-not-use').colorAttribute,
507-
thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute,
509+
color: colorAttribute,
510+
thumbTintColor: colorAttribute,
508511
point: {
509-
diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
512+
diff: pointsDiffer
510513
}
511514
}
512515
};
@@ -592,13 +595,14 @@ Map {
592595
'use strict';
593596
594597
const {NativeComponentRegistry} = require('react-native');
598+
const {pointsDiffer} = require('react-native/unstable-internals-do-not-use');
595599
596600
let nativeComponentName = 'PointPropNativeComponentView';
597601
export const __INTERNAL_VIEW_CONFIG = {
598602
uiViewClassName: \\"PointPropNativeComponentView\\",
599603
validAttributes: {
600604
startPoint: {
601-
diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
605+
diff: pointsDiffer
602606
}
603607
}
604608
};

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

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Map {
1717
'use strict';
1818
1919
const {NativeComponentRegistry} = require('react-native');
20+
const {processColorArray} = require('react-native/unstable-internals-do-not-use');
2021
2122
let nativeComponentName = 'ArrayPropsNativeComponentView';
2223
export const __INTERNAL_VIEW_CONFIG = {
@@ -27,7 +28,7 @@ export const __INTERNAL_VIEW_CONFIG = {
2728
progress: true,
2829
radii: true,
2930
colors: {
30-
process: require('react-native/unstable-internals-do-not-use').processColorArray
31+
process: processColorArray
3132
},
3233
srcs: true,
3334
points: true,
@@ -92,12 +93,13 @@ Map {
9293
'use strict';
9394
9495
const {NativeComponentRegistry} = require('react-native');
96+
const {colorAttribute} = require('react-native/unstable-internals-do-not-use');
9597
9698
let nativeComponentName = 'ColorPropNativeComponentView';
9799
export const __INTERNAL_VIEW_CONFIG = {
98100
uiViewClassName: \\"ColorPropNativeComponentView\\",
99101
validAttributes: {
100-
tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute
102+
tintColor: colorAttribute
101103
}
102104
};
103105
export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -210,8 +212,8 @@ Map {
210212
211213
'use strict';
212214
213-
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
214215
const {NativeComponentRegistry} = require('react-native');
216+
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
215217
216218
let nativeComponentName = 'EventNestedObjectPropsNativeComponentView';
217219
export const __INTERNAL_VIEW_CONFIG = {
@@ -252,8 +254,8 @@ Map {
252254
253255
'use strict';
254256
255-
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
256257
const {NativeComponentRegistry} = require('react-native');
258+
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
257259
258260
let nativeComponentName = 'EventPropsNativeComponentView';
259261
export const __INTERNAL_VIEW_CONFIG = {
@@ -358,14 +360,14 @@ Map {
358360
359361
'use strict';
360362
361-
const {NativeComponentRegistry} = require('react-native');
363+
const {Image, NativeComponentRegistry} = require('react-native');
362364
363365
let nativeComponentName = 'ImagePropNativeComponentView';
364366
export const __INTERNAL_VIEW_CONFIG = {
365367
uiViewClassName: \\"ImagePropNativeComponentView\\",
366368
validAttributes: {
367369
thumbImage: {
368-
process: require('react-native').Image.resolveAssetSource
370+
process: Image.resolveAssetSource
369371
}
370372
}
371373
};
@@ -422,8 +424,8 @@ Map {
422424
423425
'use strict';
424426
425-
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
426427
const {NativeComponentRegistry} = require('react-native');
428+
const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
427429
428430
let nativeComponentName = 'RCTInterfaceOnlyComponent';
429431
export const __INTERNAL_VIEW_CONFIG = {
@@ -494,19 +496,20 @@ Map {
494496
495497
'use strict';
496498
497-
const {NativeComponentRegistry} = require('react-native');
499+
const {Image, NativeComponentRegistry} = require('react-native');
500+
const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use');
498501
499502
let nativeComponentName = 'MultiNativePropNativeComponentView';
500503
export const __INTERNAL_VIEW_CONFIG = {
501504
uiViewClassName: \\"MultiNativePropNativeComponentView\\",
502505
validAttributes: {
503506
thumbImage: {
504-
process: require('react-native').Image.resolveAssetSource
507+
process: Image.resolveAssetSource
505508
},
506-
color: require('react-native/unstable-internals-do-not-use').colorAttribute,
507-
thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute,
509+
color: colorAttribute,
510+
thumbTintColor: colorAttribute,
508511
point: {
509-
diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
512+
diff: pointsDiffer
510513
}
511514
}
512515
};
@@ -592,13 +595,14 @@ Map {
592595
'use strict';
593596
594597
const {NativeComponentRegistry} = require('react-native');
598+
const {pointsDiffer} = require('react-native/unstable-internals-do-not-use');
595599
596600
let nativeComponentName = 'PointPropNativeComponentView';
597601
export const __INTERNAL_VIEW_CONFIG = {
598602
uiViewClassName: \\"PointPropNativeComponentView\\",
599603
validAttributes: {
600604
startPoint: {
601-
diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
605+
diff: pointsDiffer
602606
}
603607
}
604608
};

0 commit comments

Comments
 (0)