Pass Metro's own @babel/runtime through @react-native/metro-babel-transformer

packages/react-native-babel-transformer/src/__tests__/babel-runtime-test.js

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+const generate = require('@babel/generator').default;
+const path = require('node:path');
+
+const PROJECT_ROOT = path.sep === '/' ? '/my/project' : 'C:\\my\\project';
+const PROJECT_BABEL_CONFIG = path.join(
+  __dirname,
+  '__fixtures__',
+  'babel.config.js',
+);
+// `import * as` uses the `interopRequireWildcard` helper, which
+// `@babel/plugin-transform-runtime` imports only when told a `@babel/runtime`
+// version of at least 7.14.0, and inlines otherwise.
+const SRC = "import * as foo from './foo';\nexport const bar = foo;";
+
+// The transformer memoizes its resolved Babel config in a module-level
+// closure, so a fresh module instance is required for every distinct config.
+beforeEach(() => {
+  jest.resetModules();
+});
+
+const METRO_BABEL_RUNTIME = {
+  babelRuntimeModuleName: 'metro:babel-runtime',
+  babelRuntimeVersion: '7.29.0',
+};
+
+function transformToCode({
+  babelRuntime,
+  extendsBabelConfigPath,
+}: {
+  babelRuntime: ?Readonly<{
+    babelRuntimeModuleName?: string,
+    babelRuntimeVersion?: string,
+  }>,
+  extendsBabelConfigPath?: string,
+}): string {
+  const {transform} = require('../index.js');
+  const {ast} = transform({
+    filename: path.join(PROJECT_ROOT, 'App.js'),
+    src: SRC,
+    plugins: [],
+    options: {
+      ...babelRuntime,
+      dev: true,
+      enableBabelRuntime: true,
+      enableBabelRCLookup: false,
+      experimentalImportSupport: false,
+      extendsBabelConfigPath,
+      globalPrefix: '__metro__',
+      hot: false,
+      minify: false,
+      platform: 'ios',
+      publicPath: 'test',
+      projectRoot: PROJECT_ROOT,
+    },
+  });
+  return generate(ast).code;
+}
+
+describe.each([
+  ['no project Babel config', undefined],
+  ['a project Babel config naming the preset', PROJECT_BABEL_CONFIG],
+])('with %s', (_name, extendsBabelConfigPath) => {
+  test("imports helpers from Metro's own @babel/runtime when Metro passes it", () => {
+    const code = transformToCode({
+      extendsBabelConfigPath,
+      babelRuntime: METRO_BABEL_RUNTIME,
+    });
+
+    expect(code).toContain(
+      'require("metro:babel-runtime/helpers/interopRequireWildcard")',
+    );
+    expect(code).not.toContain('function _interopRequireWildcard(');
+  });
+
+  test('inlines newer helpers when Metro passes no @babel/runtime', () => {
+    const code = transformToCode({
+      extendsBabelConfigPath,
+      babelRuntime: null,
+    });
+
+    expect(code).not.toContain('metro:babel-runtime');
+    expect(code).toContain('function _interopRequireWildcard(');
+  });
+
+  test('ignores a @babel/runtime version without a module name', () => {
+    const code = transformToCode({
+      babelRuntime: {babelRuntimeVersion: '7.29.0'},
+      extendsBabelConfigPath,
+    });
+
+    expect(code).toContain('function _interopRequireWildcard(');
+  });
+});

packages/react-native-babel-transformer/src/index.js

@@ -102,7 +102,12 @@ const getBabelRC = (function () {
     // $FlowFixMe[incompatible-use] `extends` is missing in null or undefined.
     // $FlowFixMe[incompatible-type] `extends` is missing in null or undefined.
     if (!babelRC.extends) {
-      const {experimentalImportSupport, ...presetOptions} = options;
+      const {
+        babelRuntimeModuleName,
+        babelRuntimeVersion,
+        experimentalImportSupport,
+        ...presetOptions
+      } = options;
 
       // $FlowFixMe[incompatible-use] `presets` is missing in null or undefined.
       babelRC.presets = [
@@ -112,7 +117,14 @@ const getBabelRC = (function () {
             projectRoot,
             ...presetOptions,
             disableImportExportTransform: experimentalImportSupport,
-            enableBabelRuntime: options.enableBabelRuntime,
+            // A version is only safe to target alongside the module it
+            // describes, so Metro's `@babel/runtime` is passed as a pair.
+            ...(babelRuntimeModuleName != null && babelRuntimeVersion != null
+              ? {
+                  babelRuntimeModuleName,
+                  enableBabelRuntime: babelRuntimeVersion,
+                }
+              : {enableBabelRuntime: options.enableBabelRuntime}),
           },
         ],
       ];
@@ -187,6 +199,8 @@ const transform /*: BabelTransformer['transform'] */ = ({
   src,
   plugins,
 }) => {
+  // $FlowFixMe[prop-missing] Remove suppression after next Metro release
+  const {babelRuntimeModuleName, babelRuntimeVersion} = options;
   const babelConfig /*: BabelCoreOptions */ = {
     // ES modules require sourceType='module' but OSS may not always want that
     sourceType: 'unambiguous',
@@ -201,6 +215,11 @@ const transform /*: BabelTransformer['transform'] */ = ({
       inlinePlatform: options.inlinePlatform,
       experimentalImportSupport: options.experimentalImportSupport,
       unstable_transformProfile: options.unstable_transformProfile,
+      // Metro's own `@babel/runtime`, for a preset configured by a project
+      // Babel config. The keys match the preset's own options.
+      ...(babelRuntimeModuleName != null && babelRuntimeVersion != null
+        ? {babelRuntimeModuleName, enableBabelRuntime: babelRuntimeVersion}
+        : null),
     },
     ast: true,