feat: make the esm option configurable

Author: satya164

docs/pages/build.md

@@ -42,8 +42,8 @@ yarn add --dev react-native-builder-bob
      "source": "src",
      "output": "lib",
      "targets": [
-       "commonjs",
-       "module",
+       ["commonjs", { "esm" : true }],
+       ["module", { "esm" : true }],
        "typescript",
      ]
    }

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

@@ -164,8 +164,17 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "commonjs",
+        {
+          "esm": true,
+        }
+      ],
+      ["module",
+        {
+          "esm": true,
+        }
+      ],
       [
         "typescript",
         {

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

@@ -2,6 +2,11 @@
 
 const browserslist = require('browserslist');
 
+/**
+ * Babel preset for React Native Builder Bob
+ * @param {'commonjs' | 'preserve'} options.modules - Whether to compile modules to CommonJS or preserve them
+ * @param {Boolean} options.esm - Whether to output ES module compatible code, e.g. by adding extension to import/export statements
+ */
 module.exports = function (api, options, cwd) {
   const cjs = options.modules === 'commonjs';
 
@@ -42,7 +47,7 @@ module.exports = function (api, options, cwd) {
       [
         require.resolve('./lib/babel'),
         {
-          extension: cjs ? 'cjs' : 'mjs',
+          extension: options.esm ? (cjs ? 'cjs' : 'mjs') : undefined,
         },
       ],
     ],

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

@@ -151,15 +151,22 @@ yargs
       [key in 'source' | 'main' | 'module' | 'types']?: string;
     } = {
       source: `./${path.join(source, entryFile)}`,
-      main: `./${
-        target
-          ? path.join(output, target, 'index.cjs')
-          : path.join(source, entryFile)
-      }`,
     };
 
+    let esm = false;
+
     if (targets.includes('module')) {
+      esm = true;
+
+      if (targets.includes('commonjs')) {
+        entries.main = `./${path.join(output, 'commonjs', 'index.cjs')}`;
+      }
+
       entries.module = `./${path.join(output, 'module', 'index.mjs')}`;
+    } else if (targets.includes('commonjs')) {
+      entries.main = `./${path.join(output, 'commonjs', 'index.js')}`;
+    } else {
+      entries.main = entries.source;
     }
 
     if (targets.includes('typescript')) {
@@ -240,7 +247,7 @@ yargs
       }
     }
 
-    if (Object.values(entries).some((entry) => entry.endsWith('.mjs'))) {
+    if (esm) {
       let replace = false;
 
       const exports = {
@@ -337,6 +344,10 @@ yargs
           return [t, { copyFlow: true }];
         }
 
+        if (t === 'commonjs' || t === 'module') {
+          return [t, { esm }];
+        }
+
         return t;
       }),
     };

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

@@ -6,6 +6,7 @@ import type { Input } from '../types';
 
 type Options = Input & {
   options?: {
+    esm?: boolean;
     babelrc?: boolean | null;
     configFile?: string | false | null;
     sourceMaps?: boolean;

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

@@ -6,6 +6,7 @@ import type { Input } from '../types';
 
 type Options = Input & {
   options?: {
+    esm?: boolean;
     babelrc?: boolean | null;
     configFile?: string | false | null;
     sourceMaps?: boolean;
@@ -34,7 +35,7 @@ export default async function build({
     source,
     output,
     exclude,
-    modules: false,
+    modules: 'preserve',
     report,
   });
 }

packages/react-native-builder-bob/src/utils/compile.ts

@@ -6,18 +6,20 @@ import glob from 'glob';
 import type { Input } from '../types';
 
 type Options = Input & {
+  esm?: boolean;
   babelrc?: boolean | null;
   configFile?: string | false | null;
   sourceMaps?: boolean;
   copyFlow?: boolean;
-  modules: 'commonjs' | false;
+  modules: 'commonjs' | 'preserve';
   exclude: string;
 };
 
 export default async function compile({
   root,
   source,
   output,
+  esm = false,
   babelrc = false,
   configFile = false,
   exclude,
@@ -63,7 +65,11 @@ export default async function compile({
     }
   }
 
-  const outputExtension = modules === 'commonjs' ? '.cjs' : '.mjs';
+  const outputExtension = esm
+    ? modules === 'commonjs'
+      ? '.cjs'
+      : '.mjs'
+    : '.js';
 
   await Promise.all(
     files.map(async (filepath) => {
@@ -91,7 +97,9 @@ export default async function compile({
         ...(babelrc || configFile
           ? null
           : {
-              presets: [[require.resolve('../../babel-preset'), { modules }]],
+              presets: [
+                [require.resolve('../../babel-preset'), { modules, esm }],
+              ],
             }),
       });
 
@@ -144,14 +152,40 @@ export default async function compile({
 
   const fields =
     modules === 'commonjs'
-      ? [
-          { name: 'main', value: pkg.main },
-          { name: "exports['.'].require", value: pkg.exports?.['.']?.require },
-        ]
-      : [
-          { name: 'module', value: pkg.module },
-          { name: "exports['.'].import", value: pkg.exports?.['.']?.import },
-        ];
+      ? [{ name: 'main', value: pkg.main }]
+      : [{ name: 'module', value: pkg.module }];
+
+  if (esm) {
+    if (modules === 'commonjs') {
+      fields.push({
+        name: "exports['.'].require",
+        value: pkg.exports?.['.']?.require,
+      });
+    } else {
+      fields.push({
+        name: "exports['.'].import",
+        value: pkg.exports?.['.']?.import,
+      });
+    }
+  } else {
+    if (modules === 'commonjs' && pkg.exports?.['.']?.require) {
+      report.warn(
+        `The ${kleur.blue('esm')} option is disabled, but the ${kleur.blue(
+          "exports['.'].require"
+        )} field is set in ${kleur.blue(
+          'package.json'
+        )}. This is likely a mistake.`
+      );
+    } else if (modules === 'preserve' && pkg.exports?.['.']?.import) {
+      report.warn(
+        `The ${kleur.blue('esm')} option is disabled, but the ${kleur.blue(
+          "exports['.'].import"
+        )} field is set in ${kleur.blue(
+          'package.json'
+        )}. This is likely a mistake.`
+      );
+    }
+  }
 
   if (fields.some((field) => field.value)) {
     await Promise.all(