domLense.js

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

skooma.js

@@ -10,7 +10,6 @@ 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)) {
@@ -185,12 +184,11 @@ 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 => { event.preventDefault(); return fn(event) }
+export const handle = fn => event => { fn(event); event.preventDefault() }
 
 // Wraps a list of elements in a document fragment
 export const fragment = (...elements) => {

state.js

@@ -1,4 +1,4 @@
-const abortRegistry = new FinalizationRegistry(controller => controller.abort())
+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())
@@ -17,7 +17,7 @@ export class ChangeEvent extends Event {
 	}
 }
 
-export class SimpleState extends EventTarget {}
+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 }
 }
 
-class StorageChangeEvent extends Event {
+export class StorageChangeEvent extends Event {
 	constructor(storage, key, value, targetState) {
 		super("storagechange")
 		this.storageArea = storage
@@ -345,45 +345,36 @@ const mutationObserver = new MutationObserver(mutations => {
 })
 
 export class DOMState extends SimpleState {
-	#target
-	#defer
-	#getValue
-	#equal
-
 	#old
+	#options
 	#changedValue = false
 
-	constructor(target, options) {
+	constructor(target, value, options) {
 		super()
-		this.#defer = options.defer ?? false
-		this.#target = target
-		this.#getValue = options.get ?? (target => target.value)
-		this.#equal = options.equal ?? ((a, b) => a===b)
-
-		this.#old = this.#getValue(target)
-
+		this.#options = options
+		this.#old = [...value]
+		this.value = value
 		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.#getValue(this.#target)
-
-		if (this.#equal(this.#old, current)) return
-
+		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.#defer) {
+		if (this.#options?.defer) {
 			if (!this.#changedValue) {
 				queueMicrotask(() => {
 					this.#changedValue = false