Consolidate generated view config imports (#58651)

Summary:
Pull Request resolved: https://github.com/react/react-native/pull/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

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

@@ -99,15 +99,13 @@ interface NativeCommands {
   +hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: Int32, y: Int32) => void,
   +scrollTo: (viewRef: React.ElementRef<NativeType>, y: Int32, animated: boolean) => void,
 }
-const {
-  ConditionallyIgnoredEventHandlers
-} = require('react-native/unstable-internals-do-not-use');
 const {
   NativeComponentRegistry
 } = require('react-native');
 const {
-  Renderer
-} = require(\\"react-native/unstable-internals-do-not-use\\");
+  ConditionallyIgnoredEventHandlers,
+  dispatchCommand
+} = require('react-native/unstable-internals-do-not-use');
 let nativeComponentName = 'RCTModule';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"RCTModule\\",
@@ -135,10 +133,10 @@ export const __INTERNAL_VIEW_CONFIG = {
 export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
 export const Commands = {
   hotspotUpdate(ref, x, y) {
-    Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
+    dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
   },
   scrollTo(ref, y, animated) {
-    Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
+    dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
   }
 };"
 `;
@@ -164,15 +162,13 @@ interface NativeCommands {
   +hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: Int32, y: Int32) => void,
   +scrollTo: (viewRef: React.ElementRef<NativeType>, y: Int32, animated: boolean) => void,
 }
-const {
-  ConditionallyIgnoredEventHandlers
-} = require('react-native/unstable-internals-do-not-use');
 const {
   NativeComponentRegistry
 } = require('react-native');
 const {
-  Renderer
-} = require(\\"react-native/unstable-internals-do-not-use\\");
+  ConditionallyIgnoredEventHandlers,
+  dispatchCommand
+} = require('react-native/unstable-internals-do-not-use');
 let nativeComponentName = 'RCTModule';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"RCTModule\\",
@@ -200,10 +196,10 @@ export const __INTERNAL_VIEW_CONFIG = {
 export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
 export const Commands = {
   hotspotUpdate(ref, x, y) {
-    Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
+    dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
   },
   scrollTo(ref, y, animated) {
-    Renderer.dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
+    dispatchCommand(ref, \\"scrollTo\\", [y, animated]);
   }
 };"
 `;

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

@@ -17,6 +17,7 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {processColorArray} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ArrayPropsNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -27,7 +28,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     progress: true,
     radii: true,
     colors: {
-      process: require('react-native/unstable-internals-do-not-use').processColorArray
+      process: processColorArray
     },
     srcs: true,
     points: true,
@@ -92,12 +93,13 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {colorAttribute} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ColorPropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"ColorPropNativeComponentView\\",
   validAttributes: {
-    tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute
+    tintColor: colorAttribute
   }
 };
 export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -210,8 +212,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'EventNestedObjectPropsNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -252,8 +254,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'EventPropsNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -358,14 +360,14 @@ Map {
 
 'use strict';
 
-const {NativeComponentRegistry} = require('react-native');
+const {Image, NativeComponentRegistry} = require('react-native');
 
 let nativeComponentName = 'ImagePropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"ImagePropNativeComponentView\\",
   validAttributes: {
     thumbImage: {
-      process: require('react-native').Image.resolveAssetSource
+      process: Image.resolveAssetSource
     }
   }
 };
@@ -422,8 +424,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'RCTInterfaceOnlyComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -494,19 +496,20 @@ Map {
 
 'use strict';
 
-const {NativeComponentRegistry} = require('react-native');
+const {Image, NativeComponentRegistry} = require('react-native');
+const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'MultiNativePropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"MultiNativePropNativeComponentView\\",
   validAttributes: {
     thumbImage: {
-      process: require('react-native').Image.resolveAssetSource
+      process: Image.resolveAssetSource
     },
-    color: require('react-native/unstable-internals-do-not-use').colorAttribute,
-    thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute,
+    color: colorAttribute,
+    thumbTintColor: colorAttribute,
     point: {
-      diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
+      diff: pointsDiffer
     }
   }
 };
@@ -592,13 +595,14 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {pointsDiffer} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'PointPropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"PointPropNativeComponentView\\",
   validAttributes: {
     startPoint: {
-      diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
+      diff: pointsDiffer
     }
   }
 };

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

@@ -17,6 +17,7 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {processColorArray} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ArrayPropsNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -27,7 +28,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     progress: true,
     radii: true,
     colors: {
-      process: require('react-native/unstable-internals-do-not-use').processColorArray
+      process: processColorArray
     },
     srcs: true,
     points: true,
