diff --git a/docs/pages/build.md b/docs/pages/build.md index a29cbd420..f074b75d8 100644 --- 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 index b9a1ff865..0471c42a8 100644 --- 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 index 57d2e8211..ca696bdb7 100644 --- 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; } }