batch invalidations (#204)

fixes reentrancy bugs by avoiding reentrancy.

batches invalidations in a global microtask,
which makes things faster at the cost of invalidate
now returning a promise.

examples/kanban/src/util/router.ts

···
 	routes: Record<string, PageHandler<string, Context>>
 	context: Context
 }
-interface RouterConfigP<Context, Routes extends { [Path in keyof Routes & string]: PageHandler<Path, Context> }>
-	extends RouterConfig<Context> {
+interface RouterConfigP<
+	Context,
+	Routes extends { [Path in keyof Routes & string]: PageHandler<Path, Context> },
+> extends RouterConfig<Context> {
 	routes: Routes
 }
 

examples/todomvc/main.js

···
 						checked=${this.completed}
 						onchange=${e => {
 							e.preventDefault()
-							this.completed = e.target.checked
-							transition(() => {
-								invalidate(this)
-								invalidate(this.app)
+							transition(async () => {
+								this.completed = e.target.checked
+								await invalidate(this, this.app)
 							})
 						}}
 					/>
 					<label
 						ondblclick=${() => {
-							transition(() => {
+							transition(async () => {
 								this.editing = true
-								invalidate(this)
+								await invalidate(this)
 							})
 						}}
 						>${this.title}</label
···
 					<button
 						class="destroy"
 						onclick=${() => {
-							transition(() => {
+							transition(async () => {
 								this.app.remove(this.id)
-								invalidate(this.app)
+								await invalidate(this.app)
 							})
 						}}
 					></button>
···
 									onblur=${e => {
 										const value = e.target.value.trim()
 										if (value) {
-											transition(() => {
+											transition(async () => {
 												this.title = value
 												this.editing = false
-												invalidate(this)
+												await invalidate(this)
 											})
 										}
 									}}
···
 										if (e.key === 'Enter') {
 											const value = e.target.value.trim()
 											if (value) {
-												transition(() => {
+												transition(async () => {
 													this.title = value
 													this.editing = false
-													invalidate(this)
+													await invalidate(this)
 												})
 											}
 										}
···
 						if (event.key === 'Enter') {
 							const value = event.target.value.trim()
 							if (value) {
-								transition(() => {
+								transition(async () => {
 									this.todos.push(new TodoItem(this, value))
 									event.target.value = ''
-									invalidate(this)
+									await invalidate(this)
 								})
 							}
 						}
···
 									type="checkbox"
 									checked=${activeCount === 0}
 									onchange=${e => {
-										transition(() => {
+										transition(async () => {
 											for (const todo of this.todos) todo.completed = e.target.checked
-											invalidate(this)
+											await invalidate(this)
 										})
 									}}
 								/>
···
 												href="#"
 												${classes(this.filter === filter && 'selected')}
 												onclick=${() => {
-													transition(() => {
+													transition(async () => {
 														this.filter = filter
-														invalidate(this)
+														await invalidate(this)
 													})
 												}}
 												>${filter}</a
···
 								? html`<button
 										class="clear-completed"
 										onclick=${() => {
-											transition(() => {
+											transition(async () => {
 												this.todos = this.todos.filter(todo => !todo.completed)
-												invalidate(this)
+												await invalidate(this)
 											})
 										}}
 									>

scripts/test/browser-runtime.ts

···
 import * as puppeteer from 'puppeteer'
 import type { Runtime } from './main.ts'
 
-export async function create_browser_runtime(): Promise<Runtime> {
+export interface BrowserRuntimeOptions {
+	collect_coverage?: boolean
+}
+
+export async function create_browser_runtime(options: BrowserRuntimeOptions = {}): Promise<Runtime> {
+	const collect_coverage = options.collect_coverage ?? true
+
 	const browser = await puppeteer.launch({
 		// headless: false,
 		// devtools: true,
···
 	const { port1, port2 } = new MessageChannel()
 	await page.exposeFunction('__postMessage', (data: any) => port1.postMessage(data))
 
-	await page.coverage.startJSCoverage({ includeRawScriptCoverage: true })
+	if (collect_coverage) await page.coverage.startJSCoverage({ includeRawScriptCoverage: true })
 	await page.goto(`http://${addr}/@runner`)
 
 	const onmessage = await page.waitForFunction(() => window.__onmessage)
···
 	return {
 		port: port2,
 		async coverage() {
+			if (!collect_coverage) return []
 			const coverage = await page.coverage.stopJSCoverage()
 			return coverage.map(c => c.rawScriptCoverage!)
 		},

scripts/test/main.ts

···
 const coverage: Coverage[] = []
 
 for (const [runtime, files] of Object.entries(all_files)) {
-	const rt = runtime === 'node' ? await create_node_runtime() : await create_browser_runtime()
+	const collect_coverage = !args.values.bench
+	const rt =
+		runtime === 'node'
+			? await create_node_runtime({ collect_coverage })
+			: await create_browser_runtime({ collect_coverage })
 	await using _ = rt // workaround for https://issues.chromium.org/issues/409478039
 
 	const client = createBirpc<ClientFunctions, ServerFunctions>(
···
 		await client.run_benchmarks({ filter })
 	} else {
 		await client.run_tests({ filter })
+		await client.stop_coverage()
+		coverage.push(...(await rt.coverage()))
 	}
-
-	await client.stop_coverage()
-	coverage.push(...(await rt.coverage()))
 }
 
 if (args.values.bench) {

scripts/test/node-runtime.ts

···
 import { fileURLToPath } from 'node:url'
 import type { Runtime } from './main.ts'
 
-export async function create_node_runtime(): Promise<Runtime> {
-	const coverage_dir = await fs.mkdtemp(path.join(os.tmpdir(), 'coverage-'))
+export interface NodeRuntimeOptions {
+	collect_coverage?: boolean
+}
+
+export async function create_node_runtime(options: NodeRuntimeOptions = {}): Promise<Runtime> {
+	const collect_coverage = options.collect_coverage ?? true
+	const coverage_dir = collect_coverage ? await fs.mkdtemp(path.join(os.tmpdir(), 'coverage-')) : null
 	const child = child_process.fork(fileURLToPath(import.meta.resolve('./runtime.ts')), {
-		env: { NODE_V8_COVERAGE: coverage_dir },
+		env: collect_coverage ? { ...process.env, NODE_V8_COVERAGE: coverage_dir! } : process.env,
 		stdio: 'inherit',
 	})
 
···
 	return {
 		port: port2,
 		async coverage() {
+			if (!collect_coverage || !coverage_dir) return []
 			const [filename] = await fs.readdir(coverage_dir)
 			const { result } = JSON.parse(await fs.readFile(path.join(coverage_dir, filename), 'utf8'))
 			return result
···
 		async [Symbol.asyncDispose]() {
 			port1.close()
 			child.kill()
-			await fs.rm(coverage_dir, { recursive: true })
+			if (coverage_dir) await fs.rm(coverage_dir, { recursive: true })
 		},
 	}
 }

src/client/controller.ts

···
 }
 
 export const controllers: WeakMap<Renderable, Controller> = new WeakMap()
+const invalidated_controllers: Set<Controller> = new Set()
+let invalidate_queued: null | Promise<void> = null
 
 export function get_controller(renderable: Renderable): Controller {
 	let controller = controllers.get(renderable)
···
 	return controller
 }
 
-export function invalidate(renderable: Renderable): void {
-	const controller = controllers.get(renderable)
-	controller?._invalidate.forEach(invalidate => invalidate())
+export function invalidate(...renderables: Renderable[]): Promise<void> {
+	for (const renderable of renderables) invalidated_controllers.add(get_controller(renderable))
+
+	return (invalidate_queued ??= Promise.resolve()
+		.then(() => {
+			for (const controller of invalidated_controllers) {
+				invalidated_controllers.delete(controller)
+				controller._invalidate.forEach(invalidate => invalidate())
+			}
+		})
+		.finally(() => {
+			invalidate_queued = null
+		}))
 }
 
 export function onMount(renderable: Renderable, callback: () => Cleanup): void {

src/client/tests/bench.ts

···
 		this.items = this.items.filter((_, i) => (i + 1) % nth !== 0)
 	}
 
-	activate(nth: number) {
+	async activate(nth: number) {
 		for (let i = 0; i < this.items.length; i++) {
 			this.items[i].active = (i + 1) % nth === 0
-			invalidate(this.items[i])
 		}
+		await invalidate(...this.items)
 	}
 
 	render() {
···
 		}
 	}
 
-	advance_each(nth: number) {
+	async advance_each(nth: number) {
+		const renderables: AnimBoxState[] = []
 		for (let i = 0; i < this.items.length; i++) {
 			if ((i + 1) % nth === 0) {
 				this.items[i].time++
-				invalidate(this.items[i])
+				renderables.push(this.items[i])
 			}
 		}
+		await invalidate(...renderables)
 	}
 
 	render() {
···
 		this.root.children = []
 	}
 
-	reverse() {
+	async reverse() {
+		const renderables: TreeNodeState[] = []
 		const reverse_children = (node: TreeNodeState) => {
 			if (node.container && node.children) {
 				node.children.reverse()
···
 						reverse_children(child)
 					}
 				}
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
 		reverse_children(this.root)
+		await invalidate(...renderables)
 	}
 
-	insert_first(n: number) {
+	async insert_first(n: number) {
+		const renderables: TreeNodeState[] = []
 		function insert_at_containers(node: TreeNodeState, id_counter: { value: number }) {
 			if (node.container && node.children) {
 				const new_nodes: TreeNodeState[] = []
···
 						insert_at_containers(child, id_counter)
 					}
 				}
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
···
 		const id_counter = { value: max_id + 1 }
 
 		insert_at_containers(this.root, id_counter)
+		await invalidate(...renderables)
 	}
 
-	insert_last(n: number) {
+	async insert_last(n: number) {
+		const renderables: TreeNodeState[] = []
 		function insert_at_containers(node: TreeNodeState, id_counter: { value: number }) {
 			if (node.container && node.children) {
 				const new_nodes: TreeNodeState[] = []
···
 						insert_at_containers(child, id_counter)
 					}
 				}
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
···
 		const id_counter = { value: max_id + 1 }
 
 		insert_at_containers(this.root, id_counter)
+		await invalidate(...renderables)
 	}
 
-	remove_first(n: number) {
+	async remove_first(n: number) {
+		const renderables: TreeNodeState[] = []
 		const remove_from_containers = (node: TreeNodeState) => {
 			if (node.container && node.children) {
 				node.children.splice(0, Math.min(n, node.children.length))
···
 					}
 				}
 
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
 		remove_from_containers(this.root)
+		await invalidate(...renderables)
 	}
 
-	remove_last(n: number) {
+	async remove_last(n: number) {
+		const renderables: TreeNodeState[] = []
 		const remove_from_containers = (node: TreeNodeState) => {
 			if (node.container && node.children) {
 				const length = node.children.length
···
 					}
 				}
 
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
 		remove_from_containers(this.root)
+		await invalidate(...renderables)
 	}
 
-	move_from_end_to_start(n: number) {
+	async move_from_end_to_start(n: number) {
+		const renderables: TreeNodeState[] = []
 		const move_in_containers = (node: TreeNodeState) => {
 			if (node.container && node.children && node.children.length > n) {
 				const length = node.children.length
···
 					}
 				}
 
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
 		move_in_containers(this.root)
+		await invalidate(...renderables)
 	}
 
-	move_from_start_to_end(n: number) {
+	async move_from_start_to_end(n: number) {
+		const renderables: TreeNodeState[] = []
 		const move_in_containers = (node: TreeNodeState) => {
 			if (node.container && node.children && node.children.length > n) {
 				const moved = node.children.splice(0, n)
···
 					}
 				}
 
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
 		move_in_containers(this.root)
+		await invalidate(...renderables)
 	}
 
 	// Worst case scenarios
-	kivi_worst_case() {
-		this.remove_first(1)
-		this.remove_last(1)
-		this.reverse()
+	async kivi_worst_case() {
+		await this.remove_first(1)
+		await this.remove_last(1)
+		await this.reverse()
 	}
 
-	snabbdom_worst_case() {
+	async snabbdom_worst_case() {
+		const renderables: TreeNodeState[] = []
 		const transform = (node: TreeNodeState) => {
 			if (node.container && node.children && node.children.length > 2) {
 				const first = node.children.shift()
···
 					}
 				}
 
-				invalidate(node)
+				renderables.push(node)
 			}
 		}
 
 		transform(this.root)
+		await invalidate(...renderables)
 	}
 
-	react_worst_case() {
-		this.remove_first(1)
-		this.remove_last(1)
-		this.move_from_end_to_start(1)
+	async react_worst_case() {
+		await this.remove_first(1)
+		await this.remove_last(1)
+		await this.move_from_end_to_start(1)
 	}
 
-	virtual_dom_worst_case() {
-		this.move_from_start_to_end(2)
+	async virtual_dom_worst_case() {
+		await this.move_from_start_to_end(2)
 	}
 
 	render() {
···
 // Benchmark Cases
 // ==============================
 
+function bench_setup(name: string, fn: (root: ReturnType<typeof setup>['root']) => void | Promise<void>): void {
+	bench(name, async () => {
+		const { root, el } = setup()
+		try {
+			await fn(root)
+		} finally {
+			root.render(null)
+			el.remove()
+		}
+	})
+}
+
 // Table Benchmark Cases
-bench('table/small/render', () => {
-	const { root } = setup()
+bench_setup('table/small/render', async root => {
 	const state = new TableState(15, 4)
 	root.render(state)
 })
 
-bench('table/small/removeAll', () => {
-	const { root } = setup()
+bench_setup('table/small/removeAll', async root => {
 	const state = new TableState(15, 4)
 	root.render(state)
 	state.remove_all()
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('table/small/sort', () => {
-	const { root } = setup()
+bench_setup('table/small/sort', async root => {
 	const state = new TableState(15, 4)
 	root.render(state)
 	state.sort_by_column(1)
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('table/small/filter', () => {
-	const { root } = setup()
+bench_setup('table/small/filter', async root => {
 	const state = new TableState(15, 4)
 	root.render(state)
 	state.filter(4)
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('table/small/activate', () => {
-	const { root } = setup()
+bench_setup('table/small/activate', async root => {
 	const state = new TableState(15, 4)
 	root.render(state)
-	state.activate(4)
-	invalidate(state)
+	await state.activate(4)
 })
 
-bench('table/large/render', () => {
-	const { root } = setup()
+bench_setup('table/large/render', async root => {
 	const state = new TableState(100, 4)
 	root.render(state)
 })
 
-bench('table/large/removeAll', () => {
-	const { root } = setup()
+bench_setup('table/large/removeAll', async root => {
 	const state = new TableState(100, 4)
 	root.render(state)
 	state.remove_all()
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('table/large/sort', () => {
-	const { root } = setup()
+bench_setup('table/large/sort', async root => {
 	const state = new TableState(100, 4)
 	root.render(state)
 	state.sort_by_column(1)
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('table/large/filter', () => {
-	const { root } = setup()
+bench_setup('table/large/filter', async root => {
 	const state = new TableState(100, 4)
 	root.render(state)
 	state.filter(16)
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('table/large/activate', () => {
-	const { root } = setup()
+bench_setup('table/large/activate', async root => {
 	const state = new TableState(100, 4)
 	root.render(state)
-	state.activate(16)
-	invalidate(state)
+	await state.activate(16)
 })
 
 // Animation Benchmark Cases
-bench('anim/small/advance', () => {
-	const { root } = setup()
+bench_setup('anim/small/advance', async root => {
 	const state = new AnimState(30)
 	root.render(state)
-	state.advance_each(4)
-	invalidate(state)
+	await state.advance_each(4)
 })
 
-bench('anim/large/advance', () => {
-	const { root } = setup()
+bench_setup('anim/large/advance', async root => {
 	const state = new AnimState(100)
 	root.render(state)
-	state.advance_each(16)
-	invalidate(state)
+	await state.advance_each(16)
 })
 
 // Tree Benchmark Cases - Small
-bench('tree/small/render', () => {
-	const { root } = setup()
+bench_setup('tree/small/render', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
 })
 
-bench('tree/small/removeAll', () => {
-	const { root } = setup()
+bench_setup('tree/small/removeAll', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
 	state.remove_all()
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('tree/small/reverse', () => {
-	const { root } = setup()
+bench_setup('tree/small/reverse', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	state.reverse()
-	invalidate(state)
+	await state.reverse()
 })
 
-bench('tree/small/insertFirst', () => {
-	const { root } = setup()
+bench_setup('tree/small/insertFirst', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	state.insert_first(2)
-	invalidate(state)
+	await state.insert_first(2)
 })
 
-bench('tree/small/insertLast', () => {
-	const { root } = setup()
+bench_setup('tree/small/insertLast', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	state.insert_last(2)
-	invalidate(state)
+	await state.insert_last(2)
 })
 
-bench('tree/small/removeFirst', () => {
-	const { root } = setup()
+bench_setup('tree/small/removeFirst', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	state.remove_first(2)
-	invalidate(state)
+	await state.remove_first(2)
 })
 
-bench('tree/small/removeLast', () => {
-	const { root } = setup()
+bench_setup('tree/small/removeLast', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	state.remove_last(2)
-	invalidate(state)
+	await state.remove_last(2)
 })
 
-bench('tree/small/moveFromEndToStart', () => {
-	const { root } = setup()
+bench_setup('tree/small/moveFromEndToStart', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	state.move_from_end_to_start(2)
-	invalidate(state)
+	await state.move_from_end_to_start(2)
 })
 
-bench('tree/small/moveFromStartToEnd', () => {
-	const { root } = setup()
+bench_setup('tree/small/moveFromStartToEnd', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	state.move_from_start_to_end(2)
-	invalidate(state)
+	await state.move_from_start_to_end(2)
 })
 
-bench('tree/small/no_change', () => {
-	const { root } = setup()
+bench_setup('tree/small/no_change', async root => {
 	const state = new TreeState([5, 10])
 	root.render(state)
-	invalidate(state)
+	await invalidate(state)
 })
 
 // Tree Benchmark Cases - Large
-bench('tree/large/render', () => {
-	const { root } = setup()
+bench_setup('tree/large/render', async root => {
 	const state = new TreeState([50, 10])
 	root.render(state)
 })
 
-bench('tree/large/removeAll', () => {
-	const { root } = setup()
+bench_setup('tree/large/removeAll', async root => {
 	const state = new TreeState([50, 10])
 	root.render(state)
 	state.remove_all()
-	invalidate(state)
+	await invalidate(state)
 })
 
-bench('tree/large/reverse', () => {
-	const { root } = setup()
+bench_setup('tree/large/reverse', async root => {
 	const state = new TreeState([50, 10])
 	root.render(state)
-	state.reverse()
-	invalidate(state)
+	await state.reverse()
 })
 
 // Worst Case Scenarios
-bench('tree/worst_case/kivi', () => {
-	const { root } = setup()
+bench_setup('tree/worst_case/kivi', async root => {
 	const state = new TreeState([10, 10])
 	root.render(state)
-	state.kivi_worst_case()
-	invalidate(state)
+	await state.kivi_worst_case()
 })
 
-bench('tree/worst_case/snabbdom', () => {
-	const { root } = setup()
+bench_setup('tree/worst_case/snabbdom', async root => {
 	const state = new TreeState([10, 10])
 	root.render(state)
-	state.snabbdom_worst_case()
-	invalidate(state)
+	await state.snabbdom_worst_case()
 })
 
-bench('tree/worst_case/react', () => {
-	const { root } = setup()
+bench_setup('tree/worst_case/react', async root => {
 	const state = new TreeState([10, 10])
 	root.render(state)
-	state.react_worst_case()
-	invalidate(state)
+	await state.react_worst_case()
 })
 
-bench('tree/worst_case/virtual_dom', () => {
-	const { root } = setup()
+bench_setup('tree/worst_case/virtual_dom', async root => {
 	const state = new TreeState([10, 10])
 	root.render(state)
-	state.virtual_dom_worst_case()
-	invalidate(state)
+	await state.virtual_dom_worst_case()
 })

src/client/tests/hydration.test.ts

···
 	assert_eq(el.innerHTML, '<!--?[--><h1>Component content</h1><!--?]-->')
 })
 
-test('renderables with state hydrate correctly', () => {
+test('renderables with state hydrate correctly', async () => {
 	const counter = {
 		count: 0,
 		render() {
···
 
 	// Test state updates
 	counter.count = 5
-	invalidate(counter)
+	await invalidate(counter)
 	assert_eq(el.innerHTML, '<!--?[--><div>Count: <!--?[-->5<!--?]--></div><!--?]-->')
 })
 
···
 	assert(thrown)
 })
 
-test('hydration of deep nesting', () => {
+test('hydration of deep nesting', async () => {
 	const DEPTH = 10
 
 	const leaf = {
···
 	assert_eq(el.innerHTML, '<!--?[-->'.repeat(DEPTH + 1) + 'hello!' + '<!--?]-->'.repeat(DEPTH + 1))
 
 	leaf.text = 'goodbye'
-	invalidate(leaf)
+	await invalidate(leaf)
 
 	assert_eq(el.innerHTML, '<!--?[-->'.repeat(DEPTH + 1) + 'goodbye' + '<!--?]-->'.repeat(DEPTH + 1))
 })

src/client/tests/lists.test.ts

···
 	assert_eq(el.innerHTML, '2')
 })
 
-test('list can disappear when condition changes', () => {
+test('list can disappear when condition changes', async () => {
 	const { root, el } = setup()
 
 	const app = {
···
 	assert_eq(el.innerHTML, '<div>1</div><div>2</div><div>3</div>')
 
 	app.show = false
-	invalidate(app)
+	await invalidate(app)
 	assert_eq(el.innerHTML, '')
 })
 

src/client/tests/renderable.test.ts

···
-import { html } from 'dhtml'
+import { html, type Displayable } from 'dhtml'
 import { invalidate, onMount, onUnmount } from 'dhtml/client'
-import { assert_deep_eq, assert_eq, test } from '../../../scripts/test/test.ts'
+import { assert, assert_deep_eq, assert_eq, test } from '../../../scripts/test/test.ts'
 import { setup } from './setup.ts'
 
-test('renderables work correctly', () => {
+test('renderables work correctly', async () => {
 	const { root, el } = setup()
 
 	root.render(
···
 	assert_eq(el.innerHTML, 'Count: 0')
 
 	// but invalidating it shouldn't:
-	invalidate(app)
+	await invalidate(app)
 	assert_eq(el.innerHTML, 'Count: 1')
-	invalidate(app)
+	await invalidate(app)
 	assert_eq(el.innerHTML, 'Count: 2')
 	assert_eq(app.i, 3)
 })
···
 	assert_eq(el.innerHTML, 'this was thrown')
 })
 
-test('onMount calls in the right order', () => {
+test('onMount calls in the right order', async () => {
 	const { root, el } = setup()
 
 	const sequence: string[] = []
···
 	sequence.length = 0
 
 	outer.show = false
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, '')
 	assert_deep_eq(sequence, ['outer render', 'inner cleanup'])
 	sequence.length = 0
 
 	outer.show = true
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, 'inner')
 	// inner is mounted a second time because of the above cleanup
 	assert_deep_eq(sequence, ['outer render', 'inner mount', 'inner render'])
···
 	assert_eq(calls, 1)
 })
 
-test('onUnmount deep works correctly', () => {
+test('onUnmount deep works correctly', async () => {
 	const { root, el } = setup()
 
 	const sequence: string[] = []
···
 	sequence.length = 0
 
 	outer.show = false
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, '')
 	assert_deep_eq(sequence, ['outer render', 'inner abort'])
 	sequence.length = 0
 
 	outer.show = true
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, 'inner')
 	assert_deep_eq(sequence, ['outer render', 'inner render'])
 	sequence.length = 0
 
 	outer.show = false
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, '')
 	assert_deep_eq(sequence, ['outer render', 'inner abort'])
 	sequence.length = 0
 })
 
-test('onUnmount shallow works correctly', () => {
+test('onUnmount shallow works correctly', async () => {
 	const { root, el } = setup()
 
 	const sequence: string[] = []
···
 	sequence.length = 0
 
 	outer.show = false
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, '')
 	assert_deep_eq(sequence, ['outer render', 'inner abort'])
 	sequence.length = 0
 
 	outer.show = true
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, 'inner')
 	assert_deep_eq(sequence, ['outer render', 'inner render'])
 	sequence.length = 0
 
 	outer.show = false
-	invalidate(outer)
+	await invalidate(outer)
 	assert_eq(el.innerHTML, '')
 	assert_deep_eq(sequence, ['outer render', 'inner abort'])
 	sequence.length = 0
···
 	}
 })
 
-test('renderables can be rendered in multiple places at once', () => {
+test('renderables can be rendered in multiple places at once', async () => {
 	const { root: root1, el: el1 } = setup()
 	const { root: root2, el: el2 } = setup()
 
···
 
 	// Update the renderable - both should update
 	app.value = 'updated'
-	invalidate(app)
+	await invalidate(app)
 	assert_eq(el1.innerHTML, 'updated')
 	assert_eq(el2.innerHTML, 'updated')
 
···
 	assert_eq(mounted, 0) // Now unmounted
 })
 
-test('renderables can be rendered in multiple places at once with a single root', () => {
+test('renderables can be rendered in multiple places at once with a single root', async () => {
 	const { root, el } = setup()
 
 	let mounted = 0
···
 	assert_eq(el.innerHTML, '<span>shared</span><span>shared</span>')
 
 	thing.value = 'updated'
-	invalidate(thing)
+	await invalidate(thing)
 	assert_eq(mounted, 1)
 	assert_eq(el.innerHTML, '<span>updated</span><span>updated</span>')
 
···
 	assert_eq(mounted, 0)
 })
 
-test('invalidating an unmounted renderable does nothing', () => {
+test('invalidating an unmounted renderable does nothing', async () => {
 	const { root, el } = setup()
 
 	const app1 = {
···
 	root.render(app2)
 	assert_eq(el.textContent, 'app2')
 
-	invalidate(app1)
+	await invalidate(app1)
 	assert_eq(el.textContent, 'app2')
 })
 
···
 	assert_eq(unmounted, 1)
 })
 
-test('invalidating a parent does not re-render a child', () => {
+test('invalidating a parent does not re-render a child', async () => {
 	const { root, el } = setup()
 
 	let renders = 0
···
 	assert_eq(el.innerHTML, 'child')
 	assert_eq(renders, 1)
 
-	invalidate(parent)
+	await invalidate(parent)
 	assert_eq(el.innerHTML, 'child')
 	assert_eq(renders, 1)
 })
+
+test('invalidating parent during child render triggers update', async () => {
+	const { root, el } = setup()
+
+	let promise: Promise<void>
+	const item = {
+		render() {
+			app.loading = true
+			promise = invalidate(app)
+			return 'created'
+		},
+	}
+
+	const app = {
+		loading: false,
+
+		render() {
+			if (this.loading) return 'loading'
+			return item
+		},
+	}
+
+	root.render(app)
+	assert(promise!)
+	await promise
+	assert_eq(el.innerHTML, 'loading')
+})
+
+test('invalidating grandparent during child render triggers update', async () => {
+	const { root, el } = setup()
+
+	let promise: Promise<void>
+	const item = {
+		render() {
+			app.loading = true
+			promise = invalidate(app)
+			return 'created'
+		},
+	}
+
+	const middle = {
+		item: null as Displayable,
+
+		render() {
+			return this.item
+		},
+	}
+
+	const app = {
+		loading: false,
+
+		render() {
+			if (this.loading) return 'loading'
+			return middle
+		},
+	}
+
+	root.render(app)
+	assert_eq(el.innerHTML, '')
+
+	middle.item = item
+	await invalidate(middle)
+	assert(promise!)
+	await promise
+	assert_eq(el.innerHTML, 'loading')
+})
+
+test('invalidate drains reinvalidation of the same renderable before resolve', async () => {
+	const { root, el } = setup()
+
+	let state = 0
+	let nested: Promise<void> | undefined
+	const app = {
+		render() {
+			if (state === 1) {
+				state = 2
+				nested = invalidate(app)
+			}
+			return '' + state
+		},
+	}
+
+	root.render(app)
+	assert_eq(el.innerHTML, '0')
+
+	state = 1
+	const promise = invalidate(app)
+	await promise
+	assert_eq(el.innerHTML, '2')
+	assert(nested!)
+	await nested
+})

src/server.ts

···
 }
 
 function render_directive(value: unknown) {
-    // Treat null/undefined as no-op, matching client behavior.
-    if (value == null) return ''
+	// Treat null/undefined as no-op, matching client behavior.
+	if (value == null) return ''
 
-    // In dev, ensure anything else is a function; on the server we don't execute it.
-    assert(typeof value === 'function')
-    return ''
+	// In dev, ensure anything else is a function; on the server we don't execute it.
+	assert(typeof value === 'function')
+	return ''
 }
 
 function render_attribute(name: string, value: unknown) {