Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: disable RNTA temporarily #658

Merged
merged 9 commits into from
Nov 8, 2024
31 changes: 31 additions & 0 deletions docs/pages/build.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
Expand All @@ -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 }]
Expand Down Expand Up @@ -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)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move this to bottom


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.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mention when you need to configure 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
Expand Down Expand Up @@ -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.
Expand Down
38 changes: 21 additions & 17 deletions packages/create-react-native-library/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,23 +144,27 @@
},
];

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)';
Expand Down Expand Up @@ -251,7 +255,7 @@
'example': {
description: 'Type of the example app to create',
type: 'string',
choices: EXAMPLE_CHOICES.map(({ value }) => value),

Check failure on line 258 in packages/create-react-native-library/src/index.ts

View workflow job for this annotation

GitHub Actions / check-project

Property 'value' does not exist on type '"" | { readonly title: "Vanilla"; readonly value: "vanilla"; readonly description: "provides access to app's native code"; } | { title: string; value: string; description: string; } | { ...; } | undefined'.
},
};

Expand Down Expand Up @@ -455,12 +459,12 @@
type: 'select',
name: 'example',
message: 'What type of example app do you want to create?',
choices: (_, values) => {

Check failure on line 462 in packages/create-react-native-library/src/index.ts

View workflow job for this annotation

GitHub Actions / check-project

Type '(_: any, values: Answers<keyof Answers>) => ("" | { readonly title: "Vanilla"; readonly value: "vanilla"; readonly description: "provides access to app's native code"; } | { ...; } | { ...; } | undefined)[]' is not assignable to type 'Choice[] | PrevCaller<keyof Answers, Falsy | Choice[]> | undefined'.
return EXAMPLE_CHOICES.filter((choice) => {
if (values.type) {
return values.type === 'library'
? choice.value === 'expo'

Check failure on line 466 in packages/create-react-native-library/src/index.ts

View workflow job for this annotation

GitHub Actions / check-project

'choice' is possibly 'undefined'.

Check failure on line 466 in packages/create-react-native-library/src/index.ts

View workflow job for this annotation

GitHub Actions / check-project

Property 'value' does not exist on type '"" | { readonly title: "Vanilla"; readonly value: "vanilla"; readonly description: "provides access to app's native code"; } | { title: string; value: string; description: string; } | { ...; }'. Did you mean 'valueOf'?
: choice.value !== 'expo';

Check failure on line 467 in packages/create-react-native-library/src/index.ts

View workflow job for this annotation

GitHub Actions / check-project

'choice' is possibly 'undefined'.

Check failure on line 467 in packages/create-react-native-library/src/index.ts

View workflow job for this annotation

GitHub Actions / check-project

Property 'value' does not exist on type '"" | { readonly title: "Vanilla"; readonly value: "vanilla"; readonly description: "provides access to app's native code"; } | { title: string; value: string; description: string; } | { ...; }'. Did you mean 'valueOf'?
}

return true;
Expand Down
11 changes: 8 additions & 3 deletions packages/react-native-builder-bob/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ yargs
if (esm) {
let replace = false;

const exports = {
const exportsField = {
'.': {
import: {
...(types.import ? { types: types.import } : null),
Expand All @@ -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';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This field should always be present, imo. There are tools, like linters, that reads package.json for various reasons.

}

if (
pkg.exports &&
JSON.stringify(pkg.exports) !== JSON.stringify(exports)
JSON.stringify(pkg.exports) !== JSON.stringify(exportsField)
) {
replace = (
await prompts({
Expand All @@ -312,7 +317,7 @@ yargs
}

if (replace) {
pkg.exports = exports;
pkg.exports = exportsField;
}
}

Expand Down
Loading