[Meta] Android target ES6 and beyond with new jsc landed on master

[gengjiawen]

Motivation

With this we can have better perf and bundle size.

First tested at https://github.com/gengjiawen/ReactNativeNewJsc. (check README for basic setup).
Then move a more big project: https://github.com/gengjiawen/test-react-nav-with-screens.

Current Status:

TypeError: TypeError: undefined is not an object (evaluating 'this._transitionConfig.screenInterpolator')

This error is located at:
    in StackViewLayout (created by withOrientation)
    in withOrientation (created by Transitioner)
    in RCTView (created by Context.Consumer)
    in Transitioner (created by StackView)
    in StackView (created by Navigator)
    in Navigator (created by KeyboardAwareNavigator)
    in KeyboardAwareNavigator (created by SceneView)
    in SceneView (created by SwitchView)
    in SwitchView (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (created by App)
    in Provider (created by App)
    in App
    in RCTView (created by Context.Consumer)
    in RCTView (created by Context.Consumer)
    in AppContainer

This error is located at:
    in NavigationContainer (created by App)
    in Provider (created by App)
    in App
    in RCTView (created by Context.Consumer)
    in RCTView (created by Context.Consumer)
    in AppContainer
_renderCard
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-navigation-stack\src\views\StackView\StackViewLayout.js:836:12
render
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-navigation-stack\src\views\StackView\StackViewLayout.js:312:26
finishClassComponent
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11488:21
performUnitOfWork
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15852:21
workLoop
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15892:41
renderRoot
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15996:15
performWorkOnRoot
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16976:17
performWork
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16877:24
performSyncWork
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16838:14
requestWork
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16703:19
scheduleWork
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16504:16
enqueueSetState
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:8481:17
setState
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\react\cjs\react.development.js:372:31
dispatch
    D:\Developer\FrontEnd\test-react-nav-with-screens\node_modules\@react-navigation\native\src\createAppContainer.js:352:22
<unknown>
    D:\Developer\FrontEnd\test-react-nav-with-screens\src\screens\LoadingScreen.js:19:37

The file is: node_modules\react-navigation-stack\src\views\StackView\StackViewLayout.js.
Please mind it's the one in src folder, not the dist one, if you want to debug.

[gengjiawen]

Through the process I also know how to fix react-navigation/react-navigation#5350. Basically similar fix to #20588.

[newyankeecodeshop]

@gengjiawen This is the babel.config.js I came up with for our app. Since we target a minimum iOS 10.3 and use the new Android JSC, we can share the babel config on both platforms. I had to keep the transform-classes plugin because hot-module reloading doesn't work with ES6 classes. The debug builds never worked. Our app also uses react-navigation and this babel config works with it.
For release builds, I had to disable minify too. That may already be a known issue with the default minify used by metro.

module.exports = function (api) {
  // I think we can always cache
  api.cache(true);

  // We target iOS 10.3+ and bundle JavaScriptCore r236355 on Android.
  // That means we have a base runtime that supports ES2017.
  const plugins = [
    "@babel/transform-flow-strip-types",
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread",
    "@babel/proposal-optional-catch-binding",
    "@babel/proposal-optional-chaining",
    "@babel/proposal-nullish-coalescing-operator",
    "@babel/transform-react-jsx",
    "@babel/transform-classes",
    [
      "@babel/transform-modules-commonjs",
      { "strict": false, "strictMode": false, "allowTopLevelThis": true }
    ],
    [
      "@babel/transform-runtime",
      { "helpers": true, "regenerator": false }
    ]
  ]

  return {
    plugins
  };
}

[cpojer]

We will gradually remove transforms that are no longer necessary soon. It requires some work on the FB side, so please wait for some commits to be merged in this area over the next few months.