fix(react): conditionally self-accept fast-refresh HMR

[IanVS]

Description

Fixes #9869
Fixes #3301
Fixes #4298
Fixes #6885
Fixes #7396

Based on top of #10244

This makes a change to the HMR code that's injected by plugin-react to check the exports of a module, and determine whether it is safe to treat as a fast-refresh boundary. If it is a safe fast-refresh boundary, we will perform fast-refresh. If not, we now call hot.invalidate() (relying on the changes in #10244) to propagate HMR up to parents. This is necessary because vite sees import.meta.hot.accept() even if it's inside a conditional, and treats the module as self-accepting. So without calling hot.invalidate(), the parent will never know to fast-refresh.

I've also added a test here for changing a react context file, and verified that it fails without the changes here, but passes with them.

Additional context

The other PR, #10244 should be reviewed first, since this one depends on it.

Thanks for help on this, @aleclarson!

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes vitejs/vite#123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[aleclarson]

I pushed a commit here that implements the hot.invalidate API (a45385f), but it probably deserves its own PR. If anyone wants to push that forward, please do. I've no time currently.

Todo

• Figure out how to avoid calling hot.invalidate on first page load, or have the dev server detect it as such and do nothing in response.

[IanVS]

@aleclarson I've rebased this onto main now that the hmr.invalidate() PR is in. Thanks again for all your help on this.

[sapphi-red]

Awesome! I tested this PR with other issues.

The following issues's repro was fixed by this PR:

• (HMR breaks when modifying React context provider #3301) (old behavior: crashes, new behavior: full reload happens)
• the vite's HMR does not work when I use React.lazy() API for lazyload #4298 (comment) (old behavior: no change happens, new behavior: full reload happens)
• func name with uppercase letter cause hot reload failure? #6885 (old behavior: no change happens, new behavior: full reload happens)
• [@vitejs/[email protected], vite 2.8.6] Refresh doesn't work under a special condition #7396 (old behavior: no change happens, new behavior: full reload happens)

FYI These issues were still not working:

• HMR didn't work for dynamic imported modules (React) vite-plugin-react#20, the vite's HMR does not work when I use React.lazy() API for lazyload #4298 (comment)
• [plugin-react-refresh] auto page reloading is broken when a jsx file contain multi-components vite-plugin-react#11
• React Hot Reload - Styled Component/Emotion vite-plugin-react#6(TestMyHoc.jsx works but Test.jsx doesnt)
• [react] HMR not working with HOC vite-plugin-react#21
• fix: don't count class declarations as react fast refresh boundry (fixes #3675) #8887 (comment)

[abouroubi]

Thanks for the great job ! I think this was a blocking issue for a lot of us React users.

There is a small issue with the CHANGELOG as this PR is not referenced there (even if it's int he commit history of release: v3.2.0-beta.1).
Regarding the number of people waiting for this fix, I think it would be a good idea to mention it.

[IanVS]

Hi @abouroubi, this change was made to @vitejs/plugin-react, so the changelog is in that project: https://github.com/vitejs/vite/blob/[email protected]/packages/plugin-react/CHANGELOG.md.