importmaps.html

@@ -1,8 +1,7 @@
 <script type="importmap">
 	{
 		"imports": {
-			"nyooom/render": "./render.js",
-			"nyooom/observable": "./observable.js"
+			"nyooom/render": "./render.js"
 		}
 	}
 </script>

observable.js

@@ -224,7 +224,7 @@ export class ObservableObject extends Observable {
 		const handler = () => ref.deref()?.emit(prop, observable, observable, {observable: true})
 
 		handlers.set(prop, handler)
-		observable.addEventListener("changed", handler, {signal: this.signal})
+		observable.addEventListener("change", handler, {signal: this.signal})
 	}
 
 	/** Undoes the adoption of a nested observable, cancelling the associated event hook
@@ -234,7 +234,7 @@ export class ObservableObject extends Observable {
 	disown(prop, observable) {
 		const handlers = this.#nested.get(observable)
 		const handler = handlers.get(prop)
-		observable.removeEventListener("changed", handler)
+		observable.removeEventListener("change", handler)
 		handlers.delete(prop)
 		if (handlers.size == 0) {
 			this.#nested.delete(observable)
@@ -264,7 +264,7 @@ export class ObservableValue extends Observable {
 	/**
 	 * @param {(value: any) => any} func
 	 */
-	transform(func) {
+	compose(func) {
 		return new Composition(func, {}, this)
 	}
 
@@ -286,7 +286,7 @@ class ProxiedObservableValue extends ObservableValue {
 		this.#prop = prop
 
 		const ref = this.ref
-		backend.addEventListener("change", event => {
+		backend.addEventListener("synchronous", event => {
 			const {property, from, to, ...rest} = event.change
 			if (property == this.#prop) {
 				ref.deref()?.enqueue({
@@ -323,8 +323,7 @@ export const component = (name, generator, methods) => {
 		generator = name
 		name = camelToKebab(generator.name)
 	}
-	const jsName = kebabToCamel(name)
-	component[jsName] = class extends HTMLElement{
+	component[kebabToCamel(name)] = class extends HTMLElement{
 		/** @type {ObservableObject} */
 		state
 
@@ -345,12 +344,11 @@ export const component = (name, generator, methods) => {
 			if (content) this.replaceChildren(content)
 		}
 	}
-	const element = component[jsName]
 	if (methods) {
-		Object.defineProperties(element.prototype, Object.getOwnPropertyDescriptors(methods))
+		Object.defineProperties(Element.prototype, Object.getOwnPropertyDescriptors(methods))
 	}
-	customElements.define(name, element)
-	return element;
+	customElements.define(name, Element)
+	return Element;
 }
 
 class Composition extends ObservableValue {