feat: invalidate message and fix HMR for HOC, class component & styled components

[ArnaudBarre]

Fixes all known HMR issues (fix #26, fix #6, fix #21, fix #11, fix #8, fix #20).

The SWC plugin also add an issue in the case of "hidden" component (like styled components), fixed in vitejs/vite-plugin-react-swc@954793d (available in 3.1.0-beta.2)

Instead of backporting only the fix, I did what I didn't have time to do before v3: using a more precise validate boundary check and adding invalidate message.

Because of a change in comment handling in esbuild, we need to add Vite 4.1 as a peer dependency to include esbuild > 0.16.14. This requires a bump of rollup and TS, that are removed of the exclude list of renovate at the same time, doesn't seem required for this small codebase.

[ArnaudBarre]

Available in v3.1.0-beta.0!

[jrmyio]

Available in v3.1.0-beta.0!

v4.1.0-beta.0 I assume ;)

I ran into some styled component theming causing a full refresh. Upgraded to the 4.1.0-beta.0 and the issue is fixed !

Awesome work !

[ArnaudBarre]

The plugin version is v3.1.0-beta.0, but it requires to bump Vite to v4.1.0-beta.0!

[brillout]

I just ran the VPS test suite and the HMR tests are passing.

[glekner]

Amazing work! waiting for a release

[ArnaudBarre]

This should be released this week when Vite 4.1 is stable

[rcofie]

@ArnaudBarre how does one upgrade it to the latest version so I don't get an error with ReactRefresh?

[ArnaudBarre]

This available with the version 3.1 (requires Vite 4.1)

[andrUIko]

It seems to be not resolved still in current stable version (4.1.0)

[ArnaudBarre]

Are you using v3.1?
If yes can you provide a case where this is not working for you?

[andrUIko]

Are you using v3.1? If yes can you provide a case where this is not working for you?

vitejs/plugin-react - 3.1.0
vite - 4.1.0
The warning occurred when I wrapped component with HOC and made default export
export default Wrapper(Component)
I've already dropped idea of using HOCs and refactored Wrapper to be
<Wrapper><Component/></Wrapper>

[ArnaudBarre]

export default Wrapper(Component) is not following refresh rules because it's anonymous. You should get a warning for that

[elainecyx]

vite: 4.2.1
@vitejs/plugin-react: 3.1.0
react: 18.2.0
i got error like this: Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
how can i fix ? Thanks!
@ArnaudBarre

[ArnaudBarre]

Hey this is not the right place to report a bug. (And this PR has nothing to do with this bug). First try to reproduce the issue from a fresh template on stackblitz & then open a new issue with a link to it.
You might also read this https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#middleware-mode