wip(vapor): optimize event handling

packages/runtime-vapor/src/block.ts

@@ -132,14 +132,6 @@ export function prepend(parent: ParentNode, ...blocks: Block[]): void {
   while (i--) insert(blocks[i], parent, 0)
 }
 
-/**
- * Optimized children removal: record all parents with unmounted children
- * during each root remove call, and update their children list by filtering
- * unmounted children
- */
-// export let parentsWithUnmountedChildren: Set<VaporComponentInstance> | null =
-//   null
-
 export function remove(block: Block, parent?: ParentNode): void {
   if (block instanceof Node) {
     parent && parent.removeChild(block)

packages/runtime-vapor/src/dom/event.ts

@@ -1,10 +1,4 @@
-import {
-  getCurrentScope,
-  onEffectCleanup,
-  onScopeDispose,
-} from '@vue/reactivity'
-import { queuePostFlushCb } from '@vue/runtime-dom'
-import { remove } from '@vue/shared'
+import { onEffectCleanup } from '@vue/reactivity'
 
 export function addEventListener(
   el: Element,
@@ -22,47 +16,36 @@ export function on(
   handlerGetter: () => undefined | ((...args: any[]) => any),
   options: AddEventListenerOptions & { effect?: boolean } = {},
 ): void {
-  const handler: DelegatedHandler = eventHandler(handlerGetter)
-  let cleanupEvent: (() => void) | undefined
-  queuePostFlushCb(() => {
-    cleanupEvent = addEventListener(el, event, handler, options)
-  })
-
+  const handler = eventHandler(handlerGetter)
+  addEventListener(el, event, handler, options)
   if (options.effect) {
-    onEffectCleanup(cleanup)
-  } else if (getCurrentScope()) {
-    onScopeDispose(cleanup)
-  }
-
-  function cleanup() {
-    cleanupEvent && cleanupEvent()
+    onEffectCleanup(() => {
+      el.removeEventListener(event, handler, options)
+    })
   }
 }
 
-export type DelegatedHandler = {
-  (...args: any[]): any
-  delegate?: boolean
-}
-
 export function delegate(
   el: any,
   event: string,
   handlerGetter: () => undefined | ((...args: any[]) => any),
 ): void {
-  const handler: DelegatedHandler = eventHandler(handlerGetter)
+  const key = `$evt${event}`
+  const handler = eventHandler(handlerGetter)
   handler.delegate = true
+  ;(el[key] || (el[key] = [])).push(handler)
+}
 
-  const cacheKey = `$evt${event}`
-  const handlers: DelegatedHandler[] = el[cacheKey] || (el[cacheKey] = [])
-  handlers.push(handler)
-  onScopeDispose(() => remove(handlers, handler))
+type DelegatedHandler = {
+  (...args: any[]): any
+  delegate?: boolean
 }
 
-function eventHandler(getter: () => undefined | ((...args: any[]) => any)) {
+function eventHandler(
+  getter: () => undefined | ((...args: any[]) => any),
+): DelegatedHandler {
   return (...args: any[]) => {
-    let handler = getter()
-    if (!handler) return
-
+    const handler = getter()
     handler && handler(...args)
   }
 }