From 70550cf017115b80248e89c5485eacd8fb8de3e5 Mon Sep 17 00:00:00 2001 From: Vojtech Novak Date: Wed, 7 May 2025 09:09:53 +0200 Subject: [PATCH 1/4] document app.plugin.js in package.json exports --- docs/pages/esm.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/esm.md b/docs/pages/esm.md index 83ee86d37..1a71de308 100644 --- a/docs/pages/esm.md +++ b/docs/pages/esm.md @@ -44,6 +44,7 @@ To make use of the output files, ensure that your `package.json` file contains t "types": "./lib/typescript/src/index.d.ts", "default": "./lib/module/index.js" }, + "./app.plugin.js": "./if-you-provide-expo-config-plugin", "./package.json": "./package.json" }, ``` From ccd86002b381f535a611a39ce615d785174ded51 Mon Sep 17 00:00:00 2001 From: Vojtech Novak Date: Wed, 7 May 2025 14:56:57 +0200 Subject: [PATCH 2/4] Update esm.md --- docs/pages/esm.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/pages/esm.md b/docs/pages/esm.md index 1a71de308..42f48e51f 100644 --- a/docs/pages/esm.md +++ b/docs/pages/esm.md @@ -44,7 +44,6 @@ To make use of the output files, ensure that your `package.json` file contains t "types": "./lib/typescript/src/index.d.ts", "default": "./lib/module/index.js" }, - "./app.plugin.js": "./if-you-provide-expo-config-plugin", "./package.json": "./package.json" }, ``` @@ -61,7 +60,7 @@ Here, we specify 3 conditions: You can also specify additional conditions for different scenarios, such as `react-native`, `browser`, `production`, `development` etc. Note that support for these conditions depends on the tooling you're using. -The `./package.json` field is used to point to the library's `package.json` file. It's necessary for tools that may need to read the `package.json` file directly (e.g. [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)). +The `./package.json` field is used to point to the library's `package.json` file. It's necessary for tools that may need to read the `package.json` file directly (e.g. [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)). Make sure to also add any other files that other tools may read, for example `./app.plugin.js` if you provide a [Expo Config plugin](https://docs.expo.dev/config-plugins/plugins-and-mods/#apppluginjs). Using the `exports` field has a few benefits, such as: From f6accd34a5223b2a7aedf5fcd917d9089d896877 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sun, 11 May 2025 18:50:59 +0200 Subject: [PATCH 3/4] docs: add example code for expo config plugin --- docs/pages/esm.md | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/docs/pages/esm.md b/docs/pages/esm.md index 42f48e51f..d51e7f8ab 100644 --- a/docs/pages/esm.md +++ b/docs/pages/esm.md @@ -24,11 +24,7 @@ For TypeScript, it also generates 2 sets of type definitions if the [`commonjs`] It's recommended to specify `"moduleResolution": "bundler"` in your `tsconfig.json` file to match Metro's behavior: ```json -{ - "compilerOptions": { - "moduleResolution": "bundler" - } -} +{ "compilerOptions": { "moduleResolution": "bundler" } } ``` Specifying `"moduleResolution": "bundler"` means that you don't need to use file extensions in the import statements. Bob automatically adds them when possible during the build process. @@ -60,12 +56,26 @@ Here, we specify 3 conditions: You can also specify additional conditions for different scenarios, such as `react-native`, `browser`, `production`, `development` etc. Note that support for these conditions depends on the tooling you're using. -The `./package.json` field is used to point to the library's `package.json` file. It's necessary for tools that may need to read the `package.json` file directly (e.g. [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)). Make sure to also add any other files that other tools may read, for example `./app.plugin.js` if you provide a [Expo Config plugin](https://docs.expo.dev/config-plugins/plugins-and-mods/#apppluginjs). +The `./package.json` field is used to point to the library's `package.json` file. It's necessary for tools that may need to read the `package.json` file directly (e.g. [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)). Using the `exports` field has a few benefits, such as: -- It [restricts access to the library's internals](https://nodejs.org/api/packages.html#main-entry-point-export) by default. You can explicitly specify which files are accessible with [subpath exports](https://nodejs.org/api/packages.html#subpath-exports). - It allows you to specify different entry points for different environments with [conditional exports](https://nodejs.org/api/packages.html#conditional-exports) (e.g. `node`, `browser`, `module`, `react-native`, `production`, `development` etc.). +- It [restricts access to the library's internals](https://nodejs.org/api/packages.html#main-entry-point-export) by default. You can explicitly specify which files are accessible with [subpath exports](https://nodejs.org/api/packages.html#subpath-exports). + + So make sure to explicitly specify any files that need to be readable by other tools, e.g. `./app.plugin.js` if you provide a [Expo Config plugin](https://docs.expo.dev/config-plugins/plugins-and-mods/#apppluginjs): + + ```diff + "exports": { + ".": { + "source": "./src/index.tsx", + "types": "./lib/typescript/src/index.d.ts", + "default": "./lib/module/index.js" + }, + "./package.json": "./package.json", + + "./app.plugin.js": "./app.plugin.js" + }, + ``` ### A note on `import.meta` From d0c8c843c3fccc82d39e6dbe2011d5109863a7fe Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sun, 11 May 2025 18:52:05 +0200 Subject: [PATCH 4/4] chore: fix prettier --- docs/pages/esm.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/pages/esm.md b/docs/pages/esm.md index d51e7f8ab..87a59206f 100644 --- a/docs/pages/esm.md +++ b/docs/pages/esm.md @@ -24,7 +24,11 @@ For TypeScript, it also generates 2 sets of type definitions if the [`commonjs`] It's recommended to specify `"moduleResolution": "bundler"` in your `tsconfig.json` file to match Metro's behavior: ```json -{ "compilerOptions": { "moduleResolution": "bundler" } } +{ + "compilerOptions": { + "moduleResolution": "bundler" + } +} ``` Specifying `"moduleResolution": "bundler"` means that you don't need to use file extensions in the import statements. Bob automatically adds them when possible during the build process.