Skip to content

Commit

Permalink
fix(plugin-vue): fix hmr issue in vuejs/core#4358
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Nov 26, 2021
1 parent ecafa80 commit 709e4b0
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 7 deletions.
1 change: 1 addition & 0 deletions packages/playground/vue/Hmr.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

<script setup lang="ts">
import { ref } from 'vue'
import Node from './Node.vue'
let foo: number = 0
Expand Down
7 changes: 7 additions & 0 deletions packages/playground/vue/__tests__/vue.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,13 @@ describe('hmr', () => {
await untilUpdated(() => page.textContent('.hmr-inc'), 'count is 100')
})

test('global hmr for some scenarios', async () => {
editFile('Hmr.vue', (code) =>
code.replace('</template>', ' <Node/>\n' + '</template>')
)
await untilUpdated(() => page.innerHTML('.node'), 'this is node')
})

test('should re-render when template is emptied', async () => {
editFile('Hmr.vue', () => '')
await untilUpdated(() => page.innerHTML('.hmr-block'), '<!---->')
Expand Down
30 changes: 24 additions & 6 deletions packages/plugin-vue/src/handleHotUpdate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,7 @@ export async function handleHotUpdate(
)
const templateModule = modules.find((m) => /type=template/.test(m.url))

if (
!isEqualBlock(descriptor.script, prevDescriptor.script) ||
!isEqualBlock(descriptor.scriptSetup, prevDescriptor.scriptSetup)
) {
if (hasScriptChanged(prevDescriptor, descriptor)) {
let scriptModule: ModuleNode | undefined
if (descriptor.script?.lang && !descriptor.script.src) {
const scriptModuleRE = new RegExp(
Expand Down Expand Up @@ -174,11 +171,32 @@ export function isOnlyTemplateChanged(
next: SFCDescriptor
): boolean {
return (
isEqualBlock(prev.script, next.script) &&
isEqualBlock(prev.scriptSetup, next.scriptSetup) &&
!hasScriptChanged(prev, next) &&
prev.styles.length === next.styles.length &&
prev.styles.every((s, i) => isEqualBlock(s, next.styles[i])) &&
prev.customBlocks.length === next.customBlocks.length &&
prev.customBlocks.every((s, i) => isEqualBlock(s, next.customBlocks[i]))
)
}

function hasScriptChanged(prev: SFCDescriptor, next: SFCDescriptor): boolean {
if (!isEqualBlock(prev.script, next.script)) {
return true
}
if (!isEqualBlock(prev.scriptSetup, next.scriptSetup)) {
return true
}

// vue core #3176
// <script setup lang="ts"> prunes non-unused imports
// the imports pruning depends on template, so script may need to re-compile
// based on template changes
const prevResolvedScript = getResolvedScript(prev, false)
// this is only available in vue@^3.2.23
const prevImports = prevResolvedScript?.imports
if (prevImports) {
return next.shouldForceReload(prevImports)
}

return false
}
1 change: 0 additions & 1 deletion packages/plugin-vue/src/script.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export function resolveScript(
inlineTemplate: isUseInlineTemplate(descriptor, !options.devServer),
refTransform: options.refTransform !== false,
templateOptions: resolveTemplateCompilerOptions(descriptor, options, ssr),
// @ts-ignore TODO remove ignore when we support this in @vue/compiler-sfc
sourceMap: options.sourceMap
})

Expand Down

0 comments on commit 709e4b0

Please sign in to comment.