fix(plugin-vue): hmr not working when updating script+template at the same time with a template preprocessor (#106)

Fixes #28 
Fixes #76

Author: rashfael

packages/plugin-vue/src/template.ts

@@ -7,7 +7,7 @@ import type {
   SFCTemplateCompileResults,
 } from 'vue/compiler-sfc'
 import type { PluginContext, TransformPluginContext } from 'rollup'
-import { getResolvedScript } from './script'
+import { getResolvedScript, resolveScript } from './script'
 import { createRollupError } from './utils/error'
 import type { ResolvedOptions } from '.'
 
@@ -70,6 +70,7 @@ export function compile(
   ssr: boolean,
 ) {
   const filename = descriptor.filename
+  resolveScript(descriptor, options, ssr)
   const result = options.compiler.compileTemplate({
     ...resolveTemplateCompilerOptions(descriptor, options, ssr)!,
     source: code,

playground/vue/Main.vue

@@ -11,6 +11,7 @@
   <TypeProps msg="msg" bar="bar" :id="123" />
   <Syntax />
   <PreProcessors />
+  <PreProcessorsHmr />
   <CssModules />
   <Assets />
   <CustomBlock />
@@ -36,6 +37,7 @@ import Hmr from './Hmr.vue'
 import HmrTsx from './HmrTsx.vue'
 import Syntax from './Syntax.vue'
 import PreProcessors from './PreProcessors.vue'
+import PreProcessorsHmr from './PreProcessorsHmr.vue'
 import CssModules from './CssModules.vue'
 import Assets from './Assets.vue'
 import CustomBlock from './CustomBlock.vue'

playground/vue/PreProcessorsHmr.vue

@@ -0,0 +1,8 @@
+<template lang="pug">
+h2.pre-processors-hmr Pre-Processors Hmr
+p.pug-hmr {{ preHmr }}
+</template>
+
+<script setup>
+const preHmr = 'pre-hmr'
+</script>

playground/vue/__tests__/vue.spec.ts

@@ -95,6 +95,16 @@ describe('pre-processors', () => {
     )
     await untilUpdated(() => getColor('p.pug-stylus'), 'orange')
   })
+
+  test('pug hmr', async () => {
+    expect(await page.textContent('p.pug-hmr')).toMatch('pre-hmr')
+    editFile('PreProcessorsHmr.vue', (code) =>
+      code
+        .replace('p.pug-hmr {{ preHmr }}', 'p.pug-hmr {{ postHmr }}')
+        .replace(`const preHmr = 'pre-hmr'`, `const postHmr = 'post-hmr'`),
+    )
+    await untilUpdated(() => page.textContent('p.pug-hmr'), 'post-hmr')
+  })
 })
 
 describe('css modules', () => {