🚀 🚧 improvements (handlign special cases) + docs

bs/docs.js

@@ -12,10 +12,12 @@ const { el }= await register(ssr.dom);
 
 echo("Loading components…");
 const pkg= s.cat("package.json").xargs(JSON.parse);
-import { head, body, css } from "../docs_src/index.html.js";
+const { head, body, css }= await import("../docs_src/index.html.js"); //→											TODO: important to mention in docs!!!
-document.head.append(head(pkg, path_target));
+document.head.append(
-document.body.append(body(pkg));
+	head(pkg, path_target)
+);
 document.body.append(
+	el(body, pkg),
 	el("script", { src: "https://cdn.jsdelivr.net/npm/shiki" }),
 	el("script", { src: "index.js", type: "module" })
 );

dist/dde-with-signals.js

@@ -1,21 +1,21 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
-var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:X};function X(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],H=t=>t==="svg"?"http://www.w3.org/2000/svg":t,b={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=H(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return b.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=H(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=b,c=0,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,b.push({scope:t,host:a=>a?(c===1?n.unshift(a):a(s),void 0):s}),s=t(e||void 0),(s instanceof HTMLElement?J:V)(s,"Attribute","dde-fun",t.name);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case t==="<>":s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return n.forEach(a=>a(s)),c&&b.pop(),c=2,s}var{setDeleteAttr:U}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>q.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return $(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 U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return M(o,n,$.bind(null,t[e]));case"ariaset":return M(o,n,(a,d)=>r("aria-"+a,d));case"classList":return Y.call(c,t,n)}return tt(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?V:J).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=O(this);return M(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function tt(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function M(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 J(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function V(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function $(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function v(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;v.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};v.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};v.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||et.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:m,target:_}of d)_.dispatchEvent(new CustomEvent(c,{detail:[m,_.getAttribute(m)]}))});return R(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function nt(){let t=new MapLine truncated
+var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function k(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:K};function K(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],$=t=>t==="svg"?"http://www.w3.org/2000/svg":t,m={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=$(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return m.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=$(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=m,c=0,s,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,m.push({scope:t,host:h=>h?(c===1?n.unshift(h):h(d),void 0):d}),s=t(e||void 0);let a=document.createComment(`<dde:mark type="component" name="${t.name}"/>`);s.prepend(a),s instanceof DocumentFragment&&(d=a);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case t==="<>":s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return d||(d=s),n.forEach(a=>a(d)),c&&m.pop(),c=2,s}var{setDeleteAttr:H}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>q.call(c,t,d,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")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 H(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return T(o,n,U.bind(null,t[e]));case"ariaset":return T(o,n,(d,a)=>r("aria-"+d,a));case"classList":return Q.call(c,t,n)}return X(t,e)?H(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?tt:Y).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Q(t,e){let n=O(this);return T(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function X(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function T(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 Y(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function tt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function U(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;_.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};_.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||et.has(o))return o;let s=new MutationObserver(function(a){for(let{attributeName:h,target:v}of a)v.dispatchEvent(new CustomEvent(c,{detail:[h,v.getAttribute(h)]}))});return R(e.signal,()=>sLine truncated
-* Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=r[S][s];d&&d(a)})(r),v.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`).
+* Investigate `__dde_attributes` key of the element.*/let[s,d]=c,a=r[S][s];a&&a(d)})(r),_.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/h.clear(...Object.values(r[S]))})(r),r}),n};h.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!l.has(o))return;let c=l.get(o);c.delete(n),!(c.size>1)&&(h.clear(...c),l.delete(o))})}};var P="__dde_reactive";h.el=function(t,e){let n=document.createComment("<dde:reactive>"),r=document.createComment("</dde:reactive>"),o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return A(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let m=n;for(;(m=n.nextSibling)!==r;)m.remove();n.after(...d)};return k(t,s),Q(t,s,n,e),s(t()),o};var K={isSignal:j,processReactiveAttribute(t,e,n,r){if(!j(n))return n;let o=c=>r(e,c);return k(n,o),Q(n,o,t,e),n()}};function Q(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[P]||(o[P]=[],v.disconnected(()=>o[P].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[P].push([[t,e],...n])})}function Z(t,e){let n=(...r)=>r.length?it(n,...r):st(n);return ot(n,t,e)}var rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),W=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+* Investigate `__dde_attributes` key of the element.*/g.clear(...Object.values(r[S]))})(r),r}),n};g.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!l.has(o))return;let c=l.get(o);c.delete(n),!(c.size>1)&&(g.clear(...c),l.delete(o))})}};var D="__dde_reactive";g.el=function(t,e){let n=document.createComment('<dde:mark type="reactive">'),r=document.createComment("</dde:mark>"),o=document.createDocumentFragment();o.append(n,r);let{current:c}=m,s=d=>{if(!n.parentNode||!r.parentNode)return A(t,s);m.push(c);let a=e(d);m.pop(),Array.isArray(a)||(a=[a]);let h=n;for(;(h=n.nextSibling)!==r;)h.remove();n.after(...a)};return W(t,s),Z(t,s,n,e),s(t()),o};var V={isSignal:P,processReactiveAttribute(t,e,n,r){if(!P(n))return n;let o=c=>r(e,c);return W(n,o),Z(n,o,t,e),n()}};function Z(t,e,...n){let{current:r}=m;r.prevent||r.host(function(o){o[D]||(o[D]=[],_.disconnected(()=>o[D].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[D].push([[t,e],...n])})}function J(t,e){let n=(...r)=>r.length?it(n,...r):st(n);return ot(n,t,e)}var rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),M=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 ot(t,e,n){let r=[];F(n)!=="[object Object]"&&(n={});let{onclear:o}=h.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=b;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new W},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return D[D.length-1]}function st(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=ct();return r&&n.add(r),l.has(r)&&l.get(r).add(t),e}function it(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function k(t,e){if(t[p])return t[p].listeners.add(e)}function A(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(h.clear(t),!l.has(r))return o;let c=l.get(r);if(!l.has(c))return o;l.get(c).forEach(s=>A(s,c,!0))}return o}T(K);
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ot(t,e,n){let r=[];F(n)!=="[object Object]"&&(n={});let{onclear:o}=g.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=m;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new M},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return j[j.length-1]}function st(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=ct();return r&&n.add(r),l.has(r)&&l.get(r).add(t),e}function it(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function W(t,e){if(t[p])return t[p].listeners.add(e)}function A(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(g.clear(t),!l.has(r))return o;let c=l.get(r);if(!l.has(c))return o;l.get(c).forEach(s=>A(s,c,!0))}return o}k(V);
-globalThis.dde= {S: h,
+globalThis.dde= {S: g,
 assign: C,
 assignAttribute: q,
-classListDeclarative: Y,
+classListDeclarative: Q,
 createElement: lt,
 dispatchEvent: Et,
 el: lt,
 empty: gt,
-isSignal: j,
+isSignal: P,
-on: v,
+on: _,
-registerReactivity: T,
+registerReactivity: k,
-scope: b
+scope: m
 };
 
 })();

dist/dde.js

@@ -1,15 +1,15 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
-var v={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function F(t,e=!0){return e?Object.assign(v,t):(Object.setPrototypeOf(t,v),t)}function m(t){return v.isPrototypeOf(t)&&t!==v?t:v}function h(t){return typeof t>"u"}function _(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:H};function H(t,e,n){if(Reflect.set(t,e,n),!!h(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var E=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return E[E.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...E]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),E.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return E.pop()}};function J(t,e,...n){let c=m(this),{namespace:r}=x,f=0,u;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{f=1,x.push({scope:t,host:a=>a?(f===1?n.unshift(a):a(u),void 0):u}),u=t(e||void 0),(u instanceof HTMLElement?M:W)(u,"Attribute","dde-fun",t.name);break}case t==="#text":u=w.call(this,document.createTextNode(""),e);break;case t==="<>":u=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":u=w.call(this,document.createElementNS(r,t),e);break;case!u:u=w.call(this,document.createElement(t),e)}return n.forEach(a=>a(u)),f&&x.pop(),f=2,u}var{setDeleteAttr:L}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),f=this;n=r.processReactiveAttribute(t,e,n,(a,p)=>N.call(f,t,a,p));let[u]=e;if(u==="=")return c(e.slice(1),n);if(u===".")return D(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 L(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,D.bind(null,t[e]));case"ariaset":return y(r,n,(a,p)=>c("aria-"+a,p));case"classList":return U.call(f,t,n)}return q(t,e)?L(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?W:M).bind(null,t,"Attribute"),r=m(e);return{setRemoveAttr:c,s:r}}function U(t,e){let n=m(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function q(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!h(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,f]){r&&(f=t.processReactiveAttribute(e,r,f,n),n(r,f))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function M(t,e,n,c){return t[(h(c)?"remove":"set")+e](n,T(c))}function W(t,e,n,c,r=null){return t[(h(c)?"remove":"set")+e+"NS"](r,n,T(c))}function D(t,e,n){if(Reflect.set(t,e,n),!!h(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=B(),z=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let f="dde:"+n;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let f="dde:"+n;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let f="dde:"+n;if(r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||z.has(r))return r;let u=new MutationObserver(function(p){for(let{attributeName:l,target:g}of p)g.dispatchEvent(new CustomEvent(f,{detail:[l,g.getAttribute(l)]}))});return _(e.signal,()=>u.disconnect())&&u.observe(r,{attributes:!0}),r}};function B(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(l(s.addedNodes,!0)){u();coLine truncated
+var b={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function M(t,e=!0){return e?Object.assign(b,t):(Object.setPrototypeOf(t,b),t)}function E(t){return b.isPrototypeOf(t)&&t!==b?t:b}function l(t){return typeof t>"u"}function _(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:W};function W(t,e,n){if(Reflect.set(t,e,n),!!l(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var v=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return v[v.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...v]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),v.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return v.pop()}};function J(t,e,...n){let c=E(this),{namespace:r}=x,u=0,f,a;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{u=1,x.push({scope:t,host:h=>h?(u===1?n.unshift(h):h(a),void 0):a}),f=t(e||void 0);let d=document.createComment(`<dde:mark type="component" name="${t.name}"/>`);f.prepend(d),f instanceof DocumentFragment&&(a=d);break}case t==="#text":f=w.call(this,document.createTextNode(""),e);break;case t==="<>":f=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":f=w.call(this,document.createElementNS(r,t),e);break;case!f:f=w.call(this,document.createElement(t),e)}return a||(a=f),n.forEach(d=>d(a)),u&&x.pop(),u=2,f}var{setDeleteAttr:D}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),u=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>N.call(u,t,a,d));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return L(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 D(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,L.bind(null,t[e]));case"ariaset":return y(r,n,(a,d)=>c("aria-"+a,d));case"classList":return F.call(u,t,n)}return U(t,e)?D(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?z:q).bind(null,t,"Attribute"),r=E(e);return{setRemoveAttr:c,s:r}}function F(t,e){let n=E(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function U(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!l(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,u]){r&&(u=t.processReactiveAttribute(e,r,u,n),n(r,u))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function q(t,e,n,c){return t[(l(c)?"remove":"set")+e](n,T(c))}function z(t,e,n,c,r=null){return t[(l(c)?"remove":"set")+e+"NS"](r,n,T(c))}function L(t,e,n){if(Reflect.set(t,e,n),!!l(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=$(),H=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(u)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let u="dde:"+n;if(r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||H.has(r))return r;let f=new MutationObserver(function(d){for(let{attributeName:h,target:g}of d)g.dispatchEvent(new CustomEvent(u,{detail:[h,g.getAttribute(h)]}))});return _(e.signal,()=>f.disconnect())&&f.observe(r,{attributes:!0}),r}};function $(){let t=new Map,e=!1,n=new MutationObserver(functLine truncated
 globalThis.dde= {assign: w,
 assignAttribute: N,
-classListDeclarative: U,
+classListDeclarative: F,
 createElement: J,
 dispatchEvent: k,
 el: J,
 empty: Q,
 on: C,
-registerReactivity: F,
+registerReactivity: M,
 scope: x
 };
 

dist/esm-with-signals.js

@@ -1,4 +1,4 @@
-var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:X};function X(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],H=t=>t==="svg"?"http://www.w3.org/2000/svg":t,b={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=H(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return b.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=H(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=b,c=0,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,b.push({scope:t,host:a=>a?(c===1?n.unshift(a):a(s),void 0):s}),s=t(e||void 0),(s instanceof HTMLElement?J:V)(s,"Attribute","dde-fun",t.name);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case t==="<>":s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return n.forEach(a=>a(s)),c&&b.pop(),c=2,s}var{setDeleteAttr:U}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>q.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return $(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 U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return M(o,n,$.bind(null,t[e]));case"ariaset":return M(o,n,(a,d)=>r("aria-"+a,d));case"classList":return Y.call(c,t,n)}return tt(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?V:J).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=O(this);return M(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function tt(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function M(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 J(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function V(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function $(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function v(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;v.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};v.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};v.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||et.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:m,target:_}of d)_.dispatchEvent(new CustomEvent(c,{detail:[m,_.getAttribute(m)]}))});return R(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function nt(){let t=new MapLine truncated
+var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function k(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:K};function K(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],$=t=>t==="svg"?"http://www.w3.org/2000/svg":t,m={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=$(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return m.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=$(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=m,c=0,s,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,m.push({scope:t,host:h=>h?(c===1?n.unshift(h):h(d),void 0):d}),s=t(e||void 0);let a=document.createComment(`<dde:mark type="component" name="${t.name}"/>`);s.prepend(a),s instanceof DocumentFragment&&(d=a);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case t==="<>":s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return d||(d=s),n.forEach(a=>a(d)),c&&m.pop(),c=2,s}var{setDeleteAttr:H}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>q.call(c,t,d,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")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 H(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return T(o,n,U.bind(null,t[e]));case"ariaset":return T(o,n,(d,a)=>r("aria-"+d,a));case"classList":return Q.call(c,t,n)}return X(t,e)?H(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?tt:Y).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Q(t,e){let n=O(this);return T(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function X(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function T(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 Y(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function tt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function U(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;_.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};_.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||et.has(o))return o;let s=new MutationObserver(function(a){for(let{attributeName:h,target:v}of a)v.dispatchEvent(new CustomEvent(c,{detail:[h,v.getAttribute(h)]}))});return R(e.signal,()=>sLine truncated
-* Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=r[S][s];d&&d(a)})(r),v.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`).
+* Investigate `__dde_attributes` key of the element.*/let[s,d]=c,a=r[S][s];a&&a(d)})(r),_.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/h.clear(...Object.values(r[S]))})(r),r}),n};h.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!l.has(o))return;let c=l.get(o);c.delete(n),!(c.size>1)&&(h.clear(...c),l.delete(o))})}};var P="__dde_reactive";h.el=function(t,e){let n=document.createComment("<dde:reactive>"),r=document.createComment("</dde:reactive>"),o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return A(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let m=n;for(;(m=n.nextSibling)!==r;)m.remove();n.after(...d)};return k(t,s),Q(t,s,n,e),s(t()),o};var K={isSignal:j,processReactiveAttribute(t,e,n,r){if(!j(n))return n;let o=c=>r(e,c);return k(n,o),Q(n,o,t,e),n()}};function Q(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[P]||(o[P]=[],v.disconnected(()=>o[P].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[P].push([[t,e],...n])})}function Z(t,e){let n=(...r)=>r.length?it(n,...r):st(n);return ot(n,t,e)}var rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),W=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+* Investigate `__dde_attributes` key of the element.*/g.clear(...Object.values(r[S]))})(r),r}),n};g.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!l.has(o))return;let c=l.get(o);c.delete(n),!(c.size>1)&&(g.clear(...c),l.delete(o))})}};var D="__dde_reactive";g.el=function(t,e){let n=document.createComment('<dde:mark type="reactive">'),r=document.createComment("</dde:mark>"),o=document.createDocumentFragment();o.append(n,r);let{current:c}=m,s=d=>{if(!n.parentNode||!r.parentNode)return A(t,s);m.push(c);let a=e(d);m.pop(),Array.isArray(a)||(a=[a]);let h=n;for(;(h=n.nextSibling)!==r;)h.remove();n.after(...a)};return W(t,s),Z(t,s,n,e),s(t()),o};var V={isSignal:P,processReactiveAttribute(t,e,n,r){if(!P(n))return n;let o=c=>r(e,c);return W(n,o),Z(n,o,t,e),n()}};function Z(t,e,...n){let{current:r}=m;r.prevent||r.host(function(o){o[D]||(o[D]=[],_.disconnected(()=>o[D].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[D].push([[t,e],...n])})}function J(t,e){let n=(...r)=>r.length?it(n,...r):st(n);return ot(n,t,e)}var rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),M=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 ot(t,e,n){let r=[];F(n)!=="[object Object]"&&(n={});let{onclear:o}=h.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=b;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new W},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return D[D.length-1]}function st(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=ct();return r&&n.add(r),l.has(r)&&l.get(r).add(t),e}function it(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function k(t,e){if(t[p])return t[p].listeners.add(e)}function A(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(h.clear(t),!l.has(r))return o;let c=l.get(r);if(!l.has(c))return o;l.get(c).forEach(s=>A(s,c,!0))}return o}T(K);export{h as S,C as assign,q as assignAttribute,Y as classListDeclarative,lt as createElement,Et as dispatchEvent,lt as el,gt as empty,j as isSignal,v as on,T as registerReactivity,b as scope};
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ot(t,e,n){let r=[];F(n)!=="[object Object]"&&(n={});let{onclear:o}=g.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=m;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new M},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return j[j.length-1]}function st(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=ct();return r&&n.add(r),l.has(r)&&l.get(r).add(t),e}function it(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function W(t,e){if(t[p])return t[p].listeners.add(e)}function A(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(g.clear(t),!l.has(r))return o;let c=l.get(r);if(!l.has(c))return o;l.get(c).forEach(s=>A(s,c,!0))}return o}k(V);export{g as S,C as assign,q as assignAttribute,Q as classListDeclarative,lt as createElement,Et as dispatchEvent,lt as el,gt as empty,P as isSignal,_ as on,k as registerReactivity,m as scope};

