port to typescript (#47)

* noImplicitAny
* typescript
* split into many files
* change case to snake_case
* switch build to rolldown
* drop assert statements from prod build
* generate dist package json
* generate isolated bundled declarations
* share the index code between client/server

build.js

···
+import terser from '@rollup/plugin-terser'
+import { createBundle } from 'dts-buddy'
+import MagicString from 'magic-string'
+import { readFile, rm, writeFile } from 'node:fs/promises'
+import { brotliCompressSync, gzipSync } from 'node:zlib'
+import { build } from 'rolldown'
+import { walk } from 'zimmerframe'
+
+try {
+	await rm('dist', { recursive: true })
+} catch {}
+
+/** @type {import('rolldown').Plugin} */
+const strip_asserts_plugin = {
+	name: 'strip-asserts',
+	transform(code, id, { moduleType }) {
+		if (id.includes('node_modules')) return
+
+		const ast = this.parse(code, { lang: moduleType })
+		const source = new MagicString(code, { filename: id })
+
+		walk(/** @type {import('@oxc-project/types').Node} */ (ast), null, {
+			CallExpression(node, { next }) {
+				if (node.callee.type === 'Identifier' && node.callee.name === 'assert') {
+					source.update(node.start, node.end, ';')
+					return
+				}
+
+				next()
+			},
+		})
+
+		return { code: source.toString(), map: source.generateMap() }
+	},
+}
+
+/** @returns {import('rolldown').BuildOptions} */
+function define_bundle(env) {
+	const is_dev = env === 'dev'
+
+	return {
+		input: {
+			client: './src/client.ts',
+			server: './src/server.ts',
+			index: './src/index.ts',
+		},
+		plugins: [!is_dev && strip_asserts_plugin],
+		output: {
+			dir: 'dist',
+			entryFileNames: is_dev ? '[name].js' : '[name].min.js',
+			chunkFileNames: is_dev ? '[name].js' : '[name].min.js',
+			banner: is_dev ? '// @ts-nocheck' : undefined,
+			minify: !is_dev,
+			plugins: [
+				!is_dev &&
+					terser({
+						mangle: { properties: { regex: /^_/ } },
+					}),
+			],
+		},
+		define: {
+			__DEV__: JSON.stringify(is_dev),
+		},
+	}
+}
+
+const bundles = await build([define_bundle('dev'), define_bundle('prod')])
+
+await createBundle({
+	project: 'tsconfig.json',
+	output: 'dist/types.d.ts',
+	modules: {
+		dhtml: './src/index.ts',
+		'dhtml/client': './src/client.ts',
+		'dhtml/server': './src/server.ts',
+	},
+})
+
+const pkg = JSON.parse(await readFile('package.json', 'utf8'))
+
+delete pkg.scripts
+delete pkg.devDependencies
+delete pkg.prettier
+;(function walk(exports) {
+	if (typeof exports === 'string') {
+		if (exports.startsWith('./src/')) exports = exports.slice('./src/'.length)
+		exports = exports.replace(/\.ts$/, '')
+		return {
+			types: './types.d.ts',
+			production: `./${exports}.min.js`,
+			default: `./${exports}.js`,
+		}
+	}
+	for (const key in exports) {
+		exports[key] = walk(exports[key])
+	}
+	return exports
+})(pkg.exports)
+
+await writeFile('dist/package.json', JSON.stringify(pkg, null, 2))
+
+console.table(
+	Object.fromEntries(
+		bundles.flatMap(bundle =>
+			bundle.output.map(file => [
+				file.fileName,
+				{
+					normal: file.code.length,
+					gzip: gzipSync(file.code).length,
+					brotli: brotliCompressSync(file.code).length,
+				},
+			]),
+		),
+	),
+)

build.sh

···
-#!/bin/sh
-
-mkdir -p dist
-
-build() {
-    esbuild src/$1.$2 --bundle --minify --format=esm --define:DHTML_PROD=true --mangle-props=^_ --drop:console --drop-labels=DEV |
-    terser --mangle --compress --module --output dist/$1.min.js
-    printf "min:    %d bytes\n" "$(wc -c <dist/$1.min.js)"
-
-    gzip --best <dist/$1.min.js >dist/$1.min.js.gz
-    printf "gzip:   %d bytes\n" "$(wc -c <dist/$1.min.js.gz)"
-
-    brotli --best <dist/$1.min.js >dist/$1.min.js.br
-    printf "brotli: %d bytes\n" "$(wc -c <dist/$1.min.js.br)"
-}
-
-build html js
-build html.server ts

examples/kanban/package-lock.json

···
 		},
 		"../..": {
 			"devDependencies": {
+				"@rollup/plugin-terser": "^0.4.4",
 				"@vitest/browser": "^3.0.6",
 				"@vitest/coverage-v8": "^3.0.6",
 				"@vitest/ui": "^3.0.5",
 				"dhtml": ".",
-				"esbuild": "^0.24.0",
+				"dts-buddy": "^0.5.5",
+				"htmlparser2": "^10.0.0",
+				"magic-string": "^0.30.17",
 				"playwright": "^1.50.1",
 				"prettier": "^3.4.2",
-				"terser": "^5.37.0",
+				"rolldown": "^1.0.0-beta.6",
 				"typescript": "^5.7.2",
-				"vitest": "^3.0.6"
+				"vitest": "^3.0.6",
+				"zimmerframe": "^1.1.2"
 			}
+		},
+		"../../dist": {
+			"name": "dhtml",
+			"extraneous": true
 		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.25.0",

examples/kanban/src/app.ts

···
 import './styles.css'
 
-import { html, onUnmount } from 'dhtml'
+import { html } from 'dhtml'
+import { onUnmount } from 'dhtml/client'
 import { Database, type ID } from './db'
 import { Bus } from './util/bus'
 import { Router } from './util/router'

examples/kanban/src/main.ts

···
-import { createRoot } from 'dhtml'
+import { createRoot } from 'dhtml/client'
 import { App } from './app'
 
 const root = createRoot(document.body)

examples/kanban/src/pages/board/text.ts

···
-import { html, attr } from 'dhtml'
+import { html } from 'dhtml'
+import { attr } from 'dhtml/client'
 
 export function text({ value, onSubmit }: { value: string; onSubmit: (value: string) => void }) {
 	return html`

examples/kanban/src/util/decorators.ts

···
-import { invalidate, type Renderable } from 'dhtml'
+import type { Renderable } from 'dhtml'
+import { invalidate } from 'dhtml/client'
 
 export function state<This extends Renderable, Value>(
 	target: ClassAccessorDecoratorTarget<This, Value>,

examples/kanban/src/util/query.ts

···
-import { invalidate, onMount, type Renderable } from 'dhtml'
+import type { Renderable } from 'dhtml'
+import { invalidate, onMount } from 'dhtml/client'
 import type { Bus } from './bus'
 import { suspend } from './suspense'
 

examples/kanban/src/util/router.ts

···
 	type RouterConfig as BrowserRouterConfig,
 } from '@tombl/router/browser'
 import type { Params } from '@tombl/router/matcher'
-import { html, onMount, type Displayable } from 'dhtml'
+import { html, type Displayable } from 'dhtml'
+import { onMount } from 'dhtml/client'
 import { state } from './decorators'
 
 type PageClass<Path extends string, Context> = new (ctx: Context, params: Params<Path>) => Displayable

examples/kanban/src/util/suspense.ts

···
-import { html, invalidate, type Renderable } from 'dhtml'
+import { html, type Renderable } from 'dhtml'
+import { invalidate } from 'dhtml/client'
 
 const results = new WeakMap<
 	Promise<unknown>,

examples/todomvc/index.html

···
 		<script type="importmap">
 			{
 				"imports": {
-					"dhtml": "../../src/html.js"
+					"dhtml": "../../dist/index.client.js",
+					"dhtml/client": "../../dist/client.js"
 				}
 			}
 		</script>

examples/todomvc/main.js

···
-import { createRoot, html, invalidate } from 'dhtml'
+// @ts-check
+
+import { html } from 'dhtml'
+import { createRoot, invalidate } from 'dhtml/client'
 
 function classes(...args) {
 	const classes = args.flatMap(a => (a ? a.split(' ') : []))

index.html

···
 		<link rel="stylesheet" href="reset.css" />
 		<title>dhtml</title>
 		<script type="module">
-			globalThis.DHTML_PROD = !new URLSearchParams(location.search).has('dev')
+			globalThis.__DEV__ = new URLSearchParams(location.search).has('dev')
 			const { createRoot, html, invalidate } = await import('./src/html.js')
 			const root = createRoot(document.body)
 			Object.assign(globalThis, { createRoot, html, root })

package-lock.json

···
 	"packages": {
 		"": {
 			"name": "dhtml",
-			"dev": true,
 			"devDependencies": {
+				"@rollup/plugin-terser": "^0.4.4",
 				"@vitest/browser": "^3.0.6",
 				"@vitest/coverage-v8": "^3.0.6",
 				"@vitest/ui": "^3.0.5",
 				"dhtml": ".",
-				"esbuild": "^0.24.0",
+				"dts-buddy": "^0.5.5",
 				"htmlparser2": "^10.0.0",
+				"magic-string": "^0.30.17",
 				"playwright": "^1.50.1",
 				"prettier": "^3.4.2",
-				"terser": "^5.37.0",
+				"rolldown": "^1.0.0-beta.6",
 				"typescript": "^5.7.2",
-				"vitest": "^3.0.6"
+				"vitest": "^3.0.6",
+				"zimmerframe": "^1.1.2"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
···
 			"dependencies": {
 				"@types/tough-cookie": "^4.0.5",
 				"tough-cookie": "^4.1.4"
+			}
+		},
+		"node_modules/@emnapi/core": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.3.1.tgz",
+			"integrity": "sha512-pVGjBIt1Y6gg3EJN8jTcfpP/+uuRksIo055oE/OBkDNcjZqVbfkWCksG1Jp4yZnj3iKWyWX8fdG/j6UDYPbFog==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/wasi-threads": "1.0.1",
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@emnapi/runtime": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
+			"integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@emnapi/wasi-threads": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.1.tgz",
+			"integrity": "sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
 			}
 		},
 		"node_modules/@esbuild/aix-ppc64": {
···
 				"node": ">=18"
 			}
 		},
+		"node_modules/@napi-rs/wasm-runtime": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.7.tgz",
+			"integrity": "sha512-5yximcFK5FNompXfJFoWanu5l8v1hNGqNHh9du1xETp9HWk/B/PzvchX55WYOPaIeNglG8++68AAiauBAtbnzw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "^1.3.1",
+				"@emnapi/runtime": "^1.3.1",
+				"@tybys/wasm-util": "^0.9.0"
+			}
+		},
 		"node_modules/@open-draft/deferred-promise": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
···
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@oxc-project/types": {
+			"version": "0.58.1",
+			"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.58.1.tgz",
+			"integrity": "sha512-/412rL5TIAsZJ428FvFsZCKYsnnKsABv9Z7xZmdtUylGT+qiN240wHU++HdHwYj2j1A5SeScB4O4t8EjjcPlUw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/Boshen"
+			}
+		},
 		"node_modules/@pkgjs/parseargs": {
 			"version": "0.11.0",
 			"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
···
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@rolldown/binding-darwin-arm64": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-beta.6.tgz",
+			"integrity": "sha512-Dzayzv3wH3q+mLu+ZTNIqykV502amJnMsyVEGQHZ4Nq4GQ5w0nrMFH0zs+imIb1C+NYPUXMcIj/UF/PDWXvVUA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rolldown/binding-darwin-x64": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-beta.6.tgz",
+			"integrity": "sha512-Qd+Dyus1TbFTqDcUh4QQ1rEtEoP69IMB6bQdLtzijvYzhV1P2isnCDPsgjebqz+3Jb850UQMWSQf0ygaLdsD7g==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rolldown/binding-freebsd-x64": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-beta.6.tgz",
+			"integrity": "sha512-nPCph8jSXMUXIUgiIEZM32jb+XsOU63vVkk6SEIMQh8HBxpNw1xISj4WFpywMI97hVjiQxEZOzPiqSeOPJoJZA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-beta.6.tgz",
+			"integrity": "sha512-V/0LsI5O6rQVE84HZllvTWlwX2AwnbU9NP50oJn7TrnWFwaVyV/x+FwCl6DykV3GhBc2t6Pp4X35L+Q5v9Kjtg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rolldown/binding-linux-arm64-gnu": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-beta.6.tgz",
+			"integrity": "sha512-uk4bBCq2IS586gjo6BwzBePrXij/zzU0rwIAOzg7XnIGrgnhZ8iUwX1tUHwOTLATeFfvdAF3dN3eLdObt7Q6XQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rolldown/binding-linux-arm64-musl": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-beta.6.tgz",
+			"integrity": "sha512-+DEjh4orr5vGASIjFuEtjIfKpSF9wPbUG5QCJ+zdXJ+e/SPb5GxqzhAAGAQE9upWzVYU4Gca4WxzP51JEVU40w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rolldown/binding-linux-x64-gnu": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-beta.6.tgz",
+			"integrity": "sha512-/ruUtvsP5iXFqOqrhymjz2oH+KLsDyyJaD0YSwuM0Sf3kCtQ4D2cpnMzjzTWtdPrP2NKFduDCFazYKiGyPtIfQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rolldown/binding-linux-x64-musl": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-beta.6.tgz",
+			"integrity": "sha512-1RCIuyk0kDzPLwopcsfFXjWqUVuzn54nQNk+97O9auREIshEOEf/c3+xpjKNKYpLXpV9ZetLlgv60E1yE3conw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rolldown/binding-wasm32-wasi": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-beta.6.tgz",
+			"integrity": "sha512-da3ACjk70tIT6QNQCaLjDZ0uFBAO8H3UT+tfm1rclE6SAACCwiXZV5qC8yprNguE0wx8QvhyWnt1h9R50UovGg==",
+			"cpu": [
+				"wasm32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@napi-rs/wasm-runtime": "^0.2.4"
+			},
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@rolldown/binding-win32-arm64-msvc": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-beta.6.tgz",
+			"integrity": "sha512-sh0YWjjQrNGzv3BFSQnySKP1+0RboVX4TMY4oyoqmhe1pDbUVFmIbdSWPAH9ppIX1DVYoR/g/gcGIi/XgZZlEw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rolldown/binding-win32-ia32-msvc": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.0.0-beta.6.tgz",
+			"integrity": "sha512-IqoZ4+vVVdO0YcKm2NdzhCdGIQm63JSaI5dK/BS+AmwfjB+7ThTnmYw9qhoNIOrQ4f/Dyjlmp+E23N+JzcmxwQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rolldown/binding-win32-x64-msvc": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-beta.6.tgz",
+			"integrity": "sha512-ZxH7/+Wa88KiBa4TMCz8gj6TNewVeZr1J93TwU4AA6U2TFTgtkrx/9DbYUhoQ/m9L5+iHaPT++z2la5nVr9t+A==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/plugin-terser": {
+			"version": "0.4.4",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+			"integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"serialize-javascript": "^6.0.1",
+				"smob": "^1.0.0",
+				"terser": "^5.17.4"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@rollup/rollup-android-arm-eabi": {
 			"version": "4.34.8",
 			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
···
 				"@testing-library/dom": ">=7.21.4"
 			}
 		},
+		"node_modules/@tybys/wasm-util": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
+			"integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
 		"node_modules/@types/aria-query": {
 			"version": "5.0.4",
 			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
···
 			"integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
 			"dev": true,
 			"license": "MIT"
+		},
+		"node_modules/@valibot/to-json-schema": {
+			"version": "1.0.0-rc.0",
+			"resolved": "https://registry.npmjs.org/@valibot/to-json-schema/-/to-json-schema-1.0.0-rc.0.tgz",
+			"integrity": "sha512-F3WDgnPzcDs9Y8qZwU9qfPnEJBQ6lCMCFjI7VsMjAza6yAixGr4cZ50gOy6zniSCk49GkFvq2a6cBKfZjTpyOw==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"valibot": "^1.0.0 || ^1.0.0-beta.5 || ^1.0.0-rc"
+			}
 		},
 		"node_modules/@vitest/browser": {
 			"version": "3.0.6",
···
 				"url": "https://github.com/fb55/domutils?sponsor=1"
 			}
 		},
+		"node_modules/dts-buddy": {
+			"version": "0.5.5",
+			"resolved": "https://registry.npmjs.org/dts-buddy/-/dts-buddy-0.5.5.tgz",
+			"integrity": "sha512-Mu5PJuP7C+EqZIwDtW/bG1tVli1UFhRIyW/dERBVBYk28OviTkribu9S2LpDQ0HF2MbkqnjQIkbbE6HnepdNTQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/source-map": "^0.3.5",
+				"@jridgewell/sourcemap-codec": "^1.4.15",
+				"kleur": "^4.1.5",
+				"locate-character": "^3.0.0",
+				"magic-string": "^0.30.4",
+				"sade": "^1.8.1",
+				"tinyglobby": "^0.2.10",
+				"ts-api-utils": "^1.0.3"
+			},
+			"bin": {
+				"dts-buddy": "src/cli.js"
+			},
+			"peerDependencies": {
+				"typescript": ">=5.0.4 <5.8"
+			}
+		},
 		"node_modules/eastasianwidth": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
···
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/kleur": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/locate-character": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/loupe": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
···
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
+		"node_modules/mri": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/mrmime": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
···
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/randombytes": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+			"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"safe-buffer": "^5.1.0"
+			}
+		},
 		"node_modules/react-is": {
 			"version": "17.0.2",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
···
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/rolldown": {
+			"version": "1.0.0-beta.6",
+			"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-beta.6.tgz",
+			"integrity": "sha512-0FOZc1kJtHoCR4Se72yFISk3X1kjMtWHQ/567fRw1PMxtQY0cZ0h32pq85tQhMVJkyp5HZ9Mlz9sCx0BUFVeIw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@oxc-project/types": "0.58.1",
+				"@valibot/to-json-schema": "1.0.0-rc.0",
+				"valibot": "1.0.0-rc.4"
+			},
+			"bin": {
+				"rolldown": "bin/cli.js"
+			},
+			"optionalDependencies": {
+				"@rolldown/binding-darwin-arm64": "1.0.0-beta.6",
+				"@rolldown/binding-darwin-x64": "1.0.0-beta.6",
+				"@rolldown/binding-freebsd-x64": "1.0.0-beta.6",
+				"@rolldown/binding-linux-arm-gnueabihf": "1.0.0-beta.6",
+				"@rolldown/binding-linux-arm64-gnu": "1.0.0-beta.6",
+				"@rolldown/binding-linux-arm64-musl": "1.0.0-beta.6",
+				"@rolldown/binding-linux-x64-gnu": "1.0.0-beta.6",
+				"@rolldown/binding-linux-x64-musl": "1.0.0-beta.6",
+				"@rolldown/binding-wasm32-wasi": "1.0.0-beta.6",
+				"@rolldown/binding-win32-arm64-msvc": "1.0.0-beta.6",
+				"@rolldown/binding-win32-ia32-msvc": "1.0.0-beta.6",
+				"@rolldown/binding-win32-x64-msvc": "1.0.0-beta.6"
+			},
+			"peerDependencies": {
+				"@oxc-project/runtime": "0.58.1"
+			},
+			"peerDependenciesMeta": {
+				"@oxc-project/runtime": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/rollup": {
 			"version": "4.34.8",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.8.tgz",
···
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/sade": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mri": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"license": "MIT"
+		},
 		"node_modules/semver": {
 			"version": "7.7.1",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
···
 				"node": ">=10"
 			}
 		},
+		"node_modules/serialize-javascript": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+			"integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"randombytes": "^2.1.0"
+			}
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
···
 			"engines": {
 				"node": ">=18"
 			}
+		},
+		"node_modules/smob": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
+			"integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/source-map": {
 			"version": "0.6.1",
···
 				"node": ">=6"
 			}
 		},
+		"node_modules/ts-api-utils": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+			"integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.2.0"
+			}
+		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"dev": true,
+			"license": "0BSD",
+			"optional": true
+		},
 		"node_modules/type-fest": {
 			"version": "4.33.0",
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.33.0.tgz",
···
 			"dependencies": {
 				"querystringify": "^2.1.1",
 				"requires-port": "^1.0.0"
+			}
+		},
+		"node_modules/valibot": {
+			"version": "1.0.0-rc.4",
+			"resolved": "https://registry.npmjs.org/valibot/-/valibot-1.0.0-rc.4.tgz",
+			"integrity": "sha512-VRaChgFv7Ab0P54AMLu7+GqoexdTPQ54Plj59X9qV0AFozI3j9CGH43skg+TqgMpXnrW8jxlJ2TTHAtAD3t4qA==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"typescript": ">=5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/vite": {
···
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+			"dev": true,
+			"license": "MIT"
 		}
 	}
 }

package.json

···
 {
 	"name": "dhtml",
 	"type": "module",
-	"main": "src/html.js",
 	"exports": {
-		".": {
-			"production": "./dist/html.min.js",
-			"default": "./src/html.js"
-		},
-		"./server": {
-			"production": "./dist/html.server.min.js",
-			"default": "./src/html.server.js"
-		}
+		".": "./src/index.ts",
+		"./client": "./src/client.ts",
+		"./server": "./src/server.ts"
 	},
 	"scripts": {
-		"build": "./build.sh",
+		"build": "node build.js",
 		"format": "prettier --write . --cache",
 		"check": "tsc",
 		"test": "vitest run",
···
 		"test:prod": "npm run build && NODE_ENV=production vitest run"
 	},
 	"devDependencies": {
+		"@rollup/plugin-terser": "^0.4.4",
 		"@vitest/browser": "^3.0.6",
 		"@vitest/coverage-v8": "^3.0.6",
 		"@vitest/ui": "^3.0.5",
 		"dhtml": ".",
-		"esbuild": "^0.24.0",
+		"dts-buddy": "^0.5.5",
 		"htmlparser2": "^10.0.0",
+		"magic-string": "^0.30.17",
 		"playwright": "^1.50.1",
 		"prettier": "^3.4.2",
-		"terser": "^5.37.0",
+		"rolldown": "^1.0.0-beta.6",
 		"typescript": "^5.7.2",
-		"vitest": "^3.0.6"
+		"vitest": "^3.0.6",
+		"zimmerframe": "^1.1.2"
 	},
 	"prettier": {
 		"arrowParens": "avoid",

src/client.ts

···
+import { create_root_into, type RootPublic as Root } from './client/root.ts'
+
+export function createRoot(parent: Node): Root {
+	return create_root_into(parent)
+}
+export type { Root }
+
+export { getParentNode, invalidate, keyed, onMount, onUnmount } from './client/controller.ts'
+export { attr_directive as attr, type Directive } from './client/parts.ts'

src/client/compiler.ts

···
+import { assert } from '../shared.ts'
+import {
+	create_attribute_part,
+	create_child_part,
+	create_directive_part,
+	createPropertyPart,
+	type Part,
+} from './parts.ts'
+import type { Span } from './span.ts'
+import { is_comment, is_document_fragment, is_element, is_text } from './util.ts'
+
+const NODE_FILTER_ELEMENT: typeof NodeFilter.SHOW_ELEMENT = 1
+const NODE_FILTER_TEXT: typeof NodeFilter.SHOW_TEXT = 4
+const NODE_FILTER_COMMENT: typeof NodeFilter.SHOW_COMMENT = 128
+
+export interface CompiledTemplate {
+	_content: DocumentFragment
+	_parts: [idx: number, createPart: (node: Node | Span, span: Span) => Part][]
+	_root_parts: number[]
+}
+
+const DYNAMIC_WHOLE = /^dyn-\$(\d+)\$$/i
+const DYNAMIC_GLOBAL = /dyn-\$(\d+)\$/gi
+const FORCE_ATTRIBUTES = /-|^class$|^for$/i
+
+const templates: Map<TemplateStringsArray, CompiledTemplate> = new Map()
+export function compile_template(statics: TemplateStringsArray): CompiledTemplate {
+	const cached = templates.get(statics)
+	if (cached) return cached
+
+	const template_element = document.createElement('template')
+	template_element.innerHTML = statics.reduce((a, v, i) => a + v + (i === statics.length - 1 ? '' : `dyn-$${i}$`), '')
+
+	let next_part = 0
+
+	const compiled: CompiledTemplate = {
+		_content: template_element.content,
+		_parts: Array(statics.length - 1),
+		_root_parts: [],
+	}
+
+	function patch(
+		node: DocumentFragment | HTMLElement | SVGElement,
+		idx: number,
+		createPart: (node: Node | Span, span: Span) => Part,
+	) {
+		assert(next_part < compiled._parts.length, 'got more parts than expected')
+		if (is_document_fragment(node)) compiled._root_parts.push(next_part)
+		else if ('dynparts' in node.dataset) node.dataset.dynparts += ' ' + next_part
+		// @ts-expect-error -- this assigment will cast nextPart to a string
+		else node.dataset.dynparts = next_part
+		compiled._parts[next_part++] = [idx, createPart]
+	}
+
+	const walker = document.createTreeWalker(
+		template_element.content,
+		NODE_FILTER_TEXT | NODE_FILTER_ELEMENT | (__DEV__ ? NODE_FILTER_COMMENT : 0),
+	)
+	// stop iterating once we've hit the last part, but if we're in dev mode, keep going to check for mistakes.
+	while ((next_part < compiled._parts.length || __DEV__) && walker.nextNode()) {
+		const node = walker.currentNode
+		if (is_text(node)) {
+			// reverse the order because we'll be supplying ChildPart with its index in the parent node.
+			// and if we apply the parts forwards, indicies will be wrong if some prior part renders more than one node.
+			// also reverse it because that's the correct order for splitting.
+			const nodes = [...node.data.matchAll(DYNAMIC_GLOBAL)].reverse().map(match => {
+				node.splitText(match.index + match[0].length)
+				const dyn = new Comment()
+				node.splitText(match.index).replaceWith(dyn)
+				return [dyn, parseInt(match[1])] as const
+			})
+
+			if (nodes.length) {
+				const parent_node = node.parentNode
+				assert(parent_node !== null, 'all text nodes should have a parent node')
+				assert(
+					parent_node instanceof DocumentFragment ||
+						parent_node instanceof HTMLElement ||
+						parent_node instanceof SVGElement,
+				)
+				let siblings = [...parent_node.childNodes]
+				for (const [node, idx] of nodes) {
+					const child = siblings.indexOf(node)
+					patch(parent_node, idx, (node, span) => create_child_part(node, span, child))
+				}
+			}
+		} else if (__DEV__ && is_comment(node)) {
+			// just in dev, stub out a fake part for every interpolation in a comment.
+			// this means you can comment out code inside a template and not run into
+			// issues with incorrect part counts.
+			// in production the check is skipped, so we can also skip this.
+			for (const _match of node.data.matchAll(DYNAMIC_GLOBAL)) {
+				compiled._parts[next_part++] = [parseInt(_match[1]), () => ({ update() {}, detach() {} })]
+			}
+		} else {
+			assert(is_element(node))
+			assert(node instanceof HTMLElement || node instanceof SVGElement)
+
+			const to_remove = []
+			for (let name of node.getAttributeNames()) {
+				const value = node.getAttribute(name)
+				assert(value !== null)
+
+				let match = DYNAMIC_WHOLE.exec(name)
+				if (match !== null) {
+					// directive:
+					to_remove.push(name)
+					assert(value === '', `directives must not have values`)
+					patch(node, parseInt(match[1]), node => {
+						assert(node instanceof Node)
+						return create_directive_part(node)
+					})
+				} else {
+					// properties:
+					match = DYNAMIC_WHOLE.exec(value)
+					if (match !== null) {
+						to_remove.push(name)
+						if (FORCE_ATTRIBUTES.test(name)) {
+							patch(node, parseInt(match[1]), node => {
+								assert(node instanceof Element)
+								return create_attribute_part(node, name)
+							})
+						} else {
+							if (!(name in node)) {
+								for (const property in node) {
+									if (property.toLowerCase() === name) {
+										name = property
+										break
+									}
+								}
+							}
+							patch(node, parseInt(match[1]), node => {
+								assert(node instanceof Node)
+								return createPropertyPart(node, name)
+							})
+						}
+					} else if (__DEV__) {
+						assert(!DYNAMIC_GLOBAL.test(value), `expected a whole dynamic value for ${name}, got a partial one`)
+					}
+				}
+			}
+			for (const name of to_remove) node.removeAttribute(name)
+		}
+	}
+
+	compiled._parts.length = next_part
+
+	templates.set(statics, compiled)
+	return compiled
+}

src/client/controller.ts

···
+import { assert, is_renderable, type Displayable, type Renderable } from '../shared.ts'
+import { type Cleanup } from './util.ts'
+
+export type Key = string | number | bigint | boolean | symbol | object | null
+
+export const controllers: WeakMap<
+	object,
+	{
+		_mounted: boolean
+		_invalidate_queued: Promise<void> | null
+		_invalidate: () => void
+		_unmount_callbacks: Set<Cleanup> | null
+		_parent_node: Node
+	}
+> = new WeakMap()
+
+export const keys: WeakMap<Displayable & object, Key> = new WeakMap()
+export const mount_callbacks: WeakMap<Renderable, Set<() => Cleanup>> = new WeakMap()
+
+export function invalidate(renderable: Renderable): Promise<void> {
+	const controller = controllers.get(renderable)
+	assert(controller, 'the renderable has not been rendered')
+	return (controller._invalidate_queued ??= Promise.resolve().then(() => {
+		controller._invalidate_queued = null
+		controller._invalidate()
+	}))
+}
+
+export function onMount(renderable: Renderable, callback: () => Cleanup): void {
+	assert(is_renderable(renderable), 'expected a renderable')
+
+	const controller = controllers.get(renderable)
+	if (controller?._mounted) {
+		;(controller._unmount_callbacks ??= new Set()).add(callback())
+		return
+	}
+
+	let cb = mount_callbacks.get(renderable)
+	if (!cb) mount_callbacks.set(renderable, (cb = new Set()))
+	cb.add(callback)
+}
+
+export function onUnmount(renderable: Renderable, callback: () => void): void {
+	onMount(renderable, () => callback)
+}
+
+export function getParentNode(renderable: Renderable): Node {
+	const controller = controllers.get(renderable)
+	assert(controller, 'the renderable has not been rendered')
+	return controller._parent_node
+}
+
+export function keyed<T extends Displayable & object>(renderable: T, key: Key): T {
+	if (__DEV__ && keys.has(renderable)) throw new Error('renderable already has a key')
+	keys.set(renderable, key)
+	return renderable
+}

src/client/parts.ts

···
+import {
+	assert,
+	is_html,
+	is_iterable,
+	is_renderable,
+	single_part_template,
+	type Displayable,
+	type Renderable,
+} from '../shared.ts'
+import { controllers, keys, mount_callbacks } from './controller.ts'
+import { create_root, create_root_after, type Root } from './root.ts'
+import { create_span, span_delete_contents, span_extract_contents, span_insert_node, type Span } from './span.ts'
+import { type Cleanup } from './util.ts'
+
+export interface Part {
+	update(value: unknown): void
+	detach(): void
+}
+
+export function create_child_part(parent_node: Node | Span, parentSpan: Span, childIndex: number): Part {
+	let span: Span
+
+	// for when we're rendering a renderable:
+	let renderable: Renderable | null = null
+
+	// for when we're rendering a template:
+	let root: Root | undefined
+
+	// for when we're rendering multiple values:
+	let roots: Root[] | undefined
+
+	// for when we're rendering a string/single dom node:
+	// undefined means no previous value, because a user-specified undefined is remapped to null
+
+	let old_value: Displayable | null | undefined
+
+	function switch_renderable(next: Renderable | null) {
+		if (renderable && renderable !== next) {
+			const controller = controllers.get(renderable)
+			if (controller?._unmount_callbacks) for (const callback of controller._unmount_callbacks) callback?.()
+			controllers.delete(renderable)
+		}
+		renderable = next
+	}
+
+	function disconnect_root() {
+		// root.detach and part.detach are mutually recursive, so this detaches children too.
+		root?.detach()
+		root = undefined
+	}
+
+	if (parent_node instanceof Node) {
+		const child = parent_node.childNodes[childIndex]
+		span = create_span(child)
+	} else {
+		let child = parent_node._start
+		for (let i = 0; i < childIndex; i++) {
+			{
+				assert(child.nextSibling !== null, 'expected more siblings')
+				assert(child.nextSibling !== parent_node._end, 'ran out of siblings before the end')
+			}
+			child = child.nextSibling
+		}
+		span = create_span(child)
+	}
+
+	return {
+		update: function update(value: Displayable) {
+			assert(span)
+			const endsWereEqual = span._parent === parentSpan._parent && span._end === parentSpan._end
+
+			if (is_renderable(value)) {
+				switch_renderable(value)
+
+				const renderable = value
+
+				if (!controllers.has(renderable))
+					controllers.set(renderable, {
+						_mounted: false,
+						_invalidate_queued: null,
+						_invalidate: () => {
+							assert(renderable === renderable, 'could not invalidate an outdated renderable')
+							update(renderable)
+						},
+						_unmount_callbacks: null, // will be upgraded to a Set if needed.
+						_parent_node: span._parent,
+					})
+
+				try {
+					value = renderable.render()
+				} catch (thrown) {
+					if (is_html(thrown)) {
+						value = thrown
+					} else {
+						throw thrown
+					}
+				}
+
+				// if render returned another renderable, we want to track/cache both renderables individually.
+				// wrap it in a nested ChildPart so that each can be tracked without ChildPart having to handle multiple renderables.
+				if (is_renderable(value)) value = single_part_template(value)
+			} else switch_renderable(null)
+
+			// if it's undefined, swap the value for null.
+			// this means if the initial value is undefined,
+			// it won't conflict with prevValue's default of undefined,
+			// so it'll still render.
+			if (value === undefined) value = null
+
+			// NOTE: we're explicitly not caching/diffing the value when it's an iterable,
+			// given it can yield different values but have the same identity. (e.g. arrays)
+			if (is_iterable(value)) {
+				if (!roots) {
+					// we previously rendered a single value, so we need to clear it.
+					disconnect_root()
+					span_delete_contents(span)
+
+					roots = []
+				}
+
+				// create or update a root for every item.
+				let i = 0
+				let end = span._start
+				for (const item of value) {
+					// @ts-expect-error -- WeakMap lookups of non-objects always return undefined, which is fine
+					const key = keys.get(item) ?? item
+					let root = (roots[i] ??= create_root_after(end))
+
+					if (key !== undefined && root._key !== key) {
+						const j = roots.findIndex(r => r._key === key)
+						root._key = key
+						if (j !== -1) {
+							const root1 = root
+							const root2 = roots[j]
+
+							// swap the contents of the spans
+							const tmp_content = span_extract_contents(root1._span)
+							span_insert_node(root1._span, span_extract_contents(root2._span))
+							span_insert_node(root2._span, tmp_content)
+
+							// swap the spans back
+							const tmp_span = root1._span
+							root1._span = root2._span
+							root2._span = tmp_span
+
+							// swap the roots
+							roots[j] = root1
+							root = roots[i] = root2
+						}
+					}
+
+					root.render(item as Displayable)
+					end = root._span._end
+					i++
+				}
+
+				// and now remove excess roots if the iterable has shrunk.
+				while (roots.length > i) {
+					const root = roots.pop()
+					assert(root)
+					root.detach()
+					span_delete_contents(root._span)
+				}
+
+				span._end = end
+
+				// @ts-expect-error -- a null controllable will always return a null controller
+				const controller = controllers.get(renderable)
+				if (controller) {
+					controller._mounted = true
+					// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+					for (const callback of mount_callbacks.get(renderable) ?? []) {
+						;(controller._unmount_callbacks ??= new Set()).add(callback())
+					}
+					// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+					mount_callbacks.delete(renderable)
+				}
+
+				if (endsWereEqual) parentSpan._end = span._end
+
+				return
+			} else if (roots) {
+				for (const root of roots) root.detach()
+				roots = undefined
+			}
+
+			// now early return if the value hasn't changed.
+			if (Object.is(old_value, value)) return
+
+			if (is_html(value)) {
+				root ??= create_root(span)
+				root.render(value) // root.render will detach the previous tree if the template has changed.
+			} else {
+				// if we previously rendered a tree that might contain renderables,
+				// and the template has changed (or we're not even rendering a template anymore),
+				// we need to clear the old renderables.
+				disconnect_root()
+
+				if (old_value != null && value !== null && !(old_value instanceof Node) && !(value instanceof Node)) {
+					// we previously rendered a string, and we're rendering a string again.
+					assert(span._start === span._end && span._start instanceof Text)
+					span._start.data = '' + value
+				} else {
+					span_delete_contents(span)
+					if (value !== null) span_insert_node(span, value instanceof Node ? value : new Text('' + value))
+				}
+			}
+
+			old_value = value
+
+			// @ts-expect-error -- a null controllable will always return a null controller
+			const controller = controllers.get(renderable)
+			if (controller) {
+				controller._mounted = true
+				// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+				for (const callback of mount_callbacks.get(renderable) ?? []) {
+					;(controller._unmount_callbacks ??= new Set()).add(callback())
+				}
+				// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
+				mount_callbacks.delete(renderable)
+			}
+
+			if (endsWereEqual) parentSpan._end = span._end
+		},
+		detach: () => {
+			switch_renderable(null)
+			disconnect_root()
+		},
+	}
+}
+
+export function createPropertyPart(node: Node, name: string): Part {
+	return {
+		update: value => {
+			// @ts-expect-error
+			node[name] = value
+		},
+		detach: () => {
+			// @ts-expect-error
+			delete node[name]
+		},
+	}
+}
+
+export function create_attribute_part(node: Element, name: string): Part {
+	return {
+		// @ts-expect-error -- setAttribute implicitly casts the value to a string
+		update: value => node.setAttribute(name, value),
+		detach: () => node.removeAttribute(name),
+	}
+}
+
+export type Directive = (node: Element) => Cleanup
+
+export function create_directive_part(node: Node): Part {
+	let cleanup: Cleanup
+	return {
+		update: fn => {
+			assert(typeof fn === 'function' || fn == null)
+			cleanup?.()
+			cleanup = fn?.(node)
+		},
+
+		detach: () => {
+			cleanup?.()
+			cleanup = null
+		},
+	}
+}
+
+export function attr_directive(name: string, value: string | boolean | null | undefined): Directive {
+	return node => {
+		if (typeof value === 'boolean') node.toggleAttribute(name, value)
+		else if (value == null) node.removeAttribute(name)
+		else node.setAttribute(name, value)
+		return () => {
+			node.removeAttribute(name)
+		}
+	}
+}

src/client/root.ts

···
+import { assert, is_html, single_part_template, type Displayable } from '../shared.ts'
+import { compile_template, type CompiledTemplate } from './compiler.ts'
+import type { Key } from './controller.ts'
+import type { Part } from './parts.ts'
+import { create_span, span_delete_contents, span_insert_node, type Span } from './span.ts'
+
+export interface RootPublic {
+	render(value: Displayable): void
+	detach(): void
+}
+export interface Root extends RootPublic {
+	_span: Span
+	_key: Key | undefined
+}
+
+export function create_root_into(parent: Node): Root {
+	const marker = new Text()
+	parent.appendChild(marker)
+	return create_root(create_span(marker))
+}
+
+export function create_root_after(node: Node): Root {
+	assert(node.parentNode, 'expected a parent node')
+	const marker = new Text()
+	node.parentNode.insertBefore(marker, node.nextSibling)
+	return create_root(create_span(marker))
+}
+
+export function create_root(span: Span): Root {
+	let old_template: CompiledTemplate
+	let parts: [number, Part][] | undefined
+
+	function detach() {
+		if (!parts) return
+		// scan through all the parts of the previous tree, and clear any renderables.
+		for (const [_idx, part] of parts) part.detach()
+		parts = undefined
+	}
+
+	return {
+		_span: span,
+		_key: undefined,
+
+		render: (value: Displayable) => {
+			const { _dynamics: dynamics, _statics: statics } = is_html(value) ? value : single_part_template(value)
+			const template = compile_template(statics)
+
+			assert(
+				template._parts.length === dynamics.length,
+				'expected the same number of dynamics as parts. do you have a ${...} in an unsupported place?',
+			)
+
+			if (old_template !== template) {
+				detach()
+
+				old_template = template
+
+				const doc = old_template._content.cloneNode(true) as DocumentFragment
+
+				const node_by_part: Array<Node | Span> = []
+
+				for (const node of doc.querySelectorAll('[data-dynparts]')) {
+					const parts = node.getAttribute('data-dynparts')
+					assert(parts)
+					node.removeAttribute('data-dynparts')
+					// @ts-expect-error -- is part a number, is part a string, who cares?
+					for (const part of parts.split(' ')) node_by_part[part] = node
+				}
+
+				for (const part of old_template._root_parts) node_by_part[part] = span
+
+				// the fragment must be inserted before the parts are constructed,
+				// because they need to know their final location.
+				// this also ensures that custom elements are upgraded before we do things
+				// to them, like setting properties or attributes.
+				span_delete_contents(span)
+				span_insert_node(span, doc)
+
+				parts = template._parts.map(([dynamic_index, createPart], element_index) => [
+					dynamic_index,
+					createPart(node_by_part[element_index], span),
+				])
+			}
+
+			assert(parts)
+			for (const [idx, part] of parts) part.update(dynamics[idx])
+		},
+
+		detach,
+	}
+}

src/client/span.ts

···
+import { assert } from '../shared.ts'
+import { is_document_fragment } from './util.ts'
+
+export interface Span {
+	_parent: Node
+	_start: Node
+	_end: Node
+	_marker: Node | null
+}
+
+export function create_span(node: Node): Span {
+	assert(node.parentNode !== null)
+	return {
+		_parent: node.parentNode,
+		_start: node,
+		_end: node,
+		_marker: null,
+	}
+}
+
+export function span_insert_node(span: Span, node: Node): void {
+	const end = is_document_fragment(node) ? node.lastChild : node
+	if (end === null) return // empty fragment
+	span._parent.insertBefore(node, span._end.nextSibling)
+	span._end = end
+
+	if (span._start === span._marker) {
+		assert(span._start.nextSibling)
+		span._start = span._start.nextSibling
+
+		span._parent.removeChild(span._marker)
+		span._marker = null
+	}
+}
+
+export function* span_iterator(span: Span): Generator<Node, void, unknown> {
+	let node = span._start
+	for (;;) {
+		const next = node.nextSibling
+		yield node
+		if (node === span._end) return
+		assert(next, 'expected more siblings')
+		node = next
+	}
+}
+
+export function span_extract_contents(span: Span): DocumentFragment {
+	span._marker = new Text()
+	span._parent.insertBefore(span._marker, span._start)
+
+	const fragment = document.createDocumentFragment()
+	for (const node of span_iterator(span)) fragment.appendChild(node)
+
+	span._start = span._end = span._marker
+	return fragment
+}
+
+export function span_delete_contents(span: Span): void {
+	span._marker = new Text()
+	span._parent.insertBefore(span._marker, span._start)
+
+	for (const node of span_iterator(span)) span._parent.removeChild(node)
+
+	span._start = span._end = span._marker
+}

src/client/util.ts

···
+import type { Renderable } from '../shared.ts'
+
+export type Cleanup = (() => void) | void | undefined | null
+
+export const is_element = (node: Node): node is Element => node.nodeType === (1 satisfies typeof Node.ELEMENT_NODE)
+
+export const is_text = (node: Node): node is Text => node.nodeType === (3 satisfies typeof Node.TEXT_NODE)
+
+export const is_comment = (node: Node): node is Comment => node.nodeType === (8 satisfies typeof Node.COMMENT_NODE)
+
+export const is_document_fragment = (node: Node): node is DocumentFragment =>
+	node.nodeType === (11 satisfies typeof Node.DOCUMENT_FRAGMENT_NODE)

src/html.d.ts

···
-import type { BoundTemplateInstance, Cleanup, Directive, Displayable, Key, Renderable, Span } from './types.ts'
-
-export { Directive, 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: () => Cleanup): void
-export function onUnmount(renderable: Renderable, callback: () => void): void
-export function getParentNode(renderable: Renderable): Node
-
-export interface Root {
-	/* @internal */ _span: Span
-	/* @internal */ _key: unknown
-	render(value: Displayable): void
-	detach(): void
-}
-
-export function createRoot(node: Node): Root
-
-export function attr(name: string, value: string | boolean | null | undefined): Directive

src/html.js

···
-/** @import {
-	Cleanup,
-	CompiledTemplate,
-	Directive,
-	Displayable,
-	Key,
-	Renderable,
-	Span,
-} from './types' */
-
-const DEV = typeof DHTML_PROD === 'undefined' || !DHTML_PROD
-
-/** @type {typeof NodeFilter.SHOW_ELEMENT} */ const NODE_FILTER_ELEMENT = 1
-/** @type {typeof NodeFilter.SHOW_TEXT} */ const NODE_FILTER_TEXT = 4
-/** @type {typeof NodeFilter.SHOW_COMMENT} */ const NODE_FILTER_COMMENT = 128
-
-/** @return {node is Element} */
-const isElement = node => node.nodeType === /** @satisfies {typeof Node.ELEMENT_NODE} */ (1)
-
-/** @return {node is Text} */
-const isText = node => node.nodeType === /** @satisfies {typeof Node.TEXT_NODE} */ (3)
-
-/** @return {node is Comment} */
-const isComment = node => node.nodeType === /** @satisfies {typeof Node.COMMENT_NODE} */ (8)
-
-/** @return {node is DocumentFragment} */
-const isDocumentFragment = node => node.nodeType === /** @satisfies {typeof Node.DOCUMENT_FRAGMENT_NODE} */ (11)
-
-/** @return {value is Renderable} */
-const isRenderable = value => typeof value === 'object' && value !== null && 'render' in value
-
-/** @return {value is Iterable<unknown>} */
-const isIterable = value => typeof value === 'object' && value !== null && Symbol.iterator in value
-
-/** @return {value is ReturnType<typeof html>} */
-const isHtml = value => value?.$ === html
-
-export function html(/** @type {TemplateStringsArray} */ statics, /** @type {unknown[]} */ ...dynamics) {
-	/** @type {CompiledTemplate} */ let template
-
-	if (DEV) {
-		assert(
-			compileTemplate(statics)._parts.length === dynamics.length,
-			'expected the same number of dynamics as parts. do you have a ${...} in an unsupported place?',
-		)
-	}
-
-	return {
-		$: html,
-		_dynamics: dynamics,
-		get _template() {
-			return (template ??= compileTemplate(statics))
-		},
-	}
-}
-
-const singlePartTemplate = part => html`${part}`
-
-/* v8 ignore start */
-/** @return {asserts value} */
-function assert(value, message) {
-	if (!DEV) return
-	if (!value) throw new Error(message ?? 'assertion failed')
-}
-/* v8 ignore stop */
-
-/** @returns {Span} */
-function createSpan(node) {
-	DEV: assert(node.parentNode !== null)
-	return {
-		_parentNode: node.parentNode,
-		_start: node,
-		_end: node,
-		_marker: null,
-	}
-}
-
-function spanInsertNode(/** @type {Span} */ span, /** @type {Node} */ node) {
-	const end = isDocumentFragment(node) ? node.lastChild : node
-	if (end === null) return // empty fragment
-	span._parentNode.insertBefore(node, span._end.nextSibling)
-	span._end = end
-
-	if (span._start === span._marker) {
-		DEV: assert(span._start.nextSibling)
-		span._start = span._start.nextSibling
-
-		span._parentNode.removeChild(span._marker)
-		span._marker = null
-	}
-}
-
-function* spanIterator(/** @type {Span} */ span) {
-	let node = span._start
-	for (;;) {
-		const next = node.nextSibling
-		yield node
-		if (node === span._end) return
-		assert(next, 'expected more siblings')
-		node = next
-	}
-}
-
-function spanExtractContents(/** @type {Span} */ span) {
-	span._marker = new Text()
-	span._parentNode.insertBefore(span._marker, span._start)
-
-	const fragment = document.createDocumentFragment()
-	for (const node of spanIterator(span)) fragment.appendChild(node)
-
-	span._start = span._end = span._marker
-	return fragment
-}
-
-function spanDeleteContents(/** @type {Span} */ span) {
-	span._marker = new Text()
-	span._parentNode.insertBefore(span._marker, span._start)
-
-	for (const node of spanIterator(span)) span._parentNode.removeChild(node)
-
-	span._start = span._end = span._marker
-}
-
-function createRootInto(/** @type {ParentNode} */ parent) {
-	const marker = new Text()
-	parent.appendChild(marker)
-	return createRoot(createSpan(marker))
-}
-export { createRootInto as createRoot }
-
-function createRootAfter(/** @type {Node} */ node) {
-	DEV: assert(node.parentNode, 'expected a parent node')
-	const marker = new Text()
-	node.parentNode.insertBefore(marker, node.nextSibling)
-	return createRoot(createSpan(marker))
-}
-
-function createRoot(/** @type {Span} */ span) {
-	let template, parts
-
-	function detach() {
-		if (!parts) return
-		// scan through all the parts of the previous tree, and clear any renderables.
-		for (const [_idx, part] of parts) part.detach()
-		parts = undefined
-	}
-
-	return {
-		_span: span,
-		/** @type {Key | undefined} */ _key: undefined,
-
-		render: value => {
-			const html = isHtml(value) ? value : singlePartTemplate(value)
-
-			if (template !== html._template) {
-				detach()
-
-				template = html._template
-
-				const doc = /** @type {DocumentFragment} */ (template._content.cloneNode(true))
-
-				const nodeByPart = []
-				for (const node of doc.querySelectorAll('[data-dynparts]')) {
-					const parts = node.getAttribute('data-dynparts')
-					assert(parts)
-					node.removeAttribute('data-dynparts')
-					for (const part of parts.split(' ')) nodeByPart[part] = node
-				}
-
-				for (const part of template._rootParts) nodeByPart[part] = span
-
-				// the fragment must be inserted before the parts are constructed,
-				// because they need to know their final location.
-				// this also ensures that custom elements are upgraded before we do things
-				// to them, like setting properties or attributes.
-				spanDeleteContents(span)
-				spanInsertNode(span, doc)
-
-				parts = html._template._parts.map(([dynamicIdx, createPart], elementIdx) => [
-					dynamicIdx,
-					createPart(nodeByPart[elementIdx], span),
-				])
-			}
-
-			for (const [idx, part] of parts) part.update(html._dynamics[idx])
-		},
-
-		detach,
-	}
-}
-
-const DYNAMIC_WHOLE = /^dyn-\$(\d+)\$$/i
-const DYNAMIC_GLOBAL = /dyn-\$(\d+)\$/gi
-const FORCE_ATTRIBUTES = /-|^class$|^for$/i
-
-/** @type {Map<TemplateStringsArray, CompiledTemplate>} */
-const templates = new Map()
-function compileTemplate(/** @type {TemplateStringsArray} */ statics) {
-	const cached = templates.get(statics)
-	if (cached) return cached
-
-	const templateElement = document.createElement('template')
-	templateElement.innerHTML = statics.reduce((a, v, i) => a + v + (i === statics.length - 1 ? '' : `dyn-$${i}$`), '')
-
-	let nextPart = 0
-	/** @type {CompiledTemplate} */
-	const compiled = {
-		_content: templateElement.content,
-		_parts: Array(statics.length - 1),
-		_rootParts: [],
-	}
-
-	function patch(node, idx, createPart) {
-		DEV: assert(nextPart < compiled._parts.length, 'got more parts than expected')
-		if (isDocumentFragment(node)) compiled._rootParts.push(nextPart)
-		else if ('dynparts' in node.dataset) node.dataset.dynparts += ' ' + nextPart
-		else node.dataset.dynparts = nextPart
-		compiled._parts[nextPart++] = [idx, createPart]
-	}
-
-	const walker = document.createTreeWalker(
-		templateElement.content,
-		NODE_FILTER_TEXT | NODE_FILTER_ELEMENT | (DEV ? NODE_FILTER_COMMENT : 0),
-	)
-	// stop iterating once we've hit the last part, but if we're in dev mode, keep going to check for mistakes.
-	while ((nextPart < compiled._parts.length || DEV) && walker.nextNode()) {
-		const node = /** @type {Text | Element | Comment} */ (walker.currentNode)
-		if (isText(node)) {
-			// reverse the order because we'll be supplying ChildPart with its index in the parent node.
-			// and if we apply the parts forwards, indicies will be wrong if some prior part renders more than one node.
-			// also reverse it because that's the correct order for splitting.
-			const nodes = [...node.data.matchAll(DYNAMIC_GLOBAL)].reverse().map(match => {
-				node.splitText(match.index + match[0].length)
-				const dyn = new Comment()
-				node.splitText(match.index).replaceWith(dyn)
-				return /** @type {const} */ ([dyn, parseInt(match[1])])
-			})
-
-			if (nodes.length) {
-				DEV: assert(node.parentNode !== null, 'all text nodes should have a parent node')
-				let siblings = [...node.parentNode.childNodes]
-				for (const [node, idx] of nodes) {
-					const child = siblings.indexOf(node)
-					patch(node.parentNode, idx, (node, span) => createChildPart(node, span, child))
-				}
-			}
-		} else if (DEV && isComment(node)) {
-			// just in dev, stub out a fake part for every interpolation in a comment.
-			// this means you can comment out code inside a template and not run into
-			// issues with incorrect part counts.
-			// in production the check is skipped, so we can also skip this.
-			for (const _match of node.data.matchAll(DYNAMIC_GLOBAL)) {
-				compiled._parts[nextPart++] = [parseInt(_match[1]), () => ({ update() {}, detach() {} })]
-			}
-		} else {
-			assert(isElement(node))
-			const toRemove = []
-			for (let name of node.getAttributeNames()) {
-				const value = node.getAttribute(name)
-				assert(value !== null)
-
-				let match = DYNAMIC_WHOLE.exec(name)
-				if (match !== null) {
-					// directive:
-					toRemove.push(name)
-					DEV: assert(value === '', `directives must not have values`)
-					patch(node, parseInt(match[1]), node => createDirectivePart(node))
-				} else {
-					// properties:
-					match = DYNAMIC_WHOLE.exec(value)
-					if (match !== null) {
-						toRemove.push(name)
-						if (FORCE_ATTRIBUTES.test(name)) {
-							patch(node, parseInt(match[1]), node => createAttributePart(node, name))
-						} else {
-							if (!(name in node)) {
-								for (const property in node) {
-									if (property.toLowerCase() === name) {
-										name = property
-										break
-									}
-								}
-							}
-							patch(node, parseInt(match[1]), node => createPropertyPart(node, name))
-						}
-					} else if (DEV) {
-						assert(!DYNAMIC_GLOBAL.test(value), `expected a whole dynamic value for ${name}, got a partial one`)
-					}
-				}
-			}
-			for (const name of toRemove) node.removeAttribute(name)
-		}
-	}
-
-	compiled._parts.length = nextPart
-
-	templates.set(statics, compiled)
-	return compiled
-}
-
-/** @type {WeakMap<object, {
-  _mounted: boolean 
-	_invalidateQueued: Promise<void> | null
-	_invalidate: () => void
-	_unmountCallbacks: Set<Cleanup> | null
-	_parentNode: Node
-}>} */
-const controllers = new WeakMap()
-
-export function invalidate(renderable) {
-	const controller = controllers.get(renderable)
-	assert(controller, 'the renderable has not been rendered')
-	return (controller._invalidateQueued ??= Promise.resolve().then(() => {
-		controller._invalidateQueued = null
-		controller._invalidate()
-	}))
-}
-
-/** @type {WeakMap<Renderable, Set<() => Cleanup>>} */
-const mountCallbacks = new WeakMap()
-
-export function onMount(renderable, callback) {
-	DEV: assert(isRenderable(renderable), 'expected a renderable')
-
-	const controller = controllers.get(renderable)
-	if (controller?._mounted) {
-		;(controller._unmountCallbacks ??= new Set()).add(callback())
-		return
-	}
-
-	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
-}
-
-const keys = new WeakMap()
-export function keyed(renderable, key) {
-	if (DEV && keys.has(renderable)) throw new Error('renderable already has a key')
-	keys.set(renderable, key)
-	return renderable
-}
-
-function createChildPart(
-	/** @type {Node | Span} */ parentNode,
-	/** @type {Span} */ parentSpan,
-	/** @type {number} */ childIndex,
-) {
-	let span
-
-	// for when we're rendering a renderable:
-	/** @type {Renderable | null} */ let renderable = null
-
-	// for when we're rendering a template:
-	/** @type {ReturnType<typeof createRoot> | undefined} */ let root
-
-	// for when we're rendering multiple values:
-	/** @type {ReturnType<typeof createRoot>[] | undefined} */ let roots
-
-	// for when we're rendering a string/single dom node:
-	/** undefined means no previous value, because a user-specified undefined is remapped to null */
-	let prevValue
-
-	function switchRenderable(/** @type {Renderable | null} */ next) {
-		if (renderable && renderable !== next) {
-			const controller = controllers.get(renderable)
-			if (controller?._unmountCallbacks) for (const callback of controller._unmountCallbacks) callback?.()
-			controllers.delete(renderable)
-		}
-		renderable = next
-	}
-
-	function disconnectRoot() {
-		// root.detach and part.detach are mutually recursive, so this detaches children too.
-		root?.detach()
-		root = undefined
-	}
-
-	if (parentNode instanceof Node) {
-		const child = parentNode.childNodes[childIndex]
-		span = createSpan(child)
-	} else {
-		let child = parentNode._start
-		for (let i = 0; i < childIndex; i++) {
-			DEV: {
-				assert(child.nextSibling !== null, 'expected more siblings')
-				assert(child.nextSibling !== parentNode._end, 'ran out of siblings before the end')
-			}
-			child = child.nextSibling
-		}
-		span = createSpan(child)
-	}
-
-	return {
-		update: function update(/** @type {Displayable} */ value) {
-			DEV: assert(span)
-			const endsWereEqual = span._parentNode === parentSpan._parentNode && span._end === parentSpan._end
-
-			if (isRenderable(value)) {
-				switchRenderable(value)
-
-				const renderable = value
-
-				if (!controllers.has(renderable))
-					controllers.set(renderable, {
-						_mounted: false,
-						_invalidateQueued: null,
-						_invalidate: () => {
-							DEV: assert(renderable === renderable, 'could not invalidate an outdated renderable')
-							update(renderable)
-						},
-						_unmountCallbacks: null, // will be upgraded to a Set if needed.
-						_parentNode: span._parentNode,
-					})
-
-				try {
-					value = renderable.render()
-				} catch (thrown) {
-					if (isHtml(thrown)) {
-						value = thrown
-					} else {
-						throw thrown
-					}
-				}
-
-				// if render returned another renderable, we want to track/cache both renderables individually.
-				// wrap it in a nested ChildPart so that each can be tracked without ChildPart having to handle multiple renderables.
-				if (isRenderable(value)) value = singlePartTemplate(value)
-			} else switchRenderable(null)
-
-			// if it's undefined, swap the value for null.
-			// this means if the initial value is undefined,
-			// it won't conflict with prevValue's default of undefined,
-			// so it'll still render.
-			if (value === undefined) value = null
-
-			// NOTE: we're explicitly not caching/diffing the value when it's an iterable,
-			// given it can yield different values but have the same identity. (e.g. arrays)
-			if (isIterable(value)) {
-				if (!roots) {
-					// we previously rendered a single value, so we need to clear it.
-					disconnectRoot()
-					spanDeleteContents(span)
-
-					roots = []
-				}
-
-				// create or update a root for every item.
-				let i = 0
-				let end = span._start
-				for (const item of value) {
-					// @ts-expect-error -- WeakMap lookups of non-objects always return undefined, which is fine
-					const key = keys.get(item) ?? item
-					let root = (roots[i] ??= createRootAfter(end))
-
-					if (key !== undefined && root._key !== key) {
-						const j = roots.findIndex(r => r._key === key)
-						root._key = key
-						if (j !== -1) {
-							const root1 = root
-							const root2 = roots[j]
-
-							// swap the contents of the spans
-							const tmpContent = spanExtractContents(root1._span)
-							spanInsertNode(root1._span, spanExtractContents(root2._span))
-							spanInsertNode(root2._span, tmpContent)
-
-							// swap the spans back
-							const tmpSpan = root1._span
-							root1._span = root2._span
-							root2._span = tmpSpan
-
-							// swap the roots
-							roots[j] = root1
-							root = roots[i] = root2
-						}
-					}
-
-					root.render(item)
-					end = root._span._end
-					i++
-				}
-
-				// and now remove excess roots if the iterable has shrunk.
-				while (roots.length > i) {
-					const root = roots.pop()
-					assert(root)
-					root.detach()
-					spanDeleteContents(root._span)
-				}
-
-				span._end = end
-
-				const controller = controllers.get(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(renderable) ?? []) {
-						;(controller._unmountCallbacks ??= new Set()).add(callback())
-					}
-					// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
-					mountCallbacks.delete(renderable)
-				}
-
-				if (endsWereEqual) parentSpan._end = span._end
-
-				return
-			} else if (roots) {
-				for (const root of roots) root.detach()
-				roots = undefined
-			}
-
-			// now early return if the value hasn't changed.
-			if (Object.is(prevValue, value)) return
-
-			if (isHtml(value)) {
-				root ??= createRoot(span)
-				root.render(value) // root.render will detach the previous tree if the template has changed.
-			} else {
-				// if we previously rendered a tree that might contain renderables,
-				// and the template has changed (or we're not even rendering a template anymore),
-				// we need to clear the old renderables.
-				disconnectRoot()
-
-				if (prevValue != null && value !== null && !(prevValue instanceof Node) && !(value instanceof Node)) {
-					// we previously rendered a string, and we're rendering a string again.
-					DEV: assert(span._start === span._end && span._start instanceof Text)
-					span._start.data = '' + value
-				} else {
-					spanDeleteContents(span)
-					if (value !== null) spanInsertNode(span, value instanceof Node ? value : new Text('' + value))
-				}
-			}
-
-			prevValue = value
-
-			const controller = controllers.get(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(renderable) ?? []) {
-					;(controller._unmountCallbacks ??= new Set()).add(callback())
-				}
-				// @ts-expect-error -- WeakMap lookups of null always return undefined, which is fine
-				mountCallbacks.delete(renderable)
-			}
-
-			if (endsWereEqual) parentSpan._end = span._end
-		},
-		detach: () => {
-			switchRenderable(null)
-			disconnectRoot()
-		},
-	}
-}
-
-function createPropertyPart(node, name) {
-	return {
-		update: value => {
-			node[name] = value
-		},
-		detach: () => {
-			delete node[name]
-		},
-	}
-}
-
-function createAttributePart(node, name) {
-	return {
-		update: value => node.setAttribute(name, value),
-		detach: () => node.removeAttribute(name),
-	}
-}
-
-function createDirectivePart(node) {
-	/** @type {Cleanup} */ let cleanup
-	return {
-		update: fn => {
-			cleanup?.()
-			cleanup = fn?.(node)
-		},
-
-		detach: () => {
-			cleanup?.()
-			cleanup = null
-		},
-	}
-}
-
-/** @returns {Directive} */
-export function attr(name, value) {
-	return node => {
-		if (typeof value === 'boolean') node.toggleAttribute(name, value)
-		else if (value == null) node.removeAttribute(name)
-		else node.setAttribute(name, value)
-		return () => {
-			node.removeAttribute(name)
-		}
-	}
-}

src/html.server.ts src/server.ts

···
-import type { Displayable, Renderable } from './types.ts'
 import { Tokenizer } from 'htmlparser2'
-
-function isRenderable(value: unknown): value is Renderable {
-	return typeof value === 'object' && value !== null && 'render' in value
-}
-
-function isIterable(value: unknown): value is Iterable<unknown> {
-	return typeof value === 'object' && value !== null && Symbol.iterator in value
-}
-
-export function html(statics: TemplateStringsArray, ...dynamics: unknown[]) {
-	return new BoundTemplateInstance(statics, dynamics)
-}
-
-const singlePartTemplate = (part: Displayable) => html`${part}`
-
-/* v8 ignore start */
-function assert(value: unknown, message = 'assertion failed'): asserts value {
-	if (!value) throw new Error(message)
-}
-/* v8 ignore stop */
+import { assert, is_html, is_iterable, is_renderable, single_part_template, type Displayable } from './shared.ts'
 
 type PartRenderer = (values: unknown[]) => string | Generator<string, void, void>
 
···
 	parts: PartRenderer[]
 }
 
-class BoundTemplateInstance {
-	#template: CompiledTemplate | undefined
-	#statics: TemplateStringsArray
-	dynamics: unknown[]
-
-	get template() {
-		return (this.#template ??= compileTemplate(this.#statics))
-	}
-
-	constructor(statics: TemplateStringsArray, dynamics: unknown[]) {
-		this.#statics = statics
-		this.dynamics = dynamics
-	}
-}
-
 const WHITESPACE_WHOLE = /^\s+$/
 const DYNAMIC_WHOLE = /^dyn-\$(\d+)\$$/i
 const DYNAMIC_GLOBAL = /dyn-\$(\d+)\$/gi
 
 const templates = new WeakMap<TemplateStringsArray, CompiledTemplate>()
-function compileTemplate(statics: TemplateStringsArray): CompiledTemplate {
+function compile_template(statics: TemplateStringsArray): CompiledTemplate {
 	const cached = templates.get(statics)
 	if (cached) return cached
 
···
 				const match = name.match(DYNAMIC_WHOLE)
 				if (match) {
 					const idx = parseInt(match[1])
-					parts.push({ start, end, render: values => renderDirective(values[idx]) })
+					parts.push({ start, end, render: values => render_directive(values[idx]) })
 					return
 				}
 
···
 				const match = value.match(DYNAMIC_WHOLE)
 				if (match) {
 					const idx = parseInt(match[1])
-					parts.push({ start: nameStart, end, render: values => renderAttribute(name, values[idx]) })
+					parts.push({ start: nameStart, end, render: values => render_attribute(name, values[idx]) })
 					return
 				}
 
···
 					parts.push({
 						start: start + match.index,
 						end: start + match.index + match[0].length,
-						render: values => renderChild(values[idx]),
+						render: values => render_child(values[idx]),
 					})
 				}
 
···
 
 	for (let i = 0; i < parts.length; i++) {
 		const part = parts[i]
-		const nextPart = parts[i + 1]
+		const next_part = parts[i + 1]
 		compiled.parts.push(part.render)
-		compiled.statics.push(html.slice(part.end, nextPart?.start))
+		compiled.statics.push(html.slice(part.end, next_part?.start))
 	}
 
 	templates.set(statics, compiled)
 	return compiled
 }
 
-function renderDirective(value: unknown) {
+function render_directive(value: unknown) {
 	if (value === null) return ''
 
 	assert(typeof value === 'function')
···
 	return ''
 }
 
-function renderAttribute(name: string, value: unknown) {
+function render_attribute(name: string, value: unknown) {
 	if (value === false || value === null || typeof value === 'function') {
 		return ''
 	}
···
 	return `${name}="${escape(value)}"`
 }
 
-function* renderChild(value: unknown) {
+function* render_child(value: unknown) {
 	const seen = new Set()
 
-	while (isRenderable(value))
+	while (is_renderable(value))
 		try {
 			if (seen.has(value)) throw new Error('circular render')
 			seen.add(value)
 			value = value.render()
 		} catch (thrown) {
-			if (thrown instanceof BoundTemplateInstance) {
+			if (is_html(thrown)) {
 				value = thrown
 			} else {
 				throw thrown
 			}
 		}
 
-	if (isIterable(value)) {
-		for (const item of value) yield* renderToIterable(item as Displayable)
-	} else if (value instanceof BoundTemplateInstance) {
-		yield* renderToIterable(value)
+	if (is_iterable(value)) {
+		for (const item of value) yield* render_to_iterable(item as Displayable)
+	} else if (is_html(value)) {
+		yield* render_to_iterable(value)
 	} else if (value !== null) {
 		yield escape(value)
 	}
···
 	"'": '&#39;',
 }
 function escape(str: unknown) {
-	return String(str).replace(ESCAPE_RE, c => ESCAPE_SUBSTITUTIONS[c])
+	return String(str).replace(ESCAPE_RE, c => ESCAPE_SUBSTITUTIONS[c as keyof typeof ESCAPE_SUBSTITUTIONS])
 }
 
-function* renderToIterable(value: Displayable) {
-	const { template, dynamics } = value instanceof BoundTemplateInstance ? value : singlePartTemplate(value)
+function* render_to_iterable(value: Displayable) {
+	const { _statics: statics, _dynamics: dynamics } = is_html(value) ? value : single_part_template(value)
+	const template = compile_template(statics)
 
 	for (let i = 0; i < template.statics.length - 1; i++) {
 		yield template.statics[i]
···
 	yield template.statics[template.statics.length - 1]
 }
 
-export function renderToString(value: Displayable) {
+export function renderToString(value: Displayable): string {
 	let str = ''
-	for (const part of renderToIterable(value)) str += part
+	for (const part of render_to_iterable(value)) str += part
 	return str
 }
 
-export function renderToReadableStream(value: Displayable) {
-	const iter = renderToIterable(value)[Symbol.iterator]()
+export function renderToReadableStream(value: Displayable): ReadableStream {
+	const iter = render_to_iterable(value)[Symbol.iterator]()
 	return new ReadableStream({
 		pull(controller) {
 			const { done, value } = iter.next()

src/index.ts

···
+export { html, type Displayable, type Renderable } from './shared.ts'

src/shared.ts

···
+interface ToString {
+	toString(): string
+}
+
+export type Displayable = null | undefined | ToString | Node | Renderable | Iterable<Displayable>
+export interface Renderable {
+	render(): Displayable
+}
+
+export const is_renderable = (value: unknown): value is Renderable =>
+	typeof value === 'object' && value !== null && 'render' in value
+
+export const is_iterable = (value: unknown): value is Iterable<unknown> =>
+	typeof value === 'object' && value !== null && Symbol.iterator in value
+
+declare global {
+	const __DEV__: boolean
+}
+
+/* v8 ignore start */
+export function assert(value: unknown, message?: string): asserts value {
+	if (!__DEV__) return
+	if (!value) throw new Error(message ?? 'assertion failed')
+}
+/* v8 ignore stop */
+
+const tag: unique symbol = Symbol()
+
+interface HTML {
+	[tag]: true
+	/* @internal */ _statics: TemplateStringsArray
+	/* @internal */ _dynamics: unknown[]
+}
+
+export const is_html = (value: any): value is HTML => typeof value === 'object' && value !== null && tag in value
+
+export function html(statics: TemplateStringsArray, ...dynamics: unknown[]): HTML {
+	return {
+		[tag]: true,
+		_dynamics: dynamics,
+		_statics: statics,
+	}
+}
+
+export const single_part_template = (part: Displayable): HTML => html`${part}`

src/types.ts

···
-declare global {
-	const DHTML_PROD: unknown
-}
-
-interface ToString {
-	toString(): string
-}
-
-export type Displayable = null | undefined | ToString | Node | Renderable | Iterable<Displayable>
-export interface Renderable {
-	render(): Displayable
-}
-
-export declare class BoundTemplateInstance {
-	#private
-}
-
-export type Key = string | number | bigint | boolean | symbol | object | null
-
-export interface Span {
-	_parentNode: Node
-	_start: Node
-	_end: Node
-	_marker: Node | null
-}
-
-interface Part {
-	update(value: unknown): void
-	detach(): void
-}
-
-export type Cleanup = (() => void) | void | undefined | null
-export type Directive = (node: Element) => Cleanup
-
-export interface CompiledTemplate {
-	_content: DocumentFragment
-	_parts: [idx: number, createPart: (node: Node | Span, span: Span) => Part][]
-	_rootParts: number[]
-}

test/basic.test.ts src/client/tests/basic.test.ts

···
 import { html, type Displayable } from 'dhtml'
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { setup } from './setup'
 
 describe('basic', () => {

test/custom-elements.test.ts src/client/tests/custom-elements.test.ts

···
-import { createRoot, html } from 'dhtml'
+import { html } from 'dhtml'
+import { createRoot } from 'dhtml/client'
 import { describe, expect, it } from 'vitest'
 import { setup } from './setup'
 

test/directives.test.ts src/client/tests/directives.test.ts

···
-import { attr, html, type Directive } from 'dhtml'
+import { html } from 'dhtml'
+import { attr, type Directive } from 'dhtml/client'
 import { describe, expect, it } from 'vitest'
 import { setup } from './setup'
 

test/lists.test.ts src/client/tests/lists.test.ts

···
-import { html, keyed, type Displayable } from 'dhtml'
+import { html, type Displayable } from 'dhtml'
+import { keyed } from 'dhtml/client'
 import { describe, expect, it } from 'vitest'
 import { setup } from './setup'
 

test/renderable.test.ts src/client/tests/renderable.test.ts

···
-import { getParentNode, html, invalidate, onMount, onUnmount, type Renderable } from 'dhtml'
+import { html, type Renderable } from 'dhtml'
+import { getParentNode, invalidate, onMount, onUnmount } from 'dhtml/client'
 import { describe, expect, it, vi } from 'vitest'
 import { setup } from './setup'
 

test/setup.ts src/client/tests/setup.ts

···
 /// <reference types='vite/client' />
 /// <reference types='@vitest/browser/providers/playwright' />
 
-import '../reset.css'
+import '../../../reset.css'
 
-import { createRoot, type Root } from 'dhtml'
+import { createRoot, type Root } from 'dhtml/client'
 import { afterEach, expect } from 'vitest'
 
 const roots: Root[] = []
 
-export function setup(initialHtml = '') {
+export function setup(initialHtml = ''): { root: Root; el: HTMLDivElement } {
 	const state = expect.getState()
 	const parentEl = document.createElement('div')
 	Object.assign(parentEl.style, {

test/tsconfig.json

···
-{
-	"extends": "../tsconfig.json",
-	"compilerOptions": {
-		"noImplicitAny": true,
-		"target": "esnext"
-	},
-	"include": ["."]
-}

tsconfig.json

···
 {
 	"compilerOptions": {
 		"strict": true,
-		"noImplicitAny": false,
-		"checkJs": true,
+		"noImplicitAny": true,
 		"skipLibCheck": true,
 		"noEmit": true,
 		"module": "es2020",
 		"target": "es2020",
 		"verbatimModuleSyntax": true,
-		"allowUnusedLabels": true, // esbuild drops DEV labeled code in the prod build
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"stripInternal": true,
+		"isolatedDeclarations": true,
+		"declaration": true
 	},
 	"include": ["src"]
 }

vitest.config.js

···
 import { defineConfig } from 'vitest/config'
 
-const prod = !!process.env.PROD
-
 export default defineConfig({
-	resolve: {
-		alias: { dhtml: new URL(prod ? 'dist/html.min.js' : 'src/html.js', import.meta.url) },
-	},
 	define: {
-		DHTML_PROD: prod,
+		__DEV__: !process.env.PROD,
 	},
 	test: {
 		clearMocks: true,
···
 			enabled: true,
 			reporter: ['text', 'json-summary', 'json', 'html'],
 			reportOnFailure: true,
-			include: ['src/html.js'],
+			include: ['src/client/**', 'src/client.ts'],
+			exclude: ['**/tests'],
 		},
 		browser: {
 			enabled: true,