Allow customizing the babel transform runtime version

[newyankeecodeshop]

Summary

As described in PR #714 , when the bundle is built using a recent version of babel, some helpers are defined repeatedly instead of being referenced via the runtime. In our case, _getRequireWildcardCache() and _interopRequireWildcard().

Since the react native preset configures @babel/plugin-transform-runtime when enableBabelRuntime is enabled, I thought it would be straightforward to overload this metro configuration option to allow the runtime version to be specified. Therefore, changing babel.config.js to be:

module.exports = {
  presets: [
    [
      "module:metro-react-native-babel-preset",
      { enableBabelRuntime: "7.14.5" }
    ]
  ]
};

The above would both enable the runtime and configure it to use version 7.14.5 behaviors. An app developer can do yarn why @babel/runtime to determine the runtime version and specify it in this configuration.

Adding this option doesn't change the behavior for existing users who are using true | false | undefined for the babel runtime configuration.

Test plan

All unit tests pass.

I modified our application as specified above while referencing my modified build of metro. The bundle showed a 6% size reduction and _interopRequireWildcard was required via the runtime.

[robhogan]

Can we avoid baking in the plugin's default fallback version?

Suggested change

	version: isVersion ? options.enableBabelRuntime : '7.0.0-beta.0',
	...(isVersion && {version: options.enableBabelRuntime}),

[newyankeecodeshop]

Yes definitely - I like this mechanism for initializing a specific property only under certain circumstances.

[robhogan]

Thanks again @newyankeecodeshop - this looks like a useful optimisation

[facebook-github-bot]

@rh389 has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[leotm]

Just confirming, does this mean we need to update the overload version each time to benefit from latest @babel/runtime e.g.

• Update babel monorepo to v7.17.8 (patch) leotm/react-native-template-new-architecture#452

With the -6% bundle? Just thinking how to automate, might look into a + equivalent or some way to pick it up as a variable if its pos w js easily to pickup from node modules

[newyankeecodeshop]

@leotm You don't have to update the version each time you upgrade your babel necessarily. Setting the version to a reasonably newer version, such as 7.14.5, will provide that bundle size reduction (via optimizing interopRequireWildcard).
You can see what helpers the version affects in this file:
https://github.com/babel/babel/blob/main/packages/babel-helpers/src/helpers.ts