@@ -92,12 +93,13 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {colorAttribute} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ColorPropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"ColorPropNativeComponentView\\",
   validAttributes: {
-    tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute
+    tintColor: colorAttribute
   }
 };
 export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -210,8 +212,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'EventNestedObjectPropsNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -252,8 +254,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'EventPropsNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -358,14 +360,14 @@ Map {
 
 'use strict';
 
-const {NativeComponentRegistry} = require('react-native');
+const {Image, NativeComponentRegistry} = require('react-native');
 
 let nativeComponentName = 'ImagePropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"ImagePropNativeComponentView\\",
   validAttributes: {
     thumbImage: {
-      process: require('react-native').Image.resolveAssetSource
+      process: Image.resolveAssetSource
     }
   }
 };
@@ -422,8 +424,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'RCTInterfaceOnlyComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -494,19 +496,20 @@ Map {
 
 'use strict';
 
-const {NativeComponentRegistry} = require('react-native');
+const {Image, NativeComponentRegistry} = require('react-native');
+const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'MultiNativePropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"MultiNativePropNativeComponentView\\",
   validAttributes: {
     thumbImage: {
-      process: require('react-native').Image.resolveAssetSource
+      process: Image.resolveAssetSource
     },
-    color: require('react-native/unstable-internals-do-not-use').colorAttribute,
-    thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute,
+    color: colorAttribute,
+    thumbTintColor: colorAttribute,
     point: {
-      diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
+      diff: pointsDiffer
     }
   }
 };
@@ -592,13 +595,14 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {pointsDiffer} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'PointPropNativeComponentView';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"PointPropNativeComponentView\\",
   validAttributes: {
     startPoint: {
-      diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
+      diff: pointsDiffer
     }
   }
 };

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

