♻️ Refactore, add abort option

src/dom.js

@@ -1,4 +1,3 @@
-import { addSignalListener, isSignal } from './signals.js';
 let namespace_curr= "html";
 export function namespace(namespace){
 	namespace_curr= namespace==="svg" ? "http://www.w3.org/2000/svg" : namespace;
@@ -6,8 +5,10 @@ export function namespace(namespace){
 		append(el){ namespace_curr= "html"; return el; }
 	};
 }
+import { typeOf } from './helpers.js';
+import { isSignal, valueOfSignal } from './signals-common.js';
 export function createElement(tag, attributes, ...connect){
-	if(typeof attributes==="string" || ( isSignal(attributes) /* TODO && isText*/ ))
+	if(typeOf(attributes)!=="[object Object]" || ( isSignal(attributes) && typeOf(valueOfSignal(attributes))!=="[object Object]" ))
 		attributes= { textContent: attributes };
 	let el;
 	switch(true){
@@ -22,6 +23,7 @@ export function createElement(tag, attributes, ...connect){
 }
 export { createElement as el };
 
+import { addSignalListener } from './signals-common.js';
 export function assign(element, ...attributes){
 	if(!attributes.length) return element;
 	const is_svg= element instanceof SVGElement;

src/events.js

@@ -1,7 +1,18 @@
-import { isSignal, addSignalListener } from './signals.js';
+import { isSignal, addSignalListener, removeSignalListener } from './signals-common.js';
 export function on(event, listener, options){
-	if(isSignal(event)) return addSignalListener(event, listener);
-	return element=> element.addEventListener(event, listener, options);
+	if(!isSignal(event))
+		return element=> element.addEventListener(event, listener, options);
+	//TODO cleanup when signal removed (also TODO)
+	if(options && options.signal)
+		options.signal.addEventListener("abort", ()=> removeSignalListener(event, listener));
+	return addSignalListener(event, listener);
+}
+export function off(){//TODO is needed?
+	const abort= new AbortController();
+	return new Proxy(()=> abort.abort(), {
+		get(_, p){ return Reflect.get(abort, p); },
+		ownKeys(){ return [ "signal" ]; }
+	})
 }
 export function dispatch(event, detail){
 	if(typeof event === "string")
@@ -10,6 +21,7 @@ export function dispatch(event, detail){
 }
 
 const connections_changes= connectionsChangesObserverConstructor();
+//TODO remove listener(s) options
 on.connected= function(listener){
 	return function registerElement(element){
 		connections_changes.onConnected(element, listener);

src/helpers.js

@@ -0,0 +1,6 @@
+export function typeOf(v){
+	const t= typeof v;
+	if(t!=="object") return t;
+	if(v===null) return "null";
+	return Object.prototype.toString.call(v);
+}

src/signals-common.js

@@ -0,0 +1,23 @@
+export const mark= Symbol.for("signal");
+
+export function isSignal(candidate){
+	try{ return Reflect.has(candidate, mark); }
+	catch(e){ return false; }
+}
+export function valueOfSignal(signal){
+	return signal[mark].value;
+}
+export function toSignal(signal, value){
+	signal[mark]= {
+		value,
+		listeners: new Set()
+	};
+	return signal;
+}
+
+export function addSignalListener(signal, listener){
+	return signal[mark].listeners.add(listener);
+}
+export function removeSignalListener(signal, listener){
+	return signal[mark].listeners.delete(listener);
+}

src/signals.js

@@ -1,11 +1,6 @@
-const mark= Symbol.for("signal");
-export function isSignal(candidate){
-	try{ return Reflect.has(candidate, mark); }
-	catch(e){ return false; }
-}
-export function addSignalListener(signal, listener){
-	return signal[mark].listeners.add(listener);
-}
+import { mark, isSignal, toSignal, addSignalListener } from "./signals-common.js";
+export { isSignal, addSignalListener };
+
 export function S(value){
 	if(typeof value!=="function")
 		return create(value);
@@ -59,13 +54,6 @@ function create(value){
 		value.length ? write(signal, value[0]) : read(signal[mark]);
 	return toSignal(signal, value);
 }
-function toSignal(signal, value){
-	signal[mark]= {
-		value,
-		listeners: new Set()
-	};
-	return signal;
-}
 function createWrapObject(type, signal){
 	return new Proxy(signal, {
 		set(_, p, newValue){

test/index.js

@@ -1,11 +1,9 @@
-import { S, empty, watch, el, namespace, assign, on, dispatch } from "../index.js";
-Object.assign(globalThis, { S, watch, el, namespace, assign, on, dispatch });
+import { S, el, on, off } from "../index.js";
+//import { empty, namespace, on, dispatch } from "../index.js";
+Object.assign(globalThis, { S, el, on, off });
 
 const style= createStyle();
 const app= el(todosComponent);
-dispatch("change", "Peter")(app);
-console.log(app, app instanceof HTMLDivElement);
-
 document.head.append(style.element);
 document.body.append(app);