preserve state on HMR when multiple components exists in a single file

[wxs77577]

Related plugins

• [ ] plugin-vue

• [X] plugin-vue-jsx

Describe the bug

import { defineComponent } from "vue";

export const Test = defineComponent({
  render() {
    return <b>Then change me...</b>;
  },
});

export default defineComponent({
  render() {
    return (
      <div>
        <div>
          <input type="text" placeholder="Type fist..." />
        </div>
        <Test></Test>
      </div>
    );
  },
});

Reproduction

https://stackblitz.com/edit/vitejs-vite-uda5gz?file=src/main.ts

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Memory: 125.39 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.18.0 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    @vitejs/plugin-vue-jsx: ^3.0.0 => 3.0.0 
    vite: ^4.0.0 => 4.1.1

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

I wasn't able to reproduce. Would you write a more detailed steps?

[wxs77577]

I wasn't able to reproduce. Would you write a more detailed steps?

The problem is when I change the jsx template of Test component and save the App.tsx, the msg in the default component has been reseted.

I've made some changes in App.tsx:

https://stackblitz.com/edit/vitejs-vite-uda5gz?file=src%2FApp.tsx,src%2Fstyle.css,src%2Fmain.ts

[sapphi-red]

I see.

To achieve that, we somehow need to skip calling __VUE_HMR_RUNTIME__.reload for the default component. I'm not sure how we can do that though.

[edison1105]

it should call __VUE_HMR_RUNTIME__.rerender instead of reload.