From fb02635d24b7f6fa7c8ef83740cfc88622424557 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Fri, 24 Nov 2023 16:16:08 +0100 Subject: [PATCH] :boom: `simulateSlots` --- dist/dde-with-signals.js | 29 +- dist/dde.js | 27 +- dist/esm-with-signals.d.ts | 587 ++++++++++++++--------------- dist/esm-with-signals.js | 8 +- dist/esm.d.ts | 587 ++++++++++++++--------------- dist/esm.js | 2 +- docs/global.css | 26 +- docs/index.html | 2 +- docs/p02-elements.html | 2 +- docs/p03-events.html | 2 +- docs/p04-signals.html | 4 +- docs_src/index.html.js | 61 ++- docs_src/layout/simplePage.html.js | 16 + docs_src/p02-elements.html.js | 234 ++++++------ docs_src/p03-events.html.js | 226 ++++++----- docs_src/p04-signals.html.js | 133 ++++--- docs_src/types.d.ts | 1 + index.d.ts | 582 ++++++++++++++-------------- package.json | 2 +- src/dom.js | 31 ++ 20 files changed, 1263 insertions(+), 1299 deletions(-) create mode 100644 docs_src/layout/simplePage.html.js diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 20fc0a8..f91dae9 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -1,25 +1,26 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var y={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(y,t):(Object.setPrototypeOf(t,y),t)}function C(t){return y.isPrototypeOf(t)&&t!==y?t:y}function x(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var $={setDeleteAttr:tt,ssr:""};function tt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var E=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return E[E.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...E]},push(t={}){return E.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};function H(...t){return this.appendOriginal(...t),this}function et(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var L;function S(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...p)=>p.length?(o===1?n.unshift(...p):p.forEach(v=>v(s)),void 0):s}),c=t(e||void 0);let a=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=S.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(d),a&&(s=d);break}case t==="#text":c=j.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=j.call(this,document.createDocumentFragment(),e);break;case!!L:c=j.call(this,document.createElementNS(L,t),e);break;case!c:c=j.call(this,document.createElement(t),e)}return et(c),s||(s=c),n.forEach(a=>a(s)),o&&g.pop(),o=2,c}S.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(``);return e||(r.end=document.createComment("")),r};function Et(t){let e=this;return function(...r){L=t;let o=S.call(e,...r);return L=void 0,o}}var{setDeleteAttr:I}=$,P=new WeakMap;function j(t,...e){if(!e.length)return t;P.set(t,G(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}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>Z.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return z(o,n,J.bind(null,t[e]));case"ariaset":return z(o,n,(a,d)=>r("aria-"+a,d));case"classList":return nt.call(c,t,n)}return rt(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(P.has(t))return P.get(t);let r=(t instanceof SVGElement?ct:ot).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function nt(t,e){let n=C(this);return z(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function vt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function A(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function rt(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!x(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function z(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function ot(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,K(r))}function ct(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function yt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var k=it(),st=new WeakSet;_.connected=function(t,e){let{custom_element:n}=g.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(N(e.signal,()=>k.offConnected(c,t))&&k.onConnected(c,t),c)}};_.disconnected=function(t,e){let{custom_element:n}=g.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||N(e.signal,()=>k.offDisconnected(c,t))&&k.onDisconnected(c,t),c}};var F=new WeakMap;_.disconnectedAsAbort=function(t){if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||st.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:p,target:v}of d)v.dispatchEvent(new CustomEvent(c,{detail:[p,v.getAttribute(p)]}))});return N(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function it(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(p(u.addedNodes,!0)){s();continue}v(u.removedNodes,!0)&&s()}});return{onConnected(i,u){c();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,r(i,f))},onDisconnected(i,u){c();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,r(i,f))}};function r(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function p(i,u){let f=!1;for(let m of i){if(u&&d(m).then(p),!t.has(m))continue;let w=t.get(m);w.length_c&&(m.dispatchEvent(new Event("dde:connected")),w.connected=new WeakSet,w.length_c=0,w.length_d||t.delete(m),f=!0)}return f}function v(i,u){let f=!1;for(let m of i)u&&d(m).then(v),!(!t.has(m)||!t.get(m).length_d)&&(m.dispatchEvent(new Event("dde:disconnected")),t.delete(m),f=!0);return f}}var l=Symbol.for("Signal");function W(t){try{return Reflect.has(t,l)}catch{return!1}}var M=[],h=new WeakMap;function b(t,e){if(typeof t!="function")return Q(t,e);if(W(t))return t;let n=Q(),r=function(){let[o,...c]=h.get(r);if(h.set(r,new Set([o])),M.push(r),n(t()),M.pop(),!c.length)return;let s=h.get(r);for(let a of c)s.has(a)||R(a,r)};return h.set(n[l],r),h.set(r,new Set([n])),r(),n}b.action=function(t,e,...n){let r=t[l],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};b.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));q(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};b.symbols={signal:l,onclear:Symbol.for("Signal.onclear")};b.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[l];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,l)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!h.has(o))return;let c=h.get(o);c.delete(n),!(c.size>1)&&(b.clear(...c),h.delete(o))})}};var D="__dde_reactive";b.el=function(t,e){let n=S.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=g,s=a=>{if(!n.parentNode||!r.parentNode)return R(t,s);g.push(c);let d=e(a);g.pop(),Array.isArray(d)||(d=[d]);let p=n;for(;(p=n.nextSibling)!==r;)p.remove();n.after(...d)};return q(t,s),Y(t,s,n,e),s(t()),o};var O="__dde_attributes";b.attribute=function(t,e=null){let n=b(e),r;return g.host(o=>{if(r=o,A(r,"has",t)?n(A(r,"get",t)):e!==null&&A(r,"set",t,e),o[O]){o[O][t]=n;return}r[O]={[t]:n},_.attributeChanged(function({detail:s}){/*! This maps attributes to signals (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/let[a,d]=s,p=r[O][a];if(p)return p(d)})(r),_.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/b.clear(...Object.values(r[O]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let a=s[0];return A(r,"set",t,a)}})};var X={isSignal:W,processReactiveAttribute(t,e,n,r){if(!W(n))return n;let o=c=>r(e,c);return q(n,o),Y(n,o,t,e),n()}};function Y(t,e,...n){let{current:r}=g;r.prevent||r.host(function(o){o[D]||(o[D]=[],_.disconnected(()=>o[D].forEach(([[c,s]])=>R(c,s,c[l]?.host()===o)))(o)),o[D].push([[t,e],...n])})}function Q(t,e){let n=(...r)=>r.length?lt(n,...r):dt(n);return ft(n,t,e)}var ut=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),U=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ft(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=b.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=g;return Reflect.defineProperty(t,l,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new U},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[l],ut),t}function at(){return M[M.length-1]}function dt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=at();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function lt(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 q(t,e){if(t[l])return t[l].listeners.add(e)}function R(t,e,n){let r=t[l];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(b.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>R(s,c,!0))}return o}T(X); +var A={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(A,t):(Object.setPrototypeOf(t,A),t)}function C(t){return A.isPrototypeOf(t)&&t!==A?t:A}function x(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var $={setDeleteAttr:tt,ssr:""};function tt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var v=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return v[v.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...v]},push(t={}){return v.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return v.push(v[0])},pop(){if(v.length!==1)return v.pop()}};function H(...t){return this.appendOriginal(...t),this}function et(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var j;function y(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(_=>_(s)),void 0):s}),c=t(e||void 0);let d=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let u=y.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(u),d&&(s=u);break}case t==="#text":c=P.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=P.call(this,document.createDocumentFragment(),e);break;case!!j:c=P.call(this,document.createElementNS(j,t),e);break;case!c:c=P.call(this,document.createElement(t),e)}return et(c),s||(s=c),n.forEach(d=>d(s)),o&&g.pop(),o=2,c}function Et(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,c)=>Reflect.set(o,c.name||e,c)&&o,{}),r=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,c,s){if(!s.length)return t;let d=document.createDocumentFragment();for(let u of s){if(!u||!u.slot){r&&d.appendChild(u);continue}let l=u.slot,_=n[l];S(u,"remove","slot"),_&&(_.replaceWith(u),Reflect.deleteProperty(n,l))}return r&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(u=>u.replaceWith(y().append(...Array.from(u.childNodes)))),t}}),t}y.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(``);return e||(r.end=document.createComment("")),r};function vt(t){let e=this;return function(...r){j=t;let o=y.call(e,...r);return j=void 0,o}}var{setDeleteAttr:I}=$,L=new WeakMap;function P(t,...e){if(!e.length)return t;L.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return L.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,u)=>Z.call(c,t,d,u));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,t[e]));case"ariaset":return F(o,n,(d,u)=>r("aria-"+d,u));case"classList":return nt.call(c,t,n)}return rt(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?ct:ot).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function nt(t,e){let n=C(this);return F(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function xt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function S(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function rt(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!x(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function F(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function ot(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,K(r))}function ct(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function wt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function E(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var D=it(),st=new WeakSet;E.connected=function(t,e){let{custom_element:n}=g.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(N(e.signal,()=>D.offConnected(c,t))&&D.onConnected(c,t),c)}};E.disconnected=function(t,e){let{custom_element:n}=g.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||N(e.signal,()=>D.offDisconnected(c,t))&&D.onDisconnected(c,t),c}};var z=new WeakMap;E.disconnectedAsAbort=function(t){if(z.has(t))return z.get(t);let e=new AbortController;return z.set(t,e),t(E.disconnected(()=>e.abort())),e};E.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||st.has(o))return o;let s=new MutationObserver(function(u){for(let{attributeName:l,target:_}of u)_.dispatchEvent(new CustomEvent(c,{detail:[l,_.getAttribute(l)]}))});return N(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function it(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let f of i)if(f.type==="childList"){if(l(f.addedNodes,!0)){s();continue}_(f.removedNodes,!0)&&s()}});return{onConnected(i,f){c();let a=o(i);a.connected.has(f)||(a.connected.add(f),a.length_c+=1)},offConnected(i,f){if(!t.has(i))return;let a=t.get(i);a.connected.has(f)&&(a.connected.delete(f),a.length_c-=1,r(i,a))},onDisconnected(i,f){c();let a=o(i);a.disconnected.has(f)||(a.disconnected.add(f),a.length_d+=1)},offDisconnected(i,f){if(!t.has(i))return;let a=t.get(i);a.disconnected.has(f)&&(a.disconnected.delete(f),a.length_d-=1,r(i,a))}};function r(i,f){f.length_c||f.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let f={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,f),f}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function d(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function u(i){t.size>30&&await d();let f=[];if(!(i instanceof Node))return f;for(let a of t.keys())a===i||!(a instanceof Node)||i.contains(a)&&f.push(a);return f}function l(i,f){let a=!1;for(let m of i){if(f&&u(m).then(l),!t.has(m))continue;let w=t.get(m);w.length_c&&(m.dispatchEvent(new Event("dde:connected")),w.connected=new WeakSet,w.length_c=0,w.length_d||t.delete(m),a=!0)}return a}function _(i,f){let a=!1;for(let m of i)f&&u(m).then(_),!(!t.has(m)||!t.get(m).length_d)&&(m.dispatchEvent(new Event("dde:disconnected")),t.delete(m),a=!0);return a}}var p=Symbol.for("Signal");function W(t){try{return Reflect.has(t,p)}catch{return!1}}var M=[],h=new WeakMap;function b(t,e){if(typeof t!="function")return Q(t,e);if(W(t))return t;let n=Q(),r=function(){let[o,...c]=h.get(r);if(h.set(r,new Set([o])),M.push(r),n(t()),M.pop(),!c.length)return;let s=h.get(r);for(let d of c)s.has(d)||R(d,r)};return h.set(n[p],r),h.set(r,new Set([n])),r(),n}b.action=function(t,e,...n){let r=t[p],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};b.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));U(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};b.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};b.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!h.has(o))return;let c=h.get(o);c.delete(n),!(c.size>1)&&(b.clear(...c),h.delete(o))})}};var k="__dde_reactive";b.el=function(t,e){let n=y.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=g,s=d=>{if(!n.parentNode||!r.parentNode)return R(t,s);g.push(c);let u=e(d);g.pop(),Array.isArray(u)||(u=[u]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...u)};return U(t,s),Y(t,s,n,e),s(t()),o};var O="__dde_attributes";b.attribute=function(t,e=null){let n=b(e),r;return g.host(o=>{if(r=o,S(r,"has",t)?n(S(r,"get",t)):e!==null&&S(r,"set",t,e),o[O]){o[O][t]=n;return}r[O]={[t]:n},E.attributeChanged(function({detail:s}){/*! This maps attributes to signals (`S.attribute`). +* Investigate `__dde_attributes` key of the element.*/let[d,u]=s,l=r[O][d];if(l)return l(u)})(r),E.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). +* Investigate `__dde_attributes` key of the element.*/b.clear(...Object.values(r[O]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let d=s[0];return S(r,"set",t,d)}})};var X={isSignal:W,processReactiveAttribute(t,e,n,r){if(!W(n))return n;let o=c=>r(e,c);return U(n,o),Y(n,o,t,e),n()}};function Y(t,e,...n){let{current:r}=g;r.prevent||r.host(function(o){o[k]||(o[k]=[],E.disconnected(()=>o[k].forEach(([[c,s]])=>R(c,s,c[p]?.host()===o)))(o)),o[k].push([[t,e],...n])})}function Q(t,e){let n=(...r)=>r.length?lt(n,...r):dt(n);return ut(n,t,e)}var ft=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ut(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=b.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=g;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],ft),t}function at(){return M[M.length-1]}function dt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=at();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function lt(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function U(t,e){if(t[p])return t[p].listeners.add(e)}function R(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(b.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>R(s,c,!0))}return o}T(X); globalThis.dde= {S: b, -assign: j, +assign: P, assignAttribute: Z, chainableAppend: et, classListDeclarative: nt, -createElement: S, -createElementNS: Et, -dispatchEvent: yt, -el: S, -elNS: Et, -elementAttribute: A, -empty: vt, +createElement: y, +createElementNS: vt, +dispatchEvent: wt, +el: y, +elNS: vt, +elementAttribute: S, +empty: xt, isSignal: W, -on: _, +on: E, registerReactivity: T, -scope: g +scope: g, +simulateSlots: Et }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index 12dfe87..785b65a 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,20 +1,21 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var E={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function U(t,e=!0){return e?Object.assign(E,t):(Object.setPrototypeOf(t,E),t)}function x(t){return E.isPrototypeOf(t)&&t!==E?t:E}function b(t){return typeof t>"u"}function A(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:q,ssr:""};function q(t,e,n){if(Reflect.set(t,e,n),!!b(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var l=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],v={get current(){return l[l.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...l]},push(t={}){return l.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return l.push(l[0])},pop(){if(l.length!==1)return l.pop()}};function D(...t){return this.appendOriginal(...t),this}function z(t){return t.append===D||(t.appendOriginal=t.append,t.append=D),t}var O;function N(t,e,...n){let c=x(this),o=0,r,f;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,v.push({scope:t,host:(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(g=>g(f)),void 0):f}),r=t(e||void 0);let d=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let a=N.mark({type:"component",name:t.name,host:d?"this":"parentElement"});r.prepend(a),d&&(f=a);break}case t==="#text":r=w.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=w.call(this,document.createDocumentFragment(),e);break;case!!O:r=w.call(this,document.createElementNS(O,t),e);break;case!r:r=w.call(this,document.createElement(t),e)}return z(r),f||(f=r),n.forEach(d=>d(f)),o&&v.pop(),o=2,r}N.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function Y(t){let e=this;return function(...c){O=t;let o=N.call(e,...c);return O=void 0,o}}var{setDeleteAttr:j}=R,C=new WeakMap;function w(t,...e){if(!e.length)return t;C.set(t,T(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))M.call(this,t,n,c);return C.delete(t),t}function M(t,e,n){let{setRemoveAttr:c,s:o}=T(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>M.call(r,t,d,a));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return P(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return j(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(o,n,P.bind(null,t[e]));case"ariaset":return y(o,n,(d,a)=>c("aria-"+d,a));case"classList":return B.call(r,t,n)}return F(t,e)?j(t,e,n):c(e,n)}function T(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?H:k).bind(null,t,"Attribute"),o=x(e);return{setRemoveAttr:c,s:o}}function B(t,e){let n=x(this);return y(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function tt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function et(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function F(t,e){if(!Reflect.has(t,e))return!1;let n=W(t,e);return!b(n.set)}function W(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||W(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function k(t,e,n,c){return t[(b(c)?"remove":"set")+e](n,$(c))}function H(t,e,n,c,o=null){return t[(b(c)?"remove":"set")+e+"NS"](o,n,$(c))}function P(t,e,n){if(Reflect.set(t,e,n),!!b(n))return Reflect.deleteProperty(t,e)}function ot(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let f=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(f)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var S=Z(),I=new WeakSet;_.connected=function(t,e){let{custom_element:n}=v.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),r):(A(e.signal,()=>S.offConnected(r,t))&&S.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=v.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||A(e.signal,()=>S.offDisconnected(r,t))&&S.onDisconnected(r,t),r}};var L=new WeakMap;_.disconnectedAsAbort=function(t){if(L.has(t))return L.get(t);let e=new AbortController;return L.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||I.has(o))return o;let f=new MutationObserver(function(a){for(let{attributeName:h,target:g}of a)g.dispatchEvent(new CustomEvent(r,{detail:[h,g.getAttribute(h)]}))});return A(e.signal,()=>f.disconnect())&&f.observe(o,{attributes:!0}),o}};function Z(){let t=new Map,e=!1,n=new MutationObserver(function(s){for(let i of s)if(i.type==="childList"){if(h(i.addedNodes,!0)){f();continue}g(i.removedNodes,!0)&&f()}});return{onConnected(s,i){r();let u=o(s);u.connected.has(i)||(u.connected.add(i),u.length_c+=1)},offConnected(s,i){if(!t.has(s))return;let u=t.get(s);u.connected.has(i)&&(u.connected.delete(i),u.length_c-=1,c(s,u))},onDisconnected(s,i){r();let u=o(s);u.disconnected.has(i)||(u.disconnected.add(i),u.length_d+=1)},offDisconnected(s,i){if(!t.has(s))return;let u=t.get(s);u.disconnected.has(i)&&(u.disconnected.delete(i),u.length_d-=1,c(s,u))}};function c(s,i){i.length_c||i.length_d||(t.delete(s),f())}function o(s){if(t.has(s))return t.get(s);let i={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,i),i}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function a(s){t.size>30&&await d();let i=[];if(!(s instanceof Node))return i;for(let u of t.keys())u===s||!(u instanceof Node)||s.contains(u)&&i.push(u);return i}function h(s,i){let u=!1;for(let p of s){if(i&&a(p).then(h),!t.has(p))continue;let m=t.get(p);m.length_c&&(p.dispatchEvent(new Event("dde:connected")),m.connected=new WeakSet,m.length_c=0,m.length_d||t.delete(p),u=!0)}return u}function g(s,i){let u=!1;for(let p of s)i&&a(p).then(g),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),u=!0);return u}} +var E={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(E,t):(Object.setPrototypeOf(t,E),t)}function x(t){return E.isPrototypeOf(t)&&t!==E?t:E}function b(t){return typeof t>"u"}function A(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var S={setDeleteAttr:F,ssr:""};function F(t,e,n){if(Reflect.set(t,e,n),!!b(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var g=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],v={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 L(...t){return this.appendOriginal(...t),this}function U(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var O;function C(t,e,...n){let c=x(this),o=0,r,f;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,v.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(h=>h(f)),void 0):f}),r=t(e||void 0);let d=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let a=C.mark({type:"component",name:t.name,host:d?"this":"parentElement"});r.prepend(a),d&&(f=a);break}case t==="#text":r=w.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=w.call(this,document.createDocumentFragment(),e);break;case!!O:r=w.call(this,document.createElementNS(O,t),e);break;case!r:r=w.call(this,document.createElement(t),e)}return U(r),f||(f=r),n.forEach(d=>d(f)),o&&v.pop(),o=2,r}function tt(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,r)=>Reflect.set(o,r.name||e,r)&&o,{}),c=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,r,f){if(!f.length)return t;let d=document.createDocumentFragment();for(let a of f){if(!a||!a.slot){c&&d.appendChild(a);continue}let l=a.slot,h=n[l];B(a,"remove","slot"),h&&(h.replaceWith(a),Reflect.deleteProperty(n,l))}return c&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(a=>a.replaceWith(C().append(...Array.from(a.childNodes)))),t}}),t}C.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function et(t){let e=this;return function(...c){O=t;let o=C.call(e,...c);return O=void 0,o}}var{setDeleteAttr:j}=S,y=new WeakMap;function w(t,...e){if(!e.length)return t;y.set(t,M(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))W.call(this,t,n,c);return y.delete(t),t}function W(t,e,n){let{setRemoveAttr:c,s:o}=M(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>W.call(r,t,d,a));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return P(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return j(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return N(o,n,P.bind(null,t[e]));case"ariaset":return N(o,n,(d,a)=>c("aria-"+d,a));case"classList":return z.call(r,t,n)}return k(t,e)?j(t,e,n):c(e,n)}function M(t,e){if(y.has(t))return y.get(t);let c=(t instanceof SVGElement?I:H).bind(null,t,"Attribute"),o=x(e);return{setRemoveAttr:c,s:o}}function z(t,e){let n=x(this);return N(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function nt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function B(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function k(t,e){if(!Reflect.has(t,e))return!1;let n=T(t,e);return!b(n.set)}function T(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||T(t,e)}function N(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function H(t,e,n,c){return t[(b(c)?"remove":"set")+e](n,$(c))}function I(t,e,n,c,o=null){return t[(b(c)?"remove":"set")+e+"NS"](o,n,$(c))}function P(t,e,n){if(Reflect.set(t,e,n),!!b(n))return Reflect.deleteProperty(t,e)}function ct(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let f=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(f)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var R=G(),Z=new WeakSet;_.connected=function(t,e){let{custom_element:n}=v.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),r):(A(e.signal,()=>R.offConnected(r,t))&&R.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=v.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||A(e.signal,()=>R.offDisconnected(r,t))&&R.onDisconnected(r,t),r}};var D=new WeakMap;_.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||Z.has(o))return o;let f=new MutationObserver(function(a){for(let{attributeName:l,target:h}of a)h.dispatchEvent(new CustomEvent(r,{detail:[l,h.getAttribute(l)]}))});return A(e.signal,()=>f.disconnect())&&f.observe(o,{attributes:!0}),o}};function G(){let t=new Map,e=!1,n=new MutationObserver(function(s){for(let i of s)if(i.type==="childList"){if(l(i.addedNodes,!0)){f();continue}h(i.removedNodes,!0)&&f()}});return{onConnected(s,i){r();let u=o(s);u.connected.has(i)||(u.connected.add(i),u.length_c+=1)},offConnected(s,i){if(!t.has(s))return;let u=t.get(s);u.connected.has(i)&&(u.connected.delete(i),u.length_c-=1,c(s,u))},onDisconnected(s,i){r();let u=o(s);u.disconnected.has(i)||(u.disconnected.add(i),u.length_d+=1)},offDisconnected(s,i){if(!t.has(s))return;let u=t.get(s);u.disconnected.has(i)&&(u.disconnected.delete(i),u.length_d-=1,c(s,u))}};function c(s,i){i.length_c||i.length_d||(t.delete(s),f())}function o(s){if(t.has(s))return t.get(s);let i={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,i),i}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function a(s){t.size>30&&await d();let i=[];if(!(s instanceof Node))return i;for(let u of t.keys())u===s||!(u instanceof Node)||s.contains(u)&&i.push(u);return i}function l(s,i){let u=!1;for(let p of s){if(i&&a(p).then(l),!t.has(p))continue;let m=t.get(p);m.length_c&&(p.dispatchEvent(new Event("dde:connected")),m.connected=new WeakSet,m.length_c=0,m.length_d||t.delete(p),u=!0)}return u}function h(s,i){let u=!1;for(let p of s)i&&a(p).then(h),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),u=!0);return u}} globalThis.dde= {assign: w, -assignAttribute: M, -chainableAppend: z, -classListDeclarative: B, -createElement: N, -createElementNS: Y, -dispatchEvent: ot, -el: N, -elNS: Y, -elementAttribute: et, -empty: tt, +assignAttribute: W, +chainableAppend: U, +classListDeclarative: z, +createElement: C, +createElementNS: et, +dispatchEvent: ct, +el: C, +elNS: et, +elementAttribute: B, +empty: nt, on: _, -registerReactivity: U, -scope: v +registerReactivity: q, +scope: v, +simulateSlots: tt }; })(); \ No newline at end of file diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index c19c3e2..7e6c53e 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -46,7 +46,7 @@ export function classListDeclarative(element: El, c export function assign(element: El, ...attrs_array: Partial>[]): El export function assignAttribute>(element: El, attr: ATT, value: ElementAttributes[ATT]): ElementAttributes[ATT] -type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap +type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap export function el( tag_name: TAG, attrs?: string | Partial>, @@ -54,7 +54,7 @@ export function el( ): ExtendedHTMLElementTagNameMap[TAG] export function el( tag_name?: "<>", -): DocumentFragment +): ddeDocumentFragment export function el< A extends ddeComponentAttributes, @@ -68,22 +68,22 @@ export function el( tag_name: string, attrs?: string | Record, ...addons: ddeElementAddon[] -): HTMLElement +): ddeHTMLElement export function elNS( namespace: "http://www.w3.org/2000/svg" -): ( +): ( tag_name: TAG, - attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>, - ...addons: ddeElementAddon[] -)=> SVGElementTagNameMap[TAG] + attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>, + ...addons: ddeElementAddon[] +)=> EL export function elNS( namespace: "http://www.w3.org/1998/Math/MathML" ): ( tag_name: TAG, attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>, ...addons: ddeElementAddon[] -)=> MathMLElementTagNameMap[TAG] +)=> ddeMathMLElement export function elNS( namespace: string ): ( @@ -93,6 +93,7 @@ export function elNS( )=> SupportedElement export function chainableAppend(el: EL): EL; +export function simulateSlots(el: EL): EL export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any)=> void; @@ -166,304 +167,282 @@ export const scope: { pop(): ReturnType["pop"]>, }; -/* - * TODO TypeScript HACK (better way?) - * this doesnt works - * ```ts - * interface element extends Node{ - * prototype: el; - * append(...els: (SupportedElement | DocumentFragment | string | element)[]): el - * } - * -export function el( - * tag_name?: "<>", - * ): element -* ``` - * …as its complains here - * ``` -ts - * -const d= el("div"); -* -const f= (a: HTMLDivElement)=> a; -* f(d); -//← - * document.head.append( //← - * el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }), - * ); -* ``` - * TODO for SVG - * */ +/* TypeScript MEH // TODO for SVG */ type ddeAppend= (...nodes: (Node | string)[])=> el; declare global{ - interface HTMLAnchorElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLAreaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLAudioElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBaseElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLQuoteElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBodyElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBRElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLButtonElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLCanvasElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCaptionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableColElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableColElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDataElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDataListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLModElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDetailsElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDialogElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDivElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLEmbedElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLFieldSetElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLFormElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHeadingElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHeadElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHRElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHtmlElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLIFrameElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLImageElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLInputElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLabelElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLegendElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLIElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLinkElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMapElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMenuElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMetaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMeterElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLObjectElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOptGroupElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOptionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOutputElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLParagraphElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLPictureElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLPreElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLProgressElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLScriptElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSelectElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSlotElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSourceElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSpanElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLStyleElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableSectionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCellElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTemplateElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTextAreaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCellElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTimeElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTitleElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableRowElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTrackElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLUListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLVideoElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface DocumentFragment{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface SVGElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } + interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } + interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } + interface ddeSVGElement extends SVGElement{ append: ddeAppend; } + interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } + + interface ddeHTMLElementTagNameMap { + "a": ddeHTMLAnchorElement; + "area": ddeHTMLAreaElement; + "audio": ddeHTMLAudioElement; + "base": ddeHTMLBaseElement; + "blockquote": ddeHTMLQuoteElement; + "body": ddeHTMLBodyElement; + "br": ddeHTMLBRElement; + "button": ddeHTMLButtonElement; + "canvas": ddeHTMLCanvasElement; + "caption": ddeHTMLTableCaptionElement; + "col": ddeHTMLTableColElement; + "colgroup": ddeHTMLTableColElement; + "data": ddeHTMLDataElement; + "datalist": ddeHTMLDataListElement; + "del": ddeHTMLModElement; + "details": ddeHTMLDetailsElement; + "dialog": ddeHTMLDialogElement; + "div": ddeHTMLDivElement; + "dl": ddeHTMLDListElement; + "embed": ddeHTMLEmbedElement; + "fieldset": ddeHTMLFieldSetElement; + "form": ddeHTMLFormElement; + "h1": ddeHTMLHeadingElement; + "h2": ddeHTMLHeadingElement; + "h3": ddeHTMLHeadingElement; + "h4": ddeHTMLHeadingElement; + "h5": ddeHTMLHeadingElement; + "h6": ddeHTMLHeadingElement; + "head": ddeHTMLHeadElement; + "hr": ddeHTMLHRElement; + "html": ddeHTMLHtmlElement; + "iframe": ddeHTMLIFrameElement; + "img": ddeHTMLImageElement; + "input": ddeHTMLInputElement; + "ins": ddeHTMLModElement; + "label": ddeHTMLLabelElement; + "legend": ddeHTMLLegendElement; + "li": ddeHTMLLIElement; + "link": ddeHTMLLinkElement; + "map": ddeHTMLMapElement; + "menu": ddeHTMLMenuElement; + "meta": ddeHTMLMetaElement; + "meter": ddeHTMLMeterElement; + "object": ddeHTMLObjectElement; + "ol": ddeHTMLOListElement; + "optgroup": ddeHTMLOptGroupElement; + "option": ddeHTMLOptionElement; + "output": ddeHTMLOutputElement; + "p": ddeHTMLParagraphElement; + "picture": ddeHTMLPictureElement; + "pre": ddeHTMLPreElement; + "progress": ddeHTMLProgressElement; + "q": ddeHTMLQuoteElement; + "script": ddeHTMLScriptElement; + "select": ddeHTMLSelectElement; + "slot": ddeHTMLSlotElement; + "source": ddeHTMLSourceElement; + "span": ddeHTMLSpanElement; + "style": ddeHTMLStyleElement; + "table": ddeHTMLTableElement; + "tbody": ddeHTMLTableSectionElement; + "td": ddeHTMLTableCellElement; + "template": ddeHTMLTemplateElement; + "textarea": ddeHTMLTextAreaElement; + "tfoot": ddeHTMLTableSectionElement; + "th": ddeHTMLTableCellElement; + "thead": ddeHTMLTableSectionElement; + "time": ddeHTMLTimeElement; + "title": ddeHTMLTitleElement; + "tr": ddeHTMLTableRowElement; + "track": ddeHTMLTrackElement; + "ul": ddeHTMLUListElement; + "video": ddeHTMLVideoElement; + } + interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } + interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } + interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } + interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend; } + interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend; } + interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend; } + interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend; } + interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend; } + interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend; } + interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend; } + interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } + interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } + interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend; } + interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend; } + interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend; } + interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend; } + interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend; } + interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend; } + interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend; } + interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend; } + interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend; } + interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend; } + interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend; } + interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend; } + interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend; } + interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend; } + interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend; } + interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend; } + interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend; } + interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend; } + interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend; } + interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend; } + interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend; } + interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend; } + interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend; } + interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend; } + interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend; } + interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend; } + interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend; } + interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend; } + interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend; } + interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend; } + interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend; } + interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend; } + interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend; } + interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend; } + interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend; } + interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend; } + interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend; } + interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend; } + interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend; } + interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend; } + interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend; } + interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend; } + interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } + interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend; } + interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend; } + interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } + interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend; } + interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend; } + interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend; } + interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend; } + interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend; } + interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend; } + + interface ddeSVGElementTagNameMap { + "a": ddeSVGAElement; + "animate": ddeSVGAnimateElement; + "animateMotion": ddeSVGAnimateMotionElement; + "animateTransform": ddeSVGAnimateTransformElement; + "circle": ddeSVGCircleElement; + "clipPath": ddeSVGClipPathElement; + "defs": ddeSVGDefsElement; + "desc": ddeSVGDescElement; + "ellipse": ddeSVGEllipseElement; + "feBlend": ddeSVGFEBlendElement; + "feColorMatrix": ddeSVGFEColorMatrixElement; + "feComponentTransfer": ddeSVGFEComponentTransferElement; + "feComposite": ddeSVGFECompositeElement; + "feConvolveMatrix": ddeSVGFEConvolveMatrixElement; + "feDiffuseLighting": ddeSVGFEDiffuseLightingElement; + "feDisplacementMap": ddeSVGFEDisplacementMapElement; + "feDistantLight": ddeSVGFEDistantLightElement; + "feDropShadow": ddeSVGFEDropShadowElement; + "feFlood": ddeSVGFEFloodElement; + "feFuncA": ddeSVGFEFuncAElement; + "feFuncB": ddeSVGFEFuncBElement; + "feFuncG": ddeSVGFEFuncGElement; + "feFuncR": ddeSVGFEFuncRElement; + "feGaussianBlur": ddeSVGFEGaussianBlurElement; + "feImage": ddeSVGFEImageElement; + "feMerge": ddeSVGFEMergeElement; + "feMergeNode": ddeSVGFEMergeNodeElement; + "feMorphology": ddeSVGFEMorphologyElement; + "feOffset": ddeSVGFEOffsetElement; + "fePointLight": ddeSVGFEPointLightElement; + "feSpecularLighting": ddeSVGFESpecularLightingElement; + "feSpotLight": ddeSVGFESpotLightElement; + "feTile": ddeSVGFETileElement; + "feTurbulence": ddeSVGFETurbulenceElement; + "filter": ddeSVGFilterElement; + "foreignObject": ddeSVGForeignObjectElement; + "g": ddeSVGGElement; + "image": ddeSVGImageElement; + "line": ddeSVGLineElement; + "linearGradient": ddeSVGLinearGradientElement; + "marker": ddeSVGMarkerElement; + "mask": ddeSVGMaskElement; + "metadata": ddeSVGMetadataElement; + "mpath": ddeSVGMPathElement; + "path": ddeSVGPathElement; + "pattern": ddeSVGPatternElement; + "polygon": ddeSVGPolygonElement; + "polyline": ddeSVGPolylineElement; + "radialGradient": ddeSVGRadialGradientElement; + "rect": ddeSVGRectElement; + "script": ddeSVGScriptElement; + "set": ddeSVGSetElement; + "stop": ddeSVGStopElement; + "style": ddeSVGStyleElement; + "svg": ddeSVGSVGElement; + "switch": ddeSVGSwitchElement; + "symbol": ddeSVGSymbolElement; + "text": ddeSVGTextElement; + "textPath": ddeSVGTextPathElement; + "title": ddeSVGTitleElement; + "tspan": ddeSVGTSpanElement; + "use": ddeSVGUseElement; + "view": ddeSVGViewElement; + } + interface ddeSVGAElement extends SVGAElement{ append: ddeAppend; } + interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend; } + interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend; } + interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend; } + interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend; } + interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend; } + interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend; } + interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend; } + interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend; } + interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend; } + interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend; } + interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend; } + interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend; } + interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend; } + interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend; } + interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend; } + interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend; } + interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend; } + interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend; } + interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend; } + interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend; } + interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend; } + interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend; } + interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend; } + interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend; } + interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend; } + interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend; } + interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend; } + interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend; } + interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend; } + interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend; } + interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend; } + interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend; } + interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend; } + interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend; } + interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend; } + interface ddeSVGGElement extends SVGGElement{ append: ddeAppend; } + interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend; } + interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend; } + interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend; } + interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend; } + interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend; } + interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend; } + interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend; } + interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend; } + interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend; } + interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend; } + interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend; } + interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend; } + interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend; } + interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend; } + interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend; } + interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend; } + interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend; } + interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend; } + interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend; } + interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend; } + interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend; } + interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend; } + interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend; } + interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend; } + interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } + interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } } export type Signal= (set?: V)=> V & A; type Action= (this: { value: V }, ...a: any[])=> typeof S._ | void; diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index 32d57ea..79f0493 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -1,4 +1,4 @@ -var y={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(y,t):(Object.setPrototypeOf(t,y),t)}function C(t){return y.isPrototypeOf(t)&&t!==y?t:y}function x(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var $={setDeleteAttr:tt,ssr:""};function tt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var E=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return E[E.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...E]},push(t={}){return E.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};function H(...t){return this.appendOriginal(...t),this}function et(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var L;function S(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...p)=>p.length?(o===1?n.unshift(...p):p.forEach(v=>v(s)),void 0):s}),c=t(e||void 0);let a=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let d=S.mark({type:"component",name:t.name,host:a?"this":"parentElement"});c.prepend(d),a&&(s=d);break}case t==="#text":c=j.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=j.call(this,document.createDocumentFragment(),e);break;case!!L:c=j.call(this,document.createElementNS(L,t),e);break;case!c:c=j.call(this,document.createElement(t),e)}return et(c),s||(s=c),n.forEach(a=>a(s)),o&&g.pop(),o=2,c}S.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(``);return e||(r.end=document.createComment("")),r};function Et(t){let e=this;return function(...r){L=t;let o=S.call(e,...r);return L=void 0,o}}var{setDeleteAttr:I}=$,P=new WeakMap;function j(t,...e){if(!e.length)return t;P.set(t,G(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}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(a,d)=>Z.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return z(o,n,J.bind(null,t[e]));case"ariaset":return z(o,n,(a,d)=>r("aria-"+a,d));case"classList":return nt.call(c,t,n)}return rt(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(P.has(t))return P.get(t);let r=(t instanceof SVGElement?ct:ot).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function nt(t,e){let n=C(this);return z(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function vt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function A(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function rt(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!x(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function z(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function ot(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,K(r))}function ct(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function yt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var k=it(),st=new WeakSet;_.connected=function(t,e){let{custom_element:n}=g.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(N(e.signal,()=>k.offConnected(c,t))&&k.onConnected(c,t),c)}};_.disconnected=function(t,e){let{custom_element:n}=g.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||N(e.signal,()=>k.offDisconnected(c,t))&&k.onDisconnected(c,t),c}};var F=new WeakMap;_.disconnectedAsAbort=function(t){if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||st.has(o))return o;let s=new MutationObserver(function(d){for(let{attributeName:p,target:v}of d)v.dispatchEvent(new CustomEvent(c,{detail:[p,v.getAttribute(p)]}))});return N(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function it(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(p(u.addedNodes,!0)){s();continue}v(u.removedNodes,!0)&&s()}});return{onConnected(i,u){c();let f=o(i);f.connected.has(u)||(f.connected.add(u),f.length_c+=1)},offConnected(i,u){if(!t.has(i))return;let f=t.get(i);f.connected.has(u)&&(f.connected.delete(u),f.length_c-=1,r(i,f))},onDisconnected(i,u){c();let f=o(i);f.disconnected.has(u)||(f.disconnected.add(u),f.length_d+=1)},offDisconnected(i,u){if(!t.has(i))return;let f=t.get(i);f.disconnected.has(u)&&(f.disconnected.delete(u),f.length_d-=1,r(i,f))}};function r(i,u){u.length_c||u.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,u),u}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function d(i){t.size>30&&await a();let u=[];if(!(i instanceof Node))return u;for(let f of t.keys())f===i||!(f instanceof Node)||i.contains(f)&&u.push(f);return u}function p(i,u){let f=!1;for(let m of i){if(u&&d(m).then(p),!t.has(m))continue;let w=t.get(m);w.length_c&&(m.dispatchEvent(new Event("dde:connected")),w.connected=new WeakSet,w.length_c=0,w.length_d||t.delete(m),f=!0)}return f}function v(i,u){let f=!1;for(let m of i)u&&d(m).then(v),!(!t.has(m)||!t.get(m).length_d)&&(m.dispatchEvent(new Event("dde:disconnected")),t.delete(m),f=!0);return f}}var l=Symbol.for("Signal");function W(t){try{return Reflect.has(t,l)}catch{return!1}}var M=[],h=new WeakMap;function b(t,e){if(typeof t!="function")return Q(t,e);if(W(t))return t;let n=Q(),r=function(){let[o,...c]=h.get(r);if(h.set(r,new Set([o])),M.push(r),n(t()),M.pop(),!c.length)return;let s=h.get(r);for(let a of c)s.has(a)||R(a,r)};return h.set(n[l],r),h.set(r,new Set([n])),r(),n}b.action=function(t,e,...n){let r=t[l],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};b.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));q(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};b.symbols={signal:l,onclear:Symbol.for("Signal.onclear")};b.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[l];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,l)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!h.has(o))return;let c=h.get(o);c.delete(n),!(c.size>1)&&(b.clear(...c),h.delete(o))})}};var D="__dde_reactive";b.el=function(t,e){let n=S.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=g,s=a=>{if(!n.parentNode||!r.parentNode)return R(t,s);g.push(c);let d=e(a);g.pop(),Array.isArray(d)||(d=[d]);let p=n;for(;(p=n.nextSibling)!==r;)p.remove();n.after(...d)};return q(t,s),Y(t,s,n,e),s(t()),o};var O="__dde_attributes";b.attribute=function(t,e=null){let n=b(e),r;return g.host(o=>{if(r=o,A(r,"has",t)?n(A(r,"get",t)):e!==null&&A(r,"set",t,e),o[O]){o[O][t]=n;return}r[O]={[t]:n},_.attributeChanged(function({detail:s}){/*! This maps attributes to signals (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/let[a,d]=s,p=r[O][a];if(p)return p(d)})(r),_.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/b.clear(...Object.values(r[O]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let a=s[0];return A(r,"set",t,a)}})};var X={isSignal:W,processReactiveAttribute(t,e,n,r){if(!W(n))return n;let o=c=>r(e,c);return q(n,o),Y(n,o,t,e),n()}};function Y(t,e,...n){let{current:r}=g;r.prevent||r.host(function(o){o[D]||(o[D]=[],_.disconnected(()=>o[D].forEach(([[c,s]])=>R(c,s,c[l]?.host()===o)))(o)),o[D].push([[t,e],...n])})}function Q(t,e){let n=(...r)=>r.length?lt(n,...r):dt(n);return ft(n,t,e)}var ut=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),U=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ft(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=b.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=g;return Reflect.defineProperty(t,l,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new U},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[l],ut),t}function at(){return M[M.length-1]}function dt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=at();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function lt(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 q(t,e){if(t[l])return t[l].listeners.add(e)}function R(t,e,n){let r=t[l];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(b.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>R(s,c,!0))}return o}T(X);export{b as S,j as assign,Z as assignAttribute,et as chainableAppend,nt as classListDeclarative,S as createElement,Et as createElementNS,yt as dispatchEvent,S as el,Et as elNS,A as elementAttribute,vt as empty,W as isSignal,_ as on,T as registerReactivity,g as scope}; +var A={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(t,e=!0){return e?Object.assign(A,t):(Object.setPrototypeOf(t,A),t)}function C(t){return A.isPrototypeOf(t)&&t!==A?t:A}function x(t){return typeof t>"u"}function B(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function N(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var $={setDeleteAttr:tt,ssr:""};function tt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var v=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],g={get current(){return v[v.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...v]},push(t={}){return v.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return v.push(v[0])},pop(){if(v.length!==1)return v.pop()}};function H(...t){return this.appendOriginal(...t),this}function et(t){return t.append===H||(t.appendOriginal=t.append,t.append=H),t}var j;function y(t,e,...n){let r=C(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,g.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(_=>_(s)),void 0):s}),c=t(e||void 0);let d=c instanceof DocumentFragment;if(c.nodeName==="#comment")break;let u=y.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(u),d&&(s=u);break}case t==="#text":c=P.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):c=P.call(this,document.createDocumentFragment(),e);break;case!!j:c=P.call(this,document.createElementNS(j,t),e);break;case!c:c=P.call(this,document.createElement(t),e)}return et(c),s||(s=c),n.forEach(d=>d(s)),o&&g.pop(),o=2,c}function Et(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,c)=>Reflect.set(o,c.name||e,c)&&o,{}),r=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,c,s){if(!s.length)return t;let d=document.createDocumentFragment();for(let u of s){if(!u||!u.slot){r&&d.appendChild(u);continue}let l=u.slot,_=n[l];S(u,"remove","slot"),_&&(_.replaceWith(u),Reflect.deleteProperty(n,l))}return r&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(u=>u.replaceWith(y().append(...Array.from(u.childNodes)))),t}}),t}y.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=document.createComment(``);return e||(r.end=document.createComment("")),r};function vt(t){let e=this;return function(...r){j=t;let o=y.call(e,...r);return j=void 0,o}}var{setDeleteAttr:I}=$,L=new WeakMap;function P(t,...e){if(!e.length)return t;L.set(t,G(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))Z.call(this,t,n,r);return L.delete(t),t}function Z(t,e,n){let{setRemoveAttr:r,s:o}=G(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,u)=>Z.call(c,t,d,u));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return J(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return I(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return F(o,n,J.bind(null,t[e]));case"ariaset":return F(o,n,(d,u)=>r("aria-"+d,u));case"classList":return nt.call(c,t,n)}return rt(t,e)?I(t,e,n):r(e,n)}function G(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?ct:ot).bind(null,t,"Attribute"),o=C(e);return{setRemoveAttr:r,s:o}}function nt(t,e){let n=C(this);return F(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function xt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function S(t,e,n,r){return t instanceof HTMLElement?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function rt(t,e){if(!Reflect.has(t,e))return!1;let n=V(t,e);return!x(n.set)}function V(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||V(t,e)}function F(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function K(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function ot(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,K(r))}function ct(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,K(r))}function J(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function wt(t,e,n){return e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let s=c.length?new CustomEvent(t,Object.assign({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function E(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var D=it(),st=new WeakSet;E.connected=function(t,e){let{custom_element:n}=g.current,r="connected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents?c:c.isConnected?(c.dispatchEvent(new Event(s)),c):(N(e.signal,()=>D.offConnected(c,t))&&D.onConnected(c,t),c)}};E.disconnected=function(t,e){let{custom_element:n}=g.current,r="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(c){n&&(c=n);let s="dde:"+r;return c.addEventListener(s,t,e),c.__dde_lifecycleToEvents||N(e.signal,()=>D.offDisconnected(c,t))&&D.onDisconnected(c,t),c}};var z=new WeakMap;E.disconnectedAsAbort=function(t){if(z.has(t))return z.get(t);let e=new AbortController;return z.set(t,e),t(E.disconnected(()=>e.abort())),e};E.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let c="dde:"+n;if(o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||st.has(o))return o;let s=new MutationObserver(function(u){for(let{attributeName:l,target:_}of u)_.dispatchEvent(new CustomEvent(c,{detail:[l,_.getAttribute(l)]}))});return N(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function it(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let f of i)if(f.type==="childList"){if(l(f.addedNodes,!0)){s();continue}_(f.removedNodes,!0)&&s()}});return{onConnected(i,f){c();let a=o(i);a.connected.has(f)||(a.connected.add(f),a.length_c+=1)},offConnected(i,f){if(!t.has(i))return;let a=t.get(i);a.connected.has(f)&&(a.connected.delete(f),a.length_c-=1,r(i,a))},onDisconnected(i,f){c();let a=o(i);a.disconnected.has(f)||(a.disconnected.add(f),a.length_d+=1)},offDisconnected(i,f){if(!t.has(i))return;let a=t.get(i);a.disconnected.has(f)&&(a.disconnected.delete(f),a.length_d-=1,r(i,a))}};function r(i,f){f.length_c||f.length_d||(t.delete(i),s())}function o(i){if(t.has(i))return t.get(i);let f={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(i,f),f}function c(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,n.disconnect())}function d(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function u(i){t.size>30&&await d();let f=[];if(!(i instanceof Node))return f;for(let a of t.keys())a===i||!(a instanceof Node)||i.contains(a)&&f.push(a);return f}function l(i,f){let a=!1;for(let m of i){if(f&&u(m).then(l),!t.has(m))continue;let w=t.get(m);w.length_c&&(m.dispatchEvent(new Event("dde:connected")),w.connected=new WeakSet,w.length_c=0,w.length_d||t.delete(m),a=!0)}return a}function _(i,f){let a=!1;for(let m of i)f&&u(m).then(_),!(!t.has(m)||!t.get(m).length_d)&&(m.dispatchEvent(new Event("dde:disconnected")),t.delete(m),a=!0);return a}}var p=Symbol.for("Signal");function W(t){try{return Reflect.has(t,p)}catch{return!1}}var M=[],h=new WeakMap;function b(t,e){if(typeof t!="function")return Q(t,e);if(W(t))return t;let n=Q(),r=function(){let[o,...c]=h.get(r);if(h.set(r,new Set([o])),M.push(r),n(t()),M.pop(),!c.length)return;let s=h.get(r);for(let d of c)s.has(d)||R(d,r)};return h.set(n[p],r),h.set(r,new Set([n])),r(),n}b.action=function(t,e,...n){let r=t[p],{actions:o}=r;if(!o||!Reflect.has(o,e))throw new Error(`'${t}' has no action with name '${e}'!`);if(o[e].apply(r,n),r.skip)return Reflect.deleteProperty(r,"skip");r.listeners.forEach(c=>c(r.value))};b.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));U(e,n),o&&o.addEventListener("abort",()=>R(e,n))}};b.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};b.clear=function(...t){for(let n of t){Reflect.deleteProperty(n,"toJSON");let r=n[p];r.onclear.forEach(o=>o.call(r)),e(n,r),Reflect.deleteProperty(n,p)}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!h.has(o))return;let c=h.get(o);c.delete(n),!(c.size>1)&&(b.clear(...c),h.delete(o))})}};var k="__dde_reactive";b.el=function(t,e){let n=y.mark({type:"reactive"},!1),r=n.end,o=document.createDocumentFragment();o.append(n,r);let{current:c}=g,s=d=>{if(!n.parentNode||!r.parentNode)return R(t,s);g.push(c);let u=e(d);g.pop(),Array.isArray(u)||(u=[u]);let l=n;for(;(l=n.nextSibling)!==r;)l.remove();n.after(...u)};return U(t,s),Y(t,s,n,e),s(t()),o};var O="__dde_attributes";b.attribute=function(t,e=null){let n=b(e),r;return g.host(o=>{if(r=o,S(r,"has",t)?n(S(r,"get",t)):e!==null&&S(r,"set",t,e),o[O]){o[O][t]=n;return}r[O]={[t]:n},E.attributeChanged(function({detail:s}){/*! This maps attributes to signals (`S.attribute`). +* Investigate `__dde_attributes` key of the element.*/let[d,u]=s,l=r[O][d];if(l)return l(u)})(r),E.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). +* Investigate `__dde_attributes` key of the element.*/b.clear(...Object.values(r[O]))})(r)}),new Proxy(n,{apply(o,c,s){if(!s.length)return o();let d=s[0];return S(r,"set",t,d)}})};var X={isSignal:W,processReactiveAttribute(t,e,n,r){if(!W(n))return n;let o=c=>r(e,c);return U(n,o),Y(n,o,t,e),n()}};function Y(t,e,...n){let{current:r}=g;r.prevent||r.host(function(o){o[k]||(o[k]=[],E.disconnected(()=>o[k].forEach(([[c,s]])=>R(c,s,c[p]?.host()===o)))(o)),o[k].push([[t,e],...n])})}function Q(t,e){let n=(...r)=>r.length?lt(n,...r):dt(n);return ut(n,t,e)}var ft=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),q=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4);this.stack=n.find(o=>!o.includes(r))}};function ut(t,e,n){let r=[];B(n)!=="[object Object]"&&(n={});let{onclear:o}=b.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=g;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new q},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],ft),t}function at(){return M[M.length-1]}function dt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=at();return r&&n.add(r),h.has(r)&&h.get(r).add(t),e}function lt(t,e,n){if(!t[p])return;let r=t[p];if(!(!n&&r.value===e))return r.value=e,r.listeners.forEach(o=>o(e)),e}function U(t,e){if(t[p])return t[p].listeners.add(e)}function R(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(b.clear(t),!h.has(r))return o;let c=h.get(r);if(!h.has(c))return o;h.get(c).forEach(s=>R(s,c,!0))}return o}T(X);export{b as S,P as assign,Z as assignAttribute,et as chainableAppend,nt as classListDeclarative,y as createElement,vt as createElementNS,wt as dispatchEvent,y as el,vt as elNS,S as elementAttribute,xt as empty,W as isSignal,E as on,T as registerReactivity,g as scope,Et as simulateSlots}; diff --git a/dist/esm.d.ts b/dist/esm.d.ts index c217ad3..eab54d6 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -46,7 +46,7 @@ export function classListDeclarative(element: El, c export function assign(element: El, ...attrs_array: Partial>[]): El export function assignAttribute>(element: El, attr: ATT, value: ElementAttributes[ATT]): ElementAttributes[ATT] -type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap +type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap export function el( tag_name: TAG, attrs?: string | Partial>, @@ -54,7 +54,7 @@ export function el( ): ExtendedHTMLElementTagNameMap[TAG] export function el( tag_name?: "<>", -): DocumentFragment +): ddeDocumentFragment export function el< A extends ddeComponentAttributes, @@ -68,22 +68,22 @@ export function el( tag_name: string, attrs?: string | Record, ...addons: ddeElementAddon[] -): HTMLElement +): ddeHTMLElement export function elNS( namespace: "http://www.w3.org/2000/svg" -): ( +): ( tag_name: TAG, - attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>, - ...addons: ddeElementAddon[] -)=> SVGElementTagNameMap[TAG] + attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>, + ...addons: ddeElementAddon[] +)=> EL export function elNS( namespace: "http://www.w3.org/1998/Math/MathML" ): ( tag_name: TAG, attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>, ...addons: ddeElementAddon[] -)=> MathMLElementTagNameMap[TAG] +)=> ddeMathMLElement export function elNS( namespace: string ): ( @@ -93,6 +93,7 @@ export function elNS( )=> SupportedElement export function chainableAppend(el: EL): EL; +export function simulateSlots(el: EL): EL export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any)=> void; @@ -166,302 +167,280 @@ export const scope: { pop(): ReturnType["pop"]>, }; -/* - * TODO TypeScript HACK (better way?) - * this doesnt works - * ```ts - * interface element extends Node{ - * prototype: el; - * append(...els: (SupportedElement | DocumentFragment | string | element)[]): el - * } - * -export function el( - * tag_name?: "<>", - * ): element -* ``` - * …as its complains here - * ``` -ts - * -const d= el("div"); -* -const f= (a: HTMLDivElement)=> a; -* f(d); -//← - * document.head.append( //← - * el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }), - * ); -* ``` - * TODO for SVG - * */ +/* TypeScript MEH // TODO for SVG */ type ddeAppend= (...nodes: (Node | string)[])=> el; declare global{ - interface HTMLAnchorElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLAreaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLAudioElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBaseElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLQuoteElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBodyElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBRElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLButtonElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLCanvasElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCaptionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableColElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableColElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDataElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDataListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLModElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDetailsElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDialogElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDivElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLEmbedElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLFieldSetElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLFormElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHeadingElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHeadElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHRElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHtmlElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLIFrameElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLImageElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLInputElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLabelElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLegendElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLIElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLinkElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMapElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMenuElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMetaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMeterElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLObjectElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOptGroupElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOptionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOutputElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLParagraphElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLPictureElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLPreElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLProgressElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLScriptElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSelectElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSlotElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSourceElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSpanElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLStyleElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableSectionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCellElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTemplateElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTextAreaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCellElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTimeElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTitleElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableRowElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTrackElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLUListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLVideoElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface DocumentFragment{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface SVGElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } + interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } + interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } + interface ddeSVGElement extends SVGElement{ append: ddeAppend; } + interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } + + interface ddeHTMLElementTagNameMap { + "a": ddeHTMLAnchorElement; + "area": ddeHTMLAreaElement; + "audio": ddeHTMLAudioElement; + "base": ddeHTMLBaseElement; + "blockquote": ddeHTMLQuoteElement; + "body": ddeHTMLBodyElement; + "br": ddeHTMLBRElement; + "button": ddeHTMLButtonElement; + "canvas": ddeHTMLCanvasElement; + "caption": ddeHTMLTableCaptionElement; + "col": ddeHTMLTableColElement; + "colgroup": ddeHTMLTableColElement; + "data": ddeHTMLDataElement; + "datalist": ddeHTMLDataListElement; + "del": ddeHTMLModElement; + "details": ddeHTMLDetailsElement; + "dialog": ddeHTMLDialogElement; + "div": ddeHTMLDivElement; + "dl": ddeHTMLDListElement; + "embed": ddeHTMLEmbedElement; + "fieldset": ddeHTMLFieldSetElement; + "form": ddeHTMLFormElement; + "h1": ddeHTMLHeadingElement; + "h2": ddeHTMLHeadingElement; + "h3": ddeHTMLHeadingElement; + "h4": ddeHTMLHeadingElement; + "h5": ddeHTMLHeadingElement; + "h6": ddeHTMLHeadingElement; + "head": ddeHTMLHeadElement; + "hr": ddeHTMLHRElement; + "html": ddeHTMLHtmlElement; + "iframe": ddeHTMLIFrameElement; + "img": ddeHTMLImageElement; + "input": ddeHTMLInputElement; + "ins": ddeHTMLModElement; + "label": ddeHTMLLabelElement; + "legend": ddeHTMLLegendElement; + "li": ddeHTMLLIElement; + "link": ddeHTMLLinkElement; + "map": ddeHTMLMapElement; + "menu": ddeHTMLMenuElement; + "meta": ddeHTMLMetaElement; + "meter": ddeHTMLMeterElement; + "object": ddeHTMLObjectElement; + "ol": ddeHTMLOListElement; + "optgroup": ddeHTMLOptGroupElement; + "option": ddeHTMLOptionElement; + "output": ddeHTMLOutputElement; + "p": ddeHTMLParagraphElement; + "picture": ddeHTMLPictureElement; + "pre": ddeHTMLPreElement; + "progress": ddeHTMLProgressElement; + "q": ddeHTMLQuoteElement; + "script": ddeHTMLScriptElement; + "select": ddeHTMLSelectElement; + "slot": ddeHTMLSlotElement; + "source": ddeHTMLSourceElement; + "span": ddeHTMLSpanElement; + "style": ddeHTMLStyleElement; + "table": ddeHTMLTableElement; + "tbody": ddeHTMLTableSectionElement; + "td": ddeHTMLTableCellElement; + "template": ddeHTMLTemplateElement; + "textarea": ddeHTMLTextAreaElement; + "tfoot": ddeHTMLTableSectionElement; + "th": ddeHTMLTableCellElement; + "thead": ddeHTMLTableSectionElement; + "time": ddeHTMLTimeElement; + "title": ddeHTMLTitleElement; + "tr": ddeHTMLTableRowElement; + "track": ddeHTMLTrackElement; + "ul": ddeHTMLUListElement; + "video": ddeHTMLVideoElement; + } + interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } + interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } + interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } + interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend; } + interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend; } + interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend; } + interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend; } + interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend; } + interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend; } + interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend; } + interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } + interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } + interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend; } + interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend; } + interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend; } + interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend; } + interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend; } + interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend; } + interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend; } + interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend; } + interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend; } + interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend; } + interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend; } + interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend; } + interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend; } + interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend; } + interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend; } + interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend; } + interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend; } + interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend; } + interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend; } + interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend; } + interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend; } + interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend; } + interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend; } + interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend; } + interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend; } + interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend; } + interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend; } + interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend; } + interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend; } + interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend; } + interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend; } + interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend; } + interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend; } + interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend; } + interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend; } + interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend; } + interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend; } + interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend; } + interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend; } + interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend; } + interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend; } + interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend; } + interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } + interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend; } + interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend; } + interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } + interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend; } + interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend; } + interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend; } + interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend; } + interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend; } + interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend; } + + interface ddeSVGElementTagNameMap { + "a": ddeSVGAElement; + "animate": ddeSVGAnimateElement; + "animateMotion": ddeSVGAnimateMotionElement; + "animateTransform": ddeSVGAnimateTransformElement; + "circle": ddeSVGCircleElement; + "clipPath": ddeSVGClipPathElement; + "defs": ddeSVGDefsElement; + "desc": ddeSVGDescElement; + "ellipse": ddeSVGEllipseElement; + "feBlend": ddeSVGFEBlendElement; + "feColorMatrix": ddeSVGFEColorMatrixElement; + "feComponentTransfer": ddeSVGFEComponentTransferElement; + "feComposite": ddeSVGFECompositeElement; + "feConvolveMatrix": ddeSVGFEConvolveMatrixElement; + "feDiffuseLighting": ddeSVGFEDiffuseLightingElement; + "feDisplacementMap": ddeSVGFEDisplacementMapElement; + "feDistantLight": ddeSVGFEDistantLightElement; + "feDropShadow": ddeSVGFEDropShadowElement; + "feFlood": ddeSVGFEFloodElement; + "feFuncA": ddeSVGFEFuncAElement; + "feFuncB": ddeSVGFEFuncBElement; + "feFuncG": ddeSVGFEFuncGElement; + "feFuncR": ddeSVGFEFuncRElement; + "feGaussianBlur": ddeSVGFEGaussianBlurElement; + "feImage": ddeSVGFEImageElement; + "feMerge": ddeSVGFEMergeElement; + "feMergeNode": ddeSVGFEMergeNodeElement; + "feMorphology": ddeSVGFEMorphologyElement; + "feOffset": ddeSVGFEOffsetElement; + "fePointLight": ddeSVGFEPointLightElement; + "feSpecularLighting": ddeSVGFESpecularLightingElement; + "feSpotLight": ddeSVGFESpotLightElement; + "feTile": ddeSVGFETileElement; + "feTurbulence": ddeSVGFETurbulenceElement; + "filter": ddeSVGFilterElement; + "foreignObject": ddeSVGForeignObjectElement; + "g": ddeSVGGElement; + "image": ddeSVGImageElement; + "line": ddeSVGLineElement; + "linearGradient": ddeSVGLinearGradientElement; + "marker": ddeSVGMarkerElement; + "mask": ddeSVGMaskElement; + "metadata": ddeSVGMetadataElement; + "mpath": ddeSVGMPathElement; + "path": ddeSVGPathElement; + "pattern": ddeSVGPatternElement; + "polygon": ddeSVGPolygonElement; + "polyline": ddeSVGPolylineElement; + "radialGradient": ddeSVGRadialGradientElement; + "rect": ddeSVGRectElement; + "script": ddeSVGScriptElement; + "set": ddeSVGSetElement; + "stop": ddeSVGStopElement; + "style": ddeSVGStyleElement; + "svg": ddeSVGSVGElement; + "switch": ddeSVGSwitchElement; + "symbol": ddeSVGSymbolElement; + "text": ddeSVGTextElement; + "textPath": ddeSVGTextPathElement; + "title": ddeSVGTitleElement; + "tspan": ddeSVGTSpanElement; + "use": ddeSVGUseElement; + "view": ddeSVGViewElement; + } + interface ddeSVGAElement extends SVGAElement{ append: ddeAppend; } + interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend; } + interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend; } + interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend; } + interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend; } + interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend; } + interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend; } + interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend; } + interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend; } + interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend; } + interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend; } + interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend; } + interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend; } + interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend; } + interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend; } + interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend; } + interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend; } + interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend; } + interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend; } + interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend; } + interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend; } + interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend; } + interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend; } + interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend; } + interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend; } + interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend; } + interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend; } + interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend; } + interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend; } + interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend; } + interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend; } + interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend; } + interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend; } + interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend; } + interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend; } + interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend; } + interface ddeSVGGElement extends SVGGElement{ append: ddeAppend; } + interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend; } + interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend; } + interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend; } + interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend; } + interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend; } + interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend; } + interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend; } + interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend; } + interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend; } + interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend; } + interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend; } + interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend; } + interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend; } + interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend; } + interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend; } + interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend; } + interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend; } + interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend; } + interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend; } + interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend; } + interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend; } + interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend; } + interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend; } + interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend; } + interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } + interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } } \ No newline at end of file diff --git a/dist/esm.js b/dist/esm.js index efa450c..7062b14 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1 +1 @@ -var E={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function U(t,e=!0){return e?Object.assign(E,t):(Object.setPrototypeOf(t,E),t)}function x(t){return E.isPrototypeOf(t)&&t!==E?t:E}function b(t){return typeof t>"u"}function A(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var R={setDeleteAttr:q,ssr:""};function q(t,e,n){if(Reflect.set(t,e,n),!!b(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var l=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],v={get current(){return l[l.length-1]},get host(){return this.current.host},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...l]},push(t={}){return l.push(Object.assign({},this.current,{prevent:!1},t))},pushRoot(){return l.push(l[0])},pop(){if(l.length!==1)return l.pop()}};function D(...t){return this.appendOriginal(...t),this}function z(t){return t.append===D||(t.appendOriginal=t.append,t.append=D),t}var O;function N(t,e,...n){let c=x(this),o=0,r,f;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,v.push({scope:t,host:(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(g=>g(f)),void 0):f}),r=t(e||void 0);let d=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let a=N.mark({type:"component",name:t.name,host:d?"this":"parentElement"});r.prepend(a),d&&(f=a);break}case t==="#text":r=w.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=w.call(this,document.createDocumentFragment(),e);break;case!!O:r=w.call(this,document.createElementNS(O,t),e);break;case!r:r=w.call(this,document.createElement(t),e)}return z(r),f||(f=r),n.forEach(d=>d(f)),o&&v.pop(),o=2,r}N.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function Y(t){let e=this;return function(...c){O=t;let o=N.call(e,...c);return O=void 0,o}}var{setDeleteAttr:j}=R,C=new WeakMap;function w(t,...e){if(!e.length)return t;C.set(t,T(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))M.call(this,t,n,c);return C.delete(t),t}function M(t,e,n){let{setRemoveAttr:c,s:o}=T(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>M.call(r,t,d,a));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return P(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return j(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(o,n,P.bind(null,t[e]));case"ariaset":return y(o,n,(d,a)=>c("aria-"+d,a));case"classList":return B.call(r,t,n)}return F(t,e)?j(t,e,n):c(e,n)}function T(t,e){if(C.has(t))return C.get(t);let c=(t instanceof SVGElement?H:k).bind(null,t,"Attribute"),o=x(e);return{setRemoveAttr:c,s:o}}function B(t,e){let n=x(this);return y(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function tt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function et(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function F(t,e){if(!Reflect.has(t,e))return!1;let n=W(t,e);return!b(n.set)}function W(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||W(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function k(t,e,n,c){return t[(b(c)?"remove":"set")+e](n,$(c))}function H(t,e,n,c,o=null){return t[(b(c)?"remove":"set")+e+"NS"](o,n,$(c))}function P(t,e,n){if(Reflect.set(t,e,n),!!b(n))return Reflect.deleteProperty(t,e)}function ot(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let f=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(f)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var S=Z(),I=new WeakSet;_.connected=function(t,e){let{custom_element:n}=v.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),r):(A(e.signal,()=>S.offConnected(r,t))&&S.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=v.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||A(e.signal,()=>S.offDisconnected(r,t))&&S.onDisconnected(r,t),r}};var L=new WeakMap;_.disconnectedAsAbort=function(t){if(L.has(t))return L.get(t);let e=new AbortController;return L.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||I.has(o))return o;let f=new MutationObserver(function(a){for(let{attributeName:h,target:g}of a)g.dispatchEvent(new CustomEvent(r,{detail:[h,g.getAttribute(h)]}))});return A(e.signal,()=>f.disconnect())&&f.observe(o,{attributes:!0}),o}};function Z(){let t=new Map,e=!1,n=new MutationObserver(function(s){for(let i of s)if(i.type==="childList"){if(h(i.addedNodes,!0)){f();continue}g(i.removedNodes,!0)&&f()}});return{onConnected(s,i){r();let u=o(s);u.connected.has(i)||(u.connected.add(i),u.length_c+=1)},offConnected(s,i){if(!t.has(s))return;let u=t.get(s);u.connected.has(i)&&(u.connected.delete(i),u.length_c-=1,c(s,u))},onDisconnected(s,i){r();let u=o(s);u.disconnected.has(i)||(u.disconnected.add(i),u.length_d+=1)},offDisconnected(s,i){if(!t.has(s))return;let u=t.get(s);u.disconnected.has(i)&&(u.disconnected.delete(i),u.length_d-=1,c(s,u))}};function c(s,i){i.length_c||i.length_d||(t.delete(s),f())}function o(s){if(t.has(s))return t.get(s);let i={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,i),i}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function a(s){t.size>30&&await d();let i=[];if(!(s instanceof Node))return i;for(let u of t.keys())u===s||!(u instanceof Node)||s.contains(u)&&i.push(u);return i}function h(s,i){let u=!1;for(let p of s){if(i&&a(p).then(h),!t.has(p))continue;let m=t.get(p);m.length_c&&(p.dispatchEvent(new Event("dde:connected")),m.connected=new WeakSet,m.length_c=0,m.length_d||t.delete(p),u=!0)}return u}function g(s,i){let u=!1;for(let p of s)i&&a(p).then(g),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),u=!0);return u}}export{w as assign,M as assignAttribute,z as chainableAppend,B as classListDeclarative,N as createElement,Y as createElementNS,ot as dispatchEvent,N as el,Y as elNS,et as elementAttribute,tt as empty,_ as on,U as registerReactivity,v as scope}; +var E={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function q(t,e=!0){return e?Object.assign(E,t):(Object.setPrototypeOf(t,E),t)}function x(t){return E.isPrototypeOf(t)&&t!==E?t:E}function b(t){return typeof t>"u"}function A(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var S={setDeleteAttr:F,ssr:""};function F(t,e,n){if(Reflect.set(t,e,n),!!b(n)){if(Reflect.deleteProperty(t,e),t instanceof HTMLElement&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var g=[{scope:document.body,host:t=>t?t(document.body):document.body,custom_element:!1,prevent:!0}],v={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 L(...t){return this.appendOriginal(...t),this}function U(t){return t.append===L||(t.appendOriginal=t.append,t.append=L),t}var O;function C(t,e,...n){let c=x(this),o=0,r,f;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1,v.push({scope:t,host:(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(h=>h(f)),void 0):f}),r=t(e||void 0);let d=r instanceof DocumentFragment;if(r.nodeName==="#comment")break;let a=C.mark({type:"component",name:t.name,host:d?"this":"parentElement"});r.prepend(a),d&&(f=a);break}case t==="#text":r=w.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):r=w.call(this,document.createDocumentFragment(),e);break;case!!O:r=w.call(this,document.createElementNS(O,t),e);break;case!r:r=w.call(this,document.createElement(t),e)}return U(r),f||(f=r),n.forEach(d=>d(f)),o&&v.pop(),o=2,r}function tt(t){let e=Symbol.for("default"),n=Array.from(t.querySelectorAll("slot")).reduce((o,r)=>Reflect.set(o,r.name||e,r)&&o,{}),c=Reflect.has(n,e);return t.append=new Proxy(t.append,{apply(o,r,f){if(!f.length)return t;let d=document.createDocumentFragment();for(let a of f){if(!a||!a.slot){c&&d.appendChild(a);continue}let l=a.slot,h=n[l];B(a,"remove","slot"),h&&(h.replaceWith(a),Reflect.deleteProperty(n,l))}return c&&(n[e].replaceWith(d),Reflect.deleteProperty(n,e)),Object.values(n).forEach(a=>a.replaceWith(C().append(...Array.from(a.childNodes)))),t}}),t}C.mark=function(t,e=!1){t=Object.entries(t).map(([o,r])=>o+`="${r}"`).join(" ");let n=e?"":"/",c=document.createComment(``);return e||(c.end=document.createComment("")),c};function et(t){let e=this;return function(...c){O=t;let o=C.call(e,...c);return O=void 0,o}}var{setDeleteAttr:j}=S,y=new WeakMap;function w(t,...e){if(!e.length)return t;y.set(t,M(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))W.call(this,t,n,c);return y.delete(t),t}function W(t,e,n){let{setRemoveAttr:c,s:o}=M(t,this),r=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>W.call(r,t,d,a));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return P(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return c(e,n,"http://www.w3.org/1999/xlink");case"textContent":return j(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return N(o,n,P.bind(null,t[e]));case"ariaset":return N(o,n,(d,a)=>c("aria-"+d,a));case"classList":return z.call(r,t,n)}return k(t,e)?j(t,e,n):c(e,n)}function M(t,e){if(y.has(t))return y.get(t);let c=(t instanceof SVGElement?I:H).bind(null,t,"Attribute"),o=x(e);return{setRemoveAttr:c,s:o}}function z(t,e){let n=x(this);return N(n,e,(c,o)=>t.classList.toggle(c,o===-1?void 0:!!o)),t}function nt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function B(t,e,n,c){return t instanceof HTMLElement?t[e+"Attribute"](n,c):t[e+"AttributeNS"](null,n,c)}function k(t,e){if(!Reflect.has(t,e))return!1;let n=T(t,e);return!b(n.set)}function T(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||T(t,e)}function N(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,r]){o&&(r=t.processReactiveAttribute(e,o,r,n),n(o,r))})}function $(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function H(t,e,n,c){return t[(b(c)?"remove":"set")+e](n,$(c))}function I(t,e,n,c,o=null){return t[(b(c)?"remove":"set")+e+"NS"](o,n,$(c))}function P(t,e,n){if(Reflect.set(t,e,n),!!b(n))return Reflect.deleteProperty(t,e)}function ct(t,e,n){return e||(e={}),function(o,...r){n&&(r.unshift(o),o=typeof n=="function"?n():n);let f=r.length?new CustomEvent(t,Object.assign({detail:r[0]},e)):new Event(t,e);return o.dispatchEvent(f)}}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var R=G(),Z=new WeakSet;_.connected=function(t,e){let{custom_element:n}=v.current,c="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),r):(A(e.signal,()=>R.offConnected(r,t))&&R.onConnected(r,t),r)}};_.disconnected=function(t,e){let{custom_element:n}=v.current,c="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){n&&(r=n);let f="dde:"+c;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||A(e.signal,()=>R.offDisconnected(r,t))&&R.onDisconnected(r,t),r}};var D=new WeakMap;_.disconnectedAsAbort=function(t){if(D.has(t))return D.get(t);let e=new AbortController;return D.set(t,e),t(_.disconnected(()=>e.abort())),e};_.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(o){let r="dde:"+n;if(o.addEventListener(r,t,e),o.__dde_lifecycleToEvents||Z.has(o))return o;let f=new MutationObserver(function(a){for(let{attributeName:l,target:h}of a)h.dispatchEvent(new CustomEvent(r,{detail:[l,h.getAttribute(l)]}))});return A(e.signal,()=>f.disconnect())&&f.observe(o,{attributes:!0}),o}};function G(){let t=new Map,e=!1,n=new MutationObserver(function(s){for(let i of s)if(i.type==="childList"){if(l(i.addedNodes,!0)){f();continue}h(i.removedNodes,!0)&&f()}});return{onConnected(s,i){r();let u=o(s);u.connected.has(i)||(u.connected.add(i),u.length_c+=1)},offConnected(s,i){if(!t.has(s))return;let u=t.get(s);u.connected.has(i)&&(u.connected.delete(i),u.length_c-=1,c(s,u))},onDisconnected(s,i){r();let u=o(s);u.disconnected.has(i)||(u.disconnected.add(i),u.length_d+=1)},offDisconnected(s,i){if(!t.has(s))return;let u=t.get(s);u.disconnected.has(i)&&(u.disconnected.delete(i),u.length_d-=1,c(s,u))}};function c(s,i){i.length_c||i.length_d||(t.delete(s),f())}function o(s){if(t.has(s))return t.get(s);let i={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,i),i}function r(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function a(s){t.size>30&&await d();let i=[];if(!(s instanceof Node))return i;for(let u of t.keys())u===s||!(u instanceof Node)||s.contains(u)&&i.push(u);return i}function l(s,i){let u=!1;for(let p of s){if(i&&a(p).then(l),!t.has(p))continue;let m=t.get(p);m.length_c&&(p.dispatchEvent(new Event("dde:connected")),m.connected=new WeakSet,m.length_c=0,m.length_d||t.delete(p),u=!0)}return u}function h(s,i){let u=!1;for(let p of s)i&&a(p).then(h),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),u=!0);return u}}export{w as assign,W as assignAttribute,U as chainableAppend,z as classListDeclarative,C as createElement,et as createElementNS,ct as dispatchEvent,C as el,et as elNS,B as elementAttribute,nt as empty,_ as on,q as registerReactivity,v as scope,tt as simulateSlots}; diff --git a/docs/global.css b/docs/global.css index cf88628..4491981 100644 --- a/docs/global.css +++ b/docs/global.css @@ -119,6 +119,19 @@ main > *{ font-size: .9rem; font-style: italic; } +.prevNext{ + display: grid; + grid-template-columns: 1fr 2fr 1fr; + margin-top: 1rem; + border-top: 1px solid var(--border); +} +.prevNext [rel=prev]{ + grid-column: 1; +} +.prevNext [rel=next]{ + grid-column: 3; + text-align: right; +} .code{ --shiki-color-text: #e9eded; --shiki-color-background: #212121; @@ -151,17 +164,4 @@ main > *{ .CodeMirror, .CodeMirror-gutters { background: #212121 !important; border: 1px solid white; -} -.prevNext{ - display: grid; - grid-template-columns: 1fr 2fr 1fr; - margin-top: 1rem; - border-top: 1px solid var(--border); -} -.prevNext [rel=prev]{ - grid-column: 1; -} -.prevNext [rel=next]{ - grid-column: 3; - text-align: right; } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index c2802e2..a6b8772 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -`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 signals (S) and how them incorporate to UI templates.

Now we will clarify how the signals 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-signals.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 signals (S) and how them incorporate to UI templates.

Now we will clarify how the signals 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-signals.js"; import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js"; const clicks= S(0); document.body.append( diff --git a/docs/p02-elements.html b/docs/p02-elements.html index 478f9e0..8b82638 100644 --- a/docs/p02-elements.html +++ b/docs/p02-elements.html @@ -1,4 +1,4 @@ -`deka-dom-el` — Elements

`deka-dom-el` — Elements

Basic concepts of elements modifications and creations.

Native JavaScript DOM elements creations

Let’s go through all patterns we would like to use and what needs to be improved for better experience.

# Creating element(s) (with custom attributes)

You can create a native DOM element by using the document.createElement(). It is also possible to provide a some attribute(s) declaratively using Object.assign(). More precisely, this way you can sets some IDL also known as a JavaScript property.

document.body.append( +`deka-dom-el` — Elements

`deka-dom-el` — Elements

Basic concepts of elements modifications and creations.

Native JavaScript DOM elements creations

Let’s go through all patterns we would like to use and what needs to be improved for better experience.

# Creating element(s) (with custom attributes)

You can create a native DOM element by using the document.createElement(). It is also possible to provide a some attribute(s) declaratively using Object.assign(). More precisely, this way you can sets some IDL also known as a JavaScript property.

document.body.append( document.createElement("div") ); console.log( diff --git a/docs/p03-events.html b/docs/p03-events.html index d53c185..22ebbe3 100644 --- a/docs/p03-events.html +++ b/docs/p03-events.html @@ -1,4 +1,4 @@ -`deka-dom-el` — Events and Addons

`deka-dom-el` — Events and Addons

Using not only events in UI declaratively.

Listenning to the native DOM events and other Addons

We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called Addon to incorporate not only this in UI templates declaratively.

# 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-signals.js"; +`deka-dom-el` — Events and Addons

`deka-dom-el` — Events and Addons

Using not only events in UI declaratively.

Listenning to the native DOM events and other Addons

We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called Addon to incorporate not only this in UI templates declaratively.

# 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-signals.js"; const log= mark=> console.log.bind(console, mark); const button= el("button", "Test click"); diff --git a/docs/p04-signals.html b/docs/p04-signals.html index 7df5631..8075cbb 100644 --- a/docs/p04-signals.html +++ b/docs/p04-signals.html @@ -1,4 +1,4 @@ -`deka-dom-el` — Signals and reactivity

`deka-dom-el` — Signals and reactivity

Handling reactivity in UI via signals.

Using signals to manage reactivity

How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, signals may be a viable approach.

import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js"; +`deka-dom-el` — Signals and reactivity

`deka-dom-el` — Signals and reactivity

Handling reactivity in UI via signals.

Using signals to manage reactivity

How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, signals may be a viable approach.

import { S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js"; // α — `signal` represents a reactive value const signal= S(0); // β — just reacts on signal changes @@ -22,4 +22,4 @@ ac.signal.addEventListener("abort", ()=> setTimeout(()=> clearInterval(id), 2*interval)); setTimeout(()=> ac.abort(), 3*interval) -

Mnemonic

  • S(<value>) — signal: reactive value
  • S(()=> <computation>) — signal: reactive value dependent on calculation using other signals
  • S.on(<signal>, <listener>[, <options>]) — listen to the signal value changes
  • S.clear(...<signals>) — off and clear signals
  • S(<value>, <actions>) — signal: pattern to create complex reactive objects/arrays
  • S.action(<signal>, <action-name>, ...<action-arguments>) — invoke an action for given signal
\ No newline at end of file +

Mnemonic

  • S(<value>) — signal: reactive value
  • S(()=> <computation>) — signal: reactive value dependent on calculation using other signals
  • S.on(<signal>, <listener>[, <options>]) — listen to the signal value changes
  • S.clear(...<signals>) — off and clear signals
  • S(<value>, <actions>) — signal: pattern to create complex reactive objects/arrays
  • S.action(<signal>, <action-name>, ...<action-arguments>) — invoke an action for given signal
\ No newline at end of file diff --git a/docs_src/index.html.js b/docs_src/index.html.js index f43b82e..3b5422c 100644 --- a/docs_src/index.html.js +++ b/docs_src/index.html.js @@ -1,43 +1,36 @@ -import "./global.css.js"; +import { simplePage } from "./layout/simplePage.html.js"; + import { el } from "deka-dom-el"; - -import { header } from "./layout/head.html.js"; import { example } from "./components/example.html.js"; -import { prevNext } from "./components/pageUtils.html.js"; - /** @param {import("./types.d.ts").PageAttrs} attrs */ export function page({ pkg, info }){ const page_id= info.id; - return el().append( - el(header, { info, pkg }), - el("main").append( - el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."), - el("p").append( - "We start with creating and modifying a static elements and end up with UI templates.", - " ", - el("i").append( - "From ", el("code", "document.createElement"), " to ", el("code", "el"), "." - ), - " ", - "Then we go through the native events system and the way to include it declaratively in UI templates.", - " ", - el("i").append( - "From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "." - ), + return el(simplePage, { info, pkg }).append( + el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."), + el("p").append( + "We start with creating and modifying a static elements and end up with UI templates.", + " ", + el("i").append( + "From ", el("code", "document.createElement"), " to ", el("code", "el"), "." ), - el("p").append( - "Next step is providing interactivity not only for our UI templates.", - " ", - "We introduce signals (", el("code", "S"), ") and how them incorporate to UI templates.", + " ", + "Then we go through the native events system and the way to include it declaratively in UI templates.", + " ", + el("i").append( + "From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "." ), - el("p").append( - "Now we will clarify how the signals are incorporated into our templates with regard ", - "to application performance. This is not the only reason the library uses ", - el("code", "scope"), "s. We will look at how they work in components represented ", - "in JavaScript by functions." - ), - el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }), - el(prevNext, info) - ) + ), + el("p").append( + "Next step is providing interactivity not only for our UI templates.", + " ", + "We introduce signals (", el("code", "S"), ") and how them incorporate to UI templates.", + ), + el("p").append( + "Now we will clarify how the signals are incorporated into our templates with regard ", + "to application performance. This is not the only reason the library uses ", + el("code", "scope"), "s. We will look at how they work in components represented ", + "in JavaScript by functions." + ), + el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }), ); } diff --git a/docs_src/layout/simplePage.html.js b/docs_src/layout/simplePage.html.js new file mode 100644 index 0000000..a0c5eb9 --- /dev/null +++ b/docs_src/layout/simplePage.html.js @@ -0,0 +1,16 @@ +import "../global.css.js"; +import { el, simulateSlots } from "deka-dom-el"; + +import { header } from "./head.html.js"; +import { prevNext } from "../components/pageUtils.html.js"; + +/** @param {import("../types.d.ts").PageAttrs} attrs */ +export function simplePage({ pkg, info }){ + return simulateSlots(el().append( + el(header, { info, pkg }), + el("main").append( + el("slot"), + el(prevNext, info) + ) + )); +} diff --git a/docs_src/p02-elements.html.js b/docs_src/p02-elements.html.js index 4665607..beaa3a2 100644 --- a/docs_src/p02-elements.html.js +++ b/docs_src/p02-elements.html.js @@ -1,147 +1,139 @@ -import "./global.css.js"; +import { simplePage } from "./layout/simplePage.html.js"; + import { el } from "deka-dom-el"; - -import { header } from "./layout/head.html.js"; import { example } from "./components/example.html.js"; -import { h3, prevNext } from "./components/pageUtils.html.js"; - +import { h3 } from "./components/pageUtils.html.js"; /** @param {string} url */ const fileURL= url=> new URL(url, import.meta.url); - /** @param {import("./types.d.ts").PageAttrs} attrs */ export function page({ pkg, info }){ const page_id= info.id; - return el().append( - el(header, { info, pkg }), - el("main").append( - el("h2", "Native JavaScript DOM elements creations"), - el("p", "Let’s go through all patterns we would like to use and what needs to be improved for better experience."), - - el(h3, "Creating element(s) (with custom attributes)"), - el("p").append( - "You can create a native DOM element by using the ", - el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement", title: "MDN documentation for document.createElement()" }).append( - el("code", "document.createElement()") - ), ". ", - "It is also possible to provide a some attribute(s) declaratively using ", el("code", "Object.assign()"), ". ", - "More precisely, this way you can sets some ", - el("a", { - href: "https://developer.mozilla.org/en-US/docs/Glossary/IDL", - title: "MDN page about Interface Description Language" - }).append( - el("abbr", { textContent: "IDL", title: "Interface Description Language" }) - ), " also known as a JavaScript property." + return el(simplePage, { info, pkg }).append( + el("h2", "Native JavaScript DOM elements creations"), + el("p", "Let’s go through all patterns we would like to use and what needs to be improved for better experience."), + + el(h3, "Creating element(s) (with custom attributes)"), + el("p").append( + "You can create a native DOM element by using the ", + el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement", title: "MDN documentation for document.createElement()" }).append( + el("code", "document.createElement()") + ), ". ", + "It is also possible to provide a some attribute(s) declaratively using ", el("code", "Object.assign()"), ". ", + "More precisely, this way you can sets some ", + el("a", { + href: "https://developer.mozilla.org/en-US/docs/Glossary/IDL", + title: "MDN page about Interface Description Language" + }).append( + el("abbr", { textContent: "IDL", title: "Interface Description Language" }) + ), " also known as a JavaScript property." + ), + el(example, { src: fileURL("./components/examples/elements/nativeCreateElement.js"), page_id }), + el("p").append( + "To make this easier, you can use the ", el("code", "el"), " function. ", + "Internally in basic examples, it is wrapper around ", el("code", "assign(document.createElement(…), { … })"), "." + ), + el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }), + el("p").append( + "The ", el("code", "assign"), " function provides improved behaviour of ", el("code", "Object.assign()"), ". ", + "You can declaratively sets any IDL and attribute of the given element. ", + "Function prefers IDL and fallback to the ", el("code", "element.setAttribute"), " if there is no writable property in the element prototype." + ), + el("p").append( + "You can study all JavaScript elements interfaces to the corresponding HTML elements. ", + "All HTML elements inherits from ", el("a", { textContent: "HTMLElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" }), ". ", + "To see all available IDLs for example for paragraphs, see ", el("a", { textContent: "HTMLParagraphElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement" }), ". ", + "Moreover, the ", el("code", "assign"), " provides a way to sets declaratively some convenient properties:" + ), + el("ul").append( + el("li").append( + "It is possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attributes using object notation." ), - el(example, { src: fileURL("./components/examples/elements/nativeCreateElement.js"), page_id }), - el("p").append( - "To make this easier, you can use the ", el("code", "el"), " function. ", - "Internally in basic examples, it is wrapper around ", el("code", "assign(document.createElement(…), { … })"), "." + el("li").append( + "In opposite, it is also possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attribute using camelCase notation." ), - el(example, { src: fileURL("./components/examples/elements/dekaCreateElement.js"), page_id }), - el("p").append( - "The ", el("code", "assign"), " function provides improved behaviour of ", el("code", "Object.assign()"), ". ", - "You can declaratively sets any IDL and attribute of the given element. ", - "Function prefers IDL and fallback to the ", el("code", "element.setAttribute"), " if there is no writable property in the element prototype." + el("li").append( + "You can use string or object as a value for ", el("code", "style"), " property." ), - el("p").append( - "You can study all JavaScript elements interfaces to the corresponding HTML elements. ", - "All HTML elements inherits from ", el("a", { textContent: "HTMLElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" }), ". ", - "To see all available IDLs for example for paragraphs, see ", el("a", { textContent: "HTMLParagraphElement", href: "https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement" }), ". ", - "Moreover, the ", el("code", "assign"), " provides a way to sets declaratively some convenient properties:" + el("li").append( + el("code", "className"), " (IDL – preffered)/", el("code", "class"), " are ways to add CSS class to the element. ", + "You can use string (similarly to ", el("code", "class=\"…\"") ," syntax in HTML) or array of strings. ", + "This is handy to concat conditional classes." ), + el("li").append( + "Use ", el("code", "classList"), " to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.", + ), + el("li").append( + "The ", el("code", "assign"), " also accepts the ", el("code", "undefined"), " as a value for any property to remove it from the element declaratively. ", + "Also for some IDL the corresponding attribute is removed as it can be confusing. ", + el("em").append( + "For example, natievly the element’s ", el("code", "id"), " is removed by setting the IDL to an empty string." + ) + ), + el("li").append( + "You can use ", el("code", "="), " or ", el("code", "."), " to force processing given key as attribute/property of the element." + ) + ), + el("p").append( + "For processing, the ", el("code", "assign"), " internally uses ", el("code", "assignAttribute"), " and ", el("code", "classListDeclarative"), "." + ), + el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }), + + el(h3, "Native JavaScript templating"), + el("p", "By default, the native JS has no good way to define HTML template using DOM API:"), + el(example, { src: fileURL("./components/examples/elements/nativeAppend.js"), page_id }), + el("p").append( + "This library therefore overwrites the ", el("code", "append"), " method of created elements to always return parent element." + ), + el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }), + + + el(h3, "Basic (state-less) components"), + el("p").append( + "You can use functions for encapsulation (repeating) logic. ", + "The ", el("code", "el"), " accepts function as first argument. ", + "In that case, the function should return dom elements and the second argument for ", el("code", "el"), " is argument for given element." + ), + el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }), + el("p").append( + "As you can see, in case of state-less/basic components there is no difference", + " between calling component function directly or using ", el("code", "el"), " function.", + ), + el("p", { className: "notice" }).append( + "It is nice to use similar naming convention as native DOM API. ", + "This allows us to use ", el("a", { textContent: "the destructuring assignment syntax", href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment", title: "Destructuring assignment | MDN" }), + " and keep track of the native API (things are best remembered through regular use).", + ), + + el(h3, "Creating non-HTML elements"), + el("p").append( + "Similarly to the native DOM API (", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS", title: "MDN" }).append(el("code", "document.createElementNS")), ") for non-HTML elements", + " we need to tell JavaScript which kind of the element to create.", + " We can use the ", el("code", "elNS"), " function:" + ), + el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }), + + el("div", { className: "notice" }).append( + el("p", "Mnemonic"), el("ul").append( el("li").append( - "It is possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attributes using object notation." + el("code", "assign(, ...): "), " — assign properties to the element", ), el("li").append( - "In opposite, it is also possible to sets ", el("code", "data-*"), "/", el("code", "aria-*"), " attribute using camelCase notation." + el("code", "el(, )[.append(...)]: "), " — simple element containing only text", ), el("li").append( - "You can use string or object as a value for ", el("code", "style"), " property." + el("code", "el(, )[.append(...)]: "), " — element with more properties", ), el("li").append( - el("code", "className"), " (IDL – preffered)/", el("code", "class"), " are ways to add CSS class to the element. ", - "You can use string (similarly to ", el("code", "class=\"…\"") ," syntax in HTML) or array of strings. ", - "This is handy to concat conditional classes." + el("code", "el(, )[.append(...)]: "), " — using component represented by function", ), el("li").append( - "Use ", el("code", "classList"), " to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.", + el("code", "el(<...>, <...>, ...)"), " — see following page" ), el("li").append( - "The ", el("code", "assign"), " also accepts the ", el("code", "undefined"), " as a value for any property to remove it from the element declaratively. ", - "Also for some IDL the corresponding attribute is removed as it can be confusing. ", - el("em").append( - "For example, natievly the element’s ", el("code", "id"), " is removed by setting the IDL to an empty string." - ) - ), - el("li").append( - "You can use ", el("code", "="), " or ", el("code", "."), " to force processing given key as attribute/property of the element." + el("code", "elNS()()[.append(...)]: "), " — typically SVG elements", ) - ), - el("p").append( - "For processing, the ", el("code", "assign"), " internally uses ", el("code", "assignAttribute"), " and ", el("code", "classListDeclarative"), "." - ), - el(example, { src: fileURL("./components/examples/elements/dekaAssign.js"), page_id }), - - el(h3, "Native JavaScript templating"), - el("p", "By default, the native JS has no good way to define HTML template using DOM API:"), - el(example, { src: fileURL("./components/examples/elements/nativeAppend.js"), page_id }), - el("p").append( - "This library therefore overwrites the ", el("code", "append"), " method of created elements to always return parent element." - ), - el(example, { src: fileURL("./components/examples/elements/dekaAppend.js"), page_id }), - - - el(h3, "Basic (state-less) components"), - el("p").append( - "You can use functions for encapsulation (repeating) logic. ", - "The ", el("code", "el"), " accepts function as first argument. ", - "In that case, the function should return dom elements and the second argument for ", el("code", "el"), " is argument for given element." - ), - el(example, { src: fileURL("./components/examples/elements/dekaBasicComponent.js"), page_id }), - el("p").append( - "As you can see, in case of state-less/basic components there is no difference", - " between calling component function directly or using ", el("code", "el"), " function.", - ), - el("p", { className: "notice" }).append( - "It is nice to use similar naming convention as native DOM API. ", - "This allows us to use ", el("a", { textContent: "the destructuring assignment syntax", href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment", title: "Destructuring assignment | MDN" }), - " and keep track of the native API (things are best remembered through regular use).", - ), - - el(h3, "Creating non-HTML elements"), - el("p").append( - "Similarly to the native DOM API (", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS", title: "MDN" }).append(el("code", "document.createElementNS")), ") for non-HTML elements", - " we need to tell JavaScript which kind of the element to create.", - " We can use the ", el("code", "elNS"), " function:" - ), - el(example, { src: fileURL("./components/examples/elements/dekaElNS.js"), page_id }), - - el("div", { className: "notice" }).append( - el("p", "Mnemonic"), - el("ul").append( - el("li").append( - el("code", "assign(, ...): "), " — assign properties to the element", - ), - el("li").append( - el("code", "el(, )[.append(...)]: "), " — simple element containing only text", - ), - el("li").append( - el("code", "el(, )[.append(...)]: "), " — element with more properties", - ), - el("li").append( - el("code", "el(, )[.append(...)]: "), " — using component represented by function", - ), - el("li").append( - el("code", "el(<...>, <...>, ...)"), " — see following page" - ), - el("li").append( - el("code", "elNS()()[.append(...)]: "), " — typically SVG elements", - ) - ) - ), - - el(prevNext, info) - ) + ) + ), ); } diff --git a/docs_src/p03-events.html.js b/docs_src/p03-events.html.js index cdef1a2..0223fdd 100644 --- a/docs_src/p03-events.html.js +++ b/docs_src/p03-events.html.js @@ -1,139 +1,131 @@ -import "./global.css.js"; +import { simplePage } from "./layout/simplePage.html.js"; + import { el } from "deka-dom-el"; - -import { header } from "./layout/head.html.js"; import { example } from "./components/example.html.js"; -import { h3, prevNext } from "./components/pageUtils.html.js"; - +import { h3 } from "./components/pageUtils.html.js"; /** @param {string} url */ const fileURL= url=> new URL(url, import.meta.url); - /** @param {import("./types.d.ts").PageAttrs} attrs */ export function page({ pkg, info }){ const page_id= info.id; - return el().append( - el(header, { info, pkg }), - el("main").append( - el("h2", "Listenning to the native DOM events and other Addons"), + return el(simplePage, { info, pkg }).append( + el("h2", "Listenning to the native DOM events and other Addons"), + el("p").append( + "We quickly introduce helper to listening to the native DOM events.", + " ", + "And library syntax/pattern so-called ", el("em", "Addon"), " to", + " incorporate not only this in UI templates declaratively." + ), + + el(h3, "Events and listenners"), + el("p").append( + "In JavaScript you can listen to the native DOM events of the given element by using ", + el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener", title: "addEventListener on MDN" }).append( + el("code", "element.addEventListener(type, listener, options)") + ), ".", + " ", + "The library provides an alternative (", el("code", "on"), ") accepting the differen order", + " of the arguments:" + ), + el(example, { src: fileURL("./components/examples/events/compare.js"), page_id }), + el("p").append( + "…this is actually one of the two differences. The another one is that ", el("code", "on"), + " accepts only object as the ", el("code", "options"), " (but it is still optional)." + ), + el("p", { className: "notice" }).append( + "The other difference is that there is ", el("strong", "no"), " ", el("code", "off"), " function.", + " ", + "You can remove listener declaratively using ", el("a", { textContent: "AbortSignal", href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal", title: "part of addEventListener on MDN" }), + ":" + ), + el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }), + el("div", { className: "notice" }).append( + el("p", "So, there are (typically) three ways to handle events. You can use:"), + el("ul").append( + el("li").append( el("code", `el("button", { textContent: "click me", "=onclick": "console.log(event)" })`)), + el("li").append( el("code", `el("button", { textContent: "click me", onclick: console.log })`)), + el("li").append( el("code", `el("button", { textContent: "click me" }, on("click", console.log))`)) + ), el("p").append( - "We quickly introduce helper to listening to the native DOM events.", + "In the first example we force to use HTML attribute (it corresponds to ", el("code", ``), ").", " ", - "And library syntax/pattern so-called ", el("em", "Addon"), " to", - " incorporate not only this in UI templates declaratively." - ), - - el(h3, "Events and listenners"), - el("p").append( - "In JavaScript you can listen to the native DOM events of the given element by using ", - el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener", title: "addEventListener on MDN" }).append( - el("code", "element.addEventListener(type, listener, options)") - ), ".", + el("em", "Side note: this can be useful in case of SSR."), " ", - "The library provides an alternative (", el("code", "on"), ") accepting the differen order", - " of the arguments:" - ), - el(example, { src: fileURL("./components/examples/events/compare.js"), page_id }), - el("p").append( - "…this is actually one of the two differences. The another one is that ", el("code", "on"), - " accepts only object as the ", el("code", "options"), " (but it is still optional)." - ), - el("p", { className: "notice" }).append( - "The other difference is that there is ", el("strong", "no"), " ", el("code", "off"), " function.", - " ", - "You can remove listener declaratively using ", el("a", { textContent: "AbortSignal", href: "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal", title: "part of addEventListener on MDN" }), - ":" - ), - el(example, { src: fileURL("./components/examples/events/abortSignal.js"), page_id }), - el("div", { className: "notice" }).append( - el("p", "So, there are (typically) three ways to handle events. You can use:"), - el("ul").append( - el("li").append( el("code", `el("button", { textContent: "click me", "=onclick": "console.log(event)" })`)), - el("li").append( el("code", `el("button", { textContent: "click me", onclick: console.log })`)), - el("li").append( el("code", `el("button", { textContent: "click me" }, on("click", console.log))`)) - ), - el("p").append( - "In the first example we force to use HTML attribute (it corresponds to ", el("code", ``), ").", - " ", - el("em", "Side note: this can be useful in case of SSR."), - " ", - "To study difference, you can read a nice summary here: ", el("a", { href: "https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944", textContent: "GIST @WebReflection/web_events.md" }), "." - ) - ), + "To study difference, you can read a nice summary here: ", el("a", { href: "https://gist.github.com/WebReflection/b404c36f46371e3b1173bf5492acc944", textContent: "GIST @WebReflection/web_events.md" }), "." + ) + ), - el(h3, "Addons"), - el("p").append( - "From practical point of view, ", el("em", "Addons"), " are just functions that accept any html element", - " as their first parameter. You can see that the ", el("code", "on(…)"), " fullfills this requirement." + el(h3, "Addons"), + el("p").append( + "From practical point of view, ", el("em", "Addons"), " are just functions that accept any html element", + " as their first parameter. You can see that the ", el("code", "on(…)"), " fullfills this requirement." + ), + el("p").append( + "You can use Addons as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends", + " you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:" + ), + el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }), + el("p").append( + "As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementAddon"), ".", + " ", + "Also notice, you can use Addons to get element reference.", + ), + el(h3, "Life-cycle events"), + el("p").append( + "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." + ), + el("p").append( + "The library provide three additional live-cycle events corresponding to how they are named in", + " a case of custom elements: ", el("code", "on.connected"), ", ", el("code", "on.disconnected"), + " and ", el("code", "on.attributeChanged"), "." + ), + el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }), + el("p").append( + "For Custom elements, we will later introduce a way to replace ", el("code", "*Callback"), + " syntax with ", el("code", "dde:*"), " events. The ", el("code", "on.*"), " functions then", + " listen to the appropriate Custom Elements events (see ", el("a", { textContent: "Custom element lifecycle callbacks | MDN", href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks" }), ")." + ), + el("p").append( + "But, in case of regular elemnets the ", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" }).append(el("code", "MutationObserver"), " | MDN"), + " is internaly used to track these events. Therefore, there are some drawbacks:", + ), + el("ul").append( + el("li").append( + "To proper listener registration, you need to use ", el("code", "on.*"), " not `on(\"dde:*\", …)`!" ), - el("p").append( - "You can use Addons as ≥3rd argument of ", el("code", "el"), " function. This way is possible to extends", - " you templates by additional (3rd party) functionalities. But for now mainly, you can add events listeners:" - ), - el(example, { src: fileURL("./components/examples/events/templateWithListeners.js"), page_id }), - el("p").append( - "As the example shows, you can also provide types in JSDoc+TypeScript by using global type ", el("code", "ddeElementAddon"), ".", + el("li").append( + "Use sparingly! Internally, library must loop of all registered events and fires event properly.", " ", - "Also notice, you can use Addons to get element reference.", - ), - el(h3, "Life-cycle events"), - el("p").append( - "Addons are called immediately when the element is created, even it is not connected to live DOM yet.", + el("strong", "It is good practice to use the fact that if an element is removed, its children are also removed!"), " ", - "Therefore, you can understand the Addon to be “oncreate” event." - ), - el("p").append( - "The library provide three additional live-cycle events corresponding to how they are named in", - " a case of custom elements: ", el("code", "on.connected"), ", ", el("code", "on.disconnected"), - " and ", el("code", "on.attributeChanged"), "." - ), - el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }), - el("p").append( - "For Custom elements, we will later introduce a way to replace ", el("code", "*Callback"), - " syntax with ", el("code", "dde:*"), " events. The ", el("code", "on.*"), " functions then", - " listen to the appropriate Custom Elements events (see ", el("a", { textContent: "Custom element lifecycle callbacks | MDN", href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks" }), ")." - ), - el("p").append( - "But, in case of regular elemnets the ", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" }).append(el("code", "MutationObserver"), " | MDN"), - " is internaly used to track these events. Therefore, there are some drawbacks:", + "In this spirit, we will introduce later the ", el("strong", "host"), " syntax to register", + " clean up procedures when the component is removed from the app." ), + ), + + el(h3, "Final notes"), + el("p", "The library also provides a method to dispatch the events."), + el(example, { src: fileURL("./components/examples/events/compareDispatch.js"), page_id }), + + el("div", { className: "notice" }).append( + el("p", "Mnemonic"), el("ul").append( el("li").append( - "To proper listener registration, you need to use ", el("code", "on.*"), " not `on(\"dde:*\", …)`!" + el("code", "on(, [, ])()"), " — just ", el("code", ".addEventListener(, [, ])") ), el("li").append( - "Use sparingly! Internally, library must loop of all registered events and fires event properly.", - " ", - el("strong", "It is good practice to use the fact that if an element is removed, its children are also removed!"), - " ", - "In this spirit, we will introduce later the ", el("strong", "host"), " syntax to register", - " clean up procedures when the component is removed from the app." + el("code", "on.(, [, ])()"), " — corresponds to custom elemnets callbacks ", el("code", "Callback(...){...}"), + ". To connect to custom element see following page, else it is simulated by MutationObserver." ), - ), - - el(h3, "Final notes"), - el("p", "The library also provides a method to dispatch the events."), - el(example, { src: fileURL("./components/examples/events/compareDispatch.js"), page_id }), - - el("div", { className: "notice" }).append( - el("p", "Mnemonic"), - el("ul").append( - el("li").append( - el("code", "on(, [, ])()"), " — just ", el("code", ".addEventListener(, [, ])") - ), - el("li").append( - el("code", "on.(, [, ])()"), " — corresponds to custom elemnets callbacks ", el("code", "Callback(...){...}"), - ". To connect to custom element see following page, else it is simulated by MutationObserver." - ), - el("li").append( - el("code", "dispatchEvent([, ])(element)"), " — just ", el("code", ".dispatchEvent(new Event([, ]))") - ), - el("li").append( - el("code", "dispatchEvent([, ])(element, detail)"), " — just ", el("code", ".dispatchEvent(new CustomEvent(, { detail, ... }))") - ), - ) - ), - - el(prevNext, info) - ) + el("li").append( + el("code", "dispatchEvent([, ])(element)"), " — just ", el("code", ".dispatchEvent(new Event([, ]))") + ), + el("li").append( + el("code", "dispatchEvent([, ])(element, detail)"), " — just ", el("code", ".dispatchEvent(new CustomEvent(, { detail, ... }))") + ), + ) + ), ); } diff --git a/docs_src/p04-signals.html.js b/docs_src/p04-signals.html.js index 38442fc..783a6bd 100644 --- a/docs_src/p04-signals.html.js +++ b/docs_src/p04-signals.html.js @@ -1,80 +1,75 @@ -import "./global.css.js"; +import { simplePage } from "./layout/simplePage.html.js"; + import { el } from "deka-dom-el"; - -import { header } from "./layout/head.html.js"; import { example } from "./components/example.html.js"; -import { h3, prevNext } from "./components/pageUtils.html.js"; - +import { h3 } from "./components/pageUtils.html.js"; /** @param {string} url */ const fileURL= url=> new URL(url, import.meta.url); /** @param {import("./types.d.ts").PageAttrs} attrs */ export function page({ pkg, info }){ const page_id= info.id; - return el().append( - el(header, { info, pkg }), - el("main").append( - el("h2", "Using signals to manage reactivity"), - el("p").append( - "How a program responds to variable data or user", - " interactions is one of the fundamental problems of programming.", - " If we desire to solve the issue in a declarative manner,", - " signals may be a viable approach.", - ), - el(example, { src: fileURL("./components/examples/signals/intro.js"), page_id }), - - el(h3, "Introducing signals"), - el("p").append( - "Using signals, 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 signal value changes. Similarly, in a remaining part (γ), we", - " can update the signal value." - ), - el("p").append( - "All this is just an example of ", - el("a", { textContent: "Event-driven programming", href: "https://en.wikipedia.org/wiki/Event-driven_programming", title: "Wikipedia: Event-driven programming" }), - " and ", - el("a", { textContent: "Publish–subscribe pattern", href: "https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern", title: "Wikipedia: Publish–subscribe pattern" }), - " (compare for example with ", el("a", { textContent: "fpubsub library", href: "https://www.npmjs.com/package/fpubsub", title: "NPM package: fpubsub" }), ").", - " All three parts can be in some manner independent and still connected", - " to the same reactive entity." - ), - el("p").append( - "Signals are implemented in the library as functions. To see current value", - " of signal, just call it without any arguments ", el("code", "console.log(signal())"), ".", - " To update the signal value, pass any argument ", el("code", "signal('a new value')"), ".", - " For listenning the signal value changes, use ", el("code", "S.on(signal, console.log)"), "." - ), - el("p").append( - "Similarly to the ", el("code", "on"), " function to register DOM events listener.", - " You can use ", el("code", "AbortController"), "/", el("code", "AbortSignal"), " to", - " ", el("em", "off"), "/stop listenning. For representing “live” piece of code computation pattern:" - ), - el(example, { src: fileURL("./components/examples/signals/computations-abort.js"), page_id }), - el("div", { className: "notice" }).append( - el("p", "Mnemonic"), - el("ul").append( - el("li").append( - el("code", "S()"), " — signal: reactive value", - ), - el("li").append( - el("code", "S(()=> )"), " — signal: reactive value dependent on calculation using other signals", - ), - el("li").append( - el("code", "S.on(, [, ])"), " — listen to the signal value changes", - ), - el("li").append( - el("code", "S.clear(...)"), " — off and clear signals", - ), - el("li").append( - el("code", "S(, )"), " — signal: pattern to create complex reactive objects/arrays", - ), - el("li").append( - el("code", "S.action(, , ...)"), " — invoke an action for given signal" - ) + return el(simplePage, { info, pkg }).append( + el("h2", "Using signals to manage reactivity"), + el("p").append( + "How a program responds to variable data or user", + " interactions is one of the fundamental problems of programming.", + " If we desire to solve the issue in a declarative manner,", + " signals may be a viable approach.", + ), + el(example, { src: fileURL("./components/examples/signals/intro.js"), page_id }), + + el(h3, "Introducing signals"), + el("p").append( + "Using signals, 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 signal value changes. Similarly, in a remaining part (γ), we", + " can update the signal value." + ), + el("p").append( + "All this is just an example of ", + el("a", { textContent: "Event-driven programming", href: "https://en.wikipedia.org/wiki/Event-driven_programming", title: "Wikipedia: Event-driven programming" }), + " and ", + el("a", { textContent: "Publish–subscribe pattern", href: "https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern", title: "Wikipedia: Publish–subscribe pattern" }), + " (compare for example with ", el("a", { textContent: "fpubsub library", href: "https://www.npmjs.com/package/fpubsub", title: "NPM package: fpubsub" }), ").", + " All three parts can be in some manner independent and still connected", + " to the same reactive entity." + ), + el("p").append( + "Signals are implemented in the library as functions. To see current value", + " of signal, just call it without any arguments ", el("code", "console.log(signal())"), ".", + " To update the signal value, pass any argument ", el("code", "signal('a new value')"), ".", + " For listenning the signal value changes, use ", el("code", "S.on(signal, console.log)"), "." + ), + el("p").append( + "Similarly to the ", el("code", "on"), " function to register DOM events listener.", + " You can use ", el("code", "AbortController"), "/", el("code", "AbortSignal"), " to", + " ", el("em", "off"), "/stop listenning. For representing “live” piece of code computation pattern:" + ), + el(example, { src: fileURL("./components/examples/signals/computations-abort.js"), page_id }), + el("div", { className: "notice" }).append( + el("p", "Mnemonic"), + el("ul").append( + el("li").append( + el("code", "S()"), " — signal: reactive value", + ), + el("li").append( + el("code", "S(()=> )"), " — signal: reactive value dependent on calculation using other signals", + ), + el("li").append( + el("code", "S.on(, [, ])"), " — listen to the signal value changes", + ), + el("li").append( + el("code", "S.clear(...)"), " — off and clear signals", + ), + el("li").append( + el("code", "S(, )"), " — signal: pattern to create complex reactive objects/arrays", + ), + el("li").append( + el("code", "S.action(, , ...)"), " — invoke an action for given signal" ) - ), - ) + ) + ), ); } diff --git a/docs_src/types.d.ts b/docs_src/types.d.ts index 1773832..69e3729 100644 --- a/docs_src/types.d.ts +++ b/docs_src/types.d.ts @@ -25,4 +25,5 @@ declare global{ interface ddePublicElementTagNameMap{ ["custom-test"]: CustomHTMLTestElement; } + function test(): ddeHTMLParagraphElement } diff --git a/index.d.ts b/index.d.ts index 7f4e26f..14ae9f7 100644 --- a/index.d.ts +++ b/index.d.ts @@ -45,7 +45,7 @@ export function classListDeclarative(element: El, c export function assign(element: El, ...attrs_array: Partial>[]): El export function assignAttribute>(element: El, attr: ATT, value: ElementAttributes[ATT]): ElementAttributes[ATT] -type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap +type ExtendedHTMLElementTagNameMap= ddeHTMLElementTagNameMap & CustomElementTagNameMap & ddePublicElementTagNameMap export function el( tag_name: TAG, attrs?: string | Partial>, @@ -53,7 +53,7 @@ export function el( ): ExtendedHTMLElementTagNameMap[TAG] export function el( tag_name?: "<>", -): DocumentFragment +): ddeDocumentFragment export function el< A extends ddeComponentAttributes, @@ -67,22 +67,22 @@ export function el( tag_name: string, attrs?: string | Record, ...addons: ddeElementAddon[] -): HTMLElement +): ddeHTMLElement export function elNS( namespace: "http://www.w3.org/2000/svg" -): ( +): ( tag_name: TAG, - attrs?: string | Partial<{ [key in KEYS]: SVGElementTagNameMap[TAG][key] | string | number | boolean }>, - ...addons: ddeElementAddon[] -)=> SVGElementTagNameMap[TAG] + attrs?: string | Partial<{ [key in KEYS]: EL[key] | string | number | boolean }>, + ...addons: ddeElementAddon[] +)=> EL export function elNS( namespace: "http://www.w3.org/1998/Math/MathML" ): ( tag_name: TAG, attrs?: string | Partial<{ [key in KEYS]: MathMLElementTagNameMap[TAG][key] | string | number | boolean }>, ...addons: ddeElementAddon[] -)=> MathMLElementTagNameMap[TAG] +)=> ddeMathMLElement export function elNS( namespace: string ): ( @@ -92,6 +92,7 @@ export function elNS( )=> SupportedElement export function chainableAppend(el: EL): EL; +export function simulateSlots(el: EL): EL export function dispatchEvent(name: keyof DocumentEventMap | string, options?: EventInit): (element: SupportedElement, data?: any)=> void; @@ -165,297 +166,280 @@ export const scope: { pop(): ReturnType["pop"]>, }; -/* - * TODO TypeScript HACK (better way?) - * this doesnt works - * ```ts - * interface element extends Node{ - * prototype: el; - * append(...els: (SupportedElement | DocumentFragment | string | element)[]): el - * } - * export function el( - * tag_name?: "<>", - * ): element - * ``` - * …as its complains here - * ```ts - * const d= el("div"); - * const f= (a: HTMLDivElement)=> a; - * f(d); //← - * document.head.append( //← - * el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }), - * ); - * ``` - * TODO for SVG - * */ +/* TypeScript MEH // TODO for SVG */ type ddeAppend= (...nodes: (Node | string)[])=> el; declare global{ - interface HTMLAnchorElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLAreaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLAudioElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBaseElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLQuoteElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBodyElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLBRElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLButtonElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLCanvasElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCaptionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableColElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableColElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDataElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDataListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLModElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDetailsElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDialogElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDivElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLDListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLEmbedElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLFieldSetElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLFormElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHeadingElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHeadElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHRElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLHtmlElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLIFrameElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLImageElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLInputElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLabelElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLegendElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLIElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLLinkElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMapElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMenuElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMetaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLMeterElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLObjectElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOptGroupElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOptionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLOutputElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLParagraphElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLPictureElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLPreElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLProgressElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLScriptElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSelectElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSlotElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSourceElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLSpanElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLStyleElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableSectionElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCellElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTemplateElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTextAreaElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableCellElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTimeElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTitleElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTableRowElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLTrackElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLUListElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface HTMLVideoElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface DocumentFragment{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } - interface SVGElement{ - /** Elements returned by {@link el} return parent element for `.append` method. **Regullarly created elements are untouched.** */ - append: ddeAppend; - } + interface ddeDocumentFragment extends DocumentFragment{ append: ddeAppend; } + interface ddeHTMLElement extends HTMLElement{ append: ddeAppend; } + interface ddeSVGElement extends SVGElement{ append: ddeAppend; } + interface ddeMathMLElement extends MathMLElement{ append: ddeAppend; } + + interface ddeHTMLElementTagNameMap { + "a": ddeHTMLAnchorElement; + "area": ddeHTMLAreaElement; + "audio": ddeHTMLAudioElement; + "base": ddeHTMLBaseElement; + "blockquote": ddeHTMLQuoteElement; + "body": ddeHTMLBodyElement; + "br": ddeHTMLBRElement; + "button": ddeHTMLButtonElement; + "canvas": ddeHTMLCanvasElement; + "caption": ddeHTMLTableCaptionElement; + "col": ddeHTMLTableColElement; + "colgroup": ddeHTMLTableColElement; + "data": ddeHTMLDataElement; + "datalist": ddeHTMLDataListElement; + "del": ddeHTMLModElement; + "details": ddeHTMLDetailsElement; + "dialog": ddeHTMLDialogElement; + "div": ddeHTMLDivElement; + "dl": ddeHTMLDListElement; + "embed": ddeHTMLEmbedElement; + "fieldset": ddeHTMLFieldSetElement; + "form": ddeHTMLFormElement; + "h1": ddeHTMLHeadingElement; + "h2": ddeHTMLHeadingElement; + "h3": ddeHTMLHeadingElement; + "h4": ddeHTMLHeadingElement; + "h5": ddeHTMLHeadingElement; + "h6": ddeHTMLHeadingElement; + "head": ddeHTMLHeadElement; + "hr": ddeHTMLHRElement; + "html": ddeHTMLHtmlElement; + "iframe": ddeHTMLIFrameElement; + "img": ddeHTMLImageElement; + "input": ddeHTMLInputElement; + "ins": ddeHTMLModElement; + "label": ddeHTMLLabelElement; + "legend": ddeHTMLLegendElement; + "li": ddeHTMLLIElement; + "link": ddeHTMLLinkElement; + "map": ddeHTMLMapElement; + "menu": ddeHTMLMenuElement; + "meta": ddeHTMLMetaElement; + "meter": ddeHTMLMeterElement; + "object": ddeHTMLObjectElement; + "ol": ddeHTMLOListElement; + "optgroup": ddeHTMLOptGroupElement; + "option": ddeHTMLOptionElement; + "output": ddeHTMLOutputElement; + "p": ddeHTMLParagraphElement; + "picture": ddeHTMLPictureElement; + "pre": ddeHTMLPreElement; + "progress": ddeHTMLProgressElement; + "q": ddeHTMLQuoteElement; + "script": ddeHTMLScriptElement; + "select": ddeHTMLSelectElement; + "slot": ddeHTMLSlotElement; + "source": ddeHTMLSourceElement; + "span": ddeHTMLSpanElement; + "style": ddeHTMLStyleElement; + "table": ddeHTMLTableElement; + "tbody": ddeHTMLTableSectionElement; + "td": ddeHTMLTableCellElement; + "template": ddeHTMLTemplateElement; + "textarea": ddeHTMLTextAreaElement; + "tfoot": ddeHTMLTableSectionElement; + "th": ddeHTMLTableCellElement; + "thead": ddeHTMLTableSectionElement; + "time": ddeHTMLTimeElement; + "title": ddeHTMLTitleElement; + "tr": ddeHTMLTableRowElement; + "track": ddeHTMLTrackElement; + "ul": ddeHTMLUListElement; + "video": ddeHTMLVideoElement; + } + interface ddeHTMLAnchorElement extends HTMLAnchorElement{ append: ddeAppend; } + interface ddeHTMLAreaElement extends HTMLAreaElement{ append: ddeAppend; } + interface ddeHTMLAudioElement extends HTMLAudioElement{ append: ddeAppend; } + interface ddeHTMLBaseElement extends HTMLBaseElement{ append: ddeAppend; } + interface ddeHTMLQuoteElement extends HTMLQuoteElement{ append: ddeAppend; } + interface ddeHTMLBodyElement extends HTMLBodyElement{ append: ddeAppend; } + interface ddeHTMLBRElement extends HTMLBRElement{ append: ddeAppend; } + interface ddeHTMLButtonElement extends HTMLButtonElement{ append: ddeAppend; } + interface ddeHTMLCanvasElement extends HTMLCanvasElement{ append: ddeAppend; } + interface ddeHTMLTableCaptionElement extends HTMLTableCaptionElement{ append: ddeAppend; } + interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } + interface ddeHTMLTableColElement extends HTMLTableColElement{ append: ddeAppend; } + interface ddeHTMLDataElement extends HTMLDataElement{ append: ddeAppend; } + interface ddeHTMLDataListElement extends HTMLDataListElement{ append: ddeAppend; } + interface ddeHTMLModElement extends HTMLModElement{ append: ddeAppend; } + interface ddeHTMLDetailsElement extends HTMLDetailsElement{ append: ddeAppend; } + interface ddeHTMLDialogElement extends HTMLDialogElement{ append: ddeAppend; } + interface ddeHTMLDivElement extends HTMLDivElement{ append: ddeAppend; } + interface ddeHTMLDListElement extends HTMLDListElement{ append: ddeAppend; } + interface ddeHTMLEmbedElement extends HTMLEmbedElement{ append: ddeAppend; } + interface ddeHTMLFieldSetElement extends HTMLFieldSetElement{ append: ddeAppend; } + interface ddeHTMLFormElement extends HTMLFormElement{ append: ddeAppend; } + interface ddeHTMLHeadingElement extends HTMLHeadingElement{ append: ddeAppend; } + interface ddeHTMLHeadElement extends HTMLHeadElement{ append: ddeAppend; } + interface ddeHTMLHRElement extends HTMLHRElement{ append: ddeAppend; } + interface ddeHTMLHtmlElement extends HTMLHtmlElement{ append: ddeAppend; } + interface ddeHTMLIFrameElement extends HTMLIFrameElement{ append: ddeAppend; } + interface ddeHTMLImageElement extends HTMLImageElement{ append: ddeAppend; } + interface ddeHTMLInputElement extends HTMLInputElement{ append: ddeAppend; } + interface ddeHTMLLabelElement extends HTMLLabelElement{ append: ddeAppend; } + interface ddeHTMLLegendElement extends HTMLLegendElement{ append: ddeAppend; } + interface ddeHTMLLIElement extends HTMLLIElement{ append: ddeAppend; } + interface ddeHTMLLinkElement extends HTMLLinkElement{ append: ddeAppend; } + interface ddeHTMLMapElement extends HTMLMapElement{ append: ddeAppend; } + interface ddeHTMLMenuElement extends HTMLMenuElement{ append: ddeAppend; } + interface ddeHTMLMetaElement extends HTMLMetaElement{ append: ddeAppend; } + interface ddeHTMLMeterElement extends HTMLMeterElement{ append: ddeAppend; } + interface ddeHTMLObjectElement extends HTMLObjectElement{ append: ddeAppend; } + interface ddeHTMLOListElement extends HTMLOListElement{ append: ddeAppend; } + interface ddeHTMLOptGroupElement extends HTMLOptGroupElement{ append: ddeAppend; } + interface ddeHTMLOptionElement extends HTMLOptionElement{ append: ddeAppend; } + interface ddeHTMLOutputElement extends HTMLOutputElement{ append: ddeAppend; } + interface ddeHTMLParagraphElement extends HTMLParagraphElement{ append: ddeAppend; } + interface ddeHTMLPictureElement extends HTMLPictureElement{ append: ddeAppend; } + interface ddeHTMLPreElement extends HTMLPreElement{ append: ddeAppend; } + interface ddeHTMLProgressElement extends HTMLProgressElement{ append: ddeAppend; } + interface ddeHTMLScriptElement extends HTMLScriptElement{ append: ddeAppend; } + interface ddeHTMLSelectElement extends HTMLSelectElement{ append: ddeAppend; } + interface ddeHTMLSlotElement extends HTMLSlotElement{ append: ddeAppend; } + interface ddeHTMLSourceElement extends HTMLSourceElement{ append: ddeAppend; } + interface ddeHTMLSpanElement extends HTMLSpanElement{ append: ddeAppend; } + interface ddeHTMLStyleElement extends HTMLStyleElement{ append: ddeAppend; } + interface ddeHTMLTableElement extends HTMLTableElement{ append: ddeAppend; } + interface ddeHTMLTableSectionElement extends HTMLTableSectionElement{ append: ddeAppend; } + interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } + interface ddeHTMLTemplateElement extends HTMLTemplateElement{ append: ddeAppend; } + interface ddeHTMLTextAreaElement extends HTMLTextAreaElement{ append: ddeAppend; } + interface ddeHTMLTableCellElement extends HTMLTableCellElement{ append: ddeAppend; } + interface ddeHTMLTimeElement extends HTMLTimeElement{ append: ddeAppend; } + interface ddeHTMLTitleElement extends HTMLTitleElement{ append: ddeAppend; } + interface ddeHTMLTableRowElement extends HTMLTableRowElement{ append: ddeAppend; } + interface ddeHTMLTrackElement extends HTMLTrackElement{ append: ddeAppend; } + interface ddeHTMLUListElement extends HTMLUListElement{ append: ddeAppend; } + interface ddeHTMLVideoElement extends HTMLVideoElement{ append: ddeAppend; } + + interface ddeSVGElementTagNameMap { + "a": ddeSVGAElement; + "animate": ddeSVGAnimateElement; + "animateMotion": ddeSVGAnimateMotionElement; + "animateTransform": ddeSVGAnimateTransformElement; + "circle": ddeSVGCircleElement; + "clipPath": ddeSVGClipPathElement; + "defs": ddeSVGDefsElement; + "desc": ddeSVGDescElement; + "ellipse": ddeSVGEllipseElement; + "feBlend": ddeSVGFEBlendElement; + "feColorMatrix": ddeSVGFEColorMatrixElement; + "feComponentTransfer": ddeSVGFEComponentTransferElement; + "feComposite": ddeSVGFECompositeElement; + "feConvolveMatrix": ddeSVGFEConvolveMatrixElement; + "feDiffuseLighting": ddeSVGFEDiffuseLightingElement; + "feDisplacementMap": ddeSVGFEDisplacementMapElement; + "feDistantLight": ddeSVGFEDistantLightElement; + "feDropShadow": ddeSVGFEDropShadowElement; + "feFlood": ddeSVGFEFloodElement; + "feFuncA": ddeSVGFEFuncAElement; + "feFuncB": ddeSVGFEFuncBElement; + "feFuncG": ddeSVGFEFuncGElement; + "feFuncR": ddeSVGFEFuncRElement; + "feGaussianBlur": ddeSVGFEGaussianBlurElement; + "feImage": ddeSVGFEImageElement; + "feMerge": ddeSVGFEMergeElement; + "feMergeNode": ddeSVGFEMergeNodeElement; + "feMorphology": ddeSVGFEMorphologyElement; + "feOffset": ddeSVGFEOffsetElement; + "fePointLight": ddeSVGFEPointLightElement; + "feSpecularLighting": ddeSVGFESpecularLightingElement; + "feSpotLight": ddeSVGFESpotLightElement; + "feTile": ddeSVGFETileElement; + "feTurbulence": ddeSVGFETurbulenceElement; + "filter": ddeSVGFilterElement; + "foreignObject": ddeSVGForeignObjectElement; + "g": ddeSVGGElement; + "image": ddeSVGImageElement; + "line": ddeSVGLineElement; + "linearGradient": ddeSVGLinearGradientElement; + "marker": ddeSVGMarkerElement; + "mask": ddeSVGMaskElement; + "metadata": ddeSVGMetadataElement; + "mpath": ddeSVGMPathElement; + "path": ddeSVGPathElement; + "pattern": ddeSVGPatternElement; + "polygon": ddeSVGPolygonElement; + "polyline": ddeSVGPolylineElement; + "radialGradient": ddeSVGRadialGradientElement; + "rect": ddeSVGRectElement; + "script": ddeSVGScriptElement; + "set": ddeSVGSetElement; + "stop": ddeSVGStopElement; + "style": ddeSVGStyleElement; + "svg": ddeSVGSVGElement; + "switch": ddeSVGSwitchElement; + "symbol": ddeSVGSymbolElement; + "text": ddeSVGTextElement; + "textPath": ddeSVGTextPathElement; + "title": ddeSVGTitleElement; + "tspan": ddeSVGTSpanElement; + "use": ddeSVGUseElement; + "view": ddeSVGViewElement; + } + interface ddeSVGAElement extends SVGAElement{ append: ddeAppend; } + interface ddeSVGAnimateElement extends SVGAnimateElement{ append: ddeAppend; } + interface ddeSVGAnimateMotionElement extends SVGAnimateMotionElement{ append: ddeAppend; } + interface ddeSVGAnimateTransformElement extends SVGAnimateTransformElement{ append: ddeAppend; } + interface ddeSVGCircleElement extends SVGCircleElement{ append: ddeAppend; } + interface ddeSVGClipPathElement extends SVGClipPathElement{ append: ddeAppend; } + interface ddeSVGDefsElement extends SVGDefsElement{ append: ddeAppend; } + interface ddeSVGDescElement extends SVGDescElement{ append: ddeAppend; } + interface ddeSVGEllipseElement extends SVGEllipseElement{ append: ddeAppend; } + interface ddeSVGFEBlendElement extends SVGFEBlendElement{ append: ddeAppend; } + interface ddeSVGFEColorMatrixElement extends SVGFEColorMatrixElement{ append: ddeAppend; } + interface ddeSVGFEComponentTransferElement extends SVGFEComponentTransferElement{ append: ddeAppend; } + interface ddeSVGFECompositeElement extends SVGFECompositeElement{ append: ddeAppend; } + interface ddeSVGFEConvolveMatrixElement extends SVGFEConvolveMatrixElement{ append: ddeAppend; } + interface ddeSVGFEDiffuseLightingElement extends SVGFEDiffuseLightingElement{ append: ddeAppend; } + interface ddeSVGFEDisplacementMapElement extends SVGFEDisplacementMapElement{ append: ddeAppend; } + interface ddeSVGFEDistantLightElement extends SVGFEDistantLightElement{ append: ddeAppend; } + interface ddeSVGFEDropShadowElement extends SVGFEDropShadowElement{ append: ddeAppend; } + interface ddeSVGFEFloodElement extends SVGFEFloodElement{ append: ddeAppend; } + interface ddeSVGFEFuncAElement extends SVGFEFuncAElement{ append: ddeAppend; } + interface ddeSVGFEFuncBElement extends SVGFEFuncBElement{ append: ddeAppend; } + interface ddeSVGFEFuncGElement extends SVGFEFuncGElement{ append: ddeAppend; } + interface ddeSVGFEFuncRElement extends SVGFEFuncRElement{ append: ddeAppend; } + interface ddeSVGFEGaussianBlurElement extends SVGFEGaussianBlurElement{ append: ddeAppend; } + interface ddeSVGFEImageElement extends SVGFEImageElement{ append: ddeAppend; } + interface ddeSVGFEMergeElement extends SVGFEMergeElement{ append: ddeAppend; } + interface ddeSVGFEMergeNodeElement extends SVGFEMergeNodeElement{ append: ddeAppend; } + interface ddeSVGFEMorphologyElement extends SVGFEMorphologyElement{ append: ddeAppend; } + interface ddeSVGFEOffsetElement extends SVGFEOffsetElement{ append: ddeAppend; } + interface ddeSVGFEPointLightElement extends SVGFEPointLightElement{ append: ddeAppend; } + interface ddeSVGFESpecularLightingElement extends SVGFESpecularLightingElement{ append: ddeAppend; } + interface ddeSVGFESpotLightElement extends SVGFESpotLightElement{ append: ddeAppend; } + interface ddeSVGFETileElement extends SVGFETileElement{ append: ddeAppend; } + interface ddeSVGFETurbulenceElement extends SVGFETurbulenceElement{ append: ddeAppend; } + interface ddeSVGFilterElement extends SVGFilterElement{ append: ddeAppend; } + interface ddeSVGForeignObjectElement extends SVGForeignObjectElement{ append: ddeAppend; } + interface ddeSVGGElement extends SVGGElement{ append: ddeAppend; } + interface ddeSVGImageElement extends SVGImageElement{ append: ddeAppend; } + interface ddeSVGLineElement extends SVGLineElement{ append: ddeAppend; } + interface ddeSVGLinearGradientElement extends SVGLinearGradientElement{ append: ddeAppend; } + interface ddeSVGMarkerElement extends SVGMarkerElement{ append: ddeAppend; } + interface ddeSVGMaskElement extends SVGMaskElement{ append: ddeAppend; } + interface ddeSVGMetadataElement extends SVGMetadataElement{ append: ddeAppend; } + interface ddeSVGMPathElement extends SVGMPathElement{ append: ddeAppend; } + interface ddeSVGPathElement extends SVGPathElement{ append: ddeAppend; } + interface ddeSVGPatternElement extends SVGPatternElement{ append: ddeAppend; } + interface ddeSVGPolygonElement extends SVGPolygonElement{ append: ddeAppend; } + interface ddeSVGPolylineElement extends SVGPolylineElement{ append: ddeAppend; } + interface ddeSVGRadialGradientElement extends SVGRadialGradientElement{ append: ddeAppend; } + interface ddeSVGRectElement extends SVGRectElement{ append: ddeAppend; } + interface ddeSVGScriptElement extends SVGScriptElement{ append: ddeAppend; } + interface ddeSVGSetElement extends SVGSetElement{ append: ddeAppend; } + interface ddeSVGStopElement extends SVGStopElement{ append: ddeAppend; } + interface ddeSVGStyleElement extends SVGStyleElement{ append: ddeAppend; } + interface ddeSVGSVGElement extends SVGSVGElement{ append: ddeAppend; } + interface ddeSVGSwitchElement extends SVGSwitchElement{ append: ddeAppend; } + interface ddeSVGSymbolElement extends SVGSymbolElement{ append: ddeAppend; } + interface ddeSVGTextElement extends SVGTextElement{ append: ddeAppend; } + interface ddeSVGTextPathElement extends SVGTextPathElement{ append: ddeAppend; } + interface ddeSVGTitleElement extends SVGTitleElement{ append: ddeAppend; } + interface ddeSVGTSpanElement extends SVGTSpanElement{ append: ddeAppend; } + interface ddeSVGUseElement extends SVGUseElement{ append: ddeAppend; } + interface ddeSVGViewElement extends SVGViewElement{ append: ddeAppend; } } diff --git a/package.json b/package.json index 9cc4725..3fd49c1 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "size-limit": [ { "path": "./index.js", - "limit": "8.5 kB", + "limit": "9 kB", "gzip": false }, { diff --git a/src/dom.js b/src/dom.js index 2604884..7ab5056 100644 --- a/src/dom.js +++ b/src/dom.js @@ -66,6 +66,37 @@ export function createElement(tag, attributes, ...addons){ scoped= 2; return el; } +/** @param {HTMLElement} element */ +export function simulateSlots(element){ + const _default= Symbol.for("default"); + const slots= Array.from(element.querySelectorAll("slot")) + .reduce((out, curr)=> Reflect.set(out, curr.name || _default, curr) && out, {}); + const has_d= Reflect.has(slots, _default); + element.append= new Proxy(element.append, { + apply(_1, _2, els){ + if(!els.length) return element; + + const d= document.createDocumentFragment(); + for(const el of els){ + if(!el || !el.slot){ if(has_d) d.appendChild(el); continue; } + const name= el.slot; + const slot= slots[name]; + elementAttribute(el, "remove", "slot"); + if(!slot) continue; + slot.replaceWith(el); + Reflect.deleteProperty(slots, name); + } + if(has_d){ + slots[_default].replaceWith(d); + Reflect.deleteProperty(slots, _default); + } + Object.values(slots) + .forEach(slot=> slot.replaceWith(createElement().append(...Array.from(slot.childNodes)))); + return element; + } + }); + return element; +} /** * @param { { type: "component", name: string, host: "this" | "parentElement" } | { type: "reactive" | "later" } } attrs * @param {boolean} [is_open=false]