feat: pass options to babel-preset using callers (#704)

This removes options parameter from the babel preset and passed them
using callers. With this change, Bob can automatically pass relevant
parameters to the preset when building without the user to do anything
additional if the chose to override the config.

**BREAKING CHANGE**

After this change, consumers can't provide options to the preset
directly.

Author: satya164

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

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    ['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }],
-  ],
+  presets: ['module:react-native-builder-bob/babel-preset'],
 };

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

@@ -4,12 +4,14 @@ 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
- * @param {'automatic' | 'classic'} options.jsxRuntime - Which JSX runtime to use, defaults to 'automatic'
  */
 module.exports = function (api, options, cwd) {
-  const cjs = options.modules === 'commonjs';
+  const opt = (name) =>
+    api.caller((caller) => (caller != null ? caller[name] : undefined));
+
+  const supportsStaticESM = opt('supportsStaticESM');
+  const rewriteImportExtensions = opt('rewriteImportExtensions');
+  const jsxRuntime = opt('jsxRuntime');
 
   return {
     presets: [
@@ -32,14 +34,13 @@ module.exports = function (api, options, cwd) {
             node: '18',
           },
           useBuiltIns: false,
-          modules: cjs ? 'commonjs' : false,
+          modules: supportsStaticESM ? false : 'commonjs',
         },
       ],
       [
         require.resolve('@babel/preset-react'),
         {
-          runtime:
-            options.jsxRuntime !== undefined ? options.jsxRuntime : 'automatic',
+          runtime: jsxRuntime !== undefined ? jsxRuntime : 'automatic',
         },
       ],
       require.resolve('@babel/preset-typescript'),
@@ -50,7 +51,7 @@ module.exports = function (api, options, cwd) {
       [
         require.resolve('./lib/babel'),
         {
-          extension: options.esm ? 'js' : undefined,
+          extension: rewriteImportExtensions ? 'js' : undefined,
         },
       ],
     ],

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

@@ -21,3 +21,10 @@ export type Options = {
   targets?: (Target | [target: Target, options: object])[];
   exclude?: string;
 };
+
+declare module '@babel/core' {
+  export interface TransformCaller {
+    rewriteImportExtensions: boolean;
+    jsxRuntime: 'automatic' | 'classic';
+  }
+}

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

@@ -97,6 +97,16 @@ export default async function compile({
 
       const content = await fs.readFile(filepath, 'utf-8');
       const result = await babel.transformAsync(content, {
+        caller: {
+          name: 'react-native-builder-bob',
+          supportsStaticESM:
+            /\.m[jt]s$/.test(filepath) || // If a file is explicitly marked as ESM, then preserve the syntax
+            modules === 'preserve'
+              ? true
+              : false,
+          rewriteImportExtensions: esm,
+          jsxRuntime,
+        },
         cwd: root,
         babelrc: babelrc,
         configFile: configFile,
@@ -107,18 +117,7 @@ export default async function compile({
         ...(babelrc || configFile
           ? null
           : {
-              presets: [
-                [
-                  require.resolve('../../babel-preset'),
-                  {
-                    modules:
-                      // If a file is explicitly marked as ESM, then preserve the syntax
-                      /\.m[jt]s$/.test(filepath) ? 'preserve' : modules,
-                    esm,
-                    jsxRuntime,
-                  },
-                ],
-              ],
+              presets: [require.resolve('../../babel-preset')],
             }),
       });