Update metro-react-native-babel-preset to remove unnecessary plugins with new JSC

[karanjthakkar]

Do you want to request a feature or report a bug?

(This is more of an improvement request. I'm happy to help with the corresponding implementation.)

Since 0.59.0-rc0, react-native added support for a modern JSC for Android. This is super great because it means that a lot of the babel transforms/plugins used in the preset are no longer required.

List of unnecessary babel plugins:

• @babel/plugin-transform-block-scoping
• @babel/plugin-transform-computed-properties
• @babel/plugin-transform-destructuring
• @babel/plugin-transform-function-name
• @babel/plugin-transform-literals
• @babel/plugin-transform-parameters
• @babel/plugin-transform-shorthand-properties
• @babel/plugin-transform-regenerator (Only required for iOS 10)
• @babel/plugin-transform-arrow-functions
• @babel/plugin-transform-classes
• @babel/plugin-transform-for-of
• @babel/plugin-transform-spread
• @babel/plugin-transform-template-literals
• @babel/plugin-transform-exponentiation-operator (Only required for iOS 10)
• @babel/plugin-transform-object-assign

A more thorough research of how I discovered these is available in this twitter thread.

What is the current behavior?

Currently all the above plugins are applied on the JS source, some selectively, some always.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

This is not a bug but is a potential opportunity for bundle size improvements.

What is the expected behavior?

It would be great if we remove plugins which are already supported in the minimum JSC version available on iOS and Android.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

N/A

[newyankeecodeshop]

The React Native minimum iOS version is 9, which has an incomplete implementation of ES2015. I think many of these plugins will still be needed to support that version of iOS.
Also, in our app's minimal babel config, we had to keep @babel/transform-classes because the Hot Module Reloading support does not work correctly with React components that are true ES2015 classes. It only works if they are converted by babel. I think there is already a separate metro issue about that.

[rafeca]

@karanjthakkar maybe we can create a second preset (or an option within the preset) to not transpile modern features, so it can be opt-in. @mjesun may provide some guidance here

[karanjthakkar]

@newyankeecodeshop can you link me to the issue?

@rafeca That's actually a pretty good idea. A modern version of the preset that supports the latest common denominator of JSC's on both platforms would be great! I'm happy to implement either of the versions. Not too sure what the impact of choosing one or the other is. @mjesun what do you think?

[newyankeecodeshop]

@karanjthakkar The issue is #272 . The issue that causes problems with React refs also pertains to class components in general, at least when those components have non-default constructors.

[FilDevTronic]

Any movement on this issue? It's been around for a while now (see #187)

[ariccio]

Honestly, as a novice RN developer, it's surprising to me that in 2022 we still need to use regenerator runtime, and that async/await isn't some kind of natively supported first class feature. Even C++ has coroutines now!

Why should we be fancypants javascript devs if we don't have first class support for async/await? ;)

[FilDevTronic]

@ariccio I think you're barking up the wrong tree :(.

This issue may be open, but it seems like it's definitely stale and hasn't been caught by a bot.

If you look at all the linked issues that seem to take the stuff being discussed further, they have been shuttered due to FB being dead silent about this, sadly.

[lf94]

Please fix this damn problem. I'm almost at the point where I have to fork metro to be productive. That's terrible.

Is there something coming down the pipe that's going to replace metro? Someone from Facebook, please respond. I know you're reading!

[ragamufin]

take a look at this thread: https://twitter.com/geekykaran/status/1082218546799755266

and the gist for babel.config.js to override which plugins are used:
https://gist.github.com/karanjthakkar/3241808022a75d8068f35a33b57e90c5

[elliotsayes]

If you are using hermes, you can set your babel.config.js to the following:

module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset', {
      unstable_transformProfile: 'hermes-stable'
    }],
  ],
};

And it will remove some of the breaking transforms, e.g. plugin-transform-exponentiation-operator.

[steveluscher]

I made a PR to facebook/react-native#34589 to have this be the default for new apps. The team may have other plans but at this exact moment the ‘Hermes as the default’ and the presence of JSC transforms by default seem to be at odds.