From b597c001760f6d40acbb747892d61ffd88223457 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Sun, 5 Nov 2023 21:49:32 +0100 Subject: [PATCH] :rocket: :construction: improvements (handlign special cases) + docs --- bs/docs.js | 8 ++++--- dist/dde-with-signals.js | 20 ++++++++-------- dist/dde.js | 6 ++--- dist/esm-with-signals.js | 8 +++---- dist/esm.js | 2 +- docs/index.css | 4 ++-- docs/index.html | 12 ++-------- docs_src/components/example.html.js | 12 +++++----- docs_src/index.css.js | 2 +- docs_src/index.html.js | 4 ++-- docs_src/layout/head.html.js | 2 +- jsdom.js | 37 +++++++---------------------- package-lock.json | 31 ++++++++++++++++++++++++ package.json | 2 +- src/dom.js | 12 ++++++---- src/signals-lib.js | 4 ++-- 16 files changed, 88 insertions(+), 78 deletions(-) diff --git a/bs/docs.js b/bs/docs.js index 973ecfe..3f9610a 100755 --- a/bs/docs.js +++ b/bs/docs.js @@ -12,10 +12,12 @@ const { el }= await register(ssr.dom); echo("Loading components…"); const pkg= s.cat("package.json").xargs(JSON.parse); -import { head, body, css } from "../docs_src/index.html.js"; -document.head.append(head(pkg, path_target)); -document.body.append(body(pkg)); +const { head, body, css }= await import("../docs_src/index.html.js"); //→ TODO: important to mention in docs!!! +document.head.append( + head(pkg, path_target) +); document.body.append( + el(body, pkg), el("script", { src: "https://cdn.jsdelivr.net/npm/shiki" }), el("script", { src: "index.js", type: "module" }) ); diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 9df4c31..6cc58a0 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -1,21 +1,21 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var w={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function T(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:X};function X(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}],H=t=>t==="svg"?"http://www.w3.org/2000/svg":t,b={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=H(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return b.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=H(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}=b,c=0,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,b.push({scope:t,host:a=>a?(c===1?n.unshift(a):a(s),void 0):s}),s=t(e||void 0),(s instanceof HTMLElement?J:V)(s,"Attribute","dde-fun",t.name);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 n.forEach(a=>a(s)),c&&b.pop(),c=2,s}var{setDeleteAttr:U}=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,(a,d)=>q.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return $(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return M(o,n,$.bind(null,t[e]));case"ariaset":return M(o,n,(a,d)=>r("aria-"+a,d));case"classList":return Y.call(c,t,n)}return tt(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?V:J).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=O(this);return M(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function tt(t,e){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 M(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function J(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function V(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function $(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 v(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;v.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)}};v.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}};v.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(d){for(let{attributeName:m,target:_}of d)_.dispatchEvent(new CustomEvent(c,{detail:[m,_.getAttribute(m)]}))});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(m(u.addedNodes,!0)){s();continue}_(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 m(i,u){let f=!1;for(let g of i){if(u&&d(g).then(m),!t.has(g))continue;let x=t.get(g);x.length_c&&(g.dispatchEvent(new Event("dde:connected")),x.connected=new WeakSet,x.length_c=0,x.length_d||t.delete(g),f=!0)}return f}function _(i,u){let f=!1;for(let g of i)u&&d(g).then(_),!(!t.has(g)||!t.get(g).length_d)&&(g.dispatchEvent(new Event("dde:disconnected")),t.delete(g),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 j(t){try{return Reflect.has(t,p)}catch{return!1}}var D=[],l=new WeakMap;function h(t,e){if(typeof t!="function")return Z(t,e);if(j(t))return t;let n=Z(),r=function(){let[o,...c]=l.get(r);if(l.set(r,new Set([o])),D.push(r),n(t()),D.pop(),!c.length)return;let s=l.get(r);for(let a of c)s.has(a)||A(a,r)};return l.set(n[p],r),l.set(r,new Set([n])),r(),n}h.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))};h.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));k(e,n),o&&o.addEventListener("abort",()=>A(e,n))}};h.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};var S="__dde_attributes";h.attribute=function(t,e=void 0){let n=h(e);return b.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},v.attributeChanged(function({detail:c}){/*! This maps attributes to signals (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=r[S][s];d&&d(a)})(r),v.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/h.clear(...Object.values(r[S]))})(r),r}),n};h.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)&&(h.clear(...c),l.delete(o))})}};var P="__dde_reactive";h.el=function(t,e){let n=document.createComment(""),r=document.createComment(""),o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return A(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let m=n;for(;(m=n.nextSibling)!==r;)m.remove();n.after(...d)};return k(t,s),Q(t,s,n,e),s(t()),o};var K={isSignal:j,processReactiveAttribute(t,e,n,r){if(!j(n))return n;let o=c=>r(e,c);return k(n,o),Q(n,o,t,e),n()}};function Q(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[P]||(o[P]=[],v.disconnected(()=>o[P].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[P].push([[t,e],...n])})}function Z(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}}),W=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}=h.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=b;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new W},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return D[D.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 k(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(h.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}T(K); -globalThis.dde= {S: h, +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`). +* 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); +globalThis.dde= {S: g, assign: C, assignAttribute: q, -classListDeclarative: Y, +classListDeclarative: Q, createElement: lt, dispatchEvent: Et, el: lt, empty: gt, -isSignal: j, -on: v, -registerReactivity: T, -scope: b +isSignal: P, +on: _, +registerReactivity: k, +scope: m }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index 9d93eb1..77af8a9 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,15 +1,15 @@ //deka-dom-el library is available via global namespace `dde` (()=> { -var v={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function F(t,e=!0){return e?Object.assign(v,t):(Object.setPrototypeOf(t,v),t)}function m(t){return v.isPrototypeOf(t)&&t!==v?t:v}function h(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:H};function H(t,e,n){if(Reflect.set(t,e,n),!!h(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,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 E[E.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[...E]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),E.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return E.pop()}};function J(t,e,...n){let c=m(this),{namespace:r}=x,f=0,u;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{f=1,x.push({scope:t,host:a=>a?(f===1?n.unshift(a):a(u),void 0):u}),u=t(e||void 0),(u instanceof HTMLElement?M:W)(u,"Attribute","dde-fun",t.name);break}case t==="#text":u=w.call(this,document.createTextNode(""),e);break;case t==="<>":u=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":u=w.call(this,document.createElementNS(r,t),e);break;case!u:u=w.call(this,document.createElement(t),e)}return n.forEach(a=>a(u)),f&&x.pop(),f=2,u}var{setDeleteAttr:L}=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),f=this;n=r.processReactiveAttribute(t,e,n,(a,p)=>N.call(f,t,a,p));let[u]=e;if(u==="=")return c(e.slice(1),n);if(u===".")return D(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 L(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,D.bind(null,t[e]));case"ariaset":return y(r,n,(a,p)=>c("aria-"+a,p));case"classList":return U.call(f,t,n)}return q(t,e)?L(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?W:M).bind(null,t,"Attribute"),r=m(e);return{setRemoveAttr:c,s:r}}function U(t,e){let n=m(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 q(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!h(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,f]){r&&(f=t.processReactiveAttribute(e,r,f,n),n(r,f))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function M(t,e,n,c){return t[(h(c)?"remove":"set")+e](n,T(c))}function W(t,e,n,c,r=null){return t[(h(c)?"remove":"set")+e+"NS"](r,n,T(c))}function D(t,e,n){if(Reflect.set(t,e,n),!!h(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=B(),z=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let f="dde:"+n;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),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 f="dde:"+n;return r.addEventListener(f,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 f="dde:"+n;if(r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||z.has(r))return r;let u=new MutationObserver(function(p){for(let{attributeName:l,target:g}of p)g.dispatchEvent(new CustomEvent(f,{detail:[l,g.getAttribute(l)]}))});return _(e.signal,()=>u.disconnect())&&u.observe(r,{attributes:!0}),r}};function B(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(l(s.addedNodes,!0)){u();continue}g(s.removedNodes,!0)&&u()}});return{onConnected(o,s){f();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){f();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),u())}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 f(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function u(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(o){(requestIdleCallback||requestAnimationFrame)(o)})}async function p(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 l(o,s){let i=!1;for(let d of o){if(s&&p(d).then(l),!t.has(d))continue;let b=t.get(d);b.length_c&&(d.dispatchEvent(new Event("dde:connected")),b.connected=new WeakSet,b.length_c=0,b.length_d||t.delete(d),i=!0)}return i}function g(o,s){let i=!1;for(let d of o)s&&p(d).then(g),!(!t.has(d)||!t.get(d).length_d)&&(d.dispatchEvent(new Event("dde:disconnected")),t.delete(d),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==="<>":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: U, +classListDeclarative: F, createElement: J, dispatchEvent: k, el: J, empty: Q, on: C, -registerReactivity: F, +registerReactivity: M, scope: x }; diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index c489465..8504c17 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 T(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:X};function X(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}],H=t=>t==="svg"?"http://www.w3.org/2000/svg":t,b={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=H(t)},preventDefault(){let{current:t}=this;return t.prevent=!0,t},elNamespace(t){let e=this.namespace;return this.namespace=t,{append(...n){return b.namespace=e,n.length===1?n[0]:document.createDocumentFragment().append(...n)}}},get state(){return[...y]},push(t={}){return t.namespace&&(t.namespace=H(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}=b,c=0,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{c=1,b.push({scope:t,host:a=>a?(c===1?n.unshift(a):a(s),void 0):s}),s=t(e||void 0),(s instanceof HTMLElement?J:V)(s,"Attribute","dde-fun",t.name);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 n.forEach(a=>a(s)),c&&b.pop(),c=2,s}var{setDeleteAttr:U}=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,(a,d)=>q.call(c,t,a,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return $(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return U(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return M(o,n,$.bind(null,t[e]));case"ariaset":return M(o,n,(a,d)=>r("aria-"+a,d));case"classList":return Y.call(c,t,n)}return tt(t,e)?U(t,e,n):r(e,n)}function B(t,e){if(L.has(t))return L.get(t);let r=(t instanceof SVGElement?V:J).bind(null,t,"Attribute"),o=O(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=O(this);return M(n,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t){return Array.from(t.children).forEach(e=>e.remove()),t}function tt(t,e){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 M(t,e,n){if(!(typeof e!="object"||e===null))return Object.entries(e).forEach(function([o,c]){o&&(c=t.processReactiveAttribute(e,o,c,n),n(o,c))})}function I(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function J(t,e,n,r){return t[(E(r)?"remove":"set")+e](n,I(r))}function V(t,e,n,r,o=null){return t[(E(r)?"remove":"set")+e+"NS"](o,n,I(r))}function $(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 v(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var N=nt(),et=new WeakSet;v.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)}};v.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}};v.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(d){for(let{attributeName:m,target:_}of d)_.dispatchEvent(new CustomEvent(c,{detail:[m,_.getAttribute(m)]}))});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(m(u.addedNodes,!0)){s();continue}_(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 m(i,u){let f=!1;for(let g of i){if(u&&d(g).then(m),!t.has(g))continue;let x=t.get(g);x.length_c&&(g.dispatchEvent(new Event("dde:connected")),x.connected=new WeakSet,x.length_c=0,x.length_d||t.delete(g),f=!0)}return f}function _(i,u){let f=!1;for(let g of i)u&&d(g).then(_),!(!t.has(g)||!t.get(g).length_d)&&(g.dispatchEvent(new Event("dde:disconnected")),t.delete(g),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 j(t){try{return Reflect.has(t,p)}catch{return!1}}var D=[],l=new WeakMap;function h(t,e){if(typeof t!="function")return Z(t,e);if(j(t))return t;let n=Z(),r=function(){let[o,...c]=l.get(r);if(l.set(r,new Set([o])),D.push(r),n(t()),D.pop(),!c.length)return;let s=l.get(r);for(let a of c)s.has(a)||A(a,r)};return l.set(n[p],r),l.set(r,new Set([n])),r(),n}h.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))};h.on=function t(e,n,r={}){let{signal:o}=r;if(!(o&&o.aborted)){if(Array.isArray(e))return e.forEach(c=>t(c,n,r));k(e,n),o&&o.addEventListener("abort",()=>A(e,n))}};h.symbols={signal:p,onclear:Symbol.for("Signal.onclear")};var S="__dde_attributes";h.attribute=function(t,e=void 0){let n=h(e);return b.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},v.attributeChanged(function({detail:c}){/*! This maps attributes to signals (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/let[s,a]=c,d=r[S][s];d&&d(a)})(r),v.disconnected(function(){/*! This removes all signals mapped to attributes (`S.attribute`). -* Investigate `__dde_attributes` key of the element.*/h.clear(...Object.values(r[S]))})(r),r}),n};h.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)&&(h.clear(...c),l.delete(o))})}};var P="__dde_reactive";h.el=function(t,e){let n=document.createComment(""),r=document.createComment(""),o=document.createDocumentFragment();o.append(n,r);let{current:c}=b,s=a=>{if(!n.parentNode||!r.parentNode)return A(t,s);b.push(c);let d=e(a);b.pop(),Array.isArray(d)||(d=[d]);let m=n;for(;(m=n.nextSibling)!==r;)m.remove();n.after(...d)};return k(t,s),Q(t,s,n,e),s(t()),o};var K={isSignal:j,processReactiveAttribute(t,e,n,r){if(!j(n))return n;let o=c=>r(e,c);return k(n,o),Q(n,o,t,e),n()}};function Q(t,e,...n){let{current:r}=b;r.prevent||r.host(function(o){o[P]||(o[P]=[],v.disconnected(()=>o[P].forEach(([[c,s]])=>A(c,s,c[p]?.host()===o)))(o)),o[P].push([[t,e],...n])})}function Z(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}}),W=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}=h.symbols;n[o]&&(r.push(n[o]),Reflect.deleteProperty(n,o));let{host:c}=b;return Reflect.defineProperty(t,p,{value:{value:e,actions:n,onclear:r,host:c,listeners:new Set,defined:new W},enumerable:!1,writable:!1,configurable:!0}),t.toJSON=()=>t(),Object.setPrototypeOf(t[p],rt),t}function ct(){return D[D.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 k(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(h.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}T(K);export{h as S,C as assign,q as assignAttribute,Y as classListDeclarative,lt as createElement,Et as dispatchEvent,lt as el,gt as empty,j as isSignal,v as on,T as registerReactivity,b as scope}; +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`). +* 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.js b/dist/esm.js index fb8a3d6..5286aa6 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1 +1 @@ -var v={isSignal(t){return!1},processReactiveAttribute(t,e,n,c){return n}};function F(t,e=!0){return e?Object.assign(v,t):(Object.setPrototypeOf(t,v),t)}function m(t){return v.isPrototypeOf(t)&&t!==v?t:v}function h(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:H};function H(t,e,n){if(Reflect.set(t,e,n),!!h(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,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 E[E.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[...E]},push(t={}){return t.namespace&&(t.namespace=S(t.namespace)),E.push(Object.assign({},this.current,{prevent:!1},t))},pop(){return E.pop()}};function J(t,e,...n){let c=m(this),{namespace:r}=x,f=0,u;switch((Object(e)!==e||c.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{f=1,x.push({scope:t,host:a=>a?(f===1?n.unshift(a):a(u),void 0):u}),u=t(e||void 0),(u instanceof HTMLElement?M:W)(u,"Attribute","dde-fun",t.name);break}case t==="#text":u=w.call(this,document.createTextNode(""),e);break;case t==="<>":u=w.call(this,document.createDocumentFragment(),e);break;case r!=="html":u=w.call(this,document.createElementNS(r,t),e);break;case!u:u=w.call(this,document.createElement(t),e)}return n.forEach(a=>a(u)),f&&x.pop(),f=2,u}var{setDeleteAttr:L}=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),f=this;n=r.processReactiveAttribute(t,e,n,(a,p)=>N.call(f,t,a,p));let[u]=e;if(u==="=")return c(e.slice(1),n);if(u===".")return D(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 L(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return y(r,n,D.bind(null,t[e]));case"ariaset":return y(r,n,(a,p)=>c("aria-"+a,p));case"classList":return U.call(f,t,n)}return q(t,e)?L(t,e,n):c(e,n)}function P(t,e){if(A.has(t))return A.get(t);let c=(t instanceof SVGElement?W:M).bind(null,t,"Attribute"),r=m(e);return{setRemoveAttr:c,s:r}}function U(t,e){let n=m(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 q(t,e){if(!Reflect.has(t,e))return!1;let n=j(t,e);return!h(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,f]){r&&(f=t.processReactiveAttribute(e,r,f,n),n(r,f))})}function T(t){return Array.isArray(t)?t.filter(Boolean).join(" "):t}function M(t,e,n,c){return t[(h(c)?"remove":"set")+e](n,T(c))}function W(t,e,n,c,r=null){return t[(h(c)?"remove":"set")+e+"NS"](r,n,T(c))}function D(t,e,n){if(Reflect.set(t,e,n),!!h(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=B(),z=new WeakSet;C.connected=function(t,e){let n="connected";return typeof e!="object"&&(e={}),e.once=!0,function(r){let f="dde:"+n;return r.addEventListener(f,t,e),r.__dde_lifecycleToEvents?r:r.isConnected?(r.dispatchEvent(new Event(f)),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 f="dde:"+n;return r.addEventListener(f,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 f="dde:"+n;if(r.addEventListener(f,t,e),r.__dde_lifecycleToEvents||z.has(r))return r;let u=new MutationObserver(function(p){for(let{attributeName:l,target:g}of p)g.dispatchEvent(new CustomEvent(f,{detail:[l,g.getAttribute(l)]}))});return _(e.signal,()=>u.disconnect())&&u.observe(r,{attributes:!0}),r}};function B(){let t=new Map,e=!1,n=new MutationObserver(function(o){for(let s of o)if(s.type==="childList"){if(l(s.addedNodes,!0)){u();continue}g(s.removedNodes,!0)&&u()}});return{onConnected(o,s){f();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){f();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),u())}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 f(){e||(e=!0,n.observe(document.body,{childList:!0,subtree:!0}))}function u(){!e||t.size||(e=!1,n.disconnect())}function a(){return new Promise(function(o){(requestIdleCallback||requestAnimationFrame)(o)})}async function p(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 l(o,s){let i=!1;for(let d of o){if(s&&p(d).then(l),!t.has(d))continue;let b=t.get(d);b.length_c&&(d.dispatchEvent(new Event("dde:connected")),b.connected=new WeakSet,b.length_c=0,b.length_d||t.delete(d),i=!0)}return i}function g(o,s){let i=!1;for(let d of o)s&&p(d).then(g),!(!t.has(d)||!t.get(d).length_d)&&(d.dispatchEvent(new Event("dde:disconnected")),t.delete(d),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,U as classListDeclarative,J as createElement,k as dispatchEvent,J as el,Q as empty,C as on,F 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==="<>":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.css b/docs/index.css index a5786d7..e83d2e7 100644 --- a/docs/index.css +++ b/docs/index.css @@ -1,6 +1,6 @@ :root { color-scheme: dark light; - --body-max-width: 40rem; + --body-max-width: 45rem; } *, ::before, ::after { box-sizing: border-box; } body > * { @@ -17,5 +17,5 @@ h1{ } .example{ --body-max-width: 80rem; - height: 20rem; + height: 25rem; } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index d9ef61e..2c6d70b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -`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 wrapper around the native JavaScript DOM
  • keep library size under 10kB
  • 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 wrapper around the native JavaScript DOM
  • keep library size under 10kB
  • 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(
@@ -12,12 +12,4 @@ document.body.append(
 		})
 	)
 );
