Skip to content

Commit

Permalink
fix(plugin-vue): invalidate script module cache when it changed in ho…
Browse files Browse the repository at this point in the history
…t update (#11059)
  • Loading branch information
sun0day authored Nov 25, 2022
1 parent 72f63c5 commit 9d0b9d8
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 2 deletions.
5 changes: 3 additions & 2 deletions packages/plugin-vue/src/handleHotUpdate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ export async function handleHotUpdate(
})[0]
const templateModule = modules.find((m) => /type=template/.test(m.url))

if (hasScriptChanged(prevDescriptor, descriptor)) {
const scriptChanged = hasScriptChanged(prevDescriptor, descriptor)
if (scriptChanged) {
let scriptModule: ModuleNode | undefined
if (
(descriptor.scriptSetup?.lang && !descriptor.scriptSetup.src) ||
Expand All @@ -66,7 +67,7 @@ export async function handleHotUpdate(
// binding metadata. However, when reloading the template alone the binding
// metadata will not be available since the script part isn't loaded.
// in this case, reuse the compiled script from previous descriptor.
if (mainModule && !affectedModules.has(mainModule)) {
if (!scriptChanged) {
setResolvedScript(
descriptor,
getResolvedScript(prevDescriptor, false)!,
Expand Down
17 changes: 17 additions & 0 deletions playground/vue/HmrTsx.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<h2 class="hmr-tsx">HMR</h2>
<p>Click the button then edit this message. The count should be preserved.</p>
<button class="hmr-tsx-inc" @click="count++">count is {{ count }}</button>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
const count = ref(0)
</script>

<style>
.hmr-tsx-inc {
color: red;
}
</style>
4 changes: 4 additions & 0 deletions playground/vue/Main.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<div class="hmr-block">
<Hmr />
</div>
<div class="hmr-tsx-block">
<HmrTsx />
</div>
<Syntax />
<PreProcessors />
<CssModules />
Expand All @@ -27,6 +30,7 @@

<script setup lang="ts">
import Hmr from './Hmr.vue'
import HmrTsx from './HmrTsx.vue'
import Syntax from './Syntax.vue'
import PreProcessors from './PreProcessors.vue'
import CssModules from './CssModules.vue'
Expand Down
8 changes: 8 additions & 0 deletions playground/vue/__tests__/vue.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,14 @@ describe('hmr', () => {
editFile('Hmr.vue', (code) => code.replace(/<template>.+<\/template>/s, ''))
await untilUpdated(() => page.innerHTML('.hmr-block'), '<!---->')
})

test('should re-render when template and tsx script both changed', async () => {
editFile('HmrTsx.vue', (code) => code.replace(/count/g, 'updatedCount'))
await untilUpdated(
() => page.innerHTML('.hmr-tsx-block .hmr-tsx-inc'),
'updatedCount is 0'
)
})
})

describe('src imports', () => {
Expand Down

0 comments on commit 9d0b9d8

Please sign in to comment.