domLense.js

@@ -1,85 +0,0 @@
-class ChildObserver extends MutationObserver {
-	constructor() {
-		super(mutations => {
-			for (const mutation of mutations) {
-				mutation.target.dispatchEvent(new CustomEvent("change", {detail: mutation}))
-			}
-		})
-	}
-
-	observe(element) {
-		MutationObserver.prototype.observe.call(this, element, { childList: true })
-	}
-}
-
-const childObserver = new ChildObserver()
-
-const lense = (methods, extra) => {
-	if (extra) return lense(extra)(methods)
-
-	const traps = {
-		get(target, prop) {
-			if (prop === "length") {
-				return target.children.length
-			} else if (prop === Symbol.iterator) {
-				return function*() {
-					for (const child of target.children) {
-						yield methods.get(child)
-					}
-				}
-			} else if (prop.match?.call(prop, /^[0-9]+$/)) {
-				const child = target.children[prop]
-				if (child) return methods.get(child)
-				return child
-			} else {
-				return Array.prototype[prop]
-			}
-		},
-		set(target, prop, value) {
-			if (prop.match?.call(prop, /^[0-9]+$/)) {
-				const child = target.children[prop]
-				if (child) {
-					methods.set(child, value)
-					return true
-				} else {
-					for (let i = target.children.length; i < Number(prop); i++) {
-						target.appendChild(methods.new(undefined))
-					}
-					const element = methods.new(value)
-					target.appendChild(element)
-					if (methods.get(element) !== value)
-						methods.set(element, value)
-					return true
-				}
-			} else if (prop == "length") {
-				if (value == target.children.length)
-					return true
-				else
-					return false
-			}
-		},
-		deleteProperty(target, prop) {
-			if (prop.match?.call(prop, /^[0-9]+$/)) {
-				const child = target.children[prop]
-				if (child) child.remove()
-				return true
-			}
-		},
-		has(target, prop) {
-			return (prop === Symbol.iterator) || (prop in target.children) || (prop in Array.prototype)
-		}
-	}
-
-	return element => {
-		const proxy = new Proxy(element, traps)
-
-		if (methods.event) childObserver.observe(element)
-		if (typeof methods.event === "function") element.addEventListener("change", event => {
-			methods.event(proxy, element, event.detail)
-		})
-
-		return proxy
-	}
-}
-
-export default lense

state.js

@@ -1,8 +1,5 @@
 export 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())
-
 export class ChangeEvent extends Event {
 	#final
 	constructor(...changes) {
@@ -253,28 +250,26 @@ const attributeObserver = new MutationObserver(mutations => {
 	for (const {type, target, attributeName: name} of mutations) {
 		if (type == "attributes") {
 			const next = target.getAttribute(name)
-			const camelName = kebabToCamel(name)
+			if (String(target.state.proxy[name]) !== next)
-			if (String(target.state.proxy[camelName]) !== next)
+				target.state.proxy[name] = next
-				target.state.proxy[camelName] = next
 		}
 	}
 })
 
 export const component = (generator, name) => {
-	name = name ?? camelToKebab(generator.name)
+	name = name ?? generator.name.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
 	const Element = class extends HTMLElement{
 		constructor() {
 			super()
-			this.state = new State(Object.fromEntries([...this.attributes].map(attribute => [kebabToCamel(attribute.name), attribute.value])))
+			this.state = new State(Object.fromEntries([...this.attributes].map(attribute => [attribute.name, attribute.value])))
 			this.state.addEventListener("change", event => {
 				for (const [name, value] of event.changes) {
-					const kebabName = camelToKebab(name)
+					if (this.getAttribute(name) !== String(value))
-					if (this.getAttribute(kebabName) !== String(value))
+						this.setAttribute(name, value)
-						this.setAttribute(kebabName, value)
 				}
 			})
 			attributeObserver.observe(this, {attributes: true})
-			this.replaceChildren(generator(this))
+			this.replaceChildren(generator(this.state))
 		}
 	}
 	customElements.define(name, Element)
@@ -330,62 +325,4 @@ class ComposedState extends SimpleState {
 
 export const compose = func => (...states) => new ComposedState(func, {defer: true}, ...states)
 
-const eventName = "mutation"
-
-class MutationEvent extends Event {
-	constructor() {
-		super(eventName, {bubbles: true})
-	}
-}
-
-const mutationObserver = new MutationObserver(mutations => {
-	for (const mutation of mutations) {
-		mutation.target.dispatchEvent(new MutationEvent())
-	}
-})
-
-export class DOMState extends SimpleState {
-	#old
-	#options
-	#changedValue = false
-
-	constructor(target, value, options) {
-		super()
-		this.#options = options
-		this.#old = [...value]
-		this.value = value
-		const controller = new AbortController()
-		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)
-	}
-
-	update() {
-		const current = [...this.value]
-		if (current.length === this.#old.length) {
-			for (const idx in current) {
-				if (current[idx] !== this.#old[idx]) break
-			}
-			return
-		}
-		this.#old = current
-		if (this.#options?.defer) {
-			if (!this.#changedValue) {
-				queueMicrotask(() => {
-					this.#changedValue = false
-					this.dispatchEvent(new ChangeEvent(["value", this.#changedValue]))
-				})
-				this.#changedValue = current
-			}
-		} else {
-			this.dispatchEvent(new ChangeEvent(["value", current]))
-		}
-	}
-}
-
 export default State