feat: ship codegen-generated specs (#566)

## Summary

So far with the new architecture-supported templates, we've been
generating libraries that didn't ship their codegen-generated specs.
This means the library's users had to build the codegen specs on their
end (this was done implicitly). With this, the codegen-generated specs
are generated at the build time and they are shipped with the library.

I've followed [this guide from the React Native new arch working
group](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/codegen.md#including-generated-code-into-libraries).

### Making sure example app builds are triggering codegen

An important problem to figure out was to make sure the
codegen-generated specs were being built with each native build of the
example app. To do that,`create-react-native-library` now modifies
non-legacy example apps and adds:

1. A new task to `example/android/build.gradle` that's triggered before
each native build.
2. A prebuild action to the  XCode build schema.
3. A `pre_install` hook to `example/ios/Podfile` that's triggered when
user calls `pod install`.

These modifications make sure `yarn codegen` is called on the repo root
to generate the codegen specs.

### Notes

1. There is an important problem with React Native itself right now.
When `react-native codegen` is called, the generated Java code doesn't
follow the `codegenConfig.android.javaPackageName` property in the
`package.json`. This means the generated Java files are stored in a
default location with the wrong package name. To fix it, I've added a
script that moves the codegen-generated files into the correct place.
You can check facebook/react-native#45079 to
see more.

## Test plan

### Test if Android builds trigger codegen

1. Create a non-legacy library using `create-react-native-library`
2. Install the dependencies and build the example app on Android
3. Make sure the build passes, and there are files under
`android/generated`.

### Test if installing pods triggers codegen

1. Create a non-legacy library using `create-react-native-library`
2. Install the dependencies and run `pod install` in `example/ios`
3. Make sure the pods are installed and there are files under
`ios/generated`.

### Test if iOS builds trigger codegen

1. Create a non-legacy library using `create-react-native-library`
2. Install the dependencies and run `pod install` in `example/ios`
3. Remove the codegen generated code from `ios/generated` since that's
generated by the pod install step
4. Build the app for iOS
5. Make sure there are files in `ios/generated`.

### Test if building the library triggers codegen

1. Run `yarn prepare` to emulate the library release process
2. Run `yarn pack`
3. Extract the files from the generated `package.tgz`
4. Make sure there are files under `ios/generated`, and
`android/generated` in the generated package.

Author: atlj

packages/create-react-native-library/src/index.ts

@@ -13,6 +13,7 @@ import generateExampleApp, {
 } from './utils/generateExampleApp';
 import { spawn } from './utils/spawn';
 import { version } from '../package.json';
+import { addCodegenBuildScript } from './utils/addCodegenBuildScript';
 
 const FALLBACK_BOB_VERSION = '0.29.0';
 
@@ -788,6 +789,10 @@ async function create(_argv: yargs.Arguments<any>) {
       rootPackageJson.devDependencies['react-native'] =
         examplePackageJson.dependencies['react-native'];
     }
+
+    if (arch !== 'legacy') {
+      addCodegenBuildScript(folder, options.project.name);
+    }
   }
 
   // Some of the passed args can already be derived from the generated package.json file.

packages/create-react-native-library/src/utils/addCodegenBuildScript.ts

@@ -0,0 +1,98 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+// This is added to the example app's build.gradle file to invoke codegen before every build
+const GRADLE_INVOKE_CODEGEN_TASK = `
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+if (isNewArchitectureEnabled()) {
+    // Since our library doesn't invoke codegen automatically we need to do it here.
+    tasks.register('invokeLibraryCodegen', Exec) {
+        workingDir "$rootDir/../../"
+        commandLine "npx", "bob", "build", "--target", "codegen"
+    }
+    preBuild.dependsOn invokeLibraryCodegen
+}`;
+
+// This is added to the example app's xcscheme file to invoke codegen before every build
+const XCODE_INVOKE_CODEGEN_ACTION = `
+      <PreActions>
+         <ExecutionAction
+            ActionType = "Xcode.IDEStandardExecutionActionsCore.ExecutionActionType.ShellScriptAction">
+            <ActionContent
+               title = "Invoke Codegen"
+               scriptText = "cd &quot;$WORKSPACE_PATH/../../../&quot; &amp;&amp; npx bob build --target codegen&#10;">
+            </ActionContent>
+         </ExecutionAction>
+      </PreActions>`;
+
+// You need to have the files before calling pod install otherwise they won't be registered in your pod.
+// So we add a pre_install hook to the podfile that invokes codegen
+const PODSPEC_INVOKE_CODEGEN_SCRIPT = `
+  pre_install do |installer|
+    system("cd ../../ && npx bob build --target codegen")
+  end
+`;
+
+/**
+ * Codegen isn't invoked for libraries with `includesGeneratedCode` set to `true`.
+ * This patches the example app to invoke library codegen on every app build.
+ */
+export async function addCodegenBuildScript(
+  libraryPath: string,
+  projectName: string
+) {
+  const appBuildGradlePath = path.join(
+    libraryPath,
+    'example',
+    'android',
+    'app',
+    'build.gradle'
+  );
+  const exampleAppBuildSchemePath = path.join(
+    libraryPath,
+    'example',
+    'ios',
+    `${projectName}Example.xcodeproj`,
+    'xcshareddata',
+    'xcschemes',
+    `${projectName}Example.xcscheme`
+  );
+  const podfilePath = path.join(libraryPath, 'example', 'ios', 'Podfile');
+
+  // Add a gradle task that runs before every build
+  let appBuildGradle = (await fs.readFile(appBuildGradlePath)).toString();
+  appBuildGradle += GRADLE_INVOKE_CODEGEN_TASK;
+
+  await fs.writeFile(appBuildGradlePath, appBuildGradle);
+
+  // Add an XCode prebuild action.
+  const exampleAppBuildScheme = (await fs.readFile(exampleAppBuildSchemePath))
+    .toString()
+    .split('\n');
+  // Used XCode and inspected the result to determine where it inserts the actions
+  const actionTargetLineIndex = exampleAppBuildScheme.findIndex((line) =>
+    line.includes('<BuildActionEntries>')
+  );
+  exampleAppBuildScheme.splice(
+    actionTargetLineIndex,
+    0,
+    XCODE_INVOKE_CODEGEN_ACTION
+  );
+
+  await fs.writeFile(
+    exampleAppBuildSchemePath,
+    exampleAppBuildScheme.join('\n')
+  );
+
+  // Add a preinstall action to the podfile that invokes codegen
+  const podfile = (await fs.readFile(podfilePath)).toString().split('\n');
+  const podfilePostInstallIndex = podfile.findIndex((line) =>
+    line.includes('post_install do |installer|')
+  );
+  podfile.splice(podfilePostInstallIndex, 0, PODSPEC_INVOKE_CODEGEN_SCRIPT);
+
+  await fs.writeFile(podfilePath, podfile.join('\n'));
+}

