🐛 docs: use 0.9.* version of Shiky as v1 is in beta

* 🎉

* ➖ no good direction

how to clean up not used in text re-rendering ⇒ needs to be more inside of `O.el`

* 🐛 🔨 `O.el`

* 🚀 implementing #16

* 💥 `on.(dis)connected` only once

dist/dde-with-observables.js

@@ -1,31 +1,31 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
-var O={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function F(t,e=!0){return e?Object.assign(O,t):(Object.setPrototypeOf(t,O),t)}function S(t){return O.isPrototypeOf(t)&&t!==O?t:O}function _(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function D(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function N(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,ct(o),e(t,o)),r},{})}function ct(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:st,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function st(t,e,n){if(Reflect.set(t,e,n),!!_(n)){if(Reflect.deleteProperty(t,e),t instanceof d.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var y=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,custom_element:!1,prevent:!0}],v={get current(){return y[y.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...y]},push(t={}){return y.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return y.push(y[0])},pop(){if(y.length!==1)return y.pop()}};function I(...t){return this.appendOriginal(...t),this}function it(t){return t.append===I||(t.appendOriginal=t.append,t.append=I),t}var P;function R(t,e,...n){let r=S(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,v.push({scope:t,host:(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(g=>g(s)),void 0):s}),c=t(e||void 0);let u=c instanceof d.F;if(c.nodeName==="#comment")break;let l=R.mark({type:"component",name:t.name,host:u?"this":"parentElement"});c.prepend(l),u&&(s=l);break}case t==="#text":c=w.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=w.call(this,d.D.createDocumentFragment(),e);break;case!!P:c=w.call(this,d.D.createElementNS(P,t),e);break;case!c:c=w.call(this,d.D.createElement(t),e)}return it(c),s||(s=c),n.forEach(u=>u(s)),o&&v.pop(),o=2,c}function Ct(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,u)=>Reflect.set(s,u.name||r,u)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,u,l){if(!l.length)return t;let h=d.D.createDocumentFragment();for(let g of l){if(!g||!g.slot){c&&h.appendChild(g);continue}let i=g.slot,f=o[i];at(g,"remove","slot"),f&&(ft(f,g,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(h),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(u=>u.remove()),t.append(...s)}return e}function ft(t,e,n){n&&n(t,e);try{t.replaceWith(w(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}R.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);return e&&(r.end=d.D.createComment("</dde:mark>")),r};function St(t){let e=this;return function(...r){P=t;let o=R.call(e,...r);return P=void 0,o}}var j=new WeakMap,{setDeleteAttr:J}=d;function w(t,...e){if(!e.length)return t;j.set(t,V(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))G.call(this,t,n,r);return j.delete(t),t}function G(t,e,n){let{setRemoveAttr:r,s:o}=V(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(u,l)=>G.call(c,t,u,l));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return Z(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return J(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return $(o,n,Z.bind(null,t[e]));case"ariaset":return $(o,n,(u,l)=>r("aria-"+u,l));case"classList":return ut.call(c,t,n)}return dt(t,e)?J(t,e,n):r(e,n)}function V(t,e){if(j.has(t))return j.get(t);let r=(t instanceof d.S?pt:lt).bind(null,t,"Attribute"),o=S(e);return{setRemoveAttr:r,s:o}}function ut(t,e){let n=S(this);return $(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Dt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function at(t,e,n,r){return t instanceof d.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function dt(t,e){if(!Reflect.has(t,e))return!1;let n=K(t,e);return!_(n.set)}function K(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||K(t,e)}function $(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function Q(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function lt(t,e,n,r){return t[(_(r)?"rLine truncated
-	* Investigate `__dde_attributes` key of the element.*/let[c,s]=o,u=this[U][c];if(u)return E.action(u,"_set",s)})(t),x.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`).
-	* Investigate `__dde_attributes` key of the element.*/E.clear(...Object.values(this[U]))})(t),n};var et={isObservable:T,processReactiveAttribute(t,e,n,r){if(!T(n))return n;let o=c=>r(e,c);return H(n,o),nt(n,o,t,e),n()}};function nt(t,e,...n){let{current:r}=v;r.prevent||r.host(function(o){o[L]||(o[L]=[],x.disconnected(()=>o[L].forEach(([[c,s]])=>C(c,s,c[b]?.host()===o)))(o)),o[L].push([[t,e],...n])})}function Y(t,e,n){let r=t?()=>tt(r):(...o)=>o.length?ot(r,...o):tt(r);return rt(r,e,n)}var Et=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
-`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function rt(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=E.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=v;return Reflect.defineProperty(t,b,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[b],Et),t}function xt(){return W[W.length-1]}function tt(t){if(!t[b])return;let{value:e,listeners:n}=t[b],r=xt();return r&&n.add(r),m.has(r)&&m.get(r).add(t),e}function ot(t,e,n){if(!t[b])return;let r=t[b];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function H(t,e){if(t[b])return t[b].listeners.add(e)}function C(t,e,n){let r=t[b];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(E.clear(t),!m.has(r))return o;let c=m.get(r);if(!m.has(c))return o;m.get(c).forEach(s=>C(s,c,!0))}return o}F(et);
-globalThis.dde= {O: E,
-assign: w,
-assignAttribute: G,
-chainableAppend: it,
-classListDeclarative: ut,
-createElement: R,
-createElementNS: St,
-customElementRender: kt,
-customElementWithDDE: Lt,
-dispatchEvent: Ft,
-el: R,
-elNS: St,
-elementAttribute: at,
-empty: Dt,
-isObservable: T,
-lifecycleToEvents: Lt,
-observable: E,
-observedAttributes: ht,
-on: x,
-registerReactivity: F,
-scope: v,
-simulateSlots: Ct
+var L={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function H(t,e=!0){return e?Object.assign(L,t):(Object.setPrototypeOf(t,L),t)}function M(t){return L.isPrototypeOf(t)&&t!==L?t:L}function w(t){return typeof t>"u"}function K(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function W(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function q(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,dt(o),e(t,o)),r},{})}function dt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:pt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function pt(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),t instanceof d.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecycleToEvents",y="dde:connected",_="dde:disconnected",N="dde:attributeChanged";var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],E={get current(){return O[O.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};function Q(...t){return this.appendOriginal(...t),this}function lt(t){return t.append===Q||(t.appendOriginal=t.append,t.append=Q),t}var F;function T(t,e,...n){let r=M(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,E.push({scope:t,host:(...b)=>b.length?(o===1?n.unshift(...b):b.forEach(g=>g(s)),void 0):s}),c=t(e||void 0);let f=c instanceof d.F;if(c.nodeName==="#comment")break;let p=T.mark({type:"component",name:t.name,host:f?"this":"parentElement"});c.prepend(p),f&&(s=p);break}case t==="#text":c=P.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=P.call(this,d.D.createDocumentFragment(),e);break;case!!F:c=P.call(this,d.D.createElementNS(F,t),e);break;case!c:c=P.call(this,d.D.createElement(t),e)}return lt(c),s||(s=c),n.forEach(f=>f(s)),o&&E.pop(),o=2,c}function jt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,f)=>Reflect.set(s,f.name||r,f)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,f,p){if(!p.length)return t;let b=d.D.createDocumentFragment();for(let g of p){if(!g||!g.slot){c&&b.appendChild(g);continue}let D=g.slot,j=o[D];vt(g,"remove","slot"),j&&(ht(j,g,n),Reflect.deleteProperty(o,D))}return c&&(o[r].replaceWith(b),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(f=>f.remove()),t.append(...s)}return e}function ht(t,e,n){n&&n(t,e);try{t.replaceWith(P(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}T.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);return e&&(r.end=d.D.createComment("</dde:mark>")),r};function Mt(t){let e=this;return function(...r){F=t;let o=T.call(e,...r);return F=void 0,o}}var $=new WeakMap,{setDeleteAttr:X}=d;function P(t,...e){if(!e.length)return t;$.set(t,et(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))tt.call(this,t,n,r);return $.delete(t),t}function tt(t,e,n){let{setRemoveAttr:r,s:o}=et(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>tt.call(c,t,f,p));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return Y(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return X(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return B(o,n,Y.bind(null,t[e]));case"ariaset":return B(o,n,(f,p)=>r("aria-"+f,p));case"classList":return bt.call(c,t,n)}return gt(t,e)?X(t,e,n):r(e,n)}function et(t,e){if($.has(t))return $.get(t);let r=(t instanceof d.S?xt:Et).bind(null,t,"Attribute"),o=M(e);return{setRemoveAttr:r,s:o}}function bt(t,e){let n=M(this);return B(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Wt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function vt(t,e,n,r){return t instanceof d.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function gt(t,e){if(!Reflect.has(t,e))return!1;let n=nt(t,e);return!w(n.set)}function nt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||nt(t,e)}function B(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function rt(t){retuLine truncated
+	* Investigate `__dde_attributes` key of the element.*/let[c,s]=o,f=this[Z][c];if(f)return v.action(f,"_set",s)})(t),m.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`).
+	* Investigate `__dde_attributes` key of the element.*/v.clear(...Object.values(this[Z]))})(t),n};var it={isObservable:U,processReactiveAttribute(t,e,n,r){if(!U(n))return n;let o=c=>{if(!t.isConnected)return S(n,o);r(e,c)};return V(n,o),ut(n,o,t,e),n()}};function ut(t,e,...n){let{current:r}=E;r.prevent||r.host(function(o){o[R]||(o[R]=[],m.disconnected(()=>o[R].forEach(([[c,s]])=>S(c,s,c[l]?.host()===o)))(o)),o[R].push([[t,e],...n])})}function ct(t,e,n){let r=t?()=>st(r):(...o)=>o.length?at(r,...o):st(r);return ft(r,e,n)}var Rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),G=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ft(t,e,n){let r=[];K(n)!=="[object Object]"&&(n={});let{onclear:o}=v.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=E;return Reflect.defineProperty(t,l,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new G},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[l],Rt),t}function St(){return z[z.length-1]}function st(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=St();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function at(t,e,n){if(!t[l])return;let r=t[l];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function V(t,e){if(t[l])return t[l].listeners.add(e)}function S(t,e,n){let r=t[l];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(v.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>S(s,c,!0))}return o}H(it);
+globalThis.dde= {O: v,
+assign: P,
+assignAttribute: tt,
+chainableAppend: lt,
+classListDeclarative: bt,
+createElement: T,
+createElementNS: Mt,
+customElementRender: It,
+customElementWithDDE: yt,
+dispatchEvent: Vt,
+el: T,
+elNS: Mt,
+elementAttribute: vt,
+empty: Wt,
+isObservable: U,
+lifecycleToEvents: yt,
+observable: v,
+observedAttributes: Ot,
+on: m,
+registerReactivity: H,
+scope: E,
+simulateSlots: jt
 };
 
 })();

dist/dde.js

@@ -1,25 +1,25 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
-var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function _(t){return m.isPrototypeOf(t)&&t!==m?t:m}function E(t){return typeof t>"u"}function w(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function T(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(c,r){return Reflect.set(c,H(r),e(t,r)),c},{})}function H(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var a={setDeleteAttr:z,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function z(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof a.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var g=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,custom_element:!1,prevent:!0}],v={get current(){return g[g.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...g]},push(t={}){return g.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return g.push(g[0])},pop(){if(g.length!==1)return g.pop()}};function L(...t){return this.appendOriginal(...t),this}function B(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var C;function N(t,e,...n){let c=_(this),r=0,o,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{r=1,v.push({scope:t,host:(...b)=>b.length?(r===1?n.unshift(...b):b.forEach(h=>h(s)),void 0):s}),o=t(e||void 0);let d=o instanceof a.F;if(o.nodeName==="#comment")break;let l=N.mark({type:"component",name:t.name,host:d?"this":"parentElement"});o.prepend(l),d&&(s=l);break}case t==="#text":o=A.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):o=A.call(this,a.D.createDocumentFragment(),e);break;case!!C:o=A.call(this,a.D.createElementNS(C,t),e);break;case!o:o=A.call(this,a.D.createElement(t),e)}return B(o),s||(s=o),n.forEach(d=>d(s)),r&&v.pop(),r=2,o}function st(t,e=t,n=void 0){let c=Symbol.for("default"),r=Array.from(e.querySelectorAll("slot")).reduce((s,d)=>Reflect.set(s,d.name||c,d)&&s,{}),o=Reflect.has(r,c);if(t.append=new Proxy(t.append,{apply(s,d,l){if(!l.length)return t;let b=a.D.createDocumentFragment();for(let h of l){if(!h||!h.slot){o&&b.appendChild(h);continue}let i=h.slot,f=r[i];G(h,"remove","slot"),f&&(I(f,h,n),Reflect.deleteProperty(r,i))}return o&&(r[c].replaceWith(b),Reflect.deleteProperty(r,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(d=>d.remove()),t.append(...s)}return e}function I(t,e,n){n&&n(t,e);try{t.replaceWith(A(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([r,o])=>r+`="${o}"`).join(" ");let n=e?"":"/",c=a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);return e&&(c.end=a.D.createComment("</dde:mark>")),c};function it(t){let e=this;return function(...c){C=t;let r=N.call(e,...c);return C=void 0,r}}var D=new WeakMap,{setDeleteAttr:M}=a;function A(t,...e){if(!e.length)return t;D.set(t,F(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))j.call(this,t,n,c);return D.delete(t),t}function j(t,e,n){let{setRemoveAttr:c,s:r}=F(t,this),o=this;n=r.processReactiveAttribute(t,e,n,(d,l)=>j.call(o,t,d,l));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return W(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return M(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(r,n,W.bind(null,t[e]));case"ariaset":return S(r,n,(d,l)=>c("aria-"+d,l));case"classList":return Z.call(o,t,n)}return V(t,e)?M(t,e,n):c(e,n)}function F(t,e){if(D.has(t))return D.get(t);let c=(t instanceof a.S?K:J).bind(null,t,"Attribute"),r=_(e);return{setRemoveAttr:c,s:r}}function Z(t,e){let n=_(this);return S(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function ft(t){return Array.from(t.children).forEach(e=>e.remove()),t}function G(t,e,n,c){return t instanceof a.H?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function V(t,e){if(!Reflect.has(t,e))return!1;let n=$(t,e);return!E(n.set)}function $(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||$(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,o]){r&&(o=t.processReactiveAttribute(e,r,o,n),n(r,o))})}function k(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function J(t,e,n,c){return t[(E(c)?"remove":"set")+e](n,k(c))}function K(t,e,n,c,r=null){return t[(E(c)?"remove":"set")+e+"NS"](r,n,k(c))}function W(t,e,n)Line truncated
-globalThis.dde= {assign: A,
-assignAttribute: j,
-chainableAppend: B,
-classListDeclarative: Z,
-createElement: N,
-createElementNS: it,
-customElementRender: pt,
-customElementWithDDE: lt,
-dispatchEvent: vt,
-el: N,
-elNS: it,
-elementAttribute: G,
-empty: ft,
-lifecycleToEvents: lt,
-observedAttributes: Q,
-on: y,
-registerReactivity: q,
-scope: v,
-simulateSlots: st
+var C={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function G(t,e=!0){return e?Object.assign(C,t):(Object.setPrototypeOf(t,C),t)}function L(t){return C.isPrototypeOf(t)&&t!==C?t:C}function E(t){return typeof t>"u"}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function q(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,V(o),e(t,o)),r},{})}function V(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var a={setDeleteAttr:J,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function J(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof a.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var x="__dde_lifecycleToEvents",v="dde:connected",y="dde:disconnected",D="dde:attributeChanged";var g=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],R={get current(){return g[g.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...g]},push(t={}){return g.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return g.push(g[0])},pop(){if(g.length!==1)return g.pop()}};function F(...t){return this.appendOriginal(...t),this}function K(t){return t.append===F||(t.appendOriginal=t.append,t.append=F),t}var T;function k(t,e,...n){let r=L(this),o=0,c,f;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,R.push({scope:t,host:(...b)=>b.length?(o===1?n.unshift(...b):b.forEach(l=>l(f)),void 0):f}),c=t(e||void 0);let d=c instanceof a.F;if(c.nodeName==="#comment")break;let p=k.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(p),d&&(f=p);break}case t==="#text":c=O.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=O.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=O.call(this,a.D.createElementNS(T,t),e);break;case!c:c=O.call(this,a.D.createElement(t),e)}return K(c),f||(f=c),n.forEach(d=>d(f)),o&&R.pop(),o=2,c}function lt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((f,d)=>Reflect.set(f,d.name||r,d)&&f,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(f,d,p){if(!p.length)return t;let b=a.D.createDocumentFragment();for(let l of p){if(!l||!l.slot){c&&b.appendChild(l);continue}let A=l.slot,_=o[A];Y(l,"remove","slot"),_&&(Q(_,l,n),Reflect.deleteProperty(o,A))}return c&&(o[r].replaceWith(b),Reflect.deleteProperty(o,r)),t.append=f,t}}),t!==e){let f=Array.from(t.childNodes);f.forEach(d=>d.remove()),t.append(...f)}return e}function Q(t,e,n){n&&n(t,e);try{t.replaceWith(O(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);return e&&(r.end=a.D.createComment("</dde:mark>")),r};function ht(t){let e=this;return function(...r){T=t;let o=k.call(e,...r);return T=void 0,o}}var M=new WeakMap,{setDeleteAttr:$}=a;function O(t,...e){if(!e.length)return t;M.set(t,z(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))H.call(this,t,n,r);return M.delete(t),t}function H(t,e,n){let{setRemoveAttr:r,s:o}=z(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,p)=>H.call(c,t,d,p));let[f]=e;if(f==="=")return r(e.slice(1),n);if(f===".")return U(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return $(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return P(o,n,U.bind(null,t[e]));case"ariaset":return P(o,n,(d,p)=>r("aria-"+d,p));case"classList":return X.call(c,t,n)}return tt(t,e)?$(t,e,n):r(e,n)}function z(t,e){if(M.has(t))return M.get(t);let r=(t instanceof a.S?nt:et).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function X(t,e){let n=L(this);return P(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function bt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function Y(t,e,n,r){return t instanceof a.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function tt(t,e){if(!Reflect.has(t,e))return!1;let n=B(t,e);return!E(n.set)}function B(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||B(t,e)}function P(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function et(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function nLine truncated
+globalThis.dde= {assign: O,
+assignAttribute: H,
+chainableAppend: K,
+classListDeclarative: X,
+createElement: k,
+createElementNS: ht,
+customElementRender: mt,
+customElementWithDDE: ot,
+dispatchEvent: Rt,
+el: k,
+elNS: ht,
+elementAttribute: Y,
+empty: bt,
+lifecycleToEvents: ot,
+observedAttributes: ct,
+on: S,
+registerReactivity: G,
+scope: R,
+simulateSlots: lt
 };
 
 })();

dist/esm-with-observables.d.ts

@@ -3,6 +3,7 @@ type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typ
 //type SymbolObservable= Symbol;
 type SymbolOnclear= symbol;
 type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
+type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
 interface observable{
 	_: Symbol
 	/**
@@ -40,7 +41,7 @@ interface observable{
 		...params: A[N] extends (...args: infer P)=> any ? P : never
 	): void;
 	clear(...observables: Observable<any, any>[]): void;
-	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
+	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
 	symbols: {
 		//observable: SymbolObservable;
 		onclear: SymbolOnclear;
@@ -54,7 +55,7 @@ interface observable{
 	 * */
 	el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
 
-    attribute(name: string, initial?: string): Observable<string, {}>;
+    observedAttributes(custom_element: HTMLElement): Record<string, Observable<any, any>>;
 }
 export const observable: observable;
 export const O: observable;
@@ -64,16 +65,11 @@ declare global {
 	type ddeActions<V>= Actions<V>
 }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-declare global {
-	interface ddePublicElementTagNameMap{
-	}
-}
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
 	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
 	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
 	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
-	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
 	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
@@ -112,7 +108,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
@@ -239,9 +235,23 @@ export const scope: {
 	pop(): ReturnType<Array<Scope>["pop"]>,
 };
 
-/* TypeScript MEH // TODO for SVG */
-type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+export function customElementRender<
+	EL extends HTMLElement,
+	P extends any = Record<string, any>
+>(
+	custom_element: EL,
+	target: ShadowRoot | EL,
+	render: (props: P)=> SupportedElement,
+	props?: P | ((...args: any[])=> P)
+): EL
+export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
+export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>
+
+/* TypeScript MEH */
 declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+	
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }

dist/esm-with-observables.js

@@ -1,4 +1,4 @@
-var O={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function F(t,e=!0){return e?Object.assign(O,t):(Object.setPrototypeOf(t,O),t)}function S(t){return O.isPrototypeOf(t)&&t!==O?t:O}function _(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function D(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function N(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,ct(o),e(t,o)),r},{})}function ct(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:st,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function st(t,e,n){if(Reflect.set(t,e,n),!!_(n)){if(Reflect.deleteProperty(t,e),t instanceof d.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var y=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,custom_element:!1,prevent:!0}],v={get current(){return y[y.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...y]},push(t={}){return y.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return y.push(y[0])},pop(){if(y.length!==1)return y.pop()}};function I(...t){return this.appendOriginal(...t),this}function it(t){return t.append===I||(t.appendOriginal=t.append,t.append=I),t}var P;function R(t,e,...n){let r=S(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,v.push({scope:t,host:(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(g=>g(s)),void 0):s}),c=t(e||void 0);let u=c instanceof d.F;if(c.nodeName==="#comment")break;let l=R.mark({type:"component",name:t.name,host:u?"this":"parentElement"});c.prepend(l),u&&(s=l);break}case t==="#text":c=w.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=w.call(this,d.D.createDocumentFragment(),e);break;case!!P:c=w.call(this,d.D.createElementNS(P,t),e);break;case!c:c=w.call(this,d.D.createElement(t),e)}return it(c),s||(s=c),n.forEach(u=>u(s)),o&&v.pop(),o=2,c}function Ct(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,u)=>Reflect.set(s,u.name||r,u)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,u,l){if(!l.length)return t;let h=d.D.createDocumentFragment();for(let g of l){if(!g||!g.slot){c&&h.appendChild(g);continue}let i=g.slot,f=o[i];at(g,"remove","slot"),f&&(ft(f,g,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(h),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(u=>u.remove()),t.append(...s)}return e}function ft(t,e,n){n&&n(t,e);try{t.replaceWith(w(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}R.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);return e&&(r.end=d.D.createComment("</dde:mark>")),r};function St(t){let e=this;return function(...r){P=t;let o=R.call(e,...r);return P=void 0,o}}var j=new WeakMap,{setDeleteAttr:J}=d;function w(t,...e){if(!e.length)return t;j.set(t,V(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))G.call(this,t,n,r);return j.delete(t),t}function G(t,e,n){let{setRemoveAttr:r,s:o}=V(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(u,l)=>G.call(c,t,u,l));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return Z(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return J(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return $(o,n,Z.bind(null,t[e]));case"ariaset":return $(o,n,(u,l)=>r("aria-"+u,l));case"classList":return ut.call(c,t,n)}return dt(t,e)?J(t,e,n):r(e,n)}function V(t,e){if(j.has(t))return j.get(t);let r=(t instanceof d.S?pt:lt).bind(null,t,"Attribute"),o=S(e);return{setRemoveAttr:r,s:o}}function ut(t,e){let n=S(this);return $(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Dt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function at(t,e,n,r){return t instanceof d.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function dt(t,e){if(!Reflect.has(t,e))return!1;let n=K(t,e);return!_(n.set)}function K(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||K(t,e)}function $(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function Q(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function lt(t,e,n,r){return t[(_(r)?"rLine truncated
-	* Investigate `__dde_attributes` key of the element.*/let[c,s]=o,u=this[U][c];if(u)return E.action(u,"_set",s)})(t),x.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`).
-	* Investigate `__dde_attributes` key of the element.*/E.clear(...Object.values(this[U]))})(t),n};var et={isObservable:T,processReactiveAttribute(t,e,n,r){if(!T(n))return n;let o=c=>r(e,c);return H(n,o),nt(n,o,t,e),n()}};function nt(t,e,...n){let{current:r}=v;r.prevent||r.host(function(o){o[L]||(o[L]=[],x.disconnected(()=>o[L].forEach(([[c,s]])=>C(c,s,c[b]?.host()===o)))(o)),o[L].push([[t,e],...n])})}function Y(t,e,n){let r=t?()=>tt(r):(...o)=>o.length?ot(r,...o):tt(r);return rt(r,e,n)}var Et=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
-`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function rt(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=E.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=v;return Reflect.defineProperty(t,b,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[b],Et),t}function xt(){return W[W.length-1]}function tt(t){if(!t[b])return;let{value:e,listeners:n}=t[b],r=xt();return r&&n.add(r),m.has(r)&&m.get(r).add(t),e}function ot(t,e,n){if(!t[b])return;let r=t[b];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function H(t,e){if(t[b])return t[b].listeners.add(e)}function C(t,e,n){let r=t[b];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(E.clear(t),!m.has(r))return o;let c=m.get(r);if(!m.has(c))return o;m.get(c).forEach(s=>C(s,c,!0))}return o}F(et);export{E as O,w as assign,G as assignAttribute,it as chainableAppend,ut as classListDeclarative,R as createElement,St as createElementNS,kt as customElementRender,Lt as customElementWithDDE,Ft as dispatchEvent,R as el,St as elNS,at as elementAttribute,Dt as empty,T as isObservable,Lt as lifecycleToEvents,E as observable,ht as observedAttributes,x as on,F as registerReactivity,v as scope,Ct as simulateSlots};
+var L={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function H(t,e=!0){return e?Object.assign(L,t):(Object.setPrototypeOf(t,L),t)}function M(t){return L.isPrototypeOf(t)&&t!==L?t:L}function w(t){return typeof t>"u"}function K(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function W(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function q(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,dt(o),e(t,o)),r},{})}function dt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:pt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function pt(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),t instanceof d.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecycleToEvents",y="dde:connected",_="dde:disconnected",N="dde:attributeChanged";var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],E={get current(){return O[O.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};function Q(...t){return this.appendOriginal(...t),this}function lt(t){return t.append===Q||(t.appendOriginal=t.append,t.append=Q),t}var F;function T(t,e,...n){let r=M(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,E.push({scope:t,host:(...b)=>b.length?(o===1?n.unshift(...b):b.forEach(g=>g(s)),void 0):s}),c=t(e||void 0);let f=c instanceof d.F;if(c.nodeName==="#comment")break;let p=T.mark({type:"component",name:t.name,host:f?"this":"parentElement"});c.prepend(p),f&&(s=p);break}case t==="#text":c=P.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=P.call(this,d.D.createDocumentFragment(),e);break;case!!F:c=P.call(this,d.D.createElementNS(F,t),e);break;case!c:c=P.call(this,d.D.createElement(t),e)}return lt(c),s||(s=c),n.forEach(f=>f(s)),o&&E.pop(),o=2,c}function jt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,f)=>Reflect.set(s,f.name||r,f)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,f,p){if(!p.length)return t;let b=d.D.createDocumentFragment();for(let g of p){if(!g||!g.slot){c&&b.appendChild(g);continue}let D=g.slot,j=o[D];vt(g,"remove","slot"),j&&(ht(j,g,n),Reflect.deleteProperty(o,D))}return c&&(o[r].replaceWith(b),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(f=>f.remove()),t.append(...s)}return e}function ht(t,e,n){n&&n(t,e);try{t.replaceWith(P(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}T.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);return e&&(r.end=d.D.createComment("</dde:mark>")),r};function Mt(t){let e=this;return function(...r){F=t;let o=T.call(e,...r);return F=void 0,o}}var $=new WeakMap,{setDeleteAttr:X}=d;function P(t,...e){if(!e.length)return t;$.set(t,et(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))tt.call(this,t,n,r);return $.delete(t),t}function tt(t,e,n){let{setRemoveAttr:r,s:o}=et(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>tt.call(c,t,f,p));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return Y(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return X(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return B(o,n,Y.bind(null,t[e]));case"ariaset":return B(o,n,(f,p)=>r("aria-"+f,p));case"classList":return bt.call(c,t,n)}return gt(t,e)?X(t,e,n):r(e,n)}function et(t,e){if($.has(t))return $.get(t);let r=(t instanceof d.S?xt:Et).bind(null,t,"Attribute"),o=M(e);return{setRemoveAttr:r,s:o}}function bt(t,e){let n=M(this);return B(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Wt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function vt(t,e,n,r){return t instanceof d.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function gt(t,e){if(!Reflect.has(t,e))return!1;let n=nt(t,e);return!w(n.set)}function nt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||nt(t,e)}function B(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function rt(t){retuLine truncated
+	* Investigate `__dde_attributes` key of the element.*/let[c,s]=o,f=this[Z][c];if(f)return v.action(f,"_set",s)})(t),m.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`).
+	* Investigate `__dde_attributes` key of the element.*/v.clear(...Object.values(this[Z]))})(t),n};var it={isObservable:U,processReactiveAttribute(t,e,n,r){if(!U(n))return n;let o=c=>{if(!t.isConnected)return S(n,o);r(e,c)};return V(n,o),ut(n,o,t,e),n()}};function ut(t,e,...n){let{current:r}=E;r.prevent||r.host(function(o){o[R]||(o[R]=[],m.disconnected(()=>o[R].forEach(([[c,s]])=>S(c,s,c[l]?.host()===o)))(o)),o[R].push([[t,e],...n])})}function ct(t,e,n){let r=t?()=>st(r):(...o)=>o.length?at(r,...o):st(r);return ft(r,e,n)}var Rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),G=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ft(t,e,n){let r=[];K(n)!=="[object Object]"&&(n={});let{onclear:o}=v.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=E;return Reflect.defineProperty(t,l,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new G},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[l],Rt),t}function St(){return z[z.length-1]}function st(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=St();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function at(t,e,n){if(!t[l])return;let r=t[l];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function V(t,e){if(t[l])return t[l].listeners.add(e)}function S(t,e,n){let r=t[l];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(v.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>S(s,c,!0))}return o}H(it);export{v as O,P as assign,tt as assignAttribute,lt as chainableAppend,bt as classListDeclarative,T as createElement,Mt as createElementNS,It as customElementRender,yt as customElementWithDDE,Vt as dispatchEvent,T as el,Mt as elNS,vt as elementAttribute,Wt as empty,U as isObservable,yt as lifecycleToEvents,v as observable,Ot as observedAttributes,m as on,H as registerReactivity,E as scope,jt as simulateSlots};

dist/esm.d.ts

@@ -3,6 +3,7 @@ type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typ
 //type SymbolObservable= Symbol;
 type SymbolOnclear= symbol;
 type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
+type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
 interface observable{
 	_: Symbol
 	/**
@@ -40,7 +41,7 @@ interface observable{
 		...params: A[N] extends (...args: infer P)=> any ? P : never
 	): void;
 	clear(...observables: Observable<any, any>[]): void;
-	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
+	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
 	symbols: {
 		//observable: SymbolObservable;
 		onclear: SymbolOnclear;
@@ -54,7 +55,7 @@ interface observable{
 	 * */
 	el<S extends any>(observable: Observable<S, any>, el: (v: S)=> Element | Element[] | DocumentFragment): DocumentFragment;
 
-    attribute(name: string, initial?: string): Observable<string, {}>;
+    observedAttributes(custom_element: HTMLElement): Record<string, Observable<any, any>>;
 }
 export const observable: observable;
 export const O: observable;
@@ -64,16 +65,11 @@ declare global {
 	type ddeActions<V>= Actions<V>
 }
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-declare global {
-	interface ddePublicElementTagNameMap{
-	}
-}
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
 	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
 	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
 	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
-	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
 	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
@@ -112,7 +108,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
@@ -239,9 +235,23 @@ export const scope: {
 	pop(): ReturnType<Array<Scope>["pop"]>,
 };
 
-/* TypeScript MEH // TODO for SVG */
-type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+export function customElementRender<
+	EL extends HTMLElement,
+	P extends any = Record<string, any>
+>(
+	custom_element: EL,
+	target: ShadowRoot | EL,
+	render: (props: P)=> SupportedElement,
+	props?: P | ((...args: any[])=> P)
+): EL
+export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL): EL
+export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL
+export function observedAttributes(custom_element: HTMLElement): Record<string, string>
+
+/* TypeScript MEH */
 declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+	
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }

