6 Commits
Author SHA1 Message Date
jaandrle a459c0d786 📺 version 2025-03-18 17:32:41 +01:00
jaandrle a1831d2cc4 🔤 corrects irland page headers 2025-03-18 17:30:42 +01:00
jaandrle a8fa048522 📺 requestIdleCallback doesn need to be global 2025-03-18 17:24:01 +01:00
jaandrle 4dba3a292a 🔤 2025-03-18 17:23:23 +01:00
jaandrle 8415f5cf6f ⚡ adjust package size limits 2025-03-17 15:14:56 +01:00
jaandrle 7e3b54153d 🐛 fixes #41 2025-03-17 15:14:39 +01:00
18 changed files with 94 additions and 90 deletions

No files matched your search

+2 -5
View File
@@ -1,7 +1,7 @@
**Alpha** **Alpha**
| [source code on GitHub](https://github.com/jaandrle/deka-dom-el) | [source code on GitHub](https://github.com/jaandrle/deka-dom-el)
| [*mirrored* on Gitea](https://gitea.jaandrle.cz/jaandrle/deka-dom-el) | [*mirrored* on Gitea](https://gitea.jaandrle.cz/jaandrle/deka-dom-el)
| [![git3moji](https://img.shields.io/badge/git3moji%E2%80%93v1-%E2%9A%A1%EF%B8%8F%F0%9F%90%9B%F0%9F%93%BA%F0%9F%91%AE%F0%9F%94%A4-fffad8.svg?style=flat-square)](https://robinpokorny.github.io/git3moji/) <!-- editorconfig-checker-disable-line --> | [npm package](https://www.npmjs.com/package/deka-dom-el)
<p align="center"> <p align="center">
<img src="docs/assets/logo.svg" alt="Deka DOM Elements Logo" width="180" height="180"> <img src="docs/assets/logo.svg" alt="Deka DOM Elements Logo" width="180" height="180">
@@ -24,9 +24,6 @@ function EmojiCounter({ initial }) {
const count = S(0); const count = S(0);
const emoji = S(initial); const emoji = S(initial);
/** @param {HTMLOptionElement} el */
const isSelected= el=> (el.selected= el.value===initial);
// 🔄 View - UI updates automatically when signals change // 🔄 View - UI updates automatically when signals change
return el().append( return el().append(
el("p", { el("p", {
@@ -87,7 +84,7 @@ npm install deka-dom-el --save
…or via CDN / Direct Script: …or via CDN / Direct Script:
For CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the [interactive For CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the [interactive
format selector](https://jaandrle.github.io/deka-dom-el/) on the documentation site. format selector](https://jaandrle.github.io/deka-dom-el/#h-getting-started) on the documentation site.
```html ```html
<!-- Example with IIFE build (creates a global DDE object) --> <!-- Example with IIFE build (creates a global DDE object) -->
+6 -6
View File
@@ -41,6 +41,11 @@ function observedAttributes(instance, observedAttribute2) {
function kebabToCamel(name) { function kebabToCamel(name) {
return name.replace(/-./g, (x) => x[1].toUpperCase()); return name.replace(/-./g, (x) => x[1].toUpperCase());
} }
function requestIdle() {
return new Promise(function(resolve) {
(globalThis.requestIdleCallback || requestAnimationFrame)(resolve);
});
}
// src/dom-lib/common.js // src/dom-lib/common.js
var enviroment = { var enviroment = {
@@ -179,11 +184,6 @@ function connectionsChangesObserverConstructor() {
is_observing = false; is_observing = false;
observer.disconnect(); observer.disconnect();
} }
function requestIdle() {
return new Promise(function(resolve) {
(requestIdleCallback || requestAnimationFrame)(resolve);
});
}
async function collectChildren(element) { async function collectChildren(element) {
if (store.size > 30) if (store.size > 30)
await requestIdle(); await requestIdle();
@@ -824,7 +824,7 @@ signal.el = function(s, map) {
}; };
function requestCleanUpReactives(host) { function requestCleanUpReactives(host) {
if (!host || !host[key_reactive]) return; if (!host || !host[key_reactive]) return;
(requestIdleCallback || setTimeout)(function() { requestIdle().then(function() {
host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false)); host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false));
}); });
} }
+3 -3
View File
@@ -1,3 +1,3 @@
var j=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function rt(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function _(t,e){return t instanceof e}function ot(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function S(t=null,e={}){return Object.create(t,e)}function b(...t){return Object.assign(...t)}function Z(t,e){if(!t||!_(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function ct(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[St(o)]=e(t,o),r},{})}function St(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:wt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function wt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),_(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var T="__dde_lifecyclesToEvents",C="dde:connected",D="dde:disconnected",F="dde:attributeChanged";var L=d.M?yt():new Proxy({},{get(){return()=>{}}});function yt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}g(f.removedNodes,!0)&&u()}},r=new d.M(n(s));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){i();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){i();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),s())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function i(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function m(u){t.size>30&&await p();let a=[];if(!_(u,d.N))return a;for(let f of t.keys())f===u||!_(f,d.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let w of u){if(a&&m(w).then(h),!t.has(w))continue;let P=t.get(w);P.length_c&&(w.dispatchEvent(new Event(C)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(w),f=!0)}return f}function g(u,a){let f=!1;for(let w of u)a&&m(w).then(g),!(!t.has(w)||!t.get(w).length_d)&&((globalThis.queueMicrotask||setTimeout)(R(w)),f=!0);return f}function R(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(D)),t.delete(u))}}}function Ht(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let i=c.length?new CustomEvent(t,b({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(i)}}function y(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}y.defer=t=>setTimeout.bind(null,t,0);var it=t=>b({},typeof t=="object"?t:null,{once:!0});y.connected=function(t,e){return e=it(e),function(r){return r.addEventListener(C,t,e),r[T]?r:r.isConnected?(r.dispatchEvent(new Event(C)),r):(Z(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};y.disconnected=function(t,e){return e=it(e),function(r){return r.addEventListener(D,t,e),r[T]||Z(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],G=new WeakMap,x={get current(){return O[O.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(G.has(t))return G.get(t);let e=new AbortController;return G.set(t,e),t(y.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.push(b({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};var q={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?b(q,t):(Object.setPrototypeOf(t,q),t)}function I(t){return ot(t,q)&&t!==q?t:q}function st(t,e,n,r){return t[(A(r)?"remove":"set")+e](n,r)}function ut(t,e,n,r,o=null){return t[(A(r)?"remove":"set")+e+"NS"](o,n,r)}function K(t,e,n){if(Reflect.set(t,e,n),!!A(n))return Reflect.deleteProperty(t,e)}function ft(t,e,n,r){return _(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function ce(t){return d.q(t)}function at(...t){return this.appendOriginal(...t),this}function At(t){return t.append===at||(t.appendOriginal=t.append,t.append=at),t}var $;function W(t,e,...n){let r=I(this),o=0,c,i,s=typeof e;switch((s==="string"||s===Line truncated var W=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function rt(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function _(t,e){return t instanceof e}function ot(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function S(t=null,e={}){return Object.create(t,e)}function b(...t){return Object.assign(...t)}function Z(t,e){if(!t||!_(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function ct(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[St(o)]=e(t,o),r},{})}function St(t){return t.replace(/-./g,e=>e[1].toUpperCase())}function j(){return new Promise(function(t){(globalThis.requestIdleCallback||requestAnimationFrame)(t)})}var d={setDeleteAttr:wt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function wt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),_(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var M="__dde_lifecyclesToEvents",C="dde:connected",R="dde:disconnected",F="dde:attributeChanged";var D=d.M?yt():new Proxy({},{get(){return()=>{}}});function yt(){let t=new Map,e=!1,n=s=>function(p){for(let f of p)if(f.type==="childList"){if(m(f.addedNodes,!0)){s();continue}h(f.removedNodes,!0)&&s()}},r=new d.M(n(u));return{observe(s){let p=new d.M(n(()=>{}));return p.observe(s,{childList:!0,subtree:!0}),()=>p.disconnect()},onConnected(s,p){i();let f=c(s);f.connected.has(p)||(f.connected.add(p),f.length_c+=1)},offConnected(s,p){if(!t.has(s))return;let f=t.get(s);f.connected.has(p)&&(f.connected.delete(p),f.length_c-=1,o(s,f))},onDisconnected(s,p){i();let f=c(s);f.disconnected.has(p)||(f.disconnected.add(p),f.length_d+=1)},offDisconnected(s,p){if(!t.has(s))return;let f=t.get(s);f.disconnected.delete(p),f.length_d-=1,o(s,f)}};function o(s,p){p.length_c||p.length_d||(t.delete(s),u())}function c(s){if(t.has(s))return t.get(s);let p={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,p),p}function i(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function u(){!e||t.size||(e=!1,r.disconnect())}async function a(s){t.size>30&&await j();let p=[];if(!_(s,d.N))return p;for(let f of t.keys())f===s||!_(f,d.N)||s.contains(f)&&p.push(f);return p}function m(s,p){let f=!1;for(let w of s){if(p&&a(w).then(m),!t.has(w))continue;let P=t.get(w);P.length_c&&(w.dispatchEvent(new Event(C)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(w),f=!0)}return f}function h(s,p){let f=!1;for(let w of s)p&&a(w).then(h),!(!t.has(w)||!t.get(w).length_d)&&((globalThis.queueMicrotask||setTimeout)(v(w)),f=!0);return f}function v(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(R)),t.delete(s))}}}function Ht(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let i=c.length?new CustomEvent(t,b({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(i)}}function y(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}y.defer=t=>setTimeout.bind(null,t,0);var it=t=>b({},typeof t=="object"?t:null,{once:!0});y.connected=function(t,e){return e=it(e),function(r){return r.addEventListener(C,t,e),r[M]?r:r.isConnected?(r.dispatchEvent(new Event(C)),r):(Z(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};y.disconnected=function(t,e){return e=it(e),function(r){return r.addEventListener(R,t,e),r[M]||Z(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],G=new WeakMap,x={get current(){return O[O.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(G.has(t))return G.get(t);let e=new AbortController;return G.set(t,e),t(y.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.push(b({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};var k={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?b(k,t):(Object.setPrototypeOf(t,k),t)}function I(t){return ot(t,k)&&t!==k?t:k}function st(t,e,n,r){return t[(A(r)?"remove":"set")+e](n,r)}function ut(t,e,n,r,o=null){return t[(A(r)?"remove":"set")+e+"NS"](o,n,r)}function K(t,e,n){if(Reflect.set(t,e,n),!!A(n))return Reflect.deleteProperty(t,e)}function ft(t,e,n,r){return _(t,d.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function ce(t){return d.q(t)}function at(...t){return this.appendOriginal(...t),this}function At(t){return t.append===at||(t.appendOriginal=t.append,t.append=at),t}var $;function q(t,e,...n){let r=I(this),o=0,c,i,u=typeof e;switch((u==="stLine truncated
Investigate `__dde_attributes` key of the element. */let[c,i]=o,s=this[tt][c];if(s)return v.action(s,"_set",i)})(t),y.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). Investigate `__dde_attributes` key of the element. */let[c,i]=o,u=this[tt][c];if(u)return g.action(u,"_set",i)})(t),y.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`).
Investigate `__dde_attributes` key of the element. */v.clear(...Object.values(this[tt]))})(t),n};var bt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return nt(n,o),xt(n,o,t,e),n.get()}};function xt(t,e,...n){let{current:r}=x;r.host(function(o){o[N]||(o[N]=[]),o[N].push([[t,e],...n]),!r.prevent&&y.disconnected(()=>o[N].forEach(([[c,i]])=>M(c,i,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){v.clear({[l]:t})});function gt(t,e,n){let r=S(t?Dt:et),o=Et(r,e,n,t);return Tt.register(o,o[l]),o}var kt=b(S(),{stopPropagation(){this.skip=!0}});function Et(t,e,n,r=!1){let o=[];rt(n)!=="[object Object]"&&(n={});let{onclear:c}=v.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:i}=x;return Reflect.defineProperty(t,l,{value:b(S(kt),{value:e,actions:n,onclear:o,host:i,listeners:new Set,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Pt(){return B[B.length-1]}function vt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=Pt();return r&&n.add(r),E.has(r)&&E.get(r).add(t),e}function _t(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,Y(t,n),e}function nt(t,e){if(t[l])return t[l].listeners.add(e)}function M(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;v.clear(t);let i=E.get(r);if(!i)return c;let s=E.get(i);if(!s)return c;for(let p of s)M(p,i,!0);return c}V(bt);export{v as S,U as assign,dt as assignAttribute,At as chainableAppend,Ct as classListDeclarative,W as createElement,se as createElementNS,ge as customElementRender,Rt as customElementWithDDE,Ht as dispatchEvent,W as el,se as elNS,J as isSignal,Rt as lifecyclesToEvents,k as memo,y as on,ce as queue,V as registerReactivity,x as scope,v as signal,me as simulateSlots}; Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[tt]))})(t),n};var bt={isSignal:J,processReactiveAttribute(t,e,n,r){if(!J(n))return n;let o=c=>{if(!t.isConnected)return N(n,o);r(e,c)};return nt(n,o),xt(n,o,t,e),n.get()}};function xt(t,e,...n){let{current:r}=x;r.host(function(o){o[L]||(o[L]=[]),o[L].push([[t,e],...n]),!r.prevent&&y.disconnected(()=>o[L].forEach(([[c,i]])=>N(c,i,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Tt=new FinalizationRegistry(function(t){g.clear({[l]:t})});function gt(t,e,n){let r=S(t?Dt:et),o=Et(r,e,n,t);return Tt.register(o,o[l]),o}var Pt=b(S(),{stopPropagation(){this.skip=!0}});function Et(t,e,n,r=!1){let o=[];rt(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:i}=x;return Reflect.defineProperty(t,l,{value:b(S(Pt),{value:e,actions:n,onclear:o,host:i,listeners:new Set,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function kt(){return B[B.length-1]}function vt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=kt();return r&&n.add(r),E.has(r)&&E.get(r).add(t),e}function _t(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,Y(t,n),e}function nt(t,e){if(t[l])return t[l].listeners.add(e)}function N(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let i=E.get(r);if(!i)return c;let u=E.get(i);if(!u)return c;for(let a of u)N(a,i,!0);return c}V(bt);export{g as S,U as assign,dt as assignAttribute,At as chainableAppend,Ct as classListDeclarative,q as createElement,se as createElementNS,ge as customElementRender,Rt as customElementWithDDE,Ht as dispatchEvent,q as el,se as elNS,J as isSignal,Rt as lifecyclesToEvents,T as memo,y as on,ce as queue,V as registerReactivity,x as scope,g as signal,me as simulateSlots};
Vendored
+5 -5
View File
@@ -25,6 +25,11 @@ function onAbort(signal, listener) {
signal.removeEventListener("abort", listener); signal.removeEventListener("abort", listener);
}; };
} }
function requestIdle() {
return new Promise(function(resolve) {
(globalThis.requestIdleCallback || requestAnimationFrame)(resolve);
});
}
// src/dom-lib/common.js // src/dom-lib/common.js
var enviroment = { var enviroment = {
@@ -163,11 +168,6 @@ function connectionsChangesObserverConstructor() {
is_observing = false; is_observing = false;
observer.disconnect(); observer.disconnect();
} }
function requestIdle() {
return new Promise(function(resolve) {
(requestIdleCallback || requestAnimationFrame)(resolve);
});
}
async function collectChildren(element) { async function collectChildren(element) {
if (store.size > 30) if (store.size > 30)
await requestIdle(); await requestIdle();
+1 -1
View File
@@ -1 +1 @@
var H=(...t)=>Object.prototype.hasOwnProperty.call(...t);function x(t){return typeof t>"u"}function h(t,e){return t instanceof e}function z(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function R(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function W(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var f={setDeleteAttr:nt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function nt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),h(t,f.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",E="dde:connected",w="dde:disconnected",B="dde:attributeChanged";var y=f.M?rt():new Proxy({},{get(){return()=>{}}});function rt(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}v(i.removedNodes,!0)&&s()}},r=new f.M(n(a));return{observe(s){let u=new f.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){p();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){p();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),a())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function p(){e||(e=!0,r.observe(f.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function m(s){t.size>30&&await d();let u=[];if(!h(s,f.N))return u;for(let i of t.keys())i===s||!h(i,f.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let b of s){if(u&&m(b).then(l),!t.has(b))continue;let S=t.get(b);S.length_c&&(b.dispatchEvent(new Event(E)),S.connected=new WeakSet,S.length_c=0,S.length_d||t.delete(b),i=!0)}return i}function v(s,u){let i=!1;for(let b of s)u&&m(b).then(v),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(q(b)),i=!0);return i}function q(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function vt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let p=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(p)}}function D(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}D.defer=t=>setTimeout.bind(null,t,0);var Z=t=>g({},typeof t=="object"?t:null,{once:!0});D.connected=function(t,e){return e=Z(e),function(r){return r.addEventListener(E,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(E)),r):(W(e.signal,()=>y.offConnected(r,t))&&y.onConnected(r,t),r)}};D.disconnected=function(t,e){return e=Z(e),function(r){return r.addEventListener(w,t,e),r[C]||W(e.signal,()=>y.offDisconnected(r,t))&&y.onDisconnected(r,t),r}};var _=[{get scope(){return f.D.body},host:t=>t?t(f.D.body):f.D.body,prevent:!0}],j=new WeakMap,A={get current(){return _[_.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(j.has(t))return j.get(t);let e=new AbortController;return j.set(t,e),t(D.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[..._]},push(t={}){return _.push(g({},this.current,{prevent:!1},t))},pushRoot(){return _.push(_[0])},pop(){if(_.length!==1)return _.pop()}};var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function ot(t,e=!0){return e?g(O,t):(Object.setPrototypeOf(t,O),t)}function L(t){return z(t,O)&&t!==O?t:O}function G(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,r)}function J(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,r)}function F(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function V(t,e,n,r){return h(t,f.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Tt(t){return f.q(t)}function K(...t){return this.appendOriginal(...t),this}function ct(t){return t.append===K||(t.appendOriginal=t.append,t.append=K),t}var T;function U(t,e,...n){let r=L(this),o=0,c,p,a=typeof e;switch((a==="string"||a==="number"||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let d=(...v)=>v.length?(o===1?n.unshift(...v):v.forEach(q=>q(p)),void 0):p;A.push({scope:t,host:d}),c=t(e||void 0);let m=h(c,f.F);if(c.nodeName==="#comment")break;let l=U.mark({type:"component",name:t.name,host:mLine truncated var k=(...t)=>Object.prototype.hasOwnProperty.call(...t);function x(t){return typeof t>"u"}function h(t,e){return t instanceof e}function H(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function R(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function q(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function z(){return new Promise(function(t){(globalThis.requestIdleCallback||requestAnimationFrame)(t)})}var f={setDeleteAttr:nt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function nt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),h(t,f.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",E="dde:connected",w="dde:disconnected",B="dde:attributeChanged";var y=f.M?rt():new Proxy({},{get(){return()=>{}}});function rt(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(m(i.addedNodes,!0)){s();continue}l(i.removedNodes,!0)&&s()}},r=new f.M(n(a));return{observe(s){let u=new f.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){p();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){p();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),a())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function p(){e||(e=!0,r.observe(f.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}async function d(s){t.size>30&&await z();let u=[];if(!h(s,f.N))return u;for(let i of t.keys())i===s||!h(i,f.N)||s.contains(i)&&u.push(i);return u}function m(s,u){let i=!1;for(let b of s){if(u&&d(b).then(m),!t.has(b))continue;let S=t.get(b);S.length_c&&(b.dispatchEvent(new Event(E)),S.connected=new WeakSet,S.length_c=0,S.length_d||t.delete(b),i=!0)}return i}function l(s,u){let i=!1;for(let b of s)u&&d(b).then(l),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(v(b)),i=!0);return i}function v(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function gt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let p=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(p)}}function D(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}D.defer=t=>setTimeout.bind(null,t,0);var Z=t=>g({},typeof t=="object"?t:null,{once:!0});D.connected=function(t,e){return e=Z(e),function(r){return r.addEventListener(E,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(E)),r):(q(e.signal,()=>y.offConnected(r,t))&&y.onConnected(r,t),r)}};D.disconnected=function(t,e){return e=Z(e),function(r){return r.addEventListener(w,t,e),r[C]||q(e.signal,()=>y.offDisconnected(r,t))&&y.onDisconnected(r,t),r}};var _=[{get scope(){return f.D.body},host:t=>t?t(f.D.body):f.D.body,prevent:!0}],W=new WeakMap,A={get current(){return _[_.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(W.has(t))return W.get(t);let e=new AbortController;return W.set(t,e),t(D.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[..._]},push(t={}){return _.push(g({},this.current,{prevent:!1},t))},pushRoot(){return _.push(_[0])},pop(){if(_.length!==1)return _.pop()}};var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function ot(t,e=!0){return e?g(O,t):(Object.setPrototypeOf(t,O),t)}function T(t){return H(t,O)&&t!==O?t:O}function G(t,e,n,r){return t[(x(r)?"remove":"set")+e](n,r)}function J(t,e,n,r,o=null){return t[(x(r)?"remove":"set")+e+"NS"](o,n,r)}function j(t,e,n){if(Reflect.set(t,e,n),!!x(n))return Reflect.deleteProperty(t,e)}function V(t,e,n,r){return h(t,f.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Nt(t){return f.q(t)}function K(...t){return this.appendOriginal(...t),this}function ct(t){return t.append===K||(t.appendOriginal=t.append,t.append=K),t}var N;function F(t,e,...n){let r=T(this),o=0,c,p,a=typeof e;switch((a==="string"||a==="number"||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let d=(...v)=>v.length?(o===1?n.unshift(...v):v.forEach(s=>s(p)),void 0):p;A.push({scope:t,host:d}),c=t(e||void 0);let m=h(c,f.F);if(c.nodeName==="#comment")break;let l=F.mark({type:"component",name:t.Line truncated
+6 -6
View File
@@ -86,6 +86,11 @@ var DDE = (() => {
function kebabToCamel(name) { function kebabToCamel(name) {
return name.replace(/-./g, (x) => x[1].toUpperCase()); return name.replace(/-./g, (x) => x[1].toUpperCase());
} }
function requestIdle() {
return new Promise(function(resolve) {
(globalThis.requestIdleCallback || requestAnimationFrame)(resolve);
});
}
// src/dom-lib/common.js // src/dom-lib/common.js
var enviroment = { var enviroment = {
@@ -224,11 +229,6 @@ var DDE = (() => {
is_observing = false; is_observing = false;
observer.disconnect(); observer.disconnect();
} }
function requestIdle() {
return new Promise(function(resolve) {
(requestIdleCallback || requestAnimationFrame)(resolve);
});
}
async function collectChildren(element) { async function collectChildren(element) {
if (store.size > 30) if (store.size > 30)
await requestIdle(); await requestIdle();
@@ -869,7 +869,7 @@ var DDE = (() => {
}; };
function requestCleanUpReactives(host) { function requestCleanUpReactives(host) {
if (!host || !host[key_reactive]) return; if (!host || !host[key_reactive]) return;
(requestIdleCallback || setTimeout)(function() { requestIdle().then(function() {
host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false)); host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false));
}); });
} }
+3 -3
View File
@@ -1,3 +1,3 @@
var DDE=(()=>{var G=Object.defineProperty;var Ct=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var Rt=Object.prototype.hasOwnProperty;var Dt=(t,e)=>{for(var n in e)G(t,n,{get:e[n],enumerable:!0})},Lt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Ot(e))!Rt.call(t,o)&&o!==n&&G(t,o,{get:()=>e[o],enumerable:!(r=Ct(e,o))||r.enumerable});return t};var Nt=t=>Lt(G({},"__esModule",{value:!0}),t);var Gt={};Dt(Gt,{S:()=>g,assign:()=>j,assignAttribute:()=>Y,chainableAppend:()=>ht,classListDeclarative:()=>gt,createElement:()=>P,createElementNS:()=>Wt,customElementRender:()=>It,customElementWithDDE:()=>bt,dispatchEvent:()=>Pt,el:()=>P,elNS:()=>Wt,isSignal:()=>F,lifecyclesToEvents:()=>bt,memo:()=>N,on:()=>w,queue:()=>qt,registerReactivity:()=>$,scope:()=>b,signal:()=>g,simulateSlots:()=>Ft});var I=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function ct(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function _(t,e){return t instanceof e}function it(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function S(t=null,e={}){return Object.create(t,e)}function x(...t){return Object.assign(...t)}function V(t,e){if(!t||!_(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function st(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Mt(o)]=e(t,o),r},{})}function Mt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var d={setDeleteAttr:Tt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Tt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),_(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var k="__dde_lifecyclesToEvents",C="dde:connected",D="dde:disconnected",U="dde:attributeChanged";var L=d.M?kt():new Proxy({},{get(){return()=>{}}});function kt(){let t=new Map,e=!1,n=u=>function(a){for(let f of a)if(f.type==="childList"){if(h(f.addedNodes,!0)){u();continue}v(f.removedNodes,!0)&&u()}},r=new d.M(n(s));return{observe(u){let a=new d.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){i();let f=c(u);f.connected.has(a)||(f.connected.add(a),f.length_c+=1)},offConnected(u,a){if(!t.has(u))return;let f=t.get(u);f.connected.has(a)&&(f.connected.delete(a),f.length_c-=1,o(u,f))},onDisconnected(u,a){i();let f=c(u);f.disconnected.has(a)||(f.disconnected.add(a),f.length_d+=1)},offDisconnected(u,a){if(!t.has(u))return;let f=t.get(u);f.disconnected.delete(a),f.length_d-=1,o(u,f)}};function o(u,a){a.length_c||a.length_d||(t.delete(u),s())}function c(u){if(t.has(u))return t.get(u);let a={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(u,a),a}function i(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function s(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function m(u){t.size>30&&await p();let a=[];if(!_(u,d.N))return a;for(let f of t.keys())f===u||!_(f,d.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let y of u){if(a&&m(y).then(h),!t.has(y))continue;let q=t.get(y);q.length_c&&(y.dispatchEvent(new Event(C)),q.connected=new WeakSet,q.length_c=0,q.length_d||t.delete(y),f=!0)}return f}function v(u,a){let f=!1;for(let y of u)a&&m(y).then(v),!(!t.has(y)||!t.get(y).length_d)&&((globalThis.queueMicrotask||setTimeout)(R(y)),f=!0);return f}function R(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(D)),t.delete(u))}}}function Pt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let i=c.length?new CustomEvent(t,x({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(i)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}w.defer=t=>setTimeout.bind(null,t,0);var ut=t=>x({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=ut(e),function(r){return r.addEventListener(C,t,e),r[k]?r:r.isConnected?(r.dispatchEvent(new Event(C)),r):(V(e.signal,()=>L.offConnected(r,t))&&L.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=ut(e),function(r){return r.addEventListener(D,t,e),r[k]||V(e.signal,()=>L.offDisconnected(r,t))&&L.onDisconnected(r,t),r}};var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],K=new WeakMap,b={get current(){return O[O.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(K.has(t))return K.get(t);let e=new AbortController;return K.set(t,e),t(w.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.push(x({},thLine truncated var DDE=(()=>{var G=Object.defineProperty;var Ct=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var Rt=Object.prototype.hasOwnProperty;var Dt=(t,e)=>{for(var n in e)G(t,n,{get:e[n],enumerable:!0})},Lt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Ot(e))!Rt.call(t,o)&&o!==n&&G(t,o,{get:()=>e[o],enumerable:!(r=Ct(e,o))||r.enumerable});return t};var Nt=t=>Lt(G({},"__esModule",{value:!0}),t);var Gt={};Dt(Gt,{S:()=>g,assign:()=>W,assignAttribute:()=>Y,chainableAppend:()=>ht,classListDeclarative:()=>gt,createElement:()=>P,createElementNS:()=>Wt,customElementRender:()=>It,customElementWithDDE:()=>bt,dispatchEvent:()=>kt,el:()=>P,elNS:()=>Wt,isSignal:()=>j,lifecyclesToEvents:()=>bt,memo:()=>L,on:()=>w,queue:()=>qt,registerReactivity:()=>$,scope:()=>v,signal:()=>g,simulateSlots:()=>Ft});var F=(...t)=>Object.prototype.hasOwnProperty.call(...t);function A(t){return typeof t>"u"}function ct(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function _(t,e){return t instanceof e}function it(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function S(t=null,e={}){return Object.create(t,e)}function x(...t){return Object.assign(...t)}function V(t,e){if(!t||!_(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function st(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Mt(o)]=e(t,o),r},{})}function Mt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}function I(){return new Promise(function(t){(globalThis.requestIdleCallback||requestAnimationFrame)(t)})}var d={setDeleteAttr:Tt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function Tt(t,e,n){if(Reflect.set(t,e,n),!!A(n)){if(Reflect.deleteProperty(t,e),_(t,d.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var T="__dde_lifecyclesToEvents",C="dde:connected",R="dde:disconnected",U="dde:attributeChanged";var D=d.M?Pt():new Proxy({},{get(){return()=>{}}});function Pt(){let t=new Map,e=!1,n=s=>function(p){for(let f of p)if(f.type==="childList"){if(m(f.addedNodes,!0)){s();continue}h(f.removedNodes,!0)&&s()}},r=new d.M(n(u));return{observe(s){let p=new d.M(n(()=>{}));return p.observe(s,{childList:!0,subtree:!0}),()=>p.disconnect()},onConnected(s,p){i();let f=c(s);f.connected.has(p)||(f.connected.add(p),f.length_c+=1)},offConnected(s,p){if(!t.has(s))return;let f=t.get(s);f.connected.has(p)&&(f.connected.delete(p),f.length_c-=1,o(s,f))},onDisconnected(s,p){i();let f=c(s);f.disconnected.has(p)||(f.disconnected.add(p),f.length_d+=1)},offDisconnected(s,p){if(!t.has(s))return;let f=t.get(s);f.disconnected.delete(p),f.length_d-=1,o(s,f)}};function o(s,p){p.length_c||p.length_d||(t.delete(s),u())}function c(s){if(t.has(s))return t.get(s);let p={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,p),p}function i(){e||(e=!0,r.observe(d.D.body,{childList:!0,subtree:!0}))}function u(){!e||t.size||(e=!1,r.disconnect())}async function a(s){t.size>30&&await I();let p=[];if(!_(s,d.N))return p;for(let f of t.keys())f===s||!_(f,d.N)||s.contains(f)&&p.push(f);return p}function m(s,p){let f=!1;for(let y of s){if(p&&a(y).then(m),!t.has(y))continue;let k=t.get(y);k.length_c&&(y.dispatchEvent(new Event(C)),k.connected=new WeakSet,k.length_c=0,k.length_d||t.delete(y),f=!0)}return f}function h(s,p){let f=!1;for(let y of s)p&&a(y).then(h),!(!t.has(y)||!t.get(y).length_d)&&((globalThis.queueMicrotask||setTimeout)(b(y)),f=!0);return f}function b(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(R)),t.delete(s))}}}function kt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let i=c.length?new CustomEvent(t,x({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(i)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}w.defer=t=>setTimeout.bind(null,t,0);var ut=t=>x({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=ut(e),function(r){return r.addEventListener(C,t,e),r[T]?r:r.isConnected?(r.dispatchEvent(new Event(C)),r):(V(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=ut(e),function(r){return r.addEventListener(R,t,e),r[T]||V(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var O=[{get scope(){return d.D.body},host:t=>t?t(d.D.body):d.D.body,prevent:!0}],K=new WeakMap,v={get current(){return O[O.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(K.has(t))return K.get(t);let e=new AbortController;return K.set(t,e),t(w.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...O]},push(t={}){return O.pLine truncated
Investigate `__dde_attributes` key of the element. */let[c,i]=o,s=this[nt][c];if(s)return g.action(s,"_set",i)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). Investigate `__dde_attributes` key of the element. */let[c,i]=o,u=this[nt][c];if(u)return g.action(u,"_set",i)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`).
Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[nt]))})(t),n};var St={isSignal:F,processReactiveAttribute(t,e,n,r){if(!F(n))return n;let o=c=>{if(!t.isConnected)return T(n,o);r(e,c)};return ot(n,o),wt(n,o,t,e),n.get()}};function wt(t,e,...n){let{current:r}=b;r.host(function(o){o[M]||(o[M]=[]),o[M].push([[t,e],...n]),!r.prevent&&w.disconnected(()=>o[M].forEach(([[c,i]])=>T(c,i,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Jt=new FinalizationRegistry(function(t){g.clear({[l]:t})});function Et(t,e,n){let r=S(t?Ut:rt),o=yt(r,e,n,t);return Jt.register(o,o[l]),o}var Bt=x(S(),{stopPropagation(){this.skip=!0}});function yt(t,e,n,r=!1){let o=[];ct(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:i}=b;return Reflect.defineProperty(t,l,{value:x(S(Bt),{value:e,actions:n,onclear:o,host:i,listeners:new Set,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Zt(){return Z[Z.length-1]}function _t(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=Zt();return r&&n.add(r),E.has(r)&&E.get(r).add(t),e}function At(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,et(t,n),e}function ot(t,e){if(t[l])return t[l].listeners.add(e)}function T(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let i=E.get(r);if(!i)return c;let s=E.get(i);if(!s)return c;for(let p of s)T(p,i,!0);return c}$(St);return Nt(Gt);})(); Investigate `__dde_attributes` key of the element. */g.clear(...Object.values(this[nt]))})(t),n};var St={isSignal:j,processReactiveAttribute(t,e,n,r){if(!j(n))return n;let o=c=>{if(!t.isConnected)return M(n,o);r(e,c)};return ot(n,o),wt(n,o,t,e),n.get()}};function wt(t,e,...n){let{current:r}=v;r.host(function(o){o[N]||(o[N]=[]),o[N].push([[t,e],...n]),!r.prevent&&w.disconnected(()=>o[N].forEach(([[c,i]])=>M(c,i,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Jt=new FinalizationRegistry(function(t){g.clear({[l]:t})});function Et(t,e,n){let r=S(t?Ut:rt),o=yt(r,e,n,t);return Jt.register(o,o[l]),o}var Bt=x(S(),{stopPropagation(){this.skip=!0}});function yt(t,e,n,r=!1){let o=[];ct(n)!=="[object Object]"&&(n={});let{onclear:c}=g.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:i}=v;return Reflect.defineProperty(t,l,{value:x(S(Bt),{value:e,actions:n,onclear:o,host:i,listeners:new Set,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Zt(){return Z[Z.length-1]}function _t(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=Zt();return r&&n.add(r),E.has(r)&&E.get(r).add(t),e}function At(t,e,n){let r=t[l];if(!(!r||!n&&r.value===e))return r.value=e,et(t,n),e}function ot(t,e){if(t[l])return t[l].listeners.add(e)}function M(t,e,n){let r=t[l];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;g.clear(t);let i=E.get(r);if(!i)return c;let u=E.get(i);if(!u)return c;for(let a of u)M(a,i,!0);return c}$(St);return Nt(Gt);})();
+5 -5
View File
@@ -67,6 +67,11 @@ var DDE = (() => {
signal.removeEventListener("abort", listener); signal.removeEventListener("abort", listener);
}; };
} }
function requestIdle() {
return new Promise(function(resolve) {
(globalThis.requestIdleCallback || requestAnimationFrame)(resolve);
});
}
// src/dom-lib/common.js // src/dom-lib/common.js
var enviroment = { var enviroment = {
@@ -205,11 +210,6 @@ var DDE = (() => {
is_observing = false; is_observing = false;
observer.disconnect(); observer.disconnect();
} }
function requestIdle() {
return new Promise(function(resolve) {
(requestIdleCallback || requestAnimationFrame)(resolve);
});
}
async function collectChildren(element) { async function collectChildren(element) {
if (store.size > 30) if (store.size > 30)
await requestIdle(); await requestIdle();
+1 -1
View File
@@ -1 +1 @@
var DDE=(()=>{var F=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var ft=Object.prototype.hasOwnProperty;var at=(t,e)=>{for(var n in e)F(t,n,{get:e[n],enumerable:!0})},pt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ut(e))!ft.call(t,o)&&o!==n&&F(t,o,{get:()=>e[o],enumerable:!(r=it(e,o))||r.enumerable});return t};var dt=t=>pt(F({},"__esModule",{value:!0}),t);var _t={};at(_t,{assign:()=>R,assignAttribute:()=>H,chainableAppend:()=>et,classListDeclarative:()=>rt,createElement:()=>M,createElementNS:()=>vt,customElementRender:()=>Et,customElementWithDDE:()=>ct,dispatchEvent:()=>mt,el:()=>M,elNS:()=>vt,lifecyclesToEvents:()=>ct,memo:()=>W,on:()=>S,queue:()=>bt,registerReactivity:()=>V,scope:()=>C,simulateSlots:()=>xt});var B=(...t)=>Object.prototype.hasOwnProperty.call(...t);function x(t){return typeof t>"u"}function h(t,e){return t instanceof e}function Z(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function L(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function I(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var f={setDeleteAttr:lt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function lt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),h(t,f.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",E="dde:connected",w="dde:disconnected",G="dde:attributeChanged";var y=f.M?ht():new Proxy({},{get(){return()=>{}}});function ht(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(l(i.addedNodes,!0)){s();continue}v(i.removedNodes,!0)&&s()}},r=new f.M(n(a));return{observe(s){let u=new f.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){p();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){p();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),a())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function p(){e||(e=!0,r.observe(f.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function m(s){t.size>30&&await d();let u=[];if(!h(s,f.N))return u;for(let i of t.keys())i===s||!h(i,f.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let b of s){if(u&&m(b).then(l),!t.has(b))continue;let D=t.get(b);D.length_c&&(b.dispatchEvent(new Event(E)),D.connected=new WeakSet,D.length_c=0,D.length_d||t.delete(b),i=!0)}return i}function v(s,u){let i=!1;for(let b of s)u&&m(b).then(v),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(j(b)),i=!0);return i}function j(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function mt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let p=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(p)}}function S(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}S.defer=t=>setTimeout.bind(null,t,0);var J=t=>g({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=J(e),function(r){return r.addEventListener(E,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(E)),r):(I(e.signal,()=>y.offConnected(r,t))&&y.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=J(e),function(r){return r.addEventListener(w,t,e),r[A]||I(e.signal,()=>y.offDisconnected(r,t))&&y.onDisconnected(r,t),r}};var _=[{get scope(){return f.D.body},host:t=>t?t(f.D.body):f.D.body,prevent:!0}],U=new WeakMap,C={get current(){return _[_.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(U.has(t))return U.get(t);let e=new AbortController;return U.set(t,e),t(S.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[..._]},push(t={}){return _.push(g({},this.current,{prevent:!1},t))},pushRoot(){return _.push(_[0])},pop(){if(_.length!==1)return _.pop()}};var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?g(O,t):(Object.setPrototypeOf(t,O),t)}function N(t){return Z(t,O)&&t!==O?t:O}function K(t,e,n,r){return t[(x(r)?"remove":Line truncated var DDE=(()=>{var j=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var ft=Object.prototype.hasOwnProperty;var at=(t,e)=>{for(var n in e)j(t,n,{get:e[n],enumerable:!0})},pt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of ut(e))!ft.call(t,o)&&o!==n&&j(t,o,{get:()=>e[o],enumerable:!(r=it(e,o))||r.enumerable});return t};var dt=t=>pt(j({},"__esModule",{value:!0}),t);var _t={};at(_t,{assign:()=>R,assignAttribute:()=>k,chainableAppend:()=>et,classListDeclarative:()=>rt,createElement:()=>M,createElementNS:()=>gt,customElementRender:()=>Et,customElementWithDDE:()=>ct,dispatchEvent:()=>mt,el:()=>M,elNS:()=>gt,lifecyclesToEvents:()=>ct,memo:()=>W,on:()=>S,queue:()=>bt,registerReactivity:()=>V,scope:()=>C,simulateSlots:()=>xt});var z=(...t)=>Object.prototype.hasOwnProperty.call(...t);function x(t){return typeof t>"u"}function h(t,e){return t instanceof e}function B(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function T(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function I(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function Z(){return new Promise(function(t){(globalThis.requestIdleCallback||requestAnimationFrame)(t)})}var f={setDeleteAttr:lt,ssr:"",D:globalThis.document,N:globalThis.Node,F:globalThis.DocumentFragment,H:globalThis.HTMLElement,S:globalThis.SVGElement,M:globalThis.MutationObserver,q:t=>t||Promise.resolve()};function lt(t,e,n){if(Reflect.set(t,e,n),!!x(n)){if(Reflect.deleteProperty(t,e),h(t,f.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var A="__dde_lifecyclesToEvents",E="dde:connected",w="dde:disconnected",G="dde:attributeChanged";var y=f.M?ht():new Proxy({},{get(){return()=>{}}});function ht(){let t=new Map,e=!1,n=s=>function(u){for(let i of u)if(i.type==="childList"){if(m(i.addedNodes,!0)){s();continue}l(i.removedNodes,!0)&&s()}},r=new f.M(n(a));return{observe(s){let u=new f.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){p();let i=c(s);i.connected.has(u)||(i.connected.add(u),i.length_c+=1)},offConnected(s,u){if(!t.has(s))return;let i=t.get(s);i.connected.has(u)&&(i.connected.delete(u),i.length_c-=1,o(s,i))},onDisconnected(s,u){p();let i=c(s);i.disconnected.has(u)||(i.disconnected.add(u),i.length_d+=1)},offDisconnected(s,u){if(!t.has(s))return;let i=t.get(s);i.disconnected.delete(u),i.length_d-=1,o(s,i)}};function o(s,u){u.length_c||u.length_d||(t.delete(s),a())}function c(s){if(t.has(s))return t.get(s);let u={connected:new WeakSet,length_c:0,disconnected:new WeakSet,length_d:0};return t.set(s,u),u}function p(){e||(e=!0,r.observe(f.D.body,{childList:!0,subtree:!0}))}function a(){!e||t.size||(e=!1,r.disconnect())}async function d(s){t.size>30&&await Z();let u=[];if(!h(s,f.N))return u;for(let i of t.keys())i===s||!h(i,f.N)||s.contains(i)&&u.push(i);return u}function m(s,u){let i=!1;for(let b of s){if(u&&d(b).then(m),!t.has(b))continue;let D=t.get(b);D.length_c&&(b.dispatchEvent(new Event(E)),D.connected=new WeakSet,D.length_c=0,D.length_d||t.delete(b),i=!0)}return i}function l(s,u){let i=!1;for(let b of s)u&&d(b).then(l),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(v(b)),i=!0);return i}function v(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function mt(t,e,n){return typeof e=="function"&&(n=e,e=null),e||(e={}),function(o,...c){n&&(c.unshift(o),o=typeof n=="function"?n():n);let p=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(p)}}function S(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}S.defer=t=>setTimeout.bind(null,t,0);var J=t=>g({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=J(e),function(r){return r.addEventListener(E,t,e),r[A]?r:r.isConnected?(r.dispatchEvent(new Event(E)),r):(I(e.signal,()=>y.offConnected(r,t))&&y.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=J(e),function(r){return r.addEventListener(w,t,e),r[A]||I(e.signal,()=>y.offDisconnected(r,t))&&y.onDisconnected(r,t),r}};var _=[{get scope(){return f.D.body},host:t=>t?t(f.D.body):f.D.body,prevent:!0}],F=new WeakMap,C={get current(){return _[_.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(F.has(t))return F.get(t);let e=new AbortController;return F.set(t,e),t(S.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[..._]},push(t={}){return _.push(g({},this.current,{prevent:!1},t))},pushRoot(){return _.push(_[0])},pop(){if(_.length!==1)return _.pop()}};var O={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?g(O,t):(Object.setPrototypeOf(t,O),t)}function L(t){return B(t,O)&&t!==O?t:O}function K(t,e,n,r){return t[(x(rLine truncated
+3 -10
View File
@@ -81,11 +81,11 @@ function Todos(){
) )
) )
), ),
S.el(todosS, todos => !todos.length S.el(todosS, ({ length }) => !length
? el() ? el()
: el("footer", { className: "footer" }).append( : el("footer", { className: "footer" }).append(
el("span", { className: "todo-count" }).append( el("span", { className: "todo-count" }).append(
noOfLeft() el("strong", length + " " + (length === 1 ? "item" : "items")),
), ),
memo("filters", ()=> memo("filters", ()=>
el("ul", { className: "filters" }).append( el("ul", { className: "filters" }).append(
@@ -100,7 +100,7 @@ function Todos(){
) )
), ),
), ),
todos.length - todosRemainingS.get() === 0 length - todosRemainingS.get() === 0
? el() ? el()
: memo("delete", () => : memo("delete", () =>
el("button", el("button",
@@ -110,13 +110,6 @@ function Todos(){
) )
) )
); );
function noOfLeft(){
const length = todosRemainingS.get();
return el("strong").append(
length + " ",
length === 1 ? "item left" : "items left"
)
}
} }
/** /**
+9 -1
View File
@@ -16,7 +16,11 @@ import { getLibraryUrl } from "./components/getLibraryUrl.html.js";
/** @param {string} url */ /** @param {string} url */
const fileURL= url=> new URL(url, import.meta.url); const fileURL= url=> new URL(url, import.meta.url);
const references= { const references= {
w_mvv:{ npm: {
title: t`NPM package page for dd<el>`,
href: "https://www.npmjs.com/package/deka-dom-el",
},
w_mvv: {
title: t`Wikipedia: Model–view–viewmodel`, title: t`Wikipedia: Model–view–viewmodel`,
href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel", href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel",
}, },
@@ -106,6 +110,10 @@ export function page({ pkg, info }){
`), `),
el("h4", "npm installation"), el("h4", "npm installation"),
el(code, { content: "npm install deka-dom-el --save", language: "shell", page_id }), el(code, { content: "npm install deka-dom-el --save", language: "shell", page_id }),
el("p").append(T`
…see ${el("a", { textContent: "package page", ...references.npm, target: "_blank" })}.
`),
el("h4", "CDN / Direct Script Usage"), el("h4", "CDN / Direct Script Usage"),
el("p").append(T` el("p").append(T`
Use the interactive selector below to choose your preferred format: Use the interactive selector below to choose your preferred format:
+28 -20
View File
@@ -311,9 +311,9 @@ export function page({ pkg, info }){
el(code, { content: ` el(code, { content: `
// Dynamic class attributes // Dynamic class attributes
el("a", { el("a", {
textContent: "All", textContent,
className: S(()=> pageS.get() === "all" ? "selected" : ""), classList: { selected: S(()=> pageS.get() === textContent.toLowerCase()) },
href: "#" href: \`#\${textContent.toLowerCase()}\`
}) })
// Reactive classList // Reactive classList
@@ -355,18 +355,25 @@ export function page({ pkg, info }){
el("h4", t`Memoizing UI Sections`), el("h4", t`Memoizing UI Sections`),
el(code, { content: ` el(code, { content: `
S.el(todosS, todos => memo(todos.length, length=> length S.el(todosS, ({ length }) => !length
? el("footer", { className: "footer" }).append( ? el()
// Footer content... : el("footer", { className: "footer" }).append(
// …
memo("filters", ()=>
// …
el("a", {
textContent,
classList: { selected: S(()=> pageS.get() === textContent.toLowerCase()) },
href: \`#\${textContent.toLowerCase()}\`
})
// …
) )
: el()
)) ))
`, page_id }), `, page_id }),
el("p").append(T` el("p").append(T`
By memoizing based on the todos length, the entire footer component is only re-rendered We memoize the UI section and uses derived signal for the classList. Re-rendering this part is therefore
when todos are added or removed, not when their properties change. This improves performance unnecessary when the number of todos changes.
by avoiding unnecessary DOM operations.
`), `),
el("div", { className: "tip" }).append( el("div", { className: "tip" }).append(
@@ -389,8 +396,10 @@ export function page({ pkg, info }){
`), `),
el(code, { content: ` el(code, { content: `
// Event handlers in the main component // Event handlers in the main component
const onDelete = on("todo:delete", ev => S.action(todosS, "delete", ev.detail)); const onDelete = on("todo:delete", ev =>
const onEdit = on("todo:edit", ev => S.action(todosS, "edit", ev.detail)); S.action(todosS, "delete", /** @type {{ detail: Todo["id"] }} */(ev).detail));
const onEdit = on("todo:edit", ev =>
S.action(todosS, "edit", /** @type {{ detail: Partial<Todo> & { id: Todo["id"] } }} */(ev).detail));
`, page_id }), `, page_id }),
el("h4", t`2. The TodoItem Component with Scopes and Local State`), el("h4", t`2. The TodoItem Component with Scopes and Local State`),
@@ -522,25 +531,24 @@ export function page({ pkg, info }){
el("h4", t`Conditional Todo List`), el("h4", t`Conditional Todo List`),
el(code, { content: ` el(code, { content: `
S.el(todosS, todos => todos.length S.el(todosS, todos => todos.length
? el("main", { className: "main" }).append( ? el()
: el("main", { className: "main" }).append(
// Main content with toggle all and todo list // Main content with toggle all and todo list
) )
: el()
) )
`, page_id }), `, page_id }),
el("h4", t`Conditional Edit Form`), el("h4", t`Conditional Edit Form`),
el(code, { content: ` el(code, { content: `
S.el(isEditing, editing => editing S.el(isEditing, editing => !editing
? el("form", null, onSubmitEdit).append( ? el()
: el("form", null, onSubmitEdit).append(
el("input", { el("input", {
className: "edit", className: "edit",
name: "edit", name: formEdit,
value: title, value: title,
"data-id": id
}, onBlurEdit, onKeyDown, addFocus) }, onBlurEdit, onKeyDown, addFocus)
) )
: el()
) )
`, page_id }), `, page_id }),
@@ -630,7 +638,7 @@ export function page({ pkg, info }){
${el("strong", "Declarative Class Management:")} Using the classList property for cleaner class handling ${el("strong", "Declarative Class Management:")} Using the classList property for cleaner class handling
`), `),
el("li").append(T` el("li").append(T`
${el("strong", "Focus Management:")} Reliable input focus with setTimeout ${el("strong", "Focus Management:")} Reliable input focus with requestAnimationFrame
`), `),
el("li").append(T` el("li").append(T`
${el("strong", "Persistent Storage:")} Automatically saving application state with signal listeners ${el("strong", "Persistent Storage:")} Automatically saving application state with signal listeners
+2 -3
View File
@@ -1,9 +1,8 @@
import { T, t } from "./utils/index.js"; import { T, t } from "./utils/index.js";
export const info= { export const info= {
title: t`Ireland Components`, title: t`Ireland Components`,
fullTitle: t`Interactive Demo Components with Server-Side Pre-Rendering`, fullTitle: t`Server-Side Pre-Rendering and Client-Side Rehydration`,
description: t`Creating live, interactive component examples in documentation with server-side description: t`Using Ireland components for server-side pre-rendering and client-side rehydration`,
rendering and client-side hydration.`,
}; };
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "deka-dom-el", "name": "deka-dom-el",
"version": "0.9.3-alpha", "version": "0.9.4-alpha",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "deka-dom-el", "name": "deka-dom-el",
"version": "0.9.3-alpha", "version": "0.9.4-alpha",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@size-limit/preset-small-lib": "~11.2", "@size-limit/preset-small-lib": "~11.2",
+6 -7
View File
@@ -1,10 +1,10 @@
{ {
"name": "deka-dom-el", "name": "deka-dom-el",
"version": "0.9.3-alpha", "version": "0.9.4-alpha",
"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.", "description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
"author": "Jan Andrle <andrle.jan@centrum.cz>", "author": "Jan Andrle <andrle.jan@centrum.cz>",
"license": "MIT", "license": "MIT",
"homepage": "https://github.com/jaandrle/deka-dom-el", "homepage": "https://jaandrle.github.io/deka-dom-el/",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+ssh://git@github.com/jaandrle/deka-dom-el.git" "url": "git+ssh://git@github.com/jaandrle/deka-dom-el.git"
@@ -52,7 +52,6 @@
"maxdepth": 3, "maxdepth": 3,
"maxcomplexity": 14, "maxcomplexity": 14,
"globals": { "globals": {
"requestIdleCallback": false,
"AbortController": false, "AbortController": false,
"AbortSignal": false, "AbortSignal": false,
"FinalizationRegistry": false "FinalizationRegistry": false
@@ -61,25 +60,25 @@
"size-limit": [ "size-limit": [
{ {
"path": "./index.js", "path": "./index.js",
"limit": "10.5 kB", "limit": "10 kB",
"gzip": false, "gzip": false,
"brotli": false "brotli": false
}, },
{ {
"path": "./signals.js", "path": "./signals.js",
"limit": "12.5 kB", "limit": "12.2 kB",
"gzip": false, "gzip": false,
"brotli": false "brotli": false
}, },
{ {
"path": "./index-with-signals.js", "path": "./index-with-signals.js",
"limit": "15 kB", "limit": "14.75 kB",
"gzip": false, "gzip": false,
"brotli": false "brotli": false
}, },
{ {
"path": "./index-with-signals.js", "path": "./index-with-signals.js",
"limit": "5.5 kB" "limit": "5.25 kB"
} }
], ],
"modifyEsbuildConfig": { "modifyEsbuildConfig": {
+1 -10
View File
@@ -1,5 +1,5 @@
import { enviroment as env, evc, evd } from './common.js'; import { enviroment as env, evc, evd } from './common.js';
import { isInstance } from "../helpers.js"; import { isInstance, requestIdle } from "../helpers.js";
/** /**
* Connection changes observer for tracking element connection/disconnection * Connection changes observer for tracking element connection/disconnection
@@ -149,15 +149,6 @@ function connectionsChangesObserverConstructor(){
observer.disconnect(); observer.disconnect();
} }
//TODO: remount support?
/**
* Schedule a task during browser idle time
* @returns {Promise<void>} Promise that resolves when browser is idle
*/
function requestIdle(){ return new Promise(function(resolve){
(requestIdleCallback || requestAnimationFrame)(resolve);
}); }
/** /**
* Collects child elements from the store that are contained by the given element * Collects child elements from the store that are contained by the given element
* @param {Element} element - Parent element * @param {Element} element - Parent element
+9
View File
@@ -68,3 +68,12 @@ export function observedAttributes(instance, observedAttribute){
* @returns {string} The camelCase string * @returns {string} The camelCase string
*/ */
function kebabToCamel(name){ return name.replace(/-./g, x=> x[1].toUpperCase()); } function kebabToCamel(name){ return name.replace(/-./g, x=> x[1].toUpperCase()); }
/**
* Schedule a task during browser idle time
* @returns {Promise<void>} Promise that resolves when browser is idle
*/
export function requestIdle(){ return new Promise(function(resolve){
(globalThis.requestIdleCallback || requestAnimationFrame)(resolve);
});
}
+2 -2
View File
@@ -1,6 +1,6 @@
import { queueSignalWrite, mark } from "./helpers.js"; import { queueSignalWrite, mark } from "./helpers.js";
export { mark }; export { mark };
import { hasOwn, oCreate, oAssign } from "../helpers.js"; import { hasOwn, oCreate, oAssign, requestIdle } from "../helpers.js";
const Signal = oCreate(null, { const Signal = oCreate(null, {
get: { value(){ return read(this); } }, get: { value(){ return read(this); } },
@@ -214,7 +214,7 @@ signal.el= function(s, map){
*/ */
function requestCleanUpReactives(host){ function requestCleanUpReactives(host){
if(!host || !host[key_reactive]) return; if(!host || !host[key_reactive]) return;
(requestIdleCallback || setTimeout)(function(){ requestIdle().then(function(){
host[key_reactive]= host[key_reactive] host[key_reactive]= host[key_reactive]
.filter(([ s, el ])=> el.isConnected ? true : (removeSignalListener(...s), false)); .filter(([ s, el ])=> el.isConnected ? true : (removeSignalListener(...s), false));
}); });