feat: use a unique name for the exports condition for source (#948)

This is a breaking change for libraries that use
`react-native-builder-bob/vite-config`

They now must add the custom condition to their vite config. To preserve
existing behavior, add `conditions: ['source']` under `resolve`:

```diff
  export default defineConfig((env) =>
    mergeConfig(config(env), {
      resolve: {
        alias: {
          [pack.name]: new URL('..', import.meta.url),
        },
+       conditions: ['source'],
        dedupe: Object.keys(pack.peerDependencies),
      },
    })
  );
```

Author: satya164

docs/pages/build.md

@@ -78,7 +78,6 @@ To configure your project manually, follow these steps:
    "types": "./lib/typescript/src/index.d.ts",
    "exports": {
      ".": {
-        "source": "./src/index.tsx",
         "types": "./lib/typescript/src/index.d.ts",
         "default": "./lib/module/index.js"
      },

docs/pages/esm.md

@@ -42,7 +42,7 @@ To make use of the output files, ensure that your `package.json` file contains t
 "types": "./lib/typescript/src/index.d.ts",
 "exports": {
   ".": {
-    "source": "./src/index.tsx",
+    "my-library-source": "./src/index.tsx",
     "types": "./lib/typescript/src/index.d.ts",
     "default": "./lib/module/index.js"
   },
@@ -56,10 +56,57 @@ The `exports` field is used by Node.js 12+, modern browsers and tools to determi
 
 Here, we specify 3 conditions:
 
-- `source`: A custom condition used by `react-native-builder-bob` to determine the source file for the library.
+- `my-library-source`: A custom condition used to resolve the source file for the library in development.
 - `types`: Used for the TypeScript definitions.
 - `default`: Used for the actual JS code when the library is imported or required.
 
+When creating a project, a custom condition name pointing to the source code is automatically set. You can also change it to something else if you want by updating any occurrences in your project.
+
+TypeScript can resolve the source condition by adding it to [`customConditions`](https://www.typescriptlang.org/tsconfig/#customConditions):
+
+```json
+{
+  "compilerOptions": {
+    "customConditions": ["my-library-source"]
+  }
+}
+```
+
+When using [`react-native-monorepo-config`](https://github.com/satya164/react-native-monorepo-config), pass the same condition to Metro so the example app resolves the library source:
+
+```js
+const config = withMetroConfig(getDefaultConfig(__dirname), {
+  root,
+  dirname: __dirname,
+  conditions: ['my-library-source'],
+});
+```
+
+If you use [Jest](https://jestjs.io), add the source condition to [`testEnvironmentOptions.customExportConditions`](https://jestjs.io/docs/configuration#testenvironmentoptions-object). With the React Native Jest preset, keep React Native's default conditions as well:
+
+```json
+{
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "testEnvironmentOptions": {
+      "customExportConditions": ["require", "react-native", "my-library-source"]
+    }
+  }
+}
+```
+
+If you use [Vite](https://vitejs.dev), add the source condition to [`resolve.conditions`](https://vitejs.dev/config/#resolve-conditions):
+
+```ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  resolve: {
+    conditions: ['my-library-source'],
+  },
+});
+```
+
 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)).
@@ -74,7 +121,7 @@ Using the `exports` field has a few benefits, such as:
   ```diff
   "exports": {
     ".": {
-      "source": "./src/index.tsx",
+      "my-library-source": "./src/index.tsx",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
@@ -135,7 +182,6 @@ To configure a dual package setup, you can follow these steps:
    ```
 
    Here, we specify 2 conditions:
-
    - `import`: Used when the library is imported with an `import` statement or a dynamic `import()`. It will point to the ESM build.
    - `require`: Used when the library is required with a `require` call. It will point to the CommonJS build.
 
@@ -292,7 +338,6 @@ There are still a few things to keep in mind if you want your library to be ESM-
   ```
 
   Alternatively, if you want to be able to use the library in Node.js with `import` syntax, there are a few options:
-
   - Use `Platform.select` instead of platform-specific extensions:
 
     ```js

docs/pages/faq.md

@@ -32,7 +32,6 @@ If your library depends on another react-native library containing native code,
 - **Add the native library to `peerDependencies`**
 
   This means that the consumer of the library will need to install the native library and add it to the `dependencies` section of their `package.json`. It makes sure that:
-
   - There are no version conflicts if another package also happens to use the same library, or if the user wants to use the library in their app. While there can be multiple versions of a JavaScript-only library, there can only be one version of a native library - so avoiding version conflicts is important.
   - The package manager installs it in correct location so that autolinking can work properly.
 
@@ -51,7 +50,6 @@ If your library depends on another react-native library containing native code,
 Since this is a library, the `react-native` version specified in the `package.json` is not relevant for the consumers. It's only used for developing and testing the library. If you'd like to upgrade the `react-native` version to test with it, you'd need to:
 
 1. **Bump versions of the following packages under `devDependencies` in the `package.json`:**
-
    - `react-native`
    - `react`
    - `@types/react`
@@ -74,9 +72,8 @@ There are 2 parts to this process.
 1. **Aliasing the JavaScript code**
 
    The JavaScript (or TypeScript) source code is aliased to be used by the example app. This makes it so that when you import from `'your-library-name'`, it imports the source code directly and avoids having to rebuild the library for JavaScript only changes. We configure several tools to make this work:
-
-   - [Metro](https://facebook.github.io/metro/) is configured to allow importing from outside of the `example` directory by configuring `watchFolders`, to use the appropriate peer dependencies, and to import source code of the library in the example. This configuration exists in the `example/metro.config.js` file.
-   - [TypeScript](https://www.typescriptlang.org/) is configured to use the source code for type checking by using the `paths` property under `compilerOptions`. This configuration exists in the `tsconfig.json` file at the root.
+   - [Metro](https://facebook.github.io/metro/) is configured to allow importing from outside of the `example` directory by configuring `watchFolders`, to use the appropriate peer dependencies, and to resolve the library's custom source condition. This configuration exists in the `example/metro.config.js` file.
+   - [TypeScript](https://www.typescriptlang.org/) is configured to use the source code for type checking with the custom source condition and the `paths` property under `compilerOptions`. This configuration exists in the `tsconfig.json` file at the root.
 
 2. **Linking the native code**
 

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

@@ -1,5 +1,5 @@
 export const FALLBACK_BOB_VERSION = '0.41.0';
 export const FALLBACK_NITRO_MODULES_VERSION = '0.35.3';
-export const SUPPORTED_MONOREPO_CONFIG_VERSION = '0.3.3';
+export const SUPPORTED_MONOREPO_CONFIG_VERSION = '0.4.0';
 export const SUPPORTED_REACT_NATIVE_VERSION = '0.85.0';
 export const SUPPORTED_EXPO_SDK_VERSION = '55';

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

@@ -33,6 +33,7 @@ export type TemplateConfiguration = {
     swift: boolean;
     viewConfig: ViewConfig;
     moduleConfig: ModuleConfig;
+    sourceCondition: string;
   };
   author: {
     name: string;
@@ -177,6 +178,8 @@ export function generateTemplateConfiguration({
   }
 
   const project = slug.replace(/^(react-native-|@[^/]+\/)/, '');
+  const sourceCondition = `${slug.replace(/^@/, '').replace(/\//g, '-')}-source`;
+
   let namespace: string | undefined;
 
   if (slug.startsWith('@') && slug.includes('/')) {
@@ -213,6 +216,7 @@ export function generateTemplateConfiguration({
       swift: languages === 'kotlin-swift',
       viewConfig: getViewConfig(type),
       moduleConfig: getModuleConfig(type),
+      sourceCondition,
     },
     author: {
       name: authorName,

packages/create-react-native-library/templates/common/$package.json

@@ -6,7 +6,7 @@
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.tsx",
+      "<%- project.sourceCondition -%>": "./src/index.tsx",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },

packages/create-react-native-library/templates/common/tsconfig.json

@@ -6,7 +6,10 @@
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
-    "customConditions": ["react-native-strict-api"],
+    "customConditions": [
+      "<%- project.sourceCondition -%>",
+      "react-native-strict-api"
+    ],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react-jsx",

packages/create-react-native-library/templates/example-common/example/metro.config.js

@@ -13,6 +13,7 @@ const root = path.resolve(__dirname, '..');
 const config = withMetroConfig(getDefaultConfig(__dirname), {
   root,
   dirname: __dirname,
+  conditions: ['<%- project.sourceCondition -%>'],
 });
 
 module.exports = config;

packages/create-react-native-library/templates/tools/jest/~package.json

@@ -4,6 +4,13 @@
   },
   "jest": {
     "preset": "@react-native/jest-preset",
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "require",
+        "react-native",
+        "<%- project.sourceCondition -%>"
+      ]
+    },
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"

packages/create-react-native-library/templates/tools/vite/example/vite.config.mjs

@@ -9,6 +9,7 @@ export default defineConfig((env) =>
       alias: {
         [pack.name]: new URL('..', import.meta.url),
       },
+      conditions: ['<%- project.sourceCondition -%>'],
       dedupe: Object.keys(pack.peerDependencies),
     },
   })