feat: directive lifecycle hooks in v-for/v-if

Author: LittleSound

packages/runtime-vapor/__tests__/for.spec.ts

@@ -1,4 +1,15 @@
-import { createFor, nextTick, ref, renderEffect } from '../src'
+import { NOOP } from '@vue/shared'
+import {
+  type Directive,
+  children,
+  createFor,
+  nextTick,
+  ref,
+  renderEffect,
+  template,
+  unmountComponent,
+  withDirectives,
+} from '../src'
 import { makeRender } from './_utils'
 
 const define = makeRender()
@@ -184,4 +195,86 @@ describe('createFor', () => {
     await nextTick()
     expect(host.innerHTML).toBe('<!--for-->')
   })
+
+  test('should work with directive hooks', async () => {
+    const calls: string[] = []
+    const list = ref([0])
+    const update = ref(0)
+    const add = () => list.value.push(list.value.length)
+
+    const vDirective: Directive = {
+      created: (el, { value }) => calls.push(`${value} created`),
+      beforeMount: (el, { value }) => calls.push(`${value} beforeMount`),
+      mounted: (el, { value }) => calls.push(`${value} mounted`),
+      beforeUpdate: (el, { value }) => calls.push(`${value} beforeUpdate`),
+      updated: (el, { value }) => calls.push(`${value} updated`),
+      beforeUnmount: (el, { value }) => calls.push(`${value} beforeUnmount`),
+      unmounted: (el, { value }) => calls.push(`${value} unmounted`),
+    }
+
+    const t0 = template('<p></p>')
+    const { instance } = define(() => {
+      const n1 = createFor(
+        () => list.value,
+        block => {
+          const n2 = t0()
+          const n3 = children(n2, 0)
+          withDirectives(n3, [[vDirective, () => block.s[0]]])
+          return [n2, NOOP]
+        },
+      )
+      renderEffect(() => update.value)
+      return [n1]
+    }).render()
+
+    await nextTick()
+    // `${item index} ${hook name}`
+    expect(calls).toEqual(['0 created', '0 beforeMount', '0 mounted'])
+    calls.length = 0
+
+    add()
+    await nextTick()
+    expect(calls).toEqual([
+      '0 beforeUpdate',
+      '1 created',
+      '1 beforeMount',
+      '0 updated',
+      '1 mounted',
+    ])
+    calls.length = 0
+
+    list.value.reverse()
+    await nextTick()
+    expect(calls).lengthOf(4)
+    expect(calls[0]).includes('beforeUpdate')
+    expect(calls[1]).includes('beforeUpdate')
+    expect(calls[2]).includes('updated')
+    expect(calls[3]).includes('updated')
+    list.value.reverse()
+    await nextTick()
+    calls.length = 0
+
+    update.value++
+    await nextTick()
+    expect(calls).toEqual([
+      '0 beforeUpdate',
+      '1 beforeUpdate',
+      '0 updated',
+      '1 updated',
+    ])
+    calls.length = 0
+
+    list.value.pop()
+    await nextTick()
+    expect(calls).toEqual([
+      '0 beforeUpdate',
+      '1 beforeUnmount',
+      '0 updated',
+      '1 unmounted',
+    ])
+    calls.length = 0
+
+    unmountComponent(instance)
+    expect(calls).toEqual(['0 beforeUnmount', '0 unmounted'])
+  })
 })

packages/runtime-vapor/__tests__/if.spec.ts

@@ -1,11 +1,14 @@
 import {
+  children,
   createIf,
   insert,
   nextTick,
   ref,
   renderEffect,
   setText,
   template,
+  unmountComponent,
+  withDirectives,
 } from '../src'
 import type { Mock } from 'vitest'
 import { makeRender } from './_utils'
@@ -124,4 +127,97 @@ describe('createIf', () => {
     await nextTick()
     expect(host.innerHTML).toBe('<!--if-->')
   })
+
+  test('should work with directive hooks', async () => {
+    const calls: string[] = []
+    const show1 = ref(true)
+    const show2 = ref(true)
+    const update = ref(0)
+    const vDirective: any = {
+      created: (el: any, { value }: any) => calls.push(`${value} created`),
+      beforeMount: (el: any, { value }: any) =>
+        calls.push(`${value} beforeMount`),
+      mounted: (el: any, { value }: any) => calls.push(`${value} mounted`),
+      beforeUpdate: (el: any, { value }: any) =>
+        calls.push(`${value} beforeUpdate`),
+      updated: (el: any, { value }: any) => calls.push(`${value} updated`),
+      beforeUnmount: (el: any, { value }: any) =>
+        calls.push(`${value} beforeUnmount`),
+      unmounted: (el: any, { value }: any) => calls.push(`${value} unmounted`),
+    }
+
+    const t0 = template('<p></p>')
+    const { instance } = define(() => {
+      const n1 = createIf(
+        () => show1.value,
+        () => {
+          const n2 = t0()
+          withDirectives(children(n2, 0), [
+            [vDirective, () => (update.value, '1')],
+          ])
+          return n2
+        },
+        () =>
+          createIf(
+            () => show2.value,
+            () => {
+              const n2 = t0()
+              withDirectives(children(n2, 0), [[vDirective, () => '2']])
+              return n2
+            },
+            () => {
+              const n2 = t0()
+              withDirectives(children(n2, 0), [[vDirective, () => '3']])
+              return n2
+            },
+          ),
+      )
+      return [n1]
+    }).render()
+
+    await nextTick()
+    expect(calls).toEqual(['1 created', '1 beforeMount', '1 mounted'])
+    calls.length = 0
+
+    show1.value = false
+    await nextTick()
+    expect(calls).toEqual([
+      '1 beforeUnmount',
+      '2 created',
+      '2 beforeMount',
+      '1 unmounted',
+      '2 mounted',
+    ])
+    calls.length = 0
+
+    show2.value = false
+    await nextTick()
+    expect(calls).toEqual([
+      '2 beforeUnmount',
+      '3 created',
+      '3 beforeMount',
+      '2 unmounted',
+      '3 mounted',
+    ])
+    calls.length = 0
+
+    show1.value = true
+    await nextTick()
+    expect(calls).toEqual([
+      '3 beforeUnmount',
+      '1 created',
+      '1 beforeMount',
+      '3 unmounted',
+      '1 mounted',
+    ])
+    calls.length = 0
+
+    update.value++
+    await nextTick()
+    expect(calls).toEqual(['1 beforeUpdate', '1 updated'])
+    calls.length = 0
+
+    unmountComponent(instance)
+    expect(calls).toEqual(['1 beforeUnmount', '1 unmounted'])
+  })
 })

