Introduce "headerPrefix" codegen option (#41956)

Summary: Pull Request resolved: #41956 By default, generated Cxx sources for components all end up in same directory. However the include declarations in them look like this: ``` #include <react/renderer/components/${libraryName}/ShadowNodes.h> ``` And not like this: ``` #include "ShadowNodes.h" ``` This works fine with Buck because it supports header prefixes. To get this working with CocoaPods we define additional `HEADER_SEARCH_PATHS` for our `React-Codegen` pod. This approach will not work if we want to generate code at the library level and check in the artifacts. That's because we don't have control over the Podspec there, and can't inject those additional `HEADER_SEARCH_PATHS`. This diff adds the `headerPrefix` argument to the codegen entry point. It is `react/renderer/components/${libraryName}` by default, but can become empty if we want to generate code at the library level, and don't want to deal with this nested header structure. *Note:* `RNCodegen` runs all the generators [in a loop](https://github.com/facebook/react-native/blob/main/packages/react-native-codegen/src/generators/RNCodegen.js#L263-L275), assuming that the all have same function signature So I had to add the `headerPrefix` argument to all the generators, even to the ones that don't really need it. Changelog: [General][Added] - Introduce "headerPrefix" codegen option. Reviewed By: zeyap Differential Revision: D51811596 fbshipit-source-id: c5c3e1e571c7c4ea2f5354eb9a7b0df6b917fc0c
facebook · Dec 20, 2023 · dae4a11 · dae4a11
1 parent b00569c
commit dae4a11
Show file tree

Hide file tree

Showing 35 changed files with 165 additions and 72 deletions.
diff --git a/packages/react-native-codegen/e2e/__tests__/components/GenerateComponentDescriptorH-test.js b/packages/react-native-codegen/e2e/__tests__/components/GenerateComponentDescriptorH-test.js
@@ -25,7 +25,13 @@ fixtures.forEach(fixture => {
   it(`GenerateComponentDescriptorH can generate for '${fixture}'`, () => {
     const libName = 'RNCodegenModuleFixtures';
     const schema = parser.parseFile(`${FIXTURE_DIR}/${fixture}`);
-    const output = generator.generate(libName, schema);
+    const output = generator.generate(
+      libName,
+      schema,
+      undefined,
+      false,
+      `react/renderer/components/${libName}/`,
+    );
     expect(Object.fromEntries(output)).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-codegen/e2e/__tests__/components/GenerateEventEmitterCpp-test.js b/packages/react-native-codegen/e2e/__tests__/components/GenerateEventEmitterCpp-test.js
@@ -25,7 +25,13 @@ fixtures.forEach(fixture => {
   it(`GenerateEventEmitterCpp can generate for '${fixture}'`, () => {
     const libName = 'RNCodegenModuleFixtures';
     const schema = parser.parseFile(`${FIXTURE_DIR}/${fixture}`);
-    const output = generator.generate(libName, schema);
+    const output = generator.generate(
+      libName,
+      schema,
+      undefined,
+      false,
+      `react/renderer/components/${libName}/`,
+    );
     expect(Object.fromEntries(output)).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-codegen/e2e/__tests__/components/GeneratePropsCpp-test.js b/packages/react-native-codegen/e2e/__tests__/components/GeneratePropsCpp-test.js
@@ -25,7 +25,13 @@ fixtures.forEach(fixture => {
   it(`GeneratePropsCpp can generate for '${fixture}'`, () => {
     const libName = 'RNCodegenModuleFixtures';
     const schema = parser.parseFile(`${FIXTURE_DIR}/${fixture}`);
-    const output = generator.generate(libName, schema);
+    const output = generator.generate(
+      libName,
+      schema,
+      '',
+      false,
+      `react/renderer/components/${libName}/`,
+    );
     expect(Object.fromEntries(output)).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-codegen/e2e/__tests__/components/GenerateShadowNodeCpp-test.js b/packages/react-native-codegen/e2e/__tests__/components/GenerateShadowNodeCpp-test.js
@@ -24,7 +24,13 @@ fixtures.forEach(fixture => {
   it(`GenerateShadowNodeCpp can generate for '${fixture}'`, () => {
     const libName = 'RNCodegenModuleFixtures';
     const schema = parser.parseFile(`${FIXTURE_DIR}/${fixture}`);
-    const output = generator.generate(libName, schema, undefined, false);
+    const output = generator.generate(
+      libName,
+      schema,
+      '',
+      false,
+      `react/renderer/components/${libName}/`,
+    );
     expect(Object.fromEntries(output)).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-codegen/e2e/__tests__/components/GenerateShadowNodeH-test.js b/packages/react-native-codegen/e2e/__tests__/components/GenerateShadowNodeH-test.js
@@ -24,7 +24,13 @@ fixtures.forEach(fixture => {
   it(`GenerateShadowNodeH can generate for '${fixture}'`, () => {
     const libName = 'RNCodegenModuleFixtures';
     const schema = parser.parseFile(`${FIXTURE_DIR}/${fixture}`);
-    const output = generator.generate(libName, schema, undefined, false);
+    const output = generator.generate(
+      libName,
+      schema,
+      '',
+      false,
+      `react/renderer/components/${libName}/`,
+    );
     expect(Object.fromEntries(output)).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-codegen/src/generators/RNCodegen.js b/packages/react-native-codegen/src/generators/RNCodegen.js
@@ -77,6 +77,7 @@ type LibraryOptions = $ReadOnly<{
   outputDirectory: string,
   packageName?: string, // Some platforms have a notion of package, which should be configurable.
   assumeNonnull: boolean,
+  useLocalIncludePaths?: boolean,
 }>;
 
 type SchemasOptions = $ReadOnly<{
@@ -232,16 +233,24 @@ module.exports = {
       outputDirectory,
       packageName,
       assumeNonnull,
+      useLocalIncludePaths,
     }: LibraryOptions,
     {generators, test}: LibraryConfig,
   ): boolean {
     schemaValidator.validate(schema);
 
+    const defaultHeaderPrefix = 'react/renderer/components';
+    const headerPrefix =
+      useLocalIncludePaths === true
+        ? ''
+        : `${defaultHeaderPrefix}/${libraryName}/`;
     function composePath(intermediate: string) {
       return path.join(outputDirectory, intermediate, libraryName);
     }
 
-    const componentIOSOutput = composePath('react/renderer/components/');
+    const componentIOSOutput = composePath(
+      useLocalIncludePaths === true ? '' : defaultHeaderPrefix,
+    );
     const modulesIOSOutput = composePath('./');
 
     const outputFoldersForGenerators = {
@@ -262,15 +271,19 @@ module.exports = {
 
     for (const name of generators) {
       for (const generator of LIBRARY_GENERATORS[name]) {
-        generator(libraryName, schema, packageName, assumeNonnull).forEach(
-          (contents: string, fileName: string) => {
-            generatedFiles.push({
-              name: fileName,
-              content: contents,
-              outputDir: outputFoldersForGenerators[name],
-            });
-          },
-        );
+        generator(
+          libraryName,
+          schema,
+          packageName,
+          assumeNonnull,
+          headerPrefix,
+        ).forEach((contents: string, fileName: string) => {
+          generatedFiles.push({
+            name: fileName,
+            content: contents,
+            outputDir: outputFoldersForGenerators[name],
+          });
+        });
       }
     }
     return checkOrWriteFiles(generatedFiles, test);

diff --git a/packages/react-native-codegen/src/generators/components/GenerateComponentDescriptorH.js b/packages/react-native-codegen/src/generators/components/GenerateComponentDescriptorH.js
@@ -17,10 +17,10 @@ type FilesOutput = Map<string, string>;
 
 const FileTemplate = ({
   componentDescriptors,
-  libraryName,
+  headerPrefix,
 }: {
   componentDescriptors: string,
-  libraryName: string,
+  headerPrefix: string,
 }) => `
 /**
  * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
@@ -33,7 +33,7 @@ const FileTemplate = ({
 
 #pragma once
 
-#include <react/renderer/components/${libraryName}/ShadowNodes.h>
+#include <${headerPrefix}ShadowNodes.h>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 
 namespace facebook::react {
@@ -54,6 +54,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const fileName = 'ComponentDescriptors.h';
 
@@ -85,7 +86,7 @@ module.exports = {
 
     const replacedTemplate = FileTemplate({
       componentDescriptors,
-      libraryName,
+      headerPrefix: headerPrefix ?? '',
     });
 
     return new Map([[fileName, replacedTemplate]]);

diff --git a/packages/react-native-codegen/src/generators/components/GenerateComponentHObjCpp.js b/packages/react-native-codegen/src/generators/components/GenerateComponentHObjCpp.js
@@ -380,6 +380,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const fileName = 'RCTComponentViewHelpers.h';
 

diff --git a/packages/react-native-codegen/src/generators/components/GenerateEventEmitterCpp.js b/packages/react-native-codegen/src/generators/components/GenerateEventEmitterCpp.js
@@ -31,12 +31,12 @@ type ComponentCollection = $ReadOnly<{
 
 const FileTemplate = ({
   events,
-  libraryName,
   extraIncludes,
+  headerPrefix,
 }: {
   events: string,
-  libraryName: string,
   extraIncludes: Set<string>,
+  headerPrefix: string,
 }) => `
 /**
  * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
@@ -47,7 +47,7 @@ const FileTemplate = ({
  * ${'@'}generated by codegen project: GenerateEventEmitterCpp.js
  */
 
-#include <react/renderer/components/${libraryName}/EventEmitters.h>
+#include <${headerPrefix}EventEmitters.h>
 ${[...extraIncludes].join('\n')}
 
 namespace facebook::react {
@@ -411,6 +411,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const moduleComponents: ComponentCollection = Object.keys(schema.modules)
       .map(moduleName => {
@@ -442,9 +443,9 @@ module.exports = {
 
     const fileName = 'EventEmitters.cpp';
     const replacedTemplate = FileTemplate({
-      libraryName,
       events: componentEmitters,
       extraIncludes,
+      headerPrefix: headerPrefix ?? '',
     });
 
     return new Map([[fileName, replacedTemplate]]);

diff --git a/packages/react-native-codegen/src/generators/components/GenerateEventEmitterH.js b/packages/react-native-codegen/src/generators/components/GenerateEventEmitterH.js
@@ -311,6 +311,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const moduleComponents: ComponentCollection = Object.keys(schema.modules)
       .map(moduleName => {

diff --git a/packages/react-native-codegen/src/generators/components/GeneratePropsCpp.js b/packages/react-native-codegen/src/generators/components/GeneratePropsCpp.js
@@ -18,13 +18,13 @@ const {convertDefaultTypeToString, getImports} = require('./CppHelpers');
 type FilesOutput = Map<string, string>;
 
 const FileTemplate = ({
-  libraryName,
   imports,
   componentClasses,
+  headerPrefix,
 }: {
-  libraryName: string,
   imports: string,
   componentClasses: string,
+  headerPrefix: string,
 }) => `
 /**
  * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
@@ -35,7 +35,7 @@ const FileTemplate = ({
  * ${'@'}generated by codegen project: GeneratePropsCpp.js
  */
 
-#include <react/renderer/components/${libraryName}/Props.h>
+#include <${headerPrefix}Props.h>
 ${imports}
 
 namespace facebook::react {
@@ -104,6 +104,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const fileName = 'Props.cpp';
     const allImports: Set<string> = new Set([
@@ -151,8 +152,8 @@ module.exports = {
 
     const replacedTemplate = FileTemplate({
       componentClasses: componentProps,
-      libraryName,
       imports: Array.from(allImports).sort().join('\n').trim(),
+      headerPrefix: headerPrefix ?? '',
     });
 
     return new Map([[fileName, replacedTemplate]]);

diff --git a/packages/react-native-codegen/src/generators/components/GeneratePropsH.js b/packages/react-native-codegen/src/generators/components/GeneratePropsH.js
@@ -706,6 +706,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const fileName = 'Props.h';
 

diff --git a/packages/react-native-codegen/src/generators/components/GeneratePropsJavaDelegate.js b/packages/react-native-codegen/src/generators/components/GeneratePropsJavaDelegate.js
@@ -297,6 +297,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     // TODO: This doesn't support custom package name yet.
     const normalizedPackageName = 'com.facebook.react.viewmanagers';

diff --git a/packages/react-native-codegen/src/generators/components/GeneratePropsJavaInterface.js b/packages/react-native-codegen/src/generators/components/GeneratePropsJavaInterface.js
@@ -237,6 +237,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     // TODO: This doesn't support custom package name yet.
     const normalizedPackageName = 'com.facebook.react.viewmanagers';

diff --git a/packages/react-native-codegen/src/generators/components/GenerateShadowNodeCpp.js b/packages/react-native-codegen/src/generators/components/GenerateShadowNodeCpp.js
@@ -16,11 +16,11 @@ import type {SchemaType} from '../../CodegenSchema';
 type FilesOutput = Map<string, string>;
 
 const FileTemplate = ({
-  libraryName,
   componentNames,
+  headerPrefix,
 }: {
-  libraryName: string,
   componentNames: string,
+  headerPrefix: string,
 }) => `
 /**
  * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
@@ -31,7 +31,7 @@ const FileTemplate = ({
  * ${'@'}generated by codegen project: GenerateShadowNodeCpp.js
  */
 
-#include <react/renderer/components/${libraryName}/ShadowNodes.h>
+#include <${headerPrefix}ShadowNodes.h>
 
 namespace facebook::react {
 
@@ -51,6 +51,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const fileName = 'ShadowNodes.cpp';
 
@@ -85,7 +86,7 @@ module.exports = {
 
     const replacedTemplate = FileTemplate({
       componentNames,
-      libraryName,
+      headerPrefix: headerPrefix ?? '',
     });
 
     return new Map([[fileName, replacedTemplate]]);

diff --git a/packages/react-native-codegen/src/generators/components/GenerateShadowNodeH.js b/packages/react-native-codegen/src/generators/components/GenerateShadowNodeH.js
@@ -16,13 +16,11 @@ import type {SchemaType} from '../../CodegenSchema';
 type FilesOutput = Map<string, string>;
 
 const FileTemplate = ({
-  imports,
-  libraryName,
   componentClasses,
+  headerPrefix,
 }: {
-  imports: string,
-  libraryName: string,
   componentClasses: string,
+  headerPrefix: string,
 }) => `
 /**
  * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
@@ -35,8 +33,9 @@ const FileTemplate = ({
 
 #pragma once
 
-${imports}#include <react/renderer/components/${libraryName}/Props.h>
-#include <react/renderer/components/${libraryName}/States.h>
+#include <${headerPrefix}EventEmitters.h>
+#include <${headerPrefix}Props.h>
+#include <${headerPrefix}States.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
 #include <jsi/jsi.h>
 
@@ -72,6 +71,7 @@ module.exports = {
     schema: SchemaType,
     packageName?: string,
     assumeNonnull: boolean = false,
+    headerPrefix?: string,
   ): FilesOutput {
     const fileName = 'ShadowNodes.h';
 
@@ -109,12 +109,9 @@ module.exports = {
       .filter(Boolean)
       .join('\n\n');
 
-    const eventEmitterImport = `#include <react/renderer/components/${libraryName}/EventEmitters.h>\n`;
-
     const replacedTemplate = FileTemplate({
       componentClasses: moduleResults,
-      libraryName,
-      imports: eventEmitterImport,
+      headerPrefix: headerPrefix ?? '',
     });
 
     return new Map([[fileName, replacedTemplate]]);