From 82e4ca687cf5a2eee6f6ad227138fc51e0f9508f Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Fri, 17 May 2024 22:13:16 +0200 Subject: [PATCH] :bug: docs (now includes dde directly) --- dist/dde-with-observables.js | 717 +++++++++++++++++++++++++++- dist/dde.js | 488 ++++++++++++++++++- dist/esm-with-observables.js | 695 ++++++++++++++++++++++++++- dist/esm.js | 469 +++++++++++++++++- docs/index.html | 6 +- docs/p02-elements.html | 16 +- docs/p03-events.html | 12 +- docs/p04-observables.html | 20 +- docs/p05-scopes.html | 16 +- docs/p06-customElement.html | 2 +- docs_src/components/example.html.js | 9 +- 11 files changed, 2360 insertions(+), 90 deletions(-) diff --git a/dist/dde-with-observables.js b/dist/dde-with-observables.js index f8ff495..8050133 100644 --- a/dist/dde-with-observables.js +++ b/dist/dde-with-observables.js @@ -1,31 +1,696 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var N={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function B(t,e=!0){return e?Object.assign(N,t):(Object.setPrototypeOf(t,N),t)}function W(t){return N.isPrototypeOf(t)&&t!==N?t:N}var T=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function Q(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function q(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function F(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[pt(o)]=e(t,o),r},{})}function pt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:lt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function lt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),t instanceof d.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",O="dde:connected",S="dde:disconnected",P="dde:attributeChanged";var w=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],m={get current(){return w[w.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...w]},push(t={}){return w.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return w.push(w[0])},pop(){if(w.length!==1)return w.pop()}};function X(...t){return this.appendOriginal(...t),this}function ht(t){return t.append===X||(t.appendOriginal=t.append,t.append=X),t}var $;function M(t,e,...n){let r=W(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,m.push({scope:t,host:(...g)=>g.length?(o===1?n.unshift(...g):g.forEach(p=>p(s)),void 0):s}),c=t(e||void 0);let a=c instanceof d.F;if(c.nodeName==="#comment")break;let h=M.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(h),a&&(s=h);break}case t==="#text":c=j.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=j.call(this,d.D.createDocumentFragment(),e);break;case!!$:c=j.call(this,d.D.createElementNS($,t),e);break;case!c:c=j.call(this,d.D.createElement(t),e)}return ht(c),s||(s=c),n.forEach(a=>a(s)),o&&m.pop(),o=2,c}function Wt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||r,a)&&s,{}),c=T(o,r);if(t.append=new Proxy(t.append,{apply(s,a,h){if(!h.length)return t;let g=d.D.createDocumentFragment();for(let p of h){if(!p||!p.slot){c&&g.appendChild(p);continue}let y=p.slot,_=o[y];gt(p,"remove","slot"),_&&(bt(_,p,n),Reflect.deleteProperty(o,y))}return c&&(o[r].replaceWith(g),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function bt(t,e,n){n&&n(t,e);try{t.replaceWith(j(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}M.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 qt(t){let e=this;return function(...r){$=t;let o=M.call(e,...r);return $=void 0,o}}var U=new WeakMap,{setDeleteAttr:Y}=d;function j(t,...e){if(!e.length)return t;U.set(t,nt(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))et.call(this,t,n,r);return U.delete(t),t}function et(t,e,n){let{setRemoveAttr:r,s:o}=nt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,h)=>et.call(c,t,a,h));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return tt(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 Y(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return I(o,n,tt.bind(null,t[e]));case"ariaset":return I(o,n,(a,h)=>r("aria-"+a,h));case"classList":return vt.call(c,t,n)}return Et(t,e)?Y(t,e,n):r(e,n)}function nt(t,e){if(U.has(t))return U.get(t);let r=(t instanceof d.S?xt:mt).bind(null,t,"Attribute"),o=W(e);return{setRemoveAttr:r,s:o}}function vt(t,e){let n=W(this);return I(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ft(t){return Array.from(t.children).forEach(e=>e.remove()),t}function gt(t,e,n,r){return t instanceof d.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Et(t,e){if(!(e in t))return!1;let n=rt(t,e);return!A(n.set)}function rt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||rt(t,e)}function I(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function ot(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function mt(t,e,n,r){return t[(A(r)?"remove":"set")+e](n,ot(r))}function xt(t,e,n,r,o=null){return t[(A(r)?"remove":"set")+e+"NS"](o,n,ot(r))}function tt(t,e,n){if(Reflect.set(t,e,n),!!A(n))return Reflect.deleteProperty(t,e)}var D=d.M?Ot():new Proxy({},{get(){return()=>{}}});function Ot(){let t=new Map,e=!1,n=i=>function(u){for(let f of u)if(f.type==="childList"){if(p(f.addedNodes,!0)){i();continue}y(f.removedNodes,!0)&&i()}},r=new d.M(n(a));return{observe(i){let u=new d.M(n(()=>{}));return u.observe(i,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(i,u){s();let f=c(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,o(i,f))},onDisconnected(i,u){s();let f=c(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,o(i,f))}};function o(i,u){u.length_c||u.length_d||(t.delete(i),a())}function c(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}function h(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function g(i){t.size>30&&await h();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function p(i,u){let f=!1;for(let b of i){if(u&&g(b).then(p),!t.has(b))continue;let L=t.get(b);L.length_c&&(b.dispatchEvent(new Event(O)),L.connected=new WeakSet,L.length_c=0,L.length_d||t.delete(b),f=!0)}return f}function y(i,u){let f=!1;for(let b of i)u&&g(b).then(y),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(_(b)),f=!0);return f}function _(i){return()=>{i.isConnected||(i.dispatchEvent(new Event(S)),t.delete(i))}}}function Zt(t,e,n,r=yt){m.push({scope:t,host:(...s)=>s.length?s.forEach(a=>a(t)):t}),typeof r=="function"&&(r=r.call(t,t));let o=t[C];o||wt(t);let c=n.call(t,r);return o||t.dispatchEvent(new Event(O)),e.nodeType===11&&typeof e.mode=="string"&&t.addEventListener(S,D.observe(e),{once:!0}),m.pop(),e.append(c)}function wt(t){return J(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(O))}),J(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(S)))}),J(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(P,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function J(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function yt(t){return F(t,(e,n)=>e.getAttribute(n))}function Qt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function x(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var ct=t=>Object.assign({},typeof t=="object"?t:null,{once:!0});x.connected=function(t,e){return e=ct(e),function(r){return r.addEventListener(O,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(O)),r):(q(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};x.disconnected=function(t,e){return e=ct(e),function(r){return r.addEventListener(S,t,e),r[C]||q(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var Z=new WeakMap;x.disconnectedAsAbort=function(t){if(Z.has(t))return Z.get(t);let e=new AbortController;return Z.set(t,e),t(x.disconnected(()=>e.abort())),e};var _t=new WeakSet;x.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(P,t,e),r[C]||_t.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:a,target:h}of s)h.dispatchEvent(new CustomEvent(P,{detail:[a,h.getAttribute(a)]}))});return q(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var l="__dde_observable";function z(t){try{return T(t,l)}catch{return!1}}var H=[],v=new WeakMap;function E(t,e){if(typeof t!="function")return st(!1,t,e);if(z(t))return t;let n=st(!0),r=function(){let[o,...c]=v.get(r);if(v.set(r,new Set([o])),H.push(r),dt(n,t()),H.pop(),!c.length)return;let s=v.get(r);for(let a of c)s.has(a)||k(a,r)};return v.set(n[l],r),v.set(r,new Set([n])),r(),n}E.action=function(t,e,...n){let r=t[l],{actions:o}=r;if(!o||!(e in o))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return delete r.skip;r.listeners.forEach(c=>c(r.value))};E.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));K(e,n),o&&o.addEventListener("abort",()=>k(e,n))}};E.symbols={onclear:Symbol.for("Observable.onclear")};E.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),!v.has(o))return;let c=v.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),v.delete(o))})}};var R="__dde_reactive";E.el=function(t,e){let n=M.mark({type:"reactive"},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=m,s={},a=h=>{if(!n.parentNode||!r.parentNode)return k(t,a);let g=s;s={},m.push(c);let p=e(h,function(u,f){let b;return T(g,u)?(b=g[u],delete g[u]):b=f(),s[u]=b,b});m.pop(),Array.isArray(p)||(p=[p]),n.after(...p);let y=p[p.length-1],_;for(;(_=y.nextSibling)!==r;)_.remove();n.isConnected&&At(c.host())};return K(t,a),ft(t,a,n,e),a(t()),o};function At(t){!t||!t[R]||(requestIdleCallback||setTimeout)(function(){t[R]=t[R].filter(([e,n])=>n.isConnected?!0:(k(...e),!1))})}var Ct={_set(t){this.value=t}};function St(t){return function(e,n){let r=(...c)=>c.length?e.setAttribute(n,...c):e.getAttribute(n),o=at(r,r(),Ct);return t[n]=o,o}}var G="__dde_attributes";E.observedAttributes=function(t){let e=t[G]={},n=F(t,St(e));return x.attributeChanged(function({detail:o}){/*! This maps attributes to observables (`O.observedAttributes`). - * Investigate `__dde_attributes` key of the element.*/let[c,s]=o,a=this[G][c];if(a)return E.action(a,"_set",s)})(t),x.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`). - * Investigate `__dde_attributes` key of the element.*/E.clear(...Object.values(this[G]))})(t),n};var ut={isObservable:z,processReactiveAttribute(t,e,n,r){if(!z(n))return n;let o=c=>{if(!t.isConnected)return k(n,o);r(e,c)};return K(n,o),ft(n,o,t,e),n()}};function ft(t,e,...n){let{current:r}=m;r.prevent||r.host(function(o){o[R]||(o[R]=[],x.disconnected(()=>o[R].forEach(([[c,s]])=>k(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)),o[R].push([[t,e],...n])})}function st(t,e,n){let r=t?()=>it(r):(...o)=>o.length?dt(r,...o):it(r);return at(r,e,n,t)}var Dt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),V=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function at(t,e,n,r=!1){let o=[];Q(n)!=="[object Object]"&&(n={});let{onclear:c}=E.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=m;return Reflect.defineProperty(t,l,{value:{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new V().stack,readonly:r},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[l],Dt),t}function Rt(){return H[H.length-1]}function it(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=Rt();return r&&n.add(r),v.has(r)&&v.get(r).add(t),e}function dt(t,e,n){if(!t[l])return;let r=t[l];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function K(t,e){if(t[l])return t[l].listeners.add(e)}function k(t,e,n){let r=t[l];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(E.clear(t),!v.has(r))return o;let c=v.get(r);if(!v.has(c))return o;v.get(c).forEach(s=>k(s,c,!0))}return o}B(ut); -globalThis.dde= {O: E, -assign: j, -assignAttribute: et, -chainableAppend: ht, -classListDeclarative: vt, -createElement: M, -createElementNS: qt, -customElementRender: Zt, -customElementWithDDE: wt, -dispatchEvent: Qt, -el: M, -elNS: qt, -elementAttribute: gt, -empty: Ft, -isObservable: z, -lifecyclesToEvents: wt, -observable: E, -observedAttributes: yt, -on: x, -registerReactivity: B, -scope: m, -simulateSlots: Wt +// src/observables-common.js +var k = { + isObservable(t) { + return !1; + }, + processReactiveAttribute(t, e, n, r) { + return n; + } +}; +function B(t, e = !0) { + return e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t); +} +function W(t) { + return k.isPrototypeOf(t) && t !== k ? t : k; +} + +// src/helpers.js +var T = (...t) => Object.prototype.hasOwnProperty.call(...t); +function A(t) { + return typeof t > "u"; +} +function X(t) { + let e = typeof t; + return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t); +} +function q(t, e) { + if (!t || !(t instanceof AbortSignal)) + return !0; + if (!t.aborted) + return t.addEventListener("abort", e), function() { + t.removeEventListener("abort", e); + }; +} +function F(t, e) { + let { observedAttributes: n = [] } = t.constructor; + return n.reduce(function(r, o) { + return r[pt(o)] = e(t, o), r; + }, {}); +} +function pt(t) { + return t.replace(/-./g, (e) => e[1].toUpperCase()); +} + +// src/dom-common.js +var d = { + setDeleteAttr: lt, + ssr: "", + D: globalThis.document, + F: globalThis.DocumentFragment, + H: globalThis.HTMLElement, + S: globalThis.SVGElement, + M: globalThis.MutationObserver +}; +function lt(t, e, n) { + if (Reflect.set(t, e, n), !!A(n)) { + if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") + return t.removeAttribute(e); + if (Reflect.get(t, e) === "undefined") + return Reflect.set(t, e, ""); + } +} +var C = "__dde_lifecyclesToEvents", y = "dde:connected", S = "dde:disconnected", P = "dde:attributeChanged"; + +// src/dom.js +var _ = [{ + get scope() { + return d.D.body; + }, + host: (t) => t ? t(d.D.body) : d.D.body, + prevent: !0 +}], m = { + get current() { + return _[_.length - 1]; + }, + get host() { + return this.current.host; + }, + preventDefault() { + let { current: t } = this; + return t.prevent = !0, t; + }, + get state() { + return [..._]; + }, + push(t = {}) { + return _.push(Object.assign({}, this.current, { prevent: !1 }, t)); + }, + pushRoot() { + return _.push(_[0]); + }, + pop() { + if (_.length !== 1) + return _.pop(); + } +}; +function Y(...t) { + return this.appendOriginal(...t), this; +} +function ht(t) { + return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; +} +var $; +function M(t, e, ...n) { + let r = W(this), o = 0, c, s; + switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) { + case typeof t == "function": { + o = 1, m.push({ scope: t, host: (...g) => g.length ? (o === 1 ? n.unshift(...g) : g.forEach((l) => l(s)), void 0) : s }), c = t(e || void 0); + let a = c instanceof d.F; + if (c.nodeName === "#comment") + break; + let h = M.mark({ + type: "component", + name: t.name, + host: a ? "this" : "parentElement" + }); + c.prepend(h), a && (s = h); + break; + } + case t === "#text": + c = j.call(this, d.D.createTextNode(""), e); + break; + case (t === "<>" || !t): + c = j.call(this, d.D.createDocumentFragment(), e); + break; + case !!$: + c = j.call(this, d.D.createElementNS($, t), e); + break; + case !c: + c = j.call(this, d.D.createElement(t), e); + } + return ht(c), s || (s = c), n.forEach((a) => a(s)), o && m.pop(), o = 2, c; +} +function Wt(t, e = t, n = void 0) { + let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((s, a) => Reflect.set(s, a.name || r, a) && s, {}), c = T(o, r); + if (t.append = new Proxy(t.append, { + apply(s, a, h) { + if (!h.length) + return t; + let g = d.D.createDocumentFragment(); + for (let l of h) { + if (!l || !l.slot) { + c && g.appendChild(l); + continue; + } + let x = l.slot, w = o[x]; + gt(l, "remove", "slot"), w && (bt(w, l, n), Reflect.deleteProperty(o, x)); + } + return c && (o[r].replaceWith(g), Reflect.deleteProperty(o, r)), t.append = s, t; + } + }), t !== e) { + let s = Array.from(t.childNodes); + s.forEach((a) => a.remove()), t.append(...s); + } + return e; +} +function bt(t, e, n) { + n && n(t, e); + try { + t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + } catch { + t.replaceWith(e); + } +} +M.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 qt(t) { + let e = this; + return function(...r) { + $ = t; + let o = M.call(e, ...r); + return $ = void 0, o; + }; +} +var U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d; +function j(t, ...e) { + if (!e.length) + return t; + U.set(t, rt(t, this)); + for (let [n, r] of Object.entries(Object.assign({}, ...e))) + nt.call(this, t, n, r); + return U.delete(t), t; +} +function nt(t, e, n) { + let { setRemoveAttr: r, s: o } = rt(t, this), c = this; + n = o.processReactiveAttribute( + t, + e, + n, + (a, h) => nt.call(c, t, a, h) + ); + let [s] = e; + if (s === "=") + return r(e.slice(1), n); + if (s === ".") + return et(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 tt(t, e, n); + case "style": + if (typeof n != "object") + break; + case "dataset": + return I(o, n, et.bind(null, t[e])); + case "ariaset": + return I(o, n, (a, h) => r("aria-" + a, h)); + case "classList": + return vt.call(c, t, n); + } + return Et(t, e) ? tt(t, e, n) : r(e, n); +} +function rt(t, e) { + if (U.has(t)) + return U.get(t); + let r = (t instanceof d.S ? xt : mt).bind(null, t, "Attribute"), o = W(e); + return { setRemoveAttr: r, s: o }; +} +function vt(t, e) { + let n = W(this); + return I( + n, + e, + (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) + ), t; +} +function Ft(t) { + return Array.from(t.children).forEach((e) => e.remove()), t; +} +function gt(t, e, n, r) { + return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); +} +function Et(t, e) { + if (!(e in t)) + return !1; + let n = ot(t, e); + return !A(n.set); +} +function ot(t, e) { + if (t = Object.getPrototypeOf(t), !t) + return {}; + let n = Object.getOwnPropertyDescriptor(t, e); + return n || ot(t, e); +} +function I(t, e, n) { + if (!(typeof e != "object" || e === null)) + return Object.entries(e).forEach(function([o, c]) { + o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); + }); +} +function ct(t) { + return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; +} +function mt(t, e, n, r) { + return t[(A(r) ? "remove" : "set") + e](n, ct(r)); +} +function xt(t, e, n, r, o = null) { + return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, ct(r)); +} +function et(t, e, n) { + if (Reflect.set(t, e, n), !!A(n)) + return Reflect.deleteProperty(t, e); +} + +// src/events-observer.js +var D = d.M ? Ot() : new Proxy({}, { + get() { + return () => { + }; + } +}); +function Ot() { + let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { + for (let f of u) + if (f.type === "childList") { + if (l(f.addedNodes, !0)) { + i(); + continue; + } + x(f.removedNodes, !0) && i(); + } + }, r = new d.M(n(a)); + return { + observe(i) { + let u = new d.M(n(() => { + })); + return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect(); + }, + onConnected(i, u) { + s(); + let f = c(i); + f.connected.has(u) || (f.connected.add(u), f.length_c += 1); + }, + offConnected(i, u) { + if (!t.has(i)) + return; + let f = t.get(i); + f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(i, f)); + }, + onDisconnected(i, u) { + s(); + let f = c(i); + f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1); + }, + offDisconnected(i, u) { + if (!t.has(i)) + return; + let f = t.get(i); + f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(i, f)); + } + }; + function o(i, u) { + u.length_c || u.length_d || (t.delete(i), a()); + } + function c(i) { + if (t.has(i)) + return t.get(i); + let u = { + connected: /* @__PURE__ */ new WeakSet(), + length_c: 0, + disconnected: /* @__PURE__ */ new WeakSet(), + length_d: 0 + }; + return t.set(i, u), u; + } + function s() { + e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 })); + } + function a() { + !e || t.size || (e = !1, r.disconnect()); + } + function h() { + return new Promise(function(i) { + (requestIdleCallback || requestAnimationFrame)(i); + }); + } + async function g(i) { + t.size > 30 && await h(); + let u = []; + if (!(i instanceof Node)) + return u; + for (let f of t.keys()) + f === i || !(f instanceof Node) || i.contains(f) && u.push(f); + return u; + } + function l(i, u) { + let f = !1; + for (let b of i) { + if (u && g(b).then(l), !t.has(b)) + continue; + let N = t.get(b); + N.length_c && (b.dispatchEvent(new Event(y)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0); + } + return f; + } + function x(i, u) { + let f = !1; + for (let b of i) + u && g(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0); + return f; + } + function w(i) { + return () => { + i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i)); + }; + } +} + +// src/customElement.js +function Zt(t, e, n, r = yt) { + m.push({ + scope: t, + host: (...s) => s.length ? s.forEach((a) => a(t)) : t + }), typeof r == "function" && (r = r.call(t, t)); + let o = t[C]; + o || wt(t); + let c = n.call(t, r); + return o || t.dispatchEvent(new Event(y)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(S, D.observe(e), { once: !0 }), m.pop(), e.append(c); +} +function wt(t) { + return J(t.prototype, "connectedCallback", function(e, n, r) { + e.apply(n, r), n.dispatchEvent(new Event(y)); + }), J(t.prototype, "disconnectedCallback", function(e, n, r) { + e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( + () => !n.isConnected && n.dispatchEvent(new Event(S)) + ); + }), J(t.prototype, "attributeChangedCallback", function(e, n, r) { + let [o, , c] = r; + n.dispatchEvent(new CustomEvent(P, { + detail: [o, c] + })), e.apply(n, r); + }), t.prototype[C] = !0, t; +} +function J(t, e, n) { + t[e] = new Proxy(t[e] || (() => { + }), { apply: n }); +} +function yt(t) { + return F(t, (e, n) => e.getAttribute(n)); +} + +// src/events.js +function Qt(t, e, n) { + return e || (e = {}), function(o, ...c) { + n && (c.unshift(o), o = typeof n == "function" ? n() : n); + let s = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); + return o.dispatchEvent(s); + }; +} +function O(t, e, n) { + return function(o) { + return o.addEventListener(t, e, n), o; + }; +} +var st = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); +O.connected = function(t, e) { + return e = st(e), function(r) { + return r.addEventListener(y, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(y)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r); + }; +}; +O.disconnected = function(t, e) { + return e = st(e), function(r) { + return r.addEventListener(S, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; + }; +}; +var Z = /* @__PURE__ */ new WeakMap(); +O.disconnectedAsAbort = function(t) { + if (Z.has(t)) + return Z.get(t); + let e = new AbortController(); + return Z.set(t, e), t(O.disconnected(() => e.abort())), e; +}; +var _t = /* @__PURE__ */ new WeakSet(); +O.attributeChanged = function(t, e) { + return typeof e != "object" && (e = {}), function(r) { + if (r.addEventListener(P, t, e), r[C] || _t.has(r) || !d.M) + return r; + let o = new d.M(function(s) { + for (let { attributeName: a, target: h } of s) + h.dispatchEvent( + new CustomEvent(P, { detail: [a, h.getAttribute(a)] }) + ); + }); + return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; + }; +}; + +// src/observables-lib.js +var p = "__dde_observable"; +function z(t) { + try { + return T(t, p); + } catch { + return !1; + } +} +var H = [], v = /* @__PURE__ */ new WeakMap(); +function E(t, e) { + if (typeof t != "function") + return it(!1, t, e); + if (z(t)) + return t; + let n = it(!0), r = function() { + let [o, ...c] = v.get(r); + if (v.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length) + return; + let s = v.get(r); + for (let a of c) + s.has(a) || L(a, r); + }; + return v.set(n[p], r), v.set(r, /* @__PURE__ */ new Set([n])), r(), n; +} +E.action = function(t, e, ...n) { + let r = t[p], { actions: o } = r; + if (!o || !(e in o)) + throw new Error(`'${t}' has no action with name '${e}'!`); + if (o[e].apply(r, n), r.skip) + return delete r.skip; + r.listeners.forEach((c) => c(r.value)); +}; +E.on = function t(e, n, r = {}) { + let { signal: o } = r; + if (!(o && o.aborted)) { + if (Array.isArray(e)) + return e.forEach((c) => t(c, n, r)); + Q(e, n), o && o.addEventListener("abort", () => L(e, n)); + } +}; +E.symbols = { + //observable: mark, + onclear: Symbol.for("Observable.onclear") +}; +E.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), !v.has(o)) + return; + let c = v.get(o); + c.delete(n), !(c.size > 1) && (n.clear(...c), v.delete(o)); + }); + } +}; +var R = "__dde_reactive"; +E.el = function(t, e) { + let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); + o.append(n, r); + let { current: c } = m, s = {}, a = (h) => { + if (!n.parentNode || !r.parentNode) + return L(t, a); + let g = s; + s = {}, m.push(c); + let l = e(h, function(u, f) { + let b; + return T(g, u) ? (b = g[u], delete g[u]) : b = f(), s[u] = b, b; + }); + m.pop(), Array.isArray(l) || (l = [l]); + let x = document.createComment(""); + l.push(x), n.after(...l); + let w; + for (; (w = x.nextSibling) && w !== r; ) + w.remove(); + x.remove(), n.isConnected && At(c.host()); + }; + return Q(t, a), ft(t, a, n, e), a(t()), o; +}; +function At(t) { + !t || !t[R] || (requestIdleCallback || setTimeout)(function() { + t[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1)); + }); +} +var Ct = { + _set(t) { + this.value = t; + } +}; +function St(t) { + return function(e, n) { + let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct); + return t[n] = o, o; + }; +} +var G = "__dde_attributes"; +E.observedAttributes = function(t) { + let e = t[G] = {}, n = F(t, St(e)); + return O.attributeChanged(function({ detail: o }) { + /*! This maps attributes to observables (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/ + let [c, s] = o, a = this[G][c]; + if (a) + return E.action(a, "_set", s); + })(t), O.disconnected(function() { + /*! This removes all observables mapped to attributes (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/ + E.clear(...Object.values(this[G])); + })(t), n; +}; +var ut = { + isObservable: z, + processReactiveAttribute(t, e, n, r) { + if (!z(n)) + return n; + let o = (c) => { + if (!t.isConnected) + return L(n, o); + r(e, c); + }; + return Q(n, o), ft(n, o, t, e), n(); + } +}; +function ft(t, e, ...n) { + let { current: r } = m; + r.prevent || r.host(function(o) { + o[R] || (o[R] = [], O.disconnected( + () => ( + /*! + * Clears all Observables listeners added in the current scope/host (`O.el`, `assign`, …?). + * You can investigate the `__dde_reactive` key of the element. + * */ + o[R].forEach(([[c, s]]) => L(c, s, c[p] && c[p].host && c[p].host() === o)) + ) + )(o)), o[R].push([[t, e], ...n]); + }); +} +function it(t, e, n) { + let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r); + return at(r, e, n, t); +} +var Dt = Object.assign(/* @__PURE__ */ Object.create(null), { + stopPropagation() { + this.skip = !0; + } +}), V = class extends Error { + constructor() { + super(); + let [e, ...n] = this.stack.split(` +`), r = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4); + this.stack = n.find((o) => !o.includes(r)); + } +}; +function at(t, e, n, r = !1) { + let o = []; + X(n) !== "[object Object]" && (n = {}); + let { onclear: c } = E.symbols; + n[c] && (o.push(n[c]), delete n[c]); + let { host: s } = m; + return Reflect.defineProperty(t, p, { + value: { + value: e, + actions: n, + onclear: o, + host: s, + listeners: /* @__PURE__ */ new Set(), + defined: new V().stack, + readonly: r + }, + enumerable: !1, + writable: !1, + configurable: !0 + }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t; +} +function Rt() { + return H[H.length - 1]; +} +function K(t) { + if (!t[p]) + return; + let { value: e, listeners: n } = t[p], r = Rt(); + return r && n.add(r), v.has(r) && v.get(r).add(t), e; +} +function dt(t, e, n) { + if (!t[p]) + return; + let r = t[p]; + if (!(!n && r.value === e)) + return r.value = e, r.listeners.forEach((o) => o(e)), e; +} +function Q(t, e) { + if (t[p]) + return t[p].listeners.add(e); +} +function L(t, e, n) { + let r = t[p]; + if (!r) + return; + let o = r.listeners.delete(e); + if (n && !r.listeners.size) { + if (E.clear(t), !v.has(r)) + return o; + let c = v.get(r); + if (!v.has(c)) + return o; + v.get(c).forEach((s) => L(s, c, !0)); + } + return o; +} + +// observables.js +B(ut); + +globalThis.dde= { + O: E, + assign: j, + assignAttribute: nt, + chainableAppend: ht, + classListDeclarative: vt, + createElement: M, + createElementNS: qt, + customElementRender: Zt, + customElementWithDDE: wt, + dispatchEvent: Qt, + el: M, + elNS: qt, + elementAttribute: gt, + empty: Ft, + isObservable: z, + lifecyclesToEvents: wt, + observable: E, + observedAttributes: yt, + on: O, + registerReactivity: B, + scope: m, + simulateSlots: Wt }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index 8fb34ad..e91c83b 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,25 +1,473 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var C={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?Object.assign(C,t):(Object.setPrototypeOf(t,C),t)}function L(t){return C.isPrototypeOf(t)&&t!==C?t:C}var q=(...t)=>Object.prototype.hasOwnProperty.call(...t);function E(t){return typeof t>"u"}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function F(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 a={setDeleteAttr:K,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function K(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof a.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var x="__dde_lifecyclesToEvents",v="dde:connected",y="dde:disconnected",O="dde:attributeChanged";var g=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],R={get current(){return g[g.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...g]},push(t={}){return g.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return g.push(g[0])},pop(){if(g.length!==1)return g.pop()}};function $(...t){return this.appendOriginal(...t),this}function Q(t){return t.append===$||(t.appendOriginal=t.append,t.append=$),t}var T;function k(t,e,...n){let r=L(this),o=0,c,f;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,R.push({scope:t,host:(...b)=>b.length?(o===1?n.unshift(...b):b.forEach(l=>l(f)),void 0):f}),c=t(e||void 0);let d=c instanceof a.F;if(c.nodeName==="#comment")break;let p=k.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(p),d&&(f=p);break}case t==="#text":c=D.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=D.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=D.call(this,a.D.createElementNS(T,t),e);break;case!c:c=D.call(this,a.D.createElement(t),e)}return Q(c),f||(f=c),n.forEach(d=>d(f)),o&&R.pop(),o=2,c}function bt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((f,d)=>Reflect.set(f,d.name||r,d)&&f,{}),c=q(o,r);if(t.append=new Proxy(t.append,{apply(f,d,p){if(!p.length)return t;let b=a.D.createDocumentFragment();for(let l of p){if(!l||!l.slot){c&&b.appendChild(l);continue}let A=l.slot,_=o[A];tt(l,"remove","slot"),_&&(X(_,l,n),Reflect.deleteProperty(o,A))}return c&&(o[r].replaceWith(b),Reflect.deleteProperty(o,r)),t.append=f,t}}),t!==e){let f=Array.from(t.childNodes);f.forEach(d=>d.remove()),t.append(...f)}return e}function X(t,e,n){n&&n(t,e);try{t.replaceWith(D(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function vt(t){let e=this;return function(...r){T=t;let o=k.call(e,...r);return T=void 0,o}}var P=new WeakMap,{setDeleteAttr:U}=a;function D(t,...e){if(!e.length)return t;P.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))z.call(this,t,n,r);return P.delete(t),t}function z(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,p)=>z.call(c,t,d,p));let[f]=e;if(f==="=")return r(e.slice(1),n);if(f===".")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 M(o,n,H.bind(null,t[e]));case"ariaset":return M(o,n,(d,p)=>r("aria-"+d,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(P.has(t))return P.get(t);let r=(t instanceof a.S?rt:nt).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=L(this);return M(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function tt(t,e,n,r){return t instanceof 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=I(t,e);return!E(n.set)}function I(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||I(t,e)}function M(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function Z(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function nt(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,Z(r))}function rt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,Z(r))}function H(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}var w=a.M?ot():new Proxy({},{get(){return()=>{}}});function ot(){let t=new Map,e=!1,n=i=>function(u){for(let s of u)if(s.type==="childList"){if(l(s.addedNodes,!0)){i();continue}A(s.removedNodes,!0)&&i()}},r=new a.M(n(d));return{observe(i){let u=new a.M(n(()=>{}));return u.observe(i,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(i,u){f();let s=c(i);s.connected.has(u)||(s.connected.add(u),s.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let s=t.get(i);s.connected.has(u)&&(s.connected.delete(u),s.length_c-=1,o(i,s))},onDisconnected(i,u){f();let s=c(i);s.disconnected.has(u)||(s.disconnected.add(u),s.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let s=t.get(i);s.disconnected.has(u)&&(s.disconnected.delete(u),s.length_d-=1,o(i,s))}};function o(i,u){u.length_c||u.length_d||(t.delete(i),d())}function c(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function f(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function d(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function b(i){t.size>30&&await p();let u=[];if(!(i instanceof Node))return u;for(let s of t.keys())s===i||!(s instanceof Node)||i.contains(s)&&u.push(s);return u}function l(i,u){let s=!1;for(let h of i){if(u&&b(h).then(l),!t.has(h))continue;let m=t.get(h);m.length_c&&(h.dispatchEvent(new Event(v)),m.connected=new WeakSet,m.length_c=0,m.length_d||t.delete(h),s=!0)}return s}function A(i,u){let s=!1;for(let h of i)u&&b(h).then(A),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(_(h)),s=!0);return s}function _(i){return()=>{i.isConnected||(i.dispatchEvent(new Event(y)),t.delete(i))}}}function Ot(t,e,n,r=it){R.push({scope:t,host:(...f)=>f.length?f.forEach(d=>d(t)):t}),typeof r=="function"&&(r=r.call(t,t));let o=t[x];o||ct(t);let c=n.call(t,r);return o||t.dispatchEvent(new Event(v)),e.nodeType===11&&typeof e.mode=="string"&&t.addEventListener(y,w.observe(e),{once:!0}),R.pop(),e.append(c)}function ct(t){return W(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(v))}),W(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(y)))}),W(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(O,{detail:[o,c]})),e.apply(n,r)}),t.prototype[x]=!0,t}function W(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function it(t){return F(t,(e,n)=>e.getAttribute(n))}function _t(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let f=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(f)}}function S(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>Object.assign({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(v,t,e),r[x]?r:r.isConnected?(r.dispatchEvent(new Event(v)),r):(N(e.signal,()=>w.offConnected(r,t))&&w.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(y,t,e),r[x]||N(e.signal,()=>w.offDisconnected(r,t))&&w.onDisconnected(r,t),r}};var j=new WeakMap;S.disconnectedAsAbort=function(t){if(j.has(t))return j.get(t);let e=new AbortController;return j.set(t,e),t(S.disconnected(()=>e.abort())),e};var st=new WeakSet;S.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(O,t,e),r[x]||st.has(r)||!a.M)return r;let o=new a.M(function(f){for(let{attributeName:d,target:p}of f)p.dispatchEvent(new CustomEvent(O,{detail:[d,p.getAttribute(d)]}))});return N(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}}; -globalThis.dde= {assign: D, -assignAttribute: z, -chainableAppend: Q, -classListDeclarative: Y, -createElement: k, -createElementNS: vt, -customElementRender: Ot, -customElementWithDDE: ct, -dispatchEvent: _t, -el: k, -elNS: vt, -elementAttribute: tt, -empty: gt, -lifecyclesToEvents: ct, -observedAttributes: it, -on: S, -registerReactivity: V, -scope: R, -simulateSlots: bt +// src/observables-common.js +var C = { + isObservable(t) { + return !1; + }, + processReactiveAttribute(t, e, n, r) { + return n; + } +}; +function V(t, e = !0) { + return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); +} +function L(t) { + return C.isPrototypeOf(t) && t !== C ? t : C; +} + +// src/helpers.js +var q = (...t) => Object.prototype.hasOwnProperty.call(...t); +function E(t) { + return typeof t > "u"; +} +function N(t, e) { + if (!t || !(t instanceof AbortSignal)) + return !0; + if (!t.aborted) + return t.addEventListener("abort", e), function() { + t.removeEventListener("abort", e); + }; +} +function F(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()); +} + +// src/dom-common.js +var a = { + setDeleteAttr: K, + ssr: "", + D: globalThis.document, + F: globalThis.DocumentFragment, + H: globalThis.HTMLElement, + S: globalThis.SVGElement, + M: globalThis.MutationObserver +}; +function K(t, e, n) { + if (Reflect.set(t, e, n), !!E(n)) { + if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") + return t.removeAttribute(e); + if (Reflect.get(t, e) === "undefined") + return Reflect.set(t, e, ""); + } +} +var x = "__dde_lifecyclesToEvents", v = "dde:connected", y = "dde:disconnected", O = "dde:attributeChanged"; + +// src/dom.js +var g = [{ + get scope() { + return a.D.body; + }, + host: (t) => t ? t(a.D.body) : a.D.body, + prevent: !0 +}], R = { + get current() { + return g[g.length - 1]; + }, + get host() { + return this.current.host; + }, + preventDefault() { + let { current: t } = this; + return t.prevent = !0, t; + }, + get state() { + return [...g]; + }, + push(t = {}) { + return g.push(Object.assign({}, this.current, { prevent: !1 }, t)); + }, + pushRoot() { + return g.push(g[0]); + }, + pop() { + if (g.length !== 1) + return g.pop(); + } +}; +function $(...t) { + return this.appendOriginal(...t), this; +} +function Q(t) { + return t.append === $ || (t.appendOriginal = t.append, t.append = $), t; +} +var T; +function k(t, e, ...n) { + let r = L(this), o = 0, c, f; + switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) { + case typeof t == "function": { + o = 1, R.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0); + let d = c instanceof a.F; + if (c.nodeName === "#comment") + break; + let p = k.mark({ + type: "component", + name: t.name, + host: d ? "this" : "parentElement" + }); + c.prepend(p), d && (f = p); + break; + } + case t === "#text": + c = D.call(this, a.D.createTextNode(""), e); + break; + case (t === "<>" || !t): + c = D.call(this, a.D.createDocumentFragment(), e); + break; + case !!T: + c = D.call(this, a.D.createElementNS(T, t), e); + break; + case !c: + c = D.call(this, a.D.createElement(t), e); + } + return Q(c), f || (f = c), n.forEach((d) => d(f)), o && R.pop(), o = 2, c; +} +function bt(t, e = t, n = void 0) { + let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r); + if (t.append = new Proxy(t.append, { + apply(f, d, p) { + if (!p.length) + return t; + let b = a.D.createDocumentFragment(); + for (let l of p) { + if (!l || !l.slot) { + c && b.appendChild(l); + continue; + } + let A = l.slot, _ = o[A]; + tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, A)); + } + return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t; + } + }), t !== e) { + let f = Array.from(t.childNodes); + f.forEach((d) => d.remove()), t.append(...f); + } + return e; +} +function X(t, e, n) { + n && n(t, e); + try { + t.replaceWith(D(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + } catch { + t.replaceWith(e); + } +} +k.mark = function(t, e = !1) { + t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); + let n = e ? "" : "/", r = a.D.createComment(``); + return e && (r.end = a.D.createComment("")), r; +}; +function vt(t) { + let e = this; + return function(...r) { + T = t; + let o = k.call(e, ...r); + return T = void 0, o; + }; +} +var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a; +function D(t, ...e) { + if (!e.length) + return t; + P.set(t, B(t, this)); + for (let [n, r] of Object.entries(Object.assign({}, ...e))) + z.call(this, t, n, r); + return P.delete(t), t; +} +function z(t, e, n) { + let { setRemoveAttr: r, s: o } = B(t, this), c = this; + n = o.processReactiveAttribute( + t, + e, + n, + (d, p) => z.call(c, t, d, p) + ); + let [f] = e; + if (f === "=") + return r(e.slice(1), n); + if (f === ".") + 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 M(o, n, H.bind(null, t[e])); + case "ariaset": + return M(o, n, (d, p) => r("aria-" + d, 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 (P.has(t)) + return P.get(t); + let r = (t instanceof a.S ? rt : nt).bind(null, t, "Attribute"), o = L(e); + return { setRemoveAttr: r, s: o }; +} +function Y(t, e) { + let n = L(this); + return M( + n, + e, + (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) + ), t; +} +function gt(t) { + return Array.from(t.children).forEach((e) => e.remove()), t; +} +function tt(t, e, n, r) { + return t instanceof 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 = I(t, e); + return !E(n.set); +} +function I(t, e) { + if (t = Object.getPrototypeOf(t), !t) + return {}; + let n = Object.getOwnPropertyDescriptor(t, e); + return n || I(t, e); +} +function M(t, e, n) { + if (!(typeof e != "object" || e === null)) + return Object.entries(e).forEach(function([o, c]) { + o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); + }); +} +function Z(t) { + return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; +} +function nt(t, e, n, r) { + return t[(E(r) ? "remove" : "set") + e](n, Z(r)); +} +function rt(t, e, n, r, o = null) { + return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); +} +function H(t, e, n) { + if (Reflect.set(t, e, n), !!E(n)) + return Reflect.deleteProperty(t, e); +} + +// src/events-observer.js +var w = a.M ? ot() : new Proxy({}, { + get() { + return () => { + }; + } +}); +function ot() { + let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { + for (let s of u) + if (s.type === "childList") { + if (l(s.addedNodes, !0)) { + i(); + continue; + } + A(s.removedNodes, !0) && i(); + } + }, r = new a.M(n(d)); + return { + observe(i) { + let u = new a.M(n(() => { + })); + return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect(); + }, + onConnected(i, u) { + f(); + let s = c(i); + s.connected.has(u) || (s.connected.add(u), s.length_c += 1); + }, + offConnected(i, u) { + if (!t.has(i)) + return; + let s = t.get(i); + s.connected.has(u) && (s.connected.delete(u), s.length_c -= 1, o(i, s)); + }, + onDisconnected(i, u) { + f(); + let s = c(i); + s.disconnected.has(u) || (s.disconnected.add(u), s.length_d += 1); + }, + offDisconnected(i, u) { + if (!t.has(i)) + return; + let s = t.get(i); + s.disconnected.has(u) && (s.disconnected.delete(u), s.length_d -= 1, o(i, s)); + } + }; + function o(i, u) { + u.length_c || u.length_d || (t.delete(i), d()); + } + function c(i) { + if (t.has(i)) + return t.get(i); + let u = { + connected: /* @__PURE__ */ new WeakSet(), + length_c: 0, + disconnected: /* @__PURE__ */ new WeakSet(), + length_d: 0 + }; + return t.set(i, u), u; + } + function f() { + e || (e = !0, r.observe(a.D.body, { childList: !0, subtree: !0 })); + } + function d() { + !e || t.size || (e = !1, r.disconnect()); + } + function p() { + return new Promise(function(i) { + (requestIdleCallback || requestAnimationFrame)(i); + }); + } + async function b(i) { + t.size > 30 && await p(); + let u = []; + if (!(i instanceof Node)) + return u; + for (let s of t.keys()) + s === i || !(s instanceof Node) || i.contains(s) && u.push(s); + return u; + } + function l(i, u) { + let s = !1; + for (let h of i) { + if (u && b(h).then(l), !t.has(h)) + continue; + let m = t.get(h); + m.length_c && (h.dispatchEvent(new Event(v)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0); + } + return s; + } + function A(i, u) { + let s = !1; + for (let h of i) + u && b(h).then(A), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0); + return s; + } + function _(i) { + return () => { + i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); + }; + } +} + +// src/customElement.js +function Ot(t, e, n, r = it) { + R.push({ + scope: t, + host: (...f) => f.length ? f.forEach((d) => d(t)) : t + }), typeof r == "function" && (r = r.call(t, t)); + let o = t[x]; + o || ct(t); + let c = n.call(t, r); + return o || t.dispatchEvent(new Event(v)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), R.pop(), e.append(c); +} +function ct(t) { + return W(t.prototype, "connectedCallback", function(e, n, r) { + e.apply(n, r), n.dispatchEvent(new Event(v)); + }), W(t.prototype, "disconnectedCallback", function(e, n, r) { + e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( + () => !n.isConnected && n.dispatchEvent(new Event(y)) + ); + }), W(t.prototype, "attributeChangedCallback", function(e, n, r) { + let [o, , c] = r; + n.dispatchEvent(new CustomEvent(O, { + detail: [o, c] + })), e.apply(n, r); + }), t.prototype[x] = !0, t; +} +function W(t, e, n) { + t[e] = new Proxy(t[e] || (() => { + }), { apply: n }); +} +function it(t) { + return F(t, (e, n) => e.getAttribute(n)); +} + +// src/events.js +function _t(t, e, n) { + return e || (e = {}), function(o, ...c) { + n && (c.unshift(o), o = typeof n == "function" ? n() : n); + let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); + return o.dispatchEvent(f); + }; +} +function S(t, e, n) { + return function(o) { + return o.addEventListener(t, e, n), o; + }; +} +var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); +S.connected = function(t, e) { + return e = G(e), function(r) { + return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r); + }; +}; +S.disconnected = function(t, e) { + return e = G(e), function(r) { + return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r; + }; +}; +var j = /* @__PURE__ */ new WeakMap(); +S.disconnectedAsAbort = function(t) { + if (j.has(t)) + return j.get(t); + let e = new AbortController(); + return j.set(t, e), t(S.disconnected(() => e.abort())), e; +}; +var st = /* @__PURE__ */ new WeakSet(); +S.attributeChanged = function(t, e) { + return typeof e != "object" && (e = {}), function(r) { + if (r.addEventListener(O, t, e), r[x] || st.has(r) || !a.M) + return r; + let o = new a.M(function(f) { + for (let { attributeName: d, target: p } of f) + p.dispatchEvent( + new CustomEvent(O, { detail: [d, p.getAttribute(d)] }) + ); + }); + return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; + }; +}; + +globalThis.dde= { + assign: D, + assignAttribute: z, + chainableAppend: Q, + classListDeclarative: Y, + createElement: k, + createElementNS: vt, + customElementRender: Ot, + customElementWithDDE: ct, + dispatchEvent: _t, + el: k, + elNS: vt, + elementAttribute: tt, + empty: gt, + lifecyclesToEvents: ct, + observedAttributes: it, + on: S, + registerReactivity: V, + scope: R, + simulateSlots: bt }; })(); \ No newline at end of file diff --git a/dist/esm-with-observables.js b/dist/esm-with-observables.js index 575dc7f..a165f83 100644 --- a/dist/esm-with-observables.js +++ b/dist/esm-with-observables.js @@ -1,4 +1,691 @@ -var N={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function B(t,e=!0){return e?Object.assign(N,t):(Object.setPrototypeOf(t,N),t)}function W(t){return N.isPrototypeOf(t)&&t!==N?t:N}var T=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function Q(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function q(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function F(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[pt(o)]=e(t,o),r},{})}function pt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:lt,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function lt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),t instanceof d.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",O="dde:connected",S="dde:disconnected",P="dde:attributeChanged";var w=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],m={get current(){return w[w.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...w]},push(t={}){return w.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return w.push(w[0])},pop(){if(w.length!==1)return w.pop()}};function X(...t){return this.appendOriginal(...t),this}function ht(t){return t.append===X||(t.appendOriginal=t.append,t.append=X),t}var $;function M(t,e,...n){let r=W(this),o=0,c,s;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,m.push({scope:t,host:(...g)=>g.length?(o===1?n.unshift(...g):g.forEach(p=>p(s)),void 0):s}),c=t(e||void 0);let a=c instanceof d.F;if(c.nodeName==="#comment")break;let h=M.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(h),a&&(s=h);break}case t==="#text":c=j.call(this,d.D.createTextNode(""),e);break;case(t==="<>"||!t):c=j.call(this,d.D.createDocumentFragment(),e);break;case!!$:c=j.call(this,d.D.createElementNS($,t),e);break;case!c:c=j.call(this,d.D.createElement(t),e)}return ht(c),s||(s=c),n.forEach(a=>a(s)),o&&m.pop(),o=2,c}function Wt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((s,a)=>Reflect.set(s,a.name||r,a)&&s,{}),c=T(o,r);if(t.append=new Proxy(t.append,{apply(s,a,h){if(!h.length)return t;let g=d.D.createDocumentFragment();for(let p of h){if(!p||!p.slot){c&&g.appendChild(p);continue}let y=p.slot,_=o[y];gt(p,"remove","slot"),_&&(bt(_,p,n),Reflect.deleteProperty(o,y))}return c&&(o[r].replaceWith(g),Reflect.deleteProperty(o,r)),t.append=s,t}}),t!==e){let s=Array.from(t.childNodes);s.forEach(a=>a.remove()),t.append(...s)}return e}function bt(t,e,n){n&&n(t,e);try{t.replaceWith(j(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}M.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 qt(t){let e=this;return function(...r){$=t;let o=M.call(e,...r);return $=void 0,o}}var U=new WeakMap,{setDeleteAttr:Y}=d;function j(t,...e){if(!e.length)return t;U.set(t,nt(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))et.call(this,t,n,r);return U.delete(t),t}function et(t,e,n){let{setRemoveAttr:r,s:o}=nt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,h)=>et.call(c,t,a,h));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return tt(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 Y(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return I(o,n,tt.bind(null,t[e]));case"ariaset":return I(o,n,(a,h)=>r("aria-"+a,h));case"classList":return vt.call(c,t,n)}return Et(t,e)?Y(t,e,n):r(e,n)}function nt(t,e){if(U.has(t))return U.get(t);let r=(t instanceof d.S?xt:mt).bind(null,t,"Attribute"),o=W(e);return{setRemoveAttr:r,s:o}}function vt(t,e){let n=W(this);return I(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ft(t){return Array.from(t.children).forEach(e=>e.remove()),t}function gt(t,e,n,r){return t instanceof d.H?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Et(t,e){if(!(e in t))return!1;let n=rt(t,e);return!A(n.set)}function rt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||rt(t,e)}function I(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function ot(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function mt(t,e,n,r){return t[(A(r)?"remove":"set")+e](n,ot(r))}function xt(t,e,n,r,o=null){return t[(A(r)?"remove":"set")+e+"NS"](o,n,ot(r))}function tt(t,e,n){if(Reflect.set(t,e,n),!!A(n))return Reflect.deleteProperty(t,e)}var D=d.M?Ot():new Proxy({},{get(){return()=>{}}});function Ot(){let t=new Map,e=!1,n=i=>function(u){for(let f of u)if(f.type==="childList"){if(p(f.addedNodes,!0)){i();continue}y(f.removedNodes,!0)&&i()}},r=new d.M(n(a));return{observe(i){let u=new d.M(n(()=>{}));return u.observe(i,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(i,u){s();let f=c(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,o(i,f))},onDisconnected(i,u){s();let f=c(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,o(i,f))}};function o(i,u){u.length_c||u.length_d||(t.delete(i),a())}function c(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function s(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}function h(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function g(i){t.size>30&&await h();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function p(i,u){let f=!1;for(let b of i){if(u&&g(b).then(p),!t.has(b))continue;let L=t.get(b);L.length_c&&(b.dispatchEvent(new Event(O)),L.connected=new WeakSet,L.length_c=0,L.length_d||t.delete(b),f=!0)}return f}function y(i,u){let f=!1;for(let b of i)u&&g(b).then(y),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(_(b)),f=!0);return f}function _(i){return()=>{i.isConnected||(i.dispatchEvent(new Event(S)),t.delete(i))}}}function Zt(t,e,n,r=yt){m.push({scope:t,host:(...s)=>s.length?s.forEach(a=>a(t)):t}),typeof r=="function"&&(r=r.call(t,t));let o=t[C];o||wt(t);let c=n.call(t,r);return o||t.dispatchEvent(new Event(O)),e.nodeType===11&&typeof e.mode=="string"&&t.addEventListener(S,D.observe(e),{once:!0}),m.pop(),e.append(c)}function wt(t){return J(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(O))}),J(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(S)))}),J(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(P,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function J(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function yt(t){return F(t,(e,n)=>e.getAttribute(n))}function Qt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function x(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var ct=t=>Object.assign({},typeof t=="object"?t:null,{once:!0});x.connected=function(t,e){return e=ct(e),function(r){return r.addEventListener(O,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(O)),r):(q(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};x.disconnected=function(t,e){return e=ct(e),function(r){return r.addEventListener(S,t,e),r[C]||q(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var Z=new WeakMap;x.disconnectedAsAbort=function(t){if(Z.has(t))return Z.get(t);let e=new AbortController;return Z.set(t,e),t(x.disconnected(()=>e.abort())),e};var _t=new WeakSet;x.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(P,t,e),r[C]||_t.has(r)||!d.M)return r;let o=new d.M(function(s){for(let{attributeName:a,target:h}of s)h.dispatchEvent(new CustomEvent(P,{detail:[a,h.getAttribute(a)]}))});return q(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};var l="__dde_observable";function z(t){try{return T(t,l)}catch{return!1}}var H=[],v=new WeakMap;function E(t,e){if(typeof t!="function")return st(!1,t,e);if(z(t))return t;let n=st(!0),r=function(){let[o,...c]=v.get(r);if(v.set(r,new Set([o])),H.push(r),dt(n,t()),H.pop(),!c.length)return;let s=v.get(r);for(let a of c)s.has(a)||k(a,r)};return v.set(n[l],r),v.set(r,new Set([n])),r(),n}E.action=function(t,e,...n){let r=t[l],{actions:o}=r;if(!o||!(e in o))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return delete r.skip;r.listeners.forEach(c=>c(r.value))};E.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));K(e,n),o&&o.addEventListener("abort",()=>k(e,n))}};E.symbols={onclear:Symbol.for("Observable.onclear")};E.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),!v.has(o))return;let c=v.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),v.delete(o))})}};var R="__dde_reactive";E.el=function(t,e){let n=M.mark({type:"reactive"},!0),r=n.end,o=d.D.createDocumentFragment();o.append(n,r);let{current:c}=m,s={},a=h=>{if(!n.parentNode||!r.parentNode)return k(t,a);let g=s;s={},m.push(c);let p=e(h,function(u,f){let b;return T(g,u)?(b=g[u],delete g[u]):b=f(),s[u]=b,b});m.pop(),Array.isArray(p)||(p=[p]),n.after(...p);let y=p[p.length-1],_;for(;(_=y.nextSibling)!==r;)_.remove();n.isConnected&&At(c.host())};return K(t,a),ft(t,a,n,e),a(t()),o};function At(t){!t||!t[R]||(requestIdleCallback||setTimeout)(function(){t[R]=t[R].filter(([e,n])=>n.isConnected?!0:(k(...e),!1))})}var Ct={_set(t){this.value=t}};function St(t){return function(e,n){let r=(...c)=>c.length?e.setAttribute(n,...c):e.getAttribute(n),o=at(r,r(),Ct);return t[n]=o,o}}var G="__dde_attributes";E.observedAttributes=function(t){let e=t[G]={},n=F(t,St(e));return x.attributeChanged(function({detail:o}){/*! This maps attributes to observables (`O.observedAttributes`). - * Investigate `__dde_attributes` key of the element.*/let[c,s]=o,a=this[G][c];if(a)return E.action(a,"_set",s)})(t),x.disconnected(function(){/*! This removes all observables mapped to attributes (`O.observedAttributes`). - * Investigate `__dde_attributes` key of the element.*/E.clear(...Object.values(this[G]))})(t),n};var ut={isObservable:z,processReactiveAttribute(t,e,n,r){if(!z(n))return n;let o=c=>{if(!t.isConnected)return k(n,o);r(e,c)};return K(n,o),ft(n,o,t,e),n()}};function ft(t,e,...n){let{current:r}=m;r.prevent||r.host(function(o){o[R]||(o[R]=[],x.disconnected(()=>o[R].forEach(([[c,s]])=>k(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)),o[R].push([[t,e],...n])})}function st(t,e,n){let r=t?()=>it(r):(...o)=>o.length?dt(r,...o):it(r);return at(r,e,n,t)}var Dt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),V=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function at(t,e,n,r=!1){let o=[];Q(n)!=="[object Object]"&&(n={});let{onclear:c}=E.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=m;return Reflect.defineProperty(t,l,{value:{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new V().stack,readonly:r},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[l],Dt),t}function Rt(){return H[H.length-1]}function it(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=Rt();return r&&n.add(r),v.has(r)&&v.get(r).add(t),e}function dt(t,e,n){if(!t[l])return;let r=t[l];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function K(t,e){if(t[l])return t[l].listeners.add(e)}function k(t,e,n){let r=t[l];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(E.clear(t),!v.has(r))return o;let c=v.get(r);if(!v.has(c))return o;v.get(c).forEach(s=>k(s,c,!0))}return o}B(ut);export{E as O,j as assign,et as assignAttribute,ht as chainableAppend,vt as classListDeclarative,M as createElement,qt as createElementNS,Zt as customElementRender,wt as customElementWithDDE,Qt as dispatchEvent,M as el,qt as elNS,gt as elementAttribute,Ft as empty,z as isObservable,wt as lifecyclesToEvents,E as observable,yt as observedAttributes,x as on,B as registerReactivity,m as scope,Wt as simulateSlots}; +// src/observables-common.js +var k = { + isObservable(t) { + return !1; + }, + processReactiveAttribute(t, e, n, r) { + return n; + } +}; +function B(t, e = !0) { + return e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t); +} +function W(t) { + return k.isPrototypeOf(t) && t !== k ? t : k; +} + +// src/helpers.js +var T = (...t) => Object.prototype.hasOwnProperty.call(...t); +function A(t) { + return typeof t > "u"; +} +function X(t) { + let e = typeof t; + return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t); +} +function q(t, e) { + if (!t || !(t instanceof AbortSignal)) + return !0; + if (!t.aborted) + return t.addEventListener("abort", e), function() { + t.removeEventListener("abort", e); + }; +} +function F(t, e) { + let { observedAttributes: n = [] } = t.constructor; + return n.reduce(function(r, o) { + return r[pt(o)] = e(t, o), r; + }, {}); +} +function pt(t) { + return t.replace(/-./g, (e) => e[1].toUpperCase()); +} + +// src/dom-common.js +var d = { + setDeleteAttr: lt, + ssr: "", + D: globalThis.document, + F: globalThis.DocumentFragment, + H: globalThis.HTMLElement, + S: globalThis.SVGElement, + M: globalThis.MutationObserver +}; +function lt(t, e, n) { + if (Reflect.set(t, e, n), !!A(n)) { + if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") + return t.removeAttribute(e); + if (Reflect.get(t, e) === "undefined") + return Reflect.set(t, e, ""); + } +} +var C = "__dde_lifecyclesToEvents", y = "dde:connected", S = "dde:disconnected", P = "dde:attributeChanged"; + +// src/dom.js +var _ = [{ + get scope() { + return d.D.body; + }, + host: (t) => t ? t(d.D.body) : d.D.body, + prevent: !0 +}], m = { + get current() { + return _[_.length - 1]; + }, + get host() { + return this.current.host; + }, + preventDefault() { + let { current: t } = this; + return t.prevent = !0, t; + }, + get state() { + return [..._]; + }, + push(t = {}) { + return _.push(Object.assign({}, this.current, { prevent: !1 }, t)); + }, + pushRoot() { + return _.push(_[0]); + }, + pop() { + if (_.length !== 1) + return _.pop(); + } +}; +function Y(...t) { + return this.appendOriginal(...t), this; +} +function ht(t) { + return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; +} +var $; +function M(t, e, ...n) { + let r = W(this), o = 0, c, s; + switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) { + case typeof t == "function": { + o = 1, m.push({ scope: t, host: (...g) => g.length ? (o === 1 ? n.unshift(...g) : g.forEach((l) => l(s)), void 0) : s }), c = t(e || void 0); + let a = c instanceof d.F; + if (c.nodeName === "#comment") + break; + let h = M.mark({ + type: "component", + name: t.name, + host: a ? "this" : "parentElement" + }); + c.prepend(h), a && (s = h); + break; + } + case t === "#text": + c = j.call(this, d.D.createTextNode(""), e); + break; + case (t === "<>" || !t): + c = j.call(this, d.D.createDocumentFragment(), e); + break; + case !!$: + c = j.call(this, d.D.createElementNS($, t), e); + break; + case !c: + c = j.call(this, d.D.createElement(t), e); + } + return ht(c), s || (s = c), n.forEach((a) => a(s)), o && m.pop(), o = 2, c; +} +function Wt(t, e = t, n = void 0) { + let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((s, a) => Reflect.set(s, a.name || r, a) && s, {}), c = T(o, r); + if (t.append = new Proxy(t.append, { + apply(s, a, h) { + if (!h.length) + return t; + let g = d.D.createDocumentFragment(); + for (let l of h) { + if (!l || !l.slot) { + c && g.appendChild(l); + continue; + } + let x = l.slot, w = o[x]; + gt(l, "remove", "slot"), w && (bt(w, l, n), Reflect.deleteProperty(o, x)); + } + return c && (o[r].replaceWith(g), Reflect.deleteProperty(o, r)), t.append = s, t; + } + }), t !== e) { + let s = Array.from(t.childNodes); + s.forEach((a) => a.remove()), t.append(...s); + } + return e; +} +function bt(t, e, n) { + n && n(t, e); + try { + t.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + } catch { + t.replaceWith(e); + } +} +M.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 qt(t) { + let e = this; + return function(...r) { + $ = t; + let o = M.call(e, ...r); + return $ = void 0, o; + }; +} +var U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d; +function j(t, ...e) { + if (!e.length) + return t; + U.set(t, rt(t, this)); + for (let [n, r] of Object.entries(Object.assign({}, ...e))) + nt.call(this, t, n, r); + return U.delete(t), t; +} +function nt(t, e, n) { + let { setRemoveAttr: r, s: o } = rt(t, this), c = this; + n = o.processReactiveAttribute( + t, + e, + n, + (a, h) => nt.call(c, t, a, h) + ); + let [s] = e; + if (s === "=") + return r(e.slice(1), n); + if (s === ".") + return et(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 tt(t, e, n); + case "style": + if (typeof n != "object") + break; + case "dataset": + return I(o, n, et.bind(null, t[e])); + case "ariaset": + return I(o, n, (a, h) => r("aria-" + a, h)); + case "classList": + return vt.call(c, t, n); + } + return Et(t, e) ? tt(t, e, n) : r(e, n); +} +function rt(t, e) { + if (U.has(t)) + return U.get(t); + let r = (t instanceof d.S ? xt : mt).bind(null, t, "Attribute"), o = W(e); + return { setRemoveAttr: r, s: o }; +} +function vt(t, e) { + let n = W(this); + return I( + n, + e, + (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) + ), t; +} +function Ft(t) { + return Array.from(t.children).forEach((e) => e.remove()), t; +} +function gt(t, e, n, r) { + return t instanceof d.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); +} +function Et(t, e) { + if (!(e in t)) + return !1; + let n = ot(t, e); + return !A(n.set); +} +function ot(t, e) { + if (t = Object.getPrototypeOf(t), !t) + return {}; + let n = Object.getOwnPropertyDescriptor(t, e); + return n || ot(t, e); +} +function I(t, e, n) { + if (!(typeof e != "object" || e === null)) + return Object.entries(e).forEach(function([o, c]) { + o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); + }); +} +function ct(t) { + return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; +} +function mt(t, e, n, r) { + return t[(A(r) ? "remove" : "set") + e](n, ct(r)); +} +function xt(t, e, n, r, o = null) { + return t[(A(r) ? "remove" : "set") + e + "NS"](o, n, ct(r)); +} +function et(t, e, n) { + if (Reflect.set(t, e, n), !!A(n)) + return Reflect.deleteProperty(t, e); +} + +// src/events-observer.js +var D = d.M ? Ot() : new Proxy({}, { + get() { + return () => { + }; + } +}); +function Ot() { + let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { + for (let f of u) + if (f.type === "childList") { + if (l(f.addedNodes, !0)) { + i(); + continue; + } + x(f.removedNodes, !0) && i(); + } + }, r = new d.M(n(a)); + return { + observe(i) { + let u = new d.M(n(() => { + })); + return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect(); + }, + onConnected(i, u) { + s(); + let f = c(i); + f.connected.has(u) || (f.connected.add(u), f.length_c += 1); + }, + offConnected(i, u) { + if (!t.has(i)) + return; + let f = t.get(i); + f.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(i, f)); + }, + onDisconnected(i, u) { + s(); + let f = c(i); + f.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1); + }, + offDisconnected(i, u) { + if (!t.has(i)) + return; + let f = t.get(i); + f.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(i, f)); + } + }; + function o(i, u) { + u.length_c || u.length_d || (t.delete(i), a()); + } + function c(i) { + if (t.has(i)) + return t.get(i); + let u = { + connected: /* @__PURE__ */ new WeakSet(), + length_c: 0, + disconnected: /* @__PURE__ */ new WeakSet(), + length_d: 0 + }; + return t.set(i, u), u; + } + function s() { + e || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 })); + } + function a() { + !e || t.size || (e = !1, r.disconnect()); + } + function h() { + return new Promise(function(i) { + (requestIdleCallback || requestAnimationFrame)(i); + }); + } + async function g(i) { + t.size > 30 && await h(); + let u = []; + if (!(i instanceof Node)) + return u; + for (let f of t.keys()) + f === i || !(f instanceof Node) || i.contains(f) && u.push(f); + return u; + } + function l(i, u) { + let f = !1; + for (let b of i) { + if (u && g(b).then(l), !t.has(b)) + continue; + let N = t.get(b); + N.length_c && (b.dispatchEvent(new Event(y)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0); + } + return f; + } + function x(i, u) { + let f = !1; + for (let b of i) + u && g(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0); + return f; + } + function w(i) { + return () => { + i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i)); + }; + } +} + +// src/customElement.js +function Zt(t, e, n, r = yt) { + m.push({ + scope: t, + host: (...s) => s.length ? s.forEach((a) => a(t)) : t + }), typeof r == "function" && (r = r.call(t, t)); + let o = t[C]; + o || wt(t); + let c = n.call(t, r); + return o || t.dispatchEvent(new Event(y)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(S, D.observe(e), { once: !0 }), m.pop(), e.append(c); +} +function wt(t) { + return J(t.prototype, "connectedCallback", function(e, n, r) { + e.apply(n, r), n.dispatchEvent(new Event(y)); + }), J(t.prototype, "disconnectedCallback", function(e, n, r) { + e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( + () => !n.isConnected && n.dispatchEvent(new Event(S)) + ); + }), J(t.prototype, "attributeChangedCallback", function(e, n, r) { + let [o, , c] = r; + n.dispatchEvent(new CustomEvent(P, { + detail: [o, c] + })), e.apply(n, r); + }), t.prototype[C] = !0, t; +} +function J(t, e, n) { + t[e] = new Proxy(t[e] || (() => { + }), { apply: n }); +} +function yt(t) { + return F(t, (e, n) => e.getAttribute(n)); +} + +// src/events.js +function Qt(t, e, n) { + return e || (e = {}), function(o, ...c) { + n && (c.unshift(o), o = typeof n == "function" ? n() : n); + let s = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); + return o.dispatchEvent(s); + }; +} +function O(t, e, n) { + return function(o) { + return o.addEventListener(t, e, n), o; + }; +} +var st = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); +O.connected = function(t, e) { + return e = st(e), function(r) { + return r.addEventListener(y, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(y)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r); + }; +}; +O.disconnected = function(t, e) { + return e = st(e), function(r) { + return r.addEventListener(S, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r; + }; +}; +var Z = /* @__PURE__ */ new WeakMap(); +O.disconnectedAsAbort = function(t) { + if (Z.has(t)) + return Z.get(t); + let e = new AbortController(); + return Z.set(t, e), t(O.disconnected(() => e.abort())), e; +}; +var _t = /* @__PURE__ */ new WeakSet(); +O.attributeChanged = function(t, e) { + return typeof e != "object" && (e = {}), function(r) { + if (r.addEventListener(P, t, e), r[C] || _t.has(r) || !d.M) + return r; + let o = new d.M(function(s) { + for (let { attributeName: a, target: h } of s) + h.dispatchEvent( + new CustomEvent(P, { detail: [a, h.getAttribute(a)] }) + ); + }); + return q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; + }; +}; + +// src/observables-lib.js +var p = "__dde_observable"; +function z(t) { + try { + return T(t, p); + } catch { + return !1; + } +} +var H = [], v = /* @__PURE__ */ new WeakMap(); +function E(t, e) { + if (typeof t != "function") + return it(!1, t, e); + if (z(t)) + return t; + let n = it(!0), r = function() { + let [o, ...c] = v.get(r); + if (v.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length) + return; + let s = v.get(r); + for (let a of c) + s.has(a) || L(a, r); + }; + return v.set(n[p], r), v.set(r, /* @__PURE__ */ new Set([n])), r(), n; +} +E.action = function(t, e, ...n) { + let r = t[p], { actions: o } = r; + if (!o || !(e in o)) + throw new Error(`'${t}' has no action with name '${e}'!`); + if (o[e].apply(r, n), r.skip) + return delete r.skip; + r.listeners.forEach((c) => c(r.value)); +}; +E.on = function t(e, n, r = {}) { + let { signal: o } = r; + if (!(o && o.aborted)) { + if (Array.isArray(e)) + return e.forEach((c) => t(c, n, r)); + Q(e, n), o && o.addEventListener("abort", () => L(e, n)); + } +}; +E.symbols = { + //observable: mark, + onclear: Symbol.for("Observable.onclear") +}; +E.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), !v.has(o)) + return; + let c = v.get(o); + c.delete(n), !(c.size > 1) && (n.clear(...c), v.delete(o)); + }); + } +}; +var R = "__dde_reactive"; +E.el = function(t, e) { + let n = M.mark({ type: "reactive" }, !0), r = n.end, o = d.D.createDocumentFragment(); + o.append(n, r); + let { current: c } = m, s = {}, a = (h) => { + if (!n.parentNode || !r.parentNode) + return L(t, a); + let g = s; + s = {}, m.push(c); + let l = e(h, function(u, f) { + let b; + return T(g, u) ? (b = g[u], delete g[u]) : b = f(), s[u] = b, b; + }); + m.pop(), Array.isArray(l) || (l = [l]); + let x = document.createComment(""); + l.push(x), n.after(...l); + let w; + for (; (w = x.nextSibling) && w !== r; ) + w.remove(); + x.remove(), n.isConnected && At(c.host()); + }; + return Q(t, a), ft(t, a, n, e), a(t()), o; +}; +function At(t) { + !t || !t[R] || (requestIdleCallback || setTimeout)(function() { + t[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1)); + }); +} +var Ct = { + _set(t) { + this.value = t; + } +}; +function St(t) { + return function(e, n) { + let r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct); + return t[n] = o, o; + }; +} +var G = "__dde_attributes"; +E.observedAttributes = function(t) { + let e = t[G] = {}, n = F(t, St(e)); + return O.attributeChanged(function({ detail: o }) { + /*! This maps attributes to observables (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/ + let [c, s] = o, a = this[G][c]; + if (a) + return E.action(a, "_set", s); + })(t), O.disconnected(function() { + /*! This removes all observables mapped to attributes (`O.observedAttributes`). + * Investigate `__dde_attributes` key of the element.*/ + E.clear(...Object.values(this[G])); + })(t), n; +}; +var ut = { + isObservable: z, + processReactiveAttribute(t, e, n, r) { + if (!z(n)) + return n; + let o = (c) => { + if (!t.isConnected) + return L(n, o); + r(e, c); + }; + return Q(n, o), ft(n, o, t, e), n(); + } +}; +function ft(t, e, ...n) { + let { current: r } = m; + r.prevent || r.host(function(o) { + o[R] || (o[R] = [], O.disconnected( + () => ( + /*! + * Clears all Observables listeners added in the current scope/host (`O.el`, `assign`, …?). + * You can investigate the `__dde_reactive` key of the element. + * */ + o[R].forEach(([[c, s]]) => L(c, s, c[p] && c[p].host && c[p].host() === o)) + ) + )(o)), o[R].push([[t, e], ...n]); + }); +} +function it(t, e, n) { + let r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r); + return at(r, e, n, t); +} +var Dt = Object.assign(/* @__PURE__ */ Object.create(null), { + stopPropagation() { + this.skip = !0; + } +}), V = class extends Error { + constructor() { + super(); + let [e, ...n] = this.stack.split(` +`), r = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4); + this.stack = n.find((o) => !o.includes(r)); + } +}; +function at(t, e, n, r = !1) { + let o = []; + X(n) !== "[object Object]" && (n = {}); + let { onclear: c } = E.symbols; + n[c] && (o.push(n[c]), delete n[c]); + let { host: s } = m; + return Reflect.defineProperty(t, p, { + value: { + value: e, + actions: n, + onclear: o, + host: s, + listeners: /* @__PURE__ */ new Set(), + defined: new V().stack, + readonly: r + }, + enumerable: !1, + writable: !1, + configurable: !0 + }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t; +} +function Rt() { + return H[H.length - 1]; +} +function K(t) { + if (!t[p]) + return; + let { value: e, listeners: n } = t[p], r = Rt(); + return r && n.add(r), v.has(r) && v.get(r).add(t), e; +} +function dt(t, e, n) { + if (!t[p]) + return; + let r = t[p]; + if (!(!n && r.value === e)) + return r.value = e, r.listeners.forEach((o) => o(e)), e; +} +function Q(t, e) { + if (t[p]) + return t[p].listeners.add(e); +} +function L(t, e, n) { + let r = t[p]; + if (!r) + return; + let o = r.listeners.delete(e); + if (n && !r.listeners.size) { + if (E.clear(t), !v.has(r)) + return o; + let c = v.get(r); + if (!v.has(c)) + return o; + v.get(c).forEach((s) => L(s, c, !0)); + } + return o; +} + +// observables.js +B(ut); +export { + E as O, + j as assign, + nt as assignAttribute, + ht as chainableAppend, + vt as classListDeclarative, + M as createElement, + qt as createElementNS, + Zt as customElementRender, + wt as customElementWithDDE, + Qt as dispatchEvent, + M as el, + qt as elNS, + gt as elementAttribute, + Ft as empty, + z as isObservable, + wt as lifecyclesToEvents, + E as observable, + yt as observedAttributes, + O as on, + B as registerReactivity, + m as scope, + Wt as simulateSlots +}; diff --git a/dist/esm.js b/dist/esm.js index a119dda..eb3699a 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1 +1,468 @@ -var C={isObservable(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?Object.assign(C,t):(Object.setPrototypeOf(t,C),t)}function L(t){return C.isPrototypeOf(t)&&t!==C?t:C}var q=(...t)=>Object.prototype.hasOwnProperty.call(...t);function E(t){return typeof t>"u"}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function F(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 a={setDeleteAttr:K,ssr:"",D:globalThis.document,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver};function K(t,e,n){if(Reflect.set(t,e,n),!!E(n)){if(Reflect.deleteProperty(t,e),t instanceof a.H&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var x="__dde_lifecyclesToEvents",v="dde:connected",y="dde:disconnected",O="dde:attributeChanged";var g=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],R={get current(){return g[g.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...g]},push(t={}){return g.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return g.push(g[0])},pop(){if(g.length!==1)return g.pop()}};function $(...t){return this.appendOriginal(...t),this}function Q(t){return t.append===$||(t.appendOriginal=t.append,t.append=$),t}var T;function k(t,e,...n){let r=L(this),o=0,c,f;switch((Object(e)!==e||r.isObservable(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,R.push({scope:t,host:(...b)=>b.length?(o===1?n.unshift(...b):b.forEach(l=>l(f)),void 0):f}),c=t(e||void 0);let d=c instanceof a.F;if(c.nodeName==="#comment")break;let p=k.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(p),d&&(f=p);break}case t==="#text":c=D.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=D.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=D.call(this,a.D.createElementNS(T,t),e);break;case!c:c=D.call(this,a.D.createElement(t),e)}return Q(c),f||(f=c),n.forEach(d=>d(f)),o&&R.pop(),o=2,c}function bt(t,e=t,n=void 0){let r=Symbol.for("default"),o=Array.from(e.querySelectorAll("slot")).reduce((f,d)=>Reflect.set(f,d.name||r,d)&&f,{}),c=q(o,r);if(t.append=new Proxy(t.append,{apply(f,d,p){if(!p.length)return t;let b=a.D.createDocumentFragment();for(let l of p){if(!l||!l.slot){c&&b.appendChild(l);continue}let A=l.slot,_=o[A];tt(l,"remove","slot"),_&&(X(_,l,n),Reflect.deleteProperty(o,A))}return c&&(o[r].replaceWith(b),Reflect.deleteProperty(o,r)),t.append=f,t}}),t!==e){let f=Array.from(t.childNodes);f.forEach(d=>d.remove()),t.append(...f)}return e}function X(t,e,n){n&&n(t,e);try{t.replaceWith(D(e,{className:[e.className,t.className],dataset:{...t.dataset}}))}catch{t.replaceWith(e)}}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function vt(t){let e=this;return function(...r){T=t;let o=k.call(e,...r);return T=void 0,o}}var P=new WeakMap,{setDeleteAttr:U}=a;function D(t,...e){if(!e.length)return t;P.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))z.call(this,t,n,r);return P.delete(t),t}function z(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,p)=>z.call(c,t,d,p));let[f]=e;if(f==="=")return r(e.slice(1),n);if(f===".")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 M(o,n,H.bind(null,t[e]));case"ariaset":return M(o,n,(d,p)=>r("aria-"+d,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(P.has(t))return P.get(t);let r=(t instanceof a.S?rt:nt).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=L(this);return M(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function tt(t,e,n,r){return t instanceof 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=I(t,e);return!E(n.set)}function I(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||I(t,e)}function M(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function Z(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function nt(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,Z(r))}function rt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,Z(r))}function H(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}var w=a.M?ot():new Proxy({},{get(){return()=>{}}});function ot(){let t=new Map,e=!1,n=i=>function(u){for(let s of u)if(s.type==="childList"){if(l(s.addedNodes,!0)){i();continue}A(s.removedNodes,!0)&&i()}},r=new a.M(n(d));return{observe(i){let u=new a.M(n(()=>{}));return u.observe(i,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(i,u){f();let s=c(i);s.connected.has(u)||(s.connected.add(u),s.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let s=t.get(i);s.connected.has(u)&&(s.connected.delete(u),s.length_c-=1,o(i,s))},onDisconnected(i,u){f();let s=c(i);s.disconnected.has(u)||(s.disconnected.add(u),s.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let s=t.get(i);s.disconnected.has(u)&&(s.disconnected.delete(u),s.length_d-=1,o(i,s))}};function o(i,u){u.length_c||u.length_d||(t.delete(i),d())}function c(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function f(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function d(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function b(i){t.size>30&&await p();let u=[];if(!(i instanceof Node))return u;for(let s of t.keys())s===i||!(s instanceof Node)||i.contains(s)&&u.push(s);return u}function l(i,u){let s=!1;for(let h of i){if(u&&b(h).then(l),!t.has(h))continue;let m=t.get(h);m.length_c&&(h.dispatchEvent(new Event(v)),m.connected=new WeakSet,m.length_c=0,m.length_d||t.delete(h),s=!0)}return s}function A(i,u){let s=!1;for(let h of i)u&&b(h).then(A),!(!t.has(h)||!t.get(h).length_d)&&((globalThis.queueMicrotask||setTimeout)(_(h)),s=!0);return s}function _(i){return()=>{i.isConnected||(i.dispatchEvent(new Event(y)),t.delete(i))}}}function Ot(t,e,n,r=it){R.push({scope:t,host:(...f)=>f.length?f.forEach(d=>d(t)):t}),typeof r=="function"&&(r=r.call(t,t));let o=t[x];o||ct(t);let c=n.call(t,r);return o||t.dispatchEvent(new Event(v)),e.nodeType===11&&typeof e.mode=="string"&&t.addEventListener(y,w.observe(e),{once:!0}),R.pop(),e.append(c)}function ct(t){return W(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(v))}),W(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(y)))}),W(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(O,{detail:[o,c]})),e.apply(n,r)}),t.prototype[x]=!0,t}function W(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}function it(t){return F(t,(e,n)=>e.getAttribute(n))}function _t(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let f=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(f)}}function S(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>Object.assign({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(v,t,e),r[x]?r:r.isConnected?(r.dispatchEvent(new Event(v)),r):(N(e.signal,()=>w.offConnected(r,t))&&w.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(y,t,e),r[x]||N(e.signal,()=>w.offDisconnected(r,t))&&w.onDisconnected(r,t),r}};var j=new WeakMap;S.disconnectedAsAbort=function(t){if(j.has(t))return j.get(t);let e=new AbortController;return j.set(t,e),t(S.disconnected(()=>e.abort())),e};var st=new WeakSet;S.attributeChanged=function(t,e){return typeof e!="object"&&(e={}),function(r){if(r.addEventListener(O,t,e),r[x]||st.has(r)||!a.M)return r;let o=new a.M(function(f){for(let{attributeName:d,target:p}of f)p.dispatchEvent(new CustomEvent(O,{detail:[d,p.getAttribute(d)]}))});return N(e.signal,()=>o.disconnect())&&o.observe(r,{attributes:!0}),r}};export{D as assign,z as assignAttribute,Q as chainableAppend,Y as classListDeclarative,k as createElement,vt as createElementNS,Ot as customElementRender,ct as customElementWithDDE,_t as dispatchEvent,k as el,vt as elNS,tt as elementAttribute,gt as empty,ct as lifecyclesToEvents,it as observedAttributes,S as on,V as registerReactivity,R as scope,bt as simulateSlots}; +// src/observables-common.js +var C = { + isObservable(t) { + return !1; + }, + processReactiveAttribute(t, e, n, r) { + return n; + } +}; +function V(t, e = !0) { + return e ? Object.assign(C, t) : (Object.setPrototypeOf(t, C), t); +} +function L(t) { + return C.isPrototypeOf(t) && t !== C ? t : C; +} + +// src/helpers.js +var q = (...t) => Object.prototype.hasOwnProperty.call(...t); +function E(t) { + return typeof t > "u"; +} +function N(t, e) { + if (!t || !(t instanceof AbortSignal)) + return !0; + if (!t.aborted) + return t.addEventListener("abort", e), function() { + t.removeEventListener("abort", e); + }; +} +function F(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()); +} + +// src/dom-common.js +var a = { + setDeleteAttr: K, + ssr: "", + D: globalThis.document, + F: globalThis.DocumentFragment, + H: globalThis.HTMLElement, + S: globalThis.SVGElement, + M: globalThis.MutationObserver +}; +function K(t, e, n) { + if (Reflect.set(t, e, n), !!E(n)) { + if (Reflect.deleteProperty(t, e), t instanceof a.H && t.getAttribute(e) === "undefined") + return t.removeAttribute(e); + if (Reflect.get(t, e) === "undefined") + return Reflect.set(t, e, ""); + } +} +var x = "__dde_lifecyclesToEvents", v = "dde:connected", y = "dde:disconnected", O = "dde:attributeChanged"; + +// src/dom.js +var g = [{ + get scope() { + return a.D.body; + }, + host: (t) => t ? t(a.D.body) : a.D.body, + prevent: !0 +}], R = { + get current() { + return g[g.length - 1]; + }, + get host() { + return this.current.host; + }, + preventDefault() { + let { current: t } = this; + return t.prevent = !0, t; + }, + get state() { + return [...g]; + }, + push(t = {}) { + return g.push(Object.assign({}, this.current, { prevent: !1 }, t)); + }, + pushRoot() { + return g.push(g[0]); + }, + pop() { + if (g.length !== 1) + return g.pop(); + } +}; +function $(...t) { + return this.appendOriginal(...t), this; +} +function Q(t) { + return t.append === $ || (t.appendOriginal = t.append, t.append = $), t; +} +var T; +function k(t, e, ...n) { + let r = L(this), o = 0, c, f; + switch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) { + case typeof t == "function": { + o = 1, R.push({ scope: t, host: (...b) => b.length ? (o === 1 ? n.unshift(...b) : b.forEach((l) => l(f)), void 0) : f }), c = t(e || void 0); + let d = c instanceof a.F; + if (c.nodeName === "#comment") + break; + let p = k.mark({ + type: "component", + name: t.name, + host: d ? "this" : "parentElement" + }); + c.prepend(p), d && (f = p); + break; + } + case t === "#text": + c = D.call(this, a.D.createTextNode(""), e); + break; + case (t === "<>" || !t): + c = D.call(this, a.D.createDocumentFragment(), e); + break; + case !!T: + c = D.call(this, a.D.createElementNS(T, t), e); + break; + case !c: + c = D.call(this, a.D.createElement(t), e); + } + return Q(c), f || (f = c), n.forEach((d) => d(f)), o && R.pop(), o = 2, c; +} +function bt(t, e = t, n = void 0) { + let r = Symbol.for("default"), o = Array.from(e.querySelectorAll("slot")).reduce((f, d) => Reflect.set(f, d.name || r, d) && f, {}), c = q(o, r); + if (t.append = new Proxy(t.append, { + apply(f, d, p) { + if (!p.length) + return t; + let b = a.D.createDocumentFragment(); + for (let l of p) { + if (!l || !l.slot) { + c && b.appendChild(l); + continue; + } + let A = l.slot, _ = o[A]; + tt(l, "remove", "slot"), _ && (X(_, l, n), Reflect.deleteProperty(o, A)); + } + return c && (o[r].replaceWith(b), Reflect.deleteProperty(o, r)), t.append = f, t; + } + }), t !== e) { + let f = Array.from(t.childNodes); + f.forEach((d) => d.remove()), t.append(...f); + } + return e; +} +function X(t, e, n) { + n && n(t, e); + try { + t.replaceWith(D(e, { className: [e.className, t.className], dataset: { ...t.dataset } })); + } catch { + t.replaceWith(e); + } +} +k.mark = function(t, e = !1) { + t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); + let n = e ? "" : "/", r = a.D.createComment(``); + return e && (r.end = a.D.createComment("")), r; +}; +function vt(t) { + let e = this; + return function(...r) { + T = t; + let o = k.call(e, ...r); + return T = void 0, o; + }; +} +var P = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: U } = a; +function D(t, ...e) { + if (!e.length) + return t; + P.set(t, B(t, this)); + for (let [n, r] of Object.entries(Object.assign({}, ...e))) + z.call(this, t, n, r); + return P.delete(t), t; +} +function z(t, e, n) { + let { setRemoveAttr: r, s: o } = B(t, this), c = this; + n = o.processReactiveAttribute( + t, + e, + n, + (d, p) => z.call(c, t, d, p) + ); + let [f] = e; + if (f === "=") + return r(e.slice(1), n); + if (f === ".") + 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 M(o, n, H.bind(null, t[e])); + case "ariaset": + return M(o, n, (d, p) => r("aria-" + d, 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 (P.has(t)) + return P.get(t); + let r = (t instanceof a.S ? rt : nt).bind(null, t, "Attribute"), o = L(e); + return { setRemoveAttr: r, s: o }; +} +function Y(t, e) { + let n = L(this); + return M( + n, + e, + (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) + ), t; +} +function gt(t) { + return Array.from(t.children).forEach((e) => e.remove()), t; +} +function tt(t, e, n, r) { + return t instanceof 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 = I(t, e); + return !E(n.set); +} +function I(t, e) { + if (t = Object.getPrototypeOf(t), !t) + return {}; + let n = Object.getOwnPropertyDescriptor(t, e); + return n || I(t, e); +} +function M(t, e, n) { + if (!(typeof e != "object" || e === null)) + return Object.entries(e).forEach(function([o, c]) { + o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); + }); +} +function Z(t) { + return Array.isArray(t) ? t.filter(Boolean).join(" ") : t; +} +function nt(t, e, n, r) { + return t[(E(r) ? "remove" : "set") + e](n, Z(r)); +} +function rt(t, e, n, r, o = null) { + return t[(E(r) ? "remove" : "set") + e + "NS"](o, n, Z(r)); +} +function H(t, e, n) { + if (Reflect.set(t, e, n), !!E(n)) + return Reflect.deleteProperty(t, e); +} + +// src/events-observer.js +var w = a.M ? ot() : new Proxy({}, { + get() { + return () => { + }; + } +}); +function ot() { + let t = /* @__PURE__ */ new Map(), e = !1, n = (i) => function(u) { + for (let s of u) + if (s.type === "childList") { + if (l(s.addedNodes, !0)) { + i(); + continue; + } + A(s.removedNodes, !0) && i(); + } + }, r = new a.M(n(d)); + return { + observe(i) { + let u = new a.M(n(() => { + })); + return u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect(); + }, + onConnected(i, u) { + f(); + let s = c(i); + s.connected.has(u) || (s.connected.add(u), s.length_c += 1); + }, + offConnected(i, u) { + if (!t.has(i)) + return; + let s = t.get(i); + s.connected.has(u) && (s.connected.delete(u), s.length_c -= 1, o(i, s)); + }, + onDisconnected(i, u) { + f(); + let s = c(i); + s.disconnected.has(u) || (s.disconnected.add(u), s.length_d += 1); + }, + offDisconnected(i, u) { + if (!t.has(i)) + return; + let s = t.get(i); + s.disconnected.has(u) && (s.disconnected.delete(u), s.length_d -= 1, o(i, s)); + } + }; + function o(i, u) { + u.length_c || u.length_d || (t.delete(i), d()); + } + function c(i) { + if (t.has(i)) + return t.get(i); + let u = { + connected: /* @__PURE__ */ new WeakSet(), + length_c: 0, + disconnected: /* @__PURE__ */ new WeakSet(), + length_d: 0 + }; + return t.set(i, u), u; + } + function f() { + e || (e = !0, r.observe(a.D.body, { childList: !0, subtree: !0 })); + } + function d() { + !e || t.size || (e = !1, r.disconnect()); + } + function p() { + return new Promise(function(i) { + (requestIdleCallback || requestAnimationFrame)(i); + }); + } + async function b(i) { + t.size > 30 && await p(); + let u = []; + if (!(i instanceof Node)) + return u; + for (let s of t.keys()) + s === i || !(s instanceof Node) || i.contains(s) && u.push(s); + return u; + } + function l(i, u) { + let s = !1; + for (let h of i) { + if (u && b(h).then(l), !t.has(h)) + continue; + let m = t.get(h); + m.length_c && (h.dispatchEvent(new Event(v)), m.connected = /* @__PURE__ */ new WeakSet(), m.length_c = 0, m.length_d || t.delete(h), s = !0); + } + return s; + } + function A(i, u) { + let s = !1; + for (let h of i) + u && b(h).then(A), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(_(h)), s = !0); + return s; + } + function _(i) { + return () => { + i.isConnected || (i.dispatchEvent(new Event(y)), t.delete(i)); + }; + } +} + +// src/customElement.js +function Ot(t, e, n, r = it) { + R.push({ + scope: t, + host: (...f) => f.length ? f.forEach((d) => d(t)) : t + }), typeof r == "function" && (r = r.call(t, t)); + let o = t[x]; + o || ct(t); + let c = n.call(t, r); + return o || t.dispatchEvent(new Event(v)), e.nodeType === 11 && typeof e.mode == "string" && t.addEventListener(y, w.observe(e), { once: !0 }), R.pop(), e.append(c); +} +function ct(t) { + return W(t.prototype, "connectedCallback", function(e, n, r) { + e.apply(n, r), n.dispatchEvent(new Event(v)); + }), W(t.prototype, "disconnectedCallback", function(e, n, r) { + e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( + () => !n.isConnected && n.dispatchEvent(new Event(y)) + ); + }), W(t.prototype, "attributeChangedCallback", function(e, n, r) { + let [o, , c] = r; + n.dispatchEvent(new CustomEvent(O, { + detail: [o, c] + })), e.apply(n, r); + }), t.prototype[x] = !0, t; +} +function W(t, e, n) { + t[e] = new Proxy(t[e] || (() => { + }), { apply: n }); +} +function it(t) { + return F(t, (e, n) => e.getAttribute(n)); +} + +// src/events.js +function _t(t, e, n) { + return e || (e = {}), function(o, ...c) { + n && (c.unshift(o), o = typeof n == "function" ? n() : n); + let f = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); + return o.dispatchEvent(f); + }; +} +function S(t, e, n) { + return function(o) { + return o.addEventListener(t, e, n), o; + }; +} +var G = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); +S.connected = function(t, e) { + return e = G(e), function(r) { + return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (N(e.signal, () => w.offConnected(r, t)) && w.onConnected(r, t), r); + }; +}; +S.disconnected = function(t, e) { + return e = G(e), function(r) { + return r.addEventListener(y, t, e), r[x] || N(e.signal, () => w.offDisconnected(r, t)) && w.onDisconnected(r, t), r; + }; +}; +var j = /* @__PURE__ */ new WeakMap(); +S.disconnectedAsAbort = function(t) { + if (j.has(t)) + return j.get(t); + let e = new AbortController(); + return j.set(t, e), t(S.disconnected(() => e.abort())), e; +}; +var st = /* @__PURE__ */ new WeakSet(); +S.attributeChanged = function(t, e) { + return typeof e != "object" && (e = {}), function(r) { + if (r.addEventListener(O, t, e), r[x] || st.has(r) || !a.M) + return r; + let o = new a.M(function(f) { + for (let { attributeName: d, target: p } of f) + p.dispatchEvent( + new CustomEvent(O, { detail: [d, p.getAttribute(d)] }) + ); + }); + return N(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; + }; +}; +export { + D as assign, + z as assignAttribute, + Q as chainableAppend, + Y as classListDeclarative, + k as createElement, + vt as createElementNS, + Ot as customElementRender, + ct as customElementWithDDE, + _t as dispatchEvent, + k as el, + vt as elNS, + tt as elementAttribute, + gt as empty, + ct as lifecyclesToEvents, + it as observedAttributes, + S as on, + V as registerReactivity, + R as scope, + bt as simulateSlots +}; diff --git a/docs/index.html b/docs/index.html index fe5e309..cb944a9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,5 +1,5 @@ -`deka-dom-el` — Introduction

