hmr work not correctly with jsx plugin for vue3

[Jokcy]

Describe the bug

When using jsx-plugin.

function getText(text){
  return `hello ${text}`
}

export default defineComponent({
  setup() {
    return () => <div>{getText('world')}</div>
  }
})

In this example, if I update the default exported component, it will hot update successfully. But if I edit the getText function for example change hello to Hi. The component will not hot update.

It mainly because jsx-plugin only detect component update, but in file written in jsx, people may split some logic into functions or some others.

Since we can't hold component state when hmr in jsx, maybe just not accept, let all component rerender is a better choice?

I will be happy to make a pr to help after we determine the best way to handle hmr in jsx.

Reproduction

I guess it's clear enough...

System Info

• vite version: 2.0.0-beta.7
• Operating System: macos big sur
• Node version: 14
• Package manager (npm/yarn/pnpm) and version: yarn

[yyx990803]

Yeah, it looks like to be safe we should just update all components exported from the file. PR welcome.

[Jokcy]

Yeah, it looks like to be safe we should just update all components exported from the file. PR welcome.

Ok I will do it this week

[Jokcy]

@yyx990803 I found these seems no way to fully reload a module without refresh, not like webpack, vite use native esmodule system and there is no module proxy. Emm... so if I find same code other then component changed I can only refresh page to reload right? If I miss something please give me some advice.

[yyx990803]

The reason it's not updating now is because the component's own code did not change, so it didn't even trigger an update. You need to remove all the hash checks comparing prev/next components in the plugin codegen so it always updates every exported component.

[Jokcy]

Yeah I know this will work for components. But what if this module export something not component, do we have a method to tell other module which imported this module? or maybe we don't need to care about this.

[yyx990803]

If not every export is a component, then the module cannot be HMRed (no import.meta.hot injection). I think the fast refresh plugin has similar heuristics - it checks if every export has uppercase name.

[NoraH1to]

If i use tsx/jsx in a .vue file like this:

<script lang="tsx">
export default defineComponent({
  setup: (props) => {
    return () => (
      <>
        <h1>hello</h1>
        <h1>world</h1>
      </>
    );
  },
});
</script>

<style scoped>
...
</style>

When i change JSXElement like <h1>new hello</h1>, DOM will not update.

---

If i just use in .tsx file:

export default defineComponent({
  setup: (props) => {
    return () => (
      <>
        <h1>hello</h1>
        <h1>world</h1>
      </>
    );
  },
});

It work.

Is this a bug?

[jiangmaniu]

@SterbenJ The problem I encountered is the same as yours. Both the syntax of the .tsx/.jsx file and the template syntax of the .vue file vite will be hmr. Only when the .vue file uses the tsx/jsx syntax, vite will not hmr.

我遇到的问题与你一致，使用 .tsx/.jsx 文件的语法和 .vue 文件的 template 语法 vite 都会 hmr。唯独在 .vue 文件使用 tsx/jsx语法时，vite 不会 hmr 。