add onMount (#34)

* add onMount
* bump coverage

Author: tombl

src/html.d.ts

@@ -5,6 +5,7 @@ export { CustomPartConstructor as CustomPart, Displayable, Renderable }
 export function html(statics: TemplateStringsArray, ...dynamics: unknown[]): BoundTemplateInstance
 export function keyed<T extends Displayable & object>(value: T, key: Key): T
 export function invalidate(renderable: Renderable): Promise<void>
+export function onMount(renderable: Renderable, callback: () => void | (() => void)): void
 export function onUnmount(renderable: Renderable, callback: () => void): void
 export function getParentNode(renderable: Renderable): Node
 

src/html.js

@@ -33,11 +33,13 @@ export const html = (statics, ...dynamics) => new BoundTemplateInstance(statics,
 
 const singlePartTemplate = part => html`${part}`
 
+/* v8 ignore start */
 /** @return {asserts value} */
 const assert = (value, message = 'assertion failed') => {
 	if (!DEV) return
 	if (!value) throw new Error(message)
 }
+/* v8 ignore stop */
 
 /** @implements {SpanInstance} */
 class Span {
@@ -322,35 +324,47 @@ function compileTemplate(statics) {
 }
 
 /** @type {WeakMap<object, {
+  _mounted: boolean 
 	_invalidateQueued: Promise<void> | null
 	_invalidate: () => void
-	_unmountCallbacks: Set<() => void> | null
+	_unmountCallbacks: Set<void | (() => void)> | null
 	_parentNode: Node
 }>} */
 const controllers = new WeakMap()
+
 export function invalidate(renderable) {
 	const controller = controllers.get(renderable)
-	// TODO: if no controller, check again in a microtask?
-	// just in case the renderable was created between invalidation and rerendering
 	assert(controller, 'the renderable has not been rendered')
-
-	// TODO: cancel this invalidation if a higher up one comes along
 	return (controller._invalidateQueued ??= Promise.resolve().then(() => {
 		controller._invalidateQueued = null
 		controller._invalidate()
 	}))
 }
-export function onUnmount(renderable, callback) {
+
+/** @type {WeakMap<Renderable, Set<() => void | (() => void)>>} */
+const mountCallbacks = new WeakMap()
+
+export function onMount(renderable, callback) {
+	DEV: assert(isRenderable(renderable), 'expected a renderable')
+
 	const controller = controllers.get(renderable)
-	assert(controller, 'the renderable has not been rendered')
+	if (controller?._mounted) {
+		;(controller._unmountCallbacks ??= new Set()).add(callback())
+		return
+	}
 
-	controller._unmountCallbacks ??= new Set()
-	controller._unmountCallbacks.add(callback)
+	let cb = mountCallbacks.get(renderable)
+	if (!cb) mountCallbacks.set(renderable, (cb = new Set()))
+	cb.add(callback)
 }
+
+export function onUnmount(renderable, callback) {
+	onMount(renderable, () => callback)
+}
+
 export function getParentNode(renderable) {
 	const controller = controllers.get(renderable)
 	assert(controller, 'the renderable has not been rendered')
-
 	return controller._parentNode
 }
 
@@ -408,7 +422,7 @@ class ChildPart {
 	#switchRenderable(next) {
 		if (this.#renderable && this.#renderable !== next) {
 			const controller = controllers.get(this.#renderable)
-			if (controller?._unmountCallbacks) for (const callback of controller._unmountCallbacks) callback()
+			if (controller?._unmountCallbacks) for (const callback of controller._unmountCallbacks) callback?.()
 			controllers.delete(this.#renderable)
 		}
 		this.#renderable = next
@@ -433,6 +447,7 @@ class ChildPart {
 
 			if (!controllers.has(renderable))
 				controllers.set(renderable, {
+					_mounted: false,
 					_invalidateQueued: null,
 					_invalidate: () => {
 						DEV: assert(this.#renderable === renderable, 'could not invalidate an outdated renderable')
@@ -511,6 +526,18 @@ class ChildPart {
 			}
 
 			this.#span._end = end
+
+			const controller = controllers.get(this.#renderable)
+			if (controller) {
+				controller._mounted = true
+				// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+				for (const callback of mountCallbacks.get(this.#renderable) ?? []) {
+					;(controller._unmountCallbacks ??= new Set()).add(callback())
+				}
+				// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+				mountCallbacks.delete(this.#renderable)
+			}
+
 			if (endsWereEqual) this.#parentSpan._end = this.#span._end
 
 			return
@@ -541,9 +568,20 @@ class ChildPart {
 			}
 		}
 
-		if (endsWereEqual) this.#parentSpan._end = this.#span._end
-
 		this.#value = value
+
+		const controller = controllers.get(this.#renderable)
+		if (controller) {
+			controller._mounted = true
+			// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+			for (const callback of mountCallbacks.get(this.#renderable) ?? []) {
+				;(controller._unmountCallbacks ??= new Set()).add(callback())
+			}
+			// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+			mountCallbacks.delete(this.#renderable)
+		}
+
+		if (endsWereEqual) this.#parentSpan._end = this.#span._end
 	}
 
 	detach() {

test/attributes.test.ts

@@ -10,6 +10,24 @@ describe('attributes', () => {
 		expect(el.querySelector('h1')).toHaveAttribute('style', 'color: red')
 	})
 
+	it('can toggle attributes', () => {
+		const { root, el } = setup()
+
+		let hidden: unknown = false
+		const template = () => html`<h1 hidden=${hidden}>Hello, world!</h1>`
+
+		root.render(template())
+		expect(el.querySelector('h1')).not.toHaveAttribute('hidden')
+
+		hidden = true
+		root.render(template())
+		expect(el.querySelector('h1')).toHaveAttribute('hidden')
+
+		hidden = null
+		root.render(template())
+		expect(el.querySelector('h1')).not.toHaveAttribute('hidden')
+	})
+
 	it('supports property attributes', () => {
 		const { root, el } = setup()
 

test/basic.test.ts

@@ -1,5 +1,5 @@
 import { html, type Displayable } from 'dhtml'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { setup } from './setup'
 
 describe('basic', () => {
@@ -48,21 +48,6 @@ describe('basic', () => {
 		expect(el.innerHTML).toMatchInlineSnapshot(`"<div>before</div><h1>Hello, world!</h1><div>after</div>"`)
 	})
 
-	it('user errors', { skip: import.meta.env.PROD }, () => {
-		const { root, el } = setup()
-
-		let thrown
-		try {
-			root.render(html`<button @click=${123}></button>`)
-		} catch (error) {
-			thrown = error as Error
-		}
-
-		expect(el.innerHTML).toBe('<button></button>')
-		expect(thrown).toBeInstanceOf(Error)
-		expect(thrown!.message).toMatch(/expected a function/i)
-	})
-
 	it('update identity', () => {
 		const { root, el } = setup()
 
@@ -126,3 +111,69 @@ describe('basic', () => {
 		expect((el.firstChild as Text).data).toBe('abc')
 	})
 })
+
+const console = {
+	warn: vi.fn(),
+}
+vi.stubGlobal('console', console)
+
+describe('errors', () => {
+	it('throws on non-function event handlers', { skip: import.meta.env.PROD }, () => {
+		const { root, el } = setup()
+
+		let thrown
+		try {
+			root.render(html`<button @click=${123}></button>`)
+		} catch (error) {
+			thrown = error as Error
+		}
+
+		expect(el.innerHTML).toBe('<button></button>')
+		expect(thrown).toBeInstanceOf(Error)
+		expect(thrown!.message).toMatch(/expected a function/i)
+	})
+
+	it('throws cleanly', () => {
+		const { root, el } = setup()
+
+		const oops = new Error('oops')
+		let thrown
+		try {
+			root.render(
+				html`${{
+					render() {
+						throw oops
+					},
+				}}`,
+			)
+		} catch (error) {
+			thrown = error
+		}
+		expect(thrown).toBe(oops)
+
+		// on an error, don't leave any visible artifacts
+		expect(el.innerHTML).toBe('<!---->')
+	})
+
+	it('warns on invalid part placement', () => {
+		const { root, el } = setup()
+
+		expect(console.warn).not.toHaveBeenCalled()
+
+		root.render(html`<${'div'}>${'text'}</${'div'}>`)
+		expect(el.innerHTML).toMatchInlineSnapshot(`"<dyn-$0>text</dyn-$0>"`)
+
+		expect(console.warn).toHaveBeenCalledWith('dynamic value detected in static location')
+	})
+
+	it('does not warn parts in comments', () => {
+		const { root, el } = setup()
+
+		expect(console.warn).not.toHaveBeenCalled()
+
+		root.render(html`<!-- ${'text'} -->`)
+		expect(el.innerHTML).toMatchInlineSnapshot(`"<!-- dyn-$0 -->"`)
+
+		expect(console.warn).not.toHaveBeenCalled()
+	})
+})

test/lists.test.ts

@@ -161,6 +161,25 @@ describe('lists', () => {
 		root.render([2])
 		expect(el.innerHTML).toBe('2')
 	})
+
+	it('can disappear', () => {
+		const { root, el } = setup()
+
+		const app = {
+			show: true,
+			render() {
+				if (!this.show) return null
+				return [1, 2, 3].map(i => html`<div>${i}</div>`)
+			},
+		}
+
+		root.render(app)
+		expect(el.innerHTML).toMatchInlineSnapshot(`"<div>1</div><div>2</div><div>3</div>"`)
+
+		app.show = false
+		root.render(app)
+		expect(el.innerHTML).toMatchInlineSnapshot(`""`)
+	})
 })
 
 describe('list reordering', () => {
@@ -311,3 +330,10 @@ describe('list reordering', () => {
 		expect(el.innerHTML).toBe(items.map(([, html]) => html).join(''))
 	})
 })
+
+describe('list with keys', () => {
+	it("can't key something twice", () => {
+		expect(() => keyed(html``, 1)).not.toThrow()
+		expect(() => keyed(keyed(html``, 1), 1)).toThrow()
+	})
+})