packages/create-react-native-library/templates/common/$.gitignore

@@ -76,3 +76,7 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+
+# React Native Codegen
+ios/generated
+android/generated

packages/create-react-native-library/templates/common/$package.json

@@ -168,6 +168,9 @@
     "source": "src",
     "output": "lib",
     "targets": [
+<% if (project.arch !== 'legacy') { -%>
+      "codegen",
+<% } -%>
       [
         "commonjs",
         {
@@ -191,8 +194,16 @@
   },
   "codegenConfig": {
     "name": "RN<%- project.name -%><%- project.view ? 'View': '' -%>Spec",
-    "type": <%- project.view ? '"components"': '"modules"' %>,
-    "jsSrcsDir": "src"
+    "type": "all",
+    "jsSrcsDir": "src",
+    "outputDir": {
+      "ios": "ios/generated",
+      "android": "android/generated"
+    },
+    "android": {
+      "javaPackageName": "com.<%- project.package %>"
+    },
+    "includesGeneratedCode": true
 <% } -%>
   }
 }

packages/create-react-native-library/templates/native-common/android/build.gradle

@@ -114,8 +114,8 @@ android {
     main {
       if (isNewArchitectureEnabled()) {
           java.srcDirs += [
-            // This is needed to build Kotlin project with NewArch enabled
-            "${project.buildDir}/generated/source/codegen/java"
+            "generated/java",
+            "generated/jni"
           ]
       }
     }
@@ -127,8 +127,9 @@ android {
       if (isNewArchitectureEnabled()) {
         java.srcDirs += [
           "src/newarch",
-          // This is needed to build Kotlin project with NewArch enabled
-          "${project.buildDir}/generated/source/codegen/java"
+          // Codegen specs
+          "generated/java",
+          "generated/jni"
         ]
       } else {
         java.srcDirs += ["src/oldarch"]

packages/create-react-native-library/templates/native-common/{%- project.identifier %}.podspec

@@ -18,6 +18,8 @@ Pod::Spec.new do |s|
   s.source_files = "ios/**/*.{h,m,mm}", "cpp/**/*.{hpp,cpp,c,h}"
 <% } else if (project.swift) { -%>
   s.source_files = "ios/**/*.{h,m,mm,swift}"
+<% } else if (project.arch !== "legacy") { -%>
+  s.source_files = "ios/**/*.{h,m,mm,cpp}"
 <% } else { -%>
   s.source_files = "ios/**/*.{h,m,mm}"
 <% } -%>

packages/create-react-native-library/templates/native-library-mixed/react-native.config.js

@@ -0,0 +1,12 @@
+/**
+ * @type {import('@react-native-community/cli-types').UserDependencyConfig}
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        cmakeListsPath: 'generated/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

packages/create-react-native-library/templates/native-library-new/react-native.config.js

@@ -0,0 +1,12 @@
+/**
+ * @type {import('@react-native-community/cli-types').UserDependencyConfig}
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        cmakeListsPath: 'generated/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

packages/create-react-native-library/templates/native-view-mixed/react-native.config.js

@@ -0,0 +1,12 @@
+/**
+ * @type {import('@react-native-community/cli-types').UserDependencyConfig}
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        cmakeListsPath: 'generated/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

packages/create-react-native-library/templates/native-view-new/react-native.config.js

@@ -0,0 +1,12 @@
+/**
+ * @type {import('@react-native-community/cli-types').UserDependencyConfig}
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        cmakeListsPath: 'generated/jni/CMakeLists.txt',
+      },
+    },
+  },
+};