feat: implement capturing event phase handling

src/modules/events.test.ts

@@ -0,0 +1,57 @@
+import * as assert from 'assert'
+
+import { ElementVNode, div, embed, VNodeProps, VNodeEvent, HtmlElementEvents } from '../'
+
+import { createEventsModule } from './events'
+
+describe(`Events Module`, () => {
+  it('calls bubbling event handler', (done) => {
+    const vNode = createElementVNode({ on: { click: () => done() } })
+    const events = createEventsModule()
+
+    events.create(vNode)
+
+    vNode.element.dispatchEvent(new Event('click', { bubbles: true }))
+  })
+
+  it('calls non-bubbling event handler', (done) => {
+    const vNode = createElementVNode({ onCapture: { click: () => done() } })
+    const events = createEventsModule()
+
+    events.create(vNode)
+
+    vNode.element.dispatchEvent(new Event('click', { bubbles: false }))
+  })
+
+  it('does not call bubbling event handler for event that does not bubble', (done) => {
+    const vNode = createElementVNode({
+      onCapture: { click: () => done() },
+      on: { click: () => done(new Error('Should not be called')) }
+    })
+    const events = createEventsModule()
+    events.create(vNode)
+
+    vNode.element.dispatchEvent(new Event('click', { bubbles: false }))
+  })
+
+  it('calls both event handlers', (done) => {
+    let i = 2
+    const doneAsync = () => (i--, i === 0 && done())
+
+    const vNode = createElementVNode({
+      onCapture: { click: doneAsync },
+      on: { click: doneAsync }
+    })
+    const events = createEventsModule()
+    events.create(vNode)
+
+    vNode.element.dispatchEvent(new Event('click', { bubbles: true }))
+  })
+})
+
+function createElementVNode(props: VNodeProps<HTMLDivElement, HtmlElementEvents<HTMLDivElement>>) {
+  const vNode = div(props)
+  vNode.element = document.createElement('div')
+
+  return vNode as ElementVNode
+}

src/modules/events.ts

@@ -1,4 +1,4 @@
-import { ElementVNode, EventHandler, Module } from '../'
+import { ElementVNode, EventHandler, Module, VNodeEvent } from '../'
 
 import { BaseModule } from './BaseModule'
 import { emptyVNode } from './emptyVNode'
@@ -28,20 +28,30 @@ function updateEventHandlers<T extends Element>(
 {
   const {
     element: formerElement,
-    props: { on: formerOn = {}, listener: formerListener = createListener(vNode) }
+    props: {
+      on: formerOn = {},
+      onCapture: formerOnCapture = {},
+      listener: formerListener = createListener(vNode)
+    }
   } = formerVNode
 
-  const { element, props: { on = {} } } = vNode
+  const { element, props: { on = {}, onCapture = {} } } = vNode
 
   if (formerOn === on) return
 
-  const listener = vNode.props.listener = formerListener
+  const listener = (vNode.props.listener = formerListener)
 
   for (const name in formerOn)
     if (!(on as any)[name]) formerElement.removeEventListener(name, listener, false)
 
   for (const name in on)
     if (!(formerOn as any)[name]) element.addEventListener(name, listener, false)
+
+  for (const name in formerOnCapture)
+    if (!(onCapture as any)[name]) formerElement.removeEventListener(name, listener, true)
+
+  for (const name in onCapture)
+    if (!(formerOnCapture as any)[name]) element.addEventListener(name, listener, true)
 }
 
 function createListener<T extends Element>(vNode: ElementVNode<T>): EventListener {
@@ -51,9 +61,18 @@ function createListener<T extends Element>(vNode: ElementVNode<T>): EventListene
 }
 
 function handleEvent<T extends Element>(event: Event, vNode: ElementVNode<T>) {
-  const { type } = event
-  const { props: { on = {} } } = vNode
-  const handler = (on as any)[type] as EventHandler<T, Event>
+  const { type, eventPhase, bubbles } = event
+  const { props: { on = {}, onCapture = {} } } = vNode
+  const capturingHandler = onCapture[type] as EventHandler<T, Event>
+  const bubblingHandler = (on as any)[type] as EventHandler<T, Event>
+
+  if (eventPhase === Event.CAPTURING_PHASE && capturingHandler)
+    return capturingHandler(event as VNodeEvent<T, Event>, vNode)
+
+  if (eventPhase === Event.BUBBLING_PHASE && bubblingHandler)
+    return bubblingHandler(event as VNodeEvent<T, Event>, vNode)
 
-  if (handler) handler(event as any, vNode)
+  // Target Phase
+  if (capturingHandler) capturingHandler(event as VNodeEvent<T, Event>, vNode)
+  if (bubblingHandler && bubbles) bubblingHandler(event as VNodeEvent<T, Event>, vNode)
 }

src/types/HtmlProperties.ts

@@ -53,6 +53,7 @@ export interface VNodeProperties<
 
   // events
   on?: EventMap
+  onCapture?: EventMap
   listener?: EventListener
 
   // declarative focusing

src/types/VirtualNode.ts

@@ -54,6 +54,7 @@ export interface VNodeProps<
 
   // events
   on?: EventMap
+  onCapture?: EventMap
   listener?: EventListener
 
   // declarative focusing