feat: disable RNTA temporarily (#658)

atlj · web-flow · commit aa400f622d69 · 2024-11-08T21:03:48.000+03:00
### Summary 1. Disables the RNTA temporarily 2. Mentions you need to add `package.json` to your exports in the docs 3. Automatically adds `package.json` with bob if you don't have `includesGeneratedCode: true`. 4. Closes #637 ### Why the changes? Currently, there are two approaches with React Native Codegen. #### 1. Pregenerate If you have `includesGeneratedCode: true` in your `codegenConfig`, you can generate the Codegen specs in the build time and ship them with your library. This is the recommended way. #### 2. Let the app generate If you don't have `includesGeneratedCode: true`, when the application builds, the React Native Codegen is invoked and goes through all the dependencies of the app and generates the codegen specs. However, if you have ESModule exports and if you haven't added your `package.json` to the exports property, then the Codegen __silently__ skips your library. --- Because Codegen silently fails when you don't have `package.json` in the exports or don't build Codegen specs at the build time, people might have big problems figuring out this on their own. So we're temporarily disabling RNTA until we enable build time spec generation for it. ### Test plan #### CRNL 1. Generate a library using crnl 2. Make sure the RNTA isn't an option there #### Bob 1. Do `bob init` on a library 2. Make sure `package.json` is added to the exports field.
diff --git a/docs/pages/build.md b/docs/pages/build.md
@@ -8,6 +8,7 @@ Supported targets are:
 - ES modules build for bundlers such as [webpack](https://webpack.js.org)
 - [TypeScript](https://www.typescriptlang.org/) definitions
 - Flow definitions (copies .js files to .flow files)
+- [Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen) generated scaffold code
 
 If you created a project with [`create-react-native-library`](./create.md), `react-native-builder-bob` is **already pre-configured to build your project**. You don't need to configure it again.
 
@@ -23,6 +24,8 @@ npx react-native-builder-bob@latest init
 
 This will ask you a few questions and add the required configuration and scripts for building the code. The code will be compiled automatically when the package is published.
 
+> Note: the `init` command doesn't add the `codegen` target yet. You can either add it manually or create a new library with `create-react-native-library`.
+
 You can find details on what exactly it adds in the [Manual configuration](#manual-configuration) section.
 
 ## Manual configuration
@@ -42,6 +45,7 @@ yarn add --dev react-native-builder-bob
      "source": "src",
      "output": "lib",
      "targets": [
+       "codegen",
        ["commonjs", { "esm": true }],
        ["module", { "esm": true }],
        ["typescript", { "esm": true }]
@@ -125,6 +129,27 @@ yarn add --dev react-native-builder-bob
 
    This makes sure that Jest doesn't try to run the tests in the generated files.
 
+1. Configure [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)
+
+   If your library is supporting the [New React Native Architecture](https://reactnative.dev/architecture/landing-page), you should also configure Codegen. This is not required for libraries that are only supporting the old architecture.
+
+   You can follow the [Official Codegen Setup Guide](https://reactnative.dev/docs/the-new-architecture/using-codegen) to enable Codegen.
+
+   It's also recommended to ship your Codegen generated scaffold code with your library since it has numerous benefits. To see the benefits and implement this behavior, you can see the [Official Codegen Shipping Guide](https://reactnative.dev/docs/the-new-architecture/codegen-cli#including-generated-code-into-libraries).
+
+   > Note: If you enable Codegen generated code shipping, React Native won't build the scaffold code automatically when you build your test app. You need to rebuild the codegen scaffold code manually each time you make changes to your spec. If you want to automate this process, you can create a new project with `create-react-native-library` and inspect the example app.
+
+   ##### Opting out of Codegen shipping __(not recommended)__
+
+   If you have a reason to not ship Codegen generated scaffold code with your library, you need to remove the [codegen target](#codegen) and add `package.json` to your `exports` field. Otherwise, React Native Codegen will skip spec generation for your library when your library is consumed as an NPM library. You can find the related issue [here](https://github.com/callstack/react-native-builder-bob/issues/637).
+
+   ```json
+   "exports": {
+     // ...
+     "./package.json": "./package.json"
+   },
+   ```
+
 And we're done 🎉
 
 ## Options
@@ -157,6 +182,12 @@ Example:
 
 Various targets to build for. The available targets are:
 
+#### `codegen`
+
+Generates the [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen) scaffold code, which is used with the New React Native Architecture.
+
+You can ensure your Codegen generated scaffold code is stable through different React Native versions by shipping it with your library. You can find more in the [React Native Official Docs](https://reactnative.dev/docs/the-new-architecture/codegen-cli#including-generated-code-into-libraries).
+
 #### `commonjs`
 
 Enable compiling source files with Babel and use CommonJS module system.
diff --git a/packages/create-react-native-library/src/index.ts b/packages/create-react-native-library/src/index.ts
@@ -144,23 +144,27 @@ const LANGUAGE_CHOICES: {
   },
 ];
 
-const EXAMPLE_CHOICES = [
-  {
-    title: 'Vanilla',
-    value: 'vanilla',
-    description: "provides access to app's native code",
-  },
-  {
-    title: 'Test app',
-    value: 'test-app',
-    description: "app's native code is abstracted away",
-  },
-  {
-    title: 'Expo',
-    value: 'expo',
-    description: 'managed expo project with web support',
-  },
-] as const;
+const EXAMPLE_CHOICES = (
+  [
+    {
+      title: 'Vanilla',
+      value: 'vanilla',
+      description: "provides access to app's native code",
+    },
+    // The test app is disabled for now until proper
+    // Codegen spec shipping is implemented
+    process.env.CRNL_ENABLE_TEST_APP && {
+      title: 'Test app',
+      value: 'test-app',
+      description: "app's native code is abstracted away",
+    },
+    {
+      title: 'Expo',
+      value: 'expo',
+      description: 'managed expo project with web support',
+    },
+  ] as const
+).filter(Boolean);
 
 const NEWARCH_DESCRIPTION = 'requires new arch (experimental)';
 const BACKCOMPAT_DESCRIPTION = 'supports new arch (experimental)';
diff --git a/packages/react-native-builder-bob/src/index.ts b/packages/react-native-builder-bob/src/index.ts
@@ -282,7 +282,7 @@ yargs
     if (esm) {
       let replace = false;
 
-      const exports = {
+      const exportsField = {
         '.': {
           import: {
             ...(types.import ? { types: types.import } : null),
@@ -295,9 +295,14 @@ yargs
         },
       };
 
+      if (pkg.codegenConfig && !pkg.codegenConfig.includesGeneratedCode) {
+        // @ts-expect-error The exports is not strictly types therefore it doesn't know about the package.json property
+        exportsField['./package.json'] = './package.json';
+      }
+
       if (
         pkg.exports &&
-        JSON.stringify(pkg.exports) !== JSON.stringify(exports)
+        JSON.stringify(pkg.exports) !== JSON.stringify(exportsField)
       ) {
         replace = (
           await prompts({
@@ -312,7 +317,7 @@ yargs
       }
 
       if (replace) {
-        pkg.exports = exports;
+        pkg.exports = exportsField;
       }
     }
 
