feat: add ESM support for generated project

Author: satya164

docs/pages/build.md

@@ -73,11 +73,17 @@ yarn add --dev react-native-builder-bob
 1. Configure the appropriate entry points:
 
    ```json
-   "main": "lib/commonjs/index.js",
-   "module": "lib/module/index.js",
-   "react-native": "src/index.ts",
-   "types": "lib/typescript/src/index.d.ts",
-   "source": "src/index.ts",
+   "source": "./src/index.ts",
+   "main": "./lib/commonjs/index.cjs",
+   "module": "./lib/module/index.mjs",
+   "types": "./lib/typescript/src/index.d.ts",
+   "exports": {
+     ".": {
+       "types": "./typescript/src/index.d.ts",
+       "require": "./commonjs/index.cjs",
+       "import": "./module/index.mjs"
+     }
+   },
    "files": [
      "lib",
      "src"
@@ -88,7 +94,6 @@ yarn add --dev react-native-builder-bob
 
    - `main`: The entry point for the commonjs build. This is used by Node - such as tests, SSR etc.
    - `module`: The entry point for the ES module build. This is used by bundlers such as webpack.
-   - `react-native`: The entry point for the React Native apps. This is used by Metro. It's common to point to the source code here as it can make debugging easier.
    - `types`: The entry point for the TypeScript definitions. This is used by TypeScript to type check the code using your library.
    - `source`: The path to the source code. It is used by `react-native-builder-bob` to detect the correct output files and provide better error messages.
    - `files`: The files to include in the package when publishing with `npm`.
@@ -150,7 +155,7 @@ Various targets to build for. The available targets are:
 
 Enable compiling source files with Babel and use commonjs module system.
 
-This is useful for running the code in Node (SSR, tests etc.). The output file should be referenced in the `main` field of `package.json`.
+This is useful for running the code in Node (SSR, tests etc.). The output file should be referenced in the `main` field and `exports['.'].require` field of `package.json`.
 
 By default, the code is compiled to support last 2 versions of modern browsers. It also strips TypeScript and Flow annotations, and compiles JSX. You can customize the environments to compile for by using a [browserslist config](https://github.com/browserslist/browserslist#config-file).
 
@@ -174,7 +179,7 @@ Example:
 
 Enable compiling source files with Babel and use ES module system. This is essentially same as the `commonjs` target and accepts the same options, but leaves the `import`/`export` statements in your code.
 
-This is useful for bundlers which understand ES modules and can tree-shake. The output file should be referenced in the `module` field of `package.json`.
+This is useful for bundlers which understand ES modules and can tree-shake. The output file should be referenced in the `module` field and `exports['.'].import` field of `package.json`.
 
 Example:
 
@@ -198,6 +203,8 @@ Example:
 ["typescript", { "project": "tsconfig.build.json" }]
 ```
 
+The output file should be referenced in the `types` field or `exports['.'].types` field of `package.json`.
+
 ## Commands
 
 The `bob` CLI exposes the following commands:

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

@@ -11,7 +11,7 @@ import prompts, { type PromptObject } from './utils/prompts';
 import generateExampleApp from './utils/generateExampleApp';
 import { spawn } from './utils/spawn';
 
-const FALLBACK_BOB_VERSION = '0.20.0';
+const FALLBACK_BOB_VERSION = '0.24.0';
 
 const BINARIES = [
   /(gradlew|\.(jar|keystore|png|jpg|gif))$/,

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

@@ -2,11 +2,17 @@
   "name": "<%- project.slug -%>",
   "version": "0.1.0",
   "description": "<%- project.description %>",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
-  "types": "lib/typescript/src/index.d.ts",
-  "react-native": "src/index",
-  "source": "src/index",
+  "source": "./src/index.ts",
+  "main": "./lib/commonjs/index.cjs",
+  "module": "./lib/module/index.mjs",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "import": "./lib/module/index.mjs",
+      "require": "./lib/commonjs/index.cjs"
+    }
+  },
   "files": [
     "src",
     "lib",

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

@@ -9,9 +9,9 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["esnext"],
-    "module": "esnext",
-    "moduleResolution": "node",
+    "lib": ["ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "noFallthroughCasesInSwitch": true,
     "noImplicitReturns": true,
     "noImplicitUseStrict": false,
@@ -22,7 +22,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext",
+    "target": "ESNext",
     "verbatimModuleSyntax": true
   }
 }

