Import interopRequireWildcard Babel helper from @babel/runtime instead of inlining it#57126
Import interopRequireWildcard Babel helper from @babel/runtime instead of inlining it#57126ahmdshrif wants to merge 2 commits into
interopRequireWildcard Babel helper from @babel/runtime instead of inlining it#57126Conversation
…nlining it When no explicit runtime version was given, @react-native/babel-preset enabled @babel/plugin-transform-runtime without a `version`, so it defaulted to 7.0.0. Helpers added to @babel/runtime after 7.0.0 — most notably the modern `interopRequireWildcard` used for every `import * as X` — were therefore inlined into every module instead of being imported once from @babel/runtime, needlessly bloating the bundle. Default the transform-runtime `version` to 7.14.0 (the floor at which `interopRequireWildcard` is available) when a version isn't explicitly provided. The helper is now imported from @babel/runtime and deduplicated. Fixes facebook#57123
|
For a reference: babel/babel#18050 |
| const runtimeVersion = | ||
| typeof options?.enableBabelRuntime === 'string' | ||
| ? options.enableBabelRuntime | ||
| : '7.14.0'; |
There was a problem hiding this comment.
can you use an actual ver. of babel/runtime here require('@babel/runtime/package.json').version ?
like expo do: https://github.com/expo/expo/blob/a95a543fb5167efe67285728f07a33fb7a897584/packages/babel-preset-expo/src/common.ts#L122-L137
to prevent more helpers to be inlined by Babel:
- https://github.com/babel/babel/blob/2688fbd1999f5be276142ad0cf60ef182e60fb65/packages/babel-helpers/src/helpers-generated.ts#L656
- https://github.com/babel/babel/blob/2688fbd1999f5be276142ad0cf60ef182e60fb65/packages/babel-helpers/src/helpers-generated.ts#L404
- https://github.com/babel/babel/blob/2688fbd1999f5be276142ad0cf60ef182e60fb65/packages/babel-helpers/src/helpers-generated.ts#L1151
- ...
There was a problem hiding this comment.
Good call — done in c29d137. It now resolves the installed @babel/runtime version via require('@babel/runtime/package.json').version (with the same MODULE_NOT_FOUND try/catch + fallback as babel-preset-expo), so all helpers available in it are imported instead of only those up to a fixed floor. The snapshot fixtures now also dedupe callSuper, wrapRegExp, etc. Thanks for the reference!
Per review feedback: derive the transform-runtime version from the installed @babel/runtime (matching babel-preset-expo) so all helpers available in it are imported rather than only those up to a hardcoded floor. Falls back to a conservative version when @babel/runtime can't be resolved.
Summary:
Fixes #57123.
@react-native/babel-presetenables@babel/plugin-transform-runtimewithhelpers: truebut, unless a runtime version is explicitly passed viaenableBabelRuntime, it doesn't set the plugin'sversionoption — so it defaults to7.0.0.@babel/plugin-transform-runtimeonly imports a helper from@babel/runtimeif that helper existed at the configured version; anything added after7.0.0is inlined into every module instead.The most visible victim is
interopRequireWildcard, which Babel injects for everyimport * as X from '...'(e.g.import * as React from 'react'). Its modern (WeakMap-cached) form was added after7.0.0, so today it is duplicated into every file that uses a namespace import — while sibling helpers likeinteropRequireDefault(unchanged since7.0.0) are correctly imported once. This needlessly increases bundle size.When a version isn't explicitly provided, this resolves the installed
@babel/runtimeversion (require('@babel/runtime/package.json').version, with the sameMODULE_NOT_FOUNDtry/catch + fallback used bybabel-preset-expo) and passes it totransform-runtime, so all helpers available in that runtime —interopRequireWildcardand other post-7.0.0 helpers likecallSuper/wrapRegExp— are imported from@babel/runtimeand deduplicated instead of inlined.Changelog:
[GENERAL] [FIXED] - Import the
interopRequireWildcardBabel helper from@babel/runtimeinstead of inlining it into every moduleTest Plan:
yarn jest packages/react-native-babel-preset— 50 passed.interopRequireWildcard/createForOfIteratorHelperLoose/callSuper/wrapRegExp/ etc. replaced with@babel/runtimeimports — net fewer lines).import * as Reactresults in an importedinteropRequireWildcard(not an inlinedfunction _interopRequireWildcard).Before (per module):
After: