feat: directive lifecycle hooks in v-for, v-if and component

packages/reactivity/src/effectScope.ts

@@ -34,13 +34,13 @@ export class EffectScope {
  */
  private index: number | undefined
 
- constructor(public detached = false) {
- this.parent = activeEffectScope
- if (!detached && activeEffectScope) {
-  this.index =
-  (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
-  this,
-  ) - 1
+ constructor(
+ public detached = false,
+ parent = activeEffectScope,
+ ) {
+ this.parent = parent
+ if (!detached && parent) {
+ this.index = (parent.scopes || (parent.scopes = [])).push(this) - 1
  }
  }
 

packages/runtime-vapor/__tests__/directives/vShow.spec.ts

@@ -77,7 +77,7 @@ describe('directive: v-show', () => {
  }).render()
 
  expect(host.innerHTML).toBe('<button>toggle</button><div>child</div>')
- expect(instance.dirs.get(n0)![0].dir).toBe(vShow)
+ expect(instance.scope.dirs!.get(n0)![0].dir).toBe(vShow)
 
  const btn = host.querySelector('button')
  btn?.click()

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

@@ -1,5 +1,16 @@
-import { createFor, nextTick, ref, renderEffect } from '../src'
+import { NOOP } from '@vue/shared'
+import {
+ type Directive,
+ children,
+ createFor,
+ nextTick,
+ ref,
+ renderEffect,
+ template,
+ withDirectives,
+} from '../src'
 import { makeRender } from './_utils'
+import { unmountComponent } from '../src/apiRender'
 
 const define = makeRender()
 
@@ -184,4 +195,92 @@ 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 spySrcFn = vi.fn(() => list.value)
+
+ 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(spySrcFn, 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
+ expect(spySrcFn).toHaveBeenCalledTimes(1)
+
+ add()
+ await nextTick()
+ expect(calls).toEqual([
+ '0 beforeUpdate',
+ '1 created',
+ '1 beforeMount',
+ '0 updated',
+ '1 mounted',
+ ])
+ calls.length = 0
+ expect(spySrcFn).toHaveBeenCalledTimes(2)
+
+ list.value.reverse()
+ await nextTick()
+ expect(calls).toEqual([
+ '1 beforeUpdate',
+ '0 beforeUpdate',
+ '1 updated',
+ '0 updated',
+ ])
+ expect(spySrcFn).toHaveBeenCalledTimes(3)
+ list.value.reverse()
+ await nextTick()
+ calls.length = 0
+ expect(spySrcFn).toHaveBeenCalledTimes(4)
+
+ update.value++
+ await nextTick()
+ expect(calls).toEqual([
+ '0 beforeUpdate',
+ '1 beforeUpdate',
+ '0 updated',
+ '1 updated',
+ ])
+ calls.length = 0
+ expect(spySrcFn).toHaveBeenCalledTimes(4)
+
+ list.value.pop()
+ await nextTick()
+ expect(calls).toEqual([
+ '0 beforeUpdate',
+ '1 beforeUnmount',
+ '0 updated',
+ '1 unmounted',
+ ])
+ calls.length = 0
+ expect(spySrcFn).toHaveBeenCalledTimes(5)
+
+ unmountComponent(instance)
+ expect(calls).toEqual(['0 beforeUnmount', '0 unmounted'])
+ expect(spySrcFn).toHaveBeenCalledTimes(5)
+ })
 })

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

@@ -1,14 +1,17 @@
 import {
+ children,
  createIf,
  insert,
  nextTick,
  ref,
  renderEffect,
  setText,
  template,
+ withDirectives,
 } from '../src'
 import type { Mock } from 'vitest'
 import { makeRender } from './_utils'
+import { unmountComponent } from '../src/apiRender'
 
 const define = makeRender()
 
@@ -24,6 +27,8 @@ describe('createIf', () => {
  let spyElseFn: Mock<any, any>
  const count = ref(0)
 
+ const spyConditionFn = vi.fn(() => count.value)
+
  // templates can be reused through caching.
  const t0 = template('<div></div>')
  const t1 = template('<p></p>')
@@ -34,7 +39,7 @@ describe('createIf', () => {
 
  insert(
  createIf(
- () => count.value,
+ spyConditionFn,
  // v-if
  (spyIfFn ||= vi.fn(() => {
  const n2 = t1()
@@ -55,24 +60,28 @@ describe('createIf', () => {
  }).render()
 
  expect(host.innerHTML).toBe('<div><p>zero</p><!--if--></div>')
+ expect(spyConditionFn).toHaveBeenCalledTimes(1)
  expect(spyIfFn!).toHaveBeenCalledTimes(0)
  expect(spyElseFn!).toHaveBeenCalledTimes(1)
 
  count.value++
  await nextTick()
  expect(host.innerHTML).toBe('<div><p>1</p><!--if--></div>')
+ expect(spyConditionFn).toHaveBeenCalledTimes(2)
  expect(spyIfFn!).toHaveBeenCalledTimes(1)
  expect(spyElseFn!).toHaveBeenCalledTimes(1)
 
  count.value++
  await nextTick()
  expect(host.innerHTML).toBe('<div><p>2</p><!--if--></div>')
+ expect(spyConditionFn).toHaveBeenCalledTimes(3)
  expect(spyIfFn!).toHaveBeenCalledTimes(1)
  expect(spyElseFn!).toHaveBeenCalledTimes(1)
 
  count.value = 0
  await nextTick()
  expect(host.innerHTML).toBe('<div><p>zero</p><!--if--></div>')
+ expect(spyConditionFn).toHaveBeenCalledTimes(4)
  expect(spyIfFn!).toHaveBeenCalledTimes(1)
  expect(spyElseFn!).toHaveBeenCalledTimes(2)
  })
@@ -124,4 +133,113 @@ 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 spyConditionFn1 = vi.fn(() => show1.value)
+ const spyConditionFn2 = vi.fn(() => show2.value)
+
+ 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(
+ spyConditionFn1,
+ () => {
+ const n2 = t0()
+ withDirectives(children(n2, 0), [
+ [vDirective, () => (update.value, '1')],
+ ])
+ return n2
+ },
+ () =>
+ createIf(
+ spyConditionFn2,
+ () => {
+ 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
+ expect(spyConditionFn1).toHaveBeenCalledTimes(1)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(0)
+
+ show1.value = false
+ await nextTick()
+ expect(calls).toEqual([
+ '1 beforeUnmount',
+ '2 created',
+ '2 beforeMount',
+ '1 unmounted',
+ '2 mounted',
+ ])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(2)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(1)
+
+ show2.value = false
+ await nextTick()
+ expect(calls).toEqual([
+ '2 beforeUnmount',
+ '3 created',
+ '3 beforeMount',
+ '2 unmounted',
+ '3 mounted',
+ ])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(2)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+
+ show1.value = true
+ await nextTick()
+ expect(calls).toEqual([
+ '3 beforeUnmount',
+ '1 created',
+ '1 beforeMount',
+ '3 unmounted',
+ '1 mounted',
+ ])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(3)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+
+ update.value++
+ await nextTick()
+ expect(calls).toEqual(['1 beforeUpdate', '1 updated'])
+ calls.length = 0
+ expect(spyConditionFn1).toHaveBeenCalledTimes(3)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+
+ unmountComponent(instance)
+ expect(calls).toEqual(['1 beforeUnmount', '1 unmounted'])
+ expect(spyConditionFn1).toHaveBeenCalledTimes(3)
+ expect(spyConditionFn2).toHaveBeenCalledTimes(2)
+ })
 })