dist/esm.js

@@ -1 +1 @@
-var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function _(t){return m.isPrototypeOf(t)&&t!==m?t:m}function E(t){return typeof t>"u"}function w(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function T(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(c,r){return Reflect.set(c,H(r),e(t,r)),c},{})}function H(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var a={setDeleteAttr:z,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function z(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof a.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var g=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,custom_element:!1,prevent:!0}],v={get current(){return g[g.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...g]},push(t={}){return g.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return g.push(g[0])},pop(){if(g.length!==1)return g.pop()}};function L(...t){return this.appendOriginal(...t),this}function B(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var C;function N(t,e,...n){let c=_(this),r=0,o,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{r=1,v.push({scope:t,host:(...b)=>b.length?(r===1?n.unshift(...b):b.forEach(h=>h(s)),void 0):s}),o=t(e||void 0);let d=o instanceof a.F;if(o.nodeName==="#comment")break;let l=N.mark({type:"component",name:t.name,host:d?"this":"parentElement"});o.prepend(l),d&&(s=l);break}case t==="#text":o=A.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):o=A.call(this,a.D.createDocumentFragment(),e);break;case!!C:o=A.call(this,a.D.createElementNS(C,t),e);break;case!o:o=A.call(this,a.D.createElement(t),e)}return B(o),s||(s=o),n.forEach(d=>d(s)),r&&v.pop(),r=2,o}function st(t,e=t,n=void 0){let c=Symbol.for("default"),r=Array.from(e.querySelectorAll("slot")).reduce((s,d)=>Reflect.set(s,d.name||c,d)&&s,{}),o=Reflect.has(r,c);if(t.append=new Proxy(t.append,{apply(s,d,l){if(!l.length)return t;let b=a.D.createDocumentFragment();for(let h of l){if(!h||!h.slot){o&&b.appendChild(h);continue}let i=h.slot,f=r[i];G(h,"remove","slot"),f&&(I(f,h,n),Reflect.deleteProperty(r,i))}return o&&(r[c].replaceWith(b),Reflect.deleteProperty(r,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(d=>d.remove()),t.append(...s)}return e}function I(t,e,n){n&&n(t,e);try{t.replaceWith(A(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([r,o])=>r+`="${o}"`).join(" ");let n=e?"":"/",c=a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);return e&&(c.end=a.D.createComment("</dde:mark>")),c};function it(t){let e=this;return function(...c){C=t;let r=N.call(e,...c);return C=void 0,r}}var D=new WeakMap,{setDeleteAttr:M}=a;function A(t,...e){if(!e.length)return t;D.set(t,F(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))j.call(this,t,n,c);return D.delete(t),t}function j(t,e,n){let{setRemoveAttr:c,s:r}=F(t,this),o=this;n=r.processReactiveAttribute(t,e,n,(d,l)=>j.call(o,t,d,l));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return W(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return M(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(r,n,W.bind(null,t[e]));case"ariaset":return S(r,n,(d,l)=>c("aria-"+d,l));case"classList":return Z.call(o,t,n)}return V(t,e)?M(t,e,n):c(e,n)}function F(t,e){if(D.has(t))return D.get(t);let c=(t instanceof a.S?K:J).bind(null,t,"Attribute"),r=_(e);return{setRemoveAttr:c,s:r}}function Z(t,e){let n=_(this);return S(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function ft(t){return Array.from(t.children).forEach(e=>e.remove()),t}function G(t,e,n,c){return t instanceof a.H?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function V(t,e){if(!Reflect.has(t,e))return!1;let n=$(t,e);return!E(n.set)}function $(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||$(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,o]){r&&(o=t.processReactiveAttribute(e,r,o,n),n(r,o))})}function k(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function J(t,e,n,c){return t[(E(c)?"remove":"set")+e](n,k(c))}function K(t,e,n,c,r=null){return t[(E(c)?"remove":"set")+e+"NS"](r,n,k(c))}function W(t,e,n)Line truncated
+var C={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function G(t,e=!0){return e?Object.assign(C,t):(Object.setPrototypeOf(t,C),t)}function L(t){return C.isPrototypeOf(t)&&t!==C?t:C}function E(t){return typeof t>"u"}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function q(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,V(o),e(t,o)),r},{})}function V(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var a={setDeleteAttr:J,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function J(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof a.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var x="__dde_lifecycleToEvents",v="dde:connected",y="dde:disconnected",D="dde:attributeChanged";var g=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],R={get current(){return g[g.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...g]},push(t={}){return g.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return g.push(g[0])},pop(){if(g.length!==1)return g.pop()}};function F(...t){return this.appendOriginal(...t),this}function K(t){return t.append===F||(t.appendOriginal=t.append,t.append=F),t}var T;function k(t,e,...n){let r=L(this),o=0,c,f;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,R.push({scope:t,host:(...b)=>b.length?(o===1?n.unshift(...b):b.forEach(l=>l(f)),void 0):f}),c=t(e||void 0);let d=c instanceof a.F;if(c.nodeName==="#comment")break;let p=k.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(p),d&&(f=p);break}case t==="#text":c=O.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=O.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=O.call(this,a.D.createElementNS(T,t),e);break;case!c:c=O.call(this,a.D.createElement(t),e)}return K(c),f||(f=c),n.forEach(d=>d(f)),o&&R.pop(),o=2,c}function lt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((f,d)=>Reflect.set(f,d.name||r,d)&&f,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(f,d,p){if(!p.length)return t;let b=a.D.createDocumentFragment();for(let l of p){if(!l||!l.slot){c&&b.appendChild(l);continue}let A=l.slot,_=o[A];Y(l,"remove","slot"),_&&(Q(_,l,n),Reflect.deleteProperty(o,A))}return c&&(o[r].replaceWith(b),Reflect.deleteProperty(o,r)),t.append=f,t}}),t!==e){let f=Array.from(t.childNodes);f.forEach(d=>d.remove()),t.append(...f)}return e}function Q(t,e,n){n&&n(t,e);try{t.replaceWith(O(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(`<dde:mark ${t}${a.ssr}${n}>`);return e&&(r.end=a.D.createComment("</dde:mark>")),r};function ht(t){let e=this;return function(...r){T=t;let o=k.call(e,...r);return T=void 0,o}}var M=new WeakMap,{setDeleteAttr:$}=a;function O(t,...e){if(!e.length)return t;M.set(t,z(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))H.call(this,t,n,r);return M.delete(t),t}function H(t,e,n){let{setRemoveAttr:r,s:o}=z(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,p)=>H.call(c,t,d,p));let[f]=e;if(f==="=")return r(e.slice(1),n);if(f===".")return U(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return $(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return P(o,n,U.bind(null,t[e]));case"ariaset":return P(o,n,(d,p)=>r("aria-"+d,p));case"classList":return X.call(c,t,n)}return tt(t,e)?$(t,e,n):r(e,n)}function z(t,e){if(M.has(t))return M.get(t);let r=(t instanceof a.S?nt:et).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function X(t,e){let n=L(this);return P(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function bt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function Y(t,e,n,r){return t instanceof a.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function tt(t,e){if(!Reflect.has(t,e))return!1;let n=B(t,e);return!E(n.set)}function B(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||B(t,e)}function P(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function et(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function nLine truncated

docs/p02-elements.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Basic concepts of elements modifications and creations."><title>`deka-dom-el` — Elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Basic concepts of elements modifications and creations."><title>`deka-dom-el` — Elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Elements</h1><p>Basic concepts of elements modifications and creations.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations." class="current">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Native JavaScript DOM elements creations</h2><p>Let’s go through all patterns we would like to use and what needs to be improved for better experience.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
 import {
 	assign,
 	el, createElement,

docs/p03-events.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using not only events in UI declaratively."><title>`deka-dom-el` — Events and Addons</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Events and Addons</h1><p>Using not only events in UI declaratively.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively." class="current">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Listenning to the native DOM events and other Addons</h2><p>We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called <em>Addon</em> to incorporate not only this in UI templates declaratively.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using not only events in UI declaratively."><title>`deka-dom-el` — Events and Addons</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Events and Addons</h1><p>Using not only events in UI declaratively.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively." class="current">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Listenning to the native DOM events and other Addons</h2><p>We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called <em>Addon</em> to incorporate not only this in UI templates declaratively.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
 import { on, dispatchEvent } from "deka-dom-el";
 
 /** @type {ddeElementAddon} */
@@ -67,7 +67,7 @@ document.body.append(
 function log({ type, detail }){
 	console.log({ _this: this, type, detail });
 }
-</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a&nbsp;method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
+</code></div><script>Flems(document.getElementById("code-example-1-35hjjp3e4js"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst paragraph= el(\\\"p\\\", \\\"See live-cycle events in console.\\\",\\n\\tel=> log({ type: \\\"dde:created\\\", detail: el }),\\n\\ton.connected(log),\\n\\ton.disconnected(log),\\n\\ton.attributeChanged(log));\\n\\ndocument.body.append(\\n\\tparagraph,\\n\\tel(\\\"button\\\", \\\"Update attribute\\\", on(\\\"click\\\", ()=> paragraph.setAttribute(\\\"test\\\", Math.random().toString()))),\\n\\t\\\" \\\",\\n\\tel(\\\"button\\\", \\\"Remove\\\", on(\\\"click\\\", ()=> paragraph.remove()))\\n);\\n\\n/** @param {Partial<CustomEvent>} event */\\nfunction log({ type, detail }){\\n\\tconsole.log({ _this: this, type, detail });\\n}\\n\"}],\"toolbar\":false}"));</script><p>For Custom elements, we will later introduce a way to replace <code>*Callback</code> syntax with <code>dde:*</code> events. The <code>on.*</code> functions then listen to the appropriate Custom Elements events (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks">Custom element lifecycle callbacks | MDN</a>).</p><p>But, in case of regular elemnets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> | MDN</a> is internaly used to track these events. Therefore, there are some drawbacks:</p><ul><li>To proper listener registration, you need to use <code>on.*</code> not `on("dde:*", …)`!</li><li>Use sparingly! Internally, library must loop of all registered events and fires event properly. <strong>It is good practice to use the fact that if an element is removed, its children are also removed!</strong> In this spirit, we will introduce later the <strong>host</strong> syntax to register clean up procedures when the component is removed from the app.</li></ul><p>To provide intuitive behaviour, similar also to how the life-cycle events works in other frameworks/libraries, deka-dom-el library ensures that <code>on.connected</code> and <code>on.disconnected</code> are called only once and only when the element is (dis)connected to live DOM. The solution is inspired by <a href="https://vuejs.org/guide/extras/web-components.html#lifecycle" title="Vue and Web Components | Lifecycle">Vue</a>. For using native behaviour re-(dis)connecting element, use:</p><ul><li>custom <code>MutationObserver</code> or logic in (dis)<div class="code"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js"></code></div> or…</li><li>re-add <code>on.connected</code> or <code>on.disconnected</code> listeners.</li></ul><h3 id="h-final-notes"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-final-notes" tabindex="-1">#</a> Final notes</h3><p>The library also provides a&nbsp;method to dispatch the events.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, dispatchEvent } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
 document.body.append(
 	el("p", "Listenning to `test` event.", on("test", console.log)).append(
 		el("br"),

docs/p04-observables.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via observables."><title>`deka-dom-el` — Observables and reactivity</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Observables and reactivity</h1><p>Handling reactivity in UI via observables.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables." class="current">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Using observables to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, observables may be a viable approach.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via observables."><title>`deka-dom-el` — Observables and reactivity</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Observables and reactivity</h1><p>Handling reactivity in UI via observables.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables." class="current">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Using observables to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, observables may be a viable approach.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
 import { O, observable } from "deka-dom-el/observables";
 O===observable
 /** @type {ddeObservable} */

docs/p05-scopes.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Organizing UI into components"><title>`deka-dom-el` — Scopes and components</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Scopes and components</h1><p>Organizing UI into components</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components" class="current">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Using functions as UI components</h2><p>For state-less components we can use functions as UI components (see “Elements” page). But in real life, we may need to handle the component live-cycle and provide JavaScript the way to properly use the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection" title="Garbage collection | MDN">Garbage collection</a>.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Organizing UI into components"><title>`deka-dom-el` — Scopes and components</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Scopes and components</h1><p>Organizing UI into components</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components" class="current">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Using functions as UI components</h2><p>For state-less components we can use functions as UI components (see “Elements” page). But in real life, we may need to handle the component live-cycle and provide JavaScript the way to properly use the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection" title="Garbage collection | MDN">Garbage collection</a>.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
 import { scope, el } from "deka-dom-el";
 /** @type {ddeElementAddon} */
 </code></div><p>The library therefore use <em>scopes</em> to provide these functionalities.</p><h3 id="h-scopes-and-hosts"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-scopes-and-hosts" tabindex="-1">#</a> Scopes and hosts</h3><p>The <strong>host</strong> is the name for the element representing the component. This is typically element returned by function. To get reference, you can use <code>scope.host()</code> to applly addons just use <code>scope.host(...&lt;addons&gt;)</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-8meex5b3tyo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, scope } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";

docs/p06-customElement.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using custom elements in combinantion with DDE"><title>`deka-dom-el` — Custom elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki" defer=""></script><script type="module" src="code.js.js"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Custom elements</h1><p>Using custom elements in combinantion with DDE</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE" class="current">6. Custom elements</a></nav><main><h2>Using custom elements in combinantion with DDE</h2><p></p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Using custom elements in combinantion with DDE"><title>`deka-dom-el` — Custom elements</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Custom elements</h1><p>Using custom elements in combinantion with DDE</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a&nbsp;library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE" class="current">6. Custom elements</a></nav><main><h2>Using custom elements in combinantion with DDE</h2><p></p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
 import {
 	customElementRender,
 	customElementWithDDE,

docs_src/components/code.html.js

@@ -54,7 +54,7 @@ function registerClientPart(page_id){
 	if(is_registered[page_id]) return;
 	
 	document.head.append(
-		 el("script", { src: "https://cdn.jsdelivr.net/npm/shiki", defer: true }),
+		 el("script", { src: "https://cdn.jsdelivr.net/npm/shiki@0.9", defer: true }),
 	);
 	registerClientFile(
 		new URL("./code.js.js", import.meta.url),

docs_src/p03-events.html.js

@@ -108,6 +108,17 @@ export function page({ pkg, info }){
 				" clean up procedures when the component is removed from the app."
 			),
 		),
+		el("p").append(
+			"To provide intuitive behaviour, similar also to how the life-cycle events works in other",
+			" frameworks/libraries, deka-dom-el library ensures that ", el("code", "on.connected"),
+			" and ", el("code", "on.disconnected"), " are called only once and only when the element",
+			" is (dis)connected to live DOM. The solution is inspired by ", el("a", { textContent: "Vue", href: "https://vuejs.org/guide/extras/web-components.html#lifecycle", title: "Vue and Web Components | Lifecycle" }), ".",
+			" For using native behaviour re-(dis)connecting element, use:"
+		),
+		el("ul").append(
+			el("li").append("custom ", el("code", "MutationObserver"), " or logic in (dis)", el(code, "connectedCallback"), " or…"),
+			el("li").append("re-add ", el("code", "on.connected"), " or ", el("code", "on.disconnected"), " listeners.")
+		),
 
 		el(h3, "Final notes"),
 		el("p", "The library also provides a method to dispatch the events."),

examples/components/todosComponent.js

@@ -84,7 +84,7 @@ function todoComponent({ textContent, value }){
 	return el("li").append(
 		O.el(is_editable, is=> is
 			? el("input", { value: textContent(), type: "text" }, onedited)
-			: el("span", { textContent, onclick: is_editable.bind(null, true) }),
+			: el("span", { textContent, onclick: is_editable.bind(null, true) })
 		),
 		el("button", { type: "button", value, textContent: "-" }, onclick)
 	);

examples/components/webComponent.js

@@ -12,9 +12,7 @@ export class CustomHTMLTestElement extends HTMLElement{
 	}
 	connectedCallback(){
 		if(!this.hasAttribute("pre-name")) this.setAttribute("pre-name", "default");
-		this.attachShadow({ mode: "open" }).append(
-			customElementRender(this, this.render, this.attributes)
-		);
+		customElementRender(this, this.attachShadow({ mode: "open" }), this.render, this.attributes)
 	}
 
 	attributes(element){
@@ -63,7 +61,7 @@ export class CustomSlottingHTMLElement extends HTMLElement{
 		));
 	}
 	connectedCallback(){
-		this.append(customElementRender(this, this.render));
+		customElementRender(this, this, this.render);
 	}
 }
 customElementWithDDE(CustomSlottingHTMLElement);

index.d.ts

@@ -1,16 +1,11 @@
 import { Observable } from "./observables";
 
 type CustomElementTagNameMap= { '#text': Text, '#comment': Comment }
-declare global {
-	interface ddePublicElementTagNameMap{
-	}
-}
 type SupportedElement=
 	  HTMLElementTagNameMap[keyof HTMLElementTagNameMap]
 	| SVGElementTagNameMap[keyof SVGElementTagNameMap]
 	| MathMLElementTagNameMap[keyof MathMLElementTagNameMap]
 	| CustomElementTagNameMap[keyof CustomElementTagNameMap]
-	| ddePublicElementTagNameMap[keyof ddePublicElementTagNameMap];
 declare global {
 	type ddeComponentAttributes= Record<any, any> | undefined;
 	type ddeElementAddon<El extends SupportedElement | DocumentFragment>= (element: El)=> El | void;
@@ -48,7 +43,7 @@ export function classListDeclarative<El extends SupportedElement>(element: El, c
 export function assign<El extends SupportedElement>(element: El, ...attrs_array: ElementAttributes<El>[]): El
 export function assignAttribute<El extends SupportedElement, ATT extends keyof ElementAttributes<El>>(element: El, attr: ATT, value: ElementAttributes<El>[ATT]): ElementAttributes<El>[ATT]
 
-type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap
+type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
 type textContent= string | ( (set?: string)=> string ); // TODO: for some reason `Observable<string, any>` leads to `attrs?: any`
 export function el<
 	TAG extends keyof ExtendedHTMLElementTagNameMap & string,
@@ -180,6 +175,7 @@ export function customElementRender<
 	P extends any = Record<string, any>
 >(
 	custom_element: EL,
+	target: ShadowRoot | EL,
 	render: (props: P)=> SupportedElement,
 	props?: P | ((...args: any[])=> P)
 ): EL
@@ -187,9 +183,10 @@ export function customElementWithDDE<EL extends HTMLElement>(custom_element: EL)
 export function lifecycleToEvents<EL extends HTMLElement>(custom_element: EL): EL
 export function observedAttributes(custom_element: HTMLElement): Record<string, string>
 
-/* TypeScript MEH // TODO for SVG */
-type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+/* TypeScript MEH */
 declare global{
+	type ddeAppend<el>= (...nodes: (Node | string)[])=> el;
+	
 	interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend<ddeDocumentFragment>; }
 	interface ddeHTMLElement extends HTMLElement{ append: ddeAppend<ddeHTMLElement>; }
 	interface ddeSVGElement extends SVGElement{ append: ddeAppend<ddeSVGElement>; }

observables.d.ts

@@ -3,6 +3,7 @@ type Action<V>= (this: { value: V, stopPropagation(): void }, ...a: any[])=> typ
 //type SymbolObservable= Symbol;
 type SymbolOnclear= symbol;
 type Actions<V>= Record<string | SymbolOnclear, Action<V>>;
+type OnListenerOptions= Pick<AddEventListenerOptions, "signal"> & { first_time?: boolean };
 interface observable{
 	_: Symbol
 	/**
@@ -40,7 +41,7 @@ interface observable{
 		...params: A[N] extends (...args: infer P)=> any ? P : never
 	): void;
 	clear(...observables: Observable<any, any>[]): void;
-	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: AddEventListenerOptions): void;
+	on<T>(observable: Observable<T, any>, onchange: (a: T)=> void, options?: OnListenerOptions): void;
 	symbols: {
 		//observable: SymbolObservable;
 		onclear: SymbolOnclear;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.7.7",
+	"version": "0.7.8",
 	"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
 	"author": "Jan Andrle <andrle.jan@centrum.cz>",
 	"license": "MIT",
@@ -59,18 +59,24 @@
 	"size-limit": [
 		{
 			"path": "./index.js",
-			"limit": "10 kB",
+			"limit": "10.5 kB",
 			"gzip": false,
 			"brotli": false
 
 		},
 		{
 			"path": "./observables.js",
-			"limit": "11.5 kB",
+			"limit": "12 kB",
 			"gzip": false,
 			"brotli": false
 
 		},
+		{
+			"path": "./index-with-observables.js",
+			"limit": "15 kB",
+			"gzip": false,
+			"brotli": false
+		},
 		{
 			"path": "./index-with-observables.js",
 			"limit": "5 kB"

src/customElement.js

@@ -1,30 +1,40 @@
+import { keyLTE, evc, evd, eva } from "./dom-common.js";
 import { scope } from "./dom.js";
-export function customElementRender(custom_element, render, props= observedAttributes){
+import { c_ch_o } from "./events-observer.js";
+export function customElementRender(custom_element, target, render, props= observedAttributes){
 	scope.push({
 		scope: custom_element,
-		host: (...c)=> c.length ? c.forEach(c=> c(custom_element)) : custom_element,
-		custom_element
+		host: (...c)=> c.length ? c.forEach(c=> c(custom_element)) : custom_element
 	});
 	if(typeof props==="function") props= props.call(custom_element, custom_element);
+	const is_lte= custom_element[keyLTE];
+	if(!is_lte) lifecycleToEvents(custom_element);
 	const out= render.call(custom_element, props);
+	if(!is_lte) custom_element.dispatchEvent(new Event(evc));
+	if(target.nodeType===11 && typeof target.mode==="string") // is ShadowRoot
+		custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
 	scope.pop();
-	return out;
+	return target.append(out);
 }
 export function lifecycleToEvents(class_declaration){
-	for (const name of [ "connected", "disconnected" ])
-		wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
-			target.apply(thisArg, detail);
-			thisArg.dispatchEvent(new Event("dde:"+name));
-		});
-	const name= "attributeChanged";
-	wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
+	wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){
+		target.apply(thisArg, detail);
+		thisArg.dispatchEvent(new Event(evc));
+	});
+	wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail){
+		target.apply(thisArg, detail);
+		(queueMicrotask || setTimeout)(
+			()=> !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
+		);
+	});
+	wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail){
 		const [ attribute, , value ]= detail;
-		thisArg.dispatchEvent(new CustomEvent("dde:"+name, {
+		thisArg.dispatchEvent(new CustomEvent(eva, {
 			detail: [ attribute, value ]
 		}));
 		target.apply(thisArg, detail);
 	});
-	class_declaration.prototype.__dde_lifecycleToEvents= true;
+	class_declaration.prototype[keyLTE]= true;
 	return class_declaration;
 }
 export { lifecycleToEvents as customElementWithDDE };

src/dom-common.js

@@ -26,3 +26,7 @@ function setDeleteAttr(obj, prop, val){
 	if(Reflect.get(obj, prop)==="undefined")
 		return Reflect.set(obj, prop, "");
 }
+export const keyLTE= "__dde_lifecycleToEvents"; //boolean
+export const evc= "dde:connected";
+export const evd= "dde:disconnected";
+export const eva= "dde:attributeChanged";

src/dom.js

@@ -5,7 +5,6 @@ import { enviroment as env } from './dom-common.js';
 const scopes= [ {
 	get scope(){ return  env.D.body; },
 	host: c=> c ? c(env.D.body) : env.D.body,
-	custom_element: false,
 	prevent: true,
 } ];
 export const scope= {

src/events-observer.js

@@ -0,0 +1,138 @@
+import { enviroment as env, evc, evd } from './dom-common.js';
+export const c_ch_o= env.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
+	get(){ return ()=> {}; }
+});
+
+function connectionsChangesObserverConstructor(){
+	const store= new Map();
+	let is_observing= false;
+	const observerListener= stop=> function(mutations){
+		for(const mutation of mutations){
+			if(mutation.type!=="childList") continue;
+			if(observerAdded(mutation.addedNodes, true)){
+				stop();
+				continue;
+			}
+			if(observerRemoved(mutation.removedNodes, true))
+				stop();
+		}
+	};
+	const observer= new env.M(observerListener(stop));
+	return {
+		observe(element){
+			const o= new env.M(observerListener(()=> {}));
+			o.observe(element, { childList: true, subtree: true });
+			return ()=> o.disconnect();
+		},
+		onConnected(element, listener){
+			start();
+			const listeners= getElementStore(element);
+			if(listeners.connected.has(listener)) return;
+			listeners.connected.add(listener);
+			listeners.length_c+= 1;
+		},
+		offConnected(element, listener){
+			if(!store.has(element)) return;
+			const ls= store.get(element);
+			if(!ls.connected.has(listener)) return;
+			ls.connected.delete(listener);
+			ls.length_c-= 1;
+			cleanWhenOff(element, ls);
+		},
+		onDisconnected(element, listener){
+			start();
+			const listeners= getElementStore(element);
+			if(listeners.disconnected.has(listener)) return;
+			listeners.disconnected.add(listener);
+			listeners.length_d+= 1;
+		},
+		offDisconnected(element, listener){
+			if(!store.has(element)) return;
+			const ls= store.get(element);
+			if(!ls.disconnected.has(listener)) return;
+			ls.disconnected.delete(listener);
+			ls.length_d-= 1;
+			cleanWhenOff(element, ls);
+		}
+	};
+	function cleanWhenOff(element, ls){
+		if(ls.length_c || ls.length_d)
+			return;
+		store.delete(element);
+		stop();
+	}
+	function getElementStore(element){
+		if(store.has(element)) return store.get(element);
+		const out= {
+			connected: new WeakSet(),
+			length_c: 0,
+			disconnected: new WeakSet(),
+			length_d: 0
+		};
+		store.set(element, out);
+		return out;
+	}
+	function start(){
+		if(is_observing) return;
+		is_observing= true;
+		observer.observe(env.D.body, { childList: true, subtree: true });
+	}
+	function stop(){
+		if(!is_observing || store.size) return;
+		is_observing= false;
+		observer.disconnect();
+	}
+	//TODO remount support?
+	function requestIdle(){ return new Promise(function(resolve){
+		(requestIdleCallback || requestAnimationFrame)(resolve);
+	}); }
+	async function collectChildren(element){
+		if(store.size > 30)//TODO limit?
+			await requestIdle();
+		const out= [];
+		if(!(element instanceof Node)) return out;
+		for(const el of store.keys()){
+			if(el===element || !(el instanceof Node)) continue;
+			if(element.contains(el))
+				out.push(el);
+		}
+		return out;
+	}
+	function observerAdded(addedNodes, is_root){
+		let out= false;
+		for(const element of addedNodes){
+			if(is_root) collectChildren(element).then(observerAdded);
+			if(!store.has(element)) continue;
+			
+			const ls= store.get(element);
+			if(!ls.length_c) continue;
+			
+			element.dispatchEvent(new Event(evc));
+			ls.connected= new WeakSet();
+			ls.length_c= 0;
+			if(!ls.length_d) store.delete(element);
+			out= true;
+		}
+		return out;
+	}
+	function observerRemoved(removedNodes, is_root){
+		let out= false;
+		for(const element of removedNodes){
+			if(is_root) collectChildren(element).then(observerRemoved);
+			if(!store.has(element)) continue;
+			
+			const ls= store.get(element);
+			if(!ls.length_d) continue;
+			(queueMicrotask || setTimeout)(dispatchRemove(element));
+			out= true;
+		}
+		return out;
+	}
+	function dispatchRemove(element){
+		return ()=> {
+			if(element.isConnected) return;
+			element.dispatchEvent(new Event(evd));
+			store.delete(element);
+		};
+	}
+}

src/events.js

@@ -1,5 +1,5 @@
 export { registerReactivity } from './observables-common.js';
-import { enviroment as env } from './dom-common.js';
+import { enviroment as env, keyLTE, evc, evd, eva } from './dom-common.js';
 
 export function dispatchEvent(name, options, host){
 	if(!options) options= {};
@@ -19,25 +19,17 @@ export function on(event, listener, options){
 	};
 }
 
-const c_ch_o= env.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
-	get(){ return ()=> {}; }
-});
-const els_attribute_store= new WeakSet();
-import { scope } from "./dom.js";
+import { c_ch_o } from "./events-observer.js";
 import { onAbort } from './helpers.js';
+const lifeOptions= obj=> Object.assign({}, typeof obj==="object" ? obj : null, { once: true });
 //TODO: cleanUp when event before abort?
+//TODO: docs (e.g.) https://nolanlawson.com/2024/01/13/web-component-gotcha-constructor-vs-connectedcallback/
 on.connected= function(listener, options){
-	const { custom_element }= scope.current;
-	const name= "connected";
-	if(typeof options !== "object")
-		options= {};
-	options.once= true;
+	options= lifeOptions(options);
 	return function registerElement(element){
-		if(custom_element) element= custom_element;
-		const event= "dde:"+name;
-		element.addEventListener(event, listener, options);
-		if(element.__dde_lifecycleToEvents) return element;
-		if(element.isConnected) return ( element.dispatchEvent(new Event(event)), element );
+		element.addEventListener(evc, listener, options);
+		if(element[keyLTE]) return element;
+		if(element.isConnected) return ( element.dispatchEvent(new Event(evc)), element );
 
 		const c= onAbort(options.signal, ()=> c_ch_o.offConnected(element, listener));
 		if(c) c_ch_o.onConnected(element, listener);
@@ -45,16 +37,10 @@ on.connected= function(listener, options){
 	};
 };
 on.disconnected= function(listener, options){
-	const { custom_element }= scope.current;
-	const name= "disconnected";
-	if(typeof options !== "object")
-		options= {};
-	options.once= true;
+	options= lifeOptions(options);
 	return function registerElement(element){
-		if(custom_element) element= custom_element;
-		const event= "dde:"+name;
-		element.addEventListener(event, listener, options);
-		if(element.__dde_lifecycleToEvents) return element;
+		element.addEventListener(evd, listener, options);
+		if(element[keyLTE]) return element;
 
 		const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener));
 		if(c) c_ch_o.onDisconnected(element, listener);
@@ -70,14 +56,13 @@ on.disconnectedAsAbort= function(host){
 	host(on.disconnected(()=> a.abort()));
 	return a;
 };
+const els_attribute_store= new WeakSet();
 on.attributeChanged= function(listener, options){
-	const name= "attributeChanged";
 	if(typeof options !== "object")
 		options= {};
 	return function registerElement(element){
-		const event= "dde:"+name;
-		element.addEventListener(event, listener, options);
-		if(element.__dde_lifecycleToEvents || els_attribute_store.has(element))
+		element.addEventListener(eva, listener, options);
+		if(element[keyLTE] || els_attribute_store.has(element))
 			return element;
 		
 		if(!env.M) return element;
@@ -85,135 +70,11 @@ on.attributeChanged= function(listener, options){
 		const observer= new env.M(function(mutations){
 			for(const { attributeName, target } of mutations)
 				target.dispatchEvent(
-					new CustomEvent(event, { detail: [ attributeName, target.getAttribute(attributeName) ] }));
+					new CustomEvent(eva, { detail: [ attributeName, target.getAttribute(attributeName) ] }));
 		});
 		const c= onAbort(options.signal, ()=> observer.disconnect());
 		if(c) observer.observe(element, { attributes: true });
 		//TODO: clean up when element disconnected
 		return element;
 	};
-};
-
-function connectionsChangesObserverConstructor(){
-	const store= new Map();
-	let is_observing= false;
-	const observer= new env.M(function(mutations){
-		for(const mutation of mutations){
-			if(mutation.type!=="childList") continue;
-			if(observerAdded(mutation.addedNodes, true)){
-				stop();
-				continue;
-			}
-			if(observerRemoved(mutation.removedNodes, true))
-				stop();
-		}
-	});
-	return {
-		onConnected(element, listener){
-			start();
-			const listeners= getElementStore(element);
-			if(listeners.connected.has(listener)) return;
-			listeners.connected.add(listener);
-			listeners.length_c+= 1;
-		},
-		offConnected(element, listener){
-			if(!store.has(element)) return;
-			const ls= store.get(element);
-			if(!ls.connected.has(listener)) return;
-			ls.connected.delete(listener);
-			ls.length_c-= 1;
-			cleanWhenOff(element, ls);
-		},
-		onDisconnected(element, listener){
-			start();
-			const listeners= getElementStore(element);
-			if(listeners.disconnected.has(listener)) return;
-			listeners.disconnected.add(listener);
-			listeners.length_d+= 1;
-		},
-		offDisconnected(element, listener){
-			if(!store.has(element)) return;
-			const ls= store.get(element);
-			if(!ls.disconnected.has(listener)) return;
-			ls.disconnected.delete(listener);
-			ls.length_d-= 1;
-			cleanWhenOff(element, ls);
-		}
-	};
-	function cleanWhenOff(element, ls){
-		if(ls.length_c || ls.length_d)
-			return;
-		store.delete(element);
-		stop();
-	}
-	function getElementStore(element){
-		if(store.has(element)) return store.get(element);
-		const out= {
-			connected: new WeakSet(),
-			length_c: 0,
-			disconnected: new WeakSet(),
-			length_d: 0
-		};
-		store.set(element, out);
-		return out;
-	}
-	function start(){
-		if(is_observing) return;
-		is_observing= true;
-		observer.observe(env.D.body, { childList: true, subtree: true });
-	}
-	function stop(){
-		if(!is_observing || store.size) return;
-		is_observing= false;
-		observer.disconnect();
-	}
-	//TODO remount support?
-	function requestIdle(){ return new Promise(function(resolve){
-		(requestIdleCallback || requestAnimationFrame)(resolve);
-	}); }
-	async function collectChildren(element, filter){
-		if(store.size > 30)//TODO limit?
-			await requestIdle();
-		const out= [];
-		if(!(element instanceof Node)) return out;
-		for(const el of store.keys()){
-			if(el===element || !(el instanceof Node) || filter(el)) continue;
-			if(element.contains(el))
-				out.push(el);
-		}
-		return out;
-	}
-	function observerAdded(addedNodes, is_root){
-		let out= false;
-		for(const element of addedNodes){
-			if(is_root) collectChildren(element, el=> !el.isConnectedd).then(observerAdded);
-			if(!store.has(element)) continue;
-			
-			const ls= store.get(element);
-			if(!ls.length_c) continue;
-			
-			element.dispatchEvent(new Event("dde:connected"));
-			ls.connected= new WeakSet();
-			ls.length_c= 0;
-			if(!ls.length_d) store.delete(element);
-			out= true;
-		}
-		return out;
-	}
-	function observerRemoved(removedNodes, is_root){
-		let out= false;
-		for(const element of removedNodes){
-			if(is_root) collectChildren(element, el=> el.isConnectedd).then(observerRemoved);
-			if(!store.has(element)) continue;
-			
-			const ls= store.get(element);
-			if(!ls.length_d) continue;
-			
-			element.dispatchEvent(new Event("dde:disconnected"));
-			
-			store.delete(element);
-			out= true;
-		}
-		return out;
-	}
-}
+};	

src/observables-lib.js

@@ -96,7 +96,7 @@ observable.el= function(o, map){
 	out.append(mark_start, mark_end);
 	const { current }= scope;
 	const reRenderReactiveElement= v=> {
-		if(!mark_start.parentNode || !mark_end.parentNode)
+		if(!mark_start.parentNode || !mark_end.parentNode) // isConnected or wasn’t yet rendered
 			return removeObservableListener(o, reRenderReactiveElement);
 		scope.push(current);
 		let els= map(v);
@@ -107,12 +107,21 @@ observable.el= function(o, map){
 		while(( el_r= mark_start.nextSibling ) !== mark_end)
 			el_r.remove();
 		mark_start.after(...els);
+		if(mark_start.isConnected)
+			requestCleanUpReactives(current.host());
 	};
 	addObservableListener(o, reRenderReactiveElement);
 	removeObservablesFromElements(o, reRenderReactiveElement, mark_start, map);
 	reRenderReactiveElement(o());
 	return out;
 };
+function requestCleanUpReactives(host){
+	if(!host || !host[key_reactive]) return;
+	(requestIdleCallback || setTimeout)(function(){
+		host[key_reactive]= host[key_reactive]
+			.filter(([ o, el ])=> el.isConnected ? true : (removeObservableListener(...o), false));
+	});
+}
 import { on } from "./events.js";
 import { observedAttributes } from "./helpers.js";
 const observedAttributeActions= {
@@ -152,7 +161,11 @@ export const observables_config= {
 	isObservable,
 	processReactiveAttribute(element, key, attrs, set){
 		if(!isObservable(attrs)) return attrs;
-		const l= attr=> set(key, attr);
+		const l= attr=> {
+			if(!element.isConnected)
+				return removeObservableListener(attrs, l);
+			set(key, attr);
+		};
 		addObservableListener(attrs, l);
 		removeObservablesFromElements(attrs, l, element, key);
 		return attrs();
@@ -256,4 +269,4 @@ function removeObservableListener(o, listener, clear_when_empty){
 		deps.get(c).forEach(sig=> removeObservableListener(sig, c, true));
 	}
 	return out;
-}
+}