From 36fab5276d1597354b6abd668177646d7956c783 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Fri, 14 Mar 2025 13:15:31 +0100 Subject: [PATCH] :zap: reorganize files --- dist/esm-with-signals.d.ts | 21 ++- dist/esm-with-signals.js | 180 +++++++++++----------- dist/esm-with-signals.min.d.ts | 21 ++- dist/esm-with-signals.min.js | 8 +- dist/esm.d.ts | 21 ++- dist/esm.js | 180 +++++++++++----------- dist/esm.min.d.ts | 21 ++- dist/esm.min.js | 2 +- dist/iife-with-signals.d.ts | 21 ++- dist/iife-with-signals.js | 180 +++++++++++----------- dist/iife-with-signals.min.d.ts | 21 ++- dist/iife-with-signals.min.js | 8 +- dist/iife.d.ts | 21 ++- dist/iife.js | 180 +++++++++++----------- dist/iife.min.d.ts | 21 ++- dist/iife.min.js | 2 +- index.js | 6 +- jsdom.js | 2 +- src/{dom-common.js => dom-lib/common.js} | 2 +- src/{ => dom-lib}/customElement.js | 45 +++++- src/{dom.js => dom-lib/el.js} | 185 +---------------------- src/{ => dom-lib}/events-observer.js | 4 +- src/{ => dom-lib}/events.js | 4 +- src/dom-lib/helpers.js | 57 +++++++ src/dom-lib/index.js | 4 + src/dom-lib/scopes.js | 84 ++++++++++ src/signals-lib/signals-lib.js | 8 +- 27 files changed, 712 insertions(+), 597 deletions(-) rename src/{dom-common.js => dom-lib/common.js} (97%) rename src/{ => dom-lib}/customElement.js (61%) rename src/{dom.js => dom-lib/el.js} (62%) rename src/{ => dom-lib}/events-observer.js (98%) rename src/{ => dom-lib}/events.js (96%) create mode 100644 src/dom-lib/helpers.js create mode 100644 src/dom-lib/index.js create mode 100644 src/dom-lib/scopes.js diff --git a/dist/esm-with-signals.d.ts b/dist/esm-with-signals.d.ts index c22a98a..15c7398 100644 --- a/dist/esm-with-signals.d.ts +++ b/dist/esm-with-signals.d.ts @@ -179,11 +179,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index d223107..a1dda63 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -55,38 +55,7 @@ var Defined = class extends Error { } }; -// src/signals-lib/common.js -var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } -}; -function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; -} -function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; -} - -// src/dom-common.js +// src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -112,7 +81,7 @@ var evc = "dde:connected"; var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; -// src/events-observer.js +// src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -276,7 +245,7 @@ function connectionsChangesObserverConstructor() { } } -// src/events.js +// src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -321,10 +290,7 @@ on.disconnected = function(listener, options) { }; }; -// src/dom.js -function queue(promise) { - return enviroment.q(promise); -} +// src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -399,6 +365,61 @@ var scope = { return scopes.pop(); } }; +on.host = (fn, host = scope.host) => (el) => host(() => fn(el)); + +// src/signals-lib/common.js +var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } +}; +function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; +} +function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; +} + +// src/dom-lib/helpers.js +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); +} +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); +} +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); +} +function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); +} + +// src/dom-lib/el.js +function queue(promise) { + return enviroment.q(promise); +} function append(...els) { this.appendOriginal(...els); return this; @@ -468,38 +489,6 @@ function createElementNS(ns) { return el; }; } -function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; -} var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -562,11 +551,6 @@ function classListDeclarative(element, toggle) { ); return element; } -function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); -} function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -590,19 +574,40 @@ function forEachEntries(s, target, element, obj, cb) { cb(key, val); }); } -function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); -} -function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); -} -function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); -} -// src/customElement.js +// src/dom-lib/customElement.js +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; +} function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ @@ -1004,7 +1009,6 @@ export { dispatchEvent, createElement as el, createElementNS as elNS, - elementAttribute, isSignal, lifecyclesToEvents, memo, diff --git a/dist/esm-with-signals.min.d.ts b/dist/esm-with-signals.min.d.ts index c22a98a..15c7398 100644 --- a/dist/esm-with-signals.min.d.ts +++ b/dist/esm-with-signals.min.d.ts @@ -179,11 +179,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/esm-with-signals.min.js b/dist/esm-with-signals.min.js index b44560e..91e8ac8 100644 --- a/dist/esm-with-signals.min.js +++ b/dist/esm-with-signals.min.js @@ -1,4 +1,4 @@ -var W=(...t)=>Object.prototype.hasOwnProperty.call(...t);function C(t){return typeof t>"u"}function nt(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){return t instanceof e}function rt(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function v(t=null,e={}){return Object.create(t,e)}function x(...t){return Object.assign(...t)}function Z(t,e){if(!t||!S(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function ot(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Et(o)]=e(t,o),r},{})}function Et(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var P=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function G(t,e=!0){return e?x(j,t):(Object.setPrototypeOf(t,j),t)}function F(t){return rt(t,j)&&t!==j?t:j}var l={setDeleteAttr:_t,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 _t(t,e,n){if(Reflect.set(t,e,n),!!C(n)){if(Reflect.deleteProperty(t,e),S(t,l.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var k="__dde_lifecyclesToEvents",y="dde:connected",D="dde:disconnected",I="dde:attributeChanged";var R=l.M?St():new Proxy({},{get(){return()=>{}}});function St(){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}O(f.removedNodes,!0)&&u()}},r=new l.M(n(i));return{observe(u){let a=new l.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();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){s();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),i())}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 s(){e||(e=!0,r.observe(l.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function g(u){t.size>30&&await d();let a=[];if(!S(u,l.N))return a;for(let f of t.keys())f===u||!S(f,l.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&g(_).then(h),!t.has(_))continue;let M=t.get(_);M.length_c&&(_.dispatchEvent(new Event(y)),M.connected=new WeakSet,M.length_c=0,M.length_d||t.delete(_),f=!0)}return f}function O(u,a){let f=!1;for(let _ of u)a&&g(_).then(O),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(xt(_)),f=!0);return f}function xt(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(D)),t.delete(u))}}}function Zt(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 s=c.length?new CustomEvent(t,x({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var ct=t=>x({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=ct(e),function(r){return r.addEventListener(y,t,e),r[k]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(Z(e.signal,()=>R.offConnected(r,t))&&R.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=ct(e),function(r){return r.addEventListener(D,t,e),r[k]||Z(e.signal,()=>R.offDisconnected(r,t))&&R.onDisconnected(r,t),r}};function te(t){return l.q(t)}var A=[{get scope(){return l.D.body},host:t=>t?t(l.D.body):l.D.body,prevent:!0}],V=new WeakMap,E={get current(){return A[A.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(V.has(t))return V.get(t);let e=new AbortController;return V.set(t,e),t(w.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...A]},push(t={}){return A.push(x({},this.current,{prevent:!1},t))},pushRoot(){return A.push(A[0])},pop(){if(A.length!==1)return A.pop()}};function st(...t){return this.appendOriginal(...t),this}function wt(t){return t.append===st||(t.appendOriginal=t.append,t.append=st),t}var U;function q(t,e,...n){let r=F(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(O=>O(s)),void 0):s;E.push({scope:t,host:i}),c=t(e||void 0);let d=S(c,l.F);if(c.nodeName==="#comment")break;let g=q.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(g),d&&(s=g);break}case t==="#text":c=$.call(this,l.D.createTextNode(""),e);break;case(t==="<>"||!t):c=$.call(this,l.D.createDocumentFragment(),e);break;case!!U:c=$.call(this,l.D.createElementNS(U,t),e);break;case!c:c=$.call(this,l.D.createElement(t),e)}return wt(c),s||(s=c),n.forEach(i=>i(s)),o&&E.pop(),o=2,c}q.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=l.D.createComment(``);return e&&(r.end=l.D.createComment("")),r};function ee(t){let e=this;return function(...r){U=t;let o=q.call(e,...r);return U=void 0,o}}function ne(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let d of i){let g=(d.slot||"")+n;try{At(d,"remove","slot")}catch{}let h=o[g];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(O=>O.remove()),h.name=r+g),h.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var z=new WeakMap,{setDeleteAttr:it}=l;function $(t,...e){if(!e.length)return t;z.set(t,at(t,this));for(let[n,r]of Object.entries(x({},...e)))ft.call(this,t,n,r);return z.delete(t),t}function ft(t,e,n){let{setRemoveAttr:r,s:o}=at(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,d)=>ft.call(c,t,i,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return ut(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 it(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return K(o,e,t,n,ut.bind(null,t[e]));case"ariaset":return K(o,e,t,n,(i,d)=>r("aria-"+i,d));case"classList":return yt.call(c,t,n)}return Ot(t,e)?it(t,e,n):r(e,n)}function at(t,e){if(z.has(t))return z.get(t);let r=(S(t,l.S)?Dt:Ct).bind(null,t,"Attribute"),o=F(e);return{setRemoveAttr:r,s:o}}function yt(t,e){let n=F(this);return K(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function At(t,e,n,r){return S(t,l.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Ot(t,e){if(!(e in t))return!1;let n=dt(t,e);return!C(n.set)}function dt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||dt(t,e)}function K(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,d]){i&&(i=new c(i),i.target=e,d=t.processReactiveAttribute(n,i,d,o),o(i,d))})}function Ct(t,e,n,r){return t[(C(r)?"remove":"set")+e](n,r)}function Dt(t,e,n,r,o=null){return t[(C(r)?"remove":"set")+e+"NS"](o,n,r)}function ut(t,e,n){if(Reflect.set(t,e,n),!!C(n))return Reflect.deleteProperty(t,e)}function ie(t,e,n={}){let r=t.host||t;E.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[k];o||Rt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(D,R.observe(t),{once:!0}),E.pop(),t.append(c)}function Rt(t){return Q(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),Q(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(D)))}),Q(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(I,{detail:[o,c]})),e.apply(n,r)}),t.prototype[k]=!0,t}function Q(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var lt="__dde_memo",H=[];function T(t,e){if(!H.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=H;return o(n,W(r,n)?r[n]:e(t))}T.isScope=function(t){return t[lt]};T.scope=function(e,{signal:n,onlyLast:r}={}){let o=v();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:v();H.unshift({cache:o,after(g,h){return i[g]=h}});let d=e.apply(this,s);return H.shift(),o=i,d}return c[lt]=!0,c.clear=()=>o=v(),n&&n.addEventListener("abort",c.clear),c};var p="__dde_signal",X=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var tt=v(null,{get:{value(){return ht(this)}},set:{value(...t){return vt(this,...t)}},toJSON:{value(){return ht(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),Lt=v(tt,{set:{value(){}}});function J(t){return t&&t[p]}var B=[],b=new WeakMap;function m(t,e){if(typeof t!="function")return pt(!1,t,e);if(J(t))return t;let n=pt(!0);function r(){let[o,...c]=b.get(r);if(b.set(r,new Set([o])),B.push(r),vt(n,t()),B.pop(),!c.length)return;let s=b.get(r);for(let i of c)s.has(i)||N(i,r)}return b.set(n[p],r),b.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!W(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;X(t)};m.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));et(e,n),o&&o.addEventListener("abort",()=>N(e,n))}};m.symbols={onclear:Symbol.for("Signal.onclear")};m.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!b.has(o))return;let c=b.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),b.delete(o))})}};var L="__dde_reactive";m.el=function(t,e){e=T.isScope(e)?e:T.scope(e,{onlyLast:!0});let n=q.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=l.D.createDocumentFragment();o.append(n,r);let{current:c}=E,s=i=>{if(!n.parentNode||!r.parentNode)return N(t,s);E.push(c);let d=e(i);E.pop(),Array.isArray(d)||(d=[d]);let g=document.createComment("");d.push(g),n.after(...d);let h;for(;(h=g.nextSibling)&&h!==r;)h.remove();g.remove(),n.isConnected&&Nt(c.host())};return et(t,s),mt(t,s,n,e),s(t.get()),c.host(w.disconnected(()=>e.clear())),o};function Nt(t){!t||!t[L]||(requestIdleCallback||setTimeout)(function(){t[L]=t[L].filter(([e,n])=>n.isConnected?!0:(N(...e),!1))})}var kt={_set(t){this.value=t}};function Tt(t){return function(e,n){let r=v(tt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=bt(r,e.getAttribute(n),kt);return t[n]=o,o}}var Y="__dde_attributes";m.observedAttributes=function(t){let e=t[Y]={},n=ot(t,Tt(e));return w(I,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[Y][c];if(i)return m.action(i,"_set",s)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */m.clear(...Object.values(this[Y]))})(t),n};var gt={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 et(n,o),mt(n,o,t,e),n.get()}};function mt(t,e,...n){let{current:r}=E;r.host(function(o){if(o[L])return o[L].push([[t,e],...n]);o[L]=[],!r.prevent&&w.disconnected(()=>o[L].forEach(([[c,s]])=>N(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Mt=new FinalizationRegistry(function(t){m.clear({[p]:t})});function pt(t,e,n){let r=v(t?Lt:tt),o=bt(r,e,n,t);return Mt.register(o,o[p]),o}var Pt=x(v(),{stopPropagation(){this.skip=!0}});function bt(t,e,n,r=!1){let o=[];nt(n)!=="[object Object]"&&(n={});let{onclear:c}=m.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=E;return Reflect.defineProperty(t,p,{value:x(v(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return B[B.length-1]}function ht(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=jt();return r&&n.add(r),b.has(r)&&b.get(r).add(t),e}function vt(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,X(t),e}function et(t,e){if(t[p])return t[p].listeners.add(e)}function N(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;m.clear(t);let s=b.get(r);if(!s)return c;let i=b.get(s);if(!i)return c;for(let d of i)N(d,s,!0);return c}G(gt);export{m as S,$ as assign,ft as assignAttribute,wt as chainableAppend,yt as classListDeclarative,q as createElement,ee as createElementNS,ie as customElementRender,Rt as customElementWithDDE,Zt as dispatchEvent,q as el,ee as elNS,At as elementAttribute,J as isSignal,Rt as lifecyclesToEvents,T as memo,w as on,te as queue,G as registerReactivity,E as scope,m as signal,ne as simulateSlots}; +var W=(...t)=>Object.prototype.hasOwnProperty.call(...t);function y(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 E(t,e){return t instanceof e}function ot(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function _(t=null,e={}){return Object.create(t,e)}function b(...t){return Object.assign(...t)}function Z(t,e){if(!t||!E(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[wt(o)]=e(t,o),r},{})}function wt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var P=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var p={setDeleteAttr:yt,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 yt(t,e,n){if(Reflect.set(t,e,n),!!y(n)){if(Reflect.deleteProperty(t,e),E(t,p.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var k="__dde_lifecyclesToEvents",A="dde:connected",R="dde:disconnected",F="dde:attributeChanged";var D=p.M?At():new Proxy({},{get(){return()=>{}}});function At(){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}C(f.removedNodes,!0)&&u()}},r=new p.M(n(i));return{observe(u){let a=new p.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();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){s();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),i())}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 s(){e||(e=!0,r.observe(p.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function m(u){t.size>30&&await d();let a=[];if(!E(u,p.N))return a;for(let f of t.keys())f===u||!E(f,p.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let S of u){if(a&&m(S).then(h),!t.has(S))continue;let M=t.get(S);M.length_c&&(S.dispatchEvent(new Event(A)),M.connected=new WeakSet,M.length_c=0,M.length_d||t.delete(S),f=!0)}return f}function C(u,a){let f=!1;for(let S of u)a&&m(S).then(C),!(!t.has(S)||!t.get(S).length_d)&&((globalThis.queueMicrotask||setTimeout)(St(S)),f=!0);return f}function St(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function Jt(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 s=c.length?new CustomEvent(t,b({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var st=t=>b({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=st(e),function(r){return r.addEventListener(A,t,e),r[k]?r:r.isConnected?(r.dispatchEvent(new Event(A)),r):(Z(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=st(e),function(r){return r.addEventListener(R,t,e),r[k]||Z(e.signal,()=>D.offDisconnected(r,t))&&D.onDisconnected(r,t),r}};var O=[{get scope(){return p.D.body},host:t=>t?t(p.D.body):p.D.body,prevent:!0}],G=new WeakMap,g={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(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(b({},this.current,{prevent:!1},t))},pushRoot(){return O.push(O[0])},pop(){if(O.length!==1)return O.pop()}};w.host=(t,e=g.host)=>n=>e(()=>t(n));var j={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function V(t,e=!0){return e?b(j,t):(Object.setPrototypeOf(t,j),t)}function I(t){return ot(t,j)&&t!==j?t:j}function it(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,r)}function ut(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,r)}function K(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function ft(t,e,n,r){return E(t,p.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function se(t){return p.q(t)}function at(...t){return this.appendOriginal(...t),this}function Ot(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,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(C=>C(s)),void 0):s;g.push({scope:t,host:i}),c=t(e||void 0);let d=E(c,p.F);if(c.nodeName==="#comment")break;let m=q.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(m),d&&(s=m);break}case t==="#text":c=U.call(this,p.D.createTextNode(""),e);break;case(t==="<>"||!t):c=U.call(this,p.D.createDocumentFragment(),e);break;case!!$:c=U.call(this,p.D.createElementNS($,t),e);break;case!c:c=U.call(this,p.D.createElement(t),e)}return Ot(c),s||(s=c),n.forEach(i=>i(s)),o&&g.pop(),o=2,c}q.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=p.D.createComment(``);return e&&(r.end=p.D.createComment("")),r};function ue(t){let e=this;return function(...r){$=t;let o=q.call(e,...r);return $=void 0,o}}var z=new WeakMap,{setDeleteAttr:pt}=p;function U(t,...e){if(!e.length)return t;z.set(t,lt(t,this));for(let[n,r]of Object.entries(b({},...e)))dt.call(this,t,n,r);return z.delete(t),t}function dt(t,e,n){let{setRemoveAttr:r,s:o}=lt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,d)=>dt.call(c,t,i,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return K(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 pt(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Q(o,e,t,n,K.bind(null,t[e]));case"ariaset":return Q(o,e,t,n,(i,d)=>r("aria-"+i,d));case"classList":return Ct.call(c,t,n)}return Rt(t,e)?pt(t,e,n):r(e,n)}function lt(t,e){if(z.has(t))return z.get(t);let r=(E(t,p.S)?ut:it).bind(null,t,"Attribute"),o=I(e);return{setRemoveAttr:r,s:o}}function Ct(t,e){let n=I(this);return Q(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Rt(t,e){if(!(e in t))return!1;let n=ht(t,e);return!y(n.set)}function ht(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||ht(t,e)}function Q(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,d]){i&&(i=new c(i),i.target=e,d=t.processReactiveAttribute(n,i,d,o),o(i,d))})}function ge(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let d of i){let m=(d.slot||"")+n;try{ft(d,"remove","slot")}catch{}let h=o[m];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(C=>C.remove()),h.name=r+m),h.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function ve(t,e,n={}){let r=t.host||t;g.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[k];o||Dt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(A)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,D.observe(t),{once:!0}),g.pop(),t.append(c)}function Dt(t){return X(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(A))}),X(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),X(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(F,{detail:[o,c]})),e.apply(n,r)}),t.prototype[k]=!0,t}function X(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var mt="__dde_memo",H=[];function T(t,e){if(!H.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=H;return o(n,W(r,n)?r[n]:e(t))}T.isScope=function(t){return t[mt]};T.scope=function(e,{signal:n,onlyLast:r}={}){let o=_();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:_();H.unshift({cache:o,after(m,h){return i[m]=h}});let d=e.apply(this,s);return H.shift(),o=i,d}return c[mt]=!0,c.clear=()=>o=_(),n&&n.addEventListener("abort",c.clear),c};var l="__dde_signal",Y=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[l];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var et=_(null,{get:{value(){return vt(this)}},set:{value(...t){return _t(this,...t)}},toJSON:{value(){return vt(this)}},valueOf:{value(){return this[l]&&this[l].value}}}),Lt=_(et,{set:{value(){}}});function J(t){return t&&t[l]}var B=[],x=new WeakMap;function v(t,e){if(typeof t!="function")return gt(!1,t,e);if(J(t))return t;let n=gt(!0);function r(){let[o,...c]=x.get(r);if(x.set(r,new Set([o])),B.push(r),_t(n,t()),B.pop(),!c.length)return;let s=x.get(r);for(let i of c)s.has(i)||N(i,r)}return x.set(n[l],r),x.set(r,new Set([n])),r(),n}v.action=function(t,e,...n){let r=t[l];if(!r)return;let{actions:o}=r;if(!o||!W(o,e))throw new Error(`Action "${e}" not defined. See ${l}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;Y(t)};v.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));nt(e,n),o&&o.addEventListener("abort",()=>N(e,n))}};v.symbols={onclear:Symbol.for("Signal.onclear")};v.clear=function(...t){for(let n of t){let r=n[l];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[l])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!x.has(o))return;let c=x.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),x.delete(o))})}};var L="__dde_reactive";v.el=function(t,e){e=T.isScope(e)?e:T.scope(e,{onlyLast:!0});let n=q.mark({type:"reactive",source:new P().compact},!0),r=n.end,o=p.D.createDocumentFragment();o.append(n,r);let{current:c}=g,s=i=>{if(!n.parentNode||!r.parentNode)return N(t,s);g.push(c);let d=e(i);g.pop(),Array.isArray(d)||(d=[d]);let m=document.createComment("");d.push(m),n.after(...d);let h;for(;(h=m.nextSibling)&&h!==r;)h.remove();m.remove(),n.isConnected&&Nt(c.host())};return nt(t,s),xt(t,s,n,e),s(t.get()),c.host(w.disconnected(()=>e.clear())),o};function Nt(t){!t||!t[L]||(requestIdleCallback||setTimeout)(function(){t[L]=t[L].filter(([e,n])=>n.isConnected?!0:(N(...e),!1))})}var kt={_set(t){this.value=t}};function Tt(t){return function(e,n){let r=_(et,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=Et(r,e.getAttribute(n),kt);return t[n]=o,o}}var tt="__dde_attributes";v.observedAttributes=function(t){let e=t[tt]={},n=ct(t,Tt(e));return w(F,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). + Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[tt][c];if(i)return v.action(i,"_set",s)})(t),w.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 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}=g;r.host(function(o){if(o[L])return o[L].push([[t,e],...n]);o[L]=[],!r.prevent&&w.disconnected(()=>o[L].forEach(([[c,s]])=>N(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Mt=new FinalizationRegistry(function(t){v.clear({[l]:t})});function gt(t,e,n){let r=_(t?Lt:et),o=Et(r,e,n,t);return Mt.register(o,o[l]),o}var Pt=b(_(),{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:s}=g;return Reflect.defineProperty(t,l,{value:b(_(Pt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new P().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function jt(){return B[B.length-1]}function vt(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=jt();return r&&n.add(r),x.has(r)&&x.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),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;v.clear(t);let s=x.get(r);if(!s)return c;let i=x.get(s);if(!i)return c;for(let d of i)N(d,s,!0);return c}V(bt);export{v as S,U as assign,dt as assignAttribute,Ot as chainableAppend,Ct as classListDeclarative,q as createElement,ue as createElementNS,ve as customElementRender,Dt as customElementWithDDE,Jt as dispatchEvent,q as el,ue as elNS,J as isSignal,Dt as lifecyclesToEvents,T as memo,w as on,se as queue,V as registerReactivity,g as scope,v as signal,ge as simulateSlots}; diff --git a/dist/esm.d.ts b/dist/esm.d.ts index 556e227..4d57e77 100644 --- a/dist/esm.d.ts +++ b/dist/esm.d.ts @@ -178,11 +178,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/esm.js b/dist/esm.js index fd33681..871a2ee 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -26,38 +26,7 @@ function onAbort(signal, listener) { }; } -// src/signals-lib/common.js -var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } -}; -function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; -} -function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; -} - -// src/dom-common.js +// src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -83,7 +52,7 @@ var evc = "dde:connected"; var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; -// src/events-observer.js +// src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -247,7 +216,7 @@ function connectionsChangesObserverConstructor() { } } -// src/events.js +// src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -292,10 +261,7 @@ on.disconnected = function(listener, options) { }; }; -// src/dom.js -function queue(promise) { - return enviroment.q(promise); -} +// src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -370,6 +336,61 @@ var scope = { return scopes.pop(); } }; +on.host = (fn, host = scope.host) => (el) => host(() => fn(el)); + +// src/signals-lib/common.js +var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } +}; +function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; +} +function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; +} + +// src/dom-lib/helpers.js +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); +} +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); +} +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); +} +function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); +} + +// src/dom-lib/el.js +function queue(promise) { + return enviroment.q(promise); +} function append(...els) { this.appendOriginal(...els); return this; @@ -439,38 +460,6 @@ function createElementNS(ns) { return el; }; } -function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; -} var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -533,11 +522,6 @@ function classListDeclarative(element, toggle) { ); return element; } -function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); -} function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -561,19 +545,40 @@ function forEachEntries(s, target, element, obj, cb) { cb(key, val); }); } -function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); -} -function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); -} -function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); -} -// src/customElement.js +// src/dom-lib/customElement.js +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; +} function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ @@ -662,7 +667,6 @@ export { dispatchEvent, createElement as el, createElementNS as elNS, - elementAttribute, lifecyclesToEvents, memo, on, diff --git a/dist/esm.min.d.ts b/dist/esm.min.d.ts index 556e227..4d57e77 100644 --- a/dist/esm.min.d.ts +++ b/dist/esm.min.d.ts @@ -178,11 +178,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/esm.min.js b/dist/esm.min.js index 8ae4fd8..97a6c0c 100644 --- a/dist/esm.min.js +++ b/dist/esm.min.js @@ -1 +1 @@ -var $=(...t)=>Object.prototype.hasOwnProperty.call(...t);function _(t){return typeof t>"u"}function b(t,e){return t instanceof e}function U(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function D(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function j(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var A={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function Y(t,e=!0){return e?g(A,t):(Object.setPrototypeOf(t,A),t)}function L(t){return U(t,A)&&t!==A?t:A}var a={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),!!_(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",v="dde:connected",w="dde:disconnected",H="dde:attributeChanged";var O=a.M?et():new Proxy({},{get(){return()=>{}}});function et(){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}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();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){d();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),f())}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 d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function h(s){t.size>30&&await p();let u=[];if(!b(s,a.N))return u;for(let i of t.keys())i===s||!b(i,a.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let m of s){if(u&&h(m).then(l),!t.has(m))continue;let y=t.get(m);y.length_c&&(m.dispatchEvent(new Event(v)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(m),i=!0)}return i}function E(s,u){let i=!1;for(let m of s)u&&h(m).then(E),!(!t.has(m)||!t.get(m).length_d)&&((globalThis.queueMicrotask||setTimeout)(X(m)),i=!0);return i}function X(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function xt(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 d=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function N(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var z=t=>g({},typeof t=="object"?t:null,{once:!0});N.connected=function(t,e){return e=z(e),function(r){return r.addEventListener(v,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(v)),r):(j(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};N.disconnected=function(t,e){return e=z(e),function(r){return r.addEventListener(w,t,e),r[C]||j(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};function At(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],q=new WeakMap,S={get current(){return x[x.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(N.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(g({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function B(...t){return this.appendOriginal(...t),this}function nt(t){return t.append===B||(t.appendOriginal=t.append,t.append=B),t}var T;function k(t,e,...n){let r=L(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;S.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let h=k.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(h),p&&(d=h);break}case t==="#text":c=R.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=R.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=R.call(this,a.D.createElementNS(T,t),e);break;case!c:c=R.call(this,a.D.createElement(t),e)}return nt(c),d||(d=c),n.forEach(f=>f(d)),o&&S.pop(),o=2,c}k.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function St(t){let e=this;return function(...r){T=t;let o=k.call(e,...r);return T=void 0,o}}function Dt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let h=(p.slot||"")+n;try{ot(p,"remove","slot")}catch{}let l=o[h];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+h),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var P=new WeakMap,{setDeleteAttr:Z}=a;function R(t,...e){if(!e.length)return t;P.set(t,V(t,this));for(let[n,r]of Object.entries(g({},...e)))J.call(this,t,n,r);return P.delete(t),t}function J(t,e,n){let{setRemoveAttr:r,s:o}=V(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>J.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return G(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 Z(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return W(o,e,t,n,G.bind(null,t[e]));case"ariaset":return W(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return rt.call(c,t,n)}return ct(t,e)?Z(t,e,n):r(e,n)}function V(t,e){if(P.has(t))return P.get(t);let r=(b(t,a.S)?it:st).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function rt(t,e){let n=L(this);return W(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function ot(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function ct(t,e){if(!(e in t))return!1;let n=K(t,e);return!_(n.set)}function K(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||K(t,e)}function W(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function st(t,e,n,r){return t[(_(r)?"remove":"set")+e](n,r)}function it(t,e,n,r,o=null){return t[(_(r)?"remove":"set")+e+"NS"](o,n,r)}function G(t,e,n){if(Reflect.set(t,e,n),!!_(n))return Reflect.deleteProperty(t,e)}function Pt(t,e,n={}){let r=t.host||t;S.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[C];o||ut(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(v)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(w,O.observe(t),{once:!0}),S.pop(),t.append(c)}function ut(t){return F(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(v))}),F(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(w)))}),F(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(H,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function F(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var Q="__dde_memo",M=[];function I(t,e){if(!M.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=M;return o(n,$(r,n)?r[n]:e(t))}I.isScope=function(t){return t[Q]};I.scope=function(e,{signal:n,onlyLast:r}={}){let o=D();function c(...d){if(n&&n.aborted)return e.apply(this,d);let f=r?o:D();M.unshift({cache:o,after(h,l){return f[h]=l}});let p=e.apply(this,d);return M.shift(),o=f,p}return c[Q]=!0,c.clear=()=>o=D(),n&&n.addEventListener("abort",c.clear),c};export{R as assign,J as assignAttribute,nt as chainableAppend,rt as classListDeclarative,k as createElement,St as createElementNS,Pt as customElementRender,ut as customElementWithDDE,xt as dispatchEvent,k as el,St as elNS,ot as elementAttribute,ut as lifecyclesToEvents,I as memo,N as on,At as queue,Y as registerReactivity,S as scope,Dt as simulateSlots}; +var $=(...t)=>Object.prototype.hasOwnProperty.call(...t);function g(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 v(...t){return Object.assign(...t)}function j(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var a={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),!!g(n)){if(Reflect.deleteProperty(t,e),h(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",x="dde:connected",w="dde:disconnected",z="dde:attributeChanged";var O=a.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}_(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.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),f())}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(a.D.body,{childList:!0,subtree:!0}))}function f(){!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,a.N))return u;for(let i of t.keys())i===s||!h(i,a.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 y=t.get(b);y.length_c&&(b.dispatchEvent(new Event(x)),y.connected=new WeakSet,y.length_c=0,y.length_d||t.delete(b),i=!0)}return i}function _(s,u){let i=!1;for(let b of s)u&&m(b).then(_),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(et(b)),i=!0);return i}function et(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,v({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}}var B=t=>v({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=B(e),function(r){return r.addEventListener(x,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(x)),r):(j(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};S.disconnected=function(t,e){return e=B(e),function(r){return r.addEventListener(w,t,e),r[C]||j(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};var E=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],q=new WeakMap,A={get current(){return E[E.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(q.has(t))return q.get(t);let e=new AbortController;return q.set(t,e),t(S.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...E]},push(t={}){return E.push(v({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};S.host=(t,e=A.host)=>n=>e(()=>t(n));var D={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function ot(t,e=!0){return e?v(D,t):(Object.setPrototypeOf(t,D),t)}function L(t){return H(t,D)&&t!==D?t:D}function Z(t,e,n,r){return t[(g(r)?"remove":"set")+e](n,r)}function G(t,e,n,r,o=null){return t[(g(r)?"remove":"set")+e+"NS"](o,n,r)}function W(t,e,n){if(Reflect.set(t,e,n),!!g(n))return Reflect.deleteProperty(t,e)}function J(t,e,n,r){return h(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Tt(t){return a.q(t)}function V(...t){return this.appendOriginal(...t),this}function ct(t){return t.append===V||(t.appendOriginal=t.append,t.append=V),t}var T;function I(t,e,...n){let r=L(this),o=0,c,p;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(_=>_(p)),void 0):p;A.push({scope:t,host:f}),c=t(e||void 0);let d=h(c,a.F);if(c.nodeName==="#comment")break;let m=I.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(m),d&&(p=m);break}case t==="#text":c=N.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=N.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=N.call(this,a.D.createElementNS(T,t),e);break;case!c:c=N.call(this,a.D.createElement(t),e)}return ct(c),p||(p=c),n.forEach(f=>f(p)),o&&A.pop(),o=2,c}I.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function Mt(t){let e=this;return function(...r){T=t;let o=I.call(e,...r);return T=void 0,o}}var P=new WeakMap,{setDeleteAttr:K}=a;function N(t,...e){if(!e.length)return t;P.set(t,X(t,this));for(let[n,r]of Object.entries(v({},...e)))Q.call(this,t,n,r);return P.delete(t),t}function Q(t,e,n){let{setRemoveAttr:r,s:o}=X(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,d)=>Q.call(c,t,f,d));let[p]=e;if(p==="=")return r(e.slice(1),n);if(p===".")return W(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 K(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return k(o,e,t,n,W.bind(null,t[e]));case"ariaset":return k(o,e,t,n,(f,d)=>r("aria-"+f,d));case"classList":return st.call(c,t,n)}return it(t,e)?K(t,e,n):r(e,n)}function X(t,e){if(P.has(t))return P.get(t);let r=(h(t,a.S)?G:Z).bind(null,t,"Attribute"),o=L(e);return{setRemoveAttr:r,s:o}}function st(t,e){let n=L(this);return k(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function it(t,e){if(!(e in t))return!1;let n=Y(t,e);return!g(n.set)}function Y(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||Y(t,e)}function k(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,d]){f&&(f=new c(f),f.target=e,d=t.processReactiveAttribute(n,f,d,o),o(f,d))})}function $t(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,p,f){if(f[0]===e)return c.apply(t,f);for(let d of f){let m=(d.slot||"")+n;try{J(d,"remove","slot")}catch{}let l=o[m];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(_=>_.remove()),l.name=r+m),l.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function Ht(t,e,n={}){let r=t.host||t;A.push({scope:r,host:(...p)=>p.length?p.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[C];o||ut(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(x)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(w,O.observe(t),{once:!0}),A.pop(),t.append(c)}function ut(t){return F(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(x))}),F(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(w)))}),F(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(z,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function F(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var tt="__dde_memo",M=[];function U(t,e){if(!M.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=M;return o(n,$(r,n)?r[n]:e(t))}U.isScope=function(t){return t[tt]};U.scope=function(e,{signal:n,onlyLast:r}={}){let o=R();function c(...p){if(n&&n.aborted)return e.apply(this,p);let f=r?o:R();M.unshift({cache:o,after(m,l){return f[m]=l}});let d=e.apply(this,p);return M.shift(),o=f,d}return c[tt]=!0,c.clear=()=>o=R(),n&&n.addEventListener("abort",c.clear),c};export{N as assign,Q as assignAttribute,ct as chainableAppend,st as classListDeclarative,I as createElement,Mt as createElementNS,Ht as customElementRender,ut as customElementWithDDE,vt as dispatchEvent,I as el,Mt as elNS,ut as lifecyclesToEvents,U as memo,S as on,Tt as queue,ot as registerReactivity,A as scope,$t as simulateSlots}; diff --git a/dist/iife-with-signals.d.ts b/dist/iife-with-signals.d.ts index ec30620..ad522de 100644 --- a/dist/iife-with-signals.d.ts +++ b/dist/iife-with-signals.d.ts @@ -179,11 +179,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/iife-with-signals.js b/dist/iife-with-signals.js index c77ab02..cfb4ff0 100644 --- a/dist/iife-with-signals.js +++ b/dist/iife-with-signals.js @@ -32,7 +32,6 @@ var DDE = (() => { dispatchEvent: () => dispatchEvent, el: () => createElement, elNS: () => createElementNS, - elementAttribute: () => elementAttribute, isSignal: () => isSignal, lifecyclesToEvents: () => lifecyclesToEvents, memo: () => memo, @@ -101,38 +100,7 @@ var DDE = (() => { } }; - // src/signals-lib/common.js - var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } - }; - function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; - } - function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; - } - - // src/dom-common.js + // src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -158,7 +126,7 @@ var DDE = (() => { var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; - // src/events-observer.js + // src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -322,7 +290,7 @@ var DDE = (() => { } } - // src/events.js + // src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -367,10 +335,7 @@ var DDE = (() => { }; }; - // src/dom.js - function queue(promise) { - return enviroment.q(promise); - } + // src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -445,6 +410,61 @@ var DDE = (() => { return scopes.pop(); } }; + on.host = (fn, host = scope.host) => (el) => host(() => fn(el)); + + // src/signals-lib/common.js + var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } + }; + function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; + } + function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; + } + + // src/dom-lib/helpers.js + function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); + } + function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); + } + function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); + } + function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); + } + + // src/dom-lib/el.js + function queue(promise) { + return enviroment.q(promise); + } function append(...els) { this.appendOriginal(...els); return this; @@ -514,38 +534,6 @@ var DDE = (() => { return el; }; } - function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; - } var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -608,11 +596,6 @@ var DDE = (() => { ); return element; } - function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); - } function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -636,19 +619,40 @@ var DDE = (() => { cb(key, val); }); } - function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); - } - function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); - } - function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); - } - // src/customElement.js + // src/dom-lib/customElement.js + function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; + } function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ diff --git a/dist/iife-with-signals.min.d.ts b/dist/iife-with-signals.min.d.ts index ec30620..ad522de 100644 --- a/dist/iife-with-signals.min.d.ts +++ b/dist/iife-with-signals.min.d.ts @@ -179,11 +179,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/iife-with-signals.min.js b/dist/iife-with-signals.min.js index 89e4a86..3089c4d 100644 --- a/dist/iife-with-signals.min.js +++ b/dist/iife-with-signals.min.js @@ -1,4 +1,4 @@ -var DDE=(()=>{var G=Object.defineProperty;var At=Object.getOwnPropertyDescriptor;var Ot=Object.getOwnPropertyNames;var Ct=Object.prototype.hasOwnProperty;var Dt=(t,e)=>{for(var n in e)G(t,n,{get:e[n],enumerable:!0})},Rt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Ot(e))!Ct.call(t,o)&&o!==n&&G(t,o,{get:()=>e[o],enumerable:!(r=At(e,o))||r.enumerable});return t};var Lt=t=>Rt(G({},"__esModule",{value:!0}),t);var Vt={};Dt(Vt,{S:()=>m,assign:()=>W,assignAttribute:()=>X,chainableAppend:()=>dt,classListDeclarative:()=>pt,createElement:()=>M,createElementNS:()=>jt,customElementRender:()=>$t,customElementWithDDE:()=>mt,dispatchEvent:()=>Mt,el:()=>M,elNS:()=>jt,elementAttribute:()=>ht,isSignal:()=>F,lifecyclesToEvents:()=>mt,memo:()=>L,on:()=>w,queue:()=>Pt,registerReactivity:()=>$,scope:()=>b,signal:()=>m,simulateSlots:()=>qt});var I=(...t)=>Object.prototype.hasOwnProperty.call(...t);function C(t){return typeof t>"u"}function ot(t){let e=typeof t;return e!=="object"?e:t===null?"null":Object.prototype.toString.call(t)}function S(t,e){return t instanceof e}function ct(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function x(t=null,e={}){return Object.create(t,e)}function E(...t){return Object.assign(...t)}function V(t,e){if(!t||!S(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[Nt(o)]=e(t,o),r},{})}function Nt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var j=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` -`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var q={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function $(t,e=!0){return e?E(q,t):(Object.setPrototypeOf(t,q),t)}function U(t){return ct(t,q)&&t!==q?t:q}var l={setDeleteAttr:kt,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 kt(t,e,n){if(Reflect.set(t,e,n),!!C(n)){if(Reflect.deleteProperty(t,e),S(t,l.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var T="__dde_lifecyclesToEvents",y="dde:connected",D="dde:disconnected",z="dde:attributeChanged";var R=l.M?Tt():new Proxy({},{get(){return()=>{}}});function Tt(){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}O(f.removedNodes,!0)&&u()}},r=new l.M(n(i));return{observe(u){let a=new l.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();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){s();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),i())}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 s(){e||(e=!0,r.observe(l.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function g(u){t.size>30&&await d();let a=[];if(!S(u,l.N))return a;for(let f of t.keys())f===u||!S(f,l.N)||u.contains(f)&&a.push(f);return a}function h(u,a){let f=!1;for(let _ of u){if(a&&g(_).then(h),!t.has(_))continue;let P=t.get(_);P.length_c&&(_.dispatchEvent(new Event(y)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(_),f=!0)}return f}function O(u,a){let f=!1;for(let _ of u)a&&g(_).then(O),!(!t.has(_)||!t.get(_).length_d)&&((globalThis.queueMicrotask||setTimeout)(yt(_)),f=!0);return f}function yt(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(D)),t.delete(u))}}}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 s=c.length?new CustomEvent(t,E({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function w(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var it=t=>E({},typeof t=="object"?t:null,{once:!0});w.connected=function(t,e){return e=it(e),function(r){return r.addEventListener(y,t,e),r[T]?r:r.isConnected?(r.dispatchEvent(new Event(y)),r):(V(e.signal,()=>R.offConnected(r,t))&&R.onConnected(r,t),r)}};w.disconnected=function(t,e){return e=it(e),function(r){return r.addEventListener(D,t,e),r[T]||V(e.signal,()=>R.offDisconnected(r,t))&&R.onDisconnected(r,t),r}};function Pt(t){return l.q(t)}var A=[{get scope(){return l.D.body},host:t=>t?t(l.D.body):l.D.body,prevent:!0}],K=new WeakMap,b={get current(){return A[A.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[...A]},push(t={}){return A.push(E({},this.current,{prevent:!1},t))},pushRoot(){return A.push(A[0])},pop(){if(A.length!==1)return A.pop()}};function ut(...t){return this.appendOriginal(...t),this}function dt(t){return t.append===ut||(t.appendOriginal=t.append,t.append=ut),t}var H;function M(t,e,...n){let r=U(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(O=>O(s)),void 0):s;b.push({scope:t,host:i}),c=t(e||void 0);let d=S(c,l.F);if(c.nodeName==="#comment")break;let g=M.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(g),d&&(s=g);break}case t==="#text":c=W.call(this,l.D.createTextNode(""),e);break;case(t==="<>"||!t):c=W.call(this,l.D.createDocumentFragment(),e);break;case!!H:c=W.call(this,l.D.createElementNS(H,t),e);break;case!c:c=W.call(this,l.D.createElement(t),e)}return dt(c),s||(s=c),n.forEach(i=>i(s)),o&&b.pop(),o=2,c}M.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=l.D.createComment(``);return e&&(r.end=l.D.createComment("")),r};function jt(t){let e=this;return function(...r){H=t;let o=M.call(e,...r);return H=void 0,o}}function qt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let d of i){let g=(d.slot||"")+n;try{ht(d,"remove","slot")}catch{}let h=o[g];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(O=>O.remove()),h.name=r+g),h.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var J=new WeakMap,{setDeleteAttr:ft}=l;function W(t,...e){if(!e.length)return t;J.set(t,lt(t,this));for(let[n,r]of Object.entries(E({},...e)))X.call(this,t,n,r);return J.delete(t),t}function X(t,e,n){let{setRemoveAttr:r,s:o}=lt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,d)=>X.call(c,t,i,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return at(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 ft(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return Q(o,e,t,n,at.bind(null,t[e]));case"ariaset":return Q(o,e,t,n,(i,d)=>r("aria-"+i,d));case"classList":return pt.call(c,t,n)}return Wt(t,e)?ft(t,e,n):r(e,n)}function lt(t,e){if(J.has(t))return J.get(t);let r=(S(t,l.S)?It:Ft).bind(null,t,"Attribute"),o=U(e);return{setRemoveAttr:r,s:o}}function pt(t,e){let n=U(this);return Q(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function ht(t,e,n,r){return S(t,l.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function Wt(t,e){if(!(e in t))return!1;let n=gt(t,e);return!C(n.set)}function gt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||gt(t,e)}function Q(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,d]){i&&(i=new c(i),i.target=e,d=t.processReactiveAttribute(n,i,d,o),o(i,d))})}function Ft(t,e,n,r){return t[(C(r)?"remove":"set")+e](n,r)}function It(t,e,n,r,o=null){return t[(C(r)?"remove":"set")+e+"NS"](o,n,r)}function at(t,e,n){if(Reflect.set(t,e,n),!!C(n))return Reflect.deleteProperty(t,e)}function $t(t,e,n={}){let r=t.host||t;b.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[T];o||mt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(y)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(D,R.observe(t),{once:!0}),b.pop(),t.append(c)}function mt(t){return Y(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(y))}),Y(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(D)))}),Y(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(z,{detail:[o,c]})),e.apply(n,r)}),t.prototype[T]=!0,t}function Y(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var bt="__dde_memo",B=[];function L(t,e){if(!B.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=B;return o(n,I(r,n)?r[n]:e(t))}L.isScope=function(t){return t[bt]};L.scope=function(e,{signal:n,onlyLast:r}={}){let o=x();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:x();B.unshift({cache:o,after(g,h){return i[g]=h}});let d=e.apply(this,s);return B.shift(),o=i,d}return c[bt]=!0,c.clear=()=>o=x(),n&&n.addEventListener("abort",c.clear),c};var p="__dde_signal",tt=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[p];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var nt=x(null,{get:{value(){return xt(this)}},set:{value(...t){return wt(this,...t)}},toJSON:{value(){return xt(this)}},valueOf:{value(){return this[p]&&this[p].value}}}),Ut=x(nt,{set:{value(){}}});function F(t){return t&&t[p]}var Z=[],v=new WeakMap;function m(t,e){if(typeof t!="function")return vt(!1,t,e);if(F(t))return t;let n=vt(!0);function r(){let[o,...c]=v.get(r);if(v.set(r,new Set([o])),Z.push(r),wt(n,t()),Z.pop(),!c.length)return;let s=v.get(r);for(let i of c)s.has(i)||k(i,r)}return v.set(n[p],r),v.set(r,new Set([n])),r(),n}m.action=function(t,e,...n){let r=t[p];if(!r)return;let{actions:o}=r;if(!o||!I(o,e))throw new Error(`Action "${e}" not defined. See ${p}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;tt(t)};m.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));rt(e,n),o&&o.addEventListener("abort",()=>k(e,n))}};m.symbols={onclear:Symbol.for("Signal.onclear")};m.clear=function(...t){for(let n of t){let r=n[p];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[p])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!v.has(o))return;let c=v.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),v.delete(o))})}};var N="__dde_reactive";m.el=function(t,e){e=L.isScope(e)?e:L.scope(e,{onlyLast:!0});let n=M.mark({type:"reactive",source:new j().compact},!0),r=n.end,o=l.D.createDocumentFragment();o.append(n,r);let{current:c}=b,s=i=>{if(!n.parentNode||!r.parentNode)return k(t,s);b.push(c);let d=e(i);b.pop(),Array.isArray(d)||(d=[d]);let g=document.createComment("");d.push(g),n.after(...d);let h;for(;(h=g.nextSibling)&&h!==r;)h.remove();g.remove(),n.isConnected&&zt(c.host())};return rt(t,s),_t(t,s,n,e),s(t.get()),c.host(w.disconnected(()=>e.clear())),o};function zt(t){!t||!t[N]||(requestIdleCallback||setTimeout)(function(){t[N]=t[N].filter(([e,n])=>n.isConnected?!0:(k(...e),!1))})}var Ht={_set(t){this.value=t}};function Jt(t){return function(e,n){let r=x(nt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=St(r,e.getAttribute(n),Ht);return t[n]=o,o}}var et="__dde_attributes";m.observedAttributes=function(t){let e=t[et]={},n=st(t,Jt(e));return w(z,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[et][c];if(i)return m.action(i,"_set",s)})(t),w.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). - Investigate `__dde_attributes` key of the element. */m.clear(...Object.values(this[et]))})(t),n};var Et={isSignal:F,processReactiveAttribute(t,e,n,r){if(!F(n))return n;let o=c=>{if(!t.isConnected)return k(n,o);r(e,c)};return rt(n,o),_t(n,o,t,e),n.get()}};function _t(t,e,...n){let{current:r}=b;r.host(function(o){if(o[N])return o[N].push([[t,e],...n]);o[N]=[],!r.prevent&&w.disconnected(()=>o[N].forEach(([[c,s]])=>k(c,s,c[p]&&c[p].host&&c[p].host()===o)))(o)})}var Bt=new FinalizationRegistry(function(t){m.clear({[p]:t})});function vt(t,e,n){let r=x(t?Ut:nt),o=St(r,e,n,t);return Bt.register(o,o[p]),o}var Zt=E(x(),{stopPropagation(){this.skip=!0}});function St(t,e,n,r=!1){let o=[];ot(n)!=="[object Object]"&&(n={});let{onclear:c}=m.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=b;return Reflect.defineProperty(t,p,{value:E(x(Zt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new j().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Gt(){return Z[Z.length-1]}function xt(t){if(!t[p])return;let{value:e,listeners:n}=t[p],r=Gt();return r&&n.add(r),v.has(r)&&v.get(r).add(t),e}function wt(t,e,n){let r=t[p];if(!(!r||!n&&r.value===e))return r.value=e,tt(t),e}function rt(t,e){if(t[p])return t[p].listeners.add(e)}function k(t,e,n){let r=t[p];if(!r)return;let{listeners:o}=r,c=o.delete(e);if(!c||!n||o.size)return c;m.clear(t);let s=v.get(r);if(!s)return c;let i=v.get(s);if(!i)return c;for(let d of i)k(d,s,!0);return c}$(Et);return Lt(Vt);})(); +var DDE=(()=>{var G=Object.defineProperty;var Ct=Object.getOwnPropertyDescriptor;var Rt=Object.getOwnPropertyNames;var Dt=Object.prototype.hasOwnProperty;var Lt=(t,e)=>{for(var n in e)G(t,n,{get:e[n],enumerable:!0})},Nt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Rt(e))!Dt.call(t,o)&&o!==n&&G(t,o,{get:()=>e[o],enumerable:!(r=Ct(e,o))||r.enumerable});return t};var kt=t=>Nt(G({},"__esModule",{value:!0}),t);var Vt={};Lt(Vt,{S:()=>v,assign:()=>W,assignAttribute:()=>Y,chainableAppend:()=>ht,classListDeclarative:()=>gt,createElement:()=>M,createElementNS:()=>Wt,customElementRender:()=>Ut,customElementWithDDE:()=>bt,dispatchEvent:()=>jt,el:()=>M,elNS:()=>Wt,isSignal:()=>F,lifecyclesToEvents:()=>bt,memo:()=>L,on:()=>S,queue:()=>qt,registerReactivity:()=>$,scope:()=>g,signal:()=>v,simulateSlots:()=>It});var I=(...t)=>Object.prototype.hasOwnProperty.call(...t);function y(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 E(t,e){return t instanceof e}function st(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function _(t=null,e={}){return Object.create(t,e)}function b(...t){return Object.assign(...t)}function V(t,e){if(!t||!E(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}function it(t,e){let{observedAttributes:n=[]}=t.constructor;return n.reduce(function(r,o){return r[Tt(o)]=e(t,o),r},{})}function Tt(t){return t.replace(/-./g,e=>e[1].toUpperCase())}var j=class extends Error{constructor(){super();let[e,...n]=this.stack.split(` +`),r=e.slice(e.indexOf("@"),e.indexOf(".js:")+4),o=r.includes("src/helpers.js")?"src/":r;this.stack=n.find(c=>!c.includes(o))||e}get compact(){let{stack:e}=this;return e.slice(0,e.indexOf("@")+1)+"\u2026"+e.slice(e.lastIndexOf("/"))}};var p={setDeleteAttr:Mt,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 Mt(t,e,n){if(Reflect.set(t,e,n),!!y(n)){if(Reflect.deleteProperty(t,e),E(t,p.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var T="__dde_lifecyclesToEvents",A="dde:connected",R="dde:disconnected",U="dde:attributeChanged";var D=p.M?Pt():new Proxy({},{get(){return()=>{}}});function Pt(){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}C(f.removedNodes,!0)&&u()}},r=new p.M(n(i));return{observe(u){let a=new p.M(n(()=>{}));return a.observe(u,{childList:!0,subtree:!0}),()=>a.disconnect()},onConnected(u,a){s();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){s();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),i())}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 s(){e||(e=!0,r.observe(p.D.body,{childList:!0,subtree:!0}))}function i(){!e||t.size||(e=!1,r.disconnect())}function d(){return new Promise(function(u){(requestIdleCallback||requestAnimationFrame)(u)})}async function m(u){t.size>30&&await d();let a=[];if(!E(u,p.N))return a;for(let f of t.keys())f===u||!E(f,p.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(A)),P.connected=new WeakSet,P.length_c=0,P.length_d||t.delete(w),f=!0)}return f}function C(u,a){let f=!1;for(let w of u)a&&m(w).then(C),!(!t.has(w)||!t.get(w).length_d)&&((globalThis.queueMicrotask||setTimeout)(Ot(w)),f=!0);return f}function Ot(u){return()=>{u.isConnected||(u.dispatchEvent(new Event(R)),t.delete(u))}}}function jt(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 s=c.length?new CustomEvent(t,b({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(s)}}function S(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var ut=t=>b({},typeof t=="object"?t:null,{once:!0});S.connected=function(t,e){return e=ut(e),function(r){return r.addEventListener(A,t,e),r[T]?r:r.isConnected?(r.dispatchEvent(new Event(A)),r):(V(e.signal,()=>D.offConnected(r,t))&&D.onConnected(r,t),r)}};S.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 p.D.body},host:t=>t?t(p.D.body):p.D.body,prevent:!0}],K=new WeakMap,g={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(S.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()}};S.host=(t,e=g.host)=>n=>e(()=>t(n));var q={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function $(t,e=!0){return e?b(q,t):(Object.setPrototypeOf(t,q),t)}function z(t){return st(t,q)&&t!==q?t:q}function ft(t,e,n,r){return t[(y(r)?"remove":"set")+e](n,r)}function at(t,e,n,r,o=null){return t[(y(r)?"remove":"set")+e+"NS"](o,n,r)}function Q(t,e,n){if(Reflect.set(t,e,n),!!y(n))return Reflect.deleteProperty(t,e)}function pt(t,e,n,r){return E(t,p.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function qt(t){return p.q(t)}function dt(...t){return this.appendOriginal(...t),this}function ht(t){return t.append===dt||(t.appendOriginal=t.append,t.append=dt),t}var H;function M(t,e,...n){let r=z(this),o=0,c,s;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let i=(...h)=>h.length?(o===1?n.unshift(...h):h.forEach(C=>C(s)),void 0):s;g.push({scope:t,host:i}),c=t(e||void 0);let d=E(c,p.F);if(c.nodeName==="#comment")break;let m=M.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(m),d&&(s=m);break}case t==="#text":c=W.call(this,p.D.createTextNode(""),e);break;case(t==="<>"||!t):c=W.call(this,p.D.createDocumentFragment(),e);break;case!!H:c=W.call(this,p.D.createElementNS(H,t),e);break;case!c:c=W.call(this,p.D.createElement(t),e)}return ht(c),s||(s=c),n.forEach(i=>i(s)),o&&g.pop(),o=2,c}M.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=p.D.createComment(``);return e&&(r.end=p.D.createComment("")),r};function Wt(t){let e=this;return function(...r){H=t;let o=M.call(e,...r);return H=void 0,o}}var J=new WeakMap,{setDeleteAttr:lt}=p;function W(t,...e){if(!e.length)return t;J.set(t,mt(t,this));for(let[n,r]of Object.entries(b({},...e)))Y.call(this,t,n,r);return J.delete(t),t}function Y(t,e,n){let{setRemoveAttr:r,s:o}=mt(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(i,d)=>Y.call(c,t,i,d));let[s]=e;if(s==="=")return r(e.slice(1),n);if(s===".")return Q(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 lt(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return X(o,e,t,n,Q.bind(null,t[e]));case"ariaset":return X(o,e,t,n,(i,d)=>r("aria-"+i,d));case"classList":return gt.call(c,t,n)}return Ft(t,e)?lt(t,e,n):r(e,n)}function mt(t,e){if(J.has(t))return J.get(t);let r=(E(t,p.S)?at:ft).bind(null,t,"Attribute"),o=z(e);return{setRemoveAttr:r,s:o}}function gt(t,e){let n=z(this);return X(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function Ft(t,e){if(!(e in t))return!1;let n=vt(t,e);return!y(n.set)}function vt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||vt(t,e)}function X(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([i,d]){i&&(i=new c(i),i.target=e,d=t.processReactiveAttribute(n,i,d,o),o(i,d))})}function It(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,s,i){if(i[0]===e)return c.apply(t,i);for(let d of i){let m=(d.slot||"")+n;try{pt(d,"remove","slot")}catch{}let h=o[m];if(!h)return;h.name.startsWith(r)||(h.childNodes.forEach(C=>C.remove()),h.name=r+m),h.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function Ut(t,e,n={}){let r=t.host||t;g.push({scope:r,host:(...s)=>s.length?s.forEach(i=>i(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[T];o||bt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(A)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(R,D.observe(t),{once:!0}),g.pop(),t.append(c)}function bt(t){return tt(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(A))}),tt(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(R)))}),tt(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(U,{detail:[o,c]})),e.apply(n,r)}),t.prototype[T]=!0,t}function tt(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var xt="__dde_memo",B=[];function L(t,e){if(!B.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=B;return o(n,I(r,n)?r[n]:e(t))}L.isScope=function(t){return t[xt]};L.scope=function(e,{signal:n,onlyLast:r}={}){let o=_();function c(...s){if(n&&n.aborted)return e.apply(this,s);let i=r?o:_();B.unshift({cache:o,after(m,h){return i[m]=h}});let d=e.apply(this,s);return B.shift(),o=i,d}return c[xt]=!0,c.clear=()=>o=_(),n&&n.addEventListener("abort",c.clear),c};var l="__dde_signal",et=(()=>{let t=new Set,e=!1;function n(){e=!1;let r=t;t=new Set;for(let o of r){let c=o[l];c&&c.listeners.forEach(s=>s(c.value))}}return function(r){t.add(r),!e&&(e=!0,queueMicrotask(n))}})();var rt=_(null,{get:{value(){return _t(this)}},set:{value(...t){return At(this,...t)}},toJSON:{value(){return _t(this)}},valueOf:{value(){return this[l]&&this[l].value}}}),$t=_(rt,{set:{value(){}}});function F(t){return t&&t[l]}var Z=[],x=new WeakMap;function v(t,e){if(typeof t!="function")return Et(!1,t,e);if(F(t))return t;let n=Et(!0);function r(){let[o,...c]=x.get(r);if(x.set(r,new Set([o])),Z.push(r),At(n,t()),Z.pop(),!c.length)return;let s=x.get(r);for(let i of c)s.has(i)||k(i,r)}return x.set(n[l],r),x.set(r,new Set([n])),r(),n}v.action=function(t,e,...n){let r=t[l];if(!r)return;let{actions:o}=r;if(!o||!I(o,e))throw new Error(`Action "${e}" not defined. See ${l}.actions.`);if(o[e].apply(r,n),r.skip)return delete r.skip;et(t)};v.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));ot(e,n),o&&o.addEventListener("abort",()=>k(e,n))}};v.symbols={onclear:Symbol.for("Signal.onclear")};v.clear=function(...t){for(let n of t){let r=n[l];r&&(delete n.toJSON,r.onclear.forEach(o=>o.call(r)),e(n,r),delete n[l])}function e(n,r){r.listeners.forEach(o=>{if(r.listeners.delete(o),!x.has(o))return;let c=x.get(o);c.delete(n),!(c.size>1)&&(n.clear(...c),x.delete(o))})}};var N="__dde_reactive";v.el=function(t,e){e=L.isScope(e)?e:L.scope(e,{onlyLast:!0});let n=M.mark({type:"reactive",source:new j().compact},!0),r=n.end,o=p.D.createDocumentFragment();o.append(n,r);let{current:c}=g,s=i=>{if(!n.parentNode||!r.parentNode)return k(t,s);g.push(c);let d=e(i);g.pop(),Array.isArray(d)||(d=[d]);let m=document.createComment("");d.push(m),n.after(...d);let h;for(;(h=m.nextSibling)&&h!==r;)h.remove();m.remove(),n.isConnected&&zt(c.host())};return ot(t,s),wt(t,s,n,e),s(t.get()),c.host(S.disconnected(()=>e.clear())),o};function zt(t){!t||!t[N]||(requestIdleCallback||setTimeout)(function(){t[N]=t[N].filter(([e,n])=>n.isConnected?!0:(k(...e),!1))})}var Ht={_set(t){this.value=t}};function Jt(t){return function(e,n){let r=_(rt,{set:{value(...c){return e.setAttribute(n,...c)}}}),o=yt(r,e.getAttribute(n),Ht);return t[n]=o,o}}var nt="__dde_attributes";v.observedAttributes=function(t){let e=t[nt]={},n=it(t,Jt(e));return S(U,function({detail:o}){/*! This maps attributes to signals (`S.observedAttributes`). + Investigate `__dde_attributes` key of the element. */let[c,s]=o,i=this[nt][c];if(i)return v.action(i,"_set",s)})(t),S.disconnected(function(){/*! This removes all signals mapped to attributes (`S.observedAttributes`). + Investigate `__dde_attributes` key of the element. */v.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 k(n,o);r(e,c)};return ot(n,o),wt(n,o,t,e),n.get()}};function wt(t,e,...n){let{current:r}=g;r.host(function(o){if(o[N])return o[N].push([[t,e],...n]);o[N]=[],!r.prevent&&S.disconnected(()=>o[N].forEach(([[c,s]])=>k(c,s,c[l]&&c[l].host&&c[l].host()===o)))(o)})}var Bt=new FinalizationRegistry(function(t){v.clear({[l]:t})});function Et(t,e,n){let r=_(t?$t:rt),o=yt(r,e,n,t);return Bt.register(o,o[l]),o}var Zt=b(_(),{stopPropagation(){this.skip=!0}});function yt(t,e,n,r=!1){let o=[];ct(n)!=="[object Object]"&&(n={});let{onclear:c}=v.symbols;n[c]&&(o.push(n[c]),delete n[c]);let{host:s}=g;return Reflect.defineProperty(t,l,{value:b(_(Zt),{value:e,actions:n,onclear:o,host:s,listeners:new Set,defined:new j().stack,readonly:r}),enumerable:!1,writable:!1,configurable:!0}),t}function Gt(){return Z[Z.length-1]}function _t(t){if(!t[l])return;let{value:e,listeners:n}=t[l],r=Gt();return r&&n.add(r),x.has(r)&&x.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),e}function ot(t,e){if(t[l])return t[l].listeners.add(e)}function k(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 s=x.get(r);if(!s)return c;let i=x.get(s);if(!i)return c;for(let d of i)k(d,s,!0);return c}$(St);return kt(Vt);})(); diff --git a/dist/iife.d.ts b/dist/iife.d.ts index df4075e..5a650a7 100644 --- a/dist/iife.d.ts +++ b/dist/iife.d.ts @@ -178,11 +178,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/iife.js b/dist/iife.js index a1a2081..21df687 100644 --- a/dist/iife.js +++ b/dist/iife.js @@ -31,7 +31,6 @@ var DDE = (() => { dispatchEvent: () => dispatchEvent, el: () => createElement, elNS: () => createElementNS, - elementAttribute: () => elementAttribute, lifecyclesToEvents: () => lifecyclesToEvents, memo: () => memo, on: () => on, @@ -69,38 +68,7 @@ var DDE = (() => { }; } - // src/signals-lib/common.js - var signals_global = { - /** - * Checks if a value is a signal - * @param {any} attributes - Value to check - * @returns {boolean} Whether the value is a signal - */ - isSignal(attributes) { - return false; - }, - /** - * Processes an attribute that might be reactive - * @param {Element} obj - Element that owns the attribute - * @param {string} key - Attribute name - * @param {any} attr - Attribute value - * @param {Function} set - Function to set the attribute - * @returns {any} Processed attribute value - */ - processReactiveAttribute(obj, key, attr, set) { - return attr; - } - }; - function registerReactivity(def, global = true) { - if (global) return oAssign(signals_global, def); - Object.setPrototypeOf(def, signals_global); - return def; - } - function signals(_this) { - return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; - } - - // src/dom-common.js + // src/dom-lib/common.js var enviroment = { setDeleteAttr, ssr: "", @@ -126,7 +94,7 @@ var DDE = (() => { var evd = "dde:disconnected"; var eva = "dde:attributeChanged"; - // src/events-observer.js + // src/dom-lib/events-observer.js var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { @@ -290,7 +258,7 @@ var DDE = (() => { } } - // src/events.js + // src/dom-lib/events.js function dispatchEvent(name, options, host) { if (typeof options === "function") { host = options; @@ -335,10 +303,7 @@ var DDE = (() => { }; }; - // src/dom.js - function queue(promise) { - return enviroment.q(promise); - } + // src/dom-lib/scopes.js var scopes = [{ get scope() { return enviroment.D.body; @@ -413,6 +378,61 @@ var DDE = (() => { return scopes.pop(); } }; + on.host = (fn, host = scope.host) => (el) => host(() => fn(el)); + + // src/signals-lib/common.js + var signals_global = { + /** + * Checks if a value is a signal + * @param {any} attributes - Value to check + * @returns {boolean} Whether the value is a signal + */ + isSignal(attributes) { + return false; + }, + /** + * Processes an attribute that might be reactive + * @param {Element} obj - Element that owns the attribute + * @param {string} key - Attribute name + * @param {any} attr - Attribute value + * @param {Function} set - Function to set the attribute + * @returns {any} Processed attribute value + */ + processReactiveAttribute(obj, key, attr, set) { + return attr; + } + }; + function registerReactivity(def, global = true) { + if (global) return oAssign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; + } + function signals(_this) { + return isProtoFrom(_this, signals_global) && _this !== signals_global ? _this : signals_global; + } + + // src/dom-lib/helpers.js + function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); + } + function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); + } + function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); + } + function elementAttribute(element, op, key, value) { + if (isInstance(element, enviroment.H)) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); + } + + // src/dom-lib/el.js + function queue(promise) { + return enviroment.q(promise); + } function append(...els) { this.appendOriginal(...els); return this; @@ -482,38 +502,6 @@ var DDE = (() => { return el; }; } - function simulateSlots(element, root = element) { - const mark_e = "\xB9\u2070", mark_s = "\u2713"; - const slots = Object.fromEntries( - Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) - ); - element.append = new Proxy(element.append, { - apply(orig, _, els) { - if (els[0] === root) return orig.apply(element, els); - for (const el of els) { - const name = (el.slot || "") + mark_e; - try { - elementAttribute(el, "remove", "slot"); - } catch (_error) { - } - const slot = slots[name]; - if (!slot) return; - if (!slot.name.startsWith(mark_s)) { - slot.childNodes.forEach((c) => c.remove()); - slot.name = mark_s + name; - } - slot.append(el); - } - element.append = orig; - return element; - } - }); - if (element !== root) { - const els = Array.from(element.childNodes); - element.append(...els); - } - return root; - } var assign_context = /* @__PURE__ */ new WeakMap(); var { setDeleteAttr: setDeleteAttr2 } = enviroment; function assign(element, ...attributes) { @@ -576,11 +564,6 @@ var DDE = (() => { ); return element; } - function elementAttribute(element, op, key, value) { - if (isInstance(element, enviroment.H)) - return element[op + "Attribute"](key, value); - return element[op + "AttributeNS"](null, key, value); - } function isPropSetter(el, key) { if (!(key in el)) return false; const des = getPropDescriptor(el, key); @@ -604,19 +587,40 @@ var DDE = (() => { cb(key, val); }); } - function setRemove(obj, prop, key, val) { - return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); - } - function setRemoveNS(obj, prop, key, val, ns = null) { - return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); - } - function setDelete(obj, key, val) { - Reflect.set(obj, key, val); - if (!isUndef(val)) return; - return Reflect.deleteProperty(obj, key); - } - // src/customElement.js + // src/dom-lib/customElement.js + function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) + ); + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; + try { + elementAttribute(el, "remove", "slot"); + } catch (_error) { + } + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); + } + element.append = orig; + return element; + } + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); + } + return root; + } function customElementRender(target, render, props = {}) { const custom_element = target.host || target; scope.push({ diff --git a/dist/iife.min.d.ts b/dist/iife.min.d.ts index df4075e..5a650a7 100644 --- a/dist/iife.min.d.ts +++ b/dist/iife.min.d.ts @@ -178,11 +178,22 @@ export interface On { connected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; /** Listens to the element is disconnected from the live DOM. In case of custom elements uses [`disconnectedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line disconnected, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent) => any, options?: AddEventListenerOptions): EE; - /** Listens to the element attribute changes. In case of custom elements uses [`attributeChangedCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks), or {@link MutationObserver} else where */ // editorconfig-checker-disable-line - attributeChanged, El extends (EE extends ddeElementAddon ? El : never)>(listener: (this: El, event: CustomEvent<[ - string, - string - ]>) => any, options?: AddEventListenerOptions): EE; + /** + * Fires when the host element is "ready", for host element itsel, it is just an alias for `scope.host(listener)`. + * This is handy to apply some property depending on full template such as: + * ```js + * const selected= "Z"; + * //... + * return el("form").append( + * el("select", null, on.host(e=> e.value=selected)).append( + * el("option", { value: "A", textContent: "A" }), + * //... + * el("option", { value: "Z", textContent: "Z" }), + * ), + * ); + * ``` + * */ + host, El extends (EE extends ddeElementAddon ? El : never)>(listener: (element: El) => any, host?: Host): EE; } export const on: On; export type Scope = { diff --git a/dist/iife.min.js b/dist/iife.min.js index fa81502..94bbb8e 100644 --- a/dist/iife.min.js +++ b/dist/iife.min.js @@ -1 +1 @@ -var DDE=(()=>{var W=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var it=Object.prototype.hasOwnProperty;var ut=(t,e)=>{for(var n in e)W(t,n,{get:e[n],enumerable:!0})},ft=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of st(e))!it.call(t,o)&&o!==n&&W(t,o,{get:()=>e[o],enumerable:!(r=ct(e,o))||r.enumerable});return t};var at=t=>ft(W({},"__esModule",{value:!0}),t);var _t={};ut(_t,{assign:()=>L,assignAttribute:()=>$,chainableAppend:()=>Q,classListDeclarative:()=>Y,createElement:()=>M,createElementNS:()=>mt,customElementRender:()=>Et,customElementWithDDE:()=>nt,dispatchEvent:()=>lt,el:()=>M,elNS:()=>mt,elementAttribute:()=>tt,lifecyclesToEvents:()=>nt,memo:()=>q,on:()=>D,queue:()=>ht,registerReactivity:()=>B,scope:()=>y,simulateSlots:()=>bt});var H=(...t)=>Object.prototype.hasOwnProperty.call(...t);function _(t){return typeof t>"u"}function b(t,e){return t instanceof e}function z(t,e){return Object.prototype.isPrototypeOf.call(e,t)}function N(t=null,e={}){return Object.create(t,e)}function g(...t){return Object.assign(...t)}function k(t,e){if(!t||!b(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var S={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function B(t,e=!0){return e?g(S,t):(Object.setPrototypeOf(t,S),t)}function R(t){return z(t,S)&&t!==S?t:S}var a={setDeleteAttr:dt,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 dt(t,e,n){if(Reflect.set(t,e,n),!!_(n)){if(Reflect.deleteProperty(t,e),b(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",v="dde:connected",w="dde:disconnected",Z="dde:attributeChanged";var O=a.M?pt():new Proxy({},{get(){return()=>{}}});function pt(){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}E(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.M(n(()=>{}));return u.observe(s,{childList:!0,subtree:!0}),()=>u.disconnect()},onConnected(s,u){d();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){d();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),f())}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 d(){e||(e=!0,r.observe(a.D.body,{childList:!0,subtree:!0}))}function f(){!e||t.size||(e=!1,r.disconnect())}function p(){return new Promise(function(s){(requestIdleCallback||requestAnimationFrame)(s)})}async function h(s){t.size>30&&await p();let u=[];if(!b(s,a.N))return u;for(let i of t.keys())i===s||!b(i,a.N)||s.contains(i)&&u.push(i);return u}function l(s,u){let i=!1;for(let m of s){if(u&&h(m).then(l),!t.has(m))continue;let A=t.get(m);A.length_c&&(m.dispatchEvent(new Event(v)),A.connected=new WeakSet,A.length_c=0,A.length_d||t.delete(m),i=!0)}return i}function E(s,u){let i=!1;for(let m of s)u&&h(m).then(E),!(!t.has(m)||!t.get(m).length_d)&&((globalThis.queueMicrotask||setTimeout)(ot(m)),i=!0);return i}function ot(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(w)),t.delete(s))}}}function lt(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 d=c.length?new CustomEvent(t,g({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(d)}}function D(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>g({},typeof t=="object"?t:null,{once:!0});D.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(v,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(v)),r):(k(e.signal,()=>O.offConnected(r,t))&&O.onConnected(r,t),r)}};D.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(w,t,e),r[C]||k(e.signal,()=>O.offDisconnected(r,t))&&O.onDisconnected(r,t),r}};function ht(t){return a.q(t)}var x=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],F=new WeakMap,y={get current(){return x[x.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(D.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...x]},push(t={}){return x.push(g({},this.current,{prevent:!1},t))},pushRoot(){return x.push(x[0])},pop(){if(x.length!==1)return x.pop()}};function J(...t){return this.appendOriginal(...t),this}function Q(t){return t.append===J||(t.appendOriginal=t.append,t.append=J),t}var T;function M(t,e,...n){let r=R(this),o=0,c,d;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(E=>E(d)),void 0):d;y.push({scope:t,host:f}),c=t(e||void 0);let p=b(c,a.F);if(c.nodeName==="#comment")break;let h=M.mark({type:"component",name:t.name,host:p?"this":"parentElement"});c.prepend(h),p&&(d=h);break}case t==="#text":c=L.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=L.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=L.call(this,a.D.createElementNS(T,t),e);break;case!c:c=L.call(this,a.D.createElement(t),e)}return Q(c),d||(d=c),n.forEach(f=>f(d)),o&&y.pop(),o=2,c}M.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function mt(t){let e=this;return function(...r){T=t;let o=M.call(e,...r);return T=void 0,o}}function bt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,d,f){if(f[0]===e)return c.apply(t,f);for(let p of f){let h=(p.slot||"")+n;try{tt(p,"remove","slot")}catch{}let l=o[h];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(E=>E.remove()),l.name=r+h),l.append(p)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}var P=new WeakMap,{setDeleteAttr:V}=a;function L(t,...e){if(!e.length)return t;P.set(t,X(t,this));for(let[n,r]of Object.entries(g({},...e)))$.call(this,t,n,r);return P.delete(t),t}function $(t,e,n){let{setRemoveAttr:r,s:o}=X(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,p)=>$.call(c,t,f,p));let[d]=e;if(d==="=")return r(e.slice(1),n);if(d===".")return K(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 V(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return I(o,e,t,n,K.bind(null,t[e]));case"ariaset":return I(o,e,t,n,(f,p)=>r("aria-"+f,p));case"classList":return Y.call(c,t,n)}return gt(t,e)?V(t,e,n):r(e,n)}function X(t,e){if(P.has(t))return P.get(t);let r=(b(t,a.S)?xt:vt).bind(null,t,"Attribute"),o=R(e);return{setRemoveAttr:r,s:o}}function Y(t,e){let n=R(this);return I(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function tt(t,e,n,r){return b(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function gt(t,e){if(!(e in t))return!1;let n=et(t,e);return!_(n.set)}function et(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||et(t,e)}function I(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,p]){f&&(f=new c(f),f.target=e,p=t.processReactiveAttribute(n,f,p,o),o(f,p))})}function vt(t,e,n,r){return t[(_(r)?"remove":"set")+e](n,r)}function xt(t,e,n,r,o=null){return t[(_(r)?"remove":"set")+e+"NS"](o,n,r)}function K(t,e,n){if(Reflect.set(t,e,n),!!_(n))return Reflect.deleteProperty(t,e)}function Et(t,e,n={}){let r=t.host||t;y.push({scope:r,host:(...d)=>d.length?d.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[C];o||nt(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(v)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(w,O.observe(t),{once:!0}),y.pop(),t.append(c)}function nt(t){return U(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(v))}),U(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(w)))}),U(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(Z,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function U(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var rt="__dde_memo",j=[];function q(t,e){if(!j.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=j;return o(n,H(r,n)?r[n]:e(t))}q.isScope=function(t){return t[rt]};q.scope=function(e,{signal:n,onlyLast:r}={}){let o=N();function c(...d){if(n&&n.aborted)return e.apply(this,d);let f=r?o:N();j.unshift({cache:o,after(h,l){return f[h]=l}});let p=e.apply(this,d);return j.shift(),o=f,p}return c[rt]=!0,c.clear=()=>o=N(),n&&n.addEventListener("abort",c.clear),c};return at(_t);})(); +var DDE=(()=>{var W=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var ft=Object.prototype.hasOwnProperty;var at=(t,e)=>{for(var n in e)W(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&&W(t,o,{get:()=>e[o],enumerable:!(r=it(e,o))||r.enumerable});return t};var dt=t=>pt(W({},"__esModule",{value:!0}),t);var _t={};at(_t,{assign:()=>R,assignAttribute:()=>$,chainableAppend:()=>tt,classListDeclarative:()=>nt,createElement:()=>M,createElementNS:()=>vt,customElementRender:()=>Et,customElementWithDDE:()=>ot,dispatchEvent:()=>mt,el:()=>M,elNS:()=>vt,lifecyclesToEvents:()=>ot,memo:()=>q,on:()=>y,queue:()=>bt,registerReactivity:()=>J,scope:()=>_,simulateSlots:()=>xt});var z=(...t)=>Object.prototype.hasOwnProperty.call(...t);function g(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 L(t=null,e={}){return Object.create(t,e)}function v(...t){return Object.assign(...t)}function k(t,e){if(!t||!h(t,AbortSignal))return!0;if(!t.aborted)return t.addEventListener("abort",e),function(){t.removeEventListener("abort",e)}}var a={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),!!g(n)){if(Reflect.deleteProperty(t,e),h(t,a.H)&&t.getAttribute(e)==="undefined")return t.removeAttribute(e);if(Reflect.get(t,e)==="undefined")return Reflect.set(t,e,"")}}var C="__dde_lifecyclesToEvents",x="dde:connected",O="dde:disconnected",Z="dde:attributeChanged";var A=a.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}w(i.removedNodes,!0)&&s()}},r=new a.M(n(f));return{observe(s){let u=new a.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),f())}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(a.D.body,{childList:!0,subtree:!0}))}function f(){!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,a.N))return u;for(let i of t.keys())i===s||!h(i,a.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(x)),S.connected=new WeakSet,S.length_c=0,S.length_d||t.delete(b),i=!0)}return i}function w(s,u){let i=!1;for(let b of s)u&&m(b).then(w),!(!t.has(b)||!t.get(b).length_d)&&((globalThis.queueMicrotask||setTimeout)(st(b)),i=!0);return i}function st(s){return()=>{s.isConnected||(s.dispatchEvent(new Event(O)),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,v({detail:c[0]},e)):new Event(t,e);return o.dispatchEvent(p)}}function y(t,e,n){return function(o){return o.addEventListener(t,e,n),o}}var G=t=>v({},typeof t=="object"?t:null,{once:!0});y.connected=function(t,e){return e=G(e),function(r){return r.addEventListener(x,t,e),r[C]?r:r.isConnected?(r.dispatchEvent(new Event(x)),r):(k(e.signal,()=>A.offConnected(r,t))&&A.onConnected(r,t),r)}};y.disconnected=function(t,e){return e=G(e),function(r){return r.addEventListener(O,t,e),r[C]||k(e.signal,()=>A.offDisconnected(r,t))&&A.onDisconnected(r,t),r}};var E=[{get scope(){return a.D.body},host:t=>t?t(a.D.body):a.D.body,prevent:!0}],I=new WeakMap,_={get current(){return E[E.length-1]},get host(){return this.current.host},get signal(){let{host:t}=this;if(I.has(t))return I.get(t);let e=new AbortController;return I.set(t,e),t(y.disconnected(()=>e.abort())),e.signal},preventDefault(){let{current:t}=this;return t.prevent=!0,t},get state(){return[...E]},push(t={}){return E.push(v({},this.current,{prevent:!1},t))},pushRoot(){return E.push(E[0])},pop(){if(E.length!==1)return E.pop()}};y.host=(t,e=_.host)=>n=>e(()=>t(n));var D={isSignal(t){return!1},processReactiveAttribute(t,e,n,r){return n}};function J(t,e=!0){return e?v(D,t):(Object.setPrototypeOf(t,D),t)}function N(t){return B(t,D)&&t!==D?t:D}function V(t,e,n,r){return t[(g(r)?"remove":"set")+e](n,r)}function K(t,e,n,r,o=null){return t[(g(r)?"remove":"set")+e+"NS"](o,n,r)}function F(t,e,n){if(Reflect.set(t,e,n),!!g(n))return Reflect.deleteProperty(t,e)}function Q(t,e,n,r){return h(t,a.H)?t[e+"Attribute"](n,r):t[e+"AttributeNS"](null,n,r)}function bt(t){return a.q(t)}function X(...t){return this.appendOriginal(...t),this}function tt(t){return t.append===X||(t.appendOriginal=t.append,t.append=X),t}var T;function M(t,e,...n){let r=N(this),o=0,c,p;switch((Object(e)!==e||r.isSignal(e))&&(e={textContent:e}),!0){case typeof t=="function":{o=1;let f=(...l)=>l.length?(o===1?n.unshift(...l):l.forEach(w=>w(p)),void 0):p;_.push({scope:t,host:f}),c=t(e||void 0);let d=h(c,a.F);if(c.nodeName==="#comment")break;let m=M.mark({type:"component",name:t.name,host:d?"this":"parentElement"});c.prepend(m),d&&(p=m);break}case t==="#text":c=R.call(this,a.D.createTextNode(""),e);break;case(t==="<>"||!t):c=R.call(this,a.D.createDocumentFragment(),e);break;case!!T:c=R.call(this,a.D.createElementNS(T,t),e);break;case!c:c=R.call(this,a.D.createElement(t),e)}return tt(c),p||(p=c),n.forEach(f=>f(p)),o&&_.pop(),o=2,c}M.mark=function(t,e=!1){t=Object.entries(t).map(([o,c])=>o+`="${c}"`).join(" ");let n=e?"":"/",r=a.D.createComment(``);return e&&(r.end=a.D.createComment("")),r};function vt(t){let e=this;return function(...r){T=t;let o=M.call(e,...r);return T=void 0,o}}var P=new WeakMap,{setDeleteAttr:Y}=a;function R(t,...e){if(!e.length)return t;P.set(t,et(t,this));for(let[n,r]of Object.entries(v({},...e)))$.call(this,t,n,r);return P.delete(t),t}function $(t,e,n){let{setRemoveAttr:r,s:o}=et(t,this),c=this;n=o.processReactiveAttribute(t,e,n,(f,d)=>$.call(c,t,f,d));let[p]=e;if(p==="=")return r(e.slice(1),n);if(p===".")return F(t,e.slice(1),n);if(/(aria|data)([A-Z])/.test(e))return e=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),r(e,n);switch(e==="className"&&(e="class"),e){case"xlink:href":return r(e,n,"http://www.w3.org/1999/xlink");case"textContent":return Y(t,e,n);case"style":if(typeof n!="object")break;case"dataset":return U(o,e,t,n,F.bind(null,t[e]));case"ariaset":return U(o,e,t,n,(f,d)=>r("aria-"+f,d));case"classList":return nt.call(c,t,n)}return gt(t,e)?Y(t,e,n):r(e,n)}function et(t,e){if(P.has(t))return P.get(t);let r=(h(t,a.S)?K:V).bind(null,t,"Attribute"),o=N(e);return{setRemoveAttr:r,s:o}}function nt(t,e){let n=N(this);return U(n,"classList",t,e,(r,o)=>t.classList.toggle(r,o===-1?void 0:!!o)),t}function gt(t,e){if(!(e in t))return!1;let n=rt(t,e);return!g(n.set)}function rt(t,e){if(t=Object.getPrototypeOf(t),!t)return{};let n=Object.getOwnPropertyDescriptor(t,e);return n||rt(t,e)}function U(t,e,n,r,o){let c=String;if(!(typeof r!="object"||r===null))return Object.entries(r).forEach(function([f,d]){f&&(f=new c(f),f.target=e,d=t.processReactiveAttribute(n,f,d,o),o(f,d))})}function xt(t,e=t){let n="\xB9\u2070",r="\u2713",o=Object.fromEntries(Array.from(e.querySelectorAll("slot")).filter(c=>!c.name.endsWith(n)).map(c=>[c.name+=n,c]));if(t.append=new Proxy(t.append,{apply(c,p,f){if(f[0]===e)return c.apply(t,f);for(let d of f){let m=(d.slot||"")+n;try{Q(d,"remove","slot")}catch{}let l=o[m];if(!l)return;l.name.startsWith(r)||(l.childNodes.forEach(w=>w.remove()),l.name=r+m),l.append(d)}return t.append=c,t}}),t!==e){let c=Array.from(t.childNodes);t.append(...c)}return e}function Et(t,e,n={}){let r=t.host||t;_.push({scope:r,host:(...p)=>p.length?p.forEach(f=>f(r)):r}),typeof n=="function"&&(n=n.call(r,r));let o=r[C];o||ot(r);let c=e.call(r,n);return o||r.dispatchEvent(new Event(x)),t.nodeType===11&&typeof t.mode=="string"&&r.addEventListener(O,A.observe(t),{once:!0}),_.pop(),t.append(c)}function ot(t){return H(t.prototype,"connectedCallback",function(e,n,r){e.apply(n,r),n.dispatchEvent(new Event(x))}),H(t.prototype,"disconnectedCallback",function(e,n,r){e.apply(n,r),(globalThis.queueMicrotask||setTimeout)(()=>!n.isConnected&&n.dispatchEvent(new Event(O)))}),H(t.prototype,"attributeChangedCallback",function(e,n,r){let[o,,c]=r;n.dispatchEvent(new CustomEvent(Z,{detail:[o,c]})),e.apply(n,r)}),t.prototype[C]=!0,t}function H(t,e,n){t[e]=new Proxy(t[e]||(()=>{}),{apply:n})}var ct="__dde_memo",j=[];function q(t,e){if(!j.length)return e(t);let n=typeof t=="object"?JSON.stringify(t):t,[{cache:r,after:o}]=j;return o(n,z(r,n)?r[n]:e(t))}q.isScope=function(t){return t[ct]};q.scope=function(e,{signal:n,onlyLast:r}={}){let o=L();function c(...p){if(n&&n.aborted)return e.apply(this,p);let f=r?o:L();j.unshift({cache:o,after(m,l){return f[m]=l}});let d=e.apply(this,p);return j.shift(),o=f,d}return c[ct]=!0,c.clear=()=>o=L(),n&&n.addEventListener("abort",c.clear),c};return dt(_t);})(); diff --git a/index.js b/index.js index 300755a..0d7b0f7 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,3 @@ -export * from "./src/dom.js"; -export * from "./src/customElement.js"; -export * from "./src/events.js"; -export { registerReactivity } from "./src/signals-lib/common.js"; +export * from "./src/dom-lib/index.js"; export { memo } from "./src/memo.js"; +export { registerReactivity } from "./src/signals-lib/common.js"; diff --git a/jsdom.js b/jsdom.js index 11b43dd..937a002 100644 --- a/jsdom.js +++ b/jsdom.js @@ -1,4 +1,4 @@ -import { enviroment as env } from './src/dom-common.js'; +import { enviroment as env } from './src/dom-lib/common.js'; env.ssr= " ssr"; const q_store= new Set(); diff --git a/src/dom-common.js b/src/dom-lib/common.js similarity index 97% rename from src/dom-common.js rename to src/dom-lib/common.js index 7caa2f2..daa3925 100644 --- a/src/dom-common.js +++ b/src/dom-lib/common.js @@ -21,7 +21,7 @@ export const enviroment= { M: globalThis.MutationObserver, q: p=> p || Promise.resolve(), }; -import { isInstance, isUndef } from './helpers.js'; +import { isInstance, isUndef } from '../helpers.js'; /** * Handles attribute setting with special undefined handling diff --git a/src/customElement.js b/src/dom-lib/customElement.js similarity index 61% rename from src/customElement.js rename to src/dom-lib/customElement.js index 0d21650..b812ebd 100644 --- a/src/customElement.js +++ b/src/dom-lib/customElement.js @@ -1,6 +1,47 @@ -import { keyLTE, evc, evd, eva } from "./dom-common.js"; -import { scope } from "./dom.js"; +import { keyLTE, evc, evd, eva } from "./common.js"; +import { scope } from "./scopes.js"; import { c_ch_o } from "./events-observer.js"; +import { elementAttribute } from "./helpers.js"; + +/** + * Simulates slot functionality for elements + * + * @param {HTMLElement} element - Parent element + * @param {HTMLElement} [root=element] - Root element containing slots + * @returns {HTMLElement} The root element + */ +export function simulateSlots(element, root= element){ + const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line + const slots= Object.fromEntries( + Array.from(root.querySelectorAll("slot")) + .filter(s => !s.name.endsWith(mark_e)) + .map(s => [(s.name += mark_e), s])); + element.append= new Proxy(element.append, { + apply(orig, _, els){ + if(els[0]===root) return orig.apply(element, els); + for(const el of els){ + const name= (el.slot||"")+mark_e; + try{ elementAttribute(el, "remove", "slot"); } catch(_error){} + const slot= slots[name]; + if(!slot) return; + if(!slot.name.startsWith(mark_s)){ + slot.childNodes.forEach(c=> c.remove()); + slot.name= mark_s+name; + } + slot.append(el); + //TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot })); + } + element.append= orig; //TODO?: better memory management, but non-native behavior! + return element; + } + }); + if(element!==root){ + const els= Array.from(element.childNodes); + //TODO?: els.forEach(el=> el.remove()); + element.append(...els); + } + return root; +} /** * Renders content into a custom element or shadow root diff --git a/src/dom.js b/src/dom-lib/el.js similarity index 62% rename from src/dom.js rename to src/dom-lib/el.js index 8859e52..ecaa32c 100644 --- a/src/dom.js +++ b/src/dom-lib/el.js @@ -1,7 +1,6 @@ -import { signals } from "./signals-lib/common.js"; -import { enviroment as env } from './dom-common.js'; -import { isInstance, isUndef, oAssign } from "./helpers.js"; -import { on } from "./events.js"; +import { signals } from "../signals-lib/common.js"; +import { enviroment as env } from './common.js'; +import { isInstance, isUndef, oAssign } from "../helpers.js"; /** * Queues a promise, this is helpful for crossplatform components (on server side we can wait for all registered @@ -11,84 +10,6 @@ import { on } from "./events.js"; */ export function queue(promise){ return env.q(promise); } -/** - * Array of scope contexts for tracking component hierarchies - * @type {{ scope: object, prevent: boolean, host: function }[]} - */ -const scopes= [ { - get scope(){ return env.D.body; }, - host: c=> c ? c(env.D.body) : env.D.body, - prevent: true, -} ]; -/** Store for disconnect abort controllers */ -const store_abort= new WeakMap(); -/** - * Scope management utility for tracking component hierarchies - */ -export const scope= { - /** - * Gets the current scope - * @returns {Object} Current scope context - */ - get current(){ return scopes[scopes.length-1]; }, - - /** - * Gets the host element of the current scope - * @returns {Function} Host accessor function - */ - get host(){ return this.current.host; }, - - /** - * Creates/gets an AbortController that triggers when the element disconnects - * */ - get signal(){ - const { host }= this; - if(store_abort.has(host)) return store_abort.get(host); - - const a= new AbortController(); - store_abort.set(host, a); - host(on.disconnected(()=> a.abort())); - return a.signal; - }, - - /** - * Prevents default behavior in the current scope - * @returns {Object} Current scope context - */ - preventDefault(){ - const { current }= this; - current.prevent= true; - return current; - }, - - /** - * Gets a copy of the current scope stack - * @returns {Array} Copy of scope stack - */ - get state(){ return [ ...scopes ]; }, - - /** - * Pushes a new scope to the stack - * @param {Object} [s={}] - Scope object to push - * @returns {number} New length of the scope stack - */ - push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); }, - - /** - * Pushes the root scope to the stack - * @returns {number} New length of the scope stack - */ - pushRoot(){ return scopes.push(scopes[0]); }, - - /** - * Pops the current scope from the stack - * @returns {Object|undefined} Popped scope or undefined if only one scope remains - */ - pop(){ - if(scopes.length===1) return; - return scopes.pop(); - }, -}; /** * Chainable append function for elements * @private @@ -107,6 +28,7 @@ export function chainableAppend(el){ /** Current namespace for element creation */ let namespace; +import { scope } from "./scopes.js"; /** * Creates a DOM element with specified tag, attributes and addons * @@ -191,46 +113,6 @@ export function createElementNS(ns){ /** Alias for createElementNS */ export { createElementNS as elNS }; -/** - * Simulates slot functionality for elements - * - * @param {HTMLElement} element - Parent element - * @param {HTMLElement} [root=element] - Root element containing slots - * @returns {HTMLElement} The root element - */ -export function simulateSlots(element, root= element){ - const mark_e= "¹⁰", mark_s= "✓"; //NOTE: Markers to identify slots processed by this function. Also “prevents” native behavior as it is unlikely to use these in names. // editorconfig-checker-disable-line - const slots= Object.fromEntries( - Array.from(root.querySelectorAll("slot")) - .filter(s => !s.name.endsWith(mark_e)) - .map(s => [(s.name += mark_e), s])); - element.append= new Proxy(element.append, { - apply(orig, _, els){ - if(els[0]===root) return orig.apply(element, els); - for(const el of els){ - const name= (el.slot||"")+mark_e; - try{ elementAttribute(el, "remove", "slot"); } catch(_error){} - const slot= slots[name]; - if(!slot) return; - if(!slot.name.startsWith(mark_s)){ - slot.childNodes.forEach(c=> c.remove()); - slot.name= mark_s+name; - } - slot.append(el); - //TODO?: el.dispatchEvent(new CustomEvent("dde:slotchange", { detail: slot })); - } - element.append= orig; //TODO?: better memory management, but non-native behavior! - return element; - } - }); - if(element!==root){ - const els= Array.from(element.childNodes); - //TODO?: els.forEach(el=> el.remove()); - element.append(...els); - } - return root; -} - /** Store for element assignment contexts */ const assign_context= new WeakMap(); const { setDeleteAttr }= env; @@ -251,6 +133,7 @@ export function assign(element, ...attributes){ assign_context.delete(element); return element; } +import { setDelete } from "./helpers.js"; /** * Assigns a single attribute to an element * @@ -290,6 +173,7 @@ export function assignAttribute(element, key, value){ } return isPropSetter(element, key) ? setDeleteAttr(element, key, value) : setRemoveAttr(key, value); } +import { setRemove, setRemoveNS } from "./helpers.js"; /** * Gets or creates assignment context for an element * @@ -320,21 +204,6 @@ export function classListDeclarative(element, toggle){ return element; } -/** - * Generic element attribute manipulation - * - * @param {Element} element - Element to manipulate - * @param {string} op - Operation ("set" or "remove") - * @param {string} key - Attribute name - * @param {any} [value] - Attribute value - * @returns {void} - */ -export function elementAttribute(element, op, key, value){ - if(isInstance(element, env.H)) - return element[op+"Attribute"](key, value); - return element[op+"AttributeNS"](null, key, value); -} - //TODO: add cache? `(Map/Set)` /** * Checks if a property can be set on an element @@ -385,45 +254,3 @@ function forEachEntries(s, target, element, obj, cb){ cb(key, val); }); } - -/** - * Sets or removes an attribute based on value - * - * @param {Element} obj - Element to modify - * @param {string} prop - Property suffix ("Attribute") - * @param {string} key - Attribute name - * @param {any} val - Attribute value - * @returns {void} - * @private - */ -function setRemove(obj, prop, key, val){ - return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val); -} - -/** - * Sets or removes a namespaced attribute based on value - * - * @param {Element} obj - Element to modify - * @param {string} prop - Property suffix ("Attribute") - * @param {string} key - Attribute name - * @param {any} val - Attribute value - * @param {string|null} [ns=null] - Namespace URI - * @returns {void} - * @private - */ -function setRemoveNS(obj, prop, key, val, ns= null){ - return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val); -} - -/** - * Sets or deletes a property based on value - * - * @param {Object} obj - Object to modify - * @param {string} key - Property name - * @param {any} val - Property value - * @returns {void} - * @private - */ -function setDelete(obj, key, val){ - Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); -} diff --git a/src/events-observer.js b/src/dom-lib/events-observer.js similarity index 98% rename from src/events-observer.js rename to src/dom-lib/events-observer.js index 451ef8c..e09199b 100644 --- a/src/events-observer.js +++ b/src/dom-lib/events-observer.js @@ -1,5 +1,5 @@ -import { enviroment as env, evc, evd } from './dom-common.js'; -import { isInstance } from "./helpers.js"; +import { enviroment as env, evc, evd } from './common.js'; +import { isInstance } from "../helpers.js"; /** * Connection changes observer for tracking element connection/disconnection diff --git a/src/events.js b/src/dom-lib/events.js similarity index 96% rename from src/events.js rename to src/dom-lib/events.js index 0ee3a5f..4670797 100644 --- a/src/events.js +++ b/src/dom-lib/events.js @@ -1,5 +1,5 @@ -import { keyLTE, evc, evd } from './dom-common.js'; -import { oAssign, onAbort } from './helpers.js'; +import { keyLTE, evc, evd } from './common.js'; +import { oAssign, onAbort } from '../helpers.js'; /** * Creates a function to dispatch events on elements diff --git a/src/dom-lib/helpers.js b/src/dom-lib/helpers.js new file mode 100644 index 0000000..bbf9a47 --- /dev/null +++ b/src/dom-lib/helpers.js @@ -0,0 +1,57 @@ +import { enviroment as env } from './common.js'; +import { isInstance, isUndef } from "../helpers.js"; +/** + * Sets or removes an attribute based on value + * + * @param {Element} obj - Element to modify + * @param {string} prop - Property suffix ("Attribute") + * @param {string} key - Attribute name + * @param {any} val - Attribute value + * @returns {void} + * @private + */ +export function setRemove(obj, prop, key, val){ + return obj[ (isUndef(val) ? "remove" : "set") + prop ](key, val); +} + +/** + * Sets or removes a namespaced attribute based on value + * + * @param {Element} obj - Element to modify + * @param {string} prop - Property suffix ("Attribute") + * @param {string} key - Attribute name + * @param {any} val - Attribute value + * @param {string|null} [ns=null] - Namespace URI + * @returns {void} + * @private + */ +export function setRemoveNS(obj, prop, key, val, ns= null){ + return obj[ (isUndef(val) ? "remove" : "set") + prop + "NS" ](ns, key, val); +} + +/** + * Sets or deletes a property based on value + * + * @param {Object} obj - Object to modify + * @param {string} key - Property name + * @param {any} val - Property value + * @returns {void} + * @private + */ +export function setDelete(obj, key, val){ + Reflect.set(obj, key, val); if(!isUndef(val)) return; return Reflect.deleteProperty(obj, key); +} +/** + * Generic element attribute manipulation + * + * @param {Element} element - Element to manipulate + * @param {string} op - Operation ("set" or "remove") + * @param {string} key - Attribute name + * @param {any} [value] - Attribute value + * @returns {void} + */ +export function elementAttribute(element, op, key, value){ + if(isInstance(element, env.H)) + return element[op+"Attribute"](key, value); + return element[op+"AttributeNS"](null, key, value); +} diff --git a/src/dom-lib/index.js b/src/dom-lib/index.js new file mode 100644 index 0000000..7c5fa66 --- /dev/null +++ b/src/dom-lib/index.js @@ -0,0 +1,4 @@ +export * from "./scopes.js"; +export * from "./el.js"; +export * from "./events.js"; +export * from "./customElement.js"; diff --git a/src/dom-lib/scopes.js b/src/dom-lib/scopes.js new file mode 100644 index 0000000..453f3a6 --- /dev/null +++ b/src/dom-lib/scopes.js @@ -0,0 +1,84 @@ +import { enviroment as env } from './common.js'; +import { oAssign } from "../helpers.js"; +import { on } from "./events.js"; + +/** + * Array of scope contexts for tracking component hierarchies + * @type {{ scope: object, prevent: boolean, host: function }[]} + */ +const scopes= [ { + get scope(){ return env.D.body; }, + host: c=> c ? c(env.D.body) : env.D.body, + prevent: true, +} ]; +/** Store for disconnect abort controllers */ +const store_abort= new WeakMap(); +/** + * Scope management utility for tracking component hierarchies + */ +export const scope= { + /** + * Gets the current scope + * @returns {Object} Current scope context + */ + get current(){ return scopes[scopes.length-1]; }, + + /** + * Gets the host element of the current scope + * @returns {Function} Host accessor function + */ + get host(){ return this.current.host; }, + + /** + * Creates/gets an AbortController that triggers when the element disconnects + * */ + get signal(){ + const { host }= this; + if(store_abort.has(host)) return store_abort.get(host); + + const a= new AbortController(); + store_abort.set(host, a); + host(on.disconnected(()=> a.abort())); + return a.signal; + }, + + /** + * Prevents default behavior in the current scope + * @returns {Object} Current scope context + */ + preventDefault(){ + const { current }= this; + current.prevent= true; + return current; + }, + + /** + * Gets a copy of the current scope stack + * @returns {Array} Copy of scope stack + */ + get state(){ return [ ...scopes ]; }, + + /** + * Pushes a new scope to the stack + * @param {Object} [s={}] - Scope object to push + * @returns {number} New length of the scope stack + */ + push(s= {}){ return scopes.push(oAssign({}, this.current, { prevent: false }, s)); }, + + /** + * Pushes the root scope to the stack + * @returns {number} New length of the scope stack + */ + pushRoot(){ return scopes.push(scopes[0]); }, + + /** + * Pops the current scope from the stack + * @returns {Object|undefined} Popped scope or undefined if only one scope remains + */ + pop(){ + if(scopes.length===1) return; + return scopes.pop(); + }, +}; +// TODO: better place while no cross-import? +on.host= (fn, host= scope.host)=> el=> host(()=> fn(el)); diff --git a/src/signals-lib/signals-lib.js b/src/signals-lib/signals-lib.js index b6982ec..748fb61 100644 --- a/src/signals-lib/signals-lib.js +++ b/src/signals-lib/signals-lib.js @@ -159,10 +159,10 @@ signal.clear= function(...signals){ }; /** Property key for tracking reactive elements */ const key_reactive= "__dde_reactive"; -import { enviroment as env, eva } from "../dom-common.js"; -import { el } from "../dom.js"; -import { scope } from "../dom.js"; -import { on } from "../events.js"; +import { enviroment as env, eva } from "../dom-lib/common.js"; +import { el } from "../dom-lib/index.js"; +import { scope } from "../dom-lib/scopes.js"; +import { on } from "../dom-lib/events.js"; import { memo } from "../memo.js"; /**