Allow configuring Babel runtime via caller in @react-native/babel-preset

Summary:
Adds a mechanism for callers to configure `babel/plugin-transform-runtime`
programmatically via Babel caller data, in addition to preset options.

- `enableBabelRuntime` (boolean toggle, or a string to pin a specific
  `babel/runtime` version) can now be read from the Babel caller.
- `babelRuntimeModuleName` (the module helpers are imported from) can be
  provided via preset options or the Babel caller.

Both values are passed as separate primitives (Babel only permits primitive
caller values). Preset options take precedence over caller data, consistent
with how `unstable_transformProfile` is resolved.

Changelog:
[General][Added] - Allow `react-native/babel-preset` to read `enableBabelRuntime` and `babelRuntimeModuleName` from Babel caller data

Reviewed By: vzaidman

Differential Revision: D114070686

Author: robhogan

packages/react-native-babel-preset/src/__tests__/transform-runtime-caller-test.js

@@ -0,0 +1,130 @@
+/**
+ * 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';
+
+// $FlowExpectedError[untyped-import] - Preset is untyped
+const preset = require('../index');
+const babel = require('@babel/core');
+
+const MOCK_FILENAME = '/absolute/path/to/input.js';
+
+function transformWithCaller(
+  code: string,
+  options: {[string]: unknown},
+  caller: {
+    enableBabelRuntime?: boolean | string,
+    babelRuntimeModuleName?: string,
+  },
+): string | null {
+  const result = babel.transformSync(code, {
+    babelrc: false,
+    configFile: false,
+    filename: MOCK_FILENAME,
+    presets: [[preset, options]],
+    caller: {...caller, name: 'test'},
+    sourceMaps: false,
+    compact: false,
+  });
+  return result?.code ?? null;
+}
+
+describe('babel runtime caller options', () => {
+  it('uses caller-provided babelRuntimeModuleName for runtime helpers', () => {
+    const code = 'const {a, ...rest} = obj;';
+    const result = transformWithCaller(
+      code,
+      {dev: false},
+      {babelRuntimeModuleName: '@react-native/babel-runtime'},
+    );
+    expect(result).toContain(
+      '@react-native/babel-runtime/helpers/objectWithoutProperties',
+    );
+    expect(result).not.toContain('@babel/runtime/helpers');
+  });
+
+  it('options babelRuntimeModuleName takes precedence over caller', () => {
+    const code = 'const {a, ...rest} = obj;';
+    const result = transformWithCaller(
+      code,
+      {dev: false, babelRuntimeModuleName: '@from/options'},
+      {babelRuntimeModuleName: '@from/caller'},
+    );
+    expect(result).toContain('@from/options/helpers/objectWithoutProperties');
+    expect(result).not.toContain('@from/caller');
+  });
+
+  it('uses caller-provided enableBabelRuntime version to select the helper interop', () => {
+    // A default import triggers the `interopRequireDefault` helper, whose import
+    // form depends on the runtime version. Modern versions append `.default`.
+    const code = "import foo from './foo';\nfoo();";
+    const result = transformWithCaller(
+      code,
+      {dev: false},
+      {enableBabelRuntime: '7.25.0'},
+    );
+    expect(result).toContain(
+      'require("@babel/runtime/helpers/interopRequireDefault").default',
+    );
+  });
+
+  it('options enableBabelRuntime takes precedence over caller', () => {
+    const code = "import foo from './foo';\nfoo();";
+    const result = transformWithCaller(
+      code,
+      {dev: false, enableBabelRuntime: '7.0.0'},
+      {enableBabelRuntime: '7.25.0'},
+    );
+    // Options version (7.0.0) uses the legacy interop form without `.default`,
+    // overriding the caller version (7.25.0) that would produce `.default`.
+    expect(result).toContain(
+      'require("@babel/runtime/helpers/interopRequireDefault")',
+    );
+    expect(result).not.toContain(
+      'require("@babel/runtime/helpers/interopRequireDefault").default',
+    );
+  });
+
+  it('has no effect when caller options are absent', () => {
+    const code = "import foo from './foo';\nfoo();";
+    const result = transformWithCaller(code, {dev: false}, {});
+    // Default runtime version uses the legacy interop form (no `.default`).
+    expect(result).toContain(
+      'require("@babel/runtime/helpers/interopRequireDefault")',
+    );
+    expect(result).not.toContain(
+      'require("@babel/runtime/helpers/interopRequireDefault").default',
+    );
+  });
+
+  it('does not add the runtime plugin when caller disables enableBabelRuntime', () => {
+    const code = 'const {a, ...rest} = obj;';
+    const result = transformWithCaller(
+      code,
+      {dev: false},
+      {
+        enableBabelRuntime: false,
+        babelRuntimeModuleName: '@react-native/babel-runtime',
+      },
+    );
+    expect(result).not.toContain('@react-native/babel-runtime');
+    expect(result).not.toContain('@babel/runtime/helpers');
+  });
+
+  it('options enableBabelRuntime false takes precedence over caller true', () => {
+    const code = 'const {a, ...rest} = obj;';
+    const result = transformWithCaller(
+      code,
+      {dev: false, enableBabelRuntime: false},
+      {enableBabelRuntime: '7.25.0'},
+    );
+    expect(result).not.toContain('@babel/runtime/helpers');
+  });
+});

packages/react-native-babel-preset/src/configs/main.js

@@ -58,6 +58,21 @@ function getPlatform(caller) {
   return caller?.platform ?? null;
 }
 
+// Reads the caller-provided `enableBabelRuntime` value: a boolean to toggle
+// @babel/plugin-transform-runtime, or a string to pin a specific
+// @babel/runtime version. Allows callers such as Metro to configure the runtime
+// programmatically. As with getTransformProfile, the return value is used by
+// Babel for cache invalidation, so this must be pure and cheap.
+function getEnableBabelRuntime(caller) {
+  return caller?.enableBabelRuntime;
+}
+
+// Reads the caller-provided @babel/runtime module name that helpers are imported
+// from. As above, this must be pure and cheap.
+function getBabelRuntimeModuleName(caller) {
+  return caller?.babelRuntimeModuleName;
+}
+
 // use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
 const loose = true;
 
@@ -223,16 +238,31 @@ const getPreset = (src, options, babel) => {
     ]);
   }
 
-  if (!options || options.enableBabelRuntime !== false) {
-    // Allows configuring a specific runtime version to optimize output
-    const isVersion = typeof options?.enableBabelRuntime === 'string';
+  // `enableBabelRuntime` (a boolean toggle or a string @babel/runtime version to
+  // pin) and `babelRuntimeModuleName` (the module helpers are imported from) may
+  // be provided via options or, for programmatic callers such as Metro, via
+  // Babel caller data. Options take precedence over caller data, consistent with
+  // the other options resolved here.
+  const enableBabelRuntime =
+    options?.enableBabelRuntime ?? babel?.caller(getEnableBabelRuntime) ?? true;
+
+  if (enableBabelRuntime !== false) {
+    // A string value pins a specific runtime version to optimize output.
+    const isVersion = typeof enableBabelRuntime === 'string';
+
+    const babelRuntimeModuleName =
+      options?.babelRuntimeModuleName ??
+      babel?.caller(getBabelRuntimeModuleName);
 
     extraPlugins.push([
       require('@babel/plugin-transform-runtime'),
       {
         helpers: true,
         regenerator: enableRegenerator,
-        ...(isVersion && {version: options.enableBabelRuntime}),
+        ...(isVersion && {version: enableBabelRuntime}),
+        ...(babelRuntimeModuleName != null && {
+          moduleName: babelRuntimeModuleName,
+        }),
       },
     ]);
   } else if (enableRegenerator) {