packages/react-native-builder-bob/babel-preset.js

@@ -3,6 +3,8 @@
 const browserslist = require('browserslist');
 
 module.exports = function (api, options, cwd) {
+  const cjs = options.modules === 'commonjs';
+
   return {
     presets: [
       [
@@ -24,12 +26,20 @@ module.exports = function (api, options, cwd) {
             node: '18',
           },
           useBuiltIns: false,
-          modules: options.modules || false,
+          modules: cjs ? 'commonjs' : false,
         },
       ],
       require.resolve('@babel/preset-react'),
       require.resolve('@babel/preset-typescript'),
       require.resolve('@babel/preset-flow'),
     ],
+    plugins: [
+      [
+        require.resolve('./lib/babel'),
+        {
+          extension: cjs ? 'cjs' : 'mjs',
+        },
+      ],
+    ],
   };
 };

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

@@ -147,20 +147,28 @@ yargs
         ? targets[0]
         : undefined;
 
-    const entries: { [key: string]: string } = {
-      'main': target
-        ? path.join(output, target, 'index.js')
-        : path.join(source, entryFile),
-      'react-native': path.join(source, entryFile),
-      'source': path.join(source, entryFile),
+    const entries: {
+      [key in 'source' | 'main' | 'module' | 'types']?: string;
+    } = {
+      source: `./${path.join(source, entryFile)}`,
+      main: `./${
+        target
+          ? path.join(output, target, 'index.cjs')
+          : path.join(source, entryFile)
+      }`,
     };
 
     if (targets.includes('module')) {
-      entries.module = path.join(output, 'module', 'index.js');
+      entries.module = `./${path.join(output, 'module', 'index.mjs')}`;
     }
 
     if (targets.includes('typescript')) {
-      entries.types = path.join(output, 'typescript', source, 'index.d.ts');
+      entries.types = `./${path.join(
+        output,
+        'typescript',
+        source,
+        'index.d.ts'
+      )}`;
 
       if (!(await fs.pathExists(path.join(root, 'tsconfig.json')))) {
         const { tsconfig } = await prompts({
@@ -181,9 +189,9 @@ yargs
                 esModuleInterop: true,
                 forceConsistentCasingInFileNames: true,
                 jsx: 'react',
-                lib: ['esnext'],
-                module: 'esnext',
-                moduleResolution: 'node',
+                lib: ['ESNext'],
+                module: 'ESNext',
+                moduleResolution: 'Bundler',
                 noFallthroughCasesInSwitch: true,
                 noImplicitReturns: true,
                 noImplicitUseStrict: false,
@@ -194,7 +202,7 @@ yargs
                 resolveJsonModule: true,
                 skipLibCheck: true,
                 strict: true,
-                target: 'esnext',
+                target: 'ESNext',
                 verbatimModuleSyntax: true,
               },
             },
@@ -214,7 +222,7 @@ yargs
     ];
 
     for (const key in entries) {
-      const entry = entries[key];
+      const entry = entries[key as keyof typeof entries];
 
       if (pkg[key] && pkg[key] !== entry) {
         const { replace } = await prompts({
@@ -232,6 +240,41 @@ yargs
       }
     }
 
+    if (Object.values(entries).some((entry) => entry.endsWith('.mjs'))) {
+      let replace = false;
+
+      if (pkg.exports) {
+        replace = (
+          await prompts({
+            type: 'confirm',
+            name: 'replace',
+            message: `Your package.json has 'exports' field set. Do you want to replace it?`,
+            initial: true,
+          })
+        ).replace;
+      } else {
+        replace = true;
+      }
+
+      if (replace) {
+        pkg.exports = {
+          '.': {},
+        };
+
+        if (entries.types) {
+          pkg.exports['.'].types = entries.types;
+        }
+
+        if (entries.module) {
+          pkg.exports['.'].import = entries.module;
+        }
+
+        if (entries.main) {
+          pkg.exports['.'].require = entries.main;
+        }
+      }
+    }
+
     if (pkg.scripts?.prepare && pkg.scripts.prepare !== prepare) {
       const { replace } = await prompts({
         type: 'confirm',

packages/react-native-builder-bob/src/targets/commonjs.ts

@@ -36,6 +36,5 @@ export default async function build({
     exclude,
     modules: 'commonjs',
     report,
-    field: 'main',
   });
 }

packages/react-native-builder-bob/src/targets/module.ts

@@ -36,6 +36,5 @@ export default async function build({
     exclude,
     modules: false,
     report,
-    field: 'module',
   });
 }

packages/react-native-builder-bob/src/targets/typescript.ts

@@ -217,43 +217,56 @@ export default async function build({
         return null;
       };
 
-      if ('types' in pkg) {
-        const typesPath = path.join(root, pkg.types);
-
-        if (!(await fs.pathExists(typesPath))) {
-          const generatedTypesPath = await getGeneratedTypesPath();
-
-          if (!generatedTypesPath) {
-            report.warn(
-              `Failed to detect the entry point for the generated types. Make sure you have a valid ${kleur.blue(
-                'source'
-              )} field in your ${kleur.blue('package.json')}.`
-            );
-          }
-
-          report.error(
-            `The ${kleur.blue('types')} field in ${kleur.blue(
-              'package.json'
-            )} points to a non-existent file: ${kleur.blue(
-              pkg.types
-            )}.\nVerify the path points to the correct file under ${kleur.blue(
-              path.relative(root, output)
-            )}${
-              generatedTypesPath
-                ? ` (found ${kleur.blue(generatedTypesPath)}).`
-                : '.'
-            }`
-          );
+      const fields = [
+        { name: 'types', value: pkg.types },
+        { name: "exports['.'].types", value: pkg.exports?.['.']?.types },
+      ];
+
+      if (fields.some((field) => field.value)) {
+        await Promise.all(
+          fields.map(async ({ name, value }) => {
+            if (!value) {
+              return;
+            }
 
-          throw new Error("Found incorrect path in 'types' field.");
-        }
+            const typesPath = path.join(root, value);
+
+            if (!(await fs.pathExists(typesPath))) {
+              const generatedTypesPath = await getGeneratedTypesPath();
+
+              if (!generatedTypesPath) {
+                report.warn(
+                  `Failed to detect the entry point for the generated types. Make sure you have a valid ${kleur.blue(
+                    'source'
+                  )} field in your ${kleur.blue('package.json')}.`
+                );
+              }
+
+              report.error(
+                `The ${kleur.blue(name)} field in ${kleur.blue(
+                  'package.json'
+                )} points to a non-existent file: ${kleur.blue(
+                  value
+                )}.\nVerify the path points to the correct file under ${kleur.blue(
+                  path.relative(root, output)
+                )}${
+                  generatedTypesPath
+                    ? ` (found ${kleur.blue(generatedTypesPath)}).`
+                    : '.'
+                }`
+              );
+
+              throw new Error(`Found incorrect path in '${name}' field.`);
+            }
+          })
+        );
       } else {
         const generatedTypesPath = await getGeneratedTypesPath();
 
         report.warn(
-          `No ${kleur.blue('types')} field found in ${kleur.blue(
-            'package.json'
-          )}.\nConsider ${
+          `No ${kleur.blue(
+            fields.map((field) => field.name).join(' or ')
+          )} field found in ${kleur.blue('package.json')}.\nConsider ${
             generatedTypesPath
               ? `pointing it to ${kleur.blue(generatedTypesPath)}`
               : 'adding it'