fix(plugin-vue): setup jsx script no hmr (#6568)

vitejs · Feb 23, 2022 · c84601c · c84601c
1 parent c7aad02
commit c84601c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -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() {
       <OtherExt />
       <JsxScript />
       <JsxSrcImport />
+      <JsxSetupSyntax />
     </>
   )
 }

diff --git a/packages/playground/vue-jsx/setup-syntax-jsx.vue b/packages/playground/vue-jsx/setup-syntax-jsx.vue
@@ -0,0 +1,17 @@
+<script setup lang="jsx">
+import { ref } from 'vue'
+let count = ref(100)
+const increment = () => {
+  count.value++
+}
+const Render = () => (
+  <div>
+    <button onClick={increment}> click!!! </button>
+  </div>
+)
+</script>
+
+<template>
+  <p class="setup-jsx">{{ count }}</p>
+  <Render />
+</template>
diff --git 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))
     }