Skip to content

Commit aa400f6

Browse files
authored
feat: disable RNTA temporarily (#658)
<!-- Please provide enough information so that others can review your pull request. --> <!-- Keep pull requests small and focused on a single change. --> ### 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.
1 parent 389c023 commit aa400f6

File tree

3 files changed

+60
-20
lines changed

3 files changed

+60
-20
lines changed

docs/pages/build.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ Supported targets are:
88
- ES modules build for bundlers such as [webpack](https://webpack.js.org)
99
- [TypeScript](https://www.typescriptlang.org/) definitions
1010
- Flow definitions (copies .js files to .flow files)
11+
- [Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen) generated scaffold code
1112

1213
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.
1314

@@ -23,6 +24,8 @@ npx react-native-builder-bob@latest init
2324

2425
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.
2526

27+
> 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`.
28+
2629
You can find details on what exactly it adds in the [Manual configuration](#manual-configuration) section.
2730

2831
## Manual configuration
@@ -42,6 +45,7 @@ yarn add --dev react-native-builder-bob
4245
"source": "src",
4346
"output": "lib",
4447
"targets": [
48+
"codegen",
4549
["commonjs", { "esm": true }],
4650
["module", { "esm": true }],
4751
["typescript", { "esm": true }]
@@ -125,6 +129,27 @@ yarn add --dev react-native-builder-bob
125129

126130
This makes sure that Jest doesn't try to run the tests in the generated files.
127131

132+
1. Configure [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)
133+
134+
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.
135+
136+
You can follow the [Official Codegen Setup Guide](https://reactnative.dev/docs/the-new-architecture/using-codegen) to enable Codegen.
137+
138+
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).
139+
140+
> 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.
141+
142+
##### Opting out of Codegen shipping __(not recommended)__
143+
144+
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).
145+
146+
```json
147+
"exports": {
148+
// ...
149+
"./package.json": "./package.json"
150+
},
151+
```
152+
128153
And we're done 🎉
129154

130155
## Options
@@ -157,6 +182,12 @@ Example:
157182

158183
Various targets to build for. The available targets are:
159184

185+
#### `codegen`
186+
187+
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.
188+
189+
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).
190+
160191
#### `commonjs`
161192

162193
Enable compiling source files with Babel and use CommonJS module system.

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

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -144,23 +144,27 @@ const LANGUAGE_CHOICES: {
144144
},
145145
];
146146

147-
const EXAMPLE_CHOICES = [
148-
{
149-
title: 'Vanilla',
150-
value: 'vanilla',
151-
description: "provides access to app's native code",
152-
},
153-
{
154-
title: 'Test app',
155-
value: 'test-app',
156-
description: "app's native code is abstracted away",
157-
},
158-
{
159-
title: 'Expo',
160-
value: 'expo',
161-
description: 'managed expo project with web support',
162-
},
163-
] as const;
147+
const EXAMPLE_CHOICES = (
148+
[
149+
{
150+
title: 'Vanilla',
151+
value: 'vanilla',
152+
description: "provides access to app's native code",
153+
},
154+
// The test app is disabled for now until proper
155+
// Codegen spec shipping is implemented
156+
process.env.CRNL_ENABLE_TEST_APP && {
157+
title: 'Test app',
158+
value: 'test-app',
159+
description: "app's native code is abstracted away",
160+
},
161+
{
162+
title: 'Expo',
163+
value: 'expo',
164+
description: 'managed expo project with web support',
165+
},
166+
] as const
167+
).filter(Boolean);
164168

165169
const NEWARCH_DESCRIPTION = 'requires new arch (experimental)';
166170
const BACKCOMPAT_DESCRIPTION = 'supports new arch (experimental)';

packages/react-native-builder-bob/src/index.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ yargs
282282
if (esm) {
283283
let replace = false;
284284

285-
const exports = {
285+
const exportsField = {
286286
'.': {
287287
import: {
288288
...(types.import ? { types: types.import } : null),
@@ -295,9 +295,14 @@ yargs
295295
},
296296
};
297297

298+
if (pkg.codegenConfig && !pkg.codegenConfig.includesGeneratedCode) {
299+
// @ts-expect-error The exports is not strictly types therefore it doesn't know about the package.json property
300+
exportsField['./package.json'] = './package.json';
301+
}
302+
298303
if (
299304
pkg.exports &&
300-
JSON.stringify(pkg.exports) !== JSON.stringify(exports)
305+
JSON.stringify(pkg.exports) !== JSON.stringify(exportsField)
301306
) {
302307
replace = (
303308
await prompts({
@@ -312,7 +317,7 @@ yargs
312317
}
313318

314319
if (replace) {
315-
pkg.exports = exports;
320+
pkg.exports = exportsField;
316321
}
317322
}
318323

0 commit comments

Comments
 (0)