@@ -53,17 +53,23 @@ ${imports}
 ${componentConfig}
 `;
 
-// We use this to add to a set. Need to make sure we aren't importing
-// this multiple times.
-const UIMANAGER_IMPORT = 'const {UIManager} = require("react-native");';
-const RENDERER_IMPORT =
-  'const {Renderer} = require("react-native/unstable-internals-do-not-use");';
+function buildImport(source: string, imports: Set<string>): string {
+  if (imports.size === 0) {
+    return '';
+  }
+
+  return `const {${Array.from(imports).sort().join(', ')}} = require('${source}');`;
+}
 
 function expression(input: string) {
   return core.template.expression(input)();
 }
 
-function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
+function getReactDiffProcessValue(
+  typeAnnotation: PropTypeAnnotation,
+  unstableImports: Set<string>,
+  reactNativeImports: Set<string>,
+) {
   switch (typeAnnotation.type) {
     case 'BooleanTypeAnnotation':
     case 'StringTypeAnnotation':
@@ -78,23 +84,19 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
     case 'ReservedPropTypeAnnotation':
       switch (typeAnnotation.name) {
         case 'ColorPrimitive':
-          return expression(
-            "require('react-native/unstable-internals-do-not-use').colorAttribute",
-          );
+          unstableImports.add('colorAttribute');
+          return expression('colorAttribute');
         case 'ImageSourcePrimitive':
-          return expression(
-            "{ process: require('react-native').Image.resolveAssetSource }",
-          );
+          reactNativeImports.add('Image');
+          return expression('{process: Image.resolveAssetSource}');
         case 'ImageRequestPrimitive':
           throw new Error('ImageRequest should not be used in props');
         case 'PointPrimitive':
-          return expression(
-            "{ diff: require('react-native/unstable-internals-do-not-use').pointsDiffer }",
-          );
+          unstableImports.add('pointsDiffer');
+          return expression('{diff: pointsDiffer}');
         case 'EdgeInsetsPrimitive':
-          return expression(
-            "{ diff: require('react-native/unstable-internals-do-not-use').insetsDiffer }",
-          );
+          unstableImports.add('insetsDiffer');
+          return expression('{diff: insetsDiffer}');
         case 'DimensionPrimitive':
           return t.booleanLiteral(true);
         default:
@@ -107,9 +109,8 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
       if (typeAnnotation.elementType.type === 'ReservedPropTypeAnnotation') {
         switch (typeAnnotation.elementType.name) {
           case 'ColorPrimitive':
-            return expression(
-              "{ process: require('react-native/unstable-internals-do-not-use').processColorArray }",
-            );
+            unstableImports.add('processColorArray');
+            return expression('{process: processColorArray}');
           case 'ImageSourcePrimitive':
           case 'PointPrimitive':
           case 'EdgeInsetsPrimitive':
@@ -192,13 +193,11 @@ function normalizeInputEventName(name: string) {
 // Replicates the behavior of viewConfig in RCTComponentData.m
 function getValidAttributesForEvents(
   events: ReadonlyArray<EventTypeShape>,
-  imports: Set<string>,
+  unstableImports: Set<string>,
 ) {
   // Generated files can live outside the React Native package, so they cannot
   // use a relative import for this implementation detail.
-  imports.add(
-    "const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');",
-  );
+  unstableImports.add('ConditionallyIgnoredEventHandlers');
 
   const validAttributes = t.objectExpression(
     events.map(eventType => {
@@ -257,7 +256,8 @@ function buildViewConfig(
   schema: SchemaType,
   componentName: string,
   component: ComponentShape,
-  imports: Set<string>,
+  unstableImports: Set<string>,
+  reactNativeImports: Set<string>,
 ) {
   const componentProps = component.props;
   const componentEvents = component.events;
@@ -267,10 +267,6 @@ function buildViewConfig(
       case 'ReactNativeBuiltInType':
         switch (extendProps.knownTypeName) {
           case 'ReactNativeCoreViewProps':
-            imports.add(
-              "const {NativeComponentRegistry} = require('react-native');",
-            );
-
             return;
           default:
             extendProps.knownTypeName as empty;
@@ -286,11 +282,19 @@ function buildViewConfig(
     ...componentProps.map(schemaProp => {
       return t.objectProperty(
         t.identifier(schemaProp.name),
-        getReactDiffProcessValue(schemaProp.typeAnnotation),
+        getReactDiffProcessValue(
+          schemaProp.typeAnnotation,
+          unstableImports,
+          reactNativeImports,
+        ),
       );
     }),
     ...(componentEvents.length > 0
-      ? [t.spreadElement(getValidAttributesForEvents(componentEvents, imports))]
+      ? [
+          t.spreadElement(
+            getValidAttributesForEvents(componentEvents, unstableImports),
+          ),
+        ]
       : []),
   ]);
 
@@ -362,7 +366,7 @@ function buildCommands(
   schema: SchemaType,
   componentName: string,
   component: ComponentShape,
-  imports: Set<string>,
+  unstableImports: Set<string>,
 ) {
   const commands = component.commands;
 
@@ -370,7 +374,7 @@ function buildCommands(
     return null;
   }
 
-  imports.add(RENDERER_IMPORT);
+  unstableImports.add('dispatchCommand');
 
   const commandsObject = t.objectExpression(
     commands.map(command => {
@@ -378,10 +382,7 @@ function buildCommands(
       const params = command.typeAnnotation.params;
 
       const dispatchCommandCall = t.callExpression(
-        t.memberExpression(
-          t.identifier('Renderer'),
-          t.identifier('dispatchCommand'),
-        ),
+        t.identifier('dispatchCommand'),
         [
           t.identifier('ref'),
           t.stringLiteral(commandName),
@@ -409,7 +410,8 @@ module.exports = {
   generate(libraryName: string, schema: SchemaType): FilesOutput {
     try {
       const fileName = `${libraryName}NativeViewConfig.js`;
-      const imports: Set<string> = new Set();
+      const unstableImports: Set<string> = new Set();
+      const reactNativeImports: Set<string> = new Set();
 
       const moduleResults = Object.keys(schema.modules)
         .map(moduleName => {
@@ -425,9 +427,11 @@ module.exports = {
               const component = components[componentName];
 
               if (component.paperComponentNameDeprecated) {
-                imports.add(UIMANAGER_IMPORT);
+                reactNativeImports.add('UIManager');
               }
 
+              reactNativeImports.add('NativeComponentRegistry');
+
               const replacedTemplate = ComponentTemplate({
                 componentName,
                 paperComponentName: component.paperComponentName,
@@ -445,7 +449,8 @@ module.exports = {
                   schema,
                   paperComponentName,
                   component,
-                  imports,
+                  unstableImports,
+                  reactNativeImports,
                 ),
               });
 
@@ -453,7 +458,7 @@ module.exports = {
                 schema,
                 paperComponentName,
                 component,
-                imports,
+                unstableImports,
               );
               if (commandsExport) {
                 replacedSourceRoot.body.push(commandsExport);
@@ -477,7 +482,15 @@ module.exports = {
 
       const replacedTemplate = FileTemplate({
         componentConfig: moduleResults,
-        imports: Array.from(imports).sort().join('\n'),
+        imports: [
+          buildImport('react-native', reactNativeImports),
+          buildImport(
+            'react-native/unstable-internals-do-not-use',
+            unstableImports,
+          ),
+        ]
+          .filter(Boolean)
+          .join('\n'),
       });
 
       return new Map([[fileName, replacedTemplate]]);

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

@@ -155,6 +155,7 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {processColorArray} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ArrayPropsNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -165,7 +166,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     progress: true,
     radii: true,
     colors: {
-      process: require('react-native/unstable-internals-do-not-use').processColorArray
+      process: processColorArray
     },
     srcs: true,
     points: true,
@@ -289,6 +290,7 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {processColorArray} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ArrayPropsWithOptionalGenNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -299,7 +301,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     progress: true,
     radii: true,
     colors: {
-      process: require('react-native/unstable-internals-do-not-use').processColorArray
+      process: processColorArray
     },
     srcs: true,
     points: true,
@@ -333,6 +335,7 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {processColorArray} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ArrayPropsWithOptionalObjectGenNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -343,7 +346,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     progress: true,
     radii: true,
     colors: {
-      process: require('react-native/unstable-internals-do-not-use').processColorArray
+      process: processColorArray
     },
     srcs: true,
     points: true,
@@ -407,12 +410,13 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {colorAttribute} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ColorPropNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"ColorPropNativeComponent\\",
   validAttributes: {
-    tintColor: require('react-native/unstable-internals-do-not-use').colorAttribute
+    tintColor: colorAttribute
   }
 };
 export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
@@ -437,7 +441,7 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
-const {Renderer} = require(\\"react-native/unstable-internals-do-not-use\\");
+const {dispatchCommand} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'CommandNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -447,10 +451,10 @@ export const __INTERNAL_VIEW_CONFIG = {
 export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
 export const Commands = {
   flashScrollIndicators(ref) {
-    Renderer.dispatchCommand(ref, \\"flashScrollIndicators\\", []);
+    dispatchCommand(ref, \\"flashScrollIndicators\\", []);
   },
   allTypes(ref, x, y, z, message, animated, locations) {
-    Renderer.dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated, locations]);
+    dispatchCommand(ref, \\"allTypes\\", [x, y, z, message, animated, locations]);
   }
 };
 ",
@@ -474,7 +478,7 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
-const {Renderer} = require(\\"react-native/unstable-internals-do-not-use\\");
+const {dispatchCommand} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'CommandNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -486,13 +490,13 @@ export const __INTERNAL_VIEW_CONFIG = {
 export default NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
 export const Commands = {
   handleRootTag(ref, rootTag) {
-    Renderer.dispatchCommand(ref, \\"handleRootTag\\", [rootTag]);
+    dispatchCommand(ref, \\"handleRootTag\\", [rootTag]);
   },
   hotspotUpdate(ref, x, y) {
-    Renderer.dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
+    dispatchCommand(ref, \\"hotspotUpdate\\", [x, y]);
   },
   addItems(ref, items) {
-    Renderer.dispatchCommand(ref, \\"addItems\\", [items]);
+    dispatchCommand(ref, \\"addItems\\", [items]);
   }
 };
 ",
@@ -580,8 +584,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'EventsNestedObjectNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -622,8 +626,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'EventsNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -692,8 +696,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'RCTInterfaceOnlyComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -867,14 +871,14 @@ Map {
 
 'use strict';
 
-const {NativeComponentRegistry} = require('react-native');
+const {Image, NativeComponentRegistry} = require('react-native');
 
 let nativeComponentName = 'ImagePropNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"ImagePropNativeComponent\\",
   validAttributes: {
     thumbImage: {
-      process: require('react-native').Image.resolveAssetSource
+      process: Image.resolveAssetSource
     }
   }
 };
@@ -900,13 +904,14 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {insetsDiffer} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'InsetsPropNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"InsetsPropNativeComponent\\",
   validAttributes: {
     contentInset: {
-      diff: require('react-native/unstable-internals-do-not-use').insetsDiffer
+      diff: insetsDiffer
     }
   }
 };
@@ -993,8 +998,8 @@ Map {
 
 'use strict';
 
-const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 const {NativeComponentRegistry} = require('react-native');
+const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'RCTInterfaceOnlyComponent';
 export const __INTERNAL_VIEW_CONFIG = {
@@ -1065,19 +1070,20 @@ Map {
 
 'use strict';
 
-const {NativeComponentRegistry} = require('react-native');
+const {Image, NativeComponentRegistry} = require('react-native');
+const {colorAttribute, pointsDiffer} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'ImageColorPropNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"ImageColorPropNativeComponent\\",
   validAttributes: {
     thumbImage: {
-      process: require('react-native').Image.resolveAssetSource
+      process: Image.resolveAssetSource
     },
-    color: require('react-native/unstable-internals-do-not-use').colorAttribute,
-    thumbTintColor: require('react-native/unstable-internals-do-not-use').colorAttribute,
+    color: colorAttribute,
+    thumbTintColor: colorAttribute,
     point: {
-      diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
+      diff: pointsDiffer
     }
   }
 };
@@ -1221,13 +1227,14 @@ Map {
 'use strict';
 
 const {NativeComponentRegistry} = require('react-native');
+const {pointsDiffer} = require('react-native/unstable-internals-do-not-use');
 
 let nativeComponentName = 'PointPropNativeComponent';
 export const __INTERNAL_VIEW_CONFIG = {
   uiViewClassName: \\"PointPropNativeComponent\\",
   validAttributes: {
     startPoint: {
-      diff: require('react-native/unstable-internals-do-not-use').pointsDiffer
+      diff: pointsDiffer
     }
   }
 };
@@ -1391,8 +1398,7 @@ Map {
 
 'use strict';
 
-const {NativeComponentRegistry} = require('react-native');
-const {UIManager} = require(\\"react-native\\");
+const {NativeComponentRegistry, UIManager} = require('react-native');
 
 let nativeComponentName = 'NativeComponentName';
 if (UIManager.hasViewManagerConfig('NativeComponentName')) {

packages/react-native/src/unstable-internals-do-not-use.d.ts

@@ -229,6 +229,7 @@ export const PressabilityDebugView: React.ComponentType<PressabilityDebugViewPro
 
 /** Renderer APIs used by generated Codegen modules. */
 export * as Renderer from '../types_generated/Libraries/ReactNative/RendererImplementation';
+export {dispatchCommand} from '../types_generated/Libraries/ReactNative/RendererImplementation';
 
 // #endregion
 // #region Codegen view config helpers

packages/react-native/src/unstable-internals-do-not-use.js

@@ -50,6 +50,7 @@ import typeof NativeSourceCode from '../Libraries/NativeModules/specs/NativeSour
 import typeof {PressabilityDebugView} from '../Libraries/Pressability/PressabilityDebug';
 import typeof AppContainer from '../Libraries/ReactNative/AppContainer';
 import typeof * as Renderer from '../Libraries/ReactNative/RendererProxy';
+import typeof {dispatchCommand} from '../Libraries/ReactNative/RendererProxy';
 import typeof {customDirectEventTypes} from '../Libraries/Renderer/shims/ReactNativeViewConfigRegistry';
 import typeof processColorArray from '../Libraries/StyleSheet/processColorArray';
 import typeof DevLoadingView from '../Libraries/Utilities/DevLoadingView';
@@ -76,6 +77,9 @@ module.exports = {
     return require('../Libraries/Renderer/shims/ReactNativeViewConfigRegistry')
       .customDirectEventTypes;
   },
+  get dispatchCommand(): dispatchCommand {
+    return require('../Libraries/ReactNative/RendererProxy').dispatchCommand;
+  },
   get DevLoadingView(): DevLoadingView {
     return require('../Libraries/Utilities/DevLoadingView').default;
   },
@@ -83,7 +87,10 @@ module.exports = {
     return require('../Libraries/Core/Devtools/getDevServer').default;
   },
   get HMRClient(): HMRClient {
-    return require('../Libraries/Utilities/HMRClient').default;
+    if (__DEV__) {
+      return require('../Libraries/Utilities/HMRClient').default;
+    }
+    return require('../Libraries/Utilities/HMRClientProdShim').default;
   },
   get NativeExceptionsManager(): NativeExceptionsManager {
     return require('../Libraries/Core/NativeExceptionsManager').default;

packages/react-native/src/unstable-internals-do-not-use.js.flow

@@ -20,6 +20,7 @@ export {colorAttribute} from '../Libraries/Components/View/ReactNativeStyleAttri
 export {ConditionallyIgnoredEventHandlers} from '../Libraries/NativeComponent/ViewConfigIgnore';
 export {customDirectEventTypes} from '../Libraries/Renderer/shims/ReactNativeViewConfigRegistry';
 export {default as DevLoadingView} from '../Libraries/Utilities/DevLoadingView';
+export {dispatchCommand} from '../Libraries/ReactNative/RendererProxy';
 export {default as getDevServer} from '../Libraries/Core/Devtools/getDevServer';
 export {default as HMRClient} from '../Libraries/Utilities/HMRClient';
 export {default as NativeExceptionsManager} from '../Libraries/Core/NativeExceptionsManager';