theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(hmr): fix hmr for components with no active instance yet

Browse Source 
fix #4757
This commit is contained in:
Evan You 2021-10-08 12:39:24 -04:00
parent 6bcb7a5ea3
commit 9e3d7731c7
2 changed files with 91 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/runtime-core/__tests__/hmr.spec.ts
View File

@ -36,9 +36,9 @@ describe('hot module replacement', () => {
})
test('createRecord', () => {
expect(createRecord('test1')).toBe(true)
expect(createRecord('test1', {})).toBe(true)
// if id has already been created, should return false
expect(createRecord('test1')).toBe(false)
expect(createRecord('test1', {})).toBe(false)
})
test('rerender', async () => {
@ -50,7 +50,7 @@ describe('hot module replacement', () => {
__hmrId: childId,
render: compileToFunction(`<div><slot/></div>`)
}
createRecord(childId)
createRecord(childId, Child)
const Parent: ComponentOptions = {
__hmrId: parentId,
@ -62,7 +62,7 @@ describe('hot module replacement', () => {
`<div @click="count++">{{ count }}<Child>{{ count }}</Child></div>`
)
}
createRecord(parentId)
createRecord(parentId, Parent)
render(h(Parent), root)
expect(serializeInner(root)).toBe(`<div>0<div>0</div></div>`)
@ -128,7 +128,7 @@ describe('hot module replacement', () => {
unmounted: unmountSpy,
render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
}
createRecord(childId)
createRecord(childId, Child)
const Parent: ComponentOptions = {
render: () => h(Child)
@ -167,7 +167,7 @@ describe('hot module replacement', () => {
render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
}
}
createRecord(childId)
createRecord(childId, Child)
const Parent: ComponentOptions = {
render: () => h(Child)
@ -212,7 +212,7 @@ describe('hot module replacement', () => {
},
render: compileToFunction(template)
}
createRecord(id)
createRecord(id, Comp)
render(h(Comp), root)
expect(serializeInner(root)).toBe(
@ -249,14 +249,14 @@ describe('hot module replacement', () => {
},
render: compileToFunction(`<div>{{ msg }}</div>`)
}
createRecord(childId)
createRecord(childId, Child)
const Parent: ComponentOptions = {
__hmrId: parentId,
components: { Child },
render: compileToFunction(`<Child msg="foo" />`)
}
createRecord(parentId)
createRecord(parentId, Parent)
render(h(Parent), root)
expect(serializeInner(root)).toBe(`<div>foo</div>`)
@ -275,14 +275,14 @@ describe('hot module replacement', () => {
__hmrId: childId,
render: compileToFunction(`<div>child</div>`)
}
createRecord(childId)
createRecord(childId, Child)
const Parent: ComponentOptions = {
__hmrId: parentId,
components: { Child },
render: compileToFunction(`<Child class="test" />`)
}
createRecord(parentId)
createRecord(parentId, Parent)
render(h(Parent), root)
expect(serializeInner(root)).toBe(`<div class="test">child</div>`)
@ -302,7 +302,7 @@ describe('hot module replacement', () => {
__hmrId: childId,
render: compileToFunction(`<div>child</div>`)
}
createRecord(childId)
createRecord(childId, Child)
const components: ComponentOptions[] = []
@ -324,7 +324,7 @@ describe('hot module replacement', () => {
}
}
createRecord(parentId)
createRecord(parentId, parentComp)
}
const last = components[components.length - 1]
@ -370,7 +370,7 @@ describe('hot module replacement', () => {
</Child>
`)
}
createRecord(parentId)
createRecord(parentId, Parent)
render(h(Parent), root)
expect(serializeInner(root)).toBe(
@ -410,7 +410,7 @@ describe('hot module replacement', () => {
return h('div')
}
}
createRecord(childId)
createRecord(childId, Child)
const Parent: ComponentOptions = {
render: () => h(Child)
@ -435,4 +435,38 @@ describe('hot module replacement', () => {
expect(createSpy1).toHaveBeenCalledTimes(1)
expect(createSpy2).toHaveBeenCalledTimes(1)
})
// #4757
test('rerender for component that has no active instance yet', () => {
const id = 'no-active-instance-rerender'
const Foo: ComponentOptions = {
__hmrId: id,
render: () => 'foo'
}
createRecord(id, Foo)
rerender(id, () => 'bar')
const root = nodeOps.createElement('div')
render(h(Foo), root)
expect(serializeInner(root)).toBe('bar')
})
test('reload for component that has no active instance yet', () => {
const id = 'no-active-instance-reload'
const Foo: ComponentOptions = {
__hmrId: id,
render: () => 'foo'
}
createRecord(id, Foo)
reload(id, {
__hmrId: id,
render: () => 'bar'
})
const root = nodeOps.createElement('div')
render(h(Foo), root)
expect(serializeInner(root)).toBe('bar')
})
})

57
packages/runtime-core/src/hmr.ts
View File

@ -10,6 +10,8 @@ import {
import { queueJob, queuePostFlushCb } from './scheduler'
import { extend, getGlobalThis } from '@vue/shared'
type HMRComponent = ComponentOptions | ClassComponent
export let isHmrUpdating = false
export const hmrDirtyComponents = new Set<ConcreteComponent>()
@ -33,32 +35,42 @@ if (__DEV__) {
} as HMRRuntime
}
const map: Map<string, Set<ComponentInternalInstance>> = new Map()
const map: Map<
string,
{
// the initial component definition is recorded on import - this allows us
// to apply hot updates to the component even when there are no actively
// rendered instance.
initialDef: ComponentOptions
instances: Set<ComponentInternalInstance>
}
> = new Map()
export function registerHMR(instance: ComponentInternalInstance) {
const id = instance.type.__hmrId!
let record = map.get(id)
if (!record) {
createRecord(id)
createRecord(id, instance.type as HMRComponent)
record = map.get(id)!
}
record.add(instance)
record.instances.add(instance)
}
export function unregisterHMR(instance: ComponentInternalInstance) {
map.get(instance.type.__hmrId!)!.delete(instance)
map.get(instance.type.__hmrId!)!.instances.delete(instance)
}
function createRecord(id: string): boolean {
function createRecord(id: string, initialDef: HMRComponent): boolean {
if (map.has(id)) {
return false
}
map.set(id, new Set())
map.set(id, {
initialDef: normalizeClassComponent(initialDef),
instances: new Set()
})
return true
}
type HMRComponent = ComponentOptions | ClassComponent
function normalizeClassComponent(component: HMRComponent): ComponentOptions {
return isClassComponent(component) ? component.__vccOpts : component
}
@ -68,8 +80,12 @@ function rerender(id: string, newRender?: Function) {
if (!record) {
return
}
// update initial record (for not-yet-rendered component)
record.initialDef.render = newRender
// Create a snapshot which avoids the set being mutated during updates
;[...record].forEach(instance => {
;[...record.instances].forEach(instance => {
if (newRender) {
instance.render = newRender as InternalRenderFunction
normalizeClassComponent(instance.type as HMRComponent).render = newRender
@ -87,20 +103,19 @@ function reload(id: string, newComp: HMRComponent) {
if (!record) return
newComp = normalizeClassComponent(newComp)
// update initial def (for not-yet-rendered components)
updateComponentDef(record.initialDef, newComp)
// create a snapshot which avoids the set being mutated during updates
const instances = [...record]
const instances = [...record.instances]
for (const instance of instances) {
const oldComp = normalizeClassComponent(instance.type as HMRComponent)
if (!hmrDirtyComponents.has(oldComp)) {
// 1. Update existing comp definition to match new one
extend(oldComp, newComp)
for (const key in oldComp) {
if (key !== '__file' && !(key in newComp)) {
delete (oldComp as any)[key]
}
if (oldComp !== record.initialDef) {
updateComponentDef(oldComp, newComp)
}
// 2. mark definition dirty. This forces the renderer to replace the
// component on patch.
@ -152,6 +167,18 @@ function reload(id: string, newComp: HMRComponent) {
})
}
function updateComponentDef(
oldComp: ComponentOptions,
newComp: ComponentOptions
) {
extend(oldComp, newComp)
for (const key in oldComp) {
if (key !== '__file' && !(key in newComp)) {
delete (oldComp as any)[key]
}
}
}
function tryWrap(fn: (id: string, arg: any) => any): Function {
return (id: string, arg: any) => {
try {