@react-native/codegen 0.89.0-nightly-20260923-4b6cd413d → 0.89.0-nightly-20260925-de350e65e

package/lib/generators/components/GenerateViewConfigJs.js

@@ -23,12 +23,16 @@ ${imports}
 
 ${componentConfig}
 `;
-const UIMANAGER_IMPORT = 'const {UIManager} = require("react-native");';
-const RENDERER_IMPORT = 'const {Renderer} = require("react-native/unstable-internals-do-not-use");';
+function buildImport(source, imports) {
+  if (imports.size === 0) {
+    return '';
+  }
+  return `const {${Array.from(imports).sort().join(', ')}} = require('${source}');`;
+}
 function expression(input) {
   return core.template.expression(input)();
 }
-function getReactDiffProcessValue(typeAnnotation) {
+function getReactDiffProcessValue(typeAnnotation, unstableImports, reactNativeImports) {
   switch (typeAnnotation.type) {
     case 'BooleanTypeAnnotation':
     case 'StringTypeAnnotation':
@@ -43,15 +47,19 @@ function getReactDiffProcessValue(typeAnnotation) {
     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:
@@ -62,7 +70,8 @@ function getReactDiffProcessValue(typeAnnotation) {
       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':
@@ -116,8 +125,8 @@ function normalizeInputEventName(name) {
   }
   return name;
 }
-function getValidAttributesForEvents(events, imports) {
-  imports.add("const {ConditionallyIgnoredEventHandlers} = require('react-native/unstable-internals-do-not-use');");
+function getValidAttributesForEvents(events, unstableImports) {
+  unstableImports.add('ConditionallyIgnoredEventHandlers');
   const validAttributes = t.objectExpression(events.map(eventType => {
     return t.objectProperty(t.identifier(eventType.name), t.booleanLiteral(true));
   }));
@@ -129,7 +138,7 @@ function generateBubblingEventInfo(event, nameOveride) {
 function generateDirectEventInfo(event, nameOveride) {
   return t.objectProperty(t.identifier(normalizeInputEventName(nameOveride || event.name)), t.objectExpression([t.objectProperty(t.identifier('registrationName'), t.stringLiteral(event.name))]));
 }
-function buildViewConfig(schema, componentName, component, imports) {
+function buildViewConfig(schema, componentName, component, unstableImports, reactNativeImports) {
   const componentProps = component.props;
   const componentEvents = component.events;
   component.extendsProps.forEach(extendProps => {
@@ -137,7 +146,6 @@ function buildViewConfig(schema, componentName, component, imports) {
       case 'ReactNativeBuiltInType':
         switch (extendProps.knownTypeName) {
           case 'ReactNativeCoreViewProps':
-            imports.add("const {NativeComponentRegistry} = require('react-native');");
             return;
           default:
             extendProps.knownTypeName;
@@ -149,8 +157,8 @@ function buildViewConfig(schema, componentName, component, imports) {
     }
   });
   const validAttributes = t.objectExpression([...componentProps.map(schemaProp => {
-    return t.objectProperty(t.identifier(schemaProp.name), getReactDiffProcessValue(schemaProp.typeAnnotation));
-  }), ...(componentEvents.length > 0 ? [t.spreadElement(getValidAttributesForEvents(componentEvents, imports))] : [])]);
+    return t.objectProperty(t.identifier(schemaProp.name), getReactDiffProcessValue(schemaProp.typeAnnotation, unstableImports, reactNativeImports));
+  }), ...(componentEvents.length > 0 ? [t.spreadElement(getValidAttributesForEvents(componentEvents, unstableImports))] : [])]);
   const bubblingEventNames = component.events.filter(event => event.bubblingType === 'bubble').reduce((bubblingEvents, event) => {
     if (event.paperTopLevelNameDeprecated) {
       bubblingEvents.push(generateBubblingEventInfo(event, event.paperTopLevelNameDeprecated));
@@ -177,16 +185,16 @@ function buildViewConfig(schema, componentName, component, imports) {
   properties.push(t.objectProperty(t.identifier('validAttributes'), validAttributes));
   return t.objectExpression(properties);
 }
-function buildCommands(schema, componentName, component, imports) {
+function buildCommands(schema, componentName, component, unstableImports) {
   const commands = component.commands;
   if (commands.length === 0) {
     return null;
   }
-  imports.add(RENDERER_IMPORT);
+  unstableImports.add('dispatchCommand');
   const commandsObject = t.objectExpression(commands.map(command => {
     const commandName = command.name;
     const params = command.typeAnnotation.params;
-    const dispatchCommandCall = t.callExpression(t.memberExpression(t.identifier('Renderer'), t.identifier('dispatchCommand')), [t.identifier('ref'), t.stringLiteral(commandName), t.arrayExpression(params.map(param => t.identifier(param.name)))]);
+    const dispatchCommandCall = t.callExpression(t.identifier('dispatchCommand'), [t.identifier('ref'), t.stringLiteral(commandName), t.arrayExpression(params.map(param => t.identifier(param.name)))]);
     return t.objectMethod('method', t.identifier(commandName), [t.identifier('ref'), ...params.map(param => t.identifier(param.name))], t.blockStatement([t.expressionStatement(dispatchCommandCall)]));
   }));
   return t.exportNamedDeclaration(t.variableDeclaration('const', [t.variableDeclarator(t.identifier('Commands'), commandsObject)]));
@@ -195,7 +203,8 @@ module.exports = {
   generate(libraryName, schema) {
     try {
       const fileName = `${libraryName}NativeViewConfig.js`;
-      const imports = new Set();
+      const unstableImports = new Set();
+      const reactNativeImports = new Set();
       const moduleResults = Object.keys(schema.modules).map(moduleName => {
         const module = schema.modules[moduleName];
         if (module.type !== 'Component') {
@@ -208,8 +217,9 @@ module.exports = {
           var _component$paperCompo;
           const component = components[componentName];
           if (component.paperComponentNameDeprecated) {
-            imports.add(UIMANAGER_IMPORT);
+            reactNativeImports.add('UIManager');
           }
+          reactNativeImports.add('NativeComponentRegistry');
           const replacedTemplate = ComponentTemplate({
             componentName,
             paperComponentName: component.paperComponentName,
@@ -217,9 +227,9 @@ module.exports = {
           });
           const paperComponentName = (_component$paperCompo = component.paperComponentName) !== null && _component$paperCompo !== void 0 ? _component$paperCompo : componentName;
           const replacedSourceRoot = core.template.program(replacedTemplate)({
-            VIEW_CONFIG: buildViewConfig(schema, paperComponentName, component, imports)
+            VIEW_CONFIG: buildViewConfig(schema, paperComponentName, component, unstableImports, reactNativeImports)
           });
-          const commandsExport = buildCommands(schema, paperComponentName, component, imports);
+          const commandsExport = buildCommands(schema, paperComponentName, component, unstableImports);
           if (commandsExport) {
             replacedSourceRoot.body.push(commandsExport);
           }
@@ -233,7 +243,7 @@ module.exports = {
       }).filter(Boolean).join('\n\n');
       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]]);
     } catch (error) {

package/lib/generators/components/GenerateViewConfigJs.js.flow

@@ -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]]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/codegen",
-  "version": "0.89.0-nightly-20260923-4b6cd413d",
+  "version": "0.89.0-nightly-20260925-de350e65e",
   "description": "Code generation tools for React Native",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   ],
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/parser": "^7.29.0",
+    "@babel/parser": "^7.29.9",
     "flow-parser": "0.331.0",
     "invariant": "^2.2.4",
     "nullthrows": "^1.1.1",