Make handle return a value just in case it is desired

The old interface was too specific to the way domLense works, by
assuming the value to be an array that gets mutated elsewhere (or a
proxy that behaves like one)

domLense.js

@@ -14,7 +14,7 @@ class ChildObserver extends MutationObserver {
 
 const childObserver = new ChildObserver()
 
-const lense = (methods, extra) => {
+export const lense = (methods, extra) => {
 	if (extra) return lense(extra)(methods)
 
 	const traps = {

skooma.js

@@ -10,6 +10,7 @@ or
 	html.ul([1, 2, 3, 4, 5].map(x => html.li(x)), {class: "numbers"})
 */
 
+// Keep a referee alive until a referrer is collected
 const weakReferences = new WeakMap()
 const untilDeathDoThemPart = (referrer, reference) => {
 	if (!weakReferences.has(referrer)) {
@@ -184,11 +185,12 @@ const nameSpacedProxy = (options={}) => new Proxy(Window, {
 
 export const html = nameSpacedProxy({nameFilter: name => name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()})
 export const svg = nameSpacedProxy({xmlns: "http://www.w3.org/2000/svg"})
+export default html
 
 // Other utility exports
 
 // Wraps an event handler in a function that calls preventDefault on the event
-export const handle = fn => event => { fn(event); event.preventDefault() }
+export const handle = fn => event => { event.preventDefault(); return fn(event) }
 
 // Wraps a list of elements in a document fragment
 export const fragment = (...elements) => {

state.js

@@ -1,4 +1,4 @@
-export const abortRegistry = new FinalizationRegistry(controller => controller.abort())
+const abortRegistry = new FinalizationRegistry(controller => controller.abort())
 
 const camelToKebab = string => string.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
 const kebabToCamel = string => string.replace(/([a-z])-([a-z])/g, (_, a, b) => a+b.toUpperCase())
@@ -17,7 +17,7 @@ export class ChangeEvent extends Event {
 	}
 }
 
-class SimpleState extends EventTarget {}
+export class SimpleState extends EventTarget {}
 
 export class MapStorage extends Storage {
 	#map = new Map()
@@ -189,7 +189,7 @@ export class ForwardState extends SimpleState {
 	set value(value) { this.#backend.proxy[this.#property] = value }
 }
 
-export class StorageChangeEvent extends Event {
+class StorageChangeEvent extends Event {
 	constructor(storage, key, value, targetState) {
 		super("storagechange")
 		this.storageArea = storage
@@ -345,36 +345,45 @@ const mutationObserver = new MutationObserver(mutations => {
 })
 
 export class DOMState extends SimpleState {
+	#target
+	#defer
+	#getValue
+	#equal
+
 	#old
-	#options
 	#changedValue = false
 
-	constructor(target, value, options) {
+	constructor(target, options) {
 		super()
-		this.#options = options
+		this.#defer = options.defer ?? false
-		this.#old = [...value]
+		this.#target = target
-		this.value = value
+		this.#getValue = options.get ?? (target => target.value)
+		this.#equal = options.equal ?? ((a, b) => a===b)
+
+		this.#old = this.#getValue(target)
+
 		const controller = new AbortController()
+		target.addEventListener(eventName, event=>{this.update(event)}, {signal: controller.signal})
+
+		abortRegistry.register(this, controller)
 		mutationObserver.observe(target, {
 			attributes: true,
 			childList: true,
 			characterData: true,
 			subtree: true,
 		})
-		target.addEventListener(eventName, event=>{this.update(event)}, {signal: controller.signal})
-		abortRegistry.register(this, controller)
 	}
 
+	get value() { return this.#old }
+
 	update() {
-		const current = [...this.value]
+		const current = this.#getValue(this.#target)
-		if (current.length === this.#old.length) {
+
-			for (const idx in current) {
+		if (this.#equal(this.#old, current)) return
-				if (current[idx] !== this.#old[idx]) break
+
-			}
-			return
-		}
 		this.#old = current
-		if (this.#options?.defer) {
+
+		if (this.#defer) {
 			if (!this.#changedValue) {
 				queueMicrotask(() => {
 					this.#changedValue = false