Skip to content

Commit

Permalink
fix(hmr): fix hmr when global mixins are used
Browse files Browse the repository at this point in the history
fix #4174
  • Loading branch information
yyx990803 committed Jul 22, 2021
1 parent fe58bae commit db3f57a
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 1 deletion.
42 changes: 41 additions & 1 deletion packages/runtime-core/__tests__/hmr.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@ import {
nextTick
} from '@vue/runtime-test'
import * as runtimeTest from '@vue/runtime-test'
import { registerRuntimeCompiler, createApp } from '@vue/runtime-test'
import { baseCompile } from '@vue/compiler-core'

declare var __VUE_HMR_RUNTIME__: HMRRuntime
const { createRecord, rerender, reload } = __VUE_HMR_RUNTIME__

runtimeTest.registerRuntimeCompiler(compileToFunction)
registerRuntimeCompiler(compileToFunction)

function compileToFunction(template: string) {
const { code } = baseCompile(template)
Expand Down Expand Up @@ -395,4 +396,43 @@ describe('hot module replacement', () => {
`<div style={}><div>1</div><div>2</div></div>`
)
})

// #4174
test('with global mixins', async () => {
const childId = 'hmr-global-mixin'
const createSpy1 = jest.fn()
const createSpy2 = jest.fn()

const Child: ComponentOptions = {
__hmrId: childId,
created: createSpy1,
render() {
return h('div')
}
}
createRecord(childId, Child)

const Parent: ComponentOptions = {
render: () => h(Child)
}

const app = createApp(Parent)
app.mixin({})

const root = nodeOps.createElement('div')
app.mount(root)
expect(createSpy1).toHaveBeenCalledTimes(1)
expect(createSpy2).toHaveBeenCalledTimes(0)

reload(childId, {
__hmrId: childId,
created: createSpy2,
render() {
return h('div')
}
})
await nextTick()
expect(createSpy1).toHaveBeenCalledTimes(1)
expect(createSpy2).toHaveBeenCalledTimes(1)
})
})
3 changes: 3 additions & 0 deletions packages/runtime-core/src/hmr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,9 @@ function reload(id: string, newComp: ComponentOptions | ClassComponent) {
}

Array.from(instances).forEach(instance => {
// invalidate options resolution cache
instance.appContext.optionsCache.delete(instance.type as any)

if (instance.parent) {
// 4. Force the parent instance to re-render. This will cause all updated
// components to be unmounted and re-mounted. Queue the update so that we
Expand Down

0 comments on commit db3f57a

Please sign in to comment.