From 17e40fdd9cd17f3a319d002a30fd37813cfcbe0a Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Wed, 5 Mar 2025 19:29:03 +0100 Subject: [PATCH] :abc: --- dist/dde-with-signals.js | 5 ++ dist/dde-with-signals.min.js | 4 +- dist/dde.js | 5 ++ dist/dde.min.js | 8 ++-- dist/esm-with-signals.d.min.ts | 4 +- dist/esm-with-signals.d.ts | 4 +- dist/esm-with-signals.js | 5 ++ dist/esm-with-signals.min.js | 4 +- dist/esm.d.min.ts | 4 +- dist/esm.d.ts | 4 +- dist/esm.js | 5 ++ dist/esm.min.js | 2 +- .../examples/elements/dde-dom-create.js | 14 ++++++ .../examples/elements/dde-dom-tree.js | 11 +++++ .../examples/elements/native-dom-create.js | 19 ++++++++ .../examples/elements/native-dom-tree.js | 15 ++++++ .../examples/events/append-event.js | 8 ++++ .../examples/events/attribute-event.js | 7 +++ .../components/examples/events/chain-event.js | 8 ++++ .../examples/events/native-event.js | 2 + .../examples/events/property-event.js | 7 +++ .../examples/scopes/custom-scope.js | 14 ++++++ docs/components/examples/scopes/with-scope.js | 45 +++++++++++++++++ docs/p02-elements.html.js | 48 ++----------------- docs/p03-events.html.js | 14 ++---- docs/p05-scopes.html.js | 39 ++++----------- index.d.ts | 2 + src/dom.js | 6 +++ 28 files changed, 215 insertions(+), 98 deletions(-) create mode 100644 docs/components/examples/elements/dde-dom-create.js create mode 100644 docs/components/examples/elements/dde-dom-tree.js create mode 100644 docs/components/examples/elements/native-dom-create.js create mode 100644 docs/components/examples/elements/native-dom-tree.js create mode 100644 docs/components/examples/events/append-event.js create mode 100644 docs/components/examples/events/attribute-event.js create mode 100644 docs/components/examples/events/chain-event.js create mode 100644 docs/components/examples/events/native-event.js create mode 100644 docs/components/examples/events/property-event.js create mode 100644 docs/components/examples/scopes/custom-scope.js create mode 100644 docs/components/examples/scopes/with-scope.js diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index b58ec27..3a88723 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -177,6 +177,11 @@ var scope = { pop() { if (scopes.length === 1) return; return scopes.pop(); + }, + isolate(fn) { + this.push({ prevent: true }); + fn(); + this.pop(); } }; function append(...els) { diff --git a/dist/dde-with-signals.min.js b/dist/dde-with-signals.min.js index 50e9f44..622472a 100644 --- a/dist/dde-with-signals.min.js +++ b/dist/dde-with-signals.min.js @@ -1,9 +1,9 @@ //deka-dom-el library is available via global namespace `dde` (()=> { var V=(...t)=>Object.prototype.hasOwnProperty.call(...t);function O(t){return typeof t>"u"}function rt(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){return t instanceof e}function F(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function w(t=null,e={}){return Object.create(t,e)}function m(...t){return Object.assign(...t)}function I(t,e){if(!t||!S(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function $(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[vt(o)]=e(t,o),r},{})}function vt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var P=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?m(j,t):(Object.setPrototypeOf(t,j),t)}function U(t){return F(t,j)&&t!==j?t:j}var d={setDeleteAttr:mt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function mt(t,e,n){if(Reflect.set(t,e,n),!!O(n)){if(Reflect.deleteProperty(t,e),S(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var D="__dde_lifecyclesToEvents",y="dde:connected",R="dde:disconnected",q="dde:attributeChanged";function Bt(t){return d.q(t)}var C=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],x={get current(){return C[C.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...C]},push(t={}){return C.push(m({},this.current,{prevent:!1},t))},pushRoot(){return C.push(C[0])},pop(){if(C.length!==1)return C.pop()}};function ot(...t){return this.appendOriginal(...t),this}function xt(t){return t.append===ot||(t.appendOriginal=t.append,t.append=ot),t}var H;function W(t,e,...n){let r=U(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(v=>v(s)),void 0):s;x.push({scope:t,host:i}),c=t(e||void 0);let l=S(c,d.F);if(c.nodeName==="#comment")break;let E=W.mark({type:"component",name:t.name,host:l?"this":"parentElement"});c.prepend(E),l&&(s=E);break}case t==="#text":c=z.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=z.call(this,d.D.createDocumentFragment(),e);break;case!!H:c=z.call(this,d.D.createElementNS(H,t),e);break;case!c:c=z.call(this,d.D.createElement(t),e)}return xt(c),s||(s=c),n.forEach(i=>i(s)),o&&x.pop(),o=2,c}W.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(``);return e&&(r.end=d.D.createComment("")),r};function Jt(t){let e=this;return function(...r){H=t;let o=W.call(e,...r);return H=void 0,o}}function Zt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let l of i){let E=(l.slot||"")+n;try{_t(l,"remove","slot")}catch{}let h=o[E];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(v=>v.remove()),h.name=r+E),h.append(l)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var B=new WeakMap,{setDeleteAttr:ct}=d;function z(t,...e){if(!e.length)return t;B.set(t,ut(t,this));for(let[n,r]of Object.entries(m({},...e)))it.call(this,t,n,r);return B.delete(t),t}function it(t,e,n){let{setRemoveAttr:r,s:o}=ut(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,l)=>it.call(c,t,i,l));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return st(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 ct(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Q(o,e,t,n,st.bind(null,t[e]));case"ariaset":return Q(o,e,t,n,(i,l)=>r("aria-"+i,l));case"classList":return Et.call(c,t,n)}return St(t,e)?ct(t,e,n):r(e,n)}function ut(t,e){if(B.has(t))return B.get(t);let r=(S(t,d.S)?At:wt).bind(null,t,"Attribute"),o=U(e);return{setRemoveAttr:r,s:o}}function Et(t,e){let n=U(this);return Q(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function _t(t,e,n,r){return S(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function St(t,e){if(!(e in t))return!1;let n=ft(t,e);return!O(n.set)}function ft(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||ft(t,e)}function Q(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,l]){i&&(i=new c(i),i.target=e,l=t.processReactiveAttribute(n,i,l,o),o(i,l))})}function wt(t,e,n,r){return t[(O(r)?"remove":"set")+e](n,r)}function At(t,e,n,r,o=null){return t[(O(r)?"remove":"set")+e+"NS"](o,n,r)}function st(t,e,n){if(Reflect.set(t,e,n),!!O(n))return Reflect.deleteProperty(t,e)}var L=d.M?yt():new Proxy({},{get(){return()=>{}}});function yt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}v(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function l(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function E(u){t.size>30&&await l();let a=[];if(!S(u,Node))return a;for(let f of t.keys())f===u||!S(f,Node)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&E(_).then(h),!t.has(_))continue;let T=t.get(_);T.length_c&&(_.dispatchEvent(new Event(y)),T.connected=new WeakSet,T.length_c=0,T.length_d||t.delete(_),f=!0)}return f}function v(u,a){let f=!1;for(let _ of u)a&&E(_).then(v),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(N(_)),f=!0);return f}function N(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function ee(t,e,n=Ot){let r=t.host||t;x.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[D];o||Ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,L.observe(t),{once:!0}),x.pop(),t.append(c)}function Ct(t){return X(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),X(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),X(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(q,{detail:[o,c]})),e.apply(n,r)}),t.prototype[D]=!0,t}function X(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function Ot(t){return $(t,(e,n)=>e.getAttribute(n))}function se(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,m({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function A(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var at=t=>m({},typeof t=="object"?t:null,{once:!0});A.connected=function(t,e){return e=at(e),function(r){return r.addEventListener(y,t,e),r[D]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(I(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};A.disconnected=function(t,e){return e=at(e),function(r){return r.addEventListener(R,t,e),r[D]||I(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var Y=new WeakMap;A.disconnectedAsAbort=function(t){if(Y.has(t))return Y.get(t);let e=new AbortController;return Y.set(t,e),t(A.disconnected(()=>e.abort())),e};var Dt=new WeakSet;A.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(q,t,e),r[D]||Dt.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:i,target:l}of s)l.dispatchEvent(new CustomEvent(q,{detail:[i,l.getAttribute(i)]}))});return I(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var p="__dde_signal",tt=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var G=w(null,{get:{value(){return lt(this)}},set:{value(...t){return bt(this,...t)}},toJSON:{value(){return lt(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),Rt=w(G,{set:{value(){}}});function J(t){return F(t,G)}var Z=[],b=new WeakMap;function g(t,e){if(typeof t!="function")return dt(!1,t,e);if(J(t))return t;let n=dt(!0);function r(){let[o,...c]=b.get(r);if(b.set(r,new Set([o])),Z.push(r),bt(n,t()),Z.pop(),!c.length)return;let s=b.get(r);for(let i of c)s.has(i)||M(i,r)}return b.set(n[p],r),b.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!V(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t)};g.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));nt(e,n),o&&o.addEventListener("abort",()=>M(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!b.has(o))return;let c=b.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),b.delete(o))})}};var k="__dde_reactive";function Lt(t=w()){return(e,n)=>V(t,e)?t[e]:t[e]=n()}g.el=function(t,e){let n=W.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=x,s=w(),i=l=>{if(!n.parentNode||!r.parentNode)return M(t,i);let E=Lt(s);s=w(),x.push(c);let h=e(l,function(a,f){return s[a]=E(a,f)});x.pop(),Array.isArray(h)||(h=[h]);let v=document.createComment("");h.push(v),n.after(...h);let N;for(;(N=v.nextSibling)&&N!==r;)N.remove();v.remove(),n.isConnected&&kt(c.host())};return nt(t,i),ht(t,i,n,e),i(t.get()),c.host(A.disconnected(()=>s={})),o};function kt(t){!t||!t[k]||(requestIdleCallback||setTimeout)(function(){t[k]=t[k].filter(([e,n])=>n.isConnected?!0:(M(...e),!1))})}var Mt={_set(t){this.value=t}};function Nt(t){return function(e,n){let r=w(G,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=gt(r,e.getAttribute(n),Mt);return t[n]=o,o}}var et="__dde_attributes";g.observedAttributes=function(t){let e=t[et]={},n=$(t,Nt(e));return A.attributeChanged(function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?m(j,t):(Object.setPrototypeOf(t,j),t)}function U(t){return F(t,j)&&t!==j?t:j}var d={setDeleteAttr:mt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function mt(t,e,n){if(Reflect.set(t,e,n),!!O(n)){if(Reflect.deleteProperty(t,e),S(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var D="__dde_lifecyclesToEvents",y="dde:connected",R="dde:disconnected",q="dde:attributeChanged";function Bt(t){return d.q(t)}var C=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],x={get current(){return C[C.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...C]},push(t={}){return C.push(m({},this.current,{prevent:!1},t))},pushRoot(){return C.push(C[0])},pop(){if(C.length!==1)return C.pop()},isolate(t){this.push({prevent:!0}),t(),this.pop()}};function ot(...t){return this.appendOriginal(...t),this}function xt(t){return t.append===ot||(t.appendOriginal=t.append,t.append=ot),t}var H;function W(t,e,...n){let r=U(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(v=>v(s)),void 0):s;x.push({scope:t,host:i}),c=t(e||void 0);let p=S(c,d.F);if(c.nodeName==="#comment")break;let E=W.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(E),p&&(s=E);break}case t==="#text":c=z.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=z.call(this,d.D.createDocumentFragment(),e);break;case!!H:c=z.call(this,d.D.createElementNS(H,t),e);break;case!c:c=z.call(this,d.D.createElement(t),e)}return xt(c),s||(s=c),n.forEach(i=>i(s)),o&&x.pop(),o=2,c}W.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(``);return e&&(r.end=d.D.createComment("")),r};function Jt(t){let e=this;return function(...r){H=t;let o=W.call(e,...r);return H=void 0,o}}function Zt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let p of i){let E=(p.slot||"")+n;try{_t(p,"remove","slot")}catch{}let h=o[E];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(v=>v.remove()),h.name=r+E),h.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var B=new WeakMap,{setDeleteAttr:ct}=d;function z(t,...e){if(!e.length)return t;B.set(t,ut(t,this));for(let[n,r]of Object.entries(m({},...e)))it.call(this,t,n,r);return B.delete(t),t}function it(t,e,n){let{setRemoveAttr:r,s:o}=ut(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,p)=>it.call(c,t,i,p));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return st(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 ct(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Q(o,e,t,n,st.bind(null,t[e]));case"ariaset":return Q(o,e,t,n,(i,p)=>r("aria-"+i,p));case"classList":return Et.call(c,t,n)}return St(t,e)?ct(t,e,n):r(e,n)}function ut(t,e){if(B.has(t))return B.get(t);let r=(S(t,d.S)?At:wt).bind(null,t,"Attribute"),o=U(e);return{setRemoveAttr:r,s:o}}function Et(t,e){let n=U(this);return Q(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function _t(t,e,n,r){return S(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function St(t,e){if(!(e in t))return!1;let n=ft(t,e);return!O(n.set)}function ft(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||ft(t,e)}function Q(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,p]){i&&(i=new c(i),i.target=e,p=t.processReactiveAttribute(n,i,p,o),o(i,p))})}function wt(t,e,n,r){return t[(O(r)?"remove":"set")+e](n,r)}function At(t,e,n,r,o=null){return t[(O(r)?"remove":"set")+e+"NS"](o,n,r)}function st(t,e,n){if(Reflect.set(t,e,n),!!O(n))return Reflect.deleteProperty(t,e)}var L=d.M?yt():new Proxy({},{get(){return()=>{}}});function yt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}v(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function E(u){t.size>30&&await p();let a=[];if(!S(u,Node))return a;for(let f of t.keys())f===u||!S(f,Node)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&E(_).then(h),!t.has(_))continue;let T=t.get(_);T.length_c&&(_.dispatchEvent(new Event(y)),T.connected=new WeakSet,T.length_c=0,T.length_d||t.delete(_),f=!0)}return f}function v(u,a){let f=!1;for(let _ of u)a&&E(_).then(v),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(N(_)),f=!0);return f}function N(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function ee(t,e,n=Ot){let r=t.host||t;x.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[D];o||Ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,L.observe(t),{once:!0}),x.pop(),t.append(c)}function Ct(t){return X(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),X(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),X(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(q,{detail:[o,c]})),e.apply(n,r)}),t.prototype[D]=!0,t}function X(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function Ot(t){return $(t,(e,n)=>e.getAttribute(n))}function se(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,m({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function A(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var at=t=>m({},typeof t=="object"?t:null,{once:!0});A.connected=function(t,e){return e=at(e),function(r){return r.addEventListener(y,t,e),r[D]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(I(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};A.disconnected=function(t,e){return e=at(e),function(r){return r.addEventListener(R,t,e),r[D]||I(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var Y=new WeakMap;A.disconnectedAsAbort=function(t){if(Y.has(t))return Y.get(t);let e=new AbortController;return Y.set(t,e),t(A.disconnected(()=>e.abort())),e};var Dt=new WeakSet;A.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(q,t,e),r[D]||Dt.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:i,target:p}of s)p.dispatchEvent(new CustomEvent(q,{detail:[i,p.getAttribute(i)]}))});return I(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var l="__dde_signal",tt=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[l];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var G=w(null,{get:{value(){return pt(this)}},set:{value(...t){return bt(this,...t)}},toJSON:{value(){return pt(this)}},valueOf:{value(){return this[l]&&this[l].value}}}),Rt=w(G,{set:{value(){}}});function J(t){return F(t,G)}var Z=[],b=new WeakMap;function g(t,e){if(typeof t!="function")return dt(!1,t,e);if(J(t))return t;let n=dt(!0);function r(){let[o,...c]=b.get(r);if(b.set(r,new Set([o])),Z.push(r),bt(n,t()),Z.pop(),!c.length)return;let s=b.get(r);for(let i of c)s.has(i)||M(i,r)}return b.set(n[l],r),b.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[l];if(!r)return;let{actions:o}=r;if(!o||!V(o,e))throw new Error(`Action "${e}" not defined. See ${l}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t)};g.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));nt(e,n),o&&o.addEventListener("abort",()=>M(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[l];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[l])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!b.has(o))return;let c=b.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),b.delete(o))})}};var k="__dde_reactive";function Lt(t=w()){return(e,n)=>V(t,e)?t[e]:t[e]=n()}g.el=function(t,e){let n=W.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=x,s=w(),i=p=>{if(!n.parentNode||!r.parentNode)return M(t,i);let E=Lt(s);s=w(),x.push(c);let h=e(p,function(a,f){return s[a]=E(a,f)});x.pop(),Array.isArray(h)||(h=[h]);let v=document.createComment("");h.push(v),n.after(...h);let N;for(;(N=v.nextSibling)&&N!==r;)N.remove();v.remove(),n.isConnected&&kt(c.host())};return nt(t,i),ht(t,i,n,e),i(t.get()),c.host(A.disconnected(()=>s={})),o};function kt(t){!t||!t[k]||(requestIdleCallback||setTimeout)(function(){t[k]=t[k].filter(([e,n])=>n.isConnected?!0:(M(...e),!1))})}var Mt={_set(t){this.value=t}};function Nt(t){return function(e,n){let r=w(G,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=gt(r,e.getAttribute(n),Mt);return t[n]=o,o}}var et="__dde_attributes";g.observedAttributes=function(t){let e=t[et]={},n=$(t,Nt(e));return A.attributeChanged(function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[et][c];if(i)return g.action(i,"_set",s)})(t),A.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[et]))})(t),n};var pt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return nt(n,o),ht(n,o,t,e),n.get()}};function ht(t,e,...n){let{current:r}=x;r.host(function(o){if(o[k])return o[k].push([[t,e],...n]);o[k]=[],!r.prevent&&A.disconnected(()=>o[k].forEach(([[c,s]])=>M(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){g.clear({[p]:t})});function dt(t,e,n){let r=w(t?Rt:G),o=gt(r,e,n,t);return Tt.register(o,o[p]),o}var Pt=m(w(),{stopPropagation(){this.skip=!0}});function gt(t,e,n,r=!1){let o=[];rt(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=x;return Reflect.defineProperty(t,p,{value:m(w(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return Z[Z.length-1]}function lt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=jt();return r&&n.add(r),b.has(r)&&b.get(r).add(t),e}function bt(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,tt(t),e}function nt(t,e){if(t[p])return t[p].listeners.add(e)}function M(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=b.get(r);if(!s)return c;let i=b.get(s);if(!i)return c;for(let l of i)M(l,s,!0);return c}K(pt); + Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[et]))})(t),n};var lt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return nt(n,o),ht(n,o,t,e),n.get()}};function ht(t,e,...n){let{current:r}=x;r.host(function(o){if(o[k])return o[k].push([[t,e],...n]);o[k]=[],!r.prevent&&A.disconnected(()=>o[k].forEach(([[c,s]])=>M(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){g.clear({[l]:t})});function dt(t,e,n){let r=w(t?Rt:G),o=gt(r,e,n,t);return Tt.register(o,o[l]),o}var Pt=m(w(),{stopPropagation(){this.skip=!0}});function gt(t,e,n,r=!1){let o=[];rt(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=x;return Reflect.defineProperty(t,l,{value:m(w(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return Z[Z.length-1]}function pt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=jt();return r&&n.add(r),b.has(r)&&b.get(r).add(t),e}function bt(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,tt(t),e}function nt(t,e){if(t[l])return t[l].listeners.add(e)}function M(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=b.get(r);if(!s)return c;let i=b.get(s);if(!i)return c;for(let p of i)M(p,s,!0);return c}K(lt); globalThis.dde= {S: g, assign: z, assignAttribute: it, diff --git a/dist/dde.js b/dist/dde.js index 6f4d16f..59b8d1c 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -154,6 +154,11 @@ var scope = { pop() { if (scopes.length === 1) return; return scopes.pop(); + }, + isolate(fn) { + this.push({ prevent: true }); + fn(); + this.pop(); } }; function append(...els) { diff --git a/dist/dde.min.js b/dist/dde.min.js index 0e84cc3..9a0cf64 100644 --- a/dist/dde.min.js +++ b/dist/dde.min.js @@ -1,22 +1,22 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -function w(t){return typeof t>"u"}function b(t,e){return t instanceof e}function F(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function v(...t){return Object.assign(...t)}function R(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function I(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[J(o)]=e(t,o),r},{})}function J(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?v(O,t):(Object.setPrototypeOf(t,O),t)}function T(t){return F(t,O)&&t!==O?t:O}var a={setDeleteAttr:Q,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Q(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",m="dde:connected",_="dde:disconnected",D="dde:attributeChanged";function gt(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],S={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(v({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function $(...t){return this.appendOriginal(...t),this}function X(t){return t.append===$||(t.appendOriginal=t.append,t.append=$),t}var P;function k(t,e,...n){let r=T(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;S.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let g=k.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(g),p&&(d=g);break}case t==="#text":c=N.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=N.call(this,a.D.createDocumentFragment(),e);break;case!!P:c=N.call(this,a.D.createElementNS(P,t),e);break;case!c:c=N.call(this,a.D.createElement(t),e)}return X(c),d||(d=c),n.forEach(f=>f(d)),o&&S.pop(),o=2,c}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function vt(t){let e=this;return function(...r){P=t;let o=k.call(e,...r);return P=void 0,o}}function mt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let g=(p.slot||"")+n;try{tt(p,"remove","slot")}catch{}let l=o[g];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+g),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var M=new WeakMap,{setDeleteAttr:U}=a;function N(t,...e){if(!e.length)return t;M.set(t,B(t,this));for(let[n,r]of Object.entries(v({},...e)))z.call(this,t,n,r);return M.delete(t),t}function z(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>z.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return H(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return j(o,e,t,n,H.bind(null,t[e]));case"ariaset":return j(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return Y.call(c,t,n)}return et(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(M.has(t))return M.get(t);let r=(b(t,a.S)?rt:nt).bind(null,t,"Attribute"),o=T(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=T(this);return j(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function tt(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function et(t,e){if(!(e in t))return!1;let n=Z(t,e);return!w(n.set)}function Z(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||Z(t,e)}function j(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function nt(t,e,n,r){return t[(w(r)?"remove":"set")+e](n,r)}function rt(t,e,n,r,o=null){return t[(w(r)?"remove":"set")+e+"NS"](o,n,r)}function H(t,e,n){if(Reflect.set(t,e,n),!!w(n))return Reflect.deleteProperty(t,e)}var C=a.M?ot():new Proxy({},{get(){return()=>{}}});function ot(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function g(s){t.size>30&&await p();let u=[];if(!b(s,Node))return u;for(let i of t.keys())i===s||!b(i,Node)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let h of s){if(u&&g(h).then(l),!t.has(h))continue;let y=t.get(h);y.length_c&&(h.dispatchEvent(new Event(m)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(h),i=!0)}return i}function E(s,u){let i=!1;for(let h of s)u&&g(h).then(E),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(V(h)),i=!0);return i}function V(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(_)),t.delete(s))}}}function Ot(t,e,n=st){let r=t.host||t;S.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[A];o||ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(m)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(_,C.observe(t),{once:!0}),S.pop(),t.append(c)}function ct(t){return W(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(m))}),W(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(_)))}),W(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(D,{detail:[o,c]})),e.apply(n,r)}),t.prototype[A]=!0,t}function W(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function st(t){return I(t,(e,n)=>e.getAttribute(n))}function Tt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function L(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>v({},typeof t=="object"?t:null,{once:!0});L.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(m,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(m)),r):(R(e.signal,()=>C.offConnected(r,t))&&C.onConnected(r,t),r)}};L.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(_,t,e),r[A]||R(e.signal,()=>C.offDisconnected(r,t))&&C.onDisconnected(r,t),r}};var q=new WeakMap;L.disconnectedAsAbort=function(t){if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(L.disconnected(()=>e.abort())),e};var it=new WeakSet;L.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(D,t,e),r[A]||it.has(r)||!a.M)return r;let o=new a.M(function(d){for(let{attributeName:f,target:p}of d)p.dispatchEvent(new CustomEvent(D,{detail:[f,p.getAttribute(f)]}))});return R(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}}; +function w(t){return typeof t>"u"}function b(t,e){return t instanceof e}function F(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function g(...t){return Object.assign(...t)}function R(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function I(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[J(o)]=e(t,o),r},{})}function J(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?g(O,t):(Object.setPrototypeOf(t,O),t)}function T(t){return F(t,O)&&t!==O?t:O}var a={setDeleteAttr:Q,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Q(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",m="dde:connected",_="dde:disconnected",D="dde:attributeChanged";function vt(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],S={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(g({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()},isolate(t){this.push({prevent:!0}),t(),this.pop()}};function $(...t){return this.appendOriginal(...t),this}function X(t){return t.append===$||(t.appendOriginal=t.append,t.append=$),t}var P;function k(t,e,...n){let r=T(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;S.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let v=k.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(v),p&&(d=v);break}case t==="#text":c=N.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=N.call(this,a.D.createDocumentFragment(),e);break;case!!P:c=N.call(this,a.D.createElementNS(P,t),e);break;case!c:c=N.call(this,a.D.createElement(t),e)}return X(c),d||(d=c),n.forEach(f=>f(d)),o&&S.pop(),o=2,c}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function gt(t){let e=this;return function(...r){P=t;let o=k.call(e,...r);return P=void 0,o}}function mt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let v=(p.slot||"")+n;try{tt(p,"remove","slot")}catch{}let l=o[v];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+v),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var M=new WeakMap,{setDeleteAttr:U}=a;function N(t,...e){if(!e.length)return t;M.set(t,B(t,this));for(let[n,r]of Object.entries(g({},...e)))z.call(this,t,n,r);return M.delete(t),t}function z(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>z.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return H(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return j(o,e,t,n,H.bind(null,t[e]));case"ariaset":return j(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return Y.call(c,t,n)}return et(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(M.has(t))return M.get(t);let r=(b(t,a.S)?rt:nt).bind(null,t,"Attribute"),o=T(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=T(this);return j(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function tt(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function et(t,e){if(!(e in t))return!1;let n=Z(t,e);return!w(n.set)}function Z(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||Z(t,e)}function j(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function nt(t,e,n,r){return t[(w(r)?"remove":"set")+e](n,r)}function rt(t,e,n,r,o=null){return t[(w(r)?"remove":"set")+e+"NS"](o,n,r)}function H(t,e,n){if(Reflect.set(t,e,n),!!w(n))return Reflect.deleteProperty(t,e)}var C=a.M?ot():new Proxy({},{get(){return()=>{}}});function ot(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function v(s){t.size>30&&await p();let u=[];if(!b(s,Node))return u;for(let i of t.keys())i===s||!b(i,Node)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let h of s){if(u&&v(h).then(l),!t.has(h))continue;let y=t.get(h);y.length_c&&(h.dispatchEvent(new Event(m)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(h),i=!0)}return i}function E(s,u){let i=!1;for(let h of s)u&&v(h).then(E),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(V(h)),i=!0);return i}function V(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(_)),t.delete(s))}}}function Ot(t,e,n=st){let r=t.host||t;S.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[A];o||ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(m)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(_,C.observe(t),{once:!0}),S.pop(),t.append(c)}function ct(t){return W(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(m))}),W(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(_)))}),W(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(D,{detail:[o,c]})),e.apply(n,r)}),t.prototype[A]=!0,t}function W(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function st(t){return I(t,(e,n)=>e.getAttribute(n))}function Tt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function L(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>g({},typeof t=="object"?t:null,{once:!0});L.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(m,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(m)),r):(R(e.signal,()=>C.offConnected(r,t))&&C.onConnected(r,t),r)}};L.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(_,t,e),r[A]||R(e.signal,()=>C.offDisconnected(r,t))&&C.onDisconnected(r,t),r}};var q=new WeakMap;L.disconnectedAsAbort=function(t){if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(L.disconnected(()=>e.abort())),e};var it=new WeakSet;L.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(D,t,e),r[A]||it.has(r)||!a.M)return r;let o=new a.M(function(d){for(let{attributeName:f,target:p}of d)p.dispatchEvent(new CustomEvent(D,{detail:[f,p.getAttribute(f)]}))});return R(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}}; globalThis.dde= {assign: N, assignAttribute: z, chainableAppend: X, classListDeclarative: Y, createElement: k, -createElementNS: vt, +createElementNS: gt, customElementRender: Ot, customElementWithDDE: ct, dispatchEvent: Tt, el: k, -elNS: vt, +elNS: gt, elementAttribute: tt, lifecyclesToEvents: ct, observedAttributes: st, on: L, -queue: gt, +queue: vt, registerReactivity: K, scope: S, simulateSlots: mt diff --git a/dist/esm-with-signals.d.min.ts b/dist/esm-with-signals.d.min.ts index 7f79ceb..6125c5e 100644 --- a/dist/esm-with-signals.d.min.ts +++ b/dist/esm-with-signals.d.min.ts @@ -232,11 +232,13 @@ export const scope: { state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ - push(scope: Partial): ReturnType["push"]>, + push(scope?: Partial): ReturnType["push"]>, /** Adds root scope as a child of the current scope. */ pushRoot(): ReturnType["push"]>, /** Removes last/current child scope. */ pop(): ReturnType["pop"]>, + /** Runs function in a new (isolated) scope */ + isolate(fn: Function): void, }; export function customElementRender< diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index 7f79ceb..6125c5e 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -232,11 +232,13 @@ export const scope: { state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ - push(scope: Partial): ReturnType["push"]>, + push(scope?: Partial): ReturnType["push"]>, /** Adds root scope as a child of the current scope. */ pushRoot(): ReturnType["push"]>, /** Removes last/current child scope. */ pop(): ReturnType["pop"]>, + /** Runs function in a new (isolated) scope */ + isolate(fn: Function): void, }; export function customElementRender< diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index 468ef3c..ab09237 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -175,6 +175,11 @@ var scope = { pop() { if (scopes.length === 1) return; return scopes.pop(); + }, + isolate(fn) { + this.push({ prevent: true }); + fn(); + this.pop(); } }; function append(...els) { diff --git a/dist/esm-with-signals.min.js b/dist/esm-with-signals.min.js index b5c3f65..4ca3ce5 100644 --- a/dist/esm-with-signals.min.js +++ b/dist/esm-with-signals.min.js @@ -1,4 +1,4 @@ var V=(...t)=>Object.prototype.hasOwnProperty.call(...t);function O(t){return typeof t>"u"}function rt(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){return t instanceof e}function F(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function w(t=null,e={}){return Object.create(t,e)}function m(...t){return Object.assign(...t)}function I(t,e){if(!t||!S(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function $(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[vt(o)]=e(t,o),r},{})}function vt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var P=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?m(j,t):(Object.setPrototypeOf(t,j),t)}function U(t){return F(t,j)&&t!==j?t:j}var d={setDeleteAttr:mt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function mt(t,e,n){if(Reflect.set(t,e,n),!!O(n)){if(Reflect.deleteProperty(t,e),S(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var D="__dde_lifecyclesToEvents",y="dde:connected",R="dde:disconnected",q="dde:attributeChanged";function Bt(t){return d.q(t)}var C=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],x={get current(){return C[C.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...C]},push(t={}){return C.push(m({},this.current,{prevent:!1},t))},pushRoot(){return C.push(C[0])},pop(){if(C.length!==1)return C.pop()}};function ot(...t){return this.appendOriginal(...t),this}function xt(t){return t.append===ot||(t.appendOriginal=t.append,t.append=ot),t}var H;function W(t,e,...n){let r=U(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(v=>v(s)),void 0):s;x.push({scope:t,host:i}),c=t(e||void 0);let l=S(c,d.F);if(c.nodeName==="#comment")break;let E=W.mark({type:"component",name:t.name,host:l?"this":"parentElement"});c.prepend(E),l&&(s=E);break}case t==="#text":c=z.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=z.call(this,d.D.createDocumentFragment(),e);break;case!!H:c=z.call(this,d.D.createElementNS(H,t),e);break;case!c:c=z.call(this,d.D.createElement(t),e)}return xt(c),s||(s=c),n.forEach(i=>i(s)),o&&x.pop(),o=2,c}W.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(``);return e&&(r.end=d.D.createComment("")),r};function Jt(t){let e=this;return function(...r){H=t;let o=W.call(e,...r);return H=void 0,o}}function Zt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let l of i){let E=(l.slot||"")+n;try{_t(l,"remove","slot")}catch{}let h=o[E];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(v=>v.remove()),h.name=r+E),h.append(l)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var B=new WeakMap,{setDeleteAttr:ct}=d;function z(t,...e){if(!e.length)return t;B.set(t,ut(t,this));for(let[n,r]of Object.entries(m({},...e)))it.call(this,t,n,r);return B.delete(t),t}function it(t,e,n){let{setRemoveAttr:r,s:o}=ut(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,l)=>it.call(c,t,i,l));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return st(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 ct(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Q(o,e,t,n,st.bind(null,t[e]));case"ariaset":return Q(o,e,t,n,(i,l)=>r("aria-"+i,l));case"classList":return Et.call(c,t,n)}return St(t,e)?ct(t,e,n):r(e,n)}function ut(t,e){if(B.has(t))return B.get(t);let r=(S(t,d.S)?At:wt).bind(null,t,"Attribute"),o=U(e);return{setRemoveAttr:r,s:o}}function Et(t,e){let n=U(this);return Q(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function _t(t,e,n,r){return S(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function St(t,e){if(!(e in t))return!1;let n=ft(t,e);return!O(n.set)}function ft(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||ft(t,e)}function Q(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,l]){i&&(i=new c(i),i.target=e,l=t.processReactiveAttribute(n,i,l,o),o(i,l))})}function wt(t,e,n,r){return t[(O(r)?"remove":"set")+e](n,r)}function At(t,e,n,r,o=null){return t[(O(r)?"remove":"set")+e+"NS"](o,n,r)}function st(t,e,n){if(Reflect.set(t,e,n),!!O(n))return Reflect.deleteProperty(t,e)}var L=d.M?yt():new Proxy({},{get(){return()=>{}}});function yt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}v(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function l(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function E(u){t.size>30&&await l();let a=[];if(!S(u,Node))return a;for(let f of t.keys())f===u||!S(f,Node)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&E(_).then(h),!t.has(_))continue;let T=t.get(_);T.length_c&&(_.dispatchEvent(new Event(y)),T.connected=new WeakSet,T.length_c=0,T.length_d||t.delete(_),f=!0)}return f}function v(u,a){let f=!1;for(let _ of u)a&&E(_).then(v),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(N(_)),f=!0);return f}function N(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function ee(t,e,n=Ot){let r=t.host||t;x.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[D];o||Ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,L.observe(t),{once:!0}),x.pop(),t.append(c)}function Ct(t){return X(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),X(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),X(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(q,{detail:[o,c]})),e.apply(n,r)}),t.prototype[D]=!0,t}function X(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function Ot(t){return $(t,(e,n)=>e.getAttribute(n))}function se(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,m({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function A(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var at=t=>m({},typeof t=="object"?t:null,{once:!0});A.connected=function(t,e){return e=at(e),function(r){return r.addEventListener(y,t,e),r[D]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(I(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};A.disconnected=function(t,e){return e=at(e),function(r){return r.addEventListener(R,t,e),r[D]||I(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var Y=new WeakMap;A.disconnectedAsAbort=function(t){if(Y.has(t))return Y.get(t);let e=new AbortController;return Y.set(t,e),t(A.disconnected(()=>e.abort())),e};var Dt=new WeakSet;A.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(q,t,e),r[D]||Dt.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:i,target:l}of s)l.dispatchEvent(new CustomEvent(q,{detail:[i,l.getAttribute(i)]}))});return I(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var p="__dde_signal",tt=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var G=w(null,{get:{value(){return lt(this)}},set:{value(...t){return bt(this,...t)}},toJSON:{value(){return lt(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),Rt=w(G,{set:{value(){}}});function J(t){return F(t,G)}var Z=[],b=new WeakMap;function g(t,e){if(typeof t!="function")return dt(!1,t,e);if(J(t))return t;let n=dt(!0);function r(){let[o,...c]=b.get(r);if(b.set(r,new Set([o])),Z.push(r),bt(n,t()),Z.pop(),!c.length)return;let s=b.get(r);for(let i of c)s.has(i)||M(i,r)}return b.set(n[p],r),b.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!V(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t)};g.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));nt(e,n),o&&o.addEventListener("abort",()=>M(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!b.has(o))return;let c=b.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),b.delete(o))})}};var k="__dde_reactive";function Lt(t=w()){return(e,n)=>V(t,e)?t[e]:t[e]=n()}g.el=function(t,e){let n=W.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=x,s=w(),i=l=>{if(!n.parentNode||!r.parentNode)return M(t,i);let E=Lt(s);s=w(),x.push(c);let h=e(l,function(a,f){return s[a]=E(a,f)});x.pop(),Array.isArray(h)||(h=[h]);let v=document.createComment("");h.push(v),n.after(...h);let N;for(;(N=v.nextSibling)&&N!==r;)N.remove();v.remove(),n.isConnected&&kt(c.host())};return nt(t,i),ht(t,i,n,e),i(t.get()),c.host(A.disconnected(()=>s={})),o};function kt(t){!t||!t[k]||(requestIdleCallback||setTimeout)(function(){t[k]=t[k].filter(([e,n])=>n.isConnected?!0:(M(...e),!1))})}var Mt={_set(t){this.value=t}};function Nt(t){return function(e,n){let r=w(G,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=gt(r,e.getAttribute(n),Mt);return t[n]=o,o}}var et="__dde_attributes";g.observedAttributes=function(t){let e=t[et]={},n=$(t,Nt(e));return A.attributeChanged(function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?m(j,t):(Object.setPrototypeOf(t,j),t)}function U(t){return F(t,j)&&t!==j?t:j}var d={setDeleteAttr:mt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function mt(t,e,n){if(Reflect.set(t,e,n),!!O(n)){if(Reflect.deleteProperty(t,e),S(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var D="__dde_lifecyclesToEvents",y="dde:connected",R="dde:disconnected",q="dde:attributeChanged";function Bt(t){return d.q(t)}var C=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],x={get current(){return C[C.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...C]},push(t={}){return C.push(m({},this.current,{prevent:!1},t))},pushRoot(){return C.push(C[0])},pop(){if(C.length!==1)return C.pop()},isolate(t){this.push({prevent:!0}),t(),this.pop()}};function ot(...t){return this.appendOriginal(...t),this}function xt(t){return t.append===ot||(t.appendOriginal=t.append,t.append=ot),t}var H;function W(t,e,...n){let r=U(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(v=>v(s)),void 0):s;x.push({scope:t,host:i}),c=t(e||void 0);let p=S(c,d.F);if(c.nodeName==="#comment")break;let E=W.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(E),p&&(s=E);break}case t==="#text":c=z.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=z.call(this,d.D.createDocumentFragment(),e);break;case!!H:c=z.call(this,d.D.createElementNS(H,t),e);break;case!c:c=z.call(this,d.D.createElement(t),e)}return xt(c),s||(s=c),n.forEach(i=>i(s)),o&&x.pop(),o=2,c}W.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=d.D.createComment(``);return e&&(r.end=d.D.createComment("")),r};function Jt(t){let e=this;return function(...r){H=t;let o=W.call(e,...r);return H=void 0,o}}function Zt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let p of i){let E=(p.slot||"")+n;try{_t(p,"remove","slot")}catch{}let h=o[E];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(v=>v.remove()),h.name=r+E),h.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var B=new WeakMap,{setDeleteAttr:ct}=d;function z(t,...e){if(!e.length)return t;B.set(t,ut(t,this));for(let[n,r]of Object.entries(m({},...e)))it.call(this,t,n,r);return B.delete(t),t}function it(t,e,n){let{setRemoveAttr:r,s:o}=ut(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,p)=>it.call(c,t,i,p));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return st(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 ct(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Q(o,e,t,n,st.bind(null,t[e]));case"ariaset":return Q(o,e,t,n,(i,p)=>r("aria-"+i,p));case"classList":return Et.call(c,t,n)}return St(t,e)?ct(t,e,n):r(e,n)}function ut(t,e){if(B.has(t))return B.get(t);let r=(S(t,d.S)?At:wt).bind(null,t,"Attribute"),o=U(e);return{setRemoveAttr:r,s:o}}function Et(t,e){let n=U(this);return Q(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function _t(t,e,n,r){return S(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function St(t,e){if(!(e in t))return!1;let n=ft(t,e);return!O(n.set)}function ft(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||ft(t,e)}function Q(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,p]){i&&(i=new c(i),i.target=e,p=t.processReactiveAttribute(n,i,p,o),o(i,p))})}function wt(t,e,n,r){return t[(O(r)?"remove":"set")+e](n,r)}function At(t,e,n,r,o=null){return t[(O(r)?"remove":"set")+e+"NS"](o,n,r)}function st(t,e,n){if(Reflect.set(t,e,n),!!O(n))return Reflect.deleteProperty(t,e)}var L=d.M?yt():new Proxy({},{get(){return()=>{}}});function yt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}v(f.removedNodes,!0)&&u()}},r=new d.M(n(i));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){s();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),i())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function E(u){t.size>30&&await p();let a=[];if(!S(u,Node))return a;for(let f of t.keys())f===u||!S(f,Node)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&E(_).then(h),!t.has(_))continue;let T=t.get(_);T.length_c&&(_.dispatchEvent(new Event(y)),T.connected=new WeakSet,T.length_c=0,T.length_d||t.delete(_),f=!0)}return f}function v(u,a){let f=!1;for(let _ of u)a&&E(_).then(v),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(N(_)),f=!0);return f}function N(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function ee(t,e,n=Ot){let r=t.host||t;x.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[D];o||Ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,L.observe(t),{once:!0}),x.pop(),t.append(c)}function Ct(t){return X(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),X(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),X(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(q,{detail:[o,c]})),e.apply(n,r)}),t.prototype[D]=!0,t}function X(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function Ot(t){return $(t,(e,n)=>e.getAttribute(n))}function se(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,m({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function A(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var at=t=>m({},typeof t=="object"?t:null,{once:!0});A.connected=function(t,e){return e=at(e),function(r){return r.addEventListener(y,t,e),r[D]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(I(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};A.disconnected=function(t,e){return e=at(e),function(r){return r.addEventListener(R,t,e),r[D]||I(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var Y=new WeakMap;A.disconnectedAsAbort=function(t){if(Y.has(t))return Y.get(t);let e=new AbortController;return Y.set(t,e),t(A.disconnected(()=>e.abort())),e};var Dt=new WeakSet;A.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(q,t,e),r[D]||Dt.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:i,target:p}of s)p.dispatchEvent(new CustomEvent(q,{detail:[i,p.getAttribute(i)]}))});return I(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var l="__dde_signal",tt=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[l];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var G=w(null,{get:{value(){return pt(this)}},set:{value(...t){return bt(this,...t)}},toJSON:{value(){return pt(this)}},valueOf:{value(){return this[l]&&this[l].value}}}),Rt=w(G,{set:{value(){}}});function J(t){return F(t,G)}var Z=[],b=new WeakMap;function g(t,e){if(typeof t!="function")return dt(!1,t,e);if(J(t))return t;let n=dt(!0);function r(){let[o,...c]=b.get(r);if(b.set(r,new Set([o])),Z.push(r),bt(n,t()),Z.pop(),!c.length)return;let s=b.get(r);for(let i of c)s.has(i)||M(i,r)}return b.set(n[l],r),b.set(r,new Set([n])),r(),n}g.action=function(t,e,...n){let r=t[l];if(!r)return;let{actions:o}=r;if(!o||!V(o,e))throw new Error(`Action "${e}" not defined. See ${l}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t)};g.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));nt(e,n),o&&o.addEventListener("abort",()=>M(e,n))}};g.symbols={onclear:Symbol.for("Signal.onclear")};g.clear=function(...t){for(let n of t){let r=n[l];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[l])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!b.has(o))return;let c=b.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),b.delete(o))})}};var k="__dde_reactive";function Lt(t=w()){return(e,n)=>V(t,e)?t[e]:t[e]=n()}g.el=function(t,e){let n=W.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=x,s=w(),i=p=>{if(!n.parentNode||!r.parentNode)return M(t,i);let E=Lt(s);s=w(),x.push(c);let h=e(p,function(a,f){return s[a]=E(a,f)});x.pop(),Array.isArray(h)||(h=[h]);let v=document.createComment("");h.push(v),n.after(...h);let N;for(;(N=v.nextSibling)&&N!==r;)N.remove();v.remove(),n.isConnected&&kt(c.host())};return nt(t,i),ht(t,i,n,e),i(t.get()),c.host(A.disconnected(()=>s={})),o};function kt(t){!t||!t[k]||(requestIdleCallback||setTimeout)(function(){t[k]=t[k].filter(([e,n])=>n.isConnected?!0:(M(...e),!1))})}var Mt={_set(t){this.value=t}};function Nt(t){return function(e,n){let r=w(G,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=gt(r,e.getAttribute(n),Mt);return t[n]=o,o}}var et="__dde_attributes";g.observedAttributes=function(t){let e=t[et]={},n=$(t,Nt(e));return A.attributeChanged(function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[et][c];if(i)return g.action(i,"_set",s)})(t),A.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[et]))})(t),n};var pt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return nt(n,o),ht(n,o,t,e),n.get()}};function ht(t,e,...n){let{current:r}=x;r.host(function(o){if(o[k])return o[k].push([[t,e],...n]);o[k]=[],!r.prevent&&A.disconnected(()=>o[k].forEach(([[c,s]])=>M(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){g.clear({[p]:t})});function dt(t,e,n){let r=w(t?Rt:G),o=gt(r,e,n,t);return Tt.register(o,o[p]),o}var Pt=m(w(),{stopPropagation(){this.skip=!0}});function gt(t,e,n,r=!1){let o=[];rt(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=x;return Reflect.defineProperty(t,p,{value:m(w(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return Z[Z.length-1]}function lt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=jt();return r&&n.add(r),b.has(r)&&b.get(r).add(t),e}function bt(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,tt(t),e}function nt(t,e){if(t[p])return t[p].listeners.add(e)}function M(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=b.get(r);if(!s)return c;let i=b.get(s);if(!i)return c;for(let l of i)M(l,s,!0);return c}K(pt);export{g as S,z as assign,it as assignAttribute,xt as chainableAppend,Et as classListDeclarative,W as createElement,Jt as createElementNS,ee as customElementRender,Ct as customElementWithDDE,se as dispatchEvent,W as el,Jt as elNS,_t as elementAttribute,J as isSignal,Ct as lifecyclesToEvents,Ot as observedAttributes,A as on,Bt as queue,K as registerReactivity,x as scope,g as signal,Zt as simulateSlots}; + Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[et]))})(t),n};var lt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return nt(n,o),ht(n,o,t,e),n.get()}};function ht(t,e,...n){let{current:r}=x;r.host(function(o){if(o[k])return o[k].push([[t,e],...n]);o[k]=[],!r.prevent&&A.disconnected(()=>o[k].forEach(([[c,s]])=>M(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){g.clear({[l]:t})});function dt(t,e,n){let r=w(t?Rt:G),o=gt(r,e,n,t);return Tt.register(o,o[l]),o}var Pt=m(w(),{stopPropagation(){this.skip=!0}});function gt(t,e,n,r=!1){let o=[];rt(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=x;return Reflect.defineProperty(t,l,{value:m(w(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return Z[Z.length-1]}function pt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=jt();return r&&n.add(r),b.has(r)&&b.get(r).add(t),e}function bt(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,tt(t),e}function nt(t,e){if(t[l])return t[l].listeners.add(e)}function M(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let s=b.get(r);if(!s)return c;let i=b.get(s);if(!i)return c;for(let p of i)M(p,s,!0);return c}K(lt);export{g as S,z as assign,it as assignAttribute,xt as chainableAppend,Et as classListDeclarative,W as createElement,Jt as createElementNS,ee as customElementRender,Ct as customElementWithDDE,se as dispatchEvent,W as el,Jt as elNS,_t as elementAttribute,J as isSignal,Ct as lifecyclesToEvents,Ot as observedAttributes,A as on,Bt as queue,K as registerReactivity,x as scope,g as signal,Zt as simulateSlots}; diff --git a/dist/esm.d.min.ts b/dist/esm.d.min.ts index 29f8078..ede5e72 100644 --- a/dist/esm.d.min.ts +++ b/dist/esm.d.min.ts @@ -232,11 +232,13 @@ export const scope: { state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ - push(scope: Partial): ReturnType["push"]>, + push(scope?: Partial): ReturnType["push"]>, /** Adds root scope as a child of the current scope. */ pushRoot(): ReturnType["push"]>, /** Removes last/current child scope. */ pop(): ReturnType["pop"]>, + /** Runs function in a new (isolated) scope */ + isolate(fn: Function): void, }; export function customElementRender< diff --git a/dist/esm.d.ts b/dist/esm.d.ts index 29f8078..ede5e72 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -232,11 +232,13 @@ export const scope: { state: Scope[], /** Adds new child scope. All attributes are inherited by default. */ - push(scope: Partial): ReturnType["push"]>, + push(scope?: Partial): ReturnType["push"]>, /** Adds root scope as a child of the current scope. */ pushRoot(): ReturnType["push"]>, /** Removes last/current child scope. */ pop(): ReturnType["pop"]>, + /** Runs function in a new (isolated) scope */ + isolate(fn: Function): void, }; export function customElementRender< diff --git a/dist/esm.js b/dist/esm.js index 3466765..ee0b4db 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -152,6 +152,11 @@ var scope = { pop() { if (scopes.length === 1) return; return scopes.pop(); + }, + isolate(fn) { + this.push({ prevent: true }); + fn(); + this.pop(); } }; function append(...els) { diff --git a/dist/esm.min.js b/dist/esm.min.js index 5f442d7..4958e95 100644 --- a/dist/esm.min.js +++ b/dist/esm.min.js @@ -1 +1 @@ -function w(t){return typeof t>"u"}function b(t,e){return t instanceof e}function F(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function v(...t){return Object.assign(...t)}function R(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function I(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[J(o)]=e(t,o),r},{})}function J(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?v(O,t):(Object.setPrototypeOf(t,O),t)}function T(t){return F(t,O)&&t!==O?t:O}var a={setDeleteAttr:Q,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Q(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",m="dde:connected",_="dde:disconnected",D="dde:attributeChanged";function gt(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],S={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(v({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function $(...t){return this.appendOriginal(...t),this}function X(t){return t.append===$||(t.appendOriginal=t.append,t.append=$),t}var P;function k(t,e,...n){let r=T(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;S.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let g=k.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(g),p&&(d=g);break}case t==="#text":c=N.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=N.call(this,a.D.createDocumentFragment(),e);break;case!!P:c=N.call(this,a.D.createElementNS(P,t),e);break;case!c:c=N.call(this,a.D.createElement(t),e)}return X(c),d||(d=c),n.forEach(f=>f(d)),o&&S.pop(),o=2,c}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function vt(t){let e=this;return function(...r){P=t;let o=k.call(e,...r);return P=void 0,o}}function mt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let g=(p.slot||"")+n;try{tt(p,"remove","slot")}catch{}let l=o[g];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+g),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var M=new WeakMap,{setDeleteAttr:U}=a;function N(t,...e){if(!e.length)return t;M.set(t,B(t,this));for(let[n,r]of Object.entries(v({},...e)))z.call(this,t,n,r);return M.delete(t),t}function z(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>z.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return H(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return j(o,e,t,n,H.bind(null,t[e]));case"ariaset":return j(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return Y.call(c,t,n)}return et(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(M.has(t))return M.get(t);let r=(b(t,a.S)?rt:nt).bind(null,t,"Attribute"),o=T(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=T(this);return j(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function tt(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function et(t,e){if(!(e in t))return!1;let n=Z(t,e);return!w(n.set)}function Z(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||Z(t,e)}function j(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function nt(t,e,n,r){return t[(w(r)?"remove":"set")+e](n,r)}function rt(t,e,n,r,o=null){return t[(w(r)?"remove":"set")+e+"NS"](o,n,r)}function H(t,e,n){if(Reflect.set(t,e,n),!!w(n))return Reflect.deleteProperty(t,e)}var C=a.M?ot():new Proxy({},{get(){return()=>{}}});function ot(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function g(s){t.size>30&&await p();let u=[];if(!b(s,Node))return u;for(let i of t.keys())i===s||!b(i,Node)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let h of s){if(u&&g(h).then(l),!t.has(h))continue;let y=t.get(h);y.length_c&&(h.dispatchEvent(new Event(m)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(h),i=!0)}return i}function E(s,u){let i=!1;for(let h of s)u&&g(h).then(E),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(V(h)),i=!0);return i}function V(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(_)),t.delete(s))}}}function Ot(t,e,n=st){let r=t.host||t;S.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[A];o||ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(m)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(_,C.observe(t),{once:!0}),S.pop(),t.append(c)}function ct(t){return W(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(m))}),W(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(_)))}),W(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(D,{detail:[o,c]})),e.apply(n,r)}),t.prototype[A]=!0,t}function W(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function st(t){return I(t,(e,n)=>e.getAttribute(n))}function Tt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function L(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>v({},typeof t=="object"?t:null,{once:!0});L.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(m,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(m)),r):(R(e.signal,()=>C.offConnected(r,t))&&C.onConnected(r,t),r)}};L.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(_,t,e),r[A]||R(e.signal,()=>C.offDisconnected(r,t))&&C.onDisconnected(r,t),r}};var q=new WeakMap;L.disconnectedAsAbort=function(t){if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(L.disconnected(()=>e.abort())),e};var it=new WeakSet;L.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(D,t,e),r[A]||it.has(r)||!a.M)return r;let o=new a.M(function(d){for(let{attributeName:f,target:p}of d)p.dispatchEvent(new CustomEvent(D,{detail:[f,p.getAttribute(f)]}))});return R(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};export{N as assign,z as assignAttribute,X as chainableAppend,Y as classListDeclarative,k as createElement,vt as createElementNS,Ot as customElementRender,ct as customElementWithDDE,Tt as dispatchEvent,k as el,vt as elNS,tt as elementAttribute,ct as lifecyclesToEvents,st as observedAttributes,L as on,gt as queue,K as registerReactivity,S as scope,mt as simulateSlots}; +function w(t){return typeof t>"u"}function b(t,e){return t instanceof e}function F(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function g(...t){return Object.assign(...t)}function R(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function I(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[J(o)]=e(t,o),r},{})}function J(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function K(t,e=!0){return e?g(O,t):(Object.setPrototypeOf(t,O),t)}function T(t){return F(t,O)&&t!==O?t:O}var a={setDeleteAttr:Q,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Q(t,e,n){if(Reflect.set(t,e,n),!!w(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",m="dde:connected",_="dde:disconnected",D="dde:attributeChanged";function vt(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],S={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(g({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()},isolate(t){this.push({prevent:!0}),t(),this.pop()}};function $(...t){return this.appendOriginal(...t),this}function X(t){return t.append===$||(t.appendOriginal=t.append,t.append=$),t}var P;function k(t,e,...n){let r=T(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;S.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let v=k.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(v),p&&(d=v);break}case t==="#text":c=N.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=N.call(this,a.D.createDocumentFragment(),e);break;case!!P:c=N.call(this,a.D.createElementNS(P,t),e);break;case!c:c=N.call(this,a.D.createElement(t),e)}return X(c),d||(d=c),n.forEach(f=>f(d)),o&&S.pop(),o=2,c}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function gt(t){let e=this;return function(...r){P=t;let o=k.call(e,...r);return P=void 0,o}}function mt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let v=(p.slot||"")+n;try{tt(p,"remove","slot")}catch{}let l=o[v];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+v),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var M=new WeakMap,{setDeleteAttr:U}=a;function N(t,...e){if(!e.length)return t;M.set(t,B(t,this));for(let[n,r]of Object.entries(g({},...e)))z.call(this,t,n,r);return M.delete(t),t}function z(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>z.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return H(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return j(o,e,t,n,H.bind(null,t[e]));case"ariaset":return j(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return Y.call(c,t,n)}return et(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(M.has(t))return M.get(t);let r=(b(t,a.S)?rt:nt).bind(null,t,"Attribute"),o=T(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=T(this);return j(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function tt(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function et(t,e){if(!(e in t))return!1;let n=Z(t,e);return!w(n.set)}function Z(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||Z(t,e)}function j(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function nt(t,e,n,r){return t[(w(r)?"remove":"set")+e](n,r)}function rt(t,e,n,r,o=null){return t[(w(r)?"remove":"set")+e+"NS"](o,n,r)}function H(t,e,n){if(Reflect.set(t,e,n),!!w(n))return Reflect.deleteProperty(t,e)}var C=a.M?ot():new Proxy({},{get(){return()=>{}}});function ot(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){d();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),f())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function v(s){t.size>30&&await p();let u=[];if(!b(s,Node))return u;for(let i of t.keys())i===s||!b(i,Node)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let h of s){if(u&&v(h).then(l),!t.has(h))continue;let y=t.get(h);y.length_c&&(h.dispatchEvent(new Event(m)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(h),i=!0)}return i}function E(s,u){let i=!1;for(let h of s)u&&v(h).then(E),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(V(h)),i=!0);return i}function V(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(_)),t.delete(s))}}}function Ot(t,e,n=st){let r=t.host||t;S.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[A];o||ct(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(m)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(_,C.observe(t),{once:!0}),S.pop(),t.append(c)}function ct(t){return W(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(m))}),W(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(_)))}),W(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(D,{detail:[o,c]})),e.apply(n,r)}),t.prototype[A]=!0,t}function W(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function st(t){return I(t,(e,n)=>e.getAttribute(n))}function Tt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let d=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function L(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>g({},typeof t=="object"?t:null,{once:!0});L.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(m,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(m)),r):(R(e.signal,()=>C.offConnected(r,t))&&C.onConnected(r,t),r)}};L.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(_,t,e),r[A]||R(e.signal,()=>C.offDisconnected(r,t))&&C.onDisconnected(r,t),r}};var q=new WeakMap;L.disconnectedAsAbort=function(t){if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(L.disconnected(()=>e.abort())),e};var it=new WeakSet;L.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(D,t,e),r[A]||it.has(r)||!a.M)return r;let o=new a.M(function(d){for(let{attributeName:f,target:p}of d)p.dispatchEvent(new CustomEvent(D,{detail:[f,p.getAttribute(f)]}))});return R(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};export{N as assign,z as assignAttribute,X as chainableAppend,Y as classListDeclarative,k as createElement,gt as createElementNS,Ot as customElementRender,ct as customElementWithDDE,Tt as dispatchEvent,k as el,gt as elNS,tt as elementAttribute,ct as lifecyclesToEvents,st as observedAttributes,L as on,vt as queue,K as registerReactivity,S as scope,mt as simulateSlots}; diff --git a/docs/components/examples/elements/dde-dom-create.js b/docs/components/examples/elements/dde-dom-create.js new file mode 100644 index 0000000..846c24b --- /dev/null +++ b/docs/components/examples/elements/dde-dom-create.js @@ -0,0 +1,14 @@ +import { el } from "deka-dom-el"; + +// Create element with properties +const button = el("button", { + textContent: "Click me", + className: "primary", + disabled: true +}); + +// Shorter and more expressive +// than the native approach + +// Add to DOM +document.body.append(button); \ No newline at end of file diff --git a/docs/components/examples/elements/dde-dom-tree.js b/docs/components/examples/elements/dde-dom-tree.js new file mode 100644 index 0000000..4cf01b0 --- /dev/null +++ b/docs/components/examples/elements/dde-dom-tree.js @@ -0,0 +1,11 @@ +import { el } from "deka-dom-el"; + +// Chainable, natural nesting +// append() returns parent element +// making chains easy and intuitive +document.body.append( + el("div").append( + el("h1", "Title"), + el("p", "Paragraph") + ) +); diff --git a/docs/components/examples/elements/native-dom-create.js b/docs/components/examples/elements/native-dom-create.js new file mode 100644 index 0000000..fd717c6 --- /dev/null +++ b/docs/components/examples/elements/native-dom-create.js @@ -0,0 +1,19 @@ +// Create element with properties +const button = document.createElement('button'); +button.textContent = "Click me"; +button.className = "primary"; +button.disabled = true; + +// Or using Object.assign() +const button2 = Object.assign( + document.createElement('button'), + { + textContent: "Click me", + className: "primary", + disabled: true + } +); + +// Add to DOM +document.body.appendChild(button); +document.body.appendChild(button2); \ No newline at end of file diff --git a/docs/components/examples/elements/native-dom-tree.js b/docs/components/examples/elements/native-dom-tree.js new file mode 100644 index 0000000..aad2e7b --- /dev/null +++ b/docs/components/examples/elements/native-dom-tree.js @@ -0,0 +1,15 @@ +// Verbose, needs temp variables +const div = document.createElement('div'); +const h1 = document.createElement('h1'); +h1.textContent = 'Title'; +div.appendChild(h1); + +const p = document.createElement('p'); +p.textContent = 'Paragraph'; +div.appendChild(p); + +// appendChild doesn't return parent +// so chaining is not possible + +// Add to DOM +document.body.appendChild(div); \ No newline at end of file diff --git a/docs/components/examples/events/append-event.js b/docs/components/examples/events/append-event.js new file mode 100644 index 0000000..271c0d7 --- /dev/null +++ b/docs/components/examples/events/append-event.js @@ -0,0 +1,8 @@ +import { el, on } from "deka-dom-el"; + +// Third approach - append with on addon +el("button", { + textContent: "click me" +}).append( + on("click", (e) => console.log("Clicked!", e)) +); \ No newline at end of file diff --git a/docs/components/examples/events/attribute-event.js b/docs/components/examples/events/attribute-event.js new file mode 100644 index 0000000..fa6906c --- /dev/null +++ b/docs/components/examples/events/attribute-event.js @@ -0,0 +1,7 @@ +import { el } from "deka-dom-el"; + +// Using events with HTML attribute style +el("button", { + textContent: "click me", + "=onclick": "console.log(event)" +}); \ No newline at end of file diff --git a/docs/components/examples/events/chain-event.js b/docs/components/examples/events/chain-event.js new file mode 100644 index 0000000..f537a14 --- /dev/null +++ b/docs/components/examples/events/chain-event.js @@ -0,0 +1,8 @@ +import { el, on } from "deka-dom-el"; + +// Using events as addons - chainable approach +el("button", { + textContent: "click me", +}, + on("click", (e) => console.log("Clicked!", e)) +); \ No newline at end of file diff --git a/docs/components/examples/events/native-event.js b/docs/components/examples/events/native-event.js new file mode 100644 index 0000000..d7a68a8 --- /dev/null +++ b/docs/components/examples/events/native-event.js @@ -0,0 +1,2 @@ +// Standard DOM event listener approach +element.addEventListener('click', callback, options); \ No newline at end of file diff --git a/docs/components/examples/events/property-event.js b/docs/components/examples/events/property-event.js new file mode 100644 index 0000000..63f8a0d --- /dev/null +++ b/docs/components/examples/events/property-event.js @@ -0,0 +1,7 @@ +import { el } from "deka-dom-el"; + +// Using events with property assignment +el("button", { + textContent: "click me", + onclick: console.log +}); \ No newline at end of file diff --git a/docs/components/examples/scopes/custom-scope.js b/docs/components/examples/scopes/custom-scope.js new file mode 100644 index 0000000..ed659da --- /dev/null +++ b/docs/components/examples/scopes/custom-scope.js @@ -0,0 +1,14 @@ +import { scope } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; + +function customSignalLogic() { + // Create an isolated scope for a specific operation + scope.push(); // Start new scope + + // These signals are in the new scope + const isolatedCount = S(0); + const isolatedDerived = S(() => isolatedCount.get() * 2); + + // Clean up by returning to previous scope + scope.pop(); +} diff --git a/docs/components/examples/scopes/with-scope.js b/docs/components/examples/scopes/with-scope.js new file mode 100644 index 0000000..850f947 --- /dev/null +++ b/docs/components/examples/scopes/with-scope.js @@ -0,0 +1,45 @@ +import { el, scope } from "deka-dom-el"; +import { S } from "deka-dom-el/signals"; + +function CounterWithIsolatedTimer() { + const { host } = scope; + + // Main component state + const count = S(0); + + // Create a timer in an isolated scope + scope.isolate(() => { + // These subscriptions won't be tied to the component lifecycle + // They would continue to run even if the component was removed + const timer = S(0); + + // Not recommended for real applications! + // Just demonstrating scope isolation + setInterval(() => { + timer.set(timer.get() + 1); + console.log(`Timer: ${timer.get()}`); + }, 1000); + }); + + // Normal component functionality within main scope + function increment() { + count.set(count.get() + 1); + } + + return el("div").append( + el("p").append( + "Count: ", + el("#text", S(() => count.get())) + ), + el("button", { + textContent: "Increment", + onclick: increment + }), + el("p", "An isolated timer runs in console") + ); +} + +// Usage +document.body.append( + el(CounterWithIsolatedTimer) +); diff --git a/docs/p02-elements.html.js b/docs/p02-elements.html.js index 9fd754d..12e461e 100644 --- a/docs/p02-elements.html.js +++ b/docs/p02-elements.html.js @@ -77,33 +77,11 @@ export function page({ pkg, info }){ el("div", { class: "comparison" }).append( el("div").append( el("h5", t`Native DOM API`), - el(code, { content: `// Create element with properties -const button = document.createElement('button'); -button.textContent = "Click me"; -button.className = "primary"; -button.disabled = true; - -// Or using Object.assign() -const button = Object.assign( - document.createElement('button'), - { - textContent: "Click me", - className: "primary", - disabled: true - } -);`, page_id }) + el(code, { src: fileURL("./components/examples/elements/native-dom-create.js"), page_id }) ), el("div").append( el("h5", t`DDE Approach`), - el(code, { content: `// Create element with properties -const button = el("button", { - textContent: "Click me", - className: "primary", - disabled: true -}); - -// Shorter and more expressive -// than the native approach`, page_id }) + el(code, { src: fileURL("./components/examples/elements/dde-dom-create.js"), page_id }) ) ) ), @@ -159,29 +137,11 @@ const button = el("button", { el("div", { class: "comparison" }).append( el("div", { class: "bad-practice" }).append( el("h5", t`❌ Native DOM API`), - el(code, { content: `// Verbose, needs temp variables -const div = document.createElement('div'); -const h1 = document.createElement('h1'); -h1.textContent = 'Title'; -div.appendChild(h1); - -const p = document.createElement('p'); -p.textContent = 'Paragraph'; -div.appendChild(p); - -// appendChild doesn't return parent -// so chaining is not possible`, page_id }) + el(code, { src: fileURL("./components/examples/elements/native-dom-tree.js"), page_id }) ), el("div", { class: "good-practice" }).append( el("h5", t`✅ DDE Approach`), - el(code, { content: `// Chainable, natural nesting -const div = el("div").append( - el("h1", "Title"), - el("p", "Paragraph") -); - -// append() returns parent element -// making chains easy and intuitive`, page_id }) + el(code, { src: fileURL("./components/examples/elements/dde-dom-tree.js"), page_id }) ) ) ), diff --git a/docs/p03-events.html.js b/docs/p03-events.html.js index 7e3df45..ab3b805 100644 --- a/docs/p03-events.html.js +++ b/docs/p03-events.html.js @@ -101,10 +101,7 @@ export function page({ pkg, info }){ el("div", { className: "tabs" }).append( el("div", { className: "tab", "data-tab": "html-attr" }).append( el("h4", t`HTML Attribute Style`), - el(code, { content: `el("button", { - textContent: "click me", - "=onclick": "console.log(event)" -})`, page_id }), + el(code, { src: fileURL("./components/examples/events/attribute-event.js"), page_id }), el("p").append(...T` Forces usage as an HTML attribute. Corresponds to ${el("code", ``)}. This can be particularly @@ -113,17 +110,12 @@ export function page({ pkg, info }){ ), el("div", { className: "tab", "data-tab": "property" }).append( el("h4", t`Property Assignment`), - el(code, { content: `el("button", { - textContent: "click me", - onclick: console.log -})`, page_id }), + el(code, { src: fileURL("./components/examples/events/property-event.js"), page_id }), el("p", t`Assigns the event handler directly to the element's property.`) ), el("div", { className: "tab", "data-tab": "addon" }).append( el("h4", t`Addon Approach`), - el(code, { content: `el("button", { - textContent: "click me" -}, on("click", console.log))`, page_id }), + el(code, { src: fileURL("./components/examples/events/chain-event.js"), page_id }), el("p", t`Uses the addon pattern, see above.`) ) ), diff --git a/docs/p05-scopes.html.js b/docs/p05-scopes.html.js index 88be318..0c195f7 100644 --- a/docs/p05-scopes.html.js +++ b/docs/p05-scopes.html.js @@ -165,19 +165,19 @@ function MyComponent() { el("div", { className: "function-table" }).append( el("h4", t`Manual Scope Control API`), el("dl").append( + el("dt", t`scope.current`), + el("dd", t`Returns the currently active scope object.`), + + el("dt", t`scope.isolate(callback)`), + el("dd", t`Executes the callback function within a temporary scope, then automatically restores the previous scope. + Safer than manual push/pop for most use cases.`), + el("dt", t`scope.push()`), el("dd", t`Creates a new scope and makes it the current active scope. All signals and subscriptions created after this call will be associated with this new scope.`), el("dt", t`scope.pop()`), el("dd", t`Restores the previous scope that was active before the matching push() call.`), - - el("dt", t`scope.current()`), - el("dd", t`Returns the currently active scope object.`), - - el("dt", t`scope.withScope(callback)`), - el("dd", t`Executes the callback function within a temporary scope, then automatically restores the previous scope. - Safer than manual push/pop for most use cases.`) ) ), el("p").append(...T` @@ -188,29 +188,8 @@ function MyComponent() { el("li", t`Creating detached reactive logic that shouldn't be tied to a component's lifecycle`), el("li", t`Building utilities that work with signals but need scope isolation`) ), - el(code, { content: `// Inside a component -function SomeComponent() { - // Create an isolated scope for a specific operation - scope.push(); // Start new scope - - // These signals are in the new scope - const isolatedCount = S(0); - const isolatedDerived = S(() => isolatedCount.get() * 2); - - // Clean up by returning to previous scope - scope.pop(); - - // Alternative: Use withScope for automatic scope management - scope.withScope(() => { - // This code runs in an isolated scope - const tempSignal = S("temporary"); - - // No need for pop() - scope is restored automatically - }); - - // Rest of component remains in the original scope - return el("div"); -}`, page_id }), + el(example, { src: fileURL("./components/examples/scopes/custom-scope.js"), page_id }), + el(example, { src: fileURL("./components/examples/scopes/with-scope.js"), page_id }), el("div", { className: "warning" }).append( el("p").append(...T` ${el("strong", "Be careful with manual scope control!")} Always ensure you have matching push() and pop() calls, diff --git a/index.d.ts b/index.d.ts index d1fdeed..dcb9841 100644 --- a/index.d.ts +++ b/index.d.ts @@ -237,6 +237,8 @@ export const scope: { pushRoot(): ReturnType["push"]>, /** Removes last/current child scope. */ pop(): ReturnType["pop"]>, + /** Runs function in a new (isolated) scope */ + isolate(fn: Function): void, }; export function customElementRender< diff --git a/src/dom.js b/src/dom.js index dc3da60..f89e72a 100644 --- a/src/dom.js +++ b/src/dom.js @@ -72,6 +72,12 @@ export const scope= { if(scopes.length===1) return; return scopes.pop(); }, + + isolate(fn){ + this.push({ prevent: true }); + fn(); + this.pop(); + } }; /** * Chainable append function for elements