From 0120e160007f46b11972c0888a514c761a050c43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Fri, 18 Oct 2024 21:50:54 +0300 Subject: [PATCH 1/9] feat: disable test-app --- packages/create-react-native-library/src/index.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/create-react-native-library/src/index.ts b/packages/create-react-native-library/src/index.ts index b9a1ff865..6398eb3c9 100644 --- a/packages/create-react-native-library/src/index.ts +++ b/packages/create-react-native-library/src/index.ts @@ -150,11 +150,13 @@ const EXAMPLE_CHOICES = [ value: 'vanilla', description: "provides access to app's native code", }, - { - title: 'Test app', - value: 'test-app', - description: "app's native code is abstracted away", - }, + // The test app is disabled for now until proper + // Codegen spec shipping is implemented + // { + // title: 'Test app', + // value: 'test-app', + // description: "app's native code is abstracted away", + // }, { title: 'Expo', value: 'expo', From a8fd8162fabb34669aa060d6a93259daf8f25489 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Fri, 18 Oct 2024 22:18:16 +0300 Subject: [PATCH 2/9] docs: mention you need to export package.json --- docs/pages/build.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/pages/build.md b/docs/pages/build.md index a29cbd420..bdb006b7e 100644 --- a/docs/pages/build.md +++ b/docs/pages/build.md @@ -108,6 +108,17 @@ yarn add --dev react-native-builder-bob > If you're building TypeScript definition files, also make sure that the `types` field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. `lib/typescript/index.d.ts` if you have only the `src` directory and `rootDir` is not set). +1. Export package.json if needed: + + If you don't have `"includesGeneratedCode": true` in your `codegenConfig`, and you ship your native library for the new architecture, you also have to add `"./package.json": "./package.json"` into the `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" + }, + ``` + 1. Add the output directory to `.gitignore` and `.eslintignore` ```gitignore From 13091b552b2d7d5f719d7e8e89af41dc2ac4cef7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Fri, 18 Oct 2024 23:02:33 +0300 Subject: [PATCH 3/9] feat: add package.json to exports with bob init if includesGeneratedCode is falsy --- packages/react-native-builder-bob/src/index.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) 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; } } From 8a96b73dd19532dce63d37feeff74f258b230f8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Sat, 26 Oct 2024 15:32:57 +0300 Subject: [PATCH 4/9] docs: mention the codegen target --- docs/pages/build.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/pages/build.md b/docs/pages/build.md index bdb006b7e..82002c41a 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. @@ -168,6 +169,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. From ce596b7c87d47c9965cef2921a773fc6e24e0393 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Sat, 26 Oct 2024 15:46:58 +0300 Subject: [PATCH 5/9] docs: mention its not recommended to not ship codegen scaffold --- docs/pages/build.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/pages/build.md b/docs/pages/build.md index 82002c41a..68cdfb6de 100644 --- a/docs/pages/build.md +++ b/docs/pages/build.md @@ -43,6 +43,7 @@ yarn add --dev react-native-builder-bob "source": "src", "output": "lib", "targets": [ + "codegen", ["commonjs", { "esm": true }], ["module", { "esm": true }], ["typescript", { "esm": true }] @@ -109,9 +110,15 @@ yarn add --dev react-native-builder-bob > If you're building TypeScript definition files, also make sure that the `types` field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. `lib/typescript/index.d.ts` if you have only the `src` directory and `rootDir` is not set). -1. Export package.json if needed: +1. Configure [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen) - If you don't have `"includesGeneratedCode": true` in your `codegenConfig`, and you ship your native library for the new architecture, you also have to add `"./package.json": "./package.json"` into the `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). + 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). + + ##### 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": { From eb4850b79d6c135974d300e29a770d3461af3d24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Sat, 26 Oct 2024 16:34:52 +0300 Subject: [PATCH 6/9] docs: mention we dont handle codegen automatically yet --- docs/pages/build.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/pages/build.md b/docs/pages/build.md index 68cdfb6de..ed5cd6945 100644 --- a/docs/pages/build.md +++ b/docs/pages/build.md @@ -24,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 @@ -116,6 +118,8 @@ yarn add --dev react-native-builder-bob 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). From 634cdc62503b729084f5484e5f32594475096377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Fri, 8 Nov 2024 20:53:04 +0300 Subject: [PATCH 7/9] chore: hide testing app behind an env var --- .../create-react-native-library/src/index.ts | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/create-react-native-library/src/index.ts b/packages/create-react-native-library/src/index.ts index 6398eb3c9..0471c42a8 100644 --- a/packages/create-react-native-library/src/index.ts +++ b/packages/create-react-native-library/src/index.ts @@ -144,25 +144,27 @@ const LANGUAGE_CHOICES: { }, ]; -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 - // { - // 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)'; From 64a7a82e79f5c2186e24903244771f7f990b4337 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Fri, 8 Nov 2024 20:54:34 +0300 Subject: [PATCH 8/9] docs: move opting out codegen to bottom --- docs/pages/build.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/pages/build.md b/docs/pages/build.md index ed5cd6945..68b6c732c 100644 --- a/docs/pages/build.md +++ b/docs/pages/build.md @@ -112,6 +112,23 @@ yarn add --dev react-native-builder-bob > If you're building TypeScript definition files, also make sure that the `types` field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. `lib/typescript/index.d.ts` if you have only the `src` directory and `rootDir` is not set). +1. Add the output directory to `.gitignore` and `.eslintignore` + + ```gitignore + # generated files by bob + lib/ + ``` + + This makes sure that you don't accidentally commit the generated files to git or get lint errors for them. + +1. Add the output directory to `jest.modulePathIgnorePatterns` if you use [Jest](https://jestjs.io) + + ```json + "modulePathIgnorePatterns": ["/lib/"] + ``` + + 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) You can follow the [Official Codegen Setup Guide](https://reactnative.dev/docs/the-new-architecture/using-codegen) to enable Codegen. @@ -131,23 +148,6 @@ yarn add --dev react-native-builder-bob }, ``` -1. Add the output directory to `.gitignore` and `.eslintignore` - - ```gitignore - # generated files by bob - lib/ - ``` - - This makes sure that you don't accidentally commit the generated files to git or get lint errors for them. - -1. Add the output directory to `jest.modulePathIgnorePatterns` if you use [Jest](https://jestjs.io) - - ```json - "modulePathIgnorePatterns": ["/lib/"] - ``` - - This makes sure that Jest doesn't try to run the tests in the generated files. - And we're done 🎉 ## Options From 56d467cfd8fecefc0042b52d089f55be11912b9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Burak=20Gu=CC=88ner?= Date: Fri, 8 Nov 2024 21:00:31 +0300 Subject: [PATCH 9/9] docs: mention when you won't need codegen --- docs/pages/build.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/pages/build.md b/docs/pages/build.md index 68b6c732c..f074b75d8 100644 --- a/docs/pages/build.md +++ b/docs/pages/build.md @@ -131,6 +131,8 @@ yarn add --dev react-native-builder-bob 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).