Add swc transpilation behind a flag

[raix]

This pr swaps out babel and use swc for transpiling code building/testing

Overview:

• [x] Make start/build/test work with swc
• [x] fix any broken tests
• [x] enable browserlists support
• [x] Remove support for Flow (currently not supported in swc)
• [x] load project tsconfig/jsconfig and map into swc config
• [x] ~use ts-jest for jest ts/tsx file transformation (keeping an eye on stc)~ (keeping the scope of the pr to swc)
• [x] QA if project browserslist config is working
• [x] QA project tsconfig mapping works
• [x] ~QA project tsconfig is loaded in ts-jest~
• [x] Add babel back
• [x] Move js/ts transformation out into separate files for swc and babel
• [x] Add and document SWC_TRANSFORM
• [x] QA both babel and swc configurations
• [x] Allow comments in jsconfig.json - we use this file to configure swc in non TypeScript projects
• [ ] Cover by tests - reuse the kitchensink?

Notes:

• Currently eslint use use babel parser (waiting for someone to write eslint in rust / swc ast or transform swc ast to espree ast?)

Dependency updates:

• remove tar-pack seems to be unmaintained had a dependency on tar 2.x - we are now on tar 6.x
• jest patch update to 27.4.4

BREAKING CHANGE:

• When using swc it will removed support for Flow (done in one commit we can revert if https://github.com/swc-project/swc/issues/256 gets added)

[Bnaya]

Will it land with CRA5? :)))

[raix]

3 options as it removes support for Flow (on the short run) it's a breaking change - could be in v5, v6 or not at all 🙂

[raix]

We might add this behind a flag in 5.x to gather feedback for v6

[sshquack]

Thanks @raix It would fantastic to have this behind a FF for 5.x to benchmark on larger projects.

[raix]

Since we are adding json5 in this pr we should fix https://github.com/facebook/create-react-app/issues/7426 in the same go

[raix]

@mrmckeb regarding #7426 this pr adds support for comments in jsconfig.json - the pr uses jsconfig.json to configure swc language features - a project could then use jsconfig.json for configuring the IDE and swc without using TypeScript. I went for JSON5 as npm why json5 showed usage in multiple dependencies already.

[kdy1]

Hi. I'm the author of the swc project. I'm curious if there's something I can help.

Currently eslint use use babel parser (waiting for someone to write eslint in rust / swc ast or transform swc ast to espree ast?)

swc has code to convert swc AST into other estree AST, but it's not exposed as a js api just because there was no good usecase.

Does this still apply? I'm not sure if it's the case, and I'm also curious about tasks left.

[raix]

Thanks @kdy1 this pr doesn't remove babel transform due to eslint, it sounds like it could be fairly trivial to create a swc-parser for eslint, if the espree ast is already in swc?

[kdy1]

Yeah, I think so. It needs more testing about range fields of FunctionExpression, but it would not take so much time IMHO.

But I'm not sure about the API for it. Does parseAs sound good to you?

[krreet]

Hi @raix will it be possible to make some progress here and maybe land it in 5.0.2 ?

[raix]

Would be awesome if anyone is up for taking over this pr - I'm currently out of time 🙏

[kdy1]

@raix Can you provide a list of plugins that require porting?

[raix]

I think to remember that it was eslint only using babel - not sure if there's a eslint-swc parser. (It's along time ago since I did this work)

Congrats on you 25th b-day btw 🙂

[kdy1]

Thank you!