diff --git a/packages/create-react-native-library/templates/common/babel.config.js b/packages/create-react-native-library/templates/common/babel.config.js index 29f3a6069..5d51f258a 100644 --- 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 index 44820fabc..4a239d946 100644 --- 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 index 39848d71e..1a20240be 100644 --- 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 index d7249bdfb..b49ee0dcc 100644 --- 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')], }), });