@zeix/ui-element/index.js

UIElement - minimal reactive framework based on Web Components

var X=(B)=>typeof B==="function",KB=(B)=>X(B)&&B.constructor.name==="AsyncFunction",h=(B,K)=>Object.prototype.toString.call(B)===`[object ${K}]`,AB=(B)=>B instanceof Error,m=(B)=>B instanceof DOMException&&B.name==="AbortError",WB=(B)=>B instanceof Promise,D=(B)=>AB(B)?B:Error(String(B));class T extends Error{constructor(B){super(`Circular dependency in ${B} detected`);return this}}var _,v=new Set,l=0,r=new Map,c,ZB=()=>{c=void 0;let B=Array.from(r.values());r.clear();for(let K of B)K()},xB=()=>{if(c)cancelAnimationFrame(c);c=requestAnimationFrame(ZB)};queueMicrotask(ZB);var S=(B)=>{if(_&&!B.has(_)){let K=_;B.add(K),_.cleanups.add(()=>{B.delete(K)})}},q=(B)=>{for(let K of B)if(l)v.add(K);else K()},a=()=>{while(v.size){let B=Array.from(v);v.clear();for(let K of B)K()}},JB=(B)=>{l++;try{B()}finally{a(),l--}},k=(B,K)=>{let $=_;_=K;try{B()}finally{_=$}},R=(B,K)=>new Promise(($,W)=>{r.set(K,()=>{try{$(B())}catch(Z){W(Z)}}),xB()});function x(B){let{signals:K,ok:$,err:W=console.error,nil:Z=()=>{}}=X(B)?{signals:[],ok:B}:B,J=!1,I=()=>k(()=>{if(J)throw new T("effect");J=!0;let G=void 0;try{G=o({signals:K,ok:$,err:W,nil:Z})}catch(H){W(D(H))}if(X(G))I.cleanups.add(G);J=!1},I);return I.cleanups=new Set,I(),()=>{I.cleanups.forEach((G)=>G()),I.cleanups.clear()}}var IB="Computed",CB=(B,K)=>{if(!K)return!1;return B.name===K.name&&B.message===K.message},C=(B)=>{let K=new Set,$=X(B)?void 0:{nil:()=>V,err:(...z)=>{if(z.length>1)throw new AggregateError(z);else throw z[0]},...B},W=$?$.ok:B,Z=V,J,I=!0,G=!1,H=!1,Q,Y=(z)=>{if(!Object.is(z,Z))Z=z,I=!1,J=void 0,G=!0},d=()=>{G=V!==Z,Z=V,J=void 0},P=(z)=>{let p=D(z);G=!CB(p,J),Z=V,J=p},L=(z)=>{if(H=!1,Q=void 0,Y(z),G)q(K)},VB=(z)=>{if(H=!1,Q=void 0,P(z),G)q(K)},PB=()=>{H=!1,Q=void 0,$B()},g=()=>{if(I=!0,Q?.abort("Aborted because source signal changed"),K.size)q(K);else g.cleanups.forEach((z)=>z()),g.cleanups.clear()};g.cleanups=new Set;let $B=()=>k(()=>{if(H)throw new T("computed");if(G=!1,KB(W)){if(Q)return Z;if(Q=new AbortController,$)$.abort=$.abort instanceof AbortSignal?AbortSignal.any([$.abort,Q.signal]):Q.signal;Q.signal.addEventListener("abort",PB,{once:!0})}let z;H=!0;try{z=$&&$.signals.length?o($):W(Q?.signal)}catch(p){if(m(p))d();else P(p);H=!1;return}if(WB(z))z.then(L,VB);else if(z==null||V===z)d();else Y(z);H=!1},g),s={[Symbol.toStringTag]:IB,get:()=>{if(S(K),a(),I)$B();if(J)throw J;return Z},map:(z)=>C({signals:[s],ok:z}),tap:(z)=>x({signals:[s],...X(z)?{ok:z}:z})};return s},E=(B)=>h(B,IB);var GB="State",u=(B)=>{let K=new Set,$=B,W={[Symbol.toStringTag]:GB,get:()=>{return S(K),$},set:(Z)=>{if(Object.is($,Z))return;if($=Z,q(K),V===$)K.clear()},update:(Z)=>{W.set(Z($))},map:(Z)=>C({signals:[W],ok:Z}),tap:(Z)=>x({signals:[W],...X(Z)?{ok:Z}:Z})};return W},F=(B)=>h(B,GB);var V=Symbol(),M=(B)=>F(B)||E(B),QB=(B)=>X(B)&&B.length<2,b=(B)=>M(B)?B:QB(B)?C(B):u(B),o=(B)=>{let{signals:K,abort:$,ok:W,err:Z,nil:J}=B,I=[],G=!1,H=K.map((Q)=>{try{let Y=Q.get();if(Y===V)G=!0;return Y}catch(Y){if(m(Y))throw Y;I.push(D(Y))}});try{return G?J($):I.length?Z(...I):W(...H)}catch(Q){if(m(Q))throw Q;let Y=D(Q);return Z(Y)}};var U=!1,FB="debug",UB="info",LB="warn",f="error",qB=(B)=>B?`#${B}`:"",MB=(B)=>B.length?`.${Array.from(B).join(".")}`:"",t=(B)=>!!B&&typeof B==="object",O=(B)=>typeof B==="string",j=(B)=>`<${B.localName}${qB(B.id)}${MB(B.classList)}>`,N=(B)=>O(B)?`"${B}"`:t(B)?JSON.stringify(B):String(B),i=(B)=>{if(B===null)return"null";if(typeof B!=="object")return typeof B;if(Array.isArray(B))return"Array";if(Symbol.toStringTag in Object(B))return B[Symbol.toStringTag];return B.constructor?.name||"Object"},A=(B,K,$="debug")=>{if(["error","warn"].includes($))console[$](K,B);return B};class YB extends Error{constructor(B){super(B);this.name="CircularMutationError"}}var OB=(B)=>B.nodeType===Node.ELEMENT_NODE,yB=(B)=>B instanceof HTMLElement&&B.localName.includes("-"),DB=(B)=>{let K=new Set;if(B.includes("."))K.add("class");if(B.includes("#"))K.add("id");if(B.includes("[")){let $=B.split("[");for(let W=1;W<$.length;W++){let Z=$[W];if(!Z.includes("]"))continue;let J=Z.split("=")[0].trim().replace(/[^a-zA-Z0-9_-]/g,"");if(J)K.add(J)}}return[...K]},_B=(B,K)=>{if(B.length!==K.length)return!1;let $=new Set(B);for(let W of K)if(!$.has(W))return!1;return!0},XB=(B,K,$)=>{let W=new MutationObserver($),Z=DB(K),J={childList:!0,subtree:!0};if(Z.length)J.attributes=!0,J.attributeFilter=Z;return W.observe(B,J),W},n=(B,K,$)=>{let W=B.filter(X).map((Z)=>Z(K,$));return()=>{W.filter(X).forEach((Z)=>Z()),W.length=0}},RB=(B,...K)=>($)=>{let W=($.shadowRoot||$).querySelector(B);if(W)n(K,$,W)},NB=(B,...K)=>($)=>{let W=new Map,Z=$.shadowRoot||$,J=(Q)=>{if(!W.has(Q))W.set(Q,n(K,$,Q))},I=(Q)=>{let Y=W.get(Q);if(X(Y))Y();W.delete(Q)},G=(Q)=>(Y)=>{if(OB(Y)){if(Y.matches(B))Q(Y);Y.querySelectorAll(B).forEach(Q)}},H=XB(Z,B,(Q)=>{for(let Y of Q)Y.addedNodes.forEach(G(J)),Y.removedNodes.forEach(G(I))});return Z.querySelectorAll(B).forEach(J),()=>{H.disconnect(),W.forEach((Q)=>Q()),W.clear()}},wB=(B,K)=>{let $=new Set,W=()=>Array.from(B.querySelectorAll(K)),Z=V,J,I=0,G=2,H=()=>{Z=W(),J=XB(B,K,()=>{if(!$.size){J?.disconnect(),J=void 0;return}if(I++,I>G)throw J?.disconnect(),J=void 0,I=0,new YB("Circular mutation in element selection detected");try{let Y=W();if(!_B(Z,Y))Z=Y,q($)}finally{I--}})},Q={[Symbol.toStringTag]:"Computed",get:()=>{if(S($),!$.size)Z=W();else if(!J)H();return Z},map:(Y)=>C(()=>Y(Q.get())),tap:(Y)=>x({signals:[Q],...X(Y)?{ok:Y}:Y})};return Q},TB=(B,K)=>($,W=$)=>{if(!X(K))throw new TypeError(`Invalid event listener provided for "${B} event on element ${j(W)}`);return W.addEventListener(B,K),()=>W.removeEventListener(B,K)},SB=(B,K)=>($,W=$)=>{W.dispatchEvent(new CustomEvent(B,{detail:X(K)?K(W):K,bubbles:!0}))},kB=(B)=>(K,$)=>{let W=$.localName;if(!yB($))throw new TypeError("Target element must be a custom element");let Z=X(B)?B($):B;if(!t(Z))throw new TypeError("Passed signals must be an object or a provider function");customElements.whenDefined(W).then(()=>{for(let[J,I]of Object.entries(Z)){let G=O(I)?K.getSignal(J):b(I);$.setSignal(J,G)}}).catch((J)=>{throw new Error(`Failed to pass signals to ${j($)}}`,{cause:J})})};var w=Symbol(),EB=new Set(Object.getOwnPropertyNames(HTMLElement.prototype)),bB=new Set(["constructor","prototype","__proto__","toString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString"]),e=(B)=>X(B)&&B.length>=2,fB=(B)=>!(EB.has(B)||bB.has(B)),dB=(B,K={},$)=>{class W extends HTMLElement{debug;#B={};#$;static observedAttributes=Object.entries(K)?.filter(([,Z])=>e(Z)).map(([Z])=>Z)??[];constructor(){super();for(let[Z,J]of Object.entries(K)){if(J==null)continue;let I=e(J)?J(this,null):X(J)?J(this):J;if(I!=null)this.setSignal(Z,b(I))}}connectedCallback(){if(U){if(this.debug=this.hasAttribute("debug"),this.debug)A(this,"Connected")}let Z=$(this);if(!Array.isArray(Z))throw new TypeError(`Expected array of functions as return value of setup function in ${j(this)}`);this.#$=n(Z,this,this)}disconnectedCallback(){if(X(this.#$))this.#$();if(U&&this.debug)A(this,"Disconnected")}attributeChangedCallback(Z,J,I){if(I===J||E(this.#B[Z]))return;let G=K[Z];if(!e(G))return;let H=G(this,I,J);if(U&&this.debug)A(I,`Attribute "${Z}" of ${j(this)} changed from ${N(J)} to ${N(I)}, parsed as <${i(H)}> ${N(H)}`);this[Z]=H}getSignal(Z){let J=this.#B[Z];if(U&&this.debug)A(J,`Get ${i(J)} "${String(Z)}" in ${j(this)}`);return J}setSignal(Z,J){if(!fB(String(Z)))throw new TypeError(`Invalid property name "${String(Z)}". Property names must be valid JavaScript identifiers and not conflict with inherited HTMLElement properties.`);if(!M(J))throw new TypeError(`Expected signal as value for property "${String(Z)}" on ${j(this)}.`);let I=this.#B[Z],G=F(J);if(this.#B[Z]=J,Object.defineProperty(this,Z,{get:J.get,set:G?J.set:void 0,enumerable:!0,configurable:G}),I&&F(I))I.set(V);if(U&&this.debug)A(J,`Set ${i(J)} "${String(Z)} in ${j(this)}`)}}return customElements.define(B,W),W};var BB="context-request";class zB extends Event{B;K;$;constructor(B,K,$=!1){super(BB,{bubbles:!0,composed:!0});this.context=B;this.callback=K;this.subscribe=$}}var pB=(B)=>(K)=>{let $=(W)=>{let{context:Z,callback:J}=W;if(B.includes(Z)&&X(J))W.stopPropagation(),J(K.getSignal(String(Z)))};return K.addEventListener(BB,$),()=>K.removeEventListener(BB,$)},mB=(B)=>(K)=>{let $;return K.dispatchEvent(new zB(B,(W)=>{$=W})),$};var HB=(B,K)=>{if(K==null)return;let $=B(K);return Number.isFinite($)?$:void 0},gB=(B,K)=>K!=="false"&&K!=null,hB=(B=0)=>(K,$)=>HB(parseInt,$)??B,vB=(B=0)=>(K,$)=>HB(parseFloat,$)??B,cB=(B="")=>(K,$)=>$??B,oB=(B)=>(K,$)=>$!=null&&B.includes($.toLowerCase())?$:B[0],uB=(B)=>(K,$)=>{if(($??B)==null)throw new ReferenceError("Value and fallback are both null or undefined");if($==null)return B;if($==="")throw new SyntaxError("Empty string is not valid JSON");let W;try{W=JSON.parse($)}catch(Z){throw new SyntaxError(`Failed to parse JSON: ${String(Z)}`,{cause:Z})}return W??B};var jB=(B,K,$)=>O(B)?K.getSignal(B).get():M(B)?B.get():X(B)?B($):w,iB=(B)=>{if(/^(mailto|tel):/i.test(B))return!0;if(B.includes("://"))try{let K=new URL(B,window.location.origin);return["http:","https:","ftp:"].includes(K.protocol)}catch(K){return!1}return!0},nB=(B,K,$)=>{if(/^on/i.test(K))throw new Error(`Unsafe attribute: ${K}`);if($=String($).trim(),!iB($))throw new Error(`Unsafe URL for ${K}: ${$}`);B.setAttribute(K,$)},y=(B,K)=>($,W)=>{let{op:Z,read:J,update:I}=K,G=J(W),H={a:"attribute ",c:"class ",h:"inner HTML",p:"property ",s:"style property ",t:"text content"},Q="";if(O(B)&&O(G)&&$[B]===w)$.attributeChangedCallback(B,null,G);let Y=(P)=>()=>{if(U&&$.debug)A(W,`${P} ${H[Z]+Q} of ${j(W)} in ${j($)}`);K.resolve?.(W)},d=(P)=>(L)=>{A(L,`Failed to ${P} ${H[Z]+Q} of ${j(W)} in ${j($)}`,f),K.reject?.(L)};return x(()=>{let P=w;try{P=jB(B,$,W)}catch(L){A(L,`Failed to resolve value of ${N(B)} for ${H[Z]+Q} of ${j(W)} in ${j($)}`,f);return}if(P===w)P=G;else if(P===V)P=K.delete?null:G;if(K.delete&&P===null)R(()=>{return Q=K.delete(W),!0},[W,Z]).then(Y("Deleted")).catch(d("delete"));else if(P!=null){let L=J(W);if(Object.is(P,L))return;R(()=>{return Q=I(W,P),!0},[W,Z]).then(Y("Updated")).catch(d("update"))}})},sB=(B,K)=>($,W)=>{let Z=(I)=>()=>{if(U&&$.debug)A(W,`${I} element in ${j(W)} in ${j($)}`);if(X(K?.resolve))K.resolve(W);else{let G=M(B)?B:O(B)?$.getSignal(B):void 0;if(F(G))G.set(0)}},J=(I)=>(G)=>{A(G,`Failed to ${I} element in ${j(W)} in ${j($)}`,f),K?.reject?.(G)};return x(()=>{let I=0;try{I=jB(B,$,W)}catch(G){A(G,`Failed to resolve value of ${N(B)} for insertion or deletion in ${j(W)} in ${j($)}`,f);return}if(I===w)I=0;if(I>0){if(!K)throw new TypeError("No inserter provided");R(()=>{for(let G=0;G<I;G++){let H=K.create(W);if(!H)continue;W.insertAdjacentElement(K.position??"beforeend",H)}return!0},[W,"i"]).then(Z("Inserted")).catch(J("insert"))}else if(I<0)R(()=>{if(K&&(K.position==="afterbegin"||K.position==="beforeend"))for(let G=0;G>I;G--)if(K.position==="afterbegin")W.firstElementChild?.remove();else W.lastElementChild?.remove();else W.remove();return!0},[W,"r"]).then(Z("Removed")).catch(J("remove"))})},lB=(B)=>y(B,{op:"t",read:(K)=>K.textContent,update:(K,$)=>{return Array.from(K.childNodes).filter((W)=>W.nodeType!==Node.COMMENT_NODE).forEach((W)=>W.remove()),K.append(document.createTextNode($)),""}}),rB=(B,K=B)=>y(K,{op:"p",read:($)=>(B in $)?$[B]:V,update:($,W)=>{return $[B]=W,String(B)}}),aB=(B,K=B)=>y(K,{op:"a",read:($)=>$.getAttribute(B),update:($,W)=>{return nB($,B,W),B},delete:($)=>{return $.removeAttribute(B),B}}),tB=(B,K=B)=>y(K,{op:"a",read:($)=>$.hasAttribute(B),update:($,W)=>{return $.toggleAttribute(B,W),B}}),eB=(B,K=B)=>y(K,{op:"c",read:($)=>$.classList.contains(B),update:($,W)=>{return $.classList.toggle(B,W),B}}),B$=(B,K=B)=>y(K,{op:"s",read:($)=>$.style.getPropertyValue(B),update:($,W)=>{return $.style.setProperty(B,W),B},delete:($)=>{return $.style.removeProperty(B),B}}),$$=(B,K,$)=>y(B,{op:"h",read:(W)=>(W.shadowRoot||!K?W:null)?.innerHTML??"",update:(W,Z)=>{if(!Z){if(W.shadowRoot)W.shadowRoot.innerHTML="<slot></slot>";return""}if(K&&!W.shadowRoot)W.attachShadow({mode:K});let J=W.shadowRoot||W;if(J.innerHTML=Z,!$)return"";return J.querySelectorAll("script").forEach((I)=>{let G=document.createElement("script");G.appendChild(document.createTextNode(I.textContent??"")),J.appendChild(G),I.remove()})," with scripts"}});export{k as watch,y as updateElement,eB as toggleClass,tB as toggleAttribute,b as toSignal,u as state,lB as setText,B$ as setStyle,rB as setProperty,aB as setAttribute,wB as selection,pB as provide,kB as pass,TB as on,A as log,F as isState,M as isSignal,E as isComputed,sB as insertOrRemoveElement,RB as first,R as enqueue,SB as emit,x as effect,$$ as dangerouslySetInnerHTML,mB as consume,C as computed,dB as component,JB as batch,cB as asString,vB as asNumber,uB as asJSON,hB as asInteger,oB as asEnum,gB as asBoolean,NB as all,V as UNSET,w as RESET,LB as LOG_WARN,UB as LOG_INFO,f as LOG_ERROR,FB as LOG_DEBUG};