HMR

独立 JSX/TSX 模块

插件分析根级导出组件，支持：

• 默认导出 defineComponent(...)
• 命名导出 defineComponent(...)
• 变量声明后再导出
• functional component reload
• render-only 更新与完整 reload

import { defineComponent } from 'vue'

export const HmrNamedCard = defineComponent({
  name: 'HmrNamedCard',
  data: () => ({ count: 0 }),
  render() {
    return (
      <article class="demo-card hmr-card">
        <span class="case-label">named export HMR</span>
        <h3>HmrNamedCard.jsx</h3>
        <p>开发模式修改此文件，可验证命名导出组件的热更新。</p>
        <button class="button" onClick={() => { this.count += 1 }}>保留状态：{this.count}</button>
      </article>
    )
  }
})

Vue SFC

.vue 文件的整体 HMR 由 @vitejs/plugin-vue2 管理。本插件识别 Vue script request 后不会重复注入独立模块 HMR，避免同一个组件出现两套记录。

验证

pnpm demo:dev

修改 HmrNamedCard.jsx、OptionsRenderJsx.vue 或任意 setup 组件，观察界面更新及局部状态行为。