-

\ No newline at end of file
+
\ No newline at end of file diff --git a/docs_src/components/example.html.js b/docs_src/components/example.html.js index 8a10c67..c2feacb 100644 --- a/docs_src/components/example.html.js +++ b/docs_src/components/example.html.js @@ -1,12 +1,12 @@ -let loaded= false; +let is_register= false; import { styles } from "../index.css.js"; export const css= styles().scope(example).css` :host{ --body-max-width: 80rem; - height: 20rem; + height: 25rem; } ` -import { el } from "../../jsdom.js"; +import { el } from "deka-dom-el"; export function example({ src, language= "javascript" }){ register(); const cwd= "components"; @@ -32,12 +32,12 @@ function elCode({ id, content }){ files: [{ name: ".js", content }], toolbar: false }); - return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${options}));`); + return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${JSON.stringify(options)}));`); } function register(){ - if(loaded) return; + if(is_register) return; document.head.append( el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }) ); - loaded= true; + is_register= true; } diff --git a/docs_src/index.css.js b/docs_src/index.css.js index 2a2f015..4688377 100644 --- a/docs_src/index.css.js +++ b/docs_src/index.css.js @@ -30,7 +30,7 @@ export function styles(){ return Object.assign(Object.create(s), { content: "" } export const common= css` :root { color-scheme: dark light; - --body-max-width: 40rem; + --body-max-width: 45rem; } *, ::before, ::after { box-sizing: border-box; } body > * { diff --git a/docs_src/index.html.js b/docs_src/index.html.js index 049d9c0..183a6bf 100644 --- a/docs_src/index.html.js +++ b/docs_src/index.html.js @@ -1,4 +1,4 @@ -import { el } from "../jsdom.js"; +import { el } from "deka-dom-el"; import { head as headCommon } from "./layout/head.html.js"; export function head(pkg, path_target){ return headCommon({ @@ -43,7 +43,7 @@ export function body(pkg){ }), ".", ), - example({ src: "./components/examples/helloWorld.js" }) + el(example, { src: "./components/examples/helloWorld.js" }) ); } function pageName(pkg){ diff --git a/docs_src/layout/head.html.js b/docs_src/layout/head.html.js index 495e73c..99ffb50 100644 --- a/docs_src/layout/head.html.js +++ b/docs_src/layout/head.html.js @@ -1,4 +1,4 @@ -import { el } from "../../jsdom.js"; +import { el } from "deka-dom-el"; /** * @param {object} def * @param {string} def.id Page `id` is used as stylesheet name. diff --git a/jsdom.js b/jsdom.js index 5c8d45e..484c142 100644 --- a/jsdom.js +++ b/jsdom.js @@ -11,35 +11,16 @@ prop_process.setDeleteAttr= function(obj, prop, value){ const keys= [ "HTMLElement", "SVGElement", "DocumentFragment", "MutationObserver", "document" ]; let dom_last; -export let namespace; -export let createElement; -export let el; -export let assign; -export let classListDeclarative; -export let empty; -export let on; -export let dispatchEvent; +export function register(dom, keys_aditional= []){ + if(dom_last!==dom){ + keys.push(...keys_aditional); + const w= dom.window; + keys.forEach(key=> globalThis[key]= w[key]); + globalThis.window= w; + w.console= globalThis.console; + } -export async function register(dom, keys_aditional= []){ - if(dom_last===dom) - return import("./index.js"); - - keys.push(...keys_aditional); - const w= dom.window; - keys.forEach(key=> globalThis[key]= w[key]); - globalThis.window= w; - w.console= globalThis.console; - - const m= await import("./index.js"); - namespace= m.namespace; - createElement= m.createElement; - el= m.el; - assign= m.assign; - classListDeclarative= m.classListDeclarative; - empty= m.empty; - on= m.on; - dispatchEvent= m.dispatchEvent; - return m; + return import("./index.js"); } export function unregister(){ if(!dom_last) diff --git a/package-lock.json b/package-lock.json index f3e9944..3ce8bd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2524,6 +2524,37 @@ "integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==", "dev": true }, + "node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "dev": true, + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, + "node_modules/w3c-xmlserializer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", + "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==", + "dev": true, + "dependencies": { + "xml-name-validator": "^4.0.0" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/web-streams-polyfill": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", diff --git a/package.json b/package.json index 9394f0f..d16264f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "deka-dom-el", - "version": "0.6.0", + "version": "0.6.1", "description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.", "author": "Jan Andrle ", "license": "MIT", diff --git a/src/dom.js b/src/dom.js index 5f873be..b134e90 100644 --- a/src/dom.js +++ b/src/dom.js @@ -43,16 +43,19 @@ export function createElement(tag, attributes, ...connect){ const s= signals(this); const { namespace }= scope; let scoped= 0; - let el; + let el, el_host; //TODO Array.isArray(tag) ⇒ set key (cache els) if(Object(attributes)!==attributes || s.isSignal(attributes)) attributes= { textContent: attributes }; switch(true){ case typeof tag==="function": { scoped= 1; - scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el), undefined) : el }); + scope.push({ scope: tag, host: c=> c ? (scoped===1 ? connect.unshift(c) : c(el_host), undefined) : el_host }); el= tag(attributes || undefined); - (el instanceof HTMLElement ? setRemove : setRemoveNS)(el, "Attribute", "dde-fun", tag.name); + const el_mark= document.createComment(``); + el.prepend(el_mark); + if(el instanceof DocumentFragment) + el_host= el_mark; break; } case tag==="#text": el= assign.call(this, document.createTextNode(""), attributes); break; @@ -60,7 +63,8 @@ export function createElement(tag, attributes, ...connect){ case namespace!=="html": el= assign.call(this, document.createElementNS(namespace, tag), attributes); break; case !el: el= assign.call(this, document.createElement(tag), attributes); } - connect.forEach(c=> c(el)); + if(!el_host) el_host= el; + connect.forEach(c=> c(el_host)); if(scoped) scope.pop(); scoped= 2; return el; diff --git a/src/signals-lib.js b/src/signals-lib.js index dccc154..69f06f2 100644 --- a/src/signals-lib.js +++ b/src/signals-lib.js @@ -118,8 +118,8 @@ S.clear= function(...signals){ }; const key_reactive= "__dde_reactive"; S.el= function(signal, map){ - const mark_start= document.createComment(``); - const mark_end= document.createComment(""); + const mark_start= document.createComment(``); + const mark_end= document.createComment(""); const out= document.createDocumentFragment(); out.append(mark_start, mark_end); const { current }= scope;