Skip to content

Commit

Permalink
fix(hmr): fix hmr for components with no active instance yet
Browse files Browse the repository at this point in the history 
fix #4757
  • Loading branch information
@yyx990803
yyx990803 committed Oct 8, 2021
1 parent 6bcb7a5 commit 9e3d773
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 30 deletions.
64 changes: 49 additions & 15 deletions packages/runtime-core/__tests__/hmr.spec.ts
View file
Expand Up @@ -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 () => {
Expand All @@ -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,
Expand All @@ -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>`)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -212,7 +212,7 @@ describe('hot module replacement', () => {
},
render: compileToFunction(template)
}
createRecord(id)
createRecord(id, Comp)

render(h(Comp), root)
expect(serializeInner(root)).toBe(
Expand Down Expand Up @@ -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>`)
Expand All @@ -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>`)
Expand All @@ -302,7 +302,7 @@ describe('hot module replacement', () => {
__hmrId: childId,
render: compileToFunction(`<div>child</div>`)
}
createRecord(childId)
createRecord(childId, Child)

const components: ComponentOptions[] = []

Expand All @@ -324,7 +324,7 @@ describe('hot module replacement', () => {
}
}

createRecord(parentId)
createRecord(parentId, parentComp)
}

const last = components[components.length - 1]
Expand Down Expand Up @@ -370,7 +370,7 @@ describe('hot module replacement', () => {
</Child>
`)
}
createRecord(parentId)
createRecord(parentId, Parent)

render(h(Parent), root)
expect(serializeInner(root)).toBe(
Expand Down Expand Up @@ -410,7 +410,7 @@ describe('hot module replacement', () => {
return h('div')
}
}
createRecord(childId)
createRecord(childId, Child)

const Parent: ComponentOptions = {
render: () => h(Child)
Expand All @@ -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 changes: 42 additions & 15 deletions packages/runtime-core/src/hmr.ts
View file
Expand Up @@ -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>()
Expand All @@ -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
}
Expand All @@ -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
Expand All @@ -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.
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 9e3d773

Please sign in to comment.