🐛 renaming fixes

README.md

@@ -23,7 +23,7 @@ document.body.append(
 	
 );
 function component({ textContent, className }){
-	const value= S("onchange");
+	const value= O("onchange");
 	
 	return el().append(
 		el("p", { textContent, className }),
@@ -53,7 +53,7 @@ Another goal is to proceed in the best spirit of functional programming. This in
 pure JavaScript (DOM API) and gradually adding auxiliary functions, ranging from “minor” improvements
 to the capability of writing complete declarative reactive UI templates.
 
-As a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `S`, …)
+As a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `O`, …)
 can be used independently, although they are primarily designed for use in combination.  This can also,
 hopefully, help in integrating the library into existing projects.
 

dist/dde-with-observables.js

@@ -1,27 +1,27 @@
 //deka-dom-el library is available via global namespace `dde`
 (()=> {
-var A={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(A,t):(Object.setPrototypeOf(t,A),t)}function C(t){return A.isPrototypeOf(t)&&t!==A?t:A}function x(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 N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var $={setDeleteAttr:tt,ssr:""};function tt(t,e,n){if(Reflect.set(t,e,n),!!x(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,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return E[E.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...E]},push(t={}){return E.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};function H(...t){return this.appendOriginal(...t),this}function et(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var j;function y(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(m=>m(s)),void 0):s}),c=t(e||void 0);let d=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let u=y.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(u),d&&(s=u);break}case t==="#text":c=P.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=P.call(this,document.createDocumentFragment(),e);break;case!!j:c=P.call(this,document.createElementNS(j,t),e);break;case!c:c=P.call(this,document.createElement(t),e)}return et(c),s||(s=c),n.forEach(d=>d(s)),o&&g.pop(),o=2,c}function vt(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,c)=>Reflect.set(o,c.name||e,c)&&o,{}),r=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,c,s){if(!s.length)return t;let d=document.createDocumentFragment();for(let u of s){if(!u||!u.slot){r&&d.appendChild(u);continue}let l=u.slot,m=n[l];O(u,"remove","slot"),m&&(m.replaceWith(u),Reflect.deleteProperty(n,l))}return r&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(u=>u.replaceWith(y().append(...Array.from(u.childNodes)))),t}}),t}y.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(`<dde:mark ${t}${$.ssr}${n}>`);return e||(r.end=document.createComment("</dde:mark>")),r};function Et(t){let e=this;return function(...r){j=t;let o=y.call(e,...r);return j=void 0,o}}var{setDeleteAttr:I}=$,L=new WeakMap;function P(t,...e){if(!e.length)return t;L.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return L.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,u)=>Z.call(c,t,d,u));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(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 I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,t[e]));case"ariaset":return F(o,n,(d,u)=>r("aria-"+d,u));case"classList":return nt.call(c,t,n)}return rt(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?ct:ot).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function nt(t,e){let n=C(this);return F(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function xt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function O(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function rt(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!x(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function F(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 K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function ot(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,K(r))}function ct(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function wt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function v(t,e,Line truncated
+var R={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function $(t,e=!0){return e?Object.assign(R,t):(Object.setPrototypeOf(t,R),t)}function N(t){return R.isPrototypeOf(t)&&t!==R?t:R}function x(t){return typeof t>"u"}function H(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function P(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var F={setDeleteAttr:et,ssr:""};function et(t,e,n){if(Reflect.set(t,e,n),!!x(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,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],b={get current(){return v[v.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...v]},push(t={}){return v.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return v.push(v[0])},pop(){if(v.length!==1)return v.pop()}};function I(...t){return this.appendOriginal(...t),this}function nt(t){return t.append===I||(t.appendOriginal=t.append,t.append=I),t}var L;function y(t,e,...n){let r=N(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,b.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(m=>m(s)),void 0):s}),c=t(e||void 0);let d=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let u=y.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(u),d&&(s=u);break}case t==="#text":c=j.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=j.call(this,document.createDocumentFragment(),e);break;case!!L:c=j.call(this,document.createElementNS(L,t),e);break;case!c:c=j.call(this,document.createElement(t),e)}return nt(c),s||(s=c),n.forEach(d=>d(s)),o&&b.pop(),o=2,c}function Et(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,c)=>Reflect.set(o,c.name||e,c)&&o,{}),r=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,c,s){if(!s.length)return t;let d=document.createDocumentFragment();for(let u of s){if(!u||!u.slot){r&&d.appendChild(u);continue}let l=u.slot,m=n[l];w(u,"remove","slot"),m&&(m.replaceWith(u),Reflect.deleteProperty(n,l))}return r&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(u=>u.replaceWith(y().append(...Array.from(u.childNodes)))),t}}),t}y.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(`<dde:mark ${t}${F.ssr}${n}>`);return e||(r.end=document.createComment("</dde:mark>")),r};function xt(t){let e=this;return function(...r){L=t;let o=y.call(e,...r);return L=void 0,o}}var{setDeleteAttr:J}=F,D=new WeakMap;function j(t,...e){if(!e.length)return t;D.set(t,V(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))G.call(this,t,n,r);return D.delete(t),t}function G(t,e,n){let{setRemoveAttr:r,s:o}=V(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,u)=>G.call(c,t,d,u));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 z(o,n,Z.bind(null,t[e]));case"ariaset":return z(o,n,(d,u)=>r("aria-"+d,u));case"classList":return rt.call(c,t,n)}return ot(t,e)?J(t,e,n):r(e,n)}function V(t,e){if(D.has(t))return D.get(t);let r=(t instanceof SVGElement?st:ct).bind(null,t,"Attribute"),o=N(e);return{setRemoveAttr:r,s:o}}function rt(t,e){let n=N(this);return z(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ot(t){return Array.from(t.children).forEach(e=>e.remove()),t}function w(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function ot(t,e){if(!Reflect.has(t,e))return!1;let n=K(t,e);return!x(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 z(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 ct(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,Q(r))}function st(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,Q(r))}function Z(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function At(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,Line truncated
-* Investigate `__dde_attributes` key of the element.*/let[d,u]=s,l=r[R][d];if(l)return l(u)})(r),v.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`).
+* Investigate `__dde_attributes` key of the element.*/let[d,u]=s,l=r[S][d];if(l)return l(u)})(r),_.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/_.clear(...Object.values(r[R]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let d=s[0];return O(r,"set",t,d)}})};var X={isObservable:W,processReactiveAttribute(t,e,n,r){if(!W(n))return n;let o=c=>r(e,c);return U(n,o),Y(n,o,t,e),n()}};function Y(t,e,...n){let{current:r}=g;r.prevent||r.host(function(o){o[k]||(o[k]=[],v.disconnected(()=>o[k].forEach(([[c,s]])=>S(c,s,c[p]?.host()===o)))(o)),o[k].push([[t,e],...n])})}function Q(t,e){let n=(...r)=>r.length?lt(n,...r):dt(n);return ut(n,t,e)}var ft=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+* Investigate `__dde_attributes` key of the element.*/O.clear(...Object.values(r[S]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let d=s[0];return w(r,"set",t,d)}})};var Y={isObservable:M,processReactiveAttribute(t,e,n,r){if(!M(n))return n;let o=c=>r(e,c);return B(n,o),tt(n,o,t,e),n()}};function tt(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[W]||(o[W]=[],_.disconnected(()=>o[W].forEach(([[c,s]])=>C(c,s,c[p]?.host()===o)))(o)),o[W].push([[t,e],...n])})}function X(t,e){let n=(...r)=>r.length?pt(n,...r):lt(n);return at(n,t,e)}var ut=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),U=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 ut(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=t.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=g;return Reflect.defineProperty(t,p,{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[p],ft),t}function at(){return M[M.length-1]}function dt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=at();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function lt(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 U(t,e){if(t[p])return t[p].listeners.add(e)}function S(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(t.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}T(X);
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function at(t,e,n){let r=[];H(n)!=="[object Object]"&&(n={});let{onclear:o}=O.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 U},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],ut),t}function dt(){return T[T.length-1]}function lt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=dt();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function pt(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 B(t,e){if(t[p])return t[p].listeners.add(e)}function C(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(t.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>C(s,c,!0))}return o}$(Y);
-globalThis.dde= {O: _,
+globalThis.dde= {O: E,
-assign: P,
+assign: j,
-assignAttribute: Z,
+assignAttribute: G,
-chainableAppend: et,
+chainableAppend: nt,
-classListDeclarative: nt,
+classListDeclarative: rt,
 createElement: y,
-createElementNS: Et,
+createElementNS: xt,
-dispatchEvent: wt,
+dispatchEvent: At,
 el: y,
-elNS: Et,
+elNS: xt,
-elementAttribute: O,
+elementAttribute: w,
-empty: xt,
+empty: Ot,
-isObservable: W,
+isObservable: M,
-observable: _,
+observable: E,
-on: v,
+on: _,
-registerReactivity: T,
+registerReactivity: $,
-scope: g,
+scope: b,
-simulateSlots: vt
+simulateSlots: Et
 };
 
 })();

dist/esm-with-observables.js

@@ -1,4 +1,4 @@
-var A={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(A,t):(Object.setPrototypeOf(t,A),t)}function C(t){return A.isPrototypeOf(t)&&t!==A?t:A}function x(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 N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var $={setDeleteAttr:tt,ssr:""};function tt(t,e,n){if(Reflect.set(t,e,n),!!x(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,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return E[E.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...E]},push(t={}){return E.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};function H(...t){return this.appendOriginal(...t),this}function et(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var j;function y(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(m=>m(s)),void 0):s}),c=t(e||void 0);let d=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let u=y.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(u),d&&(s=u);break}case t==="#text":c=P.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=P.call(this,document.createDocumentFragment(),e);break;case!!j:c=P.call(this,document.createElementNS(j,t),e);break;case!c:c=P.call(this,document.createElement(t),e)}return et(c),s||(s=c),n.forEach(d=>d(s)),o&&g.pop(),o=2,c}function vt(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,c)=>Reflect.set(o,c.name||e,c)&&o,{}),r=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,c,s){if(!s.length)return t;let d=document.createDocumentFragment();for(let u of s){if(!u||!u.slot){r&&d.appendChild(u);continue}let l=u.slot,m=n[l];O(u,"remove","slot"),m&&(m.replaceWith(u),Reflect.deleteProperty(n,l))}return r&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(u=>u.replaceWith(y().append(...Array.from(u.childNodes)))),t}}),t}y.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(`<dde:mark ${t}${$.ssr}${n}>`);return e||(r.end=document.createComment("</dde:mark>")),r};function Et(t){let e=this;return function(...r){j=t;let o=y.call(e,...r);return j=void 0,o}}var{setDeleteAttr:I}=$,L=new WeakMap;function P(t,...e){if(!e.length)return t;L.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return L.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,u)=>Z.call(c,t,d,u));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(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 I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,t[e]));case"ariaset":return F(o,n,(d,u)=>r("aria-"+d,u));case"classList":return nt.call(c,t,n)}return rt(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?ct:ot).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function nt(t,e){let n=C(this);return F(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function xt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function O(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function rt(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!x(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function F(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 K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function ot(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,K(r))}function ct(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function wt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function v(t,e,Line truncated
+var R={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function $(t,e=!0){return e?Object.assign(R,t):(Object.setPrototypeOf(t,R),t)}function N(t){return R.isPrototypeOf(t)&&t!==R?t:R}function x(t){return typeof t>"u"}function H(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function P(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var F={setDeleteAttr:et,ssr:""};function et(t,e,n){if(Reflect.set(t,e,n),!!x(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,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],b={get current(){return v[v.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...v]},push(t={}){return v.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return v.push(v[0])},pop(){if(v.length!==1)return v.pop()}};function I(...t){return this.appendOriginal(...t),this}function nt(t){return t.append===I||(t.appendOriginal=t.append,t.append=I),t}var L;function y(t,e,...n){let r=N(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,b.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(m=>m(s)),void 0):s}),c=t(e||void 0);let d=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let u=y.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(u),d&&(s=u);break}case t==="#text":c=j.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=j.call(this,document.createDocumentFragment(),e);break;case!!L:c=j.call(this,document.createElementNS(L,t),e);break;case!c:c=j.call(this,document.createElement(t),e)}return nt(c),s||(s=c),n.forEach(d=>d(s)),o&&b.pop(),o=2,c}function Et(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,c)=>Reflect.set(o,c.name||e,c)&&o,{}),r=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,c,s){if(!s.length)return t;let d=document.createDocumentFragment();for(let u of s){if(!u||!u.slot){r&&d.appendChild(u);continue}let l=u.slot,m=n[l];w(u,"remove","slot"),m&&(m.replaceWith(u),Reflect.deleteProperty(n,l))}return r&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(u=>u.replaceWith(y().append(...Array.from(u.childNodes)))),t}}),t}y.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(`<dde:mark ${t}${F.ssr}${n}>`);return e||(r.end=document.createComment("</dde:mark>")),r};function xt(t){let e=this;return function(...r){L=t;let o=y.call(e,...r);return L=void 0,o}}var{setDeleteAttr:J}=F,D=new WeakMap;function j(t,...e){if(!e.length)return t;D.set(t,V(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))G.call(this,t,n,r);return D.delete(t),t}function G(t,e,n){let{setRemoveAttr:r,s:o}=V(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,u)=>G.call(c,t,d,u));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 z(o,n,Z.bind(null,t[e]));case"ariaset":return z(o,n,(d,u)=>r("aria-"+d,u));case"classList":return rt.call(c,t,n)}return ot(t,e)?J(t,e,n):r(e,n)}function V(t,e){if(D.has(t))return D.get(t);let r=(t instanceof SVGElement?st:ct).bind(null,t,"Attribute"),o=N(e);return{setRemoveAttr:r,s:o}}function rt(t,e){let n=N(this);return z(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ot(t){return Array.from(t.children).forEach(e=>e.remove()),t}function w(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function ot(t,e){if(!Reflect.has(t,e))return!1;let n=K(t,e);return!x(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 z(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 ct(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,Q(r))}function st(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,Q(r))}function Z(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function At(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,Line truncated
-* Investigate `__dde_attributes` key of the element.*/let[d,u]=s,l=r[R][d];if(l)return l(u)})(r),v.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`).
+* Investigate `__dde_attributes` key of the element.*/let[d,u]=s,l=r[S][d];if(l)return l(u)})(r),_.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`).
-* Investigate `__dde_attributes` key of the element.*/_.clear(...Object.values(r[R]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let d=s[0];return O(r,"set",t,d)}})};var X={isObservable:W,processReactiveAttribute(t,e,n,r){if(!W(n))return n;let o=c=>r(e,c);return U(n,o),Y(n,o,t,e),n()}};function Y(t,e,...n){let{current:r}=g;r.prevent||r.host(function(o){o[k]||(o[k]=[],v.disconnected(()=>o[k].forEach(([[c,s]])=>S(c,s,c[p]?.host()===o)))(o)),o[k].push([[t,e],...n])})}function Q(t,e){let n=(...r)=>r.length?lt(n,...r):dt(n);return ut(n,t,e)}var ft=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[e,...n]=this.stack.split(`
+* Investigate `__dde_attributes` key of the element.*/O.clear(...Object.values(r[S]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let d=s[0];return w(r,"set",t,d)}})};var Y={isObservable:M,processReactiveAttribute(t,e,n,r){if(!M(n))return n;let o=c=>r(e,c);return B(n,o),tt(n,o,t,e),n()}};function tt(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[W]||(o[W]=[],_.disconnected(()=>o[W].forEach(([[c,s]])=>C(c,s,c[p]?.host()===o)))(o)),o[W].push([[t,e],...n])})}function X(t,e){let n=(...r)=>r.length?pt(n,...r):lt(n);return at(n,t,e)}var ut=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),U=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 ut(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=t.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=g;return Reflect.defineProperty(t,p,{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[p],ft),t}function at(){return M[M.length-1]}function dt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=at();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function lt(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 U(t,e){if(t[p])return t[p].listeners.add(e)}function S(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(t.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}T(X);export{_ as O,P as assign,Z as assignAttribute,et as chainableAppend,nt as classListDeclarative,y as createElement,Et as createElementNS,wt as dispatchEvent,y as el,Et as elNS,O as elementAttribute,xt as empty,W as isObservable,_ as observable,v as on,T as registerReactivity,g as scope,vt as simulateSlots};
+`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function at(t,e,n){let r=[];H(n)!=="[object Object]"&&(n={});let{onclear:o}=O.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 U},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],ut),t}function dt(){return T[T.length-1]}function lt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=dt();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function pt(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 B(t,e){if(t[p])return t[p].listeners.add(e)}function C(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(t.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>C(s,c,!0))}return o}$(Y);export{E as O,j as assign,G as assignAttribute,nt as chainableAppend,rt as classListDeclarative,y as createElement,xt as createElementNS,At as dispatchEvent,y as el,xt as elNS,w as elementAttribute,Ot as empty,M as isObservable,E as observable,_ as on,$ as registerReactivity,b as scope,Et as simulateSlots};

docs/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a&nbsp;library."><title>`deka-dom-el` — Introduction</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://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` — Introduction</h1><p>Introducing a&nbsp;library.</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." class="current">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></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.</p><p>We start with creating and modifying a&nbsp;static elements and end up with UI templates. <i>From <code>document.createElement</code> to <code>el</code>.</i> Then we go through the native events system and the way to include it declaratively in UI templates. <i>From <code>element.addEventListener</code> to <code>on</code>.</i></p><p>Next step is providing interactivity not only for our UI templates. We introduce observables (<code>O</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the observables are incorporated into our templates with regard to application performance. This is not the only reason the library uses <code>scope</code>s. We will look at how they work in components represented in JavaScript by functions.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-exquzbx4inc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
-import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
+import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
-const clicks= S(0);
+const clicks= O(0);
 document.body.append(
 	el().append(
-		el("p", S(()=&gt;
+		el("p", O(()=&gt;
 			"Hello World "+"🎉".repeat(clicks())
 		)),
 		el("button", {
@@ -13,4 +13,4 @@ document.body.append(
 		})
 	)
 );
-</code></div><script>Flems(document.getElementById("code-example-1-exquzbx4inc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nimport { S } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.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><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--><a rel="next" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Elements</a></div></main></body></html>
+</code></div><script>Flems(document.getElementById("code-example-1-exquzbx4inc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nimport { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nconst clicks= O(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", O(()=>\\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><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--><a rel="next" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Elements</a></div></main></body></html>

docs_src/components/examples/helloWorld.js

@@ -1,9 +1,9 @@
 import { el } from "deka-dom-el";
-import { S } from "deka-dom-el/observables";
+import { O } from "deka-dom-el/observables";
-const clicks= S(0);
+const clicks= O(0);
 document.body.append(
 	el().append(
-		el("p", S(()=>
+		el("p", O(()=>
 			"Hello World "+"🎉".repeat(clicks())
 		)),
 		el("button", {

src/observables-lib.js

@@ -116,7 +116,7 @@ import { on } from "./events.js";
 const key_attributes= "__dde_attributes";
 observable.attribute= function(name, initial= null){
 	//TODO host=element & reuse existing
-	const out= observable(initial);
+	const out= O(initial);
 	let element;
 	scope.host(el=> {
 		element= el;
@@ -138,7 +138,7 @@ observable.attribute= function(name, initial= null){
 		on.disconnected(function(){
 			/*! This removes all observables mapped to attributes (`S.attribute`).
 			 * Investigate `__dde_attributes` key of the element.*/
-			observable.clear(...Object.values(element[key_attributes]));
+			O.clear(...Object.values(element[key_attributes]));
 		})(element);
 	});
 	return new Proxy(out, {
@@ -202,7 +202,7 @@ function toObservable(observable, value, actions){
 	const onclear= [];
 	if(typeOf(actions)!=="[object Object]")
 		actions= {};
-	const { onclear: ocs }= observable.symbols;
+	const { onclear: ocs }= O.symbols;
 	if(actions[ocs]){
 		onclear.push(actions[ocs]);
 		Reflect.deleteProperty(actions, ocs);