`deka-dom-el` — Introduction

Introducing a library.

The library tries to provide pure JavaScript tool(s) to create reactive interfaces.

We start with creating and modifying a static elements and end up with UI templates. From document.createElement to el. Then we go through the native events system and the way to include it declaratively in UI templates. From element.addEventListener to on.

Next step is providing interactivity not only for our UI templates. We introduce observables (O) and how them incorporate to UI templates.

Now we will clarify how the observables are incorporated into our templates with regard to application performance. This is not the only reason the library uses scopes. We will look at how they work in components represented in JavaScript by functions.

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

`deka-dom-el` — Introduction

Introducing a library.

The library tries to provide pure JavaScript tool(s) to create reactive interfaces.

We start with creating and modifying a static elements and end up with UI templates. From document.createElement to el. Then we go through the native events system and the way to include it declaratively in UI templates. From element.addEventListener to on.

Next step is providing interactivity not only for our UI templates. We introduce observables (O) and how them incorporate to UI templates.

Now we will clarify how the observables are incorporated into our templates with regard to application performance. This is not the only reason the library uses scopes. We will look at how they work in components represented in JavaScript by functions.

import { el } from "./esm-with-observables.js"; +import { O } from "./esm-with-observables.js"; const clicks= O(0); document.body.append( el().append( @@ -13,4 +13,4 @@ document.body.append( }) ) ); -
\ No newline at end of file +
\ No newline at end of file diff --git a/docs/p02-elements.html b/docs/p02-elements.html index c77ac98..34ce738 100644 --- a/docs/p02-elements.html +++ b/docs/p02-elements.html @@ -26,7 +26,7 @@ document.body.append( { textContent: "Element’s text content.", style: "color: coral;" } ) ); -

