✨ Add on.disconnectedAsAbort(), pushRoot() to scope (and 🐛 pop)

dist/esm-with-signals.d.ts

@@ -139,6 +139,8 @@ export const scope: {
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
 	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>,
 	/** Removes last/current child scope. */
 	pop(): ReturnType<Array<Scope>["pop"]>,
 };

dist/esm.d.ts

@@ -139,6 +139,8 @@ export const scope: {
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
 	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>,
 	/** Removes last/current child scope. */
 	pop(): ReturnType<Array<Scope>["pop"]>,
 };

examples/components/fullNameComponent.js

@@ -10,8 +10,10 @@ export function fullNameComponent(){
 	const name= labels.map(_=> S(""));
 	const full_name= S(()=>
 		name.map(l=> l()).filter(Boolean).join(" ") || "-");
-	scope.host(on.connected(()=> console.log(fullNameComponent)));
+	scope.host(
-	scope.host(on.disconnected(()=> console.log(fullNameComponent)))
+		on.connected(()=> console.log(fullNameComponent)),
+		on.disconnected(()=> console.log(fullNameComponent))
+	);
 
 	const elSVG= elNS("http://www.w3.org/2000/svg");
 	return el("div", { className }).append(

examples/components/webComponent.js

@@ -23,17 +23,19 @@ export class CustomHTMLTestElement extends HTMLElement{
 
 	render({ test }){
 		console.log(scope.state);
-		scope.host(on.connected(()=> console.log(CustomHTMLTestElement)));
+		scope.host(
-		scope.host(on.attributeChanged(e=> console.log(e)));
+			on.connected(()=> console.log(CustomHTMLTestElement)),
-		scope.host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
+			on.attributeChanged(e=> console.log(e)),
+			on.disconnected(()=> console.log(CustomHTMLTestElement))
+		);
 		
 		const name= S.attribute("name");
 		const preName= S.attribute("pre-name");
 		console.log({ name, test, preName});
 		return el("p").append(
-			el("#text", { textContent: name }),
+			el("#text", name),
-			el("#text", { textContent: test }),
+			el("#text", test),
-			el("#text", { textContent: preName }),
+			el("#text", preName),
 			el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") })
 		);
 	}
@@ -48,7 +50,7 @@ lifecycleToEvents(CustomHTMLTestElement)
 customElements.define(CustomHTMLTestElement.tagName, CustomHTMLTestElement);
 
 function customElementRender(_this, render){
-	scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this, custom_element: _this });
+	scope.push({ scope: _this, host: (...c)=> c.length ? c.forEach(c=> c(_this)) : _this, custom_element: _this });
 	const out= render(_this);
 	scope.pop();
 	return out;

index.d.ts

@@ -145,6 +145,8 @@ export const scope: {
 	state: Scope[],
 	/** Adds new child scope. All attributes are inherited by default. */
 	push(scope: Partial<Scope>): ReturnType<Array<Scope>["push"]>,
+	/** Adds root scope as a child of the current scope. */
+	pushRoot(): ReturnType<Array<Scope>["push"]>,
 	/** Removes last/current child scope. */
 	pop(): ReturnType<Array<Scope>["pop"]>,
 };

src/dom.js

@@ -19,11 +19,15 @@ export const scope= {
 	},
 	
 	get state(){ return [ ...scopes ]; },
-	push(s= {}){
+	push(s= {}){ return scopes.push(Object.assign({}, this.current, { prevent: false }, s)); },
-		return scopes.push(Object.assign({}, this.current, { prevent: false }, s));
+	pushRoot(){ return scopes.push(scopes[0]); },
+	pop(){
+		if(scopes.length===1) return;
+		return scopes.pop();
 	},
-	pop(){ return scopes.pop(); },
 };
+function append(...els){ this.appendOrig(...els); return this; }
+export function chainableAppend(el){ if(el.append===append) return el; el.appendOrig= el.append; el.append= append; return el; }
 let namespace;
 export function createElement(tag, attributes, ...modifiers){
 	/* jshint maxcomplexity: 15 */
@@ -36,7 +40,7 @@ export function createElement(tag, attributes, ...modifiers){
 	switch(true){
 		case typeof tag==="function": {
 			scoped= 1;
-			scope.push({ scope: tag, host: c=> c ? (scoped===1 ? modifiers.unshift(c) : c(el_host), undefined) : el_host });
+			scope.push({ scope: tag, host: (...c)=> c.length ? (scoped===1 ? modifiers.unshift(...c) : c.forEach(c=> c(el_host)), undefined) : el_host });
 			el= tag(attributes || undefined);
 			const is_fragment= el instanceof DocumentFragment;
 			if(el.nodeName==="#comment") break;
@@ -72,11 +76,6 @@ createElement.mark= function(attrs, is_open= false){
 	if(!is_open) out.end= document.createComment("</dde:mark>");
 	return out;
 };
-createElement.later= function(){
-	const el= createElement.mark({ type: "later" });
-	el.append= el.prepend= function(...els){ el.after(...els); return el; };
-	return el;
-};
 export { createElement as el };
 
 //const namespaceHelper= ns=> ns==="svg" ? "http://www.w3.org/2000/svg" : ns;
@@ -180,6 +179,3 @@ function attrArrToStr(attr){ return Array.isArray(attr) ? attr.filter(Boolean).j
 function setRemove(obj, prop, key, val){ return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, attrArrToStr(val)); }
 function setRemoveNS(obj, prop, key, val, ns= null){ return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, attrArrToStr(val)); }
 function setDelete(obj, key, val){ Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); }
-
-function append(...els){ this.appendOrig(...els); return this; }
-function chainableAppend(el){ if(el.append===append) return el; el.appendOrig= el.append; el.append= append; return el; }

src/events.js

@@ -51,6 +51,15 @@ on.disconnected= function(listener, options){
 		return element;
 	};
 };
+const store_abort= new WeakMap();
+on.disconnectedAsAbort= function(host){
+	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;
+};
 on.attributeChanged= function(listener, options){
 	const name= "attributeChanged";
 	if(typeof options !== "object")