refactor: mountComponent

diff --git a/packages/core/src/createRenderer.ts b/packages/core/src/createRenderer.ts
index 1e0e107c454491d27dfd2e2f40d232e88f4f8b9e..4eb75d0e3a5b037fbe0edc2d65d4146009a4e7ab 100644 (file)
--- 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 787ca66a4b5b369e8f240345bdc45725123dda94..159bd9a6e0948fe4d576c788f5d08a9a95b4e075 100644 (file)
--- 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 {