⚡ reorganize files

dist/esm-with-signals.d.ts

@@ -179,11 +179,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

dist/esm-with-signals.js

@@ -55,38 +55,7 @@ var Defined = class extends Error {
 	}
 };
 
-// src/signals-lib/common.js
+// src/dom-lib/common.js
-var signals_global = {
-	/**
-	* Checks if a value is a signal
-	* @param {any} attributes - Value to check
-	* @returns {boolean} Whether the value is a signal
-	*/
-	isSignal(attributes) {
-		return false;
-	},
-	/**
-	* Processes an attribute that might be reactive
-	* @param {Element} obj - Element that owns the attribute
-	* @param {string} key - Attribute name
-	* @param {any} attr - Attribute value
-	* @param {Function} set - Function to set the attribute
-	* @returns {any} Processed attribute value
-	*/
-	processReactiveAttribute(obj, key, attr, set) {
-		return attr;
-	}
-};
-function registerReactivity(def, global = true) {
-	if (global) return oAssign(signals_global, def);
-	Object.setPrototypeOf(def, signals_global);
-	return def;
-}
-function signals(_this) {
-	return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
-}
-
-// src/dom-common.js
 var enviroment = {
 	setDeleteAttr,
 	ssr: "",
@@ -112,7 +81,7 @@ var evc = "dde:connected";
 var evd = "dde:disconnected";
 var eva = "dde:attributeChanged";
 
-// src/events-observer.js
+// src/dom-lib/events-observer.js
 var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 	get() {
 		return () => {
@@ -276,7 +245,7 @@ function connectionsChangesObserverConstructor() {
 	}
 }
 
-// src/events.js
+// src/dom-lib/events.js
 function dispatchEvent(name, options, host) {
 	if (typeof options === "function") {
 		host = options;
@@ -321,10 +290,7 @@ on.disconnected = function(listener, options) {
 	};
 };
 
-// src/dom.js
+// src/dom-lib/scopes.js
-function queue(promise) {
-	return enviroment.q(promise);
-}
 var scopes = [{
 	get scope() {
 		return enviroment.D.body;
@@ -399,6 +365,61 @@ var scope = {
 		return scopes.pop();
 	}
 };
+on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
+
+// src/signals-lib/common.js
+var signals_global = {
+	/**
+	* Checks if a value is a signal
+	* @param {any} attributes - Value to check
+	* @returns {boolean} Whether the value is a signal
+	*/
+	isSignal(attributes) {
+		return false;
+	},
+	/**
+	* Processes an attribute that might be reactive
+	* @param {Element} obj - Element that owns the attribute
+	* @param {string} key - Attribute name
+	* @param {any} attr - Attribute value
+	* @param {Function} set - Function to set the attribute
+	* @returns {any} Processed attribute value
+	*/
+	processReactiveAttribute(obj, key, attr, set) {
+		return attr;
+	}
+};
+function registerReactivity(def, global = true) {
+	if (global) return oAssign(signals_global, def);
+	Object.setPrototypeOf(def, signals_global);
+	return def;
+}
+function signals(_this) {
+	return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
+}
+
+// src/dom-lib/helpers.js
+function setRemove(obj, prop, key, val) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
+}
+function setRemoveNS(obj, prop, key, val, ns = null) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
+}
+function setDelete(obj, key, val) {
+	Reflect.set(obj, key, val);
+	if (!isUndef(val)) return;
+	return Reflect.deleteProperty(obj, key);
+}
+function elementAttribute(element, op, key, value) {
+	if (isInstance(element, enviroment.H))
+		return element[op + "Attribute"](key, value);
+	return element[op + "AttributeNS"](null, key, value);
+}
+
+// src/dom-lib/el.js
+function queue(promise) {
+	return enviroment.q(promise);
+}
 function append(...els) {
 	this.appendOriginal(...els);
 	return this;
@@ -468,38 +489,6 @@ function createElementNS(ns) {
 		return el;
 	};
 }
-function simulateSlots(element, root = element) {
-	const mark_e = "\xB9\u2070", mark_s = "\u2713";
-	const slots = Object.fromEntries(
-		Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
-	);
-	element.append = new Proxy(element.append, {
-		apply(orig, _, els) {
-			if (els[0] === root) return orig.apply(element, els);
-			for (const el of els) {
-				const name = (el.slot || "") + mark_e;
-				try {
-					elementAttribute(el, "remove", "slot");
-				} catch (_error) {
-				}
-				const slot = slots[name];
-				if (!slot) return;
-				if (!slot.name.startsWith(mark_s)) {
-					slot.childNodes.forEach((c) => c.remove());
-					slot.name = mark_s + name;
-				}
-				slot.append(el);
-			}
-			element.append = orig;
-			return element;
-		}
-	});
-	if (element !== root) {
-		const els = Array.from(element.childNodes);
-		element.append(...els);
-	}
-	return root;
-}
 var assign_context = /* @__PURE__ */ new WeakMap();
 var { setDeleteAttr: setDeleteAttr2 } = enviroment;
 function assign(element, ...attributes) {
@@ -562,11 +551,6 @@ function classListDeclarative(element, toggle) {
 	);
 	return element;
 }
-function elementAttribute(element, op, key, value) {
-	if (isInstance(element, enviroment.H))
-		return element[op + "Attribute"](key, value);
-	return element[op + "AttributeNS"](null, key, value);
-}
 function isPropSetter(el, key) {
 	if (!(key in el)) return false;
 	const des = getPropDescriptor(el, key);
@@ -590,19 +574,40 @@ function forEachEntries(s, target, element, obj, cb) {
 		cb(key, val);
 	});
 }
-function setRemove(obj, prop, key, val) {
-	return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
-}
-function setRemoveNS(obj, prop, key, val, ns = null) {
-	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
-}
-function setDelete(obj, key, val) {
-	Reflect.set(obj, key, val);
-	if (!isUndef(val)) return;
-	return Reflect.deleteProperty(obj, key);
-}
 
-// src/customElement.js
+// src/dom-lib/customElement.js
+function simulateSlots(element, root = element) {
+	const mark_e = "\xB9\u2070", mark_s = "\u2713";
+	const slots = Object.fromEntries(
+		Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
+	);
+	element.append = new Proxy(element.append, {
+		apply(orig, _, els) {
+			if (els[0] === root) return orig.apply(element, els);
+			for (const el of els) {
+				const name = (el.slot || "") + mark_e;
+				try {
+					elementAttribute(el, "remove", "slot");
+				} catch (_error) {
+				}
+				const slot = slots[name];
+				if (!slot) return;
+				if (!slot.name.startsWith(mark_s)) {
+					slot.childNodes.forEach((c) => c.remove());
+					slot.name = mark_s + name;
+				}
+				slot.append(el);
+			}
+			element.append = orig;
+			return element;
+		}
+	});
+	if (element !== root) {
+		const els = Array.from(element.childNodes);
+		element.append(...els);
+	}
+	return root;
+}
 function customElementRender(target, render, props = {}) {
 	const custom_element = target.host || target;
 	scope.push({
@@ -1004,7 +1009,6 @@ export {
 	dispatchEvent,
 	createElement as el,
 	createElementNS as elNS,
-	elementAttribute,
 	isSignal,
 	lifecyclesToEvents,
 	memo,

dist/esm-with-signals.min.d.ts

@@ -179,11 +179,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

dist/esm.d.ts

@@ -178,11 +178,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

dist/esm.js

@@ -26,38 +26,7 @@ function onAbort(signal, listener) {
 	};
 }
 
-// src/signals-lib/common.js
+// src/dom-lib/common.js
-var signals_global = {
-	/**
-	* Checks if a value is a signal
-	* @param {any} attributes - Value to check
-	* @returns {boolean} Whether the value is a signal
-	*/
-	isSignal(attributes) {
-		return false;
-	},
-	/**
-	* Processes an attribute that might be reactive
-	* @param {Element} obj - Element that owns the attribute
-	* @param {string} key - Attribute name
-	* @param {any} attr - Attribute value
-	* @param {Function} set - Function to set the attribute
-	* @returns {any} Processed attribute value
-	*/
-	processReactiveAttribute(obj, key, attr, set) {
-		return attr;
-	}
-};
-function registerReactivity(def, global = true) {
-	if (global) return oAssign(signals_global, def);
-	Object.setPrototypeOf(def, signals_global);
-	return def;
-}
-function signals(_this) {
-	return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
-}
-
-// src/dom-common.js
 var enviroment = {
 	setDeleteAttr,
 	ssr: "",
@@ -83,7 +52,7 @@ var evc = "dde:connected";
 var evd = "dde:disconnected";
 var eva = "dde:attributeChanged";
 
-// src/events-observer.js
+// src/dom-lib/events-observer.js
 var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 	get() {
 		return () => {
@@ -247,7 +216,7 @@ function connectionsChangesObserverConstructor() {
 	}
 }
 
-// src/events.js
+// src/dom-lib/events.js
 function dispatchEvent(name, options, host) {
 	if (typeof options === "function") {
 		host = options;
@@ -292,10 +261,7 @@ on.disconnected = function(listener, options) {
 	};
 };
 
-// src/dom.js
+// src/dom-lib/scopes.js
-function queue(promise) {
-	return enviroment.q(promise);
-}
 var scopes = [{
 	get scope() {
 		return enviroment.D.body;
@@ -370,6 +336,61 @@ var scope = {
 		return scopes.pop();
 	}
 };
+on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
+
+// src/signals-lib/common.js
+var signals_global = {
+	/**
+	* Checks if a value is a signal
+	* @param {any} attributes - Value to check
+	* @returns {boolean} Whether the value is a signal
+	*/
+	isSignal(attributes) {
+		return false;
+	},
+	/**
+	* Processes an attribute that might be reactive
+	* @param {Element} obj - Element that owns the attribute
+	* @param {string} key - Attribute name
+	* @param {any} attr - Attribute value
+	* @param {Function} set - Function to set the attribute
+	* @returns {any} Processed attribute value
+	*/
+	processReactiveAttribute(obj, key, attr, set) {
+		return attr;
+	}
+};
+function registerReactivity(def, global = true) {
+	if (global) return oAssign(signals_global, def);
+	Object.setPrototypeOf(def, signals_global);
+	return def;
+}
+function signals(_this) {
+	return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
+}
+
+// src/dom-lib/helpers.js
+function setRemove(obj, prop, key, val) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
+}
+function setRemoveNS(obj, prop, key, val, ns = null) {
+	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
+}
+function setDelete(obj, key, val) {
+	Reflect.set(obj, key, val);
+	if (!isUndef(val)) return;
+	return Reflect.deleteProperty(obj, key);
+}
+function elementAttribute(element, op, key, value) {
+	if (isInstance(element, enviroment.H))
+		return element[op + "Attribute"](key, value);
+	return element[op + "AttributeNS"](null, key, value);
+}
+
+// src/dom-lib/el.js
+function queue(promise) {
+	return enviroment.q(promise);
+}
 function append(...els) {
 	this.appendOriginal(...els);
 	return this;
@@ -439,38 +460,6 @@ function createElementNS(ns) {
 		return el;
 	};
 }
-function simulateSlots(element, root = element) {
-	const mark_e = "\xB9\u2070", mark_s = "\u2713";
-	const slots = Object.fromEntries(
-		Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
-	);
-	element.append = new Proxy(element.append, {
-		apply(orig, _, els) {
-			if (els[0] === root) return orig.apply(element, els);
-			for (const el of els) {
-				const name = (el.slot || "") + mark_e;
-				try {
-					elementAttribute(el, "remove", "slot");
-				} catch (_error) {
-				}
-				const slot = slots[name];
-				if (!slot) return;
-				if (!slot.name.startsWith(mark_s)) {
-					slot.childNodes.forEach((c) => c.remove());
-					slot.name = mark_s + name;
-				}
-				slot.append(el);
-			}
-			element.append = orig;
-			return element;
-		}
-	});
-	if (element !== root) {
-		const els = Array.from(element.childNodes);
-		element.append(...els);
-	}
-	return root;
-}
 var assign_context = /* @__PURE__ */ new WeakMap();
 var { setDeleteAttr: setDeleteAttr2 } = enviroment;
 function assign(element, ...attributes) {
@@ -533,11 +522,6 @@ function classListDeclarative(element, toggle) {
 	);
 	return element;
 }
-function elementAttribute(element, op, key, value) {
-	if (isInstance(element, enviroment.H))
-		return element[op + "Attribute"](key, value);
-	return element[op + "AttributeNS"](null, key, value);
-}
 function isPropSetter(el, key) {
 	if (!(key in el)) return false;
 	const des = getPropDescriptor(el, key);
@@ -561,19 +545,40 @@ function forEachEntries(s, target, element, obj, cb) {
 		cb(key, val);
 	});
 }
-function setRemove(obj, prop, key, val) {
-	return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
-}
-function setRemoveNS(obj, prop, key, val, ns = null) {
-	return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
-}
-function setDelete(obj, key, val) {
-	Reflect.set(obj, key, val);
-	if (!isUndef(val)) return;
-	return Reflect.deleteProperty(obj, key);
-}
 
-// src/customElement.js
+// src/dom-lib/customElement.js
+function simulateSlots(element, root = element) {
+	const mark_e = "\xB9\u2070", mark_s = "\u2713";
+	const slots = Object.fromEntries(
+		Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
+	);
+	element.append = new Proxy(element.append, {
+		apply(orig, _, els) {
+			if (els[0] === root) return orig.apply(element, els);
+			for (const el of els) {
+				const name = (el.slot || "") + mark_e;
+				try {
+					elementAttribute(el, "remove", "slot");
+				} catch (_error) {
+				}
+				const slot = slots[name];
+				if (!slot) return;
+				if (!slot.name.startsWith(mark_s)) {
+					slot.childNodes.forEach((c) => c.remove());
+					slot.name = mark_s + name;
+				}
+				slot.append(el);
+			}
+			element.append = orig;
+			return element;
+		}
+	});
+	if (element !== root) {
+		const els = Array.from(element.childNodes);
+		element.append(...els);
+	}
+	return root;
+}
 function customElementRender(target, render, props = {}) {
 	const custom_element = target.host || target;
 	scope.push({
@@ -662,7 +667,6 @@ export {
 	dispatchEvent,
 	createElement as el,
 	createElementNS as elNS,
-	elementAttribute,
 	lifecyclesToEvents,
 	memo,
 	on,

dist/esm.min.d.ts

@@ -178,11 +178,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

dist/iife-with-signals.d.ts

@@ -179,11 +179,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

dist/iife-with-signals.js

@@ -32,7 +32,6 @@ var DDE = (() => {
 		dispatchEvent: () => dispatchEvent,
 		el: () => createElement,
 		elNS: () => createElementNS,
-		elementAttribute: () => elementAttribute,
 		isSignal: () => isSignal,
 		lifecyclesToEvents: () => lifecyclesToEvents,
 		memo: () => memo,
@@ -101,38 +100,7 @@ var DDE = (() => {
 		}
 	};
 
-	// src/signals-lib/common.js
+	// src/dom-lib/common.js
-	var signals_global = {
-		/**
-		* Checks if a value is a signal
-		* @param {any} attributes - Value to check
-		* @returns {boolean} Whether the value is a signal
-		*/
-		isSignal(attributes) {
-			return false;
-		},
-		/**
-		* Processes an attribute that might be reactive
-		* @param {Element} obj - Element that owns the attribute
-		* @param {string} key - Attribute name
-		* @param {any} attr - Attribute value
-		* @param {Function} set - Function to set the attribute
-		* @returns {any} Processed attribute value
-		*/
-		processReactiveAttribute(obj, key, attr, set) {
-			return attr;
-		}
-	};
-	function registerReactivity(def, global = true) {
-		if (global) return oAssign(signals_global, def);
-		Object.setPrototypeOf(def, signals_global);
-		return def;
-	}
-	function signals(_this) {
-		return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
-	}
-
-	// src/dom-common.js
 	var enviroment = {
 		setDeleteAttr,
 		ssr: "",
@@ -158,7 +126,7 @@ var DDE = (() => {
 	var evd = "dde:disconnected";
 	var eva = "dde:attributeChanged";
 
-	// src/events-observer.js
+	// src/dom-lib/events-observer.js
 	var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 		get() {
 			return () => {
@@ -322,7 +290,7 @@ var DDE = (() => {
 		}
 	}
 
-	// src/events.js
+	// src/dom-lib/events.js
 	function dispatchEvent(name, options, host) {
 		if (typeof options === "function") {
 			host = options;
@@ -367,10 +335,7 @@ var DDE = (() => {
 		};
 	};
 
-	// src/dom.js
+	// src/dom-lib/scopes.js
-	function queue(promise) {
-		return enviroment.q(promise);
-	}
 	var scopes = [{
 		get scope() {
 			return enviroment.D.body;
@@ -445,6 +410,61 @@ var DDE = (() => {
 			return scopes.pop();
 		}
 	};
+	on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
+
+	// src/signals-lib/common.js
+	var signals_global = {
+		/**
+		* Checks if a value is a signal
+		* @param {any} attributes - Value to check
+		* @returns {boolean} Whether the value is a signal
+		*/
+		isSignal(attributes) {
+			return false;
+		},
+		/**
+		* Processes an attribute that might be reactive
+		* @param {Element} obj - Element that owns the attribute
+		* @param {string} key - Attribute name
+		* @param {any} attr - Attribute value
+		* @param {Function} set - Function to set the attribute
+		* @returns {any} Processed attribute value
+		*/
+		processReactiveAttribute(obj, key, attr, set) {
+			return attr;
+		}
+	};
+	function registerReactivity(def, global = true) {
+		if (global) return oAssign(signals_global, def);
+		Object.setPrototypeOf(def, signals_global);
+		return def;
+	}
+	function signals(_this) {
+		return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
+	}
+
+	// src/dom-lib/helpers.js
+	function setRemove(obj, prop, key, val) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
+	}
+	function setRemoveNS(obj, prop, key, val, ns = null) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
+	}
+	function setDelete(obj, key, val) {
+		Reflect.set(obj, key, val);
+		if (!isUndef(val)) return;
+		return Reflect.deleteProperty(obj, key);
+	}
+	function elementAttribute(element, op, key, value) {
+		if (isInstance(element, enviroment.H))
+			return element[op + "Attribute"](key, value);
+		return element[op + "AttributeNS"](null, key, value);
+	}
+
+	// src/dom-lib/el.js
+	function queue(promise) {
+		return enviroment.q(promise);
+	}
 	function append(...els) {
 		this.appendOriginal(...els);
 		return this;
@@ -514,38 +534,6 @@ var DDE = (() => {
 			return el;
 		};
 	}
-	function simulateSlots(element, root = element) {
-		const mark_e = "\xB9\u2070", mark_s = "\u2713";
-		const slots = Object.fromEntries(
-			Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
-		);
-		element.append = new Proxy(element.append, {
-			apply(orig, _, els) {
-				if (els[0] === root) return orig.apply(element, els);
-				for (const el of els) {
-					const name = (el.slot || "") + mark_e;
-					try {
-						elementAttribute(el, "remove", "slot");
-					} catch (_error) {
-					}
-					const slot = slots[name];
-					if (!slot) return;
-					if (!slot.name.startsWith(mark_s)) {
-						slot.childNodes.forEach((c) => c.remove());
-						slot.name = mark_s + name;
-					}
-					slot.append(el);
-				}
-				element.append = orig;
-				return element;
-			}
-		});
-		if (element !== root) {
-			const els = Array.from(element.childNodes);
-			element.append(...els);
-		}
-		return root;
-	}
 	var assign_context = /* @__PURE__ */ new WeakMap();
 	var { setDeleteAttr: setDeleteAttr2 } = enviroment;
 	function assign(element, ...attributes) {
@@ -608,11 +596,6 @@ var DDE = (() => {
 		);
 		return element;
 	}
-	function elementAttribute(element, op, key, value) {
-		if (isInstance(element, enviroment.H))
-			return element[op + "Attribute"](key, value);
-		return element[op + "AttributeNS"](null, key, value);
-	}
 	function isPropSetter(el, key) {
 		if (!(key in el)) return false;
 		const des = getPropDescriptor(el, key);
@@ -636,19 +619,40 @@ var DDE = (() => {
 			cb(key, val);
 		});
 	}
-	function setRemove(obj, prop, key, val) {
-		return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
-	}
-	function setRemoveNS(obj, prop, key, val, ns = null) {
-		return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
-	}
-	function setDelete(obj, key, val) {
-		Reflect.set(obj, key, val);
-		if (!isUndef(val)) return;
-		return Reflect.deleteProperty(obj, key);
-	}
 
-	// src/customElement.js
+	// src/dom-lib/customElement.js
+	function simulateSlots(element, root = element) {
+		const mark_e = "\xB9\u2070", mark_s = "\u2713";
+		const slots = Object.fromEntries(
+			Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
+		);
+		element.append = new Proxy(element.append, {
+			apply(orig, _, els) {
+				if (els[0] === root) return orig.apply(element, els);
+				for (const el of els) {
+					const name = (el.slot || "") + mark_e;
+					try {
+						elementAttribute(el, "remove", "slot");
+					} catch (_error) {
+					}
+					const slot = slots[name];
+					if (!slot) return;
+					if (!slot.name.startsWith(mark_s)) {
+						slot.childNodes.forEach((c) => c.remove());
+						slot.name = mark_s + name;
+					}
+					slot.append(el);
+				}
+				element.append = orig;
+				return element;
+			}
+		});
+		if (element !== root) {
+			const els = Array.from(element.childNodes);
+			element.append(...els);
+		}
+		return root;
+	}
 	function customElementRender(target, render, props = {}) {
 		const custom_element = target.host || target;
 		scope.push({

dist/iife-with-signals.min.d.ts

@@ -179,11 +179,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

dist/iife.d.ts

@@ -178,11 +178,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

dist/iife.js

@@ -31,7 +31,6 @@ var DDE = (() => {
 		dispatchEvent: () => dispatchEvent,
 		el: () => createElement,
 		elNS: () => createElementNS,
-		elementAttribute: () => elementAttribute,
 		lifecyclesToEvents: () => lifecyclesToEvents,
 		memo: () => memo,
 		on: () => on,
@@ -69,38 +68,7 @@ var DDE = (() => {
 		};
 	}
 
-	// src/signals-lib/common.js
+	// src/dom-lib/common.js
-	var signals_global = {
-		/**
-		* Checks if a value is a signal
-		* @param {any} attributes - Value to check
-		* @returns {boolean} Whether the value is a signal
-		*/
-		isSignal(attributes) {
-			return false;
-		},
-		/**
-		* Processes an attribute that might be reactive
-		* @param {Element} obj - Element that owns the attribute
-		* @param {string} key - Attribute name
-		* @param {any} attr - Attribute value
-		* @param {Function} set - Function to set the attribute
-		* @returns {any} Processed attribute value
-		*/
-		processReactiveAttribute(obj, key, attr, set) {
-			return attr;
-		}
-	};
-	function registerReactivity(def, global = true) {
-		if (global) return oAssign(signals_global, def);
-		Object.setPrototypeOf(def, signals_global);
-		return def;
-	}
-	function signals(_this) {
-		return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
-	}
-
-	// src/dom-common.js
 	var enviroment = {
 		setDeleteAttr,
 		ssr: "",
@@ -126,7 +94,7 @@ var DDE = (() => {
 	var evd = "dde:disconnected";
 	var eva = "dde:attributeChanged";
 
-	// src/events-observer.js
+	// src/dom-lib/events-observer.js
 	var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
 		get() {
 			return () => {
@@ -290,7 +258,7 @@ var DDE = (() => {
 		}
 	}
 
-	// src/events.js
+	// src/dom-lib/events.js
 	function dispatchEvent(name, options, host) {
 		if (typeof options === "function") {
 			host = options;
@@ -335,10 +303,7 @@ var DDE = (() => {
 		};
 	};
 
-	// src/dom.js
+	// src/dom-lib/scopes.js
-	function queue(promise) {
-		return enviroment.q(promise);
-	}
 	var scopes = [{
 		get scope() {
 			return enviroment.D.body;
@@ -413,6 +378,61 @@ var DDE = (() => {
 			return scopes.pop();
 		}
 	};
+	on.host = (fn, host = scope.host) => (el) => host(() => fn(el));
+
+	// src/signals-lib/common.js
+	var signals_global = {
+		/**
+		* Checks if a value is a signal
+		* @param {any} attributes - Value to check
+		* @returns {boolean} Whether the value is a signal
+		*/
+		isSignal(attributes) {
+			return false;
+		},
+		/**
+		* Processes an attribute that might be reactive
+		* @param {Element} obj - Element that owns the attribute
+		* @param {string} key - Attribute name
+		* @param {any} attr - Attribute value
+		* @param {Function} set - Function to set the attribute
+		* @returns {any} Processed attribute value
+		*/
+		processReactiveAttribute(obj, key, attr, set) {
+			return attr;
+		}
+	};
+	function registerReactivity(def, global = true) {
+		if (global) return oAssign(signals_global, def);
+		Object.setPrototypeOf(def, signals_global);
+		return def;
+	}
+	function signals(_this) {
+		return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global;
+	}
+
+	// src/dom-lib/helpers.js
+	function setRemove(obj, prop, key, val) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
+	}
+	function setRemoveNS(obj, prop, key, val, ns = null) {
+		return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
+	}
+	function setDelete(obj, key, val) {
+		Reflect.set(obj, key, val);
+		if (!isUndef(val)) return;
+		return Reflect.deleteProperty(obj, key);
+	}
+	function elementAttribute(element, op, key, value) {
+		if (isInstance(element, enviroment.H))
+			return element[op + "Attribute"](key, value);
+		return element[op + "AttributeNS"](null, key, value);
+	}
+
+	// src/dom-lib/el.js
+	function queue(promise) {
+		return enviroment.q(promise);
+	}
 	function append(...els) {
 		this.appendOriginal(...els);
 		return this;
@@ -482,38 +502,6 @@ var DDE = (() => {
 			return el;
 		};
 	}
-	function simulateSlots(element, root = element) {
-		const mark_e = "\xB9\u2070", mark_s = "\u2713";
-		const slots = Object.fromEntries(
-			Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
-		);
-		element.append = new Proxy(element.append, {
-			apply(orig, _, els) {
-				if (els[0] === root) return orig.apply(element, els);
-				for (const el of els) {
-					const name = (el.slot || "") + mark_e;
-					try {
-						elementAttribute(el, "remove", "slot");
-					} catch (_error) {
-					}
-					const slot = slots[name];
-					if (!slot) return;
-					if (!slot.name.startsWith(mark_s)) {
-						slot.childNodes.forEach((c) => c.remove());
-						slot.name = mark_s + name;
-					}
-					slot.append(el);
-				}
-				element.append = orig;
-				return element;
-			}
-		});
-		if (element !== root) {
-			const els = Array.from(element.childNodes);
-			element.append(...els);
-		}
-		return root;
-	}
 	var assign_context = /* @__PURE__ */ new WeakMap();
 	var { setDeleteAttr: setDeleteAttr2 } = enviroment;
 	function assign(element, ...attributes) {
@@ -576,11 +564,6 @@ var DDE = (() => {
 		);
 		return element;
 	}
-	function elementAttribute(element, op, key, value) {
-		if (isInstance(element, enviroment.H))
-			return element[op + "Attribute"](key, value);
-		return element[op + "AttributeNS"](null, key, value);
-	}
 	function isPropSetter(el, key) {
 		if (!(key in el)) return false;
 		const des = getPropDescriptor(el, key);
@@ -604,19 +587,40 @@ var DDE = (() => {
 			cb(key, val);
 		});
 	}
-	function setRemove(obj, prop, key, val) {
-		return obj[(isUndef(val) ? "remove" : "set") + prop](key, val);
-	}
-	function setRemoveNS(obj, prop, key, val, ns = null) {
-		return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val);
-	}
-	function setDelete(obj, key, val) {
-		Reflect.set(obj, key, val);
-		if (!isUndef(val)) return;
-		return Reflect.deleteProperty(obj, key);
-	}
 
-	// src/customElement.js
+	// src/dom-lib/customElement.js
+	function simulateSlots(element, root = element) {
+		const mark_e = "\xB9\u2070", mark_s = "\u2713";
+		const slots = Object.fromEntries(
+			Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s])
+		);
+		element.append = new Proxy(element.append, {
+			apply(orig, _, els) {
+				if (els[0] === root) return orig.apply(element, els);
+				for (const el of els) {
+					const name = (el.slot || "") + mark_e;
+					try {
+						elementAttribute(el, "remove", "slot");
+					} catch (_error) {
+					}
+					const slot = slots[name];
+					if (!slot) return;
+					if (!slot.name.startsWith(mark_s)) {
+						slot.childNodes.forEach((c) => c.remove());
+						slot.name = mark_s + name;
+					}
+					slot.append(el);
+				}
+				element.append = orig;
+				return element;
+			}
+		});
+		if (element !== root) {
+			const els = Array.from(element.childNodes);
+			element.append(...els);
+		}
+		return root;
+	}
 	function customElementRender(target, render, props = {}) {
 		const custom_element = target.host || target;
 		scope.push({

dist/iife.min.d.ts

@@ -178,11 +178,22 @@ export interface On {
 	connected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<El>) => any, options?: AddEventListenerOptions): EE;
 	/** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
 	disconnected<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<void>) => any, options?: AddEventListenerOptions): EE;
-	/** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line
+	/**
-	attributeChanged<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (this: El, event: CustomEvent<[
+	 * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`.
-		string,
+	 * This is handy to apply some property depending on full template such as:
-		string
+	 * ```js
-	]>) => any, options?: AddEventListenerOptions): EE;
+	 * const selected= "Z";
+	 * //...
+	 * return el("form").append(
+	 *		el("select", null, on.host(e=> e.value=selected)).append(
+	 *			el("option", { value: "A", textContent: "A" }),
+	 *			//...
+	 *			el("option", { value: "Z", textContent: "Z" }),
+	 *		),
+	 * );
+	 * ```
+	 * */
+	host<EE extends ddeElementAddon<SupportedElement>, El extends (EE extends ddeElementAddon<infer El> ? El : never)>(listener: (element: El) => any, host?: Host<SupportedElement>): EE;
 }
 export const on: On;
 export type Scope = {

index.js

@@ -1,5 +1,3 @@
-export * from "./src/dom.js";
+export * from "./src/dom-lib/index.js";
-export * from "./src/customElement.js";
-export * from "./src/events.js";
-export { registerReactivity } from "./src/signals-lib/common.js";
 export { memo } from "./src/memo.js";
+export { registerReactivity } from "./src/signals-lib/common.js";

jsdom.js

@@ -1,4 +1,4 @@
-import { enviroment as env } from './src/dom-common.js';
+import { enviroment as env } from './src/dom-lib/common.js';
 env.ssr= " ssr";
 
 const q_store= new Set();

src/dom-lib/common.js

@@ -21,7 +21,7 @@ export const enviroment= {
 	M: globalThis.MutationObserver,
 	q: p=> p || Promise.resolve(),
 };
-import { isInstance, isUndef } from './helpers.js';
+import { isInstance, isUndef } from '../helpers.js';
 
 /**
  * Handles attribute setting with special undefined handling

src/dom-lib/customElement.js

@@ -1,6 +1,47 @@
-import { keyLTE, evc, evd, eva } from "./dom-common.js";
+import { keyLTE, evc, evd, eva } from "./common.js";
-import { scope } from "./dom.js";
+import { scope } from "./scopes.js";
 import { c_ch_o } from "./events-observer.js";
+import { elementAttribute } from "./helpers.js";
+
+/**
+ * Simulates slot functionality for elements
+ *
+ * @param {HTMLElement} element - Parent element
+ * @param {HTMLElement} [root=element] - Root element containing slots
+ * @returns {HTMLElement} The root element
+ */
+export function simulateSlots(element, root= element){
+	const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line
+	const slots= Object.fromEntries(
+		Array.from(root.querySelectorAll("slot"))
+			.filter(s => !s.name.endsWith(mark_e))
+			.map(s => [(s.name += mark_e), s]));
+	element.append= new Proxy(element.append, {
+		apply(orig, _, els){
+			if(els[0]===root) return orig.apply(element, els);
+			for(const el of els){
+				const name= (el.slot||"")+mark_e;
+				try{ elementAttribute(el, "remove", "slot"); } catch(_error){}
+				const slot= slots[name];
+				if(!slot) return;
+				if(!slot.name.startsWith(mark_s)){
+					slot.childNodes.forEach(c=> c.remove());
+					slot.name= mark_s+name;
+				}
+				slot.append(el);
+				//TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot }));
+			}
+			element.append= orig; //TODO?: better memory management, but non-native behavior!
+			return element;
+		}
+	});
+	if(element!==root){
+		const els= Array.from(element.childNodes);
+		//TODO?: els.forEach(el=> el.remove());
+		element.append(...els);
+	}
+	return root;
+}
 
 /**
  * Renders content into a custom element or shadow root

src/dom-lib/el.js

@@ -1,7 +1,6 @@
-import { signals } from "./signals-lib/common.js";
+import { signals } from "../signals-lib/common.js";
-import { enviroment as env } from './dom-common.js';
+import { enviroment as env } from './common.js';
-import { isInstance, isUndef, oAssign } from "./helpers.js";
+import { isInstance, isUndef, oAssign } from "../helpers.js";
-import { on } from "./events.js";
 
 /**
  * Queues a promise, this is helpful for crossplatform components (on server side we can wait for all registered
@@ -11,84 +10,6 @@ import { on } from "./events.js";
  */
 export function queue(promise){ return env.q(promise); }
 
-/**
- * Array of scope contexts for tracking component hierarchies
- * @type {{ scope: object, prevent: boolean, host: function }[]}
- */
-const scopes= [ {
-	get scope(){ return  env.D.body; },
-	host: c=> c ? c(env.D.body) : env.D.body,
-	prevent: true,
-} ];
-/** Store for disconnect abort controllers */
-const store_abort= new WeakMap();
-/**
- * Scope management utility for tracking component hierarchies
- */
-export const scope= {
-	/**
-	 * Gets the current scope
-	 * @returns {Object} Current scope context
-	 */
-	get current(){ return scopes[scopes.length-1]; },
-
-	/**
-	 * Gets the host element of the current scope
-	 * @returns {Function} Host accessor function
-	 */
-	get host(){ return this.current.host; },
-
-	/**
-	 * Creates/gets an AbortController that triggers when the element disconnects
-	 * */
-	get signal(){
-		const { host }= this;
-		if(store_abort.has(host)) return store_abort.get(host);
-
-		const a= new AbortController();
-		store_abort.set(host, a);
-		host(on.disconnected(()=> a.abort()));
-		return a.signal;
-	},
-
-	/**
-	 * Prevents default behavior in the current scope
-	 * @returns {Object} Current scope context
-	 */
-	preventDefault(){
-		const { current }= this;
-		current.prevent= true;
-		return current;
-	},
-
-	/**
-	 * Gets a copy of the current scope stack
-	 * @returns {Array} Copy of scope stack
-	 */
-	get state(){ return [ ...scopes ]; },
-
-	/**
-	 * Pushes a new scope to the stack
-	 * @param {Object} [s={}] - Scope object to push
-	 * @returns {number} New length of the scope stack
-	 */
-	push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); },
-
-	/**
-	 * Pushes the root scope to the stack
-	 * @returns {number} New length of the scope stack
-	 */
-	pushRoot(){ return scopes.push(scopes[0]); },
-
-	/**
-	 * Pops the current scope from the stack
-	 * @returns {Object|undefined} Popped scope or undefined if only one scope remains
-	 */
-	pop(){
-		if(scopes.length===1) return;
-		return scopes.pop();
-	},
-};
 /**
  * Chainable append function for elements
  * @private
@@ -107,6 +28,7 @@ export function chainableAppend(el){
 /** Current namespace for element creation */
 let namespace;
 
+import { scope } from "./scopes.js";
 /**
  * Creates a DOM element with specified tag, attributes and addons
  *
@@ -191,46 +113,6 @@ export function createElementNS(ns){
 /** Alias for createElementNS */
 export { createElementNS as elNS };
 
-/**
- * Simulates slot functionality for elements
- *
- * @param {HTMLElement} element - Parent element
- * @param {HTMLElement} [root=element] - Root element containing slots
- * @returns {HTMLElement} The root element
- */
-export function simulateSlots(element, root= element){
-	const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line
-	const slots= Object.fromEntries(
-		Array.from(root.querySelectorAll("slot"))
-			.filter(s => !s.name.endsWith(mark_e))
-			.map(s => [(s.name += mark_e), s]));
-	element.append= new Proxy(element.append, {
-		apply(orig, _, els){
-			if(els[0]===root) return orig.apply(element, els);
-			for(const el of els){
-				const name= (el.slot||"")+mark_e;
-				try{ elementAttribute(el, "remove", "slot"); } catch(_error){}
-				const slot= slots[name];
-				if(!slot) return;
-				if(!slot.name.startsWith(mark_s)){
-					slot.childNodes.forEach(c=> c.remove());
-					slot.name= mark_s+name;
-				}
-				slot.append(el);
-				//TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot }));
-			}
-			element.append= orig; //TODO?: better memory management, but non-native behavior!
-			return element;
-		}
-	});
-	if(element!==root){
-		const els= Array.from(element.childNodes);
-		//TODO?: els.forEach(el=> el.remove());
-		element.append(...els);
-	}
-	return root;
-}
-
 /** Store for element assignment contexts */
 const assign_context= new WeakMap();
 const { setDeleteAttr }= env;
@@ -251,6 +133,7 @@ export function assign(element, ...attributes){
 	assign_context.delete(element);
 	return element;
 }
+import { setDelete } from "./helpers.js";
 /**
  * Assigns a single attribute to an element
  *
@@ -290,6 +173,7 @@ export function assignAttribute(element, key, value){
 	}
 	return isPropSetter(element, key) ? setDeleteAttr(element, key, value) : setRemoveAttr(key, value);
 }
+import { setRemove, setRemoveNS } from "./helpers.js";
 /**
  * Gets or creates assignment context for an element
  *
@@ -320,21 +204,6 @@ export function classListDeclarative(element, toggle){
 	return element;
 }
 
-/**
- * Generic element attribute manipulation
- *
- * @param {Element} element - Element to manipulate
- * @param {string} op - Operation ("set" or "remove")
- * @param {string} key - Attribute name
- * @param {any} [value] - Attribute value
- * @returns {void}
- */
-export function elementAttribute(element, op, key, value){
-	if(isInstance(element, env.H))
-		return element[op+"Attribute"](key, value);
-	return element[op+"AttributeNS"](null, key, value);
-}
-
 //TODO: add cache? `(Map/Set)<el.tagName+key,isUndef>`
 /**
  * Checks if a property can be set on an element
@@ -385,45 +254,3 @@ function forEachEntries(s, target, element, obj, cb){
 		cb(key, val);
 	});
 }
-
-/**
- * Sets or removes an attribute based on value
- *
- * @param {Element} obj - Element to modify
- * @param {string} prop - Property suffix ("Attribute")
- * @param {string} key - Attribute name
- * @param {any} val - Attribute value
- * @returns {void}
- * @private
- */
-function setRemove(obj, prop, key, val){
-	return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val);
-}
-
-/**
- * Sets or removes a namespaced attribute based on value
- *
- * @param {Element} obj - Element to modify
- * @param {string} prop - Property suffix ("Attribute")
- * @param {string} key - Attribute name
- * @param {any} val - Attribute value
- * @param {string|null} [ns=null] - Namespace URI
- * @returns {void}
- * @private
- */
-function setRemoveNS(obj, prop, key, val, ns= null){
-	return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val);
-}
-
-/**
- * Sets or deletes a property based on value
- *
- * @param {Object} obj - Object to modify
- * @param {string} key - Property name
- * @param {any} val - Property value
- * @returns {void}
- * @private
- */
-function setDelete(obj, key, val){
-	Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key);
-}

src/dom-lib/events-observer.js

@@ -1,5 +1,5 @@
-import { enviroment as env, evc, evd } from './dom-common.js';
+import { enviroment as env, evc, evd } from './common.js';
-import { isInstance } from "./helpers.js";
+import { isInstance } from "../helpers.js";
 
 /**
  * Connection changes observer for tracking element connection/disconnection

src/dom-lib/events.js

@@ -1,5 +1,5 @@
-import { keyLTE, evc, evd } from './dom-common.js';
+import { keyLTE, evc, evd } from './common.js';
-import { oAssign, onAbort } from './helpers.js';
+import { oAssign, onAbort } from '../helpers.js';
 
 /**
  * Creates a function to dispatch events on elements

src/dom-lib/helpers.js

@@ -0,0 +1,57 @@
+import { enviroment as env } from './common.js';
+import { isInstance, isUndef } from "../helpers.js";
+/**
+ * Sets or removes an attribute based on value
+ *
+ * @param {Element} obj - Element to modify
+ * @param {string} prop - Property suffix ("Attribute")
+ * @param {string} key - Attribute name
+ * @param {any} val - Attribute value
+ * @returns {void}
+ * @private
+ */
+export function setRemove(obj, prop, key, val){
+	return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val);
+}
+
+/**
+ * Sets or removes a namespaced attribute based on value
+ *
+ * @param {Element} obj - Element to modify
+ * @param {string} prop - Property suffix ("Attribute")
+ * @param {string} key - Attribute name
+ * @param {any} val - Attribute value
+ * @param {string|null} [ns=null] - Namespace URI
+ * @returns {void}
+ * @private
+ */
+export function setRemoveNS(obj, prop, key, val, ns= null){
+	return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val);
+}
+
+/**
+ * Sets or deletes a property based on value
+ *
+ * @param {Object} obj - Object to modify
+ * @param {string} key - Property name
+ * @param {any} val - Property value
+ * @returns {void}
+ * @private
+ */
+export function setDelete(obj, key, val){
+	Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key);
+}
+/**
+ * Generic element attribute manipulation
+ *
+ * @param {Element} element - Element to manipulate
+ * @param {string} op - Operation ("set" or "remove")
+ * @param {string} key - Attribute name
+ * @param {any} [value] - Attribute value
+ * @returns {void}
+ */
+export function elementAttribute(element, op, key, value){
+	if(isInstance(element, env.H))
+		return element[op+"Attribute"](key, value);
+	return element[op+"AttributeNS"](null, key, value);
+}

src/dom-lib/index.js

@@ -0,0 +1,4 @@
+export * from "./scopes.js";
+export * from "./el.js";
+export * from "./events.js";
+export * from "./customElement.js";

src/dom-lib/scopes.js

@@ -0,0 +1,84 @@
+import { enviroment as env } from './common.js';
+import { oAssign } from "../helpers.js";
+import { on } from "./events.js";
+
+/**
+ * Array of scope contexts for tracking component hierarchies
+ * @type {{ scope: object, prevent: boolean, host: function }[]}
+ */
+const scopes= [ {
+	get scope(){ return  env.D.body; },
+	host: c=> c ? c(env.D.body) : env.D.body,
+	prevent: true,
+} ];
+/** Store for disconnect abort controllers */
+const store_abort= new WeakMap();
+/**
+ * Scope management utility for tracking component hierarchies
+ */
+export const scope= {
+	/**
+	 * Gets the current scope
+	 * @returns {Object} Current scope context
+	 */
+	get current(){ return scopes[scopes.length-1]; },
+
+	/**
+	 * Gets the host element of the current scope
+	 * @returns {Function} Host accessor function
+	 */
+	get host(){ return this.current.host; },
+
+	/**
+	 * Creates/gets an AbortController that triggers when the element disconnects
+	 * */
+	get signal(){
+		const { host }= this;
+		if(store_abort.has(host)) return store_abort.get(host);
+
+		const a= new AbortController();
+		store_abort.set(host, a);
+		host(on.disconnected(()=> a.abort()));
+		return a.signal;
+	},
+
+	/**
+	 * Prevents default behavior in the current scope
+	 * @returns {Object} Current scope context
+	 */
+	preventDefault(){
+		const { current }= this;
+		current.prevent= true;
+		return current;
+	},
+
+	/**
+	 * Gets a copy of the current scope stack
+	 * @returns {Array} Copy of scope stack
+	 */
+	get state(){ return [ ...scopes ]; },
+
+	/**
+	 * Pushes a new scope to the stack
+	 * @param {Object} [s={}] - Scope object to push
+	 * @returns {number} New length of the scope stack
+	 */
+	push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); },
+
+	/**
+	 * Pushes the root scope to the stack
+	 * @returns {number} New length of the scope stack
+	 */
+	pushRoot(){ return scopes.push(scopes[0]); },
+
+	/**
+	 * Pops the current scope from the stack
+	 * @returns {Object|undefined} Popped scope or undefined if only one scope remains
+	 */
+	pop(){
+		if(scopes.length===1) return;
+		return scopes.pop();
+	},
+};
+// TODO: better place while no cross-import?
+on.host= (fn, host= scope.host)=> el=> host(()=> fn(el));

src/signals-lib/signals-lib.js

@@ -159,10 +159,10 @@ signal.clear= function(...signals){
 };
 /** Property key for tracking reactive elements */
 const key_reactive= "__dde_reactive";
-import { enviroment as env, eva } from "../dom-common.js";
+import { enviroment as env, eva } from "../dom-lib/common.js";
-import { el } from "../dom.js";
+import { el } from "../dom-lib/index.js";
-import { scope } from "../dom.js";
+import { scope } from "../dom-lib/scopes.js";
-import { on } from "../events.js";
+import { on } from "../dom-lib/events.js";
 import { memo } from "../memo.js";
 
 /**