To make this easier, you can use the el function. Internally in basic examples, it is wrapper around assign(document.createElement(…), { … }).

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

To make this easier, you can use the el function. Internally in basic examples, it is wrapper around assign(document.createElement(…), { … }).

import { el, assign } from "./esm-with-observables.js"; const color= "lightcoral"; document.body.append( el("p", { textContent: "Hello (first time)", style: { color } }) @@ -37,7 +37,7 @@ document.body.append( { textContent: "Hello (second time)", style: { color } } ) ); -

The assign function provides improved behaviour of Object.assign(). You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the element.setAttribute if there is no writable property in the element prototype.

You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from HTMLElement. To see all available IDLs for example for paragraphs, see HTMLParagraphElement. Moreover, the assign provides a way to sets declaratively some convenient properties:

For processing, the assign internally uses assignAttribute and classListDeclarative.

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

The assign function provides improved behaviour of Object.assign(). You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the element.setAttribute if there is no writable property in the element prototype.

You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from HTMLElement. To see all available IDLs for example for paragraphs, see HTMLParagraphElement. Moreover, the assign provides a way to sets declaratively some convenient properties:

For processing, the assign internally uses assignAttribute and classListDeclarative.

import { assign, assignAttribute, classListDeclarative } from "./esm-with-observables.js"; const paragraph= document.createElement("p"); assignAttribute(paragraph, "textContent", "Hello, world!"); @@ -70,7 +70,7 @@ console.log("paragraph.something=", paragraph.something); document.body.append( paragraph ); -

