fix(hmr): fix updates for imported but not yet rendered components

packages/runtime-core/__tests__/hmr.spec.ts

@@ -33,9 +33,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 () => {
@@ -47,7 +47,7 @@ describe('hot module replacement', () => {
  __hmrId: childId,
  render: compileToFunction(`<div><slot/></div>`)
  }
- createRecord(childId)
+ createRecord(childId, Child)
 
  const Parent: ComponentOptions = {
  __hmrId: parentId,
@@ -59,7 +59,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>`)
@@ -125,7 +125,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)
@@ -164,7 +164,7 @@ describe('hot module replacement', () => {
  render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
  }
  }
- createRecord(childId)
+ createRecord(childId, Child)
 
  const Parent: ComponentOptions = {
  render: () => h(Child)
@@ -209,7 +209,7 @@ describe('hot module replacement', () => {
  },
  render: compileToFunction(template)
  }
- createRecord(id)
+ createRecord(id, Comp)
 
  render(h(Comp), root)
  expect(serializeInner(root)).toBe(
@@ -246,14 +246,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>`)
@@ -272,14 +272,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>`)
@@ -299,7 +299,7 @@ describe('hot module replacement', () => {
  __hmrId: childId,
  render: compileToFunction(`<div>child</div>`)
  }
- createRecord(childId)
+ createRecord(childId, Child)
 
  const components: ComponentOptions[] = []
 
@@ -321,7 +321,7 @@ describe('hot module replacement', () => {
  }
  }
 
- createRecord(parentId)
+ createRecord(parentId, parentComp)
  }
 
  const last = components[components.length - 1]

packages/runtime-core/src/hmr.ts

@@ -42,38 +42,48 @@ if (__DEV__ && (__BROWSER__ || __TEST__)) {
  } as HMRRuntime
 }
 
-type HMRRecord = Set<ComponentInternalInstance>
+type HMRRecord = {
+ component: ComponentOptions
+ instances: Set<ComponentInternalInstance>
+}
 
 const map: Map<string, HMRRecord> = 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 ComponentOptions)
  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,
+ component: ComponentOptions | ClassComponent
+): boolean {
  if (map.has(id)) {
  return false
  }
- map.set(id, new Set())
+ map.set(id, {
+ component: isClassComponent(component) ? component.__vccOpts : component,
+ instances: new Set()
+ })
  return true
 }
 
 function rerender(id: string, newRender?: Function) {
  const record = map.get(id)
  if (!record) return
+ if (newRender) record.component.render = newRender
  // Array.from creates a snapshot which avoids the set being mutated during
  // updates
- Array.from(record).forEach(instance => {
+ Array.from(record.instances).forEach(instance => {
  if (newRender) {
  instance.render = newRender as InternalRenderFunction
  }
@@ -90,26 +100,27 @@ function reload(id: string, newComp: ComponentOptions | ClassComponent) {
  if (!record) return
  // Array.from creates a snapshot which avoids the set being mutated during
  // updates
- Array.from(record).forEach(instance => {
- const comp = instance.type
- if (!hmrDirtyComponents.has(comp)) {
- // 1. Update existing comp definition to match new one
- newComp = isClassComponent(newComp) ? newComp.__vccOpts : newComp
- extend(comp, newComp)
- for (const key in comp) {
- if (!(key in newComp)) {
- delete (comp as any)[key]
- }
+ const { component, instances } = record
+
+ if (!hmrDirtyComponents.has(component)) {
+ // 1. Update existing comp definition to match new one
+ newComp = isClassComponent(newComp) ? newComp.__vccOpts : newComp
+ extend(component, newComp)
+ for (const key in component) {
+ if (!(key in newComp)) {
+ delete (component as any)[key]
  }
- // 2. Mark component dirty. This forces the renderer to replace the component
- // on patch.
- hmrDirtyComponents.add(comp)
- // 3. Make sure to unmark the component after the reload.
- queuePostFlushCb(() => {
- hmrDirtyComponents.delete(comp)
- })
  }
+ // 2. Mark component dirty. This forces the renderer to replace the component
+ // on patch.
+ hmrDirtyComponents.add(component)
+ // 3. Make sure to unmark the component after the reload.
+ queuePostFlushCb(() => {
+ hmrDirtyComponents.delete(component)
+ })
+ }
 
+ Array.from(instances).forEach(instance => {
  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