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.
callstack · Dec 4, 2024 · a9f2ede · a9f2ede
1 parent e52ba57
commit a9f2ede
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/packages/create-react-native-library/templates/common/babel.config.js b/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'],
 };
diff --git a/packages/react-native-builder-bob/babel-preset.js b/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,
         },
       ],
     ],

diff --git a/packages/react-native-builder-bob/src/types.ts b/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';
+  }
+}
diff --git a/packages/react-native-builder-bob/src/utils/compile.ts b/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')],
             }),
       });