From 0d7018990803992a0d4fc4861d54a2e905147c5b Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Mon, 6 Nov 2023 14:04:27 +0100 Subject: [PATCH] :sparkles: Create DocumentFragment also with el() --- dist/dde-with-signals.js | 2 +- dist/dde.js | 2 +- dist/esm-with-signals.d.ts | 3 +-- dist/esm-with-signals.js | 2 +- dist/esm.d.ts | 3 +-- dist/esm.js | 2 +- docs/index.html | 18 +++++++++--------- docs_src/components/example.html.js | 2 +- docs_src/components/examples/helloWorld.js | 2 +- docs_src/index.html.js | 2 +- docs_src/layout/head.html.js | 6 +++--- index.d.ts | 3 +-- package.json | 2 +- src/dom.js | 2 +- 14 files changed, 24 insertions(+), 27 deletions(-) diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 6cc58a0..61a5d3e 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -1,6 +1,6 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function k(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:K};function K(t,e,n){if(Reflect.set(t,e,n),!!E(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 y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],$=t=>t==="svg"?"http://www.w3.org/2000/svg":t,m={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=$(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return m.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=$(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=m,c=0,s,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,m.push({scope:t,host:h=>h?(c===1?n.unshift(h):h(d),void 0):d}),s=t(e||void 0);let a=document.createComment(``);s.prepend(a),s instanceof DocumentFragment&&(d=a);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case t==="<>":s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return d||(d=s),n.forEach(a=>a(d)),c&&m.pop(),c=2,s}var{setDeleteAttr:H}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>q.call(c,t,d,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return U(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 H(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return T(o,n,U.bind(null,t[e]));case"ariaset":return T(o,n,(d,a)=>r("aria-"+d,a));case"classList":return Q.call(c,t,n)}return X(t,e)?H(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?tt:Y).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Q(t,e){let n=O(this);return T(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function X(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function T(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 I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Y(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function tt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function U(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;_.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};_.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};_.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||et.has(o))return o;let s=new MutationObserver(function(a){for(let{attributeName:h,target:v}of a)v.dispatchEvent(new CustomEvent(c,{detail:[h,v.getAttribute(h)]}))});return R(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function nt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(h(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 d(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function a(i){t.size>30&&await d();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 h(i,u){let f=!1;for(let b of i){if(u&&a(b).then(h),!t.has(b))continue;let x=t.get(b);x.length_c&&(b.dispatchEvent(new Event("dde:connected")),x.connected=new WeakSet,x.length_c=0,x.length_d||t.delete(b),f=!0)}return f}function v(i,u){let f=!1;for(let b of i)u&&a(b).then(v),!(!t.has(b)||!t.get(b).length_d)&&(b.dispatchEvent(new Event("dde:disconnected")),t.delete(b),f=!0);return f}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}});var p=Symbol.for("Signal");function P(t){try{return Reflect.has(t,p)}catch{return!1}}var j=[],l=new WeakMap;function g(t,e){if(typeof t!="function")return J(t,e);if(P(t))return t;let n=J(),r=function(){let[o,...c]=l.get(r);if(l.set(r,new Set([o])),j.push(r),n(t()),j.pop(),!c.length)return;let s=l.get(r);for(let d of c)s.has(d)||A(d,r)};return l.set(n[p],r),l.set(r,new Set([n])),r(),n}g.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))};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));W(e,n),o&&o.addEventListener("abort",()=>A(e,n))}};g.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};var S="__dde_attributes";g.attribute=function(t,e=void 0){let n=g(e);return m.host(r=>{if(r instanceof HTMLElement?r.hasAttribute(t)&&n(r.getAttribute(t)):r.hasAttributeNS(null,t)&&n(r.getAttributeNS(null,t)),r[S]){r[S][t]=n;return}return r[S]={[t]:n},_.attributeChanged(function({detail:c}){/*! This maps attributes to signals (`S.attribute`). +var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function k(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:K};function K(t,e,n){if(Reflect.set(t,e,n),!!E(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 y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],$=t=>t==="svg"?"http://www.w3.org/2000/svg":t,m={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=$(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return m.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=$(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=m,c=0,s,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,m.push({scope:t,host:h=>h?(c===1?n.unshift(h):h(d),void 0):d}),s=t(e||void 0);let a=document.createComment(``);s.prepend(a),s instanceof DocumentFragment&&(d=a);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return d||(d=s),n.forEach(a=>a(d)),c&&m.pop(),c=2,s}var{setDeleteAttr:H}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>q.call(c,t,d,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return U(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 H(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return T(o,n,U.bind(null,t[e]));case"ariaset":return T(o,n,(d,a)=>r("aria-"+d,a));case"classList":return Q.call(c,t,n)}return X(t,e)?H(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?tt:Y).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Q(t,e){let n=O(this);return T(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function X(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function T(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 I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Y(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function tt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function U(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;_.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};_.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};_.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||et.has(o))return o;let s=new MutationObserver(function(a){for(let{attributeName:h,target:v}of a)v.dispatchEvent(new CustomEvent(c,{detail:[h,v.getAttribute(h)]}))});return R(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function nt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(h(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 d(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function a(i){t.size>30&&await d();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 h(i,u){let f=!1;for(let b of i){if(u&&a(b).then(h),!t.has(b))continue;let x=t.get(b);x.length_c&&(b.dispatchEvent(new Event("dde:connected")),x.connected=new WeakSet,x.length_c=0,x.length_d||t.delete(b),f=!0)}return f}function v(i,u){let f=!1;for(let b of i)u&&a(b).then(v),!(!t.has(b)||!t.get(b).length_d)&&(b.dispatchEvent(new Event("dde:disconnected")),t.delete(b),f=!0);return f}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}});var p=Symbol.for("Signal");function P(t){try{return Reflect.has(t,p)}catch{return!1}}var j=[],l=new WeakMap;function g(t,e){if(typeof t!="function")return J(t,e);if(P(t))return t;let n=J(),r=function(){let[o,...c]=l.get(r);if(l.set(r,new Set([o])),j.push(r),n(t()),j.pop(),!c.length)return;let s=l.get(r);for(let d of c)s.has(d)||A(d,r)};return l.set(n[p],r),l.set(r,new Set([n])),r(),n}g.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))};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));W(e,n),o&&o.addEventListener("abort",()=>A(e,n))}};g.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};var S="__dde_attributes";g.attribute=function(t,e=void 0){let n=g(e);return m.host(r=>{if(r instanceof HTMLElement?r.hasAttribute(t)&&n(r.getAttribute(t)):r.hasAttributeNS(null,t)&&n(r.getAttributeNS(null,t)),r[S]){r[S][t]=n;return}return r[S]={[t]:n},_.attributeChanged(function({detail:c}){/*! This maps attributes to signals (`S.attribute`). * Investigate `__dde_attributes` key of the element.*/let[s,d]=c,a=r[S][s];a&&a(d)})(r),_.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). * Investigate `__dde_attributes` key of the element.*/g.clear(...Object.values(r[S]))})(r),r}),n};g.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),!l.has(o))return;let c=l.get(o);c.delete(n),!(c.size>1)&&(g.clear(...c),l.delete(o))})}};var D="__dde_reactive";g.el=function(t,e){let n=document.createComment(''),r=document.createComment(""),o=document.createDocumentFragment();o.append(n,r);let{current:c}=m,s=d=>{if(!n.parentNode||!r.parentNode)return A(t,s);m.push(c);let a=e(d);m.pop(),Array.isArray(a)||(a=[a]);let h=n;for(;(h=n.nextSibling)!==r;)h.remove();n.after(...a)};return W(t,s),Z(t,s,n,e),s(t()),o};var V={isSignal:P,processReactiveAttribute(t,e,n,r){if(!P(n))return n;let o=c=>r(e,c);return W(n,o),Z(n,o,t,e),n()}};function Z(t,e,...n){let{current:r}=m;r.prevent||r.host(function(o){o[D]||(o[D]=[],_.disconnected(()=>o[D].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[D].push([[t,e],...n])})}function J(t,e){let n=(...r)=>r.length?it(n,...r):st(n);return ot(n,t,e)}var rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),M=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 ot(t,e,n){let r=[];F(n)!=="[object Object]"&&(n={});let{onclear:o}=g.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=m;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new M},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return j[j.length-1]}function st(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=ct();return r&&n.add(r),l.has(r)&&l.get(r).add(t),e}function it(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 W(t,e){if(t[p])return t[p].listeners.add(e)}function A(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(g.clear(t),!l.has(r))return o;let c=l.get(r);if(!l.has(c))return o;l.get(c).forEach(s=>A(s,c,!0))}return o}k(V); diff --git a/dist/dde.js b/dist/dde.js index 77af8a9..8dded00 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,6 +1,6 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var b={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function M(t,e=!0){return e?Object.assign(b,t):(Object.setPrototypeOf(t,b),t)}function E(t){return b.isPrototypeOf(t)&&t!==b?t:b}function l(t){return typeof t>"u"}function _(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:W};function W(t,e,n){if(Reflect.set(t,e,n),!!l(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,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return v[v.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...v]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),v.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return v.pop()}};function J(t,e,...n){let c=E(this),{namespace:r}=x,u=0,f,a;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{u=1,x.push({scope:t,host:h=>h?(u===1?n.unshift(h):h(a),void 0):a}),f=t(e||void 0);let d=document.createComment(``);f.prepend(d),f instanceof DocumentFragment&&(a=d);break}case t==="#text":f=w.call(this,document.createTextNode(""),e);break;case t==="<>":f=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":f=w.call(this,document.createElementNS(r,t),e);break;case!f:f=w.call(this,document.createElement(t),e)}return a||(a=f),n.forEach(d=>d(a)),u&&x.pop(),u=2,f}var{setDeleteAttr:D}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),u=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>N.call(u,t,a,d));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return L(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 D(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,L.bind(null,t[e]));case"ariaset":return y(r,n,(a,d)=>c("aria-"+a,d));case"classList":return F.call(u,t,n)}return U(t,e)?D(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?z:q).bind(null,t,"Attribute"),r=E(e);return{setRemoveAttr:c,s:r}}function F(t,e){let n=E(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function U(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!l(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,u]){r&&(u=t.processReactiveAttribute(e,r,u,n),n(r,u))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function q(t,e,n,c){return t[(l(c)?"remove":"set")+e](n,T(c))}function z(t,e,n,c,r=null){return t[(l(c)?"remove":"set")+e+"NS"](r,n,T(c))}function L(t,e,n){if(Reflect.set(t,e,n),!!l(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=$(),H=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(u)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let u="dde:"+n;if(r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||H.has(r))return r;let f=new MutationObserver(function(d){for(let{attributeName:h,target:g}of d)g.dispatchEvent(new CustomEvent(u,{detail:[h,g.getAttribute(h)]}))});return _(e.signal,()=>f.disconnect())&&f.observe(r,{attributes:!0}),r}};function $(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(h(s.addedNodes,!0)){f();continue}g(s.removedNodes,!0)&&f()}});return{onConnected(o,s){u();let i=r(o);i.connected.has(s)||(i.connected.add(s),i.length_c+=1)},offConnected(o,s){if(!t.has(o))return;let i=t.get(o);i.connected.has(s)&&(i.connected.delete(s),i.length_c-=1,c(o,i))},onDisconnected(o,s){u();let i=r(o);i.disconnected.has(s)||(i.disconnected.add(s),i.length_d+=1)},offDisconnected(o,s){if(!t.has(o))return;let i=t.get(o);i.disconnected.has(s)&&(i.disconnected.delete(s),i.length_d-=1,c(o,i))}};function c(o,s){s.length_c||s.length_d||(t.delete(o),f())}function r(o){if(t.has(o))return t.get(o);let s={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(o,s),s}function u(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(o){(requestIdleCallback||requestAnimationFrame)(o)})}async function d(o){t.size>30&&await a();let s=[];if(!(o instanceof Node))return s;for(let i of t.keys())i===o||!(i instanceof Node)||o.contains(i)&&s.push(i);return s}function h(o,s){let i=!1;for(let p of o){if(s&&d(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),i=!0)}return i}function g(o,s){let i=!1;for(let p of o)s&&d(p).then(g),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),i=!0);return i}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}}); +var b={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function M(t,e=!0){return e?Object.assign(b,t):(Object.setPrototypeOf(t,b),t)}function E(t){return b.isPrototypeOf(t)&&t!==b?t:b}function l(t){return typeof t>"u"}function _(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:W};function W(t,e,n){if(Reflect.set(t,e,n),!!l(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,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return v[v.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...v]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),v.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return v.pop()}};function J(t,e,...n){let c=E(this),{namespace:r}=x,u=0,f,a;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{u=1,x.push({scope:t,host:h=>h?(u===1?n.unshift(h):h(a),void 0):a}),f=t(e||void 0);let d=document.createComment(``);f.prepend(d),f instanceof DocumentFragment&&(a=d);break}case t==="#text":f=w.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):f=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":f=w.call(this,document.createElementNS(r,t),e);break;case!f:f=w.call(this,document.createElement(t),e)}return a||(a=f),n.forEach(d=>d(a)),u&&x.pop(),u=2,f}var{setDeleteAttr:D}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),u=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>N.call(u,t,a,d));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return L(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 D(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,L.bind(null,t[e]));case"ariaset":return y(r,n,(a,d)=>c("aria-"+a,d));case"classList":return F.call(u,t,n)}return U(t,e)?D(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?z:q).bind(null,t,"Attribute"),r=E(e);return{setRemoveAttr:c,s:r}}function F(t,e){let n=E(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function U(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!l(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,u]){r&&(u=t.processReactiveAttribute(e,r,u,n),n(r,u))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function q(t,e,n,c){return t[(l(c)?"remove":"set")+e](n,T(c))}function z(t,e,n,c,r=null){return t[(l(c)?"remove":"set")+e+"NS"](r,n,T(c))}function L(t,e,n){if(Reflect.set(t,e,n),!!l(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=$(),H=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(u)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let u="dde:"+n;if(r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||H.has(r))return r;let f=new MutationObserver(function(d){for(let{attributeName:h,target:g}of d)g.dispatchEvent(new CustomEvent(u,{detail:[h,g.getAttribute(h)]}))});return _(e.signal,()=>f.disconnect())&&f.observe(r,{attributes:!0}),r}};function $(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(h(s.addedNodes,!0)){f();continue}g(s.removedNodes,!0)&&f()}});return{onConnected(o,s){u();let i=r(o);i.connected.has(s)||(i.connected.add(s),i.length_c+=1)},offConnected(o,s){if(!t.has(o))return;let i=t.get(o);i.connected.has(s)&&(i.connected.delete(s),i.length_c-=1,c(o,i))},onDisconnected(o,s){u();let i=r(o);i.disconnected.has(s)||(i.disconnected.add(s),i.length_d+=1)},offDisconnected(o,s){if(!t.has(o))return;let i=t.get(o);i.disconnected.has(s)&&(i.disconnected.delete(s),i.length_d-=1,c(o,i))}};function c(o,s){s.length_c||s.length_d||(t.delete(o),f())}function r(o){if(t.has(o))return t.get(o);let s={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(o,s),s}function u(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(o){(requestIdleCallback||requestAnimationFrame)(o)})}async function d(o){t.size>30&&await a();let s=[];if(!(o instanceof Node))return s;for(let i of t.keys())i===o||!(i instanceof Node)||o.contains(i)&&s.push(i);return s}function h(o,s){let i=!1;for(let p of o){if(s&&d(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),i=!0)}return i}function g(o,s){let i=!1;for(let p of o)s&&d(p).then(g),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),i=!0);return i}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}}); globalThis.dde= {assign: w, assignAttribute: N, classListDeclarative: F, diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index 9cfec17..72c520c 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -37,14 +37,13 @@ type ElementAttributes & AttrsModified : Omit & AttrsModified; export function assign(element: El, ...attrs_array: Partial>[]): El -type TagNameFragment= "<>"; export function el( tag_name: TAG, attrs?: Partial>, ...extenders: ddeElementExtender[] ): ElementTagNameMap[TAG] export function el( - tag_name: TagNameFragment, + tag_name?: "<>", ): DocumentFragment export function el< A extends ddeComponentAttributes, diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index 8504c17..29f7fe8 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -1,4 +1,4 @@ -var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function k(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:K};function K(t,e,n){if(Reflect.set(t,e,n),!!E(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 y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],$=t=>t==="svg"?"http://www.w3.org/2000/svg":t,m={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=$(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return m.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=$(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=m,c=0,s,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,m.push({scope:t,host:h=>h?(c===1?n.unshift(h):h(d),void 0):d}),s=t(e||void 0);let a=document.createComment(``);s.prepend(a),s instanceof DocumentFragment&&(d=a);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case t==="<>":s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return d||(d=s),n.forEach(a=>a(d)),c&&m.pop(),c=2,s}var{setDeleteAttr:H}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>q.call(c,t,d,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return U(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 H(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return T(o,n,U.bind(null,t[e]));case"ariaset":return T(o,n,(d,a)=>r("aria-"+d,a));case"classList":return Q.call(c,t,n)}return X(t,e)?H(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?tt:Y).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Q(t,e){let n=O(this);return T(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function X(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function T(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 I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Y(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function tt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function U(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;_.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};_.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};_.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||et.has(o))return o;let s=new MutationObserver(function(a){for(let{attributeName:h,target:v}of a)v.dispatchEvent(new CustomEvent(c,{detail:[h,v.getAttribute(h)]}))});return R(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function nt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(h(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 d(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function a(i){t.size>30&&await d();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 h(i,u){let f=!1;for(let b of i){if(u&&a(b).then(h),!t.has(b))continue;let x=t.get(b);x.length_c&&(b.dispatchEvent(new Event("dde:connected")),x.connected=new WeakSet,x.length_c=0,x.length_d||t.delete(b),f=!0)}return f}function v(i,u){let f=!1;for(let b of i)u&&a(b).then(v),!(!t.has(b)||!t.get(b).length_d)&&(b.dispatchEvent(new Event("dde:disconnected")),t.delete(b),f=!0);return f}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}});var p=Symbol.for("Signal");function P(t){try{return Reflect.has(t,p)}catch{return!1}}var j=[],l=new WeakMap;function g(t,e){if(typeof t!="function")return J(t,e);if(P(t))return t;let n=J(),r=function(){let[o,...c]=l.get(r);if(l.set(r,new Set([o])),j.push(r),n(t()),j.pop(),!c.length)return;let s=l.get(r);for(let d of c)s.has(d)||A(d,r)};return l.set(n[p],r),l.set(r,new Set([n])),r(),n}g.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))};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));W(e,n),o&&o.addEventListener("abort",()=>A(e,n))}};g.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};var S="__dde_attributes";g.attribute=function(t,e=void 0){let n=g(e);return m.host(r=>{if(r instanceof HTMLElement?r.hasAttribute(t)&&n(r.getAttribute(t)):r.hasAttributeNS(null,t)&&n(r.getAttributeNS(null,t)),r[S]){r[S][t]=n;return}return r[S]={[t]:n},_.attributeChanged(function({detail:c}){/*! This maps attributes to signals (`S.attribute`). +var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function k(t,e=!0){return e?Object.assign(w,t):(Object.setPrototypeOf(t,w),t)}function O(t){return w.isPrototypeOf(t)&&t!==w?t:w}function E(t){return typeof t>"u"}function F(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function R(t,e){if(!t||!(t instanceof AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var z={setDeleteAttr:K};function K(t,e,n){if(Reflect.set(t,e,n),!!E(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 y=[{scope:document.body,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],$=t=>t==="svg"?"http://www.w3.org/2000/svg":t,m={get current(){return y[y.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=$(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return m.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=$(t.namespace)),y.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return y.pop()}};function lt(t,e,...n){let r=O(this),{namespace:o}=m,c=0,s,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,m.push({scope:t,host:h=>h?(c===1?n.unshift(h):h(d),void 0):d}),s=t(e||void 0);let a=document.createComment(``);s.prepend(a),s instanceof DocumentFragment&&(d=a);break}case t==="#text":s=C.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):s=C.call(this,document.createDocumentFragment(),e);break;case o!=="html":s=C.call(this,document.createElementNS(o,t),e);break;case!s:s=C.call(this,document.createElement(t),e)}return d||(d=s),n.forEach(a=>a(d)),c&&m.pop(),c=2,s}var{setDeleteAttr:H}=z,L=new WeakMap;function C(t,...e){if(!e.length)return t;L.set(t,B(t,this));for(let[n,r]of Object.entries(Object.assign({},...e)))q.call(this,t,n,r);return L.delete(t),t}function q(t,e,n){let{setRemoveAttr:r,s:o}=B(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(d,a)=>q.call(c,t,d,a));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return U(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 H(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return T(o,n,U.bind(null,t[e]));case"ariaset":return T(o,n,(d,a)=>r("aria-"+d,a));case"classList":return Q.call(c,t,n)}return X(t,e)?H(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?tt:Y).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Q(t,e){let n=O(this);return T(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function X(t,e){if(!Reflect.has(t,e))return!1;let n=G(t,e);return!E(n.set)}function G(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||G(t,e)}function T(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 I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function Y(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function tt(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function U(t,e,n){if(Reflect.set(t,e,n),!!E(n))return Reflect.deleteProperty(t,e)}function Et(t,e,...n){let r=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(r)}function _(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;_.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents?o:o.isConnected?(o.dispatchEvent(new Event(c)),o):(R(e.signal,()=>N.offConnected(o,t))&&N.onConnected(o,t),o)}};_.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(o){let c="dde:"+n;return o.addEventListener(c,t,e),o.__dde_lifecycleToEvents||R(e.signal,()=>N.offDisconnected(o,t))&&N.onDisconnected(o,t),o}};_.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||et.has(o))return o;let s=new MutationObserver(function(a){for(let{attributeName:h,target:v}of a)v.dispatchEvent(new CustomEvent(c,{detail:[h,v.getAttribute(h)]}))});return R(e.signal,()=>s.disconnect())&&s.observe(o,{attributes:!0}),o}};function nt(){let t=new Map,e=!1,n=new MutationObserver(function(i){for(let u of i)if(u.type==="childList"){if(h(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 d(){return new Promise(function(i){(requestIdleCallback||requestAnimationFrame)(i)})}async function a(i){t.size>30&&await d();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 h(i,u){let f=!1;for(let b of i){if(u&&a(b).then(h),!t.has(b))continue;let x=t.get(b);x.length_c&&(b.dispatchEvent(new Event("dde:connected")),x.connected=new WeakSet,x.length_c=0,x.length_d||t.delete(b),f=!0)}return f}function v(i,u){let f=!1;for(let b of i)u&&a(b).then(v),!(!t.has(b)||!t.get(b).length_d)&&(b.dispatchEvent(new Event("dde:disconnected")),t.delete(b),f=!0);return f}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}});var p=Symbol.for("Signal");function P(t){try{return Reflect.has(t,p)}catch{return!1}}var j=[],l=new WeakMap;function g(t,e){if(typeof t!="function")return J(t,e);if(P(t))return t;let n=J(),r=function(){let[o,...c]=l.get(r);if(l.set(r,new Set([o])),j.push(r),n(t()),j.pop(),!c.length)return;let s=l.get(r);for(let d of c)s.has(d)||A(d,r)};return l.set(n[p],r),l.set(r,new Set([n])),r(),n}g.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))};g.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));W(e,n),o&&o.addEventListener("abort",()=>A(e,n))}};g.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};var S="__dde_attributes";g.attribute=function(t,e=void 0){let n=g(e);return m.host(r=>{if(r instanceof HTMLElement?r.hasAttribute(t)&&n(r.getAttribute(t)):r.hasAttributeNS(null,t)&&n(r.getAttributeNS(null,t)),r[S]){r[S][t]=n;return}return r[S]={[t]:n},_.attributeChanged(function({detail:c}){/*! This maps attributes to signals (`S.attribute`). * Investigate `__dde_attributes` key of the element.*/let[s,d]=c,a=r[S][s];a&&a(d)})(r),_.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). * Investigate `__dde_attributes` key of the element.*/g.clear(...Object.values(r[S]))})(r),r}),n};g.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),!l.has(o))return;let c=l.get(o);c.delete(n),!(c.size>1)&&(g.clear(...c),l.delete(o))})}};var D="__dde_reactive";g.el=function(t,e){let n=document.createComment(''),r=document.createComment(""),o=document.createDocumentFragment();o.append(n,r);let{current:c}=m,s=d=>{if(!n.parentNode||!r.parentNode)return A(t,s);m.push(c);let a=e(d);m.pop(),Array.isArray(a)||(a=[a]);let h=n;for(;(h=n.nextSibling)!==r;)h.remove();n.after(...a)};return W(t,s),Z(t,s,n,e),s(t()),o};var V={isSignal:P,processReactiveAttribute(t,e,n,r){if(!P(n))return n;let o=c=>r(e,c);return W(n,o),Z(n,o,t,e),n()}};function Z(t,e,...n){let{current:r}=m;r.prevent||r.host(function(o){o[D]||(o[D]=[],_.disconnected(()=>o[D].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[D].push([[t,e],...n])})}function J(t,e){let n=(...r)=>r.length?it(n,...r):st(n);return ot(n,t,e)}var rt=Object.assign(Object.create(null),{stopPropagation(){this.skip=!0}}),M=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 ot(t,e,n){let r=[];F(n)!=="[object Object]"&&(n={});let{onclear:o}=g.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=m;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new M},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return j[j.length-1]}function st(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=ct();return r&&n.add(r),l.has(r)&&l.get(r).add(t),e}function it(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 W(t,e){if(t[p])return t[p].listeners.add(e)}function A(t,e,n){let r=t[p];if(!r)return;let o=r.listeners.delete(e);if(n&&!r.listeners.size){if(g.clear(t),!l.has(r))return o;let c=l.get(r);if(!l.has(c))return o;l.get(c).forEach(s=>A(s,c,!0))}return o}k(V);export{g as S,C as assign,q as assignAttribute,Q as classListDeclarative,lt as createElement,Et as dispatchEvent,lt as el,gt as empty,P as isSignal,_ as on,k as registerReactivity,m as scope}; diff --git a/dist/esm.d.ts b/dist/esm.d.ts index 382ddbd..a251c32 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -37,14 +37,13 @@ type ElementAttributes & AttrsModified : Omit & AttrsModified; export function assign(element: El, ...attrs_array: Partial>[]): El -type TagNameFragment= "<>"; export function el( tag_name: TAG, attrs?: Partial>, ...extenders: ddeElementExtender[] ): ElementTagNameMap[TAG] export function el( - tag_name: TagNameFragment, + tag_name?: "<>", ): DocumentFragment export function el< A extends ddeComponentAttributes, diff --git a/dist/esm.js b/dist/esm.js index 5286aa6..6c76eb0 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1 +1 @@ -var b={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function M(t,e=!0){return e?Object.assign(b,t):(Object.setPrototypeOf(t,b),t)}function E(t){return b.isPrototypeOf(t)&&t!==b?t:b}function l(t){return typeof t>"u"}function _(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:W};function W(t,e,n){if(Reflect.set(t,e,n),!!l(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,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return v[v.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...v]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),v.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return v.pop()}};function J(t,e,...n){let c=E(this),{namespace:r}=x,u=0,f,a;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{u=1,x.push({scope:t,host:h=>h?(u===1?n.unshift(h):h(a),void 0):a}),f=t(e||void 0);let d=document.createComment(``);f.prepend(d),f instanceof DocumentFragment&&(a=d);break}case t==="#text":f=w.call(this,document.createTextNode(""),e);break;case t==="<>":f=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":f=w.call(this,document.createElementNS(r,t),e);break;case!f:f=w.call(this,document.createElement(t),e)}return a||(a=f),n.forEach(d=>d(a)),u&&x.pop(),u=2,f}var{setDeleteAttr:D}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),u=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>N.call(u,t,a,d));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return L(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 D(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,L.bind(null,t[e]));case"ariaset":return y(r,n,(a,d)=>c("aria-"+a,d));case"classList":return F.call(u,t,n)}return U(t,e)?D(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?z:q).bind(null,t,"Attribute"),r=E(e);return{setRemoveAttr:c,s:r}}function F(t,e){let n=E(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function U(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!l(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,u]){r&&(u=t.processReactiveAttribute(e,r,u,n),n(r,u))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function q(t,e,n,c){return t[(l(c)?"remove":"set")+e](n,T(c))}function z(t,e,n,c,r=null){return t[(l(c)?"remove":"set")+e+"NS"](r,n,T(c))}function L(t,e,n){if(Reflect.set(t,e,n),!!l(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=$(),H=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(u)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let u="dde:"+n;if(r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||H.has(r))return r;let f=new MutationObserver(function(d){for(let{attributeName:h,target:g}of d)g.dispatchEvent(new CustomEvent(u,{detail:[h,g.getAttribute(h)]}))});return _(e.signal,()=>f.disconnect())&&f.observe(r,{attributes:!0}),r}};function $(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(h(s.addedNodes,!0)){f();continue}g(s.removedNodes,!0)&&f()}});return{onConnected(o,s){u();let i=r(o);i.connected.has(s)||(i.connected.add(s),i.length_c+=1)},offConnected(o,s){if(!t.has(o))return;let i=t.get(o);i.connected.has(s)&&(i.connected.delete(s),i.length_c-=1,c(o,i))},onDisconnected(o,s){u();let i=r(o);i.disconnected.has(s)||(i.disconnected.add(s),i.length_d+=1)},offDisconnected(o,s){if(!t.has(o))return;let i=t.get(o);i.disconnected.has(s)&&(i.disconnected.delete(s),i.length_d-=1,c(o,i))}};function c(o,s){s.length_c||s.length_d||(t.delete(o),f())}function r(o){if(t.has(o))return t.get(o);let s={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(o,s),s}function u(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(o){(requestIdleCallback||requestAnimationFrame)(o)})}async function d(o){t.size>30&&await a();let s=[];if(!(o instanceof Node))return s;for(let i of t.keys())i===o||!(i instanceof Node)||o.contains(i)&&s.push(i);return s}function h(o,s){let i=!1;for(let p of o){if(s&&d(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),i=!0)}return i}function g(o,s){let i=!1;for(let p of o)s&&d(p).then(g),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),i=!0);return i}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}});export{w as assign,N as assignAttribute,F as classListDeclarative,J as createElement,k as dispatchEvent,J as el,Q as empty,C as on,M as registerReactivity,x as scope}; +var b={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function M(t,e=!0){return e?Object.assign(b,t):(Object.setPrototypeOf(t,b),t)}function E(t){return b.isPrototypeOf(t)&&t!==b?t:b}function l(t){return typeof t>"u"}function _(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:W};function W(t,e,n){if(Reflect.set(t,e,n),!!l(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,namespace:"html",host:t=>t?t(document.body):document.body,prevent:!0}],S=t=>t==="svg"?"http://www.w3.org/2000/svg":t,x={get current(){return v[v.length-1]},get host(){return this.current.host},get namespace(){return this.current.namespace},set namespace(t){return this.current.namespace=S(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return x.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...v]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),v.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return v.pop()}};function J(t,e,...n){let c=E(this),{namespace:r}=x,u=0,f,a;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{u=1,x.push({scope:t,host:h=>h?(u===1?n.unshift(h):h(a),void 0):a}),f=t(e||void 0);let d=document.createComment(``);f.prepend(d),f instanceof DocumentFragment&&(a=d);break}case t==="#text":f=w.call(this,document.createTextNode(""),e);break;case(t==="<>"||!t):f=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":f=w.call(this,document.createElementNS(r,t),e);break;case!f:f=w.call(this,document.createElement(t),e)}return a||(a=f),n.forEach(d=>d(a)),u&&x.pop(),u=2,f}var{setDeleteAttr:D}=R,A=new WeakMap;function w(t,...e){if(!e.length)return t;A.set(t,P(t,this));for(let[n,c]of Object.entries(Object.assign({},...e)))N.call(this,t,n,c);return A.delete(t),t}function N(t,e,n){let{setRemoveAttr:c,s:r}=P(t,this),u=this;n=r.processReactiveAttribute(t,e,n,(a,d)=>N.call(u,t,a,d));let[f]=e;if(f==="=")return c(e.slice(1),n);if(f===".")return L(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 D(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,L.bind(null,t[e]));case"ariaset":return y(r,n,(a,d)=>c("aria-"+a,d));case"classList":return F.call(u,t,n)}return U(t,e)?D(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?z:q).bind(null,t,"Attribute"),r=E(e);return{setRemoveAttr:c,s:r}}function F(t,e){let n=E(this);return y(n,e,(c,r)=>t.classList.toggle(c,r===-1?void 0:!!r)),t}function Q(t){return Array.from(t.children).forEach(e=>e.remove()),t}function U(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!l(n.set)}function j(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||j(t,e)}function y(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([r,u]){r&&(u=t.processReactiveAttribute(e,r,u,n),n(r,u))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function q(t,e,n,c){return t[(l(c)?"remove":"set")+e](n,T(c))}function z(t,e,n,c,r=null){return t[(l(c)?"remove":"set")+e+"NS"](r,n,T(c))}function L(t,e,n){if(Reflect.set(t,e,n),!!l(n))return Reflect.deleteProperty(t,e)}function k(t,e,...n){let c=n.length?new CustomEvent(e,{detail:n[0]}):new Event(e);return t.dispatchEvent(c)}function C(t,e,n){return function(r){return r.addEventListener(t,e,n),r}}var O=$(),H=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(u)),r):(_(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};C.disconnected=function(t,e){let n="disconnected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let u="dde:"+n;return r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||_(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};C.attributeChanged=function(t,e){let n="attributeChanged";return typeof e!="object"&&(e={}),function(r){let u="dde:"+n;if(r.addEventListener(u,t,e),r.__dde_lifecycleToEvents||H.has(r))return r;let f=new MutationObserver(function(d){for(let{attributeName:h,target:g}of d)g.dispatchEvent(new CustomEvent(u,{detail:[h,g.getAttribute(h)]}))});return _(e.signal,()=>f.disconnect())&&f.observe(r,{attributes:!0}),r}};function $(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(h(s.addedNodes,!0)){f();continue}g(s.removedNodes,!0)&&f()}});return{onConnected(o,s){u();let i=r(o);i.connected.has(s)||(i.connected.add(s),i.length_c+=1)},offConnected(o,s){if(!t.has(o))return;let i=t.get(o);i.connected.has(s)&&(i.connected.delete(s),i.length_c-=1,c(o,i))},onDisconnected(o,s){u();let i=r(o);i.disconnected.has(s)||(i.disconnected.add(s),i.length_d+=1)},offDisconnected(o,s){if(!t.has(o))return;let i=t.get(o);i.disconnected.has(s)&&(i.disconnected.delete(s),i.length_d-=1,c(o,i))}};function c(o,s){s.length_c||s.length_d||(t.delete(o),f())}function r(o){if(t.has(o))return t.get(o);let s={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(o,s),s}function u(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(o){(requestIdleCallback||requestAnimationFrame)(o)})}async function d(o){t.size>30&&await a();let s=[];if(!(o instanceof Node))return s;for(let i of t.keys())i===o||!(i instanceof Node)||o.contains(i)&&s.push(i);return s}function h(o,s){let i=!1;for(let p of o){if(s&&d(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),i=!0)}return i}function g(o,s){let i=!1;for(let p of o)s&&d(p).then(g),!(!t.has(p)||!t.get(p).length_d)&&(p.dispatchEvent(new Event("dde:disconnected")),t.delete(p),i=!0);return i}}[HTMLElement,SVGElement,DocumentFragment].forEach(t=>{let{append:e}=t.prototype;t.prototype.append=function(...n){return e.apply(this,n),this}});export{w as assign,N as assignAttribute,F as classListDeclarative,J as createElement,k as dispatchEvent,J as el,Q as empty,C as on,M as registerReactivity,x as scope}; diff --git a/docs/index.html b/docs/index.html index 7f3dba8..18daa3c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,7 +1,7 @@ -`deka-dom-el` — Introduction/Guide

`deka-dom-el` — Introduction/Guide

The library tries to provide pure JavaScript tool(s) to create reactive interfaces. The main goals are:

  • provide a small wrappers/utilities around the native JavaScript DOM
  • keep library size around 10kB at maximum (if possible)
  • zero dependencies (if possible)
  • prefer a declarative/functional approach
  • unopinionated (allow alternative methods)

It is, in fact, an reimplementation of jaandrle/dollar_dom_component.

import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+`deka-dom-el` — Introduction/Guide
`deka-dom-el` — Introduction/Guide
The library tries to provide pure JavaScript tool(s) to create reactive interfaces. The main goals are:
  • provide a small wrappers/utilities around the native JavaScript DOM
  • keep library size around 10kB at maximum (if possible)
  • zero dependencies (if possible)
  • prefer a declarative/functional approach
  • unopinionated (allow alternative methods)
It is, in fact, an reimplementation of jaandrle/dollar_dom_component.
import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const clicks= S(0);
 document.body.append(
-	el("<>").append(
+	el().append(
 		el("p", S(()=>
 			"Hello World "+"🎉".repeat(clicks())
 		)),
@@ -12,7 +12,7 @@ document.body.append(
 		})
 	)
 );
-
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.
document.body.append(
+
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.
document.body.append(
 	document.createElement("div")
 );
 console.log(
@@ -26,7 +26,7 @@ document.body.append(
 		{ textContent: "Element’s text content.", style: "color: coral;" }
 	)
 );
-
To make this easier, you can use the el function. Internally in basic examples, it is wrapper around assign(document.createElement(…), { … }).
import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+
To make this easier, you can use the el function. Internally in basic examples, it is wrapper around assign(document.createElement(…), { … }).
import { el, assign } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const color= "lightcoral";
 document.body.append(
 	el("p", { textContent: "Hello (first time)", style: { color } })
@@ -37,7 +37,7 @@ document.body.append(
 		{ textContent: "Hello (second time)", style: { color } }
 	)
 );
-
The assign function provides improved behaviour of Object.assign(). You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the element.setAttribute if there is no writable property in the element prototype.
You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from HTMLElement. To see all available IDLs for example for paragraphs, see HTMLParagraphElement. Moreover, the assign provides a way to sets declaratively some convenient properties:
  • It is possible to sets data-*/aria-* attributes using object notation.
  • In opposite, it is also possible to sets data-*/aria-* attribute using camelCase notation.
  • You can use string or object as a value for style property.
  • className (IDL – preffered)/class are ways to add CSS class to the element. You can use string (similarly to class="…" syntax in  HTML) or array of strings. This is handy to concat conditional classes.
  • Use classList to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.
  • The assign also accepts the 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. For example, natievly the element’s id is removed by setting the IDL to an empty string.
For processing, the assign internally uses assignAttribute and classListDeclarative.
import { assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+
The assign function provides improved behaviour of Object.assign(). You can declaratively sets any IDL and attribute of the given element. Function prefers IDL and fallback to the element.setAttribute if there is no writable property in the element prototype.
You can study all JavaScript elements interfaces to the corresponding HTML elements. All HTML elements inherits from HTMLElement. To see all available IDLs for example for paragraphs, see HTMLParagraphElement. Moreover, the assign provides a way to sets declaratively some convenient properties:
  • It is possible to sets data-*/aria-* attributes using object notation.
  • In opposite, it is also possible to sets data-*/aria-* attribute using camelCase notation.
  • You can use string or object as a value for style property.
  • className (IDL – preffered)/class are ways to add CSS class to the element. You can use string (similarly to class="…" syntax in  HTML) or array of strings. This is handy to concat conditional classes.
  • Use classList to toggle specific classes. This will be handy later when the reactivity via signals is beeing introduced.
  • The assign also accepts the 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. For example, natievly the element’s id is removed by setting the IDL to an empty string.
For processing, the assign internally uses assignAttribute and classListDeclarative.
import { assignAttribute, classListDeclarative } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 const paragraph= document.createElement("p");
 
 assignAttribute(paragraph, "textContent", "Hello, world!");
@@ -62,7 +62,7 @@ console.log(paragraph.outerHTML);
 document.body.append(
 	paragraph
 );
-
Native JavaScript templating
By default, the native JS has no good way to define HTML template using DOM API:
document.body.append(
+
Native JavaScript templating
By default, the native JS has no good way to define HTML template using DOM API:
document.body.append(
 	document.createElement("div"),
 	document.createElement("span"),
 	document.createElement("main")
@@ -73,7 +73,7 @@ const template= document.createElement("main").append(
 	document.createElement("span"),
 );
 console.log(typeof template==="undefined");
-
This library therefore ooverwrites the append method to always return parent element.
import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+
This library therefore ooverwrites the append method to always return parent element.
import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 document.head.append(
 	el("style").append(
 		"tr, td{ border: 1px solid red; padding: 1em; }",
@@ -97,7 +97,7 @@ document.body.append(
 		)
 	)
 );
-
Creating advanced (reactive) templates and components
Basic components
You can use functions for encapsulation (repeating) logic. The el accepts function as first argument. In that case, the function should return dom elements and the second argument for el is argument for given element.
import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+
Creating advanced (reactive) templates and components
Basic components
You can use functions for encapsulation (repeating) logic. The el accepts function as first argument. In that case, the function should return dom elements and the second argument for el is argument for given element.
import { el } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
 document.head.append(
 	el("style").append(
 		".class1{ font-weight: bold; }",
@@ -114,4 +114,4 @@ function component({ className, textContent }){
 		el("p", textContent)
 	);
 }
-
It is nice to use similar naming convention as native DOM API.

\ No newline at end of file
+

It is nice to use similar naming convention as native DOM API.

\ No newline at end of file diff --git a/docs_src/components/example.html.js b/docs_src/components/example.html.js index e066e17..88a2f8e 100644 --- a/docs_src/components/example.html.js +++ b/docs_src/components/example.html.js @@ -15,7 +15,7 @@ export function example({ src, language= "javascript" }){ .toString() .replaceAll(' from "../../../index-with-signals.js";', ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";'); const id= "code-"+Math.random().toString(36).slice(2, 7); - return el("<>").append( + return el().append( el("div", { id, className: example.name }).append( el("pre").append( el("code", { className: "language-"+language, textContent: code }) diff --git a/docs_src/components/examples/helloWorld.js b/docs_src/components/examples/helloWorld.js index 7f05790..c20c0db 100644 --- a/docs_src/components/examples/helloWorld.js +++ b/docs_src/components/examples/helloWorld.js @@ -1,7 +1,7 @@ import { el, S } from "../../../index-with-signals.js"; const clicks= S(0); document.body.append( - el("<>").append( + el().append( el("p", S(()=> "Hello World "+"🎉".repeat(clicks()) )), diff --git a/docs_src/index.html.js b/docs_src/index.html.js index 35cd8cf..a6a199a 100644 --- a/docs_src/index.html.js +++ b/docs_src/index.html.js @@ -21,7 +21,7 @@ export const css= styles() ` .include(example_css); export function body(pkg){ - return el("<>").append( + return el().append( el("h1", pageName(pkg)), el("p").append( "The library tries to provide pure JavaScript tool(s) to create reactive interfaces. ", diff --git a/docs_src/layout/head.html.js b/docs_src/layout/head.html.js index 99ffb50..0fa6aa3 100644 --- a/docs_src/layout/head.html.js +++ b/docs_src/layout/head.html.js @@ -12,7 +12,7 @@ import { el } from "deka-dom-el"; * @param {object} def * */ export function head({ id, title, description, pkg, path_target }){ - return el("<>").append( + return el().append( el("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), el("link", { rel: "stylesheet", href: stylesheetHref(path_target, id) }), @@ -23,7 +23,7 @@ export function head({ id, title, description, pkg, path_target }){ ); } function metaTwitter({ name, description, homepage }){ - return el("<>").append( + return el().append( el("meta", { name: "twitter:card", content: "summary_large_image" }), //el("meta", { name: "twitter:domain", content: "" }), el("meta", { name: "twitter:url", content: homepage }), @@ -34,7 +34,7 @@ function metaTwitter({ name, description, homepage }){ ); } function metaFacebook({ name, description, homepage }){ - return el("<>").append( + return el().append( el("meta", { name: "og:url", content: homepage }), el("meta", { name: "og:title", content: name }), el("meta", { name: "og:description", content: description }), diff --git a/index.d.ts b/index.d.ts index 95c38cf..ccffb6c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -38,14 +38,13 @@ type ElementAttributes & AttrsModified; export function assign(element: El, ...attrs_array: Partial>[]): El -type TagNameFragment= "<>"; export function el( tag_name: TAG, attrs?: Partial>, ...extenders: ddeElementExtender[] ): ElementTagNameMap[TAG] export function el( - tag_name: TagNameFragment, + tag_name?: "<>", ): DocumentFragment export function el< diff --git a/package.json b/package.json index f2a57c3..d127607 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "latedef": "true", "maxparams": 5, "maxdepth": 3, - "maxcomplexity": 12, + "maxcomplexity": 13, "globals": { "requestIdleCallback": false, "AbortController": false, diff --git a/src/dom.js b/src/dom.js index b134e90..85d1ac2 100644 --- a/src/dom.js +++ b/src/dom.js @@ -59,7 +59,7 @@ export function createElement(tag, attributes, ...connect){ break; } case tag==="#text": el= assign.call(this, document.createTextNode(""), attributes); break; - case tag==="<>": el= assign.call(this, document.createDocumentFragment(), attributes); break; + case tag==="<>" || !tag: el= assign.call(this, document.createDocumentFragment(), attributes); break; case namespace!=="html": el= assign.call(this, document.createElementNS(namespace, tag), attributes); break; case !el: el= assign.call(this, document.createElement(tag), attributes); }