fix(hmr): correct hmr for sfc has setup script when it template change

playground/script-setup/TestScriptSetupChild.vue

@@ -0,0 +1,12 @@
+<template>
+ <h2>The hmr should work with setup script block w/ template block has child component</h2>
+ <p class="test-script-setup-child">Child has prop {{msg}}</p>
+</template>
+
+<script>
+ export default {
+ props: {
+ msg: String
+ }
+ }
+</script>

playground/script-setup/TestScriptSetupStyleVars.vue

@@ -5,10 +5,12 @@
  <span class="style-vars">This should be red</span>
  <button class="script-setup-change" @click="change">click to change</button>
  </p>
+ <TestScriptSetupChild msg="hello"/>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+export { default as TestScriptSetupChild } from './TestScriptSetupChild.vue'
 
 export default {
  props: {
@@ -21,6 +23,7 @@ export const color = ref('red')
 export function change() {
  color.value = color.value === 'red' ? 'green' : 'red'
 }
+
 </script>
 
 <style scoped vars="{ color }">

src/node/server/serverPluginVue.ts

@@ -231,6 +231,10 @@ export const vuePlugin: ServerPlugin = ({
  }
 
  if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
+ // #748 should re-use previous cached script if only template change
+ if (prevDescriptor.scriptSetup && descriptor.scriptSetup) {
+ vueCache.get(filePath)!.script = cacheEntry!.script
+ }
  needRerender = true
  }
 

test/test.js

@@ -710,6 +710,14 @@ describe('vite', () => {
  () => getComputedColor(`.style-vars`),
  'rgb(0, 0, 255)'
  )
+ // #748
+ await updateFile('script-setup/TestScriptSetupStyleVars.vue', (c) =>
+ c.replace(`msg="hello"`, `msg="hi"`)
+ )
+ await expectByPolling(
+ () => getText('.test-script-setup-child'),
+ 'Child has prop hi'
+ )
  }
  })