From 2e4e6adec11d216e219e0ca1242b6fc028b570e9 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Fri, 5 Jan 2024 12:43:49 +0100 Subject: [PATCH] :boom: `observedAttributes` --- dist/dde-with-observables.js | 43 +++++++++--------- dist/dde.js | 29 +++++++------ dist/esm-with-observables.js | 8 ++-- dist/esm.js | 2 +- docs/p04-observables.html | 4 +- examples/components/webComponent.js | 22 ++++++---- package.json | 5 ++- src/customElement.js | 19 ++------ src/events.js | 1 + src/helpers.js | 9 ++++ src/observables-lib.js | 67 ++++++++++++++--------------- 11 files changed, 105 insertions(+), 104 deletions(-) diff --git a/dist/dde-with-observables.js b/dist/dde-with-observables.js index 72528c0..2d874f4 100644 --- a/dist/dde-with-observables.js +++ b/dist/dde-with-observables.js @@ -1,30 +1,31 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var w={isObservable(e){return!1},processReactiveAttribute(e,t,n,r){return n}};function M(e,t=!0){return t?Object.assign(w,e):(Object.setPrototypeOf(e,w),e)}function N(e){return w.isPrototypeOf(e)&&e!==w?e:w}function x(e){return typeof e>"u"}function B(e){let t=typeof e;return t!=="object"?t:e===null?"null":Object.prototype.toString.call(e)}function P(e,t){if(!e||!(e instanceof AbortSignal))return!0;if(!e.aborted)return e.addEventListener("abort",t),function(){e.removeEventListener("abort",t)}}var $={setDeleteAttr:te,ssr:""};function te(e,t,n){if(Reflect.set(e,t,n),!!x(n)){if(Reflect.deleteProperty(e,t),e instanceof HTMLElement&&e.getAttribute(t)==="undefined")return e.removeAttribute(t);if(Reflect.get(e,t)==="undefined")return Reflect.set(e,t,"")}}var y=[{scope:document.body,host:e=>e?e(document.body):document.body,custom_element:!1,prevent:!0}],p={get current(){return y[y.length-1]},get host(){return this.current.host},preventDefault(){let{current:e}=this;return e.prevent=!0,e},get state(){return[...y]},push(e={}){return y.push(Object.assign({},this.current,{prevent:!1},e))},pushRoot(){return y.push(y[0])},pop(){if(y.length!==1)return y.pop()}};function H(...e){return this.appendOriginal(...e),this}function ne(e){return e.append===H||(e.appendOriginal=e.append,e.append=H),e}var L;function R(e,t,...n){let r=N(this),o=0,c,s;switch((Object(t)!==t||r.isObservable(t))&&(t={textContent:t}),!0){case typeof e=="function":{o=1,p.push({scope:e,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(b=>b(s)),void 0):s}),c=e(t||void 0);let u=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=R.mark({type:"component",name:e.name,host:u?"this":"parentElement"});c.prepend(d),u&&(s=d);break}case e==="#text":c=A.call(this,document.createTextNode(""),t);break;case(e==="<>"||!e):c=A.call(this,document.createDocumentFragment(),t);break;case!!L:c=A.call(this,document.createElementNS(L,e),t);break;case!c:c=A.call(this,document.createElement(e),t)}return ne(c),s||(s=c),n.forEach(u=>u(s)),o&&p.pop(),o=2,c}function xe(e,t=e,n=void 0){let r=Symbol.for("default"),o=Array.from(t.querySelectorAll("slot")).reduce((s,u)=>Reflect.set(s,u.name||r,u)&&s,{}),c=Reflect.has(o,r);if(e.append=new Proxy(e.append,{apply(s,u,d){if(!d.length)return e;let l=document.createDocumentFragment();for(let b of d){if(!b||!b.slot){c&&l.appendChild(b);continue}let i=b.slot,f=o[i];_(b,"remove","slot"),f&&(re(f,b,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),e.append=s,e}}),e!==t){let s=Array.from(e.childNodes);s.forEach(u=>u.remove()),e.append(...s)}return t}function re(e,t,n){n&&n(e,t);try{e.replaceWith(A(t,{className:[t.className,e.className],dataset:{...e.dataset}}))}catch{e.replaceWith(t)}}R.mark=function(e,t=!1){e=Object.entries(e).map(([o,c])=>o+`="${c}"`).join(" ");let n=t?"":"/",r=document.createComment(``);return t||(r.end=document.createComment("")),r};function _e(e){let t=this;return function(...r){L=e;let o=R.call(t,...r);return L=void 0,o}}var{setDeleteAttr:I}=$,j=new WeakMap;function A(e,...t){if(!t.length)return e;j.set(e,G(e,this));for(let[n,r]of Object.entries(Object.assign({},...t)))Z.call(this,e,n,r);return j.delete(e),e}function Z(e,t,n){let{setRemoveAttr:r,s:o}=G(e,this),c=this;n=o.processReactiveAttribute(e,t,n,(u,d)=>Z.call(c,e,u,d));let[s]=t;if(s==="=")return r(t.slice(1),n);if(s===".")return J(e,t.slice(1),n);if(/(aria|data)([A-Z])/.test(t))return t=t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(t,n);switch(t==="className"&&(t="class"),t){case"xlink:href":return r(t,n,"http://www.w3.org/1999/xlink");case"textContent":return I(e,t,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,e[t]));case"ariaset":return F(o,n,(u,d)=>r("aria-"+u,d));case"classList":return oe.call(c,e,n)}return ce(e,t)?I(e,t,n):r(t,n)}function G(e,t){if(j.has(e))return j.get(e);let r=(e instanceof SVGElement?ie:se).bind(null,e,"Attribute"),o=N(t);return{setRemoveAttr:r,s:o}}function oe(e,t){let n=N(this);return F(n,t,(r,o)=>e.classList.toggle(r,o===-1?void 0:!!o)),e}function Oe(e){return Array.from(e.children).forEach(t=>t.remove()),e}function _(e,t,n,r){return e instanceof HTMLElement?e[t+"Attribute"](n,r):e[t+"AttributeNS"](null,n,r)}function ce(e,t){if(!Reflect.has(e,t))return!1;let n=V(e,t);return!x(n.set)}function V(e,t){if(e=Object.getPrototypeOf(e),!e)return{};let n=Object.getOwnPropertyDescriptor(e,t);return n||V(e,t)}function F(e,t,n){if(!(typeof t!="object"||t===null))return Object.entries(t).forEach(function([o,c]){o&&(c=e.processReactiveAttribute(t,o,c,n),n(o,c))})}function K(e){return Array.isArray(e)?e.filter(Boolean).join(" "):e}function se(e,t,n,r){return e[(x(r)?"remove":"set")+t](n,K(r))}function ie(e,t,n,r,o=null){return e[(x(r)?"remove":"set")+t+"NS"](o,n,K(r))}function J(e,t,n){if(Reflect.set(e,t,n),!!x(n))return Reflect.deleteProperty(e,t)}function Se(e,t,n=e){p.push({scope:e,host:(...o)=>o.length?o.forEach(c=>c(e)):e,custom_element:e});let r=t.call(e,n);return p.pop(),r}function Ce(e){for(let n of["connected","disconnected"])Q(e.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let t="attributeChanged";return Q(e.prototype,t+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+t,{detail:[c,s]})),n.apply(r,o)}),e.prototype.__dde_lifecycleToEvents=!0,e}function Q(e,t,n){e[t]=new Proxy(e[t]||(()=>{}),{apply:n})}function Pe(e,t,n){return t||(t={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(e,Object.assign({detail:c[0]},t)):new Event(e,t);return o.dispatchEvent(s)}}function E(e,t,n){return function(o){return o.addEventListener(e,t,n),o}}var D=ue(),fe=new WeakSet;E.connected=function(e,t){let{custom_element:n}=p.current,r="connected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(P(t.signal,()=>D.offConnected(c,e))&&D.onConnected(c,e),c)}};E.disconnected=function(e,t){let{custom_element:n}=p.current,r="disconnected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents||P(t.signal,()=>D.offDisconnected(c,e))&&D.onDisconnected(c,e),c}};var z=new WeakMap;E.disconnectedAsAbort=function(e){if(z.has(e))return z.get(e);let t=new AbortController;return z.set(e,t),e(E.disconnected(()=>t.abort())),t};E.attributeChanged=function(e,t){let n="attributeChanged";return typeof t!="object"&&(t={}),function(o){let c="dde:"+n;if(o.addEventListener(c,e,t),o.__dde_lifecycleToEvents||fe.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:b}of d)b.dispatchEvent(new CustomEvent(c,{detail:[l,b.getAttribute(l)]}))});return P(t.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function ue(){let e=new Map,t=!1,n=new MutationObserver(function(i){for(let f of i)if(f.type==="childList"){if(l(f.addedNodes,!0)){s();continue}b(f.removedNodes,!0)&&s()}});return{onConnected(i,f){c();let a=o(i);a.connected.has(f)||(a.connected.add(f),a.length_c+=1)},offConnected(i,f){if(!e.has(i))return;let a=e.get(i);a.connected.has(f)&&(a.connected.delete(f),a.length_c-=1,r(i,a))},onDisconnected(i,f){c();let a=o(i);a.disconnected.has(f)||(a.disconnected.add(f),a.length_d+=1)},offDisconnected(i,f){if(!e.has(i))return;let a=e.get(i);a.disconnected.has(f)&&(a.disconnected.delete(f),a.length_d-=1,r(i,a))}};function r(i,f){f.length_c||f.length_d||(e.delete(i),s())}function o(i){if(e.has(i))return e.get(i);let f={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return e.set(i,f),f}function c(){t||(t=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!t||e.size||(t=!1,n.disconnect())}function u(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){e.size>30&&await u();let f=[];if(!(i instanceof Node))return f;for(let a of e.keys())a===i||!(a instanceof Node)||i.contains(a)&&f.push(a);return f}function l(i,f){let a=!1;for(let v of i){if(f&&d(v).then(l),!e.has(v))continue;let O=e.get(v);O.length_c&&(v.dispatchEvent(new Event("dde:connected")),O.connected=new WeakSet,O.length_c=0,O.length_d||e.delete(v),a=!0)}return a}function b(i,f){let a=!1;for(let v of i)f&&d(v).then(b),!(!e.has(v)||!e.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),e.delete(v),a=!0);return a}}var h=Symbol.for("observable");function W(e){try{return Reflect.has(e,h)}catch{return!1}}var T=[],g=new WeakMap;function m(e,t){if(typeof e!="function")return X(e,t);if(W(e))return e;let n=X(),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),T.push(r),n(e()),T.pop(),!c.length)return;let s=g.get(r);for(let u of c)s.has(u)||C(u,r)};return g.set(n[h],r),g.set(r,new Set([n])),r(),n}m.action=function(e,t,...n){let r=e[h],{actions:o}=r;if(!o||!Reflect.has(o,t))throw new Error(`'${e}' has no action with name '${t}'!`);if(o[t].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function e(t,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(t))return t.forEach(c=>e(c,n,r));U(t,n),o&&o.addEventListener("abort",()=>C(t,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.clear=function(...e){for(let n of e){Reflect.deleteProperty(n,"toJSON");let r=n[h];r.onclear.forEach(o=>o.call(r)),t(n,r),Reflect.deleteProperty(n,h)}function t(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var k="__dde_reactive";m.el=function(e,t){let n=R.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=p,s=u=>{if(!n.parentNode||!r.parentNode)return C(e,s);p.push(c);let d=t(u);p.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return U(e,s),ee(e,s,n,t),s(e()),o};var S="__dde_attributes";m.attribute=function(e,t=null){let n=m(t),r;return p.host(o=>{if(r=o,_(r,"has",e)?n(_(r,"get",e)):t!==null&&_(r,"set",e,t),o[S]){o[S][e]=n;return}r[S]={[e]:n},E.attributeChanged(function({detail:s}){/*! This maps attributes to observables (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/let[u,d]=s,l=r[S][u];if(l)return l(d)})(r),E.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(r[S]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let u=s[0];return _(r,"set",e,u)}})};var Y={isObservable:W,processReactiveAttribute(e,t,n,r){if(!W(n))return n;let o=c=>r(t,c);return U(n,o),ee(n,o,e,t),n()}};function ee(e,t,...n){let{current:r}=p;r.prevent||r.host(function(o){o[k]||(o[k]=[],E.disconnected(()=>o[k].forEach(([[c,s]])=>C(c,s,c[h]?.host()===o)))(o)),o[k].push([[e,t],...n])})}function X(e,t){let n=(...r)=>r.length?he(n,...r):pe(n);return de(n,e,t)}var ae=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[t,...n]=this.stack.split(` -`),r=t.slice(t.indexOf("@"),t.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function de(e,t,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=p;return Reflect.defineProperty(e,h,{value:{value:t,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),e.toJSON=()=>e(),Object.setPrototypeOf(e[h],ae),e}function le(){return T[T.length-1]}function pe(e){if(!e[h])return;let{value:t,listeners:n}=e[h],r=le();return r&&n.add(r),g.has(r)&&g.get(r).add(e),t}function he(e,t,n){if(!e[h])return;let r=e[h];if(!(!n&&r.value===t))return r.value=t,r.listeners.forEach(o=>o(t)),t}function U(e,t){if(e[h])return e[h].listeners.add(t)}function C(e,t,n){let r=e[h];if(!r)return;let o=r.listeners.delete(t);if(n&&!r.listeners.size){if(e.clear(e),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>C(s,c,!0))}return o}M(Y); +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 y(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 S(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function N(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,ot(o),e(t,o)),r},{})}function ot(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var M={setDeleteAttr:ct,ssr:""};function ct(t,e,n){if(Reflect.set(t,e,n),!!y(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 x=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],b={get current(){return x[x.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function H(...t){return this.appendOriginal(...t),this}function st(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var P;function w(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,b.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(h=>h(s)),void 0):s}),c=t(e||void 0);let a=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=w.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(d),a&&(s=d);break}case t==="#text":c=O.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=O.call(this,document.createDocumentFragment(),e);break;case!!P:c=O.call(this,document.createElementNS(P,t),e);break;case!c:c=O.call(this,document.createElement(t),e)}return st(c),s||(s=c),n.forEach(a=>a(s)),o&&b.pop(),o=2,c}function wt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||r,a)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let h of d){if(!h||!h.slot){c&&l.appendChild(h);continue}let i=h.slot,u=o[i];ft(h,"remove","slot"),u&&(it(u,h,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function it(t,e,n){n&&n(t,e);try{t.replaceWith(O(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}w.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(``);return e||(r.end=document.createComment("")),r};function Rt(t){let e=this;return function(...r){P=t;let o=w.call(e,...r);return P=void 0,o}}var{setDeleteAttr:I}=M,j=new WeakMap;function O(t,...e){if(!e.length)return t;j.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return j.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>Z.call(c,t,a,d));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 $(o,n,J.bind(null,t[e]));case"ariaset":return $(o,n,(a,d)=>r("aria-"+a,d));case"classList":return ut.call(c,t,n)}return at(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(j.has(t))return j.get(t);let r=(t instanceof SVGElement?lt:dt).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function ut(t,e){let n=C(this);return $(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ct(t){return Array.from(t.children).forEach(e=>e.remove()),t}function ft(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function at(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!y(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 $(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 dt(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,K(r))}function lt(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function jt(t,e,n=pt){b.push({scope:t,host:(...o)=>o.length?o.forEach(c=>c(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let r=e.call(t,n);return b.pop(),r}function kt(t){for(let n of["connected","disconnected"])Q(t.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return Q(t.prototype,e+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+e,{detail:[c,s]})),n.apply(r,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function Q(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function pt(t){return N(t,(e,n)=>e.getAttribute(n))}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 E(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var k=bt(),ht=new WeakSet;E.connected=function(t,e){let{custom_element:n}=b.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(S(e.signal,()=>k.offConnected(c,t))&&k.onConnected(c,t),c)}};E.disconnected=function(t,e){let{custom_element:n}=b.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||S(e.signal,()=>k.offDisconnected(c,t))&&k.onDisconnected(c,t),c}};var F=new WeakMap;E.disconnectedAsAbort=function(t){if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(E.disconnected(()=>e.abort())),e};E.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||ht.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:h}of d)h.dispatchEvent(new CustomEvent(c,{detail:[l,h.getAttribute(l)]}))});return S(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function bt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}h(u.removedNodes,!0)&&s()}});return{onConnected(i,u){c();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,r(i,f))},onDisconnected(i,u){c();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,r(i,f))}};function r(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let v of i){if(u&&d(v).then(l),!t.has(v))continue;let _=t.get(v);_.length_c&&(v.dispatchEvent(new Event("dde:connected")),_.connected=new WeakSet,_.length_c=0,_.length_d||t.delete(v),f=!0)}return f}function h(i,u){let f=!1;for(let v of i)u&&d(v).then(h),!(!t.has(v)||!t.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),t.delete(v),f=!0);return f}}var p=Symbol.for("observable");function D(t){try{return Reflect.has(t,p)}catch{return!1}}var W=[],g=new WeakMap;function m(t,e){if(typeof t!="function")return X(!1,t,e);if(D(t))return t;let n=X(!0),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),W.push(r),rt(n,t()),W.pop(),!c.length)return;let s=g.get(r);for(let a of c)s.has(a)||R(a,r)};return g.set(n[p],r),g.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));q(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.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),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var L="__dde_reactive";m.el=function(t,e){let n=w.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return R(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return q(t,s),et(t,s,n,e),s(t()),o};function gt(t,e){let n=(...r)=>r.length?t.setAttribute(e,...r):t.getAttribute(e);return n.attribute=e,n}var z="__dde_attributes";m.observedAttributes=function(t){let e=N(t,gt),n=t[z]={},r={_set(o){this.value=o}};return Object.keys(e).forEach(o=>{let c=e[o]=nt(e[o],e[o](),r);n[c.attribute]=c}),E.attributeChanged(function({detail:c}){/*! This maps attributes to observables (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=t[z][s];if(d)return m.action(d,"_set",a)})(t),E.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(t[z]))})(t),e};var tt={isObservable:D,processReactiveAttribute(t,e,n,r){if(!D(n))return n;let o=c=>r(e,c);return q(n,o),et(n,o,t,e),n()}};function et(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[L]||(o[L]=[],E.disconnected(()=>o[L].forEach(([[c,s]])=>R(c,s,c[p]?.host()===o)))(o)),o[L].push([[t,e],...n])})}function X(t,e,n){let r=t?()=>Y(r):(...o)=>o.length?rt(r,...o):Y(r);return nt(r,e,n)}var vt=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 nt(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.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],vt),t}function mt(){return W[W.length-1]}function Y(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=mt();return r&&n.add(r),g.has(r)&&g.get(r).add(t),e}function rt(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 q(t,e){if(t[p])return t[p].listeners.add(e)}function R(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),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>R(s,c,!0))}return o}T(tt); globalThis.dde= {O: m, -assign: A, +assign: O, assignAttribute: Z, -chainableAppend: ne, -classListDeclarative: oe, -createElement: R, -createElementNS: _e, -customElementRender: Se, -customElementWithDDE: Ce, -dispatchEvent: Pe, -el: R, -elNS: _e, -elementAttribute: _, -empty: Oe, -isObservable: W, -lifecycleToEvents: Ce, +chainableAppend: st, +classListDeclarative: ut, +createElement: w, +createElementNS: Rt, +customElementRender: jt, +customElementWithDDE: kt, +dispatchEvent: Wt, +el: w, +elNS: Rt, +elementAttribute: ft, +empty: Ct, +isObservable: D, +lifecycleToEvents: kt, observable: m, +observedAttributes: pt, on: E, -registerReactivity: M, -scope: p, -simulateSlots: xe +registerReactivity: T, +scope: b, +simulateSlots: wt }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index d1540de..21c4c2d 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,24 +1,25 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function y(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function w(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:F,ssr:""};function F(t,e,n){if(Reflect.set(t,e,n),!!v(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 b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function L(...t){return this.appendOriginal(...t),this}function U(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var A;function N(t,e,...n){let c=y(this),o=0,r,s;switch((Object(e)!==e||c.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(p=>p(s)),void 0):s}),r=t(e||void 0);let a=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});r.prepend(d),a&&(s=d);break}case t==="#text":r=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=x.call(this,document.createDocumentFragment(),e);break;case!!A:r=x.call(this,document.createElementNS(A,t),e);break;case!r:r=x.call(this,document.createElement(t),e)}return U(r),s||(s=r),n.forEach(a=>a(s)),o&&g.pop(),o=2,r}function nt(t,e=t,n=void 0){let c=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),r=Reflect.has(o,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){r&&l.appendChild(p);continue}let i=p.slot,u=o[i];H(p,"remove","slot"),u&&(z(u,p,n),Reflect.deleteProperty(o,i))}return r&&(o[c].replaceWith(l),Reflect.deleteProperty(o,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function z(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function rt(t){let e=this;return function(...c){A=t;let o=N.call(e,...c);return A=void 0,o}}var{setDeleteAttr:P}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,T(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))j.call(this,t,n,c);return C.delete(t),t}function j(t,e,n){let{setRemoveAttr:c,s:o}=T(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>j.call(r,t,a,d));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return W(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return P(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(o,n,W.bind(null,t[e]));case"ariaset":return S(o,n,(a,d)=>c("aria-"+a,d));case"classList":return B.call(r,t,n)}return I(t,e)?P(t,e,n):c(e,n)}function T(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?G:Z).bind(null,t,"Attribute"),o=y(e);return{setRemoveAttr:c,s:o}}function B(t,e){let n=y(this);return S(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function ot(t){return Array.from(t.children).forEach(e=>e.remove()),t}function H(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function I(t,e){if(!Reflect.has(t,e))return!1;let n=M(t,e);return!v(n.set)}function M(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||M(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Z(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,$(c))}function G(t,e,n,c,o=null){return t[(v(c)?"remove":"set")+e+"NS"](o,n,$(c))}function W(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function ut(t,e,n=t){g.push({scope:t,host:(...o)=>o.length?o.forEach(r=>r(t)):t,custom_element:t});let c=e.call(t,n);return g.pop(),c}function ft(t){for(let n of["connected","disconnected"])k(t.prototype,n+"Callback",function(c,o,r){c.apply(o,r),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return k(t.prototype,e+"Callback",function(n,c,o){let[r,,s]=o;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[r,s]})),n.apply(c,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function k(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function dt(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let s=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var O=J(),V=new WeakSet;_.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(s)),r):(w(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents||w(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};var D=new WeakMap;_.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||V.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(r,{detail:[l,p.getAttribute(l)]}))});return w(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function J(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){r();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){r();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}} +var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function _(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function y(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function L(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(c,r){return Reflect.set(c,F(r),e(t,r)),c},{})}function F(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var R={setDeleteAttr:z,ssr:""};function z(t,e,n){if(Reflect.set(t,e,n),!!v(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 b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function P(...t){return this.appendOriginal(...t),this}function B(t){return t.append===P||(t.appendOriginal=t.append,t.append=P),t}var w;function N(t,e,...n){let c=_(this),r=0,o,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{r=1,g.push({scope:t,host:(...l)=>l.length?(r===1?n.unshift(...l):l.forEach(p=>p(s)),void 0):s}),o=t(e||void 0);let a=o instanceof DocumentFragment;if(o.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});o.prepend(d),a&&(s=d);break}case t==="#text":o=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):o=x.call(this,document.createDocumentFragment(),e);break;case!!w:o=x.call(this,document.createElementNS(w,t),e);break;case!o:o=x.call(this,document.createElement(t),e)}return B(o),s||(s=o),n.forEach(a=>a(s)),r&&g.pop(),r=2,o}function ct(t,e=t,n=void 0){let c=Symbol.for("default"),r=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),o=Reflect.has(r,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){o&&l.appendChild(p);continue}let i=p.slot,u=r[i];Z(p,"remove","slot"),u&&(H(u,p,n),Reflect.deleteProperty(r,i))}return o&&(r[c].replaceWith(l),Reflect.deleteProperty(r,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function H(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([r,o])=>r+`="${o}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function st(t){let e=this;return function(...c){w=t;let r=N.call(e,...c);return w=void 0,r}}var{setDeleteAttr:W}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,M(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))T.call(this,t,n,c);return C.delete(t),t}function T(t,e,n){let{setRemoveAttr:c,s:r}=M(t,this),o=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>T.call(o,t,a,d));let[s]=e;if(s==="=")return c(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(),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 W(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(r,n,j.bind(null,t[e]));case"ariaset":return S(r,n,(a,d)=>c("aria-"+a,d));case"classList":return I.call(o,t,n)}return G(t,e)?W(t,e,n):c(e,n)}function M(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?J:V).bind(null,t,"Attribute"),r=_(e);return{setRemoveAttr:c,s:r}}function I(t,e){let n=_(this);return S(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function it(t){return Array.from(t.children).forEach(e=>e.remove()),t}function Z(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function G(t,e){if(!Reflect.has(t,e))return!1;let n=$(t,e);return!v(n.set)}function $(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||$(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,o]){r&&(o=t.processReactiveAttribute(e,r,o,n),n(r,o))})}function k(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function V(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,k(c))}function J(t,e,n,c,r=null){return t[(v(c)?"remove":"set")+e+"NS"](r,n,k(c))}function j(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function dt(t,e,n=K){g.push({scope:t,host:(...r)=>r.length?r.forEach(o=>o(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let c=e.call(t,n);return g.pop(),c}function pt(t){for(let n of["connected","disconnected"])U(t.prototype,n+"Callback",function(c,r,o){c.apply(r,o),r.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return U(t.prototype,e+"Callback",function(n,c,r){let[o,,s]=r;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[o,s]})),n.apply(c,r)}),t.prototype.__dde_lifecycleToEvents=!0,t}function U(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function K(t){return L(t,(e,n)=>e.getAttribute(n))}function bt(t,e,n){return e||(e={}),function(r,...o){n&&(o.unshift(r),r=typeof n=="function"?n():n);let s=o.length?new CustomEvent(t,Object.assign({detail:o[0]},e)):new Event(t,e);return r.dispatchEvent(s)}}function A(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=X(),Q=new WeakSet;A.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(s)),o):(y(e.signal,()=>O.offConnected(o,t))&&O.onConnected(o,t),o)}};A.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents||y(e.signal,()=>O.offDisconnected(o,t))&&O.onDisconnected(o,t),o}};var D=new WeakMap;A.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(A.disconnected(()=>e.abort())),e};A.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let o="dde:"+n;if(r.addEventListener(o,t,e),r.__dde_lifecycleToEvents||Q.has(r))return r;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(o,{detail:[l,p.getAttribute(l)]}))});return y(e.signal,()=>s.disconnect())&&s.observe(r,{attributes:!0}),r}};function X(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){o();let f=r(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){o();let f=r(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function r(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function o(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}} globalThis.dde= {assign: x, -assignAttribute: j, -chainableAppend: U, -classListDeclarative: B, +assignAttribute: T, +chainableAppend: B, +classListDeclarative: I, createElement: N, -createElementNS: rt, -customElementRender: ut, -customElementWithDDE: ft, -dispatchEvent: dt, +createElementNS: st, +customElementRender: dt, +customElementWithDDE: pt, +dispatchEvent: bt, el: N, -elNS: rt, -elementAttribute: H, -empty: ot, -lifecycleToEvents: ft, -on: _, +elNS: st, +elementAttribute: Z, +empty: it, +lifecycleToEvents: pt, +observedAttributes: K, +on: A, registerReactivity: q, scope: g, -simulateSlots: nt +simulateSlots: ct }; })(); \ No newline at end of file diff --git a/dist/esm-with-observables.js b/dist/esm-with-observables.js index 6d845a0..00b01a9 100644 --- a/dist/esm-with-observables.js +++ b/dist/esm-with-observables.js @@ -1,4 +1,4 @@ -var w={isObservable(e){return!1},processReactiveAttribute(e,t,n,r){return n}};function M(e,t=!0){return t?Object.assign(w,e):(Object.setPrototypeOf(e,w),e)}function N(e){return w.isPrototypeOf(e)&&e!==w?e:w}function x(e){return typeof e>"u"}function B(e){let t=typeof e;return t!=="object"?t:e===null?"null":Object.prototype.toString.call(e)}function P(e,t){if(!e||!(e instanceof AbortSignal))return!0;if(!e.aborted)return e.addEventListener("abort",t),function(){e.removeEventListener("abort",t)}}var $={setDeleteAttr:te,ssr:""};function te(e,t,n){if(Reflect.set(e,t,n),!!x(n)){if(Reflect.deleteProperty(e,t),e instanceof HTMLElement&&e.getAttribute(t)==="undefined")return e.removeAttribute(t);if(Reflect.get(e,t)==="undefined")return Reflect.set(e,t,"")}}var y=[{scope:document.body,host:e=>e?e(document.body):document.body,custom_element:!1,prevent:!0}],p={get current(){return y[y.length-1]},get host(){return this.current.host},preventDefault(){let{current:e}=this;return e.prevent=!0,e},get state(){return[...y]},push(e={}){return y.push(Object.assign({},this.current,{prevent:!1},e))},pushRoot(){return y.push(y[0])},pop(){if(y.length!==1)return y.pop()}};function H(...e){return this.appendOriginal(...e),this}function ne(e){return e.append===H||(e.appendOriginal=e.append,e.append=H),e}var L;function R(e,t,...n){let r=N(this),o=0,c,s;switch((Object(t)!==t||r.isObservable(t))&&(t={textContent:t}),!0){case typeof e=="function":{o=1,p.push({scope:e,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(b=>b(s)),void 0):s}),c=e(t||void 0);let u=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=R.mark({type:"component",name:e.name,host:u?"this":"parentElement"});c.prepend(d),u&&(s=d);break}case e==="#text":c=A.call(this,document.createTextNode(""),t);break;case(e==="<>"||!e):c=A.call(this,document.createDocumentFragment(),t);break;case!!L:c=A.call(this,document.createElementNS(L,e),t);break;case!c:c=A.call(this,document.createElement(e),t)}return ne(c),s||(s=c),n.forEach(u=>u(s)),o&&p.pop(),o=2,c}function xe(e,t=e,n=void 0){let r=Symbol.for("default"),o=Array.from(t.querySelectorAll("slot")).reduce((s,u)=>Reflect.set(s,u.name||r,u)&&s,{}),c=Reflect.has(o,r);if(e.append=new Proxy(e.append,{apply(s,u,d){if(!d.length)return e;let l=document.createDocumentFragment();for(let b of d){if(!b||!b.slot){c&&l.appendChild(b);continue}let i=b.slot,f=o[i];_(b,"remove","slot"),f&&(re(f,b,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),e.append=s,e}}),e!==t){let s=Array.from(e.childNodes);s.forEach(u=>u.remove()),e.append(...s)}return t}function re(e,t,n){n&&n(e,t);try{e.replaceWith(A(t,{className:[t.className,e.className],dataset:{...e.dataset}}))}catch{e.replaceWith(t)}}R.mark=function(e,t=!1){e=Object.entries(e).map(([o,c])=>o+`="${c}"`).join(" ");let n=t?"":"/",r=document.createComment(``);return t||(r.end=document.createComment("")),r};function _e(e){let t=this;return function(...r){L=e;let o=R.call(t,...r);return L=void 0,o}}var{setDeleteAttr:I}=$,j=new WeakMap;function A(e,...t){if(!t.length)return e;j.set(e,G(e,this));for(let[n,r]of Object.entries(Object.assign({},...t)))Z.call(this,e,n,r);return j.delete(e),e}function Z(e,t,n){let{setRemoveAttr:r,s:o}=G(e,this),c=this;n=o.processReactiveAttribute(e,t,n,(u,d)=>Z.call(c,e,u,d));let[s]=t;if(s==="=")return r(t.slice(1),n);if(s===".")return J(e,t.slice(1),n);if(/(aria|data)([A-Z])/.test(t))return t=t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(t,n);switch(t==="className"&&(t="class"),t){case"xlink:href":return r(t,n,"http://www.w3.org/1999/xlink");case"textContent":return I(e,t,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,e[t]));case"ariaset":return F(o,n,(u,d)=>r("aria-"+u,d));case"classList":return oe.call(c,e,n)}return ce(e,t)?I(e,t,n):r(t,n)}function G(e,t){if(j.has(e))return j.get(e);let r=(e instanceof SVGElement?ie:se).bind(null,e,"Attribute"),o=N(t);return{setRemoveAttr:r,s:o}}function oe(e,t){let n=N(this);return F(n,t,(r,o)=>e.classList.toggle(r,o===-1?void 0:!!o)),e}function Oe(e){return Array.from(e.children).forEach(t=>t.remove()),e}function _(e,t,n,r){return e instanceof HTMLElement?e[t+"Attribute"](n,r):e[t+"AttributeNS"](null,n,r)}function ce(e,t){if(!Reflect.has(e,t))return!1;let n=V(e,t);return!x(n.set)}function V(e,t){if(e=Object.getPrototypeOf(e),!e)return{};let n=Object.getOwnPropertyDescriptor(e,t);return n||V(e,t)}function F(e,t,n){if(!(typeof t!="object"||t===null))return Object.entries(t).forEach(function([o,c]){o&&(c=e.processReactiveAttribute(t,o,c,n),n(o,c))})}function K(e){return Array.isArray(e)?e.filter(Boolean).join(" "):e}function se(e,t,n,r){return e[(x(r)?"remove":"set")+t](n,K(r))}function ie(e,t,n,r,o=null){return e[(x(r)?"remove":"set")+t+"NS"](o,n,K(r))}function J(e,t,n){if(Reflect.set(e,t,n),!!x(n))return Reflect.deleteProperty(e,t)}function Se(e,t,n=e){p.push({scope:e,host:(...o)=>o.length?o.forEach(c=>c(e)):e,custom_element:e});let r=t.call(e,n);return p.pop(),r}function Ce(e){for(let n of["connected","disconnected"])Q(e.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let t="attributeChanged";return Q(e.prototype,t+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+t,{detail:[c,s]})),n.apply(r,o)}),e.prototype.__dde_lifecycleToEvents=!0,e}function Q(e,t,n){e[t]=new Proxy(e[t]||(()=>{}),{apply:n})}function Pe(e,t,n){return t||(t={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(e,Object.assign({detail:c[0]},t)):new Event(e,t);return o.dispatchEvent(s)}}function E(e,t,n){return function(o){return o.addEventListener(e,t,n),o}}var D=ue(),fe=new WeakSet;E.connected=function(e,t){let{custom_element:n}=p.current,r="connected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(P(t.signal,()=>D.offConnected(c,e))&&D.onConnected(c,e),c)}};E.disconnected=function(e,t){let{custom_element:n}=p.current,r="disconnected";return typeof t!="object"&&(t={}),t.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,e,t),c.__dde_lifecycleToEvents||P(t.signal,()=>D.offDisconnected(c,e))&&D.onDisconnected(c,e),c}};var z=new WeakMap;E.disconnectedAsAbort=function(e){if(z.has(e))return z.get(e);let t=new AbortController;return z.set(e,t),e(E.disconnected(()=>t.abort())),t};E.attributeChanged=function(e,t){let n="attributeChanged";return typeof t!="object"&&(t={}),function(o){let c="dde:"+n;if(o.addEventListener(c,e,t),o.__dde_lifecycleToEvents||fe.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:b}of d)b.dispatchEvent(new CustomEvent(c,{detail:[l,b.getAttribute(l)]}))});return P(t.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function ue(){let e=new Map,t=!1,n=new MutationObserver(function(i){for(let f of i)if(f.type==="childList"){if(l(f.addedNodes,!0)){s();continue}b(f.removedNodes,!0)&&s()}});return{onConnected(i,f){c();let a=o(i);a.connected.has(f)||(a.connected.add(f),a.length_c+=1)},offConnected(i,f){if(!e.has(i))return;let a=e.get(i);a.connected.has(f)&&(a.connected.delete(f),a.length_c-=1,r(i,a))},onDisconnected(i,f){c();let a=o(i);a.disconnected.has(f)||(a.disconnected.add(f),a.length_d+=1)},offDisconnected(i,f){if(!e.has(i))return;let a=e.get(i);a.disconnected.has(f)&&(a.disconnected.delete(f),a.length_d-=1,r(i,a))}};function r(i,f){f.length_c||f.length_d||(e.delete(i),s())}function o(i){if(e.has(i))return e.get(i);let f={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return e.set(i,f),f}function c(){t||(t=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!t||e.size||(t=!1,n.disconnect())}function u(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){e.size>30&&await u();let f=[];if(!(i instanceof Node))return f;for(let a of e.keys())a===i||!(a instanceof Node)||i.contains(a)&&f.push(a);return f}function l(i,f){let a=!1;for(let v of i){if(f&&d(v).then(l),!e.has(v))continue;let O=e.get(v);O.length_c&&(v.dispatchEvent(new Event("dde:connected")),O.connected=new WeakSet,O.length_c=0,O.length_d||e.delete(v),a=!0)}return a}function b(i,f){let a=!1;for(let v of i)f&&d(v).then(b),!(!e.has(v)||!e.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),e.delete(v),a=!0);return a}}var h=Symbol.for("observable");function W(e){try{return Reflect.has(e,h)}catch{return!1}}var T=[],g=new WeakMap;function m(e,t){if(typeof e!="function")return X(e,t);if(W(e))return e;let n=X(),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),T.push(r),n(e()),T.pop(),!c.length)return;let s=g.get(r);for(let u of c)s.has(u)||C(u,r)};return g.set(n[h],r),g.set(r,new Set([n])),r(),n}m.action=function(e,t,...n){let r=e[h],{actions:o}=r;if(!o||!Reflect.has(o,t))throw new Error(`'${e}' has no action with name '${t}'!`);if(o[t].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function e(t,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(t))return t.forEach(c=>e(c,n,r));U(t,n),o&&o.addEventListener("abort",()=>C(t,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.clear=function(...e){for(let n of e){Reflect.deleteProperty(n,"toJSON");let r=n[h];r.onclear.forEach(o=>o.call(r)),t(n,r),Reflect.deleteProperty(n,h)}function t(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var k="__dde_reactive";m.el=function(e,t){let n=R.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=p,s=u=>{if(!n.parentNode||!r.parentNode)return C(e,s);p.push(c);let d=t(u);p.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return U(e,s),ee(e,s,n,t),s(e()),o};var S="__dde_attributes";m.attribute=function(e,t=null){let n=m(t),r;return p.host(o=>{if(r=o,_(r,"has",e)?n(_(r,"get",e)):t!==null&&_(r,"set",e,t),o[S]){o[S][e]=n;return}r[S]={[e]:n},E.attributeChanged(function({detail:s}){/*! This maps attributes to observables (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/let[u,d]=s,l=r[S][u];if(l)return l(d)})(r),E.disconnected(function(){/*! This removes all observables mapped to attributes (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(r[S]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let u=s[0];return _(r,"set",e,u)}})};var Y={isObservable:W,processReactiveAttribute(e,t,n,r){if(!W(n))return n;let o=c=>r(t,c);return U(n,o),ee(n,o,e,t),n()}};function ee(e,t,...n){let{current:r}=p;r.prevent||r.host(function(o){o[k]||(o[k]=[],E.disconnected(()=>o[k].forEach(([[c,s]])=>C(c,s,c[h]?.host()===o)))(o)),o[k].push([[e,t],...n])})}function X(e,t){let n=(...r)=>r.length?he(n,...r):pe(n);return de(n,e,t)}var ae=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[t,...n]=this.stack.split(` -`),r=t.slice(t.indexOf("@"),t.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function de(e,t,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=p;return Reflect.defineProperty(e,h,{value:{value:t,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),e.toJSON=()=>e(),Object.setPrototypeOf(e[h],ae),e}function le(){return T[T.length-1]}function pe(e){if(!e[h])return;let{value:t,listeners:n}=e[h],r=le();return r&&n.add(r),g.has(r)&&g.get(r).add(e),t}function he(e,t,n){if(!e[h])return;let r=e[h];if(!(!n&&r.value===t))return r.value=t,r.listeners.forEach(o=>o(t)),t}function U(e,t){if(e[h])return e[h].listeners.add(t)}function C(e,t,n){let r=e[h];if(!r)return;let o=r.listeners.delete(t);if(n&&!r.listeners.size){if(e.clear(e),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>C(s,c,!0))}return o}M(Y);export{m as O,A as assign,Z as assignAttribute,ne as chainableAppend,oe as classListDeclarative,R as createElement,_e as createElementNS,Se as customElementRender,Ce as customElementWithDDE,Pe as dispatchEvent,R as el,_e as elNS,_ as elementAttribute,Oe as empty,W as isObservable,Ce as lifecycleToEvents,m as observable,E as on,M as registerReactivity,p as scope,xe as simulateSlots}; +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 y(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 S(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function N(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return Reflect.set(r,ot(o),e(t,o)),r},{})}function ot(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var M={setDeleteAttr:ct,ssr:""};function ct(t,e,n){if(Reflect.set(t,e,n),!!y(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 x=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],b={get current(){return x[x.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function H(...t){return this.appendOriginal(...t),this}function st(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var P;function w(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,b.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(h=>h(s)),void 0):s}),c=t(e||void 0);let a=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=w.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(d),a&&(s=d);break}case t==="#text":c=O.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=O.call(this,document.createDocumentFragment(),e);break;case!!P:c=O.call(this,document.createElementNS(P,t),e);break;case!c:c=O.call(this,document.createElement(t),e)}return st(c),s||(s=c),n.forEach(a=>a(s)),o&&b.pop(),o=2,c}function wt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||r,a)&&s,{}),c=Reflect.has(o,r);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let h of d){if(!h||!h.slot){c&&l.appendChild(h);continue}let i=h.slot,u=o[i];ft(h,"remove","slot"),u&&(it(u,h,n),Reflect.deleteProperty(o,i))}return c&&(o[r].replaceWith(l),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function it(t,e,n){n&&n(t,e);try{t.replaceWith(O(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}w.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(``);return e||(r.end=document.createComment("")),r};function Rt(t){let e=this;return function(...r){P=t;let o=w.call(e,...r);return P=void 0,o}}var{setDeleteAttr:I}=M,j=new WeakMap;function O(t,...e){if(!e.length)return t;j.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return j.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>Z.call(c,t,a,d));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 $(o,n,J.bind(null,t[e]));case"ariaset":return $(o,n,(a,d)=>r("aria-"+a,d));case"classList":return ut.call(c,t,n)}return at(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(j.has(t))return j.get(t);let r=(t instanceof SVGElement?lt:dt).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function ut(t,e){let n=C(this);return $(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ct(t){return Array.from(t.children).forEach(e=>e.remove()),t}function ft(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function at(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!y(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 $(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 dt(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,K(r))}function lt(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function jt(t,e,n=pt){b.push({scope:t,host:(...o)=>o.length?o.forEach(c=>c(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let r=e.call(t,n);return b.pop(),r}function kt(t){for(let n of["connected","disconnected"])Q(t.prototype,n+"Callback",function(r,o,c){r.apply(o,c),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return Q(t.prototype,e+"Callback",function(n,r,o){let[c,,s]=o;r.dispatchEvent(new CustomEvent("dde:"+e,{detail:[c,s]})),n.apply(r,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function Q(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function pt(t){return N(t,(e,n)=>e.getAttribute(n))}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 E(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var k=bt(),ht=new WeakSet;E.connected=function(t,e){let{custom_element:n}=b.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(S(e.signal,()=>k.offConnected(c,t))&&k.onConnected(c,t),c)}};E.disconnected=function(t,e){let{custom_element:n}=b.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||S(e.signal,()=>k.offDisconnected(c,t))&&k.onDisconnected(c,t),c}};var F=new WeakMap;E.disconnectedAsAbort=function(t){if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(E.disconnected(()=>e.abort())),e};E.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||ht.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:h}of d)h.dispatchEvent(new CustomEvent(c,{detail:[l,h.getAttribute(l)]}))});return S(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function bt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}h(u.removedNodes,!0)&&s()}});return{onConnected(i,u){c();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,r(i,f))},onDisconnected(i,u){c();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,r(i,f))}};function r(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let v of i){if(u&&d(v).then(l),!t.has(v))continue;let _=t.get(v);_.length_c&&(v.dispatchEvent(new Event("dde:connected")),_.connected=new WeakSet,_.length_c=0,_.length_d||t.delete(v),f=!0)}return f}function h(i,u){let f=!1;for(let v of i)u&&d(v).then(h),!(!t.has(v)||!t.get(v).length_d)&&(v.dispatchEvent(new Event("dde:disconnected")),t.delete(v),f=!0);return f}}var p=Symbol.for("observable");function D(t){try{return Reflect.has(t,p)}catch{return!1}}var W=[],g=new WeakMap;function m(t,e){if(typeof t!="function")return X(!1,t,e);if(D(t))return t;let n=X(!0),r=function(){let[o,...c]=g.get(r);if(g.set(r,new Set([o])),W.push(r),rt(n,t()),W.pop(),!c.length)return;let s=g.get(r);for(let a of c)s.has(a)||R(a,r)};return g.set(n[p],r),g.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};m.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));q(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};m.symbols={onclear:Symbol.for("Observable.onclear")};m.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),!g.has(o))return;let c=g.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),g.delete(o))})}};var L="__dde_reactive";m.el=function(t,e){let n=w.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return R(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...d)};return q(t,s),et(t,s,n,e),s(t()),o};function gt(t,e){let n=(...r)=>r.length?t.setAttribute(e,...r):t.getAttribute(e);return n.attribute=e,n}var z="__dde_attributes";m.observedAttributes=function(t){let e=N(t,gt),n=t[z]={},r={_set(o){this.value=o}};return Object.keys(e).forEach(o=>{let c=e[o]=nt(e[o],e[o](),r);n[c.attribute]=c}),E.attributeChanged(function({detail:c}){/*! This maps attributes to observables (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=t[z][s];if(d)return m.action(d,"_set",a)})(t),E.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/m.clear(...Object.values(t[z]))})(t),e};var tt={isObservable:D,processReactiveAttribute(t,e,n,r){if(!D(n))return n;let o=c=>r(e,c);return q(n,o),et(n,o,t,e),n()}};function et(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[L]||(o[L]=[],E.disconnected(()=>o[L].forEach(([[c,s]])=>R(c,s,c[p]?.host()===o)))(o)),o[L].push([[t,e],...n])})}function X(t,e,n){let r=t?()=>Y(r):(...o)=>o.length?rt(r,...o):Y(r);return nt(r,e,n)}var vt=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 nt(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=m.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],vt),t}function mt(){return W[W.length-1]}function Y(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=mt();return r&&n.add(r),g.has(r)&&g.get(r).add(t),e}function rt(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 q(t,e){if(t[p])return t[p].listeners.add(e)}function R(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),!g.has(r))return o;let c=g.get(r);if(!g.has(c))return o;g.get(c).forEach(s=>R(s,c,!0))}return o}T(tt);export{m as O,O as assign,Z as assignAttribute,st as chainableAppend,ut as classListDeclarative,w as createElement,Rt as createElementNS,jt as customElementRender,kt as customElementWithDDE,Wt as dispatchEvent,w as el,Rt as elNS,ft as elementAttribute,Ct as empty,D as isObservable,kt as lifecycleToEvents,m as observable,pt as observedAttributes,E as on,T as registerReactivity,b as scope,wt as simulateSlots}; diff --git a/dist/esm.js b/dist/esm.js index 882b11e..7e51b15 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1 +1 @@ -var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function y(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function w(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:F,ssr:""};function F(t,e,n){if(Reflect.set(t,e,n),!!v(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 b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function L(...t){return this.appendOriginal(...t),this}function U(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var A;function N(t,e,...n){let c=y(this),o=0,r,s;switch((Object(e)!==e||c.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(p=>p(s)),void 0):s}),r=t(e||void 0);let a=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});r.prepend(d),a&&(s=d);break}case t==="#text":r=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=x.call(this,document.createDocumentFragment(),e);break;case!!A:r=x.call(this,document.createElementNS(A,t),e);break;case!r:r=x.call(this,document.createElement(t),e)}return U(r),s||(s=r),n.forEach(a=>a(s)),o&&g.pop(),o=2,r}function nt(t,e=t,n=void 0){let c=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),r=Reflect.has(o,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){r&&l.appendChild(p);continue}let i=p.slot,u=o[i];H(p,"remove","slot"),u&&(z(u,p,n),Reflect.deleteProperty(o,i))}return r&&(o[c].replaceWith(l),Reflect.deleteProperty(o,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function z(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function rt(t){let e=this;return function(...c){A=t;let o=N.call(e,...c);return A=void 0,o}}var{setDeleteAttr:P}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,T(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))j.call(this,t,n,c);return C.delete(t),t}function j(t,e,n){let{setRemoveAttr:c,s:o}=T(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>j.call(r,t,a,d));let[s]=e;if(s==="=")return c(e.slice(1),n);if(s===".")return W(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return P(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(o,n,W.bind(null,t[e]));case"ariaset":return S(o,n,(a,d)=>c("aria-"+a,d));case"classList":return B.call(r,t,n)}return I(t,e)?P(t,e,n):c(e,n)}function T(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?G:Z).bind(null,t,"Attribute"),o=y(e);return{setRemoveAttr:c,s:o}}function B(t,e){let n=y(this);return S(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function ot(t){return Array.from(t.children).forEach(e=>e.remove()),t}function H(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function I(t,e){if(!Reflect.has(t,e))return!1;let n=M(t,e);return!v(n.set)}function M(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||M(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Z(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,$(c))}function G(t,e,n,c,o=null){return t[(v(c)?"remove":"set")+e+"NS"](o,n,$(c))}function W(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function ut(t,e,n=t){g.push({scope:t,host:(...o)=>o.length?o.forEach(r=>r(t)):t,custom_element:t});let c=e.call(t,n);return g.pop(),c}function ft(t){for(let n of["connected","disconnected"])k(t.prototype,n+"Callback",function(c,o,r){c.apply(o,r),o.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return k(t.prototype,e+"Callback",function(n,c,o){let[r,,s]=o;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[r,s]})),n.apply(c,o)}),t.prototype.__dde_lifecycleToEvents=!0,t}function k(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function dt(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let s=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var O=J(),V=new WeakSet;_.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(s)),r):(w(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let s="dde:"+c;return r.addEventListener(s,t,e),r.__dde_lifecycleToEvents||w(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};var D=new WeakMap;_.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||V.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(r,{detail:[l,p.getAttribute(l)]}))});return w(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function J(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){r();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){r();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}}export{x as assign,j as assignAttribute,U as chainableAppend,B as classListDeclarative,N as createElement,rt as createElementNS,ut as customElementRender,ft as customElementWithDDE,dt as dispatchEvent,N as el,rt as elNS,H as elementAttribute,ot as empty,ft as lifecycleToEvents,_ as on,q as registerReactivity,g as scope,nt as simulateSlots}; +var m={isObservable(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(m,t):(Object.setPrototypeOf(t,m),t)}function _(t){return m.isPrototypeOf(t)&&t!==m?t:m}function v(t){return typeof t>"u"}function y(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function L(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(c,r){return Reflect.set(c,F(r),e(t,r)),c},{})}function F(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var R={setDeleteAttr:z,ssr:""};function z(t,e,n){if(Reflect.set(t,e,n),!!v(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 b=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return b[b.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...b]},push(t={}){return b.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return b.push(b[0])},pop(){if(b.length!==1)return b.pop()}};function P(...t){return this.appendOriginal(...t),this}function B(t){return t.append===P||(t.appendOriginal=t.append,t.append=P),t}var w;function N(t,e,...n){let c=_(this),r=0,o,s;switch((Object(e)!==e||c.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{r=1,g.push({scope:t,host:(...l)=>l.length?(r===1?n.unshift(...l):l.forEach(p=>p(s)),void 0):s}),o=t(e||void 0);let a=o instanceof DocumentFragment;if(o.nodeName==="#comment")break;let d=N.mark({type:"component",name:t.name,host:a?"this":"parentElement"});o.prepend(d),a&&(s=d);break}case t==="#text":o=x.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):o=x.call(this,document.createDocumentFragment(),e);break;case!!w:o=x.call(this,document.createElementNS(w,t),e);break;case!o:o=x.call(this,document.createElement(t),e)}return B(o),s||(s=o),n.forEach(a=>a(s)),r&&g.pop(),r=2,o}function ct(t,e=t,n=void 0){let c=Symbol.for("default"),r=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||c,a)&&s,{}),o=Reflect.has(r,c);if(t.append=new Proxy(t.append,{apply(s,a,d){if(!d.length)return t;let l=document.createDocumentFragment();for(let p of d){if(!p||!p.slot){o&&l.appendChild(p);continue}let i=p.slot,u=r[i];Z(p,"remove","slot"),u&&(H(u,p,n),Reflect.deleteProperty(r,i))}return o&&(r[c].replaceWith(l),Reflect.deleteProperty(r,c)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function H(t,e,n){n&&n(t,e);try{t.replaceWith(x(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}N.mark=function(t,e=!1){t=Object.entries(t).map(([r,o])=>r+`="${o}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function st(t){let e=this;return function(...c){w=t;let r=N.call(e,...c);return w=void 0,r}}var{setDeleteAttr:W}=R,C=new WeakMap;function x(t,...e){if(!e.length)return t;C.set(t,M(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))T.call(this,t,n,c);return C.delete(t),t}function T(t,e,n){let{setRemoveAttr:c,s:r}=M(t,this),o=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>T.call(o,t,a,d));let[s]=e;if(s==="=")return c(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(),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 W(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return S(r,n,j.bind(null,t[e]));case"ariaset":return S(r,n,(a,d)=>c("aria-"+a,d));case"classList":return I.call(o,t,n)}return G(t,e)?W(t,e,n):c(e,n)}function M(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?J:V).bind(null,t,"Attribute"),r=_(e);return{setRemoveAttr:c,s:r}}function I(t,e){let n=_(this);return S(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function it(t){return Array.from(t.children).forEach(e=>e.remove()),t}function Z(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function G(t,e){if(!Reflect.has(t,e))return!1;let n=$(t,e);return!v(n.set)}function $(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||$(t,e)}function S(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,o]){r&&(o=t.processReactiveAttribute(e,r,o,n),n(r,o))})}function k(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function V(t,e,n,c){return t[(v(c)?"remove":"set")+e](n,k(c))}function J(t,e,n,c,r=null){return t[(v(c)?"remove":"set")+e+"NS"](r,n,k(c))}function j(t,e,n){if(Reflect.set(t,e,n),!!v(n))return Reflect.deleteProperty(t,e)}function dt(t,e,n=K){g.push({scope:t,host:(...r)=>r.length?r.forEach(o=>o(t)):t,custom_element:t}),typeof n=="function"&&(n=n.call(t,t));let c=e.call(t,n);return g.pop(),c}function pt(t){for(let n of["connected","disconnected"])U(t.prototype,n+"Callback",function(c,r,o){c.apply(r,o),r.dispatchEvent(new Event("dde:"+n))});let e="attributeChanged";return U(t.prototype,e+"Callback",function(n,c,r){let[o,,s]=r;c.dispatchEvent(new CustomEvent("dde:"+e,{detail:[o,s]})),n.apply(c,r)}),t.prototype.__dde_lifecycleToEvents=!0,t}function U(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function K(t){return L(t,(e,n)=>e.getAttribute(n))}function bt(t,e,n){return e||(e={}),function(r,...o){n&&(o.unshift(r),r=typeof n=="function"?n():n);let s=o.length?new CustomEvent(t,Object.assign({detail:o[0]},e)):new Event(t,e);return r.dispatchEvent(s)}}function A(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=X(),Q=new WeakSet;A.connected=function(t,e){let{custom_element:n}=g.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(s)),o):(y(e.signal,()=>O.offConnected(o,t))&&O.onConnected(o,t),o)}};A.disconnected=function(t,e){let{custom_element:n}=g.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){n&&(o=n);let s="dde:"+c;return o.addEventListener(s,t,e),o.__dde_lifecycleToEvents||y(e.signal,()=>O.offDisconnected(o,t))&&O.onDisconnected(o,t),o}};var D=new WeakMap;A.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(A.disconnected(()=>e.abort())),e};A.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let o="dde:"+n;if(r.addEventListener(o,t,e),r.__dde_lifecycleToEvents||Q.has(r))return r;let s=new MutationObserver(function(d){for(let{attributeName:l,target:p}of d)p.dispatchEvent(new CustomEvent(o,{detail:[l,p.getAttribute(l)]}))});return y(e.signal,()=>s.disconnect())&&s.observe(r,{attributes:!0}),r}};function X(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(l(u.addedNodes,!0)){s();continue}p(u.removedNodes,!0)&&s()}});return{onConnected(i,u){o();let f=r(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,c(i,f))},onDisconnected(i,u){o();let f=r(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,c(i,f))}};function c(i,u){u.length_c||u.length_d||(t.delete(i),s())}function r(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function o(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function l(i,u){let f=!1;for(let h of i){if(u&&d(h).then(l),!t.has(h))continue;let E=t.get(h);E.length_c&&(h.dispatchEvent(new Event("dde:connected")),E.connected=new WeakSet,E.length_c=0,E.length_d||t.delete(h),f=!0)}return f}function p(i,u){let f=!1;for(let h of i)u&&d(h).then(p),!(!t.has(h)||!t.get(h).length_d)&&(h.dispatchEvent(new Event("dde:disconnected")),t.delete(h),f=!0);return f}}export{x as assign,T as assignAttribute,B as chainableAppend,I as classListDeclarative,N as createElement,st as createElementNS,dt as customElementRender,pt as customElementWithDDE,bt as dispatchEvent,N as el,st as elNS,Z as elementAttribute,it as empty,pt as lifecycleToEvents,K as observedAttributes,A as on,q as registerReactivity,g as scope,ct as simulateSlots}; diff --git a/docs/p04-observables.html b/docs/p04-observables.html index 85f730a..ae89d3b 100644 --- a/docs/p04-observables.html +++ b/docs/p04-observables.html @@ -121,7 +121,7 @@ document.head.append( const interval= 5 * 1000; setTimeout(clearInterval, 10*interval, setInterval(()=> count(count()+1), interval)); -

To derived attribute based on value of observable variable just use the observable as a value of the attribute (assign(element, { attribute: O('value') })). assign/el provides ways to glue reactive attributes/classes more granularly into the DOM. Just use dedicated build-in attributes dataset, ariaset and classList.

For computation, you can use the derived observable (see above) like assign(element, { textContent: O(()=> 'Hello '+WorldObservable()) }).

To represent part of the template filled dynamically based on the observable value use O.el(observable, DOMgenerator). This was already used in the todo example above or see:

import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +

To derived attribute based on value of observable variable just use the observable as a value of the attribute (assign(element, { attribute: O('value') })). assign/el provides ways to glue reactive attributes/classes more granularly into the DOM. Just use dedicated build-in attributes dataset, ariaset and classList.

For computation, you can use the “derived observable” (see above) like assign(element, { textContent: O(()=> 'Hello '+WorldObservable()) }). This is read-only observable its value is computed based on given function and updated when any observable used in the function changes.

To represent part of the template filled dynamically based on the observable value use O.el(observable, DOMgenerator). This was already used in the todo example above or see:

import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; const count= O(0, { add(){ this.value= this.value + Math.round(Math.random()*10); } }); @@ -147,4 +147,4 @@ setTimeout(clearInterval, 10*interval, setInterval(function(){ O.action(count, "add"); O.action(numbers, "push", count()); }, interval)); -

# Mnemonic

\ No newline at end of file +

# Mnemonic

\ No newline at end of file diff --git a/examples/components/webComponent.js b/examples/components/webComponent.js index f1c994c..7f334ec 100644 --- a/examples/components/webComponent.js +++ b/examples/components/webComponent.js @@ -12,26 +12,30 @@ export class CustomHTMLTestElement extends HTMLElement{ } connectedCallback(){ if(!this.hasAttribute("pre-name")) this.setAttribute("pre-name", "default"); - console.log(observedAttributes(this)); this.attachShadow({ mode: "open" }).append( - customElementRender(this, this.render) + customElementRender(this, this.render, this.attributes) ); } - render(test){ + attributes(element){ + const observed= O.observedAttributes(element); + return Object.assign({ test: element.test }, observed); + } + render({ name, preName, test }){ console.log(scope.state); scope.host( on.connected(()=> console.log(CustomHTMLTestElement)), on.attributeChanged(e=> console.log(e)), on.disconnected(()=> console.log(CustomHTMLTestElement)) ); - const name= O.attribute("name"); - const preName= O.attribute("pre-name"); - - console.log({ name, test, preName}); + const text= text=> el().append( + el("#text", text), + " | " + ); return el("p").append( - el("#text", name), - el("#text", preName), + text(test), + text(name), + text(preName), el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") }) ); } diff --git a/package.json b/package.json index 0f285ee..13a1bd1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "deka-dom-el", - "version": "0.7.5", + "version": "0.7.6", "description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.", "author": "Jan Andrle ", "license": "MIT", @@ -46,6 +46,7 @@ "browser": true, "undef": "true", "latedef": "true", + "-W014": true, "maxparams": 5, "maxdepth": 3, "maxcomplexity": 14, @@ -58,7 +59,7 @@ "size-limit": [ { "path": "./index.js", - "limit": "9.75 kB", + "limit": "9.85 kB", "gzip": false, "brotli": false diff --git a/src/customElement.js b/src/customElement.js index 17f0a31..a769f85 100644 --- a/src/customElement.js +++ b/src/customElement.js @@ -5,7 +5,7 @@ export function customElementRender(custom_element, render, props= observedAttri host: (...c)=> c.length ? c.forEach(c=> c(custom_element)) : custom_element, custom_element }); - if(typeof props==="function") props= props(custom_element); + if(typeof props==="function") props= props.call(custom_element, custom_element); const out= render.call(custom_element, props); scope.pop(); return out; @@ -33,20 +33,7 @@ function wrapMethod(obj, method, apply){ obj[method]= new Proxy(obj[method] || (()=> {}), { apply }); } -function observedAttribute(instance, name){ - const out= (...args)=> !args.length - ? instance.getAttribute(name) - : instance.setAttribute(name, ...args); - out.attribute= name; - return out; -} +import { observedAttributes as oA } from "./helpers.js"; export function observedAttributes(instance){ - const { observedAttributes= [] }= instance.constructor; - return observedAttributes - .reduce(function(out, name){ - Reflect.set(out, kebabToCamel(name), observedAttribute(instance, name)); - return out; - }, {}); - ; + return oA(instance, (i, n)=> i.getAttribute(n)); } -function kebabToCamel(name){ return name.replace(/-./g, x=> x[1].toUpperCase()); } diff --git a/src/events.js b/src/events.js index 6f743e4..537bf65 100644 --- a/src/events.js +++ b/src/events.js @@ -84,6 +84,7 @@ on.attributeChanged= function(listener, options){ }); const c= onAbort(options.signal, ()=> observer.disconnect()); if(c) observer.observe(element, { attributes: true }); + //TODO: clean up when element disconnected return element; }; }; diff --git a/src/helpers.js b/src/helpers.js index 80c2ee2..44cf4bb 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -15,3 +15,12 @@ export function onAbort(signal, listener){ signal.removeEventListener("abort", listener); }; } +export function observedAttributes(instance, observedAttribute){ + const { observedAttributes= [] }= instance.constructor; + return observedAttributes + .reduce(function(out, name){ + Reflect.set(out, kebabToCamel(name), observedAttribute(instance, name)); + return out; + }, {}); +} +function kebabToCamel(name){ return name.replace(/-./g, x=> x[1].toUpperCase()); } diff --git a/src/observables-lib.js b/src/observables-lib.js index 58b621d..ae40c49 100644 --- a/src/observables-lib.js +++ b/src/observables-lib.js @@ -9,7 +9,7 @@ const stack_watch= []; /** * ### `WeakMap>>` * The `Set` is in the form of `[ source, ...depended observables (DSs) ]`. - * When the DS is cleaned (`S.clear`) it is removed from DSs, + * When the DS is cleaned (`O.clear`) it is removed from DSs, * if remains only one (`source`) it is cleared too. * ### `WeakMap` * This is used for revesed deps, the `function` is also key for `deps`. @@ -113,41 +113,38 @@ observable.el= function(o, map){ return out; }; import { on } from "./events.js"; +import { observedAttributes } from "./helpers.js"; +function observedAttribute(instance, name){ + const out= (...args)=> !args.length + ? instance.getAttribute(name) + : instance.setAttribute(name, ...args); + out.attribute= name; + return out; +} const key_attributes= "__dde_attributes"; -observable.attribute= function(name, initial= null){ - //TODO host=element & reuse existing - const out= observable(initial); - let element; - scope.host(el=> { - element= el; - if(elementAttribute(element, "has", name)) out(elementAttribute(element, "get", name)); - else if(initial!==null) elementAttribute(element, "set", name, initial); - - if(el[key_attributes]){ - el[key_attributes][name]= out; - return; - } - element[key_attributes]= { [name]: out }; - on.attributeChanged(function attributeChangeToObservable({ detail }){ - /*! This maps attributes to observables (`S.attribute`). - * Investigate `__dde_attributes` key of the element.*/ - const [ name, value ]= detail; - const curr= element[key_attributes][name]; - if(curr) return curr(value); - })(element); - 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])); - })(element); - }); - return new Proxy(out, { - apply(target, _, args){ - if(!args.length) return target(); - const value= args[0]; - return elementAttribute(element, "set", name, value); - } +observable.observedAttributes= function(element){ + const attrs= observedAttributes(element, observedAttribute); + const store= element[key_attributes]= {}; + const actions= { + _set(value){ this.value= value; }, + }; + Object.keys(attrs).forEach(name=> { + const attr= attrs[name]= toObservable(attrs[name], attrs[name](), actions); + store[attr.attribute]= attr; }); + on.attributeChanged(function attributeChangeToObservable({ detail }){ + /*! This maps attributes to observables (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/ + const [ name, value ]= detail; + const curr= element[key_attributes][name]; + if(curr) return observable.action(curr, "_set", value); + })(element); + on.disconnected(function(){ + /*! This removes all observables mapped to attributes (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/ + observable.clear(...Object.values(element[key_attributes])); + })(element); + return attrs; }; import { typeOf } from './helpers.js'; @@ -169,7 +166,7 @@ function removeObservablesFromElements(o, listener, ...notes){ element[key_reactive]= []; on.disconnected(()=> /*! - * Clears all Observables listeners added in the current scope/host (`S.el`, `assign`, …?). + * Clears all Observables listeners added in the current scope/host (`O.el`, `assign`, …?). * You can investigate the `__dde_reactive` key of the element. * */ element[key_reactive].forEach(([ [ o, listener ] ])=>