fix: add metadata to jsx when using @vite/plugin-react-refresh

[threepointone]

This PR is derived from the work at https://github.com/threepointone/vite-plugin-react-jsx. It has 2 specific changes:

• It adds enforce: 'pre' to the plugin, so that it gets called before it gets passed through esbuild (i.e. before it loses jsx tags). It modifies the parserOpts passed to babel to account for this.
• It adds 2 babel plugins (transform-react-jsx-self, transform-react-jsx-source) which adds metadata on to jsx tags, allowing tools like React Devtools to show filename and line number information for an element.

There's a separate conversation to have about providing support for React's new jsx transform, and potentially renaming this plugin (if at all), but we can talk about that later. There's value in just landing this separately right now imo.

[threepointone]

I might need some help here. I've got the test I added passing locally, but seeing different flaky failures across runs here in CI. Any pointers? Thank you!

[remorses]

Using enforce pre will pass typescript code directly to the Babel react refresh plugin, I am not sure this is supported by the react refresh plugin

[threepointone]

That's a good point. I did try it and I thought it worked, maybe I was mistaken. I'll investigate later.

(That's not related to the failing test tho :( )

[threepointone]

I'm a bit confused by why the tests are failing, and would appreciate someone explaining it to me?

• My added test only fails during test-build.
• During this phase, shouldSkip in the plugin gets set to true because config.command === 'build' || config.isProduction is true.
• But then why do the other tests in react.spec.ts pass? Odd.
• editFile has an early return when isBuild is true. Why then does the hot update even work?

I'm clearly missing some context haha. Could someone explain the spookiness to me? And should I just skip my tests when isBuild === true?

[yyx990803]

@threepointone ah yes, to make HMR tests eaiser, editFile and untilUpdated are both noops in build tests 😅

Yes you should just skip your test for build.

[threepointone]

Aha, I missed that untilUpdated was a no-op too 😅. Updated, tests pass woooo

[michael-land]

I'm getting this error after upgrade to 1.3, any ideas how to solve it?

[vite] Internal server error: ...path_to_fold/packages/...path_to_package/src/RichTextEditor/RichTextEditor.tsx: Identifier 'RichTextEditor' has already been declared (117:16)

[threepointone]

Could you file a new issue with more details and a minimal repro?