|
@@ -542,25 +542,25 @@ export function createRenderer(options: RendererOptions) {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function mountComponent(
|
|
function mountComponent(
|
|
|
- vnode: VNode,
|
|
|
|
|
|
|
+ initialVNode: VNode,
|
|
|
container: HostNode,
|
|
container: HostNode,
|
|
|
anchor: HostNode,
|
|
anchor: HostNode,
|
|
|
parentComponent: ComponentInstance | null,
|
|
parentComponent: ComponentInstance | null,
|
|
|
isSVG: boolean
|
|
isSVG: boolean
|
|
|
) {
|
|
) {
|
|
|
- const Component = vnode.type as any
|
|
|
|
|
- const instance: ComponentInstance = (vnode.component = createComponentInstance(
|
|
|
|
|
|
|
+ const Component = initialVNode.type as any
|
|
|
|
|
+ const instance: ComponentInstance = (initialVNode.component = createComponentInstance(
|
|
|
Component,
|
|
Component,
|
|
|
parentComponent
|
|
parentComponent
|
|
|
))
|
|
))
|
|
|
instance.update = effect(function updateComponent() {
|
|
instance.update = effect(function updateComponent() {
|
|
|
if (instance.vnode === null) {
|
|
if (instance.vnode === null) {
|
|
|
// initial mount
|
|
// initial mount
|
|
|
- instance.vnode = vnode
|
|
|
|
|
- resolveProps(instance, vnode.props, Component.props)
|
|
|
|
|
- resolveSlots(instance, vnode.children)
|
|
|
|
|
|
|
+ instance.vnode = initialVNode
|
|
|
|
|
+ resolveProps(instance, initialVNode.props, Component.props)
|
|
|
|
|
+ resolveSlots(instance, initialVNode.children)
|
|
|
// setup stateful
|
|
// setup stateful
|
|
|
- if (vnode.shapeFlag & STATEFUL_COMPONENT) {
|
|
|
|
|
|
|
+ if (initialVNode.shapeFlag & STATEFUL_COMPONENT) {
|
|
|
setupStatefulComponent(instance)
|
|
setupStatefulComponent(instance)
|
|
|
}
|
|
}
|
|
|
const subTree = (instance.subTree = renderComponentRoot(instance))
|
|
const subTree = (instance.subTree = renderComponentRoot(instance))
|
|
@@ -569,7 +569,7 @@ export function createRenderer(options: RendererOptions) {
|
|
|
invokeHooks(instance.bm)
|
|
invokeHooks(instance.bm)
|
|
|
}
|
|
}
|
|
|
patch(null, subTree, container, anchor, instance, isSVG)
|
|
patch(null, subTree, container, anchor, instance, isSVG)
|
|
|
- vnode.el = subTree.el
|
|
|
|
|
|
|
+ initialVNode.el = subTree.el
|
|
|
// mounted hook
|
|
// mounted hook
|
|
|
if (instance.m !== null) {
|
|
if (instance.m !== null) {
|
|
|
queuePostFlushCb(instance.m)
|
|
queuePostFlushCb(instance.m)
|
|
@@ -580,6 +580,7 @@ export function createRenderer(options: RendererOptions) {
|
|
|
// OR parent calling processComponent (next: VNode)
|
|
// OR parent calling processComponent (next: VNode)
|
|
|
const { next } = instance
|
|
const { next } = instance
|
|
|
if (next !== null) {
|
|
if (next !== null) {
|
|
|
|
|
+ // update from parent
|
|
|
next.component = instance
|
|
next.component = instance
|
|
|
instance.vnode = next
|
|
instance.vnode = next
|
|
|
instance.next = null
|
|
instance.next = null
|
|
@@ -601,10 +602,17 @@ export function createRenderer(options: RendererOptions) {
|
|
|
instance,
|
|
instance,
|
|
|
isSVG
|
|
isSVG
|
|
|
)
|
|
)
|
|
|
- if (next !== null) {
|
|
|
|
|
- next.el = nextTree.el
|
|
|
|
|
- } else {
|
|
|
|
|
- // TODO in case of HOC, update parent component vnode el
|
|
|
|
|
|
|
+ let current = instance.vnode
|
|
|
|
|
+ current.el = nextTree.el
|
|
|
|
|
+ if (next === null) {
|
|
|
|
|
+ // self-triggered update. In case of HOC, update parent component
|
|
|
|
|
+ // vnode el. HOC is indicated by parent instance's subTree pointing
|
|
|
|
|
+ // to child component's vnode
|
|
|
|
|
+ let parent = instance.parent
|
|
|
|
|
+ while (parent && parent.subTree === current) {
|
|
|
|
|
+ ;(current = parent.vnode).el = nextTree.el
|
|
|
|
|
+ parent = parent.parent
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
// upated hook
|
|
// upated hook
|
|
|
if (instance.u !== null) {
|
|
if (instance.u !== null) {
|