add `on` directive (#137)

src/client.ts

···
 export { invalidate, keyed, onMount, onUnmount } from './client/controller.ts'
-export { attr_directive as attr, type Directive } from './client/parts.ts'
+export { attr_directive as attr, on_directive as on, type Directive } from './client/parts.ts'
 export { createRoot, hydrate, type Root } from './client/root.ts'

src/client/parts.ts

···
 }
 
 export function create_attribute_part(node: Element, name: string): Part {
-	return value => {
-		set_attr(node, name, value)
-	}
+	return value => set_attr(node, name, value)
 }
 
-export type Directive = (node: Element) => Cleanup
+export type Directive = (el: Element) => Cleanup
 
 export function create_directive_part(node: Node): Part {
 	let cleanup: Cleanup
···
 export function attr_directive(name: string, value: string | boolean | null | undefined): Directive {
 	return el => {
 		set_attr(el, name, value)
-		return () => {
-			set_attr(el, name, null)
-		}
+		return () => set_attr(el, name, null)
+	}
+}
+
+export function on_directive(
+	type: string,
+	listener: EventListenerOrEventListenerObject,
+	options?: boolean | AddEventListenerOptions,
+): Directive {
+	return el => {
+		el.addEventListener(type, listener, options)
+		return () => el.removeEventListener(type, listener, options)
 	}
 }

src/client/tests/directives.test.ts

···
 import { html } from 'dhtml'
-import { attr, type Directive } from 'dhtml/client'
+import { attr, on, type Directive } from 'dhtml/client'
 import { assert, assert_eq, test } from '../../../scripts/test/test.ts'
 import { setup } from './setup.ts'
 
···
 	root.render(template(false))
 	assert_eq(el.querySelector('input')!.disabled, false)
 })
+
+test('on directive works correctly', () => {
+	const { root, el } = setup()
+	let count = 0
+	let event: Event
+
+	const template = (handler: EventListener | null) => html`
+		<button ${handler ? on('click', handler) : null}>Click me</button>
+	`
+
+	root.render(
+		template(e => {
+			count++
+			event = e
+		}),
+	)
+	const button = el.querySelector('button')!
+
+	button.click()
+	assert_eq(count, 1)
+	assert(event! instanceof Event)
+	assert_eq(event.type, 'click')
+
+	button.click()
+	assert_eq(count, 2)
+
+	root.render(template(null))
+	button.click()
+	assert_eq(count, 2)
+})
+
+test('on directive handles event listener updates', () => {
+	const { root, el } = setup()
+	let count1 = 0
+	let count2 = 0
+
+	const template = (handler: EventListener) => html`<button ${on('click', handler)}>Click me</button>`
+
+	root.render(
+		template(() => {
+			count1++
+		}),
+	)
+	const button = el.querySelector('button')!
+
+	button.click()
+	assert_eq(count1, 1)
+	assert_eq(count2, 0)
+
+	root.render(
+		template(() => {
+			count2++
+		}),
+	)
+	button.click()
+	assert_eq(count1, 1)
+	assert_eq(count2, 1)
+})
+
+test('on directive supports different event types', () => {
+	const { root, el } = setup()
+	let enter_count = 0
+	let leave_count = 0
+
+	const template = () => html`
+		<div
+			${on('mouseenter', () => {
+				enter_count++
+			})}
+			${on('mouseleave', () => {
+				leave_count++
+			})}
+		>
+			Hover me
+		</div>
+	`
+
+	root.render(template())
+	const div = el.querySelector('div')!
+
+	div.dispatchEvent(new MouseEvent('mouseenter'))
+	assert_eq(enter_count, 1)
+	assert_eq(leave_count, 0)
+
+	div.dispatchEvent(new MouseEvent('mouseleave'))
+	assert_eq(enter_count, 1)
+	assert_eq(leave_count, 1)
+})
+
+test('on directive supports event listener options', () => {
+	const { root, el } = setup()
+	let count = 0
+
+	const template = (options?: AddEventListenerOptions) => html`
+		<button
+			${on(
+				'click',
+				() => {
+					count++
+				},
+				options,
+			)}
+		>
+			Click me
+		</button>
+	`
+
+	root.render(template({ once: true }))
+	const button = el.querySelector('button')!
+
+	button.click()
+	assert_eq(count, 1)
+
+	button.click()
+	assert_eq(count, 1)
+
+	root.render(template())
+	button.click()
+	assert_eq(count, 2)
+
+	button.click()
+	assert_eq(count, 3)
+})