refactor!: drop custom directives (#274)

Author: sxzz

benchmark/tsconfig.json

@@ -19,6 +19,7 @@
     "paths": {
       "vue": ["../packages/vue/src"],
       "@vue/vapor": ["../packages/vue-vapor/src"],
+      "vue/vapor": ["../packages/vue-vapor/src"],
       "@vue/*": ["../packages/*/src"]
     }
   },

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

@@ -153,7 +153,7 @@ describe('api: createVaporApp', () => {
     expect(host.innerHTML).toBe(`foobar!barbaz!`)
   })
 
-  test('directive', () => {
+  test.todo('directive', () => {
     const spy1 = vi.fn()
     const spy2 = vi.fn()
 

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

@@ -19,7 +19,7 @@ import { makeRender } from './_utils'
 
 const define = makeRender()
 
-describe('directives', () => {
+describe.todo('directives', () => {
   it('should work', async () => {
     const count = ref(0)
 

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

@@ -15,7 +15,7 @@ import { makeRender } from '../_utils'
 
 const define = makeRender()
 
-describe('directives', () => {
+describe.todo('directives', () => {
   it('should work', async () => {
     const count = ref(0)
 

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

@@ -27,7 +27,7 @@ const setDOMProps = (el: any, props: Array<[key: string, value: any]>) => {
   })
 }
 
-describe('directive: v-model', () => {
+describe.todo('directive: v-model', () => {
   test('should work with text input', async () => {
     const spy = vi.fn()
 

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

@@ -28,7 +28,7 @@ const createDemo = (defaultValue: boolean) =>
     on(n1 as HTMLElement, 'click', () => handleClick)
     return n0
   })
-describe('directive: v-show', () => {
+describe.todo('directive: v-show', () => {
   test('basic', async () => {
     const { host } = createDemo(true).render()
     const btn = host.querySelector('button')

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

@@ -194,7 +194,7 @@ describe('createFor', () => {
     expect(host.innerHTML).toBe('<!--for-->')
   })
 
-  test('should work with directive hooks', async () => {
+  test.fails('should work with directive hooks', async () => {
     const calls: string[] = []
     const list = ref([0])
     const update = ref(0)

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

@@ -134,7 +134,7 @@ describe('createIf', () => {
     expect(host.innerHTML).toBe('<!--if-->')
   })
 
-  test('should work with directive hooks', async () => {
+  test.todo('should work with directive hooks', async () => {
     const calls: string[] = []
     const show1 = ref(true)
     const show2 = ref(true)

packages/runtime-vapor/src/apiCreateFor.ts

@@ -1,10 +1,10 @@
 import {
+  type EffectScope,
   type ShallowRef,
-  getCurrentScope,
+  effectScope,
   isReactive,
   proxyRefs,
   shallowRef,
-  traverse,
   triggerRef,
 } from '@vue/reactivity'
 import { isArray, isObject, isString } from '@vue/shared'
@@ -18,17 +18,11 @@ import { type Block, type Fragment, fragmentKey } from './apiRender'
 import { warn } from './warning'
 import { currentInstance } from './component'
 import { componentKey } from './component'
-import { BlockEffectScope, isRenderEffectScope } from './blockEffectScope'
-import {
-  createChildFragmentDirectives,
-  invokeWithMount,
-  invokeWithUnmount,
-  invokeWithUpdate,
-} from './directivesChildFragment'
 import type { DynamicSlot } from './componentSlots'
+import { renderEffect } from './renderEffect'
 
 interface ForBlock extends Fragment {
-  scope: BlockEffectScope
+  scope: EffectScope
   state: [
     item: ShallowRef<any>,
     key: ShallowRef<any>,
@@ -53,34 +47,24 @@ export const createFor = (
   let oldBlocks: ForBlock[] = []
   let newBlocks: ForBlock[]
   let parent: ParentNode | undefined | null
-  const update = getMemo ? updateWithMemo : updateWithoutMemo
-  const parentScope = getCurrentScope()!
   const parentAnchor = __DEV__ ? createComment('for') : createTextNode()
   const ref: Fragment = {
     nodes: oldBlocks,
     [fragmentKey]: true,
   }
 
   const instance = currentInstance!
-  if (__DEV__ && (!instance || !isRenderEffectScope(parentScope))) {
+  if (__DEV__ && !instance) {
     warn('createFor() can only be used inside setup()')
   }
 
-  createChildFragmentDirectives(
-    parentAnchor,
-    () => oldBlocks.map(b => b.scope),
-    // source getter
-    () => traverse(src(), 1),
-    // init cb
-    getValue => doFor(getValue()),
-    // effect cb
-    getValue => doFor(getValue()),
-    once,
-  )
+  const update = getMemo ? updateWithMemo : updateWithoutMemo
+  once ? renderList() : renderEffect(renderList)
 
   return ref
 
-  function doFor(source: any) {
+  function renderList() {
+    const source = src()
     const newLength = getLength(source)
     const oldLength = oldBlocks.length
     newBlocks = new Array(newLength)
@@ -265,7 +249,7 @@ export const createFor = (
     idx: number,
     anchor: Node = parentAnchor,
   ): ForBlock {
-    const scope = new BlockEffectScope(instance, parentScope)
+    const scope = effectScope()
 
     const [item, key, index] = getItem(source, idx)
     const state = [
@@ -283,11 +267,9 @@ export const createFor = (
     })
     block.nodes = scope.run(() => renderItem(proxyRefs(state)))!
 
-    invokeWithMount(scope, () => {
-      // TODO v-memo
-      // if (getMemo) block.update()
-      if (parent) insert(block.nodes, parent, anchor)
-    })
+    // TODO v-memo
+    // if (getMemo) block.update()
+    if (parent) insert(block.nodes, parent, anchor)
 
     return block
   }
@@ -326,7 +308,6 @@ export const createFor = (
     }
 
     if (needsUpdate) setState(block, newItem, newKey, newIndex)
-    invokeWithUpdate(block.scope)
   }
 
   function updateWithoutMemo(
@@ -344,13 +325,11 @@ export const createFor = (
       (!isReactive(newItem) && isObject(newItem))
 
     if (needsUpdate) setState(block, newItem, newKey, newIndex)
-    invokeWithUpdate(block.scope)
   }
 
   function unmount({ nodes, scope }: ForBlock) {
-    invokeWithUnmount(scope, () => {
-      removeBlock(nodes, parent!)
-    })
+    removeBlock(nodes, parent!)
+    scope.stop()
   }
 }
 

packages/runtime-vapor/src/apiCreateIf.ts

@@ -1,15 +1,7 @@
+import { renderEffect } from './renderEffect'
 import { type Block, type Fragment, fragmentKey } from './apiRender'
-import { getCurrentScope } from '@vue/reactivity'
+import { type EffectScope, effectScope } from '@vue/reactivity'
 import { createComment, createTextNode, insert, remove } from './dom/element'
-import { currentInstance } from './component'
-import { warn } from './warning'
-import { BlockEffectScope, isRenderEffectScope } from './blockEffectScope'
-import {
-  createChildFragmentDirectives,
-  invokeWithMount,
-  invokeWithUnmount,
-  invokeWithUpdate,
-} from './directivesChildFragment'
 
 type BlockFn = () => Block
 
@@ -26,46 +18,25 @@ export const createIf = (
   let branch: BlockFn | undefined
   let parent: ParentNode | undefined | null
   let block: Block | undefined
-  let scope: BlockEffectScope | undefined
-  const parentScope = getCurrentScope()!
+  let scope: EffectScope | undefined
   const anchor = __DEV__ ? createComment('if') : createTextNode()
   const fragment: Fragment = {
     nodes: [],
     anchor,
     [fragmentKey]: true,
   }
 
-  const instance = currentInstance!
-  if (__DEV__ && (!instance || !isRenderEffectScope(parentScope))) {
-    warn('createIf() can only be used inside setup()')
-  }
-
   // TODO: SSR
   // if (isHydrating) {
   //   parent = hydrationNode!.parentNode
   //   setCurrentHydrationNode(hydrationNode!)
   // }
 
-  createChildFragmentDirectives(
-    anchor,
-    () => (scope ? [scope] : []),
-    // source getter
-    condition,
-    // init cb
-    getValue => {
-      newValue = !!getValue()
-      doIf()
-    },
-    // effect cb
-    getValue => {
-      if ((newValue = !!getValue()) !== oldValue) {
-        doIf()
-      } else if (scope) {
-        invokeWithUpdate(scope)
-      }
-    },
-    once,
-  )
+  if (once) {
+    doIf()
+  } else {
+    renderEffect(() => doIf())
+  }
 
   // TODO: SSR
   // if (isHydrating) {
@@ -75,17 +46,20 @@ export const createIf = (
   return fragment
 
   function doIf() {
-    parent ||= anchor.parentNode
-    if (block) {
-      invokeWithUnmount(scope!, () => remove(block!, parent!))
-    }
-    if ((branch = (oldValue = newValue) ? b1 : b2)) {
-      scope = new BlockEffectScope(instance, parentScope)
-      fragment.nodes = block = scope.run(branch)!
-      invokeWithMount(scope, () => parent && insert(block!, parent, anchor))
-    } else {
-      scope = block = undefined
-      fragment.nodes = []
+    if ((newValue = !!condition()) !== oldValue) {
+      parent ||= anchor.parentNode
+      if (block) {
+        scope!.stop()
+        remove(block, parent!)
+      }
+      if ((branch = (oldValue = newValue) ? b1 : b2)) {
+        scope = effectScope()
+        fragment.nodes = block = scope.run(branch)!
+        parent && insert(block, parent, anchor)
+      } else {
+        scope = block = undefined
+        fragment.nodes = []
+      }
     }
   }
 }