diff --git a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts index b929f61fe965c3..64327e64a5f263 100644 --- a/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts +++ b/packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts @@ -102,4 +102,11 @@ if (!isBuild) { expect(await page.textContent('.script')).toMatch('5') }) + + test('hmr: setup jsx in .vue', async () => { + editFile('setup-syntax-jsx.vue', (code) => + code.replace('let count = ref(100)', 'let count = ref(1000)') + ) + await untilUpdated(() => page.textContent('.setup-jsx'), '1000') + }) } diff --git a/packages/playground/vue-jsx/main.jsx b/packages/playground/vue-jsx/main.jsx index 200702c2cc69a1..1a792ea55d2a3c 100644 --- a/packages/playground/vue-jsx/main.jsx +++ b/packages/playground/vue-jsx/main.jsx @@ -4,7 +4,7 @@ import { default as TsxDefault } from './Comp' import OtherExt from './OtherExt.tesx' import JsxScript from './Script.vue' import JsxSrcImport from './SrcImport.vue' - +import JsxSetupSyntax from './setup-syntax-jsx.vue' function App() { return ( <> @@ -15,6 +15,7 @@ function App() { + ) } diff --git a/packages/playground/vue-jsx/setup-syntax-jsx.vue b/packages/playground/vue-jsx/setup-syntax-jsx.vue new file mode 100644 index 00000000000000..0b16be7e773280 --- /dev/null +++ b/packages/playground/vue-jsx/setup-syntax-jsx.vue @@ -0,0 +1,17 @@ + + + diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts index 2bce3950563367..7c2a7ef7ee2f1f 100644 --- a/packages/plugin-vue/src/handleHotUpdate.ts +++ b/packages/plugin-vue/src/handleHotUpdate.ts @@ -40,9 +40,14 @@ export async function handleHotUpdate( if (hasScriptChanged(prevDescriptor, descriptor)) { let scriptModule: ModuleNode | undefined - if (descriptor.script?.lang && !descriptor.script.src) { + if ( + (descriptor.scriptSetup?.lang && !descriptor.scriptSetup.src) || + (descriptor.script?.lang && !descriptor.script.src) + ) { const scriptModuleRE = new RegExp( - `type=script.*&lang\.${descriptor.script.lang}$` + `type=script.*&lang\.${ + descriptor.scriptSetup?.lang || descriptor.script?.lang + }$` ) scriptModule = modules.find((m) => scriptModuleRE.test(m.url)) }