migrate from exported class Root to function createRoot (#32)

just to trim a few bytes.
also one other driveby byte shave.

examples/todomvc/main.js

···
-import { Root, html, invalidate } from 'dhtml'
+import { createRoot, html, invalidate } from 'dhtml'
 
 function classes(node, value) {
 	let prev = new Set()
···
 
 const rootEl = document.getElementById('root')
 if (!rootEl) throw new Error('Root element not found')
-Root.appendInto(rootEl).render(app)
+createRoot(rootEl).render(app)

index.html

···
 		<title>dhtml</title>
 		<script type="module">
 			globalThis.DHTML_PROD = !new URLSearchParams(location.search).has('dev')
-			const { Root, html, invalidate } = await import('./src/html.js')
-			const r = Root.appendInto(document.body)
-			Object.assign(globalThis, { Root, html, r })
-			r.render({
+			const { createRoot, html, invalidate } = await import('./src/html.js')
+			const root = createRoot(document.body)
+			Object.assign(globalThis, { createRoot, html, root })
+			root.render({
 				i: 0,
 				render() {
-					const codePre = `import { Root, html, invalidate } from '`
+					const codePre = `import { createRoot, html, invalidate } from '`
 					const url = new URL('src/html.js', location.href).toString()
 					const codePost = `'
 
···
   },
 }
 
-Root.appendInto(document.body).render(app)`
+createRoot(document.body).render(app)`
 
 					return html`
 						<main style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem">

package.json

···
 		"format": "prettier --write .",
 		"check": "tsc",
 		"test": "vitest run",
-    "test:watch": "vitest dev",
+		"test:watch": "vitest dev",
 		"test:prod": "npm run build && NODE_ENV=production vitest run"
 	},
 	"devDependencies": {

readme.md

···
 a post-component library for building user interfaces on the web.
 
 ```javascript
-import { Root, html, invalidate } from 'https://tombl.github.io/dhtml/src/html.js'
+import { createRoot, html, invalidate } from 'https://tombl.github.io/dhtml/src/html.js'
 
 const app = {
 	i: 0,
···
 	},
 }
 
-Root.appendInto(document.body).render(app)
+createRoot(document.body).render(app)
 ```

src/html.d.ts

···
 export function onUnmount(renderable: Renderable, callback: () => void): void
 export function getParentNode(renderable: Renderable): Node
 
-export class Root {
-	static appendInto(parent: Node): Root
-	static replace(node: Node): Root
-
+export interface Root {
 	render(value: Displayable): void
 	detach(): void
 }
+
+export function createRoot(node: Node): Root

src/html.js

···
 	}
 }
 
-export class Root {
+/** @param {ParentNode} parent */
+export function createRoot(parent) {
+	const marker = new Text()
+	parent.appendChild(marker)
+	return new Root(new Span(marker))
+}
+
+/** @param {Node} node */
+function insertRootAfter(node) {
+	DEV: assert(node.parentNode, 'expected a parent node')
+	const marker = new Text()
+	node.parentNode.insertBefore(marker, node.nextSibling)
+	return new Root(new Span(marker))
+}
+
+class Root {
 	/** @type {Key | undefined} */ _key
 
 	/** @param {Span} span */
···
 		this._span = span
 	}
 
-	/** @param {ParentNode} parent */
-	static appendInto(parent) {
-		const marker = new Text()
-		parent.appendChild(marker)
-		return new Root(new Span(marker))
-	}
-
-	/** @param {Node} node */
-	static insertAfter(node) {
-		DEV: assert(node.parentNode, 'expected a parent node')
-		const marker = new Text()
-		node.parentNode.insertBefore(marker, node.nextSibling)
-		return new Root(new Span(marker))
-	}
-
-	/** @param {Node} node */
-	static replace(node) {
-		return new Root(new Span(node))
-	}
-
 	render(value) {
 		const t = value instanceof BoundTemplateInstance ? value : singlePartTemplate(value)
 
···
 					toRemove.push(name)
 					match = DYNAMIC_WHOLE.exec(value)
 					if (match) {
-						name = name.slice(1).replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+						name = name.slice(1).replace(/-./g, match => match[1].toUpperCase())
 						patch(node, parseInt(match[1]), () => new PropertyPart(name))
-					} else {
-						DEV: assert(!DYNAMIC_GLOBAL.test(value), `expected a whole dynamic value for ${name}, got a partial one`)
-						DEV: throw new Error(`static properties are not supported, please wrap the value of ${name} in \${...}`)
+					} else if (DEV) {
+						assert(!DYNAMIC_GLOBAL.test(value), `expected a whole dynamic value for ${name}, got a partial one`)
+						throw new Error(`static properties are not supported, please wrap the value of ${name} in \${...}`)
 					}
 				} else {
 					// attribute:
 					match = DYNAMIC_WHOLE.exec(value)
 					if (match) {
 						patch(node, parseInt(match[1]), () => new AttributePart(name))
-					} else {
-						DEV: assert(!DYNAMIC_GLOBAL.test(value), `expected a whole dynamic value for ${name}, got a partial one`)
+					} else if (DEV) {
+						assert(!DYNAMIC_GLOBAL.test(value), `expected a whole dynamic value for ${name}, got a partial one`)
 					}
 				}
 			}
···
 			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 = (this.#roots[i] ??= Root.insertAfter(end))
+				let root = (this.#roots[i] ??= insertRootAfter(end))
 
 				if (key !== undefined && root._key !== key) {
 					const j = this.#roots.findIndex(r => r._key === key)

test/custom-elements.test.ts

···
-import { html, Root } from 'dhtml'
-import { expect, describe, it } from 'vitest'
+import { createRoot, html } from 'dhtml'
+import { describe, expect, it } from 'vitest'
 import { setup } from './setup'
 
 class CustomElement extends HTMLElement {
···
 		const { el } = setup()
 		const shadowRoot = el.attachShadow({ mode: 'open' })
 
-		const root = Root.appendInto(shadowRoot)
+		const root = createRoot(shadowRoot)
 		root.render(html`<p>hello</p>`)
 
 		expect(el.innerHTML).toBe(``)

test/setup.ts

···
 
 import '../reset.css'
 
-import { Root } from 'dhtml'
+import { createRoot, type Root } from 'dhtml'
 import { afterEach, expect } from 'vitest'
 
 const roots: Root[] = []
···
 	el.innerHTML = initialHtml
 	document.body.appendChild(parentEl).appendChild(el)
 
-	const root = Root.appendInto(el)
+	const root = createRoot(el)
 	roots.push(root)
 
 	return { root, el }