fix: hmr doesn't work when modifying the code of jsx in sfc

[y1d7ng]

Description

fix #3008
When modifying the jsx code in the sfc file or modifying the code in the jsx file through script import, hmr does not work.

<script lang="jsx">
import { defineComponent } from "vue";

export default defineComponent({
  render() {
    return <div>change it</div>
  },
});
</script>

or change code in test.jsx.

<script src="./test.jsx"></script>

Additional context

The case of <script src="./test.jsx"></script>:

When the jsx file is imported through src in the .vue, the jsx file will be processed by plugin-vue-jsx to add hot related code.

vite/packages/plugin-vue-jsx/index.js

Line 220 in 5c0f0a3

code += `\nimport.meta.hot.accept(({${hotComponents

The importAnalysis plugin will make the isSelfAccepting of the jsx module true.

vite/packages/vite/src/node/plugins/importAnalysis.ts

Line 283 in 5c0f0a3

isSelfAccepting = true

So when modifying the code in the jsx file, only a request will be sent to get the updated jsx file. Because the __hmrId of the instance corresponding to .vue is descriptor.id:

vite/packages/plugin-vue/src/main.ts

Line 129 in ed16488

output.push(`_sfc_main.__hmrId = ${JSON.stringify(descriptor.id)}`)

and the __hmrId of jsx is newly generated and different, so the instance cannot be re-rendered only by loading jsx.

vite/packages/plugin-vue-jsx/index.js

Line 215 in ed16488

`\n${local}.__hmrId = "${id}"` +

The solution of this pr is to make the jsx file requested in the .vue have no hot related code, the isSelfAccepting of the module is false, so that when the jsx code is changed, the .vue file will be requested again.

The case of <script lang="jsx">:

But the jsx code used by <script lang='jsx'> will request a file of .vue?vue&type=script&lang.jsx, and the file's module will be excluded by the handleHotUpdate of plugin-vue.

vite/packages/plugin-vue/src/handleHotUpdate.ts

Line 49 in 5c0f0a3

affectedModules.add(mainModule)

In this way, the corresponding module will not be processed by invalidate and add lastHMRTimestamp .

vite/packages/vite/src/node/server/hmr.ts

Line 132 in 5c0f0a3

invalidate(mod, timestamp, invalidatedModules)

Because there is no query parameter t in the jsx import in .vue file, after obtaining the .vue file, the jsx file will not be requested again

vite/packages/vite/src/node/plugins/importAnalysis.ts

Line 238 in 5c0f0a3

url = injectQuery(url, `t=${depModule.lastHMRTimestamp}`)

The solution of this pr is to filter out the module corresponding to jsx file in the handleHotUpdate method of plugin-vue.

---

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 #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[Shinigami92]

floating variables should be defined with a typedef

[y1d7ng]

Thanks for your review, I will change it.

[yyx990803]

I assume this is not necessary to fix the case once vue-plugin-jsx stops generating HMR code when detecting it's inside a SFC script block?

Is it correct that this is added only to handle the case where user or other plugins use HMR API inside <script>?

[y1d7ng]

It's to handle the case where <script lang='jsx'> is used, sfc request the file .vue?vue&type=script&lang.jsx.
When the jsx code is changed, the sfc file will be requested again.
Because the module of .vue?vue&type=script&lang.jsx is excluded by the handleHotUpdate of plugin-vue,
.vue?vue&type=script&lang.jsx will not be injected with t= lastHMRTimestamp, so it will not be reloaded.