dist/esm.js

@@ -1 +1 @@
-var v={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function F(t,e=!0){return e?Object.assign(v,t):(Object.setPrototypeOf(t,v),t)}function m(t){return v.isPrototypeOf(t)&&t!==v?t:v}function h(t){return typeof t>"u"}function _(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:H};function H(t,e,n){if(Reflect.set(t,e,n),!!h(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var E=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return E[E.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...E]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),E.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return E.pop()}};function J(t,e,...n){let c=m(this),{namespace:r}=x,f=0,u;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{f=1,x.push({scope:t,host:a=>a?(f===1?n.unshift(a):a(u),void 0):u}),u=t(e||void 0),(u instanceof HTMLElement?M:W)(u,"Attribute","dde-fun",t.name);break}case t==="#text":u=w.call(this,document.createTextNode(""),e);break;case t==="<>":u=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":u=w.call(this,document.createElementNS(r,t),e);break;case!u:u=w.call(this,document.createElement(t),e)}return n.forEach(a=>a(u)),f&&x.pop(),f=2,u}var{setDeleteAttr:L}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),f=this;n=r.processReactiveAttribute(t,e,n,(a,p)=>N.call(f,t,a,p));let[u]=e;if(u==="=")return c(e.slice(1),n);if(u===".")return D(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 L(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,D.bind(null,t[e]));case"ariaset":return y(r,n,(a,p)=>c("aria-"+a,p));case"classList":return U.call(f,t,n)}return q(t,e)?L(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?W:M).bind(null,t,"Attribute"),r=m(e);return{setRemoveAttr:c,s:r}}function U(t,e){let n=m(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function q(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!h(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,f]){r&&(f=t.processReactiveAttribute(e,r,f,n),n(r,f))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function M(t,e,n,c){return t[(h(c)?"remove":"set")+e](n,T(c))}function W(t,e,n,c,r=null){return t[(h(c)?"remove":"set")+e+"NS"](r,n,T(c))}function D(t,e,n){if(Reflect.set(t,e,n),!!h(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=B(),z=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let f="dde:"+n;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let f="dde:"+n;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let f="dde:"+n;if(r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||z.has(r))return r;let u=new MutationObserver(function(p){for(let{attributeName:l,target:g}of p)g.dispatchEvent(new CustomEvent(f,{detail:[l,g.getAttribute(l)]}))});return _(e.signal,()=>u.disconnect())&&u.observe(r,{attributes:!0}),r}};function B(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(l(s.addedNodes,!0)){u();coLine truncated
+var b={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function M(t,e=!0){return e?Object.assign(b,t):(Object.setPrototypeOf(t,b),t)}function E(t){return b.isPrototypeOf(t)&&t!==b?t:b}function l(t){return typeof t>"u"}function _(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:W};function W(t,e,n){if(Reflect.set(t,e,n),!!l(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var v=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return v[v.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...v]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),v.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return v.pop()}};function J(t,e,...n){let c=E(this),{namespace:r}=x,u=0,f,a;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{u=1,x.push({scope:t,host:h=>h?(u===1?n.unshift(h):h(a),void 0):a}),f=t(e||void 0);let d=document.createComment(`<dde:mark type="component" name="${t.name}"/>`);f.prepend(d),f instanceof DocumentFragment&&(a=d);break}case t==="#text":f=w.call(this,document.createTextNode(""),e);break;case t==="<>":f=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":f=w.call(this,document.createElementNS(r,t),e);break;case!f:f=w.call(this,document.createElement(t),e)}return a||(a=f),n.forEach(d=>d(a)),u&&x.pop(),u=2,f}var{setDeleteAttr:D}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),u=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>N.call(u,t,a,d));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return L(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 D(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,L.bind(null,t[e]));case"ariaset":return y(r,n,(a,d)=>c("aria-"+a,d));case"classList":return F.call(u,t,n)}return U(t,e)?D(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?z:q).bind(null,t,"Attribute"),r=E(e);return{setRemoveAttr:c,s:r}}function F(t,e){let n=E(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function U(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!l(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,u]){r&&(u=t.processReactiveAttribute(e,r,u,n),n(r,u))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function q(t,e,n,c){return t[(l(c)?"remove":"set")+e](n,T(c))}function z(t,e,n,c,r=null){return t[(l(c)?"remove":"set")+e+"NS"](r,n,T(c))}function L(t,e,n){if(Reflect.set(t,e,n),!!l(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=$(),H=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(u)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let u="dde:"+n;if(r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||H.has(r))return r;let f=new MutationObserver(function(d){for(let{attributeName:h,target:g}of d)g.dispatchEvent(new CustomEvent(u,{detail:[h,g.getAttribute(h)]}))});return _(e.signal,()=>f.disconnect())&&f.observe(r,{attributes:!0}),r}};function $(){let t=new Map,e=!1,n=new MutationObserver(functLine truncated

docs/index.css

@@ -1,6 +1,6 @@
 :root {
 	color-scheme: dark light;
-	--body-max-width: 40rem;
+	--body-max-width: 45rem;
 }
 *, ::before, ::after { box-sizing: border-box; }
 body > * {
@@ -17,5 +17,5 @@ h1{
 }
 .example{
 	--body-max-width: 80rem;
-	height: 20rem;
+	height: 25rem;
 }

docs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="index.css"><meta name="description" content="Introducing basic concepts."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://gitea.jaandrle.cz/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"><meta name="og:url" content="https://gitea.jaandrle.cz/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"><title>`deka-dom-el` — Introduction/Guide</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><h1>`deka-dom-el` — Introduction/Guide</h1><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.The main goals are:</p><ul><li>provide a&nbsp;small wrapper around the native JavaScript DOM</li><li>keep library size under 10kB</li><li>zero dependencies (if possible)</li><li>prefer a&nbsp;declarative/functional approach</li><li>unopinionated (allow alternative methods)</li></ul><p class="note">It is, in fact, an reimplementation of <a href="https://github.com/jaandrle/dollar_dom_component" title="GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.">jaandrle/dollar_dom_component</a>.</p><div id="code-2f13w" class="example"><pre><code class="language-javascript">import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="index.css"><meta name="description" content="Introducing basic concepts."><!--<dde:mark type="component" name="metaTwitter"/>--><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"/>--><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"><title>`deka-dom-el` — Introduction/Guide</title><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script></head><body><!--<dde:mark type="component" name="body"/>--><h1>`deka-dom-el` — Introduction/Guide</h1><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.The main goals are:</p><ul><li>provide a&nbsp;small wrapper around the native JavaScript DOM</li><li>keep library size under 10kB</li><li>zero dependencies (if possible)</li><li>prefer a&nbsp;declarative/functional approach</li><li>unopinionated (allow alternative methods)</li></ul><p class="note">It is, in fact, an reimplementation of <a href="https://github.com/jaandrle/dollar_dom_component" title="GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.">jaandrle/dollar_dom_component</a>.</p><!--<dde:mark type="component" name="example"/>--><div id="code-vup3z" class="example"><pre><code class="language-javascript">import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const clicks= S(0);
 document.body.append(
 	el("&lt;&gt;").append(
@@ -12,12 +12,4 @@ document.body.append(
 		})
 	)
 );
-</code></pre></div><script>
+</code></pre></div><script>Flems(document.getElementById("code-vup3z"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\\\";\\nconst clicks= S(0);\\ndocument.body.append(\\n\\tel(\\\"<>\\\").append(\\n\\t\\tel(\\\"p\\\", S(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\n\\t)\\n);\\n\"}],\"toolbar\":false}"));</script><script src="https://cdn.jsdelivr.net/npm/shiki"></script><script src="index.js" type="module"></script></body></html>
-			Flems(document.getElementById("code-2f13w"), {
-				files: [{
-					name: ".js",
-					content: "import { el, S } from \"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js\";\nconst clicks= S(0);\ndocument.body.append(\n\tel(\"<>\").append(\n\t\tel(\"p\", S(()=>\n\t\t\t\"Hello World \"+\"🎉\".repeat(clicks())\n\t\t)),\n\t\tel(\"button\", {\n\t\t\ttype: \"button\",\n\t\t\tonclick: ()=> clicks(clicks()+1),\n\t\t\ttextContent: \"Fire\"\n\t\t})\n\t)\n);\n"
-				}],
-				toolbar: false,
-			})
-		</script><script src="https://cdn.jsdelivr.net/npm/shiki"></script><script src="index.js" type="module"></script></body></html>

docs_src/components/example.html.js

@@ -1,12 +1,12 @@
-let loaded= false;
+let is_register= false;
 import { styles } from "../index.css.js";
 export const css= styles().scope(example).css`
 :host{
 	--body-max-width: 80rem;
-	height: 20rem;
+	height: 25rem;
 }
 `
-import { el } from "../../jsdom.js";
+import { el } from "deka-dom-el";
 export function example({ src, language= "javascript" }){
 	register();
 	const cwd= "components";
@@ -32,12 +32,12 @@ function elCode({ id, content }){
 		files: [{ name: ".js", content }],
 		toolbar: false
 	});
-	return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${options}));`);
+	return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);
 }
 function register(){
-	if(loaded) return;
+	if(is_register) return;
 	document.head.append(
 		el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" })
 	);
-	loaded= true;
+	is_register= true;
 }

docs_src/index.css.js

@@ -30,7 +30,7 @@ export function styles(){ return Object.assign(Object.create(s), { content: "" }
 export const common= css`
 :root {
 	color-scheme: dark light;
-	--body-max-width: 40rem;
+	--body-max-width: 45rem;
 }
 *, ::before, ::after { box-sizing: border-box; }
 body > * {

docs_src/index.html.js

@@ -1,4 +1,4 @@
-import { el } from "../jsdom.js";
+import { el } from "deka-dom-el";
 import { head as headCommon } from "./layout/head.html.js";
 export function head(pkg, path_target){
 	return headCommon({
@@ -43,7 +43,7 @@ export function body(pkg){
 			}),
 			".",
 		),
-		example({ src: "./components/examples/helloWorld.js" })
+		el(example, { src: "./components/examples/helloWorld.js" })
 	);
 }
 function pageName(pkg){

docs_src/layout/head.html.js

@@ -1,4 +1,4 @@
-import { el } from "../../jsdom.js";
+import { el } from "deka-dom-el";
 /**
  * @param {object} def
  * @param {string} def.id Page `id` is used as stylesheet name.

jsdom.js

@@ -11,35 +11,16 @@ prop_process.setDeleteAttr= function(obj, prop, value){
 const keys= [ "HTMLElement", "SVGElement", "DocumentFragment", "MutationObserver", "document" ];
 let dom_last;
 
-export let namespace;
+export function register(dom, keys_aditional= []){
-export let createElement;
+	if(dom_last!==dom){
-export let el;
-export let assign;
-export let classListDeclarative;
-export let empty;
-export let on;
-export let dispatchEvent;
-
-export async function register(dom, keys_aditional= []){
-	if(dom_last===dom)
-		return import("./index.js");
-
 		keys.push(...keys_aditional);
 		const w= dom.window;
 		keys.forEach(key=> globalThis[key]= w[key]);
 		globalThis.window= w;
 		w.console= globalThis.console;
+	}
 
-	const m= await import("./index.js");
+	return import("./index.js");
-	namespace= m.namespace;
-	createElement= m.createElement;
-	el= m.el;
-	assign= m.assign;
-	classListDeclarative= m.classListDeclarative;
-	empty= m.empty;
-	on= m.on;
-	dispatchEvent= m.dispatchEvent;
-	return m;
 }
 export function unregister(){
 	if(!dom_last)

package-lock.json

@@ -2524,6 +2524,37 @@
 			"integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==",
 			"dev": true
 		},
+		"node_modules/universalify": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
+		"node_modules/url-parse": {
+			"version": "1.5.10",
+			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+			"dev": true,
+			"dependencies": {
+				"querystringify": "^2.1.1",
+				"requires-port": "^1.0.0"
+			}
+		},
+		"node_modules/w3c-xmlserializer": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+			"integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+			"dev": true,
+			"dependencies": {
+				"xml-name-validator": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/web-streams-polyfill": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"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",

src/dom.js

@@ -43,16 +43,19 @@ export function createElement(tag, attributes, ...connect){
 	const s= signals(this);
 	const { namespace }= scope;
 	let scoped= 0;
-	let el;
+	let el, el_host;
 	//TODO Array.isArray(tag) ⇒ set key (cache els)
 	if(Object(attributes)!==attributes || s.isSignal(attributes))
 		attributes= { textContent: attributes };
 	switch(true){
 		case typeof tag==="function": {
 			scoped= 1;
-			scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el), undefined) : el });
+			scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el_host), undefined) : el_host });
 			el= tag(attributes || undefined);
-			(el instanceof HTMLElement ? setRemove : setRemoveNS)(el, "Attribute", "dde-fun", tag.name);
+			const el_mark= document.createComment(`<dde:mark type="component" name="${tag.name}"/>`);
+			el.prepend(el_mark);
+			if(el instanceof DocumentFragment)
+				el_host= el_mark;
 			break;
 		}
 		case tag==="#text":      el= assign.call(this, document.createTextNode(""), attributes); break;
@@ -60,7 +63,8 @@ export function createElement(tag, attributes, ...connect){
 		case namespace!=="html": el= assign.call(this, document.createElementNS(namespace, tag), attributes); break;
 		case !el:                el= assign.call(this, document.createElement(tag), attributes);
 	}
-	connect.forEach(c=> c(el));
+	if(!el_host) el_host= el;
+	connect.forEach(c=> c(el_host));
 	if(scoped) scope.pop();
 	scoped= 2;
 	return el;

src/signals-lib.js

@@ -118,8 +118,8 @@ S.clear= function(...signals){
 };
 const key_reactive= "__dde_reactive";
 S.el= function(signal, map){
-	const mark_start= document.createComment(`<dde:reactive>`);
+	const mark_start= document.createComment(`<dde:mark type="reactive">`);
-	const mark_end= document.createComment("</dde:reactive>");
+	const mark_end= document.createComment("</dde:mark>");
 	const out= document.createDocumentFragment();
 	out.append(mark_start, mark_end);
 	const { current }= scope;