# Native JavaScript templating

By default, the native JS has no good way to define HTML template using DOM API:

document.body.append( +

# Native JavaScript templating

By default, the native JS has no good way to define HTML template using DOM API:

document.body.append( document.createElement("div"), document.createElement("span"), document.createElement("main") @@ -81,7 +81,7 @@ const template= document.createElement("main").append( document.createElement("span"), ); console.log(typeof template==="undefined"); -

This library therefore overwrites the append method of created elements to always return parent element.

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

This library therefore overwrites the append method of created elements to always return parent element.

import { el } from "./esm-with-observables.js"; document.head.append( el("style").append( "tr, td{ border: 1px solid red; padding: 1em; }", @@ -106,7 +106,7 @@ document.body.append( ) ); -import { chainableAppend } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +import { chainableAppend } from "./esm-with-observables.js"; /** @param {keyof HTMLElementTagNameMap} tag */ const createElement= tag=> chainableAppend(document.createElement(tag)); document.body.append( @@ -116,7 +116,7 @@ document.body.append( ) ) ); -

# Basic (state-less) components

You can use functions for encapsulation (repeating) logic. The el accepts function as first argument. In that case, the function should return dom elements and the second argument for el is argument for given element.

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

# Basic (state-less) components

You can use functions for encapsulation (repeating) logic. The el accepts function as first argument. In that case, the function should return dom elements and the second argument for el is argument for given element.

import { el } from "./esm-with-observables.js"; document.head.append( el("style").append( ".class1{ font-weight: bold; }", @@ -133,7 +133,7 @@ function component({ className, textContent }){ el("p", textContent) ); } -

As you can see, in case of state-less/basic components there is no difference between calling component function directly or using el function.

It is nice to use similar naming convention as native DOM API. This allows us to use the destructuring assignment syntax and keep track of the native API (things are best remembered through regular use).

# Creating non-HTML elements

Similarly to the native DOM API (document.createElementNS) for non-HTML elements we need to tell JavaScript which kind of the element to create. We can use the elNS function:

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

As you can see, in case of state-less/basic components there is no difference between calling component function directly or using el function.

It is nice to use similar naming convention as native DOM API. This allows us to use the destructuring assignment syntax and keep track of the native API (things are best remembered through regular use).

# Creating non-HTML elements

Similarly to the native DOM API (document.createElementNS) for non-HTML elements we need to tell JavaScript which kind of the element to create. We can use the elNS function:

import { elNS, assign } from "./esm-with-observables.js"; const elSVG= elNS("http://www.w3.org/2000/svg"); const elMath= elNS("http://www.w3.org/1998/Math/MathML"); document.body.append( @@ -144,4 +144,4 @@ document.body.append( console.log( document.body.innerHTML.includes("<svg></svg><math></math>") ) -

# Mnemonic

\ No newline at end of file +

# Mnemonic

\ No newline at end of file diff --git a/docs/p03-events.html b/docs/p03-events.html index d4141a0..2a0b20e 100644 --- a/docs/p03-events.html +++ b/docs/p03-events.html @@ -2,7 +2,7 @@ import { on, dispatchEvent } from "deka-dom-el"; /** @type {ddeElementAddon} */ -

# Events and listenners

In JavaScript you can listen to the native DOM events of the given element by using element.addEventListener(type, listener, options). The library provides an alternative (on) accepting the differen order of the arguments:

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

# Events and listenners

In JavaScript you can listen to the native DOM events of the given element by using element.addEventListener(type, listener, options). The library provides an alternative (on) accepting the differen order of the arguments:

import { el, on } from "./esm-with-observables.js"; const log= mark=> console.log.bind(console, mark); const button= el("button", "Test click"); @@ -12,7 +12,7 @@ on("click", log("`on`"), { once: true })(button); document.body.append( button ); -

…this is actually one of the two differences. The another one is that on accepts only object as the options (but it is still optional).

The other difference is that there is no off function. You can remove listener declaratively using AbortSignal:

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

…this is actually one of the two differences. The another one is that on accepts only object as the options (but it is still optional).

The other difference is that there is no off function. You can remove listener declaratively using AbortSignal:

import { el, on } from "./esm-with-observables.js"; const log= mark=> console.log.bind(console, mark); const abort_controller= new AbortController(); @@ -25,7 +25,7 @@ on("click", log("`on`"), { signal })(button); document.body.append( button, " ", el("button", { textContent: "Off", onclick: ()=> abort_controller.abort() }) ); -

So, there are (typically) three ways to handle events. You can use:

In the first example we force to use HTML attribute (it corresponds to <button onclick="console.log(event)">click me</button>). Side note: this can be useful in case of SSR. To study difference, you can read a nice summary here: GIST @WebReflection/web_events.md.

# Addons

From practical point of view, Addons are just functions that accept any html element as their first parameter. You can see that the on(…) fullfills this requirement.

You can use Addons as ≥3rd argument of el function. This way is possible to extends you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:

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

So, there are (typically) three ways to handle events. You can use:

In the first example we force to use HTML attribute (it corresponds to <button onclick="console.log(event)">click me</button>). Side note: this can be useful in case of SSR. To study difference, you can read a nice summary here: GIST @WebReflection/web_events.md.

# Addons

From practical point of view, Addons are just functions that accept any html element as their first parameter. You can see that the on(…) fullfills this requirement.

You can use Addons as ≥3rd argument of el function. This way is possible to extends you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:

import { el, on } from "./esm-with-observables.js"; const abort_controller= new AbortController(); const { signal }= abort_controller; /** @type {ddeElementAddon<HTMLButtonElement>} */ @@ -49,7 +49,7 @@ function update(event){ "\n" ); } -

As the example shows, you can also provide types in JSDoc+TypeScript by using global type ddeElementAddon. Also notice, you can use Addons to get element reference.

# Life-cycle events

Addons are called immediately when the element is created, even it is not connected to live DOM yet. Therefore, you can understand the Addon to be “oncreate” event.

The library provide three additional live-cycle events corresponding to how they are named in a case of custom elements: on.connected, on.disconnected and on.attributeChanged.

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

As the example shows, you can also provide types in JSDoc+TypeScript by using global type ddeElementAddon. Also notice, you can use Addons to get element reference.

# Life-cycle events

Addons are called immediately when the element is created, even it is not connected to live DOM yet. Therefore, you can understand the Addon to be “oncreate” event.

The library provide three additional live-cycle events corresponding to how they are named in a case of custom elements: on.connected, on.disconnected and on.attributeChanged.

import { el, on } from "./esm-with-observables.js"; const paragraph= el("p", "See live-cycle events in console.", el=> log({ type: "dde:created", detail: el }), on.connected(log), @@ -67,7 +67,7 @@ document.body.append( function log({ type, detail }){ console.log({ _this: this, type, detail }); } -

For Custom elements, we will later introduce a way to replace *Callback syntax with dde:* events. The on.* functions then listen to the appropriate Custom Elements events (see Custom element lifecycle callbacks | MDN).

But, in case of regular elemnets the MutationObserver | MDN is internaly used to track these events. Therefore, there are some drawbacks:

To provide intuitive behaviour, similar also to how the life-cycle events works in other frameworks/libraries, deka-dom-el library ensures that on.connected and on.disconnected are called only once and only when the element is (dis)connected to live DOM. The solution is inspired by Vue. For using native behaviour re-(dis)connecting element, use:

# Final notes

The library also provides a method to dispatch the events.

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

For Custom elements, we will later introduce a way to replace *Callback syntax with dde:* events. The on.* functions then listen to the appropriate Custom Elements events (see Custom element lifecycle callbacks | MDN).

But, in case of regular elemnets the MutationObserver | MDN is internaly used to track these events. Therefore, there are some drawbacks:

To provide intuitive behaviour, similar also to how the life-cycle events works in other frameworks/libraries, deka-dom-el library ensures that on.connected and on.disconnected are called only once and only when the element is (dis)connected to live DOM. The solution is inspired by Vue. For using native behaviour re-(dis)connecting element, use:

# Final notes

The library also provides a method to dispatch the events.

import { el, on, dispatchEvent } from "./esm-with-observables.js"; document.body.append( el("p", "Listenning to `test` event.", on("test", console.log)).append( el("br"), @@ -91,4 +91,4 @@ function dde(){ function ddeOptions(){ dispatchEvent("test", { bubbles: true })(this, "hi"); } -

# Mnemonic

\ No newline at end of file +

# Mnemonic

\ No newline at end of file diff --git a/docs/p04-observables.html b/docs/p04-observables.html index 5a7d3c7..47b7a65 100644 --- a/docs/p04-observables.html +++ b/docs/p04-observables.html @@ -4,7 +4,7 @@ O===observable /** @type {ddeObservable} */ /** @type {ddeAction} */ /** @type {ddeActions} */ -

# Introducing observables

Using observables, we split program logic into the three parts. Firstly (α), we create a variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the observable value changes. Similarly, in a remaining part (γ), we can update the observable value.

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

# Introducing observables

Using observables, we split program logic into the three parts. Firstly (α), we create a variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the observable value changes. Similarly, in a remaining part (γ), we can update the observable value.

import { O } from "./esm-with-observables.js"; // α — `observable` represents a reactive value const observable= O(0); // β — just reacts on observable changes @@ -16,7 +16,7 @@ update(); const interval= 5*1000; setTimeout(clearInterval, 10*interval, setInterval(update, interval)); -

All this is just an example of Event-driven programming and Publish–subscribe pattern (compare for example with fpubsub library). All three parts can be in some manner independent and still connected to the same reactive entity.

Observables are implemented in the library as functions. To see current value of observable, just call it without any arguments console.log(observable()). To update the observable value, pass any argument observable('a new value'). For listenning the observable value changes, use O.on(observable, console.log).

Similarly to the on function to register DOM events listener. You can use AbortController/AbortSignal to off/stop listenning. In example, you also found the way for representing “live” piece of code computation pattern (derived observable):

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

All this is just an example of Event-driven programming and Publish–subscribe pattern (compare for example with fpubsub library). All three parts can be in some manner independent and still connected to the same reactive entity.

Observables are implemented in the library as functions. To see current value of observable, just call it without any arguments console.log(observable()). To update the observable value, pass any argument observable('a new value'). For listenning the observable value changes, use O.on(observable, console.log).

Similarly to the on function to register DOM events listener. You can use AbortController/AbortSignal to off/stop listenning. In example, you also found the way for representing “live” piece of code computation pattern (derived observable):

import { O } from "./esm-with-observables.js"; const observable= O(0); // computation pattern const double= O(()=> 2*observable()); @@ -32,7 +32,7 @@ ac.signal.addEventListener("abort", ()=> setTimeout(()=> clearInterval(id), 2*interval)); setTimeout(()=> ac.abort(), 3*interval) -

# Observables and actions

O(/* primitive */) allows you to declare simple reactive variables, typically around immutable primitive types. However, it may also be necessary to use reactive arrays, objects, or other complex reactive structures.

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

# Observables and actions

O(/* primitive */) allows you to declare simple reactive variables, typically around immutable primitive types. However, it may also be necessary to use reactive arrays, objects, or other complex reactive structures.

import { O } from "./esm-with-observables.js"; const observable= O(0, { increaseOnlyOdd(add){ console.info(add); @@ -50,7 +50,7 @@ setTimeout( 10*interval, setInterval(oninterval, interval) ); -

…but typical user-case is object/array (maps, sets and other mutable objects):

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

…but typical user-case is object/array (maps, sets and other mutable objects):

import { O } from "./esm-with-observables.js"; const todos= O([], { push(item){ this.value.push(O(item)); @@ -64,7 +64,7 @@ const todos= O([], { } }); -import { el, on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +import { el, on } from "./esm-with-observables.js"; /** @type {ddeElementAddon<HTMLFormElement>} */ const onsubmit= on("submit", function(event){ event.preventDefault(); @@ -106,10 +106,10 @@ function radio({ textContent, checked= false }){ " ",textContent ) } -

In some way, you can compare it with useReducer hook from React. So, the O(<data>, <actions>) pattern creates a store “machine”. We can then invoke (dispatch) registered action by calling O.action(<observable>, <name>, ...<args>) after the action call the observable calls all its listeners. This can be stopped by calling this.stopPropagation() in the method representing the given action. As it can be seen in examples, the “store” value is available also in the function for given action (this.value).

# Reactive DOM attributes and elements

There are on basic level two distinc situation to mirror dynamic value into the DOM/UI

  1. to change some attribute(s) of existing element(s)
  2. to generate elements itself dynamically – this covers conditions and loops
import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +

In some way, you can compare it with useReducer hook from React. So, the O(<data>, <actions>) pattern creates a store “machine”. We can then invoke (dispatch) registered action by calling O.action(<observable>, <name>, ...<args>) after the action call the observable calls all its listeners. This can be stopped by calling this.stopPropagation() in the method representing the given action. As it can be seen in examples, the “store” value is available also in the function for given action (this.value).

# Reactive DOM attributes and elements

There are on basic level two distinc situation to mirror dynamic value into the DOM/UI

  1. to change some attribute(s) of existing element(s)
  2. to generate elements itself dynamically – this covers conditions and loops
import { O } from "./esm-with-observables.js"; const count= O(0); -import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +import { el } from "./esm-with-observables.js"; document.body.append( el("p", O(()=> "Currently: "+count())), el("p", { classList: { red: O(()=> count()%2) }, dataset: { count }, textContent: "Attributes example" }) @@ -121,7 +121,7 @@ document.head.append( const interval= 5 * 1000; setTimeout(clearInterval, 10*interval, setInterval(()=> count(count()+1), interval)); -

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

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

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

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

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

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

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

import { O } from "./esm-with-observables.js"; const count= O(0, { add(){ this.value= this.value + Math.round(Math.random()*10); } }); @@ -129,7 +129,7 @@ const numbers= O([ count() ], { push(next){ this.value.push(next); } }); -import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +import { el } from "./esm-with-observables.js"; document.body.append( O.el(count, count=> count%2 ? el("p", "Last number is odd.") @@ -147,4 +147,4 @@ setTimeout(clearInterval, 10*interval, setInterval(function(){ O.action(count, "add"); O.action(numbers, "push", count()); }, interval)); -

# Mnemonic

\ No newline at end of file +

# Mnemonic

\ No newline at end of file diff --git a/docs/p05-scopes.html b/docs/p05-scopes.html index fe7de32..8af76fd 100644 --- a/docs/p05-scopes.html +++ b/docs/p05-scopes.html @@ -1,7 +1,7 @@ `deka-dom-el` — Scopes and components

`deka-dom-el` — Scopes and components

Organizing UI into components

Using functions as UI components

For state-less components we can use functions as UI components (see “Elements” page). But in real life, we may need to handle the component live-cycle and provide JavaScript the way to properly use the Garbage collection.

// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js import { scope, el } from "deka-dom-el"; /** @type {ddeElementAddon} */ -

The library therefore use scopes to provide these functionalities.

# Scopes and hosts

The host is the name for the element representing the component. This is typically element returned by function. To get reference, you can use scope.host() to applly addons just use scope.host(...<addons>).

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

The library therefore use scopes to provide these functionalities.

# Scopes and hosts

The host is the name for the element representing the component. This is typically element returned by function. To get reference, you can use scope.host() to applly addons just use scope.host(...<addons>).

import { el, on, scope } from "./esm-with-observables.js"; const { host }= scope; host( element=> console.log( @@ -34,7 +34,7 @@ function component(){ el("strong", "Component") ); } -

To better understanding we implement function elClass helping to create component as class instances.

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

To better understanding we implement function elClass helping to create component as class instances.

import { el } from "./esm-with-observables.js"; class Test { constructor(params){ this._params= params; @@ -49,7 +49,7 @@ document.body.append( elClass(Test, { textContent: "Hello World" }) ); -import { chainableAppend, scope } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +import { chainableAppend, scope } from "./esm-with-observables.js"; function elClass(_class, attributes, ...addons){ let element, element_host; scope.push({ @@ -78,7 +78,7 @@ function elClass(_class, attributes, ...addons){ scope.pop(); return element; } -

As you can see, the scope.host() is stored temporarily and synchronously. Therefore, at least in the beginning of using library, it is the good practise to store host in the root of your component. As it may be changed, typically when there is asynchronous code in the component.

import { el, scope, on, dispatchEvent } from "deka-dom-el"; +

As you can see, the scope.host() is stored temporarily and synchronously. Therefore, at least in the beginning of using library, it is the good practise to store host in the root of your component. As it may be changed, typically when there is asynchronous code in the component.

import { el, scope, on, dispatchEvent } from "deka-dom-el"; document.body.append( el(component) ); @@ -96,7 +96,7 @@ function component(){ setTimeout(()=> dispatchEvent("timeout")(host()), 750) return el("p", "Clickable paragraph!"); } -

# Scopes, observables and cleaning magic

The host is internally used to register the cleaning procedure, when the component (host element) is removed from the DOM.

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

# Scopes, observables and cleaning magic

The host is internally used to register the cleaning procedure, when the component (host element) is removed from the DOM.

import { el, empty } from "./esm-with-observables.js"; document.body.append( el(component), el("button", { @@ -105,8 +105,8 @@ document.body.append( type: "button" }) ); -import { on } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; -import { O } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js"; +import { on } from "./esm-with-observables.js"; +import { O } from "./esm-with-observables.js"; function component(){ const textContent= O("Click to change text."); @@ -115,7 +115,7 @@ function component(){ }); return el("p", textContent, onclickChange); } -

The text content of the paragraph is changing when the value of the observable textContent is changed. Internally, there is association between textContent and the paragraph similar to using S.on(textContent, /* update the paragraph */).

This listener must be removed when the component is removed from the DOM. To do it, the library assign internally on.disconnected(/* remove the listener */)(host()) to the host element.

The library DOM API and observables works ideally when used declaratively. It means, you split your app logic into three parts as it was itroduced in Observables.

/* PSEUDO-CODE!!! */ +

The text content of the paragraph is changing when the value of the observable textContent is changed. Internally, there is association between textContent and the paragraph similar to using S.on(textContent, /* update the paragraph */).

This listener must be removed when the component is removed from the DOM. To do it, the library assign internally on.disconnected(/* remove the listener */)(host()) to the host element.

The library DOM API and observables works ideally when used declaratively. It means, you split your app logic into three parts as it was itroduced in Observables.

/* PSEUDO-CODE!!! */ import { el } from "deka-dom-el"; import { O } from "deka-dom-el/observables"; function component(){ diff --git a/docs/p06-customElement.html b/docs/p06-customElement.html index 3dd70bc..2e9d27c 100644 --- a/docs/p06-customElement.html +++ b/docs/p06-customElement.html @@ -31,4 +31,4 @@ import { lifecyclesToEvents } from "deka-dom-el"; set customAttribute(value){ this.setAttribute("custom-attribute", value); } } customElements.define(CustomHTMLElement.tagName, CustomHTMLElement); -

Handy Custom Elements' Patterns

# Mnemonic

  • customElementRender(<custom-element>, <render-function>[, <properties>]) — use function to render DOM structure for given <custom-element>
  • customElementWithDDE(<custom-element>) — register <custom-element> to DDE library, see also `lifecycleToEvents`, can be also used as decorator
  • observedAttributes(<custom-element>) — returns record of observed attributes (keys uses camelCase)
  • O.observedAttributes(<custom-element>) — returns record of observed attributes (keys uses camelCase and values are observables)
  • lifecycleToEvents(<class-declaration>) — convert lifecycle methods to events, can be also used as decorator
+

Handy Custom Elements' Patterns

# Mnemonic

\ No newline at end of file diff --git a/docs_src/components/example.html.js b/docs_src/components/example.html.js index 10c3c2b..1c9f7d7 100644 --- a/docs_src/components/example.html.js +++ b/docs_src/components/example.html.js @@ -12,7 +12,10 @@ ${host}{ background: #212121 !important; border: 1px solid white; } -` +`; + +const dde_content= s.cat(new URL("../../dist/esm-with-observables.js", import.meta.url)).toString(); + import { el } from "deka-dom-el"; import { code } from "./code.html.js"; import { relative } from "node:path"; @@ -26,7 +29,7 @@ import { relative } from "node:path"; export function example({ src, language= "js", page_id }){ registerClientPart(page_id); const content= s.cat(src).toString() - .replaceAll(/ from "deka-dom-el(\/observables)?";/g, ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";'); + .replaceAll(/ from "deka-dom-el(\/observables)?";/g, ' from "./esm-with-observables.js";'); const id= "code-example-"+generateCodeId(src); return el().append( el(code, { id, content, language, className: example.name }), @@ -35,7 +38,7 @@ export function example({ src, language= "js", page_id }){ } function elCode({ id, content, extension: name }){ const options= JSON.stringify({ - files: [{ name, content }], + files: [{ name, content }, { name: "esm-with-observables.js", content: dde_content }], toolbar: false }); return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`);