Skip to content

Commit c84601c

Browse files
authored
fix(plugin-vue): setup jsx script no hmr (#6568)
1 parent c7aad02 commit c84601c

File tree

4 files changed

+33
-3
lines changed

4 files changed

+33
-3
lines changed

packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts

+7
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,11 @@ if (!isBuild) {
102102

103103
expect(await page.textContent('.script')).toMatch('5')
104104
})
105+
106+
test('hmr: setup jsx in .vue', async () => {
107+
editFile('setup-syntax-jsx.vue', (code) =>
108+
code.replace('let count = ref(100)', 'let count = ref(1000)')
109+
)
110+
await untilUpdated(() => page.textContent('.setup-jsx'), '1000')
111+
})
105112
}

packages/playground/vue-jsx/main.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { default as TsxDefault } from './Comp'
44
import OtherExt from './OtherExt.tesx'
55
import JsxScript from './Script.vue'
66
import JsxSrcImport from './SrcImport.vue'
7-
7+
import JsxSetupSyntax from './setup-syntax-jsx.vue'
88
function App() {
99
return (
1010
<>
@@ -15,6 +15,7 @@ function App() {
1515
<OtherExt />
1616
<JsxScript />
1717
<JsxSrcImport />
18+
<JsxSetupSyntax />
1819
</>
1920
)
2021
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="jsx">
2+
import { ref } from 'vue'
3+
let count = ref(100)
4+
const increment = () => {
5+
count.value++
6+
}
7+
const Render = () => (
8+
<div>
9+
<button onClick={increment}> click!!! </button>
10+
</div>
11+
)
12+
</script>
13+
14+
<template>
15+
<p class="setup-jsx">{{ count }}</p>
16+
<Render />
17+
</template>

packages/plugin-vue/src/handleHotUpdate.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,14 @@ export async function handleHotUpdate(
4040

4141
if (hasScriptChanged(prevDescriptor, descriptor)) {
4242
let scriptModule: ModuleNode | undefined
43-
if (descriptor.script?.lang && !descriptor.script.src) {
43+
if (
44+
(descriptor.scriptSetup?.lang && !descriptor.scriptSetup.src) ||
45+
(descriptor.script?.lang && !descriptor.script.src)
46+
) {
4447
const scriptModuleRE = new RegExp(
45-
`type=script.*&lang\.${descriptor.script.lang}$`
48+
`type=script.*&lang\.${
49+
descriptor.scriptSetup?.lang || descriptor.script?.lang
50+
}$`
4651
)
4752
scriptModule = modules.find((m) => scriptModuleRE.test(m.url))
4853
}

0 commit comments

Comments
 (0)