chore: remove @babel/plugin-transform-destructuring plugin

[EvanBacon]

Summary:

• Hermes in react-native@0.73.6 appears to support destructuring natively. The babel preset only removes the plugin if running Hermes canary, which doesn't seem to be needed anymore.
• Caniuse indicates that JSC has supported all destructuring features since iOS 11.3 (we're on ~13) https://caniuse.com/?search=destructuring
• @babel/preset-env with reasonably modern defaults doesn't apply this transform anymore repl. (This is for web / Node.js support since we reuse the babel preset in Expo CLI).
• Original discussion https://discord.com/channels/514829729862516747/896089100199788604/1222231550456893563

Changelog:

[GENERAL] [BREAKING] - Remove @babel/plugin-transform-destructuring transform ([a, b, ...c]) from all platforms and engines.

Test Plan:

• I removed the plugin in an Expo SDK 50 project (code node_modules/@react-native/babel-preset/src/configs/main.js -> delete plugin).
• I added a const [index, setIndex, ...foo] = React.useState(0); to the code to ensure at least one instance of destructuring (there are many throughout the default modules though).
• Then ran with a clear metro cache (npx expo start -c) on iOS, Android, web, Node.js (Expo Router).
• Also ran clean cache against JSC / Hermes (changing jsEngine in the app.json).
• I verified by pulling the source from the browser that the transform wasn't being applied anywhere, e.g. http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.bacon.mar26&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true
  • Source looked like: var [index, setIndex, ...foo] = (0, _react.useState)(0); (modifications primarily coming from @babel/plugin-transform-modules-commonjs and @babel/plugin-transform-block-scoping).
• Built a bare app on iOS just to confirm no differences in behavior.
• Then I ran a script against the Hermes bin just to be absolutely sure no errors would arise against Hermes: ./ios/Pods/hermes-engine/destroot/bin/hermes ./foo.js where foo.js contained:

const [a, b, ...c] = (() => [0, 1])();

[facebook-github-bot]

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

[robhogan]

Sharing with permission from @tmikov:

In principle, we would very much like to remove this transform.

In practice, unfortunately Hermes hasn't been widely tested with "native" destructuring, we have never shipped it with RN, since the transform has always been active. So, there is risk. If there are bugs, they will be discovered in Hermes, and Hermes has been frozen for quite some time, while we are working on Static Hermes. So, such bugs will be very painful to fix.

OTOH, Static Hermes will support tons of ES6+ features natively, like classes, block scoping, etc, and we will be removing lots of transforms there anyway.

I think ideally I would prefer to keep the transform as is for now, until we release Static Hermes as a drop-in (but much better) replacement for Hermes.

[programad]

I noticed today 7 packages that need attention:

@babel/plugin-proposal-nullish-coalescing-operator@7.18.6 -> @babel/plugin-transform-nullish-coalescing-operator
@babel/plugin-proposal-numeric-separator@7.18.6 -> @babel/plugin-transform-numeric-separator
@babel/plugin-proposal-optional-catch-binding@7.18.6 -> @babel/plugin-transform-optional-catch-binding
@babel/plugin-proposal-class-properties@7.18.6 -> @babel/plugin-transform-class-properties
@babel/plugin-proposal-object-rest-spread@7.20.7 -> @babel/plugin-transform-object-rest-spread
@babel/plugin-proposal-optional-chaining@7.21.0 -> @babel/plugin-transform-optional-chaining
@babel/plugin-proposal-async-generator-functions@7.20.7 -> @babel/plugin-transform-async-generator-functions

[EvanBacon]

The Expo E2E tests discovered a missing feature in Hermes destructuring implementation: expo/expo#27885 (comment)

error: Destructuring in catch parameters is currently unsupported

Which comes from:

try {

} catch ({ message }) {

}

We'll just disable the transform when targeting web/server environments, which can be done in expo/expo.