feat: lifecycle hooks of dynamic sub-components

Author: LittleSound

Diff for: packages/runtime-vapor/__tests__/apiLifecycle.spec.ts

@@ -136,7 +136,7 @@ describe('api: lifecycle hooks', () => {
   it('onBeforeUnmount', async () => {
     const toggle = ref(true)
     const fn = vi.fn(() => {
-      expect(host.innerHTML).toBe('<div></div>')
+      expect(host.innerHTML).toBe('<div></div><!--if-->')
     })
     const { render, host } = define({
       setup() {
@@ -172,7 +172,7 @@ describe('api: lifecycle hooks', () => {
   it('onUnmounted', async () => {
     const toggle = ref(true)
     const fn = vi.fn(() => {
-      expect(host.innerHTML).toBe('<div></div>')
+      expect(host.innerHTML).toBe('<!--if-->')
     })
     const { render, host } = define({
       setup() {
@@ -208,7 +208,7 @@ describe('api: lifecycle hooks', () => {
   it('onBeforeUnmount in onMounted', async () => {
     const toggle = ref(true)
     const fn = vi.fn(() => {
-      expect(host.innerHTML).toBe('<div></div>')
+      expect(host.innerHTML).toBe('<div></div><!--if-->')
     })
     const { render, host } = define({
       setup() {

Diff for: packages/runtime-vapor/__tests__/component.spec.ts

@@ -96,9 +96,9 @@ describe('component', () => {
       'root beforeMount',
       'mid beforeMount',
       'child beforeMount',
-      'child mounted',
-      'mid mounted',
       'root mounted',
+      'mid mounted',
+      'child mounted',
     ])
 
     calls.length = 0
@@ -134,8 +134,8 @@ describe('component', () => {
       'root beforeUpdate',
       'mid beforeUnmount',
       'child beforeUnmount',
-      'child unmounted',
       'mid unmounted',
+      'child unmounted',
       'root updated',
     ])
 
@@ -150,8 +150,8 @@ describe('component', () => {
       'child created',
       'mid beforeMount',
       'child beforeMount',
-      'child mounted',
       'mid mounted',
+      'child mounted',
       'root updated',
     ])
   })

Diff for: packages/runtime-vapor/src/apiCreateComponent.ts

@@ -1,12 +1,21 @@
 import {
   type Component,
   createComponentInstance,
-  currentInstance,
+  setCurrentInstance,
 } from './component'
 import { setupComponent } from './apiRender'
 import type { RawProps } from './componentProps'
 import type { RawSlots } from './componentSlots'
 import { withAttrs } from './componentAttrs'
+import { getCurrentScope } from '@vue/reactivity'
+import type { BlockEffectScope } from './blockEffectScope'
+import {
+  type Directive,
+  type DirectiveHookName,
+  invokeDirectiveHook,
+} from './directives'
+import { VaporLifecycleHooks } from './enums'
+import { NOOP, invokeArrayFns } from '@vue/shared'
 
 export function createComponent(
   comp: Component,
@@ -15,7 +24,7 @@ export function createComponent(
   singleRoot: boolean = false,
   once: boolean = false,
 ) {
-  const current = currentInstance!
+  const parentScope = getCurrentScope() as BlockEffectScope
   const instance = createComponentInstance(
     comp,
     singleRoot ? withAttrs(rawProps) : rawProps,
@@ -24,8 +33,58 @@ export function createComponent(
   )
   setupComponent(instance, singleRoot)
 
-  // register sub-component with current component for lifecycle management
-  current.comps.add(instance)
+  const directiveBindingsMap = (parentScope.dirs ||= new Map())
+  const dir: Directive = {
+    beforeMount: passDirectives(
+      VaporLifecycleHooks.BEFORE_MOUNT,
+      'beforeMount',
+    ),
+    mounted: passDirectives(
+      VaporLifecycleHooks.MOUNTED,
+      'mounted',
+      () => (instance.isMounted = true),
+      true,
+    ),
+    beforeUnmount: passDirectives(
+      VaporLifecycleHooks.BEFORE_UNMOUNT,
+      'beforeUnmount',
+    ),
+    unmounted: passDirectives(
+      VaporLifecycleHooks.UNMOUNTED,
+      'unmounted',
+      () => (instance.isUnmounted = true),
+      true,
+    ),
+  }
+  directiveBindingsMap.set(instance, [
+    { dir, instance, value: null, oldValue: undefined },
+  ])
 
   return instance
+
+  function passDirectives(
+    lifecycle: VaporLifecycleHooks,
+    directive: DirectiveHookName,
+    cb = NOOP,
+    reverse?: boolean,
+  ) {
+    const hooks = reverse
+      ? [cb, callDirHooks, callLifecycleHooks]
+      : [callLifecycleHooks, callDirHooks, cb]
+
+    return () => invokeArrayFns(hooks)
+
+    function callDirHooks() {
+      invokeDirectiveHook(instance, directive, instance.scope)
+    }
+    function callLifecycleHooks() {
+      // lifecycle hooks may be mounted halfway.
+      const lifecycleHooks = instance[lifecycle]
+      if (lifecycleHooks && lifecycleHooks.length) {
+        const reset = setCurrentInstance(instance)
+        instance.scope.run(() => invokeArrayFns(lifecycleHooks))
+        reset()
+      }
+    }
+  }
 }

Diff for: packages/runtime-vapor/src/apiLifecycle.ts

@@ -24,9 +24,6 @@ const injectHook = (
     const wrappedHook =
       hook.__weh ||
       (hook.__weh = (...args: unknown[]) => {
-        if (target.isUnmounted) {
-          return
-        }
         pauseTracking()
         const reset = setCurrentInstance(target)
         const res = target.scope.run(() =>