diff --git a/packages/core/src/createRenderer.ts b/packages/core/src/createRenderer.ts index 1e0e107c..4eb75d0e 100644 --- a/packages/core/src/createRenderer.ts +++ b/packages/core/src/createRenderer.ts @@ -118,8 +118,16 @@ export function createRenderer(options: RendererOptions) { const { flags } = vnode if (flags & VNodeFlags.ELEMENT) { mountElement(vnode, container, parentComponent, isSVG, endNode) - } else if (flags & VNodeFlags.COMPONENT) { - mountComponent(vnode, container, parentComponent, isSVG, endNode) + } else if (flags & VNodeFlags.COMPONENT_STATEFUL) { + mountStatefulComponent(vnode, container, parentComponent, isSVG, endNode) + } else if (flags & VNodeFlags.COMPONENT_FUNCTIONAL) { + mountFunctionalComponent( + vnode, + container, + parentComponent, + isSVG, + endNode + ) } else if (flags & VNodeFlags.TEXT) { mountText(vnode, container, endNode) } else if (flags & VNodeFlags.FRAGMENT) { @@ -196,43 +204,48 @@ export function createRenderer(options: RendererOptions) { }) } - function mountComponent( + function mountStatefulComponent( vnode: VNode, container: RenderNode | null, parentComponent: MountedComponent | null, isSVG: boolean, endNode: RenderNode | null ) { - const { flags, tag, data, slots } = vnode - if (flags & VNodeFlags.COMPONENT_STATEFUL) { - if (flags & VNodeFlags.COMPONENT_STATEFUL_KEPT_ALIVE) { - // kept-alive - activateComponentInstance(vnode) - } else { - mountComponentInstance( - vnode, - tag as ComponentClass, - container, - parentComponent, - isSVG, - endNode - ) - } + if (vnode.flags & VNodeFlags.COMPONENT_STATEFUL_KEPT_ALIVE) { + // kept-alive + activateComponentInstance(vnode) } else { - // functional component - const render = tag as FunctionalComponent - const { props, attrs } = resolveProps(data, render.props, render) - const subTree = (vnode.children = normalizeComponentRoot( - render(props, slots || EMPTY_OBJ, attrs || EMPTY_OBJ), + mountComponentInstance( vnode, - attrs, - render.inheritAttrs - )) - mount(subTree, container, parentComponent, isSVG, endNode) - vnode.el = subTree.el as RenderNode + vnode.tag as ComponentClass, + container, + parentComponent, + isSVG, + endNode + ) } } + function mountFunctionalComponent( + vnode: VNode, + container: RenderNode | null, + parentComponent: MountedComponent | null, + isSVG: boolean, + endNode: RenderNode | null + ) { + const { tag, data, slots } = vnode + const render = tag as FunctionalComponent + const { props, attrs } = resolveProps(data, render.props, render) + const subTree = (vnode.children = normalizeComponentRoot( + render(props, slots || EMPTY_OBJ, attrs || EMPTY_OBJ), + vnode, + attrs, + render.inheritAttrs + )) + mount(subTree, container, parentComponent, isSVG, endNode) + vnode.el = subTree.el as RenderNode + } + function mountText( vnode: VNode, container: RenderNode | null, diff --git a/packages/core/src/flags.ts b/packages/core/src/flags.ts index 787ca66a..159bd9a6 100644 --- a/packages/core/src/flags.ts +++ b/packages/core/src/flags.ts @@ -3,22 +3,21 @@ export const enum VNodeFlags { ELEMENT_HTML = 1, ELEMENT_SVG = 1 << 1, - COMPONENT_UNKNOWN = 1 << 2, - COMPONENT_STATEFUL_NORMAL = 1 << 3, - COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE = 1 << 4, - COMPONENT_STATEFUL_KEPT_ALIVE = 1 << 5, - COMPONENT_FUNCTIONAL = 1 << 6, + COMPONENT_STATEFUL_NORMAL = 1 << 2, + COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE = 1 << 3, + COMPONENT_STATEFUL_KEPT_ALIVE = 1 << 4, + COMPONENT_FUNCTIONAL = 1 << 5, - TEXT = 1 << 7, - FRAGMENT = 1 << 8, - PORTAL = 1 << 9, + TEXT = 1 << 6, + FRAGMENT = 1 << 7, + PORTAL = 1 << 8, // masks (only use for bitwise checks, do not use equal checks or assign) ELEMENT = ELEMENT_HTML | ELEMENT_SVG, COMPONENT_STATEFUL = COMPONENT_STATEFUL_NORMAL | COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE | COMPONENT_STATEFUL_KEPT_ALIVE, - COMPONENT = COMPONENT_UNKNOWN | COMPONENT_STATEFUL | COMPONENT_FUNCTIONAL + COMPONENT = COMPONENT_STATEFUL | COMPONENT_FUNCTIONAL } export const enum ChildrenFlags {