[FEATURE] Newer Babel JSX Transform

[loren138]

React released a new babel JSX transform in 2020 so you don't have to import React in every component but pwa-kit is not using it.

Describe the solution you'd like

Use the new transform in: https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/pwa-kit-dev/src/configs/babel/babel-config.js#L20 (and line 48 for tests)

You'd change:

require('@babel/preset-react')

to

[
    require('@babel/preset-react'),
   {  "runtime": "automatic" }
]

PR would probably be larger if it goes through and removes the now unnecessary imports of React from the template app.
Note: There is a codemod in the blog post linked below that can help with this

Describe alternatives you've considered

Adjusting my own babel.config.js file to override the default one

Additional context

Blog announcing the release: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

[git2gus]

This issue has been linked to a new work item: W-17864199

[bendvc]

Hey @loren138, Great suggestion. I've gone ahead and tagged this to create a storey. But I have a question for you as an external dev, what would the benefit of running that code mod to remove the react import, aside from a decrease in lines of code, I'm curious how end users would benefit from use removing the import in our template code. Do you generate your projects using extensibility? or do you generate your projects with all the template code exported?

[loren138]

I don't know that there is a benefit in existing code besides reducing lines of code. In new code, it means I don't have to remember to import react. (I spent a while debugging a crash to eventually realize I had forgotten the import.)