Switch to new React 17+ JSX transform

[diox]

When optimizing the babel config in https://github.com/mozilla/addons-frontend/pull/11587, we could not enable the New JSX Transform because we were not on React 17+ yet.

Now that we are... we could try it!

diff --git a/babel.config.js b/babel.config.js
index 08ec40bd9..4263968e0 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -11,7 +11,7 @@ module.exports = {
         // Allow `@babel/preset-env` to import polyfills from core-js as needed.
         'useBuiltIns': 'usage',
         // Help `@babel/preset-env` make use of the correct core-js polyfills.
-        'corejs': '3.23',
+        'corejs': '3.25',
         // Perform transforms closest to targets defined in `.browserslistrc`.
         'bugfixes': true,
       },
@@ -24,11 +24,9 @@ module.exports = {
         // When spreading props, use inline object with spread elements directly
         // instead of Babel's extend helper or Object.assign.
         'useBuiltIns': true,
-        // FIXME: Upgrade to React 17+
-        // Cannot use React 17 new, lighter, faster JSX Transform
         // https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
         // https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation
-        // 'runtime': 'automatic',
+        'runtime': 'automatic',
       },
     ],
   ],

┆Issue is synchronized with this Jira Task

[diox]

Unfortunately doesn't seem to help bundle size with just that change. In fact the bundle is somehow slightly larger with that change...

[karthiknadar1204]

If this issue is still available,i would like to give it a try,please assign it to me @diox

[diox]

You can just submit a PR directly if you have a fix and that it works.

Specifically in that case, note that the patch I pasted above didn't improve things when I tested it locally, which is why we haven't gone through with it.

[ziir]

The reason this attempt to use the new JSX transform / runtime wasn't conclusive, is that the code base still relies on "legacy" react import pattern with the full react module exports in scope in order to render JSX, ie:

import * as React from 'react';

In order to benefit from the automatic JSX transform / runtime, imports must be migrated to named imports when necessary (when actually using react module exports, not just rendering JSX - this case will be handled automatically by the transform):

import { useEffect } from 'react';

This is easily done with react-codemod - I have tested it successfully on the project.

However, the project relies on multiple "outdated" react component packages, such as react-autosuggest, which themselves haven't been updated to use the new JSX transform / runtime, which prevents us from benefiting from the new JSX transform / runtime from a bundle size perspective.

For this reason, updating all react imports in the project + using the new JSX transform would still result in a ~1.12kB heavier main JavaScript bundle at this time.

Still, I believe we should still move forward to benefit from:

• a more concise code style related to react imports
• potential code parsing / runtime performance improvements
• further potential improvements in the up-to-date JSX transform & runtime

I can make the change or review / guide contribution on this topic.

Side note: @diox I see that you've updated the core-js version mentioned in the babel-preset-env configuration object to match the then current version of the core-js dependency. This version of core-js should always be in sync with the actual dependency version or subtle bugs may occur. I would recommend not updating core-js & related babel dependencies automatically - instead periodically update & review everything manually + aided by some regression testing of the code transforms.

[KevinMind]

Old Jira Ticket: https://mozilla-hub.atlassian.net/browse/ADDFRNT-103