feat: pass options to babel-preset using callers

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.
callstack · Nov 26, 2024 · 2e2de12 · 2e2de12
1 parent cac236d
commit 2e2de12
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')],
             }),
       });