feat: ship codegen-generated specs (#566)

atlj · web-flow · commit a90142f471d3 · 2024-08-16T14:02:00.000Z
## 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.
diff --git a/packages/create-react-native-library/src/index.ts b/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.
diff --git a/packages/create-react-native-library/src/utils/addCodegenBuildScript.ts b/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'));
+}
diff --git a/packages/create-react-native-library/templates/common/$.gitignore b/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
diff --git a/packages/create-react-native-library/templates/common/$package.json b/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
 <% } -%>
   }
 }
diff --git a/packages/create-react-native-library/templates/native-common/android/build.gradle b/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"]
diff --git a/packages/create-react-native-library/templates/native-common/{%- project.identifier %}.podspec b/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}"
 <% } -%>
diff --git a/packages/create-react-native-library/templates/native-library-mixed/react-native.config.js b/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',
+      },
+    },
+  },
+};
diff --git a/packages/create-react-native-library/templates/native-library-new/react-native.config.js b/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',
+      },
+    },
+  },
+};
diff --git a/packages/create-react-native-library/templates/native-view-mixed/react-native.config.js b/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',
+      },
+    },
+  },
+};
diff --git a/packages/create-react-native-library/templates/native-view-new/react-native.config.js b/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',
+      },
+    },
+  },
+};
diff --git a/packages/react-native-builder-bob/package.json b/packages/react-native-builder-bob/package.json
@@ -79,10 +79,12 @@
     "@types/fs-extra": "^9.0.13",
     "@types/glob": "^7.2.0",
     "@types/json5": "^2.2.0",
+    "@types/mock-fs": "^4.13.4",
     "@types/prompts": "^2.0.14",
     "@types/which": "^2.0.1",
     "@types/yargs": "^17.0.10",
     "concurrently": "^7.2.2",
-    "jest": "^29.7.0"
+    "jest": "^29.7.0",
+    "mock-fs": "^5.2.0"
   }
 }
diff --git a/packages/react-native-builder-bob/src/__tests__/patchCodegen.test.ts b/packages/react-native-builder-bob/src/__tests__/patchCodegen.test.ts
@@ -0,0 +1,94 @@
+import { expect, it, describe, beforeEach, afterEach } from '@jest/globals';
+import fs from 'fs-extra';
+import path from 'node:path';
+import { patchCodegen } from '../utils/patchCodegen';
+import mockfs from 'mock-fs';
+import type { Report } from '../types';
+
+const mockPackageJson = {
+  codegenConfig: {
+    outputDir: {
+      android: 'android/generated',
+    },
+    android: {
+      javaPackageName: 'com.bobtest',
+    },
+  },
+};
+
+const mockReport: Report = {
+  info: console.log,
+  warn: console.log,
+  error: console.log,
+  success: console.log,
+};
+
+const mockJavaSpec = `
+/**
+ * Some comment
+ */
+
+package com.bobtest;
+
+import com.example.exampleimport;
+
+class SomeClass {
+  public void someMethod() {
+    // some code
+  }
+}`;
+
+const mockProjectPath = path.resolve(__dirname, 'mockProject');
+const mockCodegenSpecsPath = path.resolve(
+  mockProjectPath,
+  'android/generated/java/com/facebook/fbreact/specs'
+);
+
+describe('patchCodegen', () => {
+  beforeEach(() => {
+    mockfs({
+      [mockProjectPath]: {
+        'package.json': JSON.stringify(mockPackageJson),
+      },
+      [mockCodegenSpecsPath]: {
+        'NativeBobtestSpec.java': mockJavaSpec,
+      },
+    });
+  });
+
+  afterEach(() => {
+    mockfs.restore();
+  });
+
+  it('moves the files to correct dir', async () => {
+    await patchCodegen(mockProjectPath, mockPackageJson, mockReport);
+
+    const expectedDir = path.resolve(
+      mockProjectPath,
+      'android/generated/java/com/bobtest'
+    );
+
+    expect(await fs.pathExists(expectedDir)).toBe(true);
+  });
+
+  it('replaces the package name in the files', async () => {
+    await patchCodegen(mockProjectPath, mockPackageJson, mockReport);
+
+    const expectedDir = path.resolve(
+      mockProjectPath,
+      'android/generated/java/com/bobtest'
+    );
+
+    const expectedFile = path.resolve(expectedDir, 'NativeBobtestSpec.java');
+
+    const fileContent = await fs.readFile(expectedFile, 'utf8');
+
+    expect(fileContent).toContain('package com.bobtest;');
+  });
+
+  it('removes the old package dir', async () => {
+    await patchCodegen(mockProjectPath, mockPackageJson, mockReport);
+
+    expect(await fs.pathExists(mockCodegenSpecsPath)).toBe(false);
+  });
+});
diff --git a/packages/react-native-builder-bob/src/index.ts b/packages/react-native-builder-bob/src/index.ts
diff --git a/packages/react-native-builder-bob/src/targets/codegen.ts b/packages/react-native-builder-bob/src/targets/codegen.ts
diff --git a/packages/react-native-builder-bob/src/types.ts b/packages/react-native-builder-bob/src/types.ts
diff --git a/packages/react-native-builder-bob/src/utils/patchCodegen.ts b/packages/react-native-builder-bob/src/utils/patchCodegen.ts
diff --git a/packages/react-native-builder-bob/src/utils/spawn.ts b/packages/react-native-builder-bob/src/utils/spawn.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -114,8 +114,8 @@ android {`
`114`	`114`	`main {`
`115`	`115`	`if (isNewArchitectureEnabled()) {`
`116`	`116`	`java.srcDirs += [`
`117`		`- // This is needed to build Kotlin project with NewArch enabled`
`118`		`- "${project.buildDir}/generated/source/codegen/java"`
	`117`	`+ "generated/java",`
	`118`	`+ "generated/jni"`
`119`	`119`	`]`
`120`	`120`	`}`
`121`	`121`	`}`
`@@ -127,8 +127,9 @@ android {`
`127`	`127`	`if (isNewArchitectureEnabled()) {`
`128`	`128`	`java.srcDirs += [`
`129`	`129`	`"src/newarch",`
`130`		`- // This is needed to build Kotlin project with NewArch enabled`
`131`		`- "${project.buildDir}/generated/source/codegen/java"`
	`130`	`+ // Codegen specs`
	`131`	`+ "generated/java",`
	`132`	`+ "generated/jni"`
`132`	`133`	`]`
`133`	`134`	`} else {`
`134`	`135`	`java.srcDirs += ["src/oldarch"]`