packages/runtime-vapor/src/directives.ts

@@ -1,26 +1,34 @@
-import { NOOP, isFunction } from '@vue/shared'
-import { type ComponentInternalInstance, currentInstance } from './component'
-import { pauseTracking, resetTracking } from '@vue/reactivity'
+import { isFunction } from '@vue/shared'
+import { type ComponentInternalInstance, getCurrentInstance } from './component'
+import {
+  type EffectScope,
+  getCurrentScope,
+  pauseTracking,
+  resetTracking,
+  traverse,
+} from '@vue/reactivity'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
-import { renderWatch } from './renderWatch'
+import { renderEffect } from './renderWatch'
 
 export type DirectiveModifiers<M extends string = string> = Record<M, boolean>
 
-export interface DirectiveBinding<V = any, M extends string = string> {
+export interface DirectiveBinding<T = any, V = any, M extends string = string> {
   instance: ComponentInternalInstance
   source?: () => V
   value: V
   oldValue: V | null
   arg?: string
   modifiers?: DirectiveModifiers<M>
-  dir: ObjectDirective<any, V>
+  dir: ObjectDirective<T, V, M>
 }
 
+export type DirectiveBindingsMap = Map<Node, DirectiveBinding[]>
+
 export type DirectiveHook<
   T = any | null,
   V = any,
   M extends string = string,
-> = (node: T, binding: DirectiveBinding<V, M>) => void
+> = (node: T, binding: DirectiveBinding<T, V, M>) => void
 
 // create node -> `created` -> node operation -> `beforeMount` -> node mounted -> `mounted`
 // effect update -> `beforeUpdate` -> node updated -> `updated`
@@ -37,7 +45,7 @@ export type ObjectDirective<T = any, V = any, M extends string = string> = {
   [K in DirectiveHookName]?: DirectiveHook<T, V, M> | undefined
 } & {
   /** Watch value deeply */
-  deep?: boolean
+  deep?: boolean | number
 }
 
 export type FunctionDirective<
@@ -62,18 +70,39 @@ export type DirectiveArguments = Array<
     ]
 >
 
+const bindingsWithScope = new WeakMap<EffectScope, DirectiveBindingsMap>()
+
+export function getDirectivesMap(
+  scope = getCurrentScope(),
+): DirectiveBindingsMap | undefined {
+  const instance = getCurrentInstance()
+  if (instance && instance.scope === scope) {
+    return instance.dirs
+  } else {
+    return scope && bindingsWithScope.get(scope)
+  }
+}
+
+export function setDirectivesWithScopeMap(
+  scope: EffectScope,
+  bindings: DirectiveBindingsMap,
+) {
+  bindingsWithScope.set(scope, bindings)
+}
+
 export function withDirectives<T extends Node>(
   node: T,
   directives: DirectiveArguments,
 ): T {
-  if (!currentInstance) {
+  const instance = getCurrentInstance()
+  const parentBindings = getDirectivesMap()
+  if (!instance || !parentBindings) {
     // TODO warning
     return node
   }
 
-  const instance = currentInstance
-  if (!instance.dirs.has(node)) instance.dirs.set(node, [])
-  const bindings = instance.dirs.get(node)!
+  if (!parentBindings.has(node)) parentBindings.set(node, [])
+  let bindings = parentBindings.get(node)!
 
   for (const directive of directives) {
     let [dir, source, arg, modifiers] = directive
@@ -100,8 +129,13 @@ export function withDirectives<T extends Node>(
 
     // register source
     if (source) {
+      if (dir.deep) {
+        const deep = dir.deep === true ? undefined : dir.deep
+        const baseSource = source
+        source = () => traverse(baseSource(), deep)
+      }
       // callback will be overridden by middleware
-      renderWatch(source, NOOP, { deep: dir.deep })
+      renderEffect(source)
     }
   }
 
@@ -111,13 +145,12 @@ export function withDirectives<T extends Node>(
 export function invokeDirectiveHook(
   instance: ComponentInternalInstance | null,
   name: DirectiveHookName,
-  nodes?: IterableIterator<Node>,
+  directives: DirectiveBindingsMap,
 ) {
   if (!instance) return
-  nodes = nodes || instance.dirs.keys()
-  for (const node of nodes) {
-    const directives = instance.dirs.get(node) || []
-    for (const binding of directives) {
+  const iterator = directives.entries()
+  for (const [node, bindings] of iterator) {
+    for (const binding of bindings) {
       callDirectiveHook(node, binding, instance, name)
     }
   }