feat(runtime-vapor): onMounted and onUnMounted hook

packages/runtime-vapor/src/apiLifecycle.ts

@@ -0,0 +1,65 @@
+import { pauseTracking, resetTracking } from '@vue/reactivity'
+import {
+  ComponentInternalInstance,
+  currentInstance,
+  setCurrentInstance,
+} from './component'
+
+export enum LifecycleHooks {
+  BEFORE_CREATE = 'bc',
+  CREATED = 'c',
+  BEFORE_MOUNT = 'bm',
+  MOUNTED = 'm',
+  BEFORE_UPDATE = 'bu',
+  UPDATED = 'u',
+  BEFORE_UNMOUNT = 'bum',
+  UNMOUNTED = 'um',
+  DEACTIVATED = 'da',
+  ACTIVATED = 'a',
+  RENDER_TRIGGERED = 'rtg',
+  RENDER_TRACKED = 'rtc',
+  ERROR_CAPTURED = 'ec',
+  SERVER_PREFETCH = 'sp',
+}
+export const injectHook = (
+  type: LifecycleHooks,
+  hook: Function & { __weh?: Function },
+  target: ComponentInternalInstance | null = currentInstance,
+  prepend: boolean = false,
+) => {
+  if (target) {
+    const hooks = target[type] || (target[type] = [])
+    const wrappedHook =
+      hook.__weh ||
+      (hook.__weh = (...args: unknown[]) => {
+        if (target.isUnMounted) {
+          return
+        }
+        pauseTracking()
+        setCurrentInstance(target)
+        // TODO: call error handling
+        const res = hook(...args)
+        resetTracking()
+        return res
+      })
+    if (prepend) {
+      hooks.unshift(wrappedHook)
+    } else {
+      hooks.push(wrappedHook)
+    }
+    return wrappedHook
+  } else if (__DEV__) {
+    // TODO: warn need
+  }
+}
+export const createHook =
+  <T extends Function = () => any>(lifecycle: LifecycleHooks) =>
+  (hook: T, target: ComponentInternalInstance | null = currentInstance) =>
+    injectHook(lifecycle, (...args: unknown[]) => hook(...args), target)
+
+export const onMounted = createHook(LifecycleHooks.MOUNTED)
+export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
+export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
+export const onUpdated = createHook(LifecycleHooks.UPDATED)
+export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
+export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)

packages/runtime-vapor/src/component.ts

@@ -2,6 +2,7 @@ import { type Ref, EffectScope, ref } from '@vue/reactivity'
 import type { Block } from './render'
 import type { DirectiveBinding } from './directive'
 import type { Data } from '@vue/shared'
+import { LifecycleHooks } from './apiLifecycle'
 
 export type SetupFn = (props: any, ctx: any) => Block | Data
 export type FunctionalComponent = SetupFn & {
@@ -11,7 +12,7 @@ export interface ObjectComponent {
   setup: SetupFn
   render(ctx: any): Block
 }
-
+type LifecycleHook<TFn = Function> = TFn[] | null
 export interface ComponentInternalInstance {
   uid: number
   container: ParentNode
@@ -20,11 +21,69 @@ export interface ComponentInternalInstance {
 
   component: FunctionalComponent | ObjectComponent
   get isMounted(): boolean
+  get isUnMounted(): boolean
   isMountedRef: Ref<boolean>
+  isUnMountedRef: Ref<boolean>
 
   /** directives */
   dirs: Map<Node, DirectiveBinding[]>
   // TODO: registory of provides, appContext, lifecycles, ...
+  /**
+   * @internal
+   */
+  [LifecycleHooks.BEFORE_CREATE]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.CREATED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.BEFORE_MOUNT]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.MOUNTED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.BEFORE_UPDATE]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.UPDATED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.BEFORE_UNMOUNT]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.UNMOUNTED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.RENDER_TRACKED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.RENDER_TRIGGERED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.ACTIVATED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.DEACTIVATED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.ERROR_CAPTURED]: LifecycleHook
+  /**
+   * @internal
+   */
+  [LifecycleHooks.SERVER_PREFETCH]: LifecycleHook<() => Promise<unknown>>
 }
 
 // TODO
@@ -46,20 +105,81 @@ export const createComponentInstance = (
   component: ObjectComponent | FunctionalComponent,
 ): ComponentInternalInstance => {
   const isMountedRef = ref(false)
+  const isUnMountedRef = ref(false)
   const instance: ComponentInternalInstance = {
     uid: uid++,
     block: null,
-    container: null!, // set on mount
+    container: null!,
     scope: new EffectScope(true /* detached */)!,
 
     component,
     get isMounted() {
       return isMountedRef.value
     },
+    get isUnMounted() {
+      return isUnMountedRef.value
+    },
     isMountedRef,
+    isUnMountedRef,
 
     dirs: new Map(),
     // TODO: registory of provides, appContext, lifecycles, ...
+    /**
+     * @internal
+     */
+    [LifecycleHooks.BEFORE_CREATE]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.CREATED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.BEFORE_MOUNT]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.MOUNTED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.BEFORE_UPDATE]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.UPDATED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.BEFORE_UNMOUNT]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.UNMOUNTED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.RENDER_TRACKED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.RENDER_TRIGGERED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.ACTIVATED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.DEACTIVATED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.ERROR_CAPTURED]: null,
+    /**
+     * @internal
+     */
+    [LifecycleHooks.SERVER_PREFETCH]: null,
   }
   return instance
 }

packages/runtime-vapor/src/index.ts

@@ -44,3 +44,4 @@ export * from './scheduler'
 export * from './directive'
 export * from './dom'
 export * from './directives/vShow'
+export * from './apiLifecycle'

packages/runtime-vapor/src/render.ts

@@ -9,6 +9,7 @@ import {
 } from './component'
 import { invokeDirectiveHook } from './directive'
 import { insert, remove } from './dom'
+import { invokeArrayFns } from '@vue/shared'
 
 export type Block = Node | Fragment | Block[]
 export type ParentBlock = ParentNode | Node[]
@@ -30,7 +31,6 @@ export function normalizeContainer(container: string | ParentNode): ParentNode {
     ? (document.querySelector(container) as ParentNode)
     : container
 }
-
 export function mountComponent(
   instance: ComponentInternalInstance,
   container: ParentNode,
@@ -58,7 +58,10 @@ export function mountComponent(
   insert(block, instance.container)
   instance.isMountedRef.value = true
   invokeDirectiveHook(instance, 'mounted')
-
+  const { m } = instance
+  if (m) {
+    invokeArrayFns(m)
+  }
   // TODO: lifecycle hooks (mounted, ...)
   // const { m } = instance
   // m && invoke(m)
@@ -73,7 +76,10 @@ export function unmountComponent(instance: ComponentInternalInstance) {
   instance.isMountedRef.value = false
   invokeDirectiveHook(instance, 'unmounted')
   unsetCurrentInstance()
-
+  const { um } = instance
+  if (um) {
+    invokeArrayFns(um)
+  }
   // TODO: lifecycle hooks (unmounted, ...)
   // const { um } = instance
   // um && invoke(um)