test: tests for lifecycle api

packages/runtime-core/src/apiLifecycle.ts

@@ -2,7 +2,7 @@ import { ComponentInstance, LifecycleHooks, currentInstance } from './component'
 
 function injectHook(
   name: keyof LifecycleHooks,
-  hook: () => void,
+  hook: Function,
   target: ComponentInstance | null | void = currentInstance
 ) {
   if (target) {
@@ -14,41 +14,38 @@ function injectHook(
   }
 }
 
-export function onBeforeMount(hook: () => void, target?: ComponentInstance) {
+export function onBeforeMount(hook: Function, target?: ComponentInstance) {
   injectHook('bm', hook, target)
 }
 
-export function onMounted(hook: () => void, target?: ComponentInstance) {
+export function onMounted(hook: Function, target?: ComponentInstance) {
   injectHook('m', hook, target)
 }
 
-export function onBeforeUpdate(hook: () => void, target?: ComponentInstance) {
+export function onBeforeUpdate(hook: Function, target?: ComponentInstance) {
   injectHook('bu', hook, target)
 }
 
-export function onUpdated(hook: () => void, target?: ComponentInstance) {
+export function onUpdated(hook: Function, target?: ComponentInstance) {
   injectHook('u', hook, target)
 }
 
-export function onBeforeUnmount(hook: () => void, target?: ComponentInstance) {
+export function onBeforeUnmount(hook: Function, target?: ComponentInstance) {
   injectHook('bum', hook, target)
 }
 
-export function onUnmounted(hook: () => void, target?: ComponentInstance) {
+export function onUnmounted(hook: Function, target?: ComponentInstance) {
   injectHook('um', hook, target)
 }
 
-export function onRenderTriggered(
-  hook: () => void,
-  target?: ComponentInstance
-) {
+export function onRenderTriggered(hook: Function, target?: ComponentInstance) {
   injectHook('rtg', hook, target)
 }
 
-export function onRenderTracked(hook: () => void, target?: ComponentInstance) {
+export function onRenderTracked(hook: Function, target?: ComponentInstance) {
   injectHook('rtc', hook, target)
 }
 
-export function onErrorCaptured(hook: () => void, target?: ComponentInstance) {
+export function onErrorCaptured(hook: Function, target?: ComponentInstance) {
   injectHook('ec', hook, target)
 }

packages/runtime-core/src/component.ts

@@ -162,14 +162,14 @@ export function createComponent(options: any) {
 }
 
 export function createComponentInstance(
-  type: any,
+  vnode: VNode,
   parent: ComponentInstance | null
 ): ComponentInstance {
   const instance = {
-    type,
+    vnode,
     parent,
+    type: vnode.type as any,
     root: null as any, // set later so it can point to itself
-    vnode: null as any,
     next: null,
     subTree: null as any,
     update: null as any,

packages/runtime-core/src/createRenderer.ts

@@ -565,21 +565,25 @@ export function createRenderer(options: RendererOptions) {
     parentComponent: ComponentInstance | null,
     isSVG: boolean
   ) {
-    const Component = initialVNode.type as any
     const instance: ComponentInstance = (initialVNode.component = createComponentInstance(
-      Component,
+      initialVNode,
       parentComponent
     ))
+
+    // resolve props and slots for setup context
+    const propsOptions = (initialVNode.type as any).props
+    resolveProps(instance, initialVNode.props, propsOptions)
+    resolveSlots(instance, initialVNode.children)
+
+    // setup stateful logic
+    if (initialVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+      setupStatefulComponent(instance)
+    }
+
+    // create reactive effect for rendering
+    let mounted = false
     instance.update = effect(function componentEffect() {
-      if (instance.vnode === null) {
-        // mountComponent
-        instance.vnode = initialVNode
-        resolveProps(instance, initialVNode.props, Component.props)
-        resolveSlots(instance, initialVNode.children)
-        // setup stateful
-        if (initialVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
-          setupStatefulComponent(instance)
-        }
+      if (!mounted) {
         const subTree = (instance.subTree = renderComponentRoot(instance))
         // beforeMount hook
         if (instance.bm !== null) {
@@ -591,6 +595,7 @@ export function createRenderer(options: RendererOptions) {
         if (instance.m !== null) {
           queuePostFlushCb(instance.m)
         }
+        mounted = true
       } else {
         // updateComponent
         // This is triggered by mutation of component's own state (next: null)
@@ -601,7 +606,7 @@ export function createRenderer(options: RendererOptions) {
           next.component = instance
           instance.vnode = next
           instance.next = null
-          resolveProps(instance, next.props, Component.props)
+          resolveProps(instance, next.props, propsOptions)
           resolveSlots(instance, next.children)
         }
         const prevTree = instance.subTree