From 55a60ab37b90a61c85447eca87b0bc69f2758b80 Mon Sep 17 00:00:00 2001 From: Kevin Bulteel Date: Wed, 21 Feb 2024 10:20:37 +0100 Subject: [PATCH] fix: compatability with svg --- packages/@hec.js/api/lib/src/api.js | 5 ----- packages/@hec.js/ui/dist/hec.esm.min.js | 2 +- packages/@hec.js/ui/dist/hec.min.js | 2 +- packages/@hec.js/ui/lib/src/plugins.js | 2 +- packages/@hec.js/ui/lib/src/template.js | 5 ++--- 5 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/@hec.js/api/lib/src/api.js b/packages/@hec.js/api/lib/src/api.js index ae0dadc..7532408 100644 --- a/packages/@hec.js/api/lib/src/api.js +++ b/packages/@hec.js/api/lib/src/api.js @@ -126,11 +126,6 @@ export class API { const response = await route.fetch(apiRequest, this.#context); if (response) { - - if (route.contentType && !route.contentType.includes('*')) { - response.headers.set('content-type', route.contentType); - } - return response; } } diff --git a/packages/@hec.js/ui/dist/hec.esm.min.js b/packages/@hec.js/ui/dist/hec.esm.min.js index bf56cb5..d178d77 100644 --- a/packages/@hec.js/ui/dist/hec.esm.min.js +++ b/packages/@hec.js/ui/dist/hec.esm.min.js @@ -1 +1 @@ -function j(t){let r=t.matchAll(/([^ {}\s]+)/g),n={meta:{},text:t,prop:null};for(let e of r)if(e[1].includes("=")){let a=e[1].split("=");n.meta[a[0]]=a[1].replaceAll(/'|"/g,"")}else n.prop=e[1];return n}var v={};var S=new WeakMap,A=t=>S.get(t),xt=t=>S.delete(t),B=t=>S.has(t),L=(t,r)=>{let n=A(t);n&&typeof n=="object"?S.set(t,Object.assign(n,r)):S.set(t,r)},d=t=>typeof t=="function"?d(t()):t;function p(t,r){let n=r.split(".");if(!r)return t;for(let e of n){if(["state"].includes(e)&&t?.state)return t[e];if(m(t)){let a=t()?.[e];if(m(a)){let s=new AbortController,o=h(a());a.subscribe({next:o},{signal:s.signal});let i=l=>{s.abort(),m(l[e])?(s=new AbortController,l[e].subscribe({next:o},{signal:s.signal}),o(l[e]())):o(l[e])};t.subscribe({next:i}),t=o}else t=t.map(s=>s&&s[e])}else if(typeof t=="function")t=d(t);else if(typeof t[e]<"u")typeof t[e]=="function"&&!m(t[e])?t=t[e].bind(t):t=t[e];else return}return t}function I(t,r){let n=r.split(".");if(!r)return!1;for(let e of n){if(["loading","error"].includes(e)&&t?.loading&&t?.error)return t[e];if(typeof t=="function")t=d(t);else if(typeof t[e]<"u")t=t[e];else return!1}return!0}var R={items:new Map,setItem(t,r){this.items.set(t,r.toString())},get length(){return this.items.keys().length},key(t){return Array.from(this.items.values()).at(t)},clear(){this.items.clear()},getItem(t){return this.items.get(t)},removeItem(t){this.items.delete(t)}},N=new Map;function it(t){try{let r=window[t+"Storage"];return typeof r.length=="number"?r:R}catch{return R}}window.addEventListener("storage",t=>{if(!N.has(t.key))return;let r=N.get(t.key),n=t.storageArea.getItem(t.key);typeof n=="string"&&n!=="undefined"&&r.update(JSON.parse(n))});function h(t=null,r={}){if(r.id&&N.has(r.id))return N.get(r.id);let n=[],e=r.storage&&it(r.storage),a=l=>{t=l,e&&e.setItem(r.id,JSON.stringify(t));for(let c of n)c.next(t)};function s(){return arguments.length&&t!==arguments[0]&&a(arguments[0]),t}let o=(l,c=null)=>{n.push(l),c?.signal.addEventListener("abort",()=>{let u=n.indexOf(l);u>-1&&n.splice(u,1)},{once:!0})};if(e){let l=e.getItem(r.id);a(typeof l=="string"&&l!=="undefined"?JSON.parse(l):t)}let i=Object.assign(s,{id:r.id,storage:r.storage,toString:()=>t.toString(),set:l=>t=l,update:a,subscribe:o,map:l=>{let c=h(l(t)),u=new AbortController,w=c.subscribe;return o({next:f=>c(l(f))},{signal:u.signal}),Object.assign(c,{set:()=>null,subscribe:(f,y)=>{w(f,y),y?.signal.addEventListener("abort",()=>u.abort())}})},filter:l=>{let c=h(l(t)?t:null);return o({next:u=>l(u)?c(u):null}),Object.assign(c,{set:()=>null})}});return r.id&&N.set(r.id,i),i}function lt(t,r=[],n=null){for(let e of r)e.subscribe({next:()=>n=t(n)});return t(n)}function vt(t,r=[],n=null){let e=h(null);return e(lt(a=>e(t(a)),r,n)),e}function ct(t,r=null){let n=h(r),e=h("loaded"),a=async()=>{if(e()!="pending"){try{e("pending"),n(await t()),e("loaded"),delete n.error}catch(s){e("error"),n.error=s}return n()}};return a(),Object.assign(n,{state:e,refetch:a})}function St(t,r,n=null){let e=ct(()=>r(d(t)),n);return m(t)&&t.subscribe({next:()=>e.refetch()}),e}var m=t=>t&&t.subscribe;var ut=h({}),P=h(location.pathname);var b=document.querySelector('head meta[name="route"]');b||(b=document.createElement("meta"),b.name="route",b.content=location.pathname,document.head.append(b));var E=()=>{b.content="",P(location.pathname),ut(Object.fromEntries(new URLSearchParams(location.search))),b.content=b.content||location.pathname};window.addEventListener("popstate",E);window.addEventListener("hashchange",E);var ft=window.history.pushState,mt=window.history.replaceState;window.history.pushState=function(r,n,e){ft.call(window.history,r,n,e),E()};window.history.replaceState=function(r,n,e){mt.call(window.history,r,n,e),E()};var M=new WeakMap,dt=new MutationObserver(t=>{for(let r of t)M.has(r.target)&&M.get(r.target)()}),_={select:"[data-match]",run:t=>{let r=t.dataset.match,n=s=>s.replace(/index\.*[a-z0-9]*$/gm,"");function e(){return n(new URL(t.dataset.route||t.getAttribute("href"),location.href).pathname)}let a=()=>{e()==n(location.pathname)?t.classList.add(r):t.classList.remove(r)};P.subscribe({next:a}),M.set(t,a),dt.observe(t,{attributes:!0,attributeFilter:["href","data-route"]}),a(),t.removeAttribute("data-match")}};var q={number:t=>t.valueAsNumber,date:t=>t.valueAsDate,text:t=>t.value,checkbox:t=>t.checked,"":t=>t.value},H={select:"[data-bind],[name]",run:(t,r)=>{let n=t.dataset.bind||t.getAttribute("name"),e=p(r,n);if(e){let a=s=>{t.type=="checkbox"?t.checked=s:t.value=s};a(d(e)),m(e)&&(e.subscribe({next:a}),t.addEventListener("input",()=>e(q[t.type]?.(t)??t.value)),t.addEventListener("change",()=>e(q[t.type]?.(t)??t.value)))}}};var k=new WeakMap,U=new IntersectionObserver(t=>{for(let r of t)if(r.isIntersecting&&k.has(r.target)){for(let n of k.get(r.target))n();k.delete(r.target),U.unobserve(r.target)}},{rootMargin:"256px"});function x(t){return new Promise(r=>{let n=k.get(t)??[];n.push(r),k.set(t,n),U.observe(t)})}var O=new WeakSet,$={select:"[data-include]",run:(t,r)=>{if(O.has(t)||t.children.length)return;O.add(t);let n=t.hasAttribute("data-lazy")&&t.closest("[hidden]"),e=async()=>{t.dispatchEvent(new CustomEvent("::load",{bubbles:!0}));let a=await fetch(t.dataset.include,{headers:{accept:"text/html,text/*"}});if(a.ok){let s=await a.text();t.dispatchEvent(new CustomEvent("::loaded",{bubbles:!0})),t.innerHTML=s;for(let o of t.childNodes)g(o,r);t.removeAttribute("data-include"),t.removeAttribute("data-lazy")}};t.hasAttribute("data-lazy")?x(t).then(e):e()}};var F=new WeakSet,V={select:"[data-for]",run:(t,r,n)=>{if(F.has(t))return;let e=t.dataset.for.replace("let","").split("of"),a=e[0].split(","),s=e.at(-1).trim(),o=a[0].trim()==s?"__e":a[0].trim(),i=a[1]?.trim()??"__i",l=p(r,s),c=document.createComment(t.dataset.for);t.replaceWith(c),O.add(t);let u=()=>{let f=c;for(;(f=f.nextSibling)&&(f instanceof HTMLElement&&f.dataset.for==t.dataset.for);)f=f.previousSibling,f.nextSibling.remove()},w=f=>{if(u(),!f||!f[Symbol.iterator])return console.warn("data-for: The value given is not iterable.",{key:s,value:f});for(let y=0,C=c;y{let n=p(r,t.dataset.if),e=document.createComment("if: "+t.dataset.if);t.replaceWith(e);let a=s=>{!t.parentNode&&s?(t.hidden=!1,e.after(t)):t.localName!="link"&&t.remove()};a(d(n)),m(n)&&n.subscribe({next:a})}};var D=new WeakSet,K={select:"[data-lazy]",run:(t,r,n)=>{if(D.has(t)||!t.childNodes.length)return;D.add(t);let e=t.dataset.lazy,a=()=>{t.removeAttribute("data-lazy"),W(t,r);for(let s of t.childNodes)g(s,r)};e&&(t.addEventListener("::load",()=>t.classList.add(e),{once:!0}),t.addEventListener("::loaded",()=>t.classList.remove(e),{once:!0})),x(t).then(a),n()}};var G={select:"[data-on]",run:(t,r)=>{let n=e=>{let a=e.split(":"),s=a[0].trim(),o=a.at(-1).trim(),i=p(r,o);i&&t.addEventListener(s,i)};for(let e of t.dataset.on.split(","))n(e)}};var Q=t=>{let r=document.createElement("link");Object.assign(r,t),r.rel="preload",document.head.append(r)};var X=new WeakSet,Y={select:"[data-preload]",run:t=>{if(X.has(t)||t.hidden)return;X.add(t);let r=()=>{let n=t.dataset.preload.split(",");for(let e of n){let a=e.split(":");Q({href:a[0],as:a[1]??"fetch"})}};t.hasAttribute("data-lazy")?x(t).then(r):r()}};var pt=t=>{let r=t.dataset.route||t.dataset.routeNot;if(r[0]=="/")return r;for(;t=t.parentElement;){let n=t.dataset.route||t.dataset.routeNot;n&&(r=n.replaceAll("*","")+r)}return r.replaceAll(/\/+|\/\*\//g,"/")},Z=[],tt=()=>{let t=location.href.replace(/index\.*[a-z0-9]*$/gm,"");for(let r of Z){let n=r.pattern.test(t);if(r.negate?!n:n){if(r.node.hidden=!1,r.node.parentNode)continue;r.placeholder.after(r.node);let e=document.querySelector('head meta[name="route"]');e&&(e.content=r.pattern.pathname)}else r.node.localName!="link"&&r.node.remove()}};P.subscribe({next:tt});var et={select:"[data-route], [data-route-not]",run:async t=>{"URLPattern"in window||await import("https://kevinblt.github.io/hec/packages/@hec.js/ui/dist/urlpattnern.min.js");let r=pt(t),n=new URLPattern({pathname:r}),e=document.createComment("route: "+r);t.replaceWith(e),Z.push({node:t,pattern:n,placeholder:e,negate:t.hasAttribute("data-route-not")}),tt()}};var rt=[V,J,et,Y,$,G,H,_,K];var nt={},z={};function he(t,r={}){t instanceof URL&&(t=t.host==location.host?t.pathname:t.toString());let n=document.querySelector(`template[name="${t}"]`);if(!n){let e=document.querySelector('head meta[name="template-path"]');return nt[t]??=new Promise(async a=>{n=document.createElement("template"),n.setAttribute("id",t.toString()),n.innerHTML=await fetch(e?.content?.replaceAll("[name]",t.toString())??t).then(i=>i.text());let s=n.content.querySelectorAll('link[rel="stylesheet"][href]'),o=[];for(let i of s)z[i.href]??=fetch(i.href,{headers:{accept:"text/css"}}).then(l=>l.text()),z[i.href].then(l=>{let c=document.createElement("style");c.innerHTML=l,i.replaceWith(c)}),o.push(z[i.href]);await Promise.all(o),document.body.append(n),a(n)}),nt[t].then(a=>g(a.content.cloneNode(!0),r))}return g(n.content.cloneNode(!0),r)}function ge(t,r={}){let n=document.createElement("template");return n.dataset.name="anonymous",n.innerHTML=t,g(n.content.cloneNode(!0),r)}function g(t,r={}){let n=(e,a=new WeakSet)=>{let s=!1;if(!(B(e)||a.has(e))){if(e.nodeName=="#document-fragment"&&L(e,r),e instanceof HTMLElement){L(e,r);for(let o of rt)e.matches(o.select)&&o.run(e,r,()=>s=!0);if(s)return;W(e,r)}else if(e instanceof Text&&e.textContent.includes("{{")){let o=e.textContent.split(/{{|}}/g);for(let i=0,l=e,c;ic.data=u.replaceAll("","")),a.add(c),l.after(c),l=c;e.remove()}a.add(e);for(let o of e.childNodes)n(o,a)}};return n(t,new WeakSet),t}var W=(t,r)=>{let n=t.getAttributeNames();for(let e of n){let a=t.getAttribute(e);a?.includes("{{")?at(a,r,s=>{s=s.trim().replace(/ +/," "),s===""?t.removeAttribute(e):t.setAttribute(e,s)}):t.localName.includes("-")&&I(r,a)&&t.setAttribute(e,`@parent.${a}`)}},at=(t,r,n)=>{let e=t.match(/{{[^}]+}}/g).map(j),a=t,s=()=>{t=a;for(let o of e){let i=d(o.value);t=t.replace(o.text,i??"")}return t};for(let o of e){let i=p(r,o.prop);if(i==null&&console.warn(`{{ ${o.prop} }}: No value for this key`,{key:o.prop,value:i}),m(i)){let l=i;for(let c in o.meta)if(v[c]){let u=v[c];l=l.map(w=>u({value:w,key:o.prop,param:o.meta[c],options:o.meta}))}o.value=l,l.subscribe({next:()=>n(s())})}else{let l=i;for(let c in o.meta)if(v[c]){let u=v[c];l=u({value:d(i),key:o.prop,param:o.meta[c],options:o.meta})}o.value=()=>l}}n(s())};function Ae(t,r,n){customElements.define(t,class extends HTMLElement{static observedAttributes=Object.keys(r).map(e=>e.toLowerCase());#t=Object.fromEntries(Object.entries(r).map(e=>[e[0],h(e[1])]));#e={};#r=!1;#n=null;on(e,a,s=null){this.addEventListener(e,a,s)}emit(e,a=null,s=!1){this.dispatchEvent(new CustomEvent(e,{detail:a,bubbles:s}))}async connectedCallback(){if(this.#n??=this.hasAttribute("data-lazy"),this.#n&&!this.#r)this.#r=!0,this.emit("::load",null,!0),this.removeAttribute("data-lazy"),await x(this);else{if(this.#r)return this.emit("::mount");await Promise.resolve(),this.emit("::load",null,!0),this.#r=!0}let e=this.shadowRoot??this.attachShadow({mode:"open"}),a=n(this.#t,this);(o=>{if(L(this,A(o)),"querySelector"in o){let i=o.querySelector("slot");if(i)for(;i.firstChild;)this.append(i.firstChild)}e.append(o),this.emit("::loaded",null,!0);for(let i in r){let l=this.getAttribute(i)??"";this.hasAttribute(i)||this.setAttribute(i,r[i]?.toString()),l.startsWith("@parent.")||(this.#e[i]??=new AbortController,this.#t[i].subscribe({next:c=>c==null?this.removeAttribute(i):this.setAttribute(i,c.toString())},{signal:this.#e[i].signal}))}this.dispatchEvent(new CustomEvent("::mount"))})(a instanceof Promise?await a:a)}disconnectedCallback(){this.dispatchEvent(new CustomEvent("::unmount"))}#a(e=""){e=e.toLowerCase();for(let a in this.#t)if(a.toLowerCase()==e)return[r[a],this.#t[a]];return[null,null]}attributeChangedCallback(e,a,s){let[o,i]=this.#a(e);if(s?.startsWith("@parent.")){let l=this.parentNode.host||this.parentNode,c=s.slice(8),u=p(A(l),c)??p(A(this),c);m(u)?(this.#e[e]?.abort(),this.#e[e]=new AbortController,this.#t[e]=u):i(u)}else i(typeof o=="number"?parseFloat(s):s)}})}var st=new WeakMap;function Pe(t,r=null){document.dispatchEvent(new CustomEvent(t,{detail:r}))}function ke(t,r){let n=e=>r(e.detail);st.set(r,n),document.addEventListener(t,n)}function Ee(t){return new Promise(r=>{let n=e=>r(e.detail);document.addEventListener(t,n,{once:!0})})}function Oe(t,r){document.removeEventListener(t,st.get(r))}export{Ae as component,xt as deletePropsOf,lt as effect,Pe as emit,W as executeNodeAttributesTemplate,j as expression,d as f,I as hasProp,B as hasProps,m as isSignal,vt as memo,Oe as off,ke as on,Ee as once,v as pipes,rt as plugins,p as prop,A as propsOf,ct as resource,St as resourceBy,L as setPropsOf,h as signal,he as templateByName,g as templateByNode,ge as templateByString}; +function j(t){let r=t.matchAll(/([^ {}\s]+)/g),n={meta:{},text:t,prop:null};for(let e of r)if(e[1].includes("=")){let a=e[1].split("=");n.meta[a[0]]=a[1].replaceAll(/'|"/g,"")}else n.prop=e[1];return n}var v={};var S=new WeakMap,A=t=>S.get(t),xt=t=>S.delete(t),B=t=>S.has(t),L=(t,r)=>{let n=A(t);n&&typeof n=="object"?S.set(t,Object.assign(n,r)):S.set(t,r)},d=t=>typeof t=="function"?d(t()):t;function p(t,r){let n=r.split(".");if(!r)return t;for(let e of n){if(["state"].includes(e)&&t?.state)return t[e];if(m(t)){let a=t()?.[e];if(m(a)){let s=new AbortController,o=h(a());a.subscribe({next:o},{signal:s.signal});let i=l=>{s.abort(),m(l[e])?(s=new AbortController,l[e].subscribe({next:o},{signal:s.signal}),o(l[e]())):o(l[e])};t.subscribe({next:i}),t=o}else t=t.map(s=>s&&s[e])}else if(typeof t=="function")t=d(t);else if(typeof t[e]<"u")typeof t[e]=="function"&&!m(t[e])?t=t[e].bind(t):t=t[e];else return}return t}function I(t,r){let n=r.split(".");if(!r)return!1;for(let e of n){if(["loading","error"].includes(e)&&t?.loading&&t?.error)return t[e];if(typeof t=="function")t=d(t);else if(typeof t[e]<"u")t=t[e];else return!1}return!0}var R={items:new Map,setItem(t,r){this.items.set(t,r.toString())},get length(){return this.items.keys().length},key(t){return Array.from(this.items.values()).at(t)},clear(){this.items.clear()},getItem(t){return this.items.get(t)},removeItem(t){this.items.delete(t)}},N=new Map;function it(t){try{let r=window[t+"Storage"];return typeof r.length=="number"?r:R}catch{return R}}window.addEventListener("storage",t=>{if(!N.has(t.key))return;let r=N.get(t.key),n=t.storageArea.getItem(t.key);typeof n=="string"&&n!=="undefined"&&r.update(JSON.parse(n))});function h(t=null,r={}){if(r.id&&N.has(r.id))return N.get(r.id);let n=[],e=r.storage&&it(r.storage),a=l=>{t=l,e&&e.setItem(r.id,JSON.stringify(t));for(let c of n)c.next(t)};function s(){return arguments.length&&t!==arguments[0]&&a(arguments[0]),t}let o=(l,c=null)=>{n.push(l),c?.signal.addEventListener("abort",()=>{let u=n.indexOf(l);u>-1&&n.splice(u,1)},{once:!0})};if(e){let l=e.getItem(r.id);a(typeof l=="string"&&l!=="undefined"?JSON.parse(l):t)}let i=Object.assign(s,{id:r.id,storage:r.storage,toString:()=>t.toString(),set:l=>t=l,update:a,subscribe:o,map:l=>{let c=h(l(t)),u=new AbortController,w=c.subscribe;return o({next:f=>c(l(f))},{signal:u.signal}),Object.assign(c,{set:()=>null,subscribe:(f,y)=>{w(f,y),y?.signal.addEventListener("abort",()=>u.abort())}})},filter:l=>{let c=h(l(t)?t:null);return o({next:u=>l(u)?c(u):null}),Object.assign(c,{set:()=>null})}});return r.id&&N.set(r.id,i),i}function lt(t,r=[],n=null){for(let e of r)e.subscribe({next:()=>n=t(n)});return t(n)}function vt(t,r=[],n=null){let e=h(null);return e(lt(a=>e(t(a)),r,n)),e}function ct(t,r=null){let n=h(r),e=h("loaded"),a=async()=>{if(e()!="pending"){try{e("pending"),n(await t()),e("loaded"),delete n.error}catch(s){e("error"),n.error=s}return n()}};return a(),Object.assign(n,{state:e,refetch:a})}function St(t,r,n=null){let e=ct(()=>r(d(t)),n);return m(t)&&t.subscribe({next:()=>e.refetch()}),e}var m=t=>t&&t.subscribe;var ut=h({}),P=h(location.pathname);var b=document.querySelector('head meta[name="route"]');b||(b=document.createElement("meta"),b.name="route",b.content=location.pathname,document.head.append(b));var E=()=>{b.content="",P(location.pathname),ut(Object.fromEntries(new URLSearchParams(location.search))),b.content=b.content||location.pathname};window.addEventListener("popstate",E);window.addEventListener("hashchange",E);var ft=window.history.pushState,mt=window.history.replaceState;window.history.pushState=function(r,n,e){ft.call(window.history,r,n,e),E()};window.history.replaceState=function(r,n,e){mt.call(window.history,r,n,e),E()};var M=new WeakMap,dt=new MutationObserver(t=>{for(let r of t)M.has(r.target)&&M.get(r.target)()}),_={select:"[data-match]",run:t=>{let r=t.dataset.match,n=s=>s.replace(/index\.*[a-z0-9]*$/gm,"");function e(){return n(new URL(t.dataset.route||t.getAttribute("href"),location.href).pathname)}let a=()=>{e()==n(location.pathname)?t.classList.add(r):t.classList.remove(r)};P.subscribe({next:a}),M.set(t,a),dt.observe(t,{attributes:!0,attributeFilter:["href","data-route"]}),a(),t.removeAttribute("data-match")}};var q={number:t=>t.valueAsNumber,date:t=>t.valueAsDate,text:t=>t.value,checkbox:t=>t.checked,"":t=>t.value},H={select:"[data-bind],[name]",run:(t,r)=>{let n=t.dataset.bind||t.getAttribute("name"),e=p(r,n);if(e){let a=s=>{t.type=="checkbox"?t.checked=s:t.value=s};a(d(e)),m(e)&&(e.subscribe({next:a}),t.addEventListener("input",()=>e(q[t.type]?.(t)??t.value)),t.addEventListener("change",()=>e(q[t.type]?.(t)??t.value)))}}};var k=new WeakMap,U=new IntersectionObserver(t=>{for(let r of t)if(r.isIntersecting&&k.has(r.target)){for(let n of k.get(r.target))n();k.delete(r.target),U.unobserve(r.target)}},{rootMargin:"256px"});function x(t){return new Promise(r=>{let n=k.get(t)??[];n.push(r),k.set(t,n),U.observe(t)})}var O=new WeakSet,V={select:"[data-include]",run:(t,r)=>{if(O.has(t)||t.children.length)return;O.add(t);let n=t.hasAttribute("data-lazy")&&t.closest("[hidden]"),e=async()=>{t.dispatchEvent(new CustomEvent("::load",{bubbles:!0}));let a=await fetch(t.dataset.include,{headers:{accept:"text/html,text/*"}});if(a.ok){let s=await a.text();t.dispatchEvent(new CustomEvent("::loaded",{bubbles:!0})),t.innerHTML=s;for(let o of t.childNodes)g(o,r);t.removeAttribute("data-include"),t.removeAttribute("data-lazy")}};t.hasAttribute("data-lazy")?x(t).then(e):e()}};var $=new WeakSet,F={select:"[data-for]",run:(t,r,n)=>{if($.has(t))return;let e=t.dataset.for.replace("let","").split("of"),a=e[0].split(","),s=e.at(-1).trim(),o=a[0].trim()==s?"__e":a[0].trim(),i=a[1]?.trim()??"__i",l=p(r,s),c=document.createComment(t.dataset.for);t.replaceWith(c),O.add(t);let u=()=>{let f=c;for(;(f=f.nextSibling)&&(f instanceof HTMLElement&&f.dataset.for==t.dataset.for);)f=f.previousSibling,f.nextSibling.remove()},w=f=>{if(u(),!f||!f[Symbol.iterator])return console.warn("data-for: The value given is not iterable.",{key:s,value:f});for(let y=0,C=c;y{let n=p(r,t.dataset.if),e=document.createComment("if: "+t.dataset.if);t.replaceWith(e);let a=s=>{!t.parentNode&&s?(t.hidden=!1,e.after(t)):t.localName!="link"&&t.remove()};a(d(n)),m(n)&&n.subscribe({next:a})}};var D=new WeakSet,G={select:"[data-lazy]",run:(t,r,n)=>{if(D.has(t)||!t.childNodes.length)return;D.add(t);let e=t.dataset.lazy,a=()=>{t.removeAttribute("data-lazy"),W(t,r);for(let s of t.childNodes)g(s,r)};e&&(t.addEventListener("::load",()=>t.classList.add(e),{once:!0}),t.addEventListener("::loaded",()=>t.classList.remove(e),{once:!0})),x(t).then(a),n()}};var K={select:"[data-on]",run:(t,r)=>{let n=e=>{let a=e.split(":"),s=a[0].trim(),o=a.at(-1).trim(),i=p(r,o);i&&t.addEventListener(s,i)};for(let e of t.dataset.on.split(","))n(e)}};var Q=t=>{let r=document.createElement("link");Object.assign(r,t),r.rel="preload",document.head.append(r)};var X=new WeakSet,Y={select:"[data-preload]",run:t=>{if(X.has(t)||t.hidden)return;X.add(t);let r=()=>{let n=t.dataset.preload.split(",");for(let e of n){let a=e.split(":");Q({href:a[0],as:a[1]??"fetch"})}};t.hasAttribute("data-lazy")?x(t).then(r):r()}};var pt=t=>{let r=t.dataset.route||t.dataset.routeNot;if(r[0]=="/")return r;for(;t=t.parentElement;){let n=t.dataset.route||t.dataset.routeNot;n&&(r=n.replaceAll("*","")+r)}return r.replaceAll(/\/+|\/\*\//g,"/")},Z=[],tt=()=>{let t=location.href.replace(/index\.*[a-z0-9]*$/gm,"");for(let r of Z){let n=r.pattern.test(t);if(r.negate?!n:n){if(r.node.hidden=!1,r.node.parentNode)continue;r.placeholder.after(r.node);let e=document.querySelector('head meta[name="route"]');e&&(e.content=r.pattern.pathname)}else r.node.localName!="link"&&r.node.remove()}};P.subscribe({next:tt});var et={select:"[data-route], [data-route-not]",run:async t=>{"URLPattern"in window||await import("https://kevinblt.github.io/hec/packages/@hec.js/ui/dist/urlpattnern.min.js");let r=pt(t),n=new URLPattern({pathname:r}),e=document.createComment("route: "+r);t.replaceWith(e),Z.push({node:t,pattern:n,placeholder:e,negate:t.hasAttribute("data-route-not")}),tt()}};var rt=[F,J,et,Y,V,K,H,_,G];var nt={},z={};function he(t,r={}){t instanceof URL&&(t=t.host==location.host?t.pathname:t.toString());let n=document.querySelector(`template[name="${t}"]`);if(!n){let e=document.querySelector('head meta[name="template-path"]');return nt[t]??=new Promise(async a=>{n=document.createElement("template"),n.setAttribute("id",t.toString()),n.innerHTML=await fetch(e?.content?.replaceAll("[name]",t.toString())??t).then(i=>i.text());let s=n.content.querySelectorAll('link[rel="stylesheet"][href]'),o=[];for(let i of s)z[i.href]??=fetch(i.href,{headers:{accept:"text/css"}}).then(l=>l.text()),z[i.href].then(l=>{let c=document.createElement("style");c.innerHTML=l,i.replaceWith(c)}),o.push(z[i.href]);await Promise.all(o),document.body.append(n),a(n)}),nt[t].then(a=>g(a.content.cloneNode(!0),r))}return g(n.content.cloneNode(!0),r)}function ge(t,r={}){let n=document.createElement("template");return n.dataset.name="anonymous",n.innerHTML=t,g(n.content.cloneNode(!0),r)}function g(t,r={}){let n=(e,a=new WeakSet)=>{let s=!1;if(!(B(e)||a.has(e))){if(e.nodeName=="#document-fragment"&&L(e,r),e instanceof HTMLElement||e instanceof SVGElement){L(e,r);for(let o of rt)e.matches(o.select)&&o.run(e,r,()=>s=!0);if(s)return;W(e,r)}else if(e instanceof Text&&e.textContent.includes("{{")){let o=e.textContent.split(/{{|}}/g);for(let i=0,l=e,c;ic.data=u.replaceAll("","")),a.add(c),l.after(c),l=c;e.remove()}a.add(e);for(let o of e.childNodes)n(o,a)}};return n(t,new WeakSet),t}var W=(t,r)=>{let n=t.getAttributeNames();for(let e of n){let a=t.getAttribute(e);a?.includes("{{")?at(a,r,s=>{s=s.trim().replace(/ +/," "),s===""?t.removeAttribute(e):t.setAttribute(e,s)}):t.localName.includes("-")&&I(r,a)&&t.setAttribute(e,`@parent.${a}`)}},at=(t,r,n)=>{let e=t.match(/{{[^}]+}}/g).map(j),a=t,s=()=>{t=a;for(let o of e){let i=d(o.value);t=t.replace(o.text,i??"")}return t};for(let o of e){let i=p(r,o.prop);if(i==null&&console.warn(`{{ ${o.prop} }}: No value for this key`,{key:o.prop,value:i}),m(i)){let l=i;for(let c in o.meta)if(v[c]){let u=v[c];l=l.map(w=>u({value:w,key:o.prop,param:o.meta[c],options:o.meta}))}o.value=l,l.subscribe({next:()=>n(s())})}else{let l=i;for(let c in o.meta)if(v[c]){let u=v[c];l=u({value:d(i),key:o.prop,param:o.meta[c],options:o.meta})}o.value=()=>l}}n(s())};function Ae(t,r,n){customElements.define(t,class extends HTMLElement{static observedAttributes=Object.keys(r).map(e=>e.toLowerCase());#t=Object.fromEntries(Object.entries(r).map(e=>[e[0],h(e[1])]));#e={};#r=!1;#n=null;on(e,a,s=null){this.addEventListener(e,a,s)}emit(e,a=null,s=!1){this.dispatchEvent(new CustomEvent(e,{detail:a,bubbles:s}))}async connectedCallback(){if(this.#n??=this.hasAttribute("data-lazy"),this.#n&&!this.#r)this.#r=!0,this.emit("::load",null,!0),this.removeAttribute("data-lazy"),await x(this);else{if(this.#r)return this.emit("::mount");await Promise.resolve(),this.emit("::load",null,!0),this.#r=!0}let e=this.shadowRoot??this.attachShadow({mode:"open"}),a=n(this.#t,this);(o=>{if(L(this,A(o)),"querySelector"in o){let i=o.querySelector("slot");if(i)for(;i.firstChild;)this.append(i.firstChild)}e.append(o),this.emit("::loaded",null,!0);for(let i in r){let l=this.getAttribute(i)??"";this.hasAttribute(i)||this.setAttribute(i,r[i]?.toString()),l.startsWith("@parent.")||(this.#e[i]??=new AbortController,this.#t[i].subscribe({next:c=>c==null?this.removeAttribute(i):this.setAttribute(i,c.toString())},{signal:this.#e[i].signal}))}this.dispatchEvent(new CustomEvent("::mount"))})(a instanceof Promise?await a:a)}disconnectedCallback(){this.dispatchEvent(new CustomEvent("::unmount"))}#a(e=""){e=e.toLowerCase();for(let a in this.#t)if(a.toLowerCase()==e)return[r[a],this.#t[a]];return[null,null]}attributeChangedCallback(e,a,s){let[o,i]=this.#a(e);if(s?.startsWith("@parent.")){let l=this.parentNode.host||this.parentNode,c=s.slice(8),u=p(A(l),c)??p(A(this),c);m(u)?(this.#e[e]?.abort(),this.#e[e]=new AbortController,this.#t[e]=u):i(u)}else i(typeof o=="number"?parseFloat(s):s)}})}var st=new WeakMap;function Pe(t,r=null){document.dispatchEvent(new CustomEvent(t,{detail:r}))}function ke(t,r){let n=e=>r(e.detail);st.set(r,n),document.addEventListener(t,n)}function Ee(t){return new Promise(r=>{let n=e=>r(e.detail);document.addEventListener(t,n,{once:!0})})}function Oe(t,r){document.removeEventListener(t,st.get(r))}export{Ae as component,xt as deletePropsOf,lt as effect,Pe as emit,W as executeNodeAttributesTemplate,j as expression,d as f,I as hasProp,B as hasProps,m as isSignal,vt as memo,Oe as off,ke as on,Ee as once,v as pipes,rt as plugins,p as prop,A as propsOf,ct as resource,St as resourceBy,L as setPropsOf,h as signal,he as templateByName,g as templateByNode,ge as templateByString}; diff --git a/packages/@hec.js/ui/dist/hec.min.js b/packages/@hec.js/ui/dist/hec.min.js index 33f5278..129a903 100644 --- a/packages/@hec.js/ui/dist/hec.min.js +++ b/packages/@hec.js/ui/dist/hec.min.js @@ -1 +1 @@ -(()=>{var ft=Object.create;var z=Object.defineProperty;var mt=Object.getOwnPropertyDescriptor;var dt=Object.getOwnPropertyNames;var pt=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty;var gt=(t=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(t,{get:(e,n)=>(typeof require<"u"?require:e)[n]}):t)(function(t){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+t+'" is not supported')});var bt=(t,e)=>{for(var n in e)z(t,n,{get:e[n],enumerable:!0})},xt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of dt(e))!ht.call(t,a)&&a!==n&&z(t,a,{get:()=>e[a],enumerable:!(r=mt(e,a))||r.enumerable});return t};var yt=(t,e,n)=>(n=t!=null?ft(pt(t)):{},xt(e||!t||!t.__esModule?z(n,"default",{value:t,enumerable:!0}):n,t));var M={};bt(M,{component:()=>Mt,deletePropsOf:()=>wt,effect:()=>U,emit:()=>Wt,executeNodeAttributesTemplate:()=>C,expression:()=>T,f:()=>d,hasProp:()=>B,hasProps:()=>j,isSignal:()=>m,memo:()=>St,off:()=>jt,on:()=>zt,once:()=>Tt,pipes:()=>v,plugins:()=>R,prop:()=>p,propsOf:()=>S,resource:()=>$,resourceBy:()=>At,setPropsOf:()=>A,signal:()=>h,templateByName:()=>Ot,templateByNode:()=>g,templateByString:()=>Ct});function T(t){let e=t.matchAll(/([^ {}\s]+)/g),n={meta:{},text:t,prop:null};for(let r of e)if(r[1].includes("=")){let a=r[1].split("=");n.meta[a[0]]=a[1].replaceAll(/'|"/g,"")}else n.prop=r[1];return n}var v={};var k=new WeakMap,S=t=>k.get(t),wt=t=>k.delete(t),j=t=>k.has(t),A=(t,e)=>{let n=S(t);n&&typeof n=="object"?k.set(t,Object.assign(n,e)):k.set(t,e)},d=t=>typeof t=="function"?d(t()):t;function p(t,e){let n=e.split(".");if(!e)return t;for(let r of n){if(["state"].includes(r)&&t?.state)return t[r];if(m(t)){let a=t()?.[r];if(m(a)){let o=new AbortController,s=h(a());a.subscribe({next:s},{signal:o.signal});let i=l=>{o.abort(),m(l[r])?(o=new AbortController,l[r].subscribe({next:s},{signal:o.signal}),s(l[r]())):s(l[r])};t.subscribe({next:i}),t=s}else t=t.map(o=>o&&o[r])}else if(typeof t=="function")t=d(t);else if(typeof t[r]<"u")typeof t[r]=="function"&&!m(t[r])?t=t[r].bind(t):t=t[r];else return}return t}function B(t,e){let n=e.split(".");if(!e)return!1;for(let r of n){if(["loading","error"].includes(r)&&t?.loading&&t?.error)return t[r];if(typeof t=="function")t=d(t);else if(typeof t[r]<"u")t=t[r];else return!1}return!0}var H={items:new Map,setItem(t,e){this.items.set(t,e.toString())},get length(){return this.items.keys().length},key(t){return Array.from(this.items.values()).at(t)},clear(){this.items.clear()},getItem(t){return this.items.get(t)},removeItem(t){this.items.delete(t)}},L=new Map;function vt(t){try{let e=window[t+"Storage"];return typeof e.length=="number"?e:H}catch{return H}}window.addEventListener("storage",t=>{if(!L.has(t.key))return;let e=L.get(t.key),n=t.storageArea.getItem(t.key);typeof n=="string"&&n!=="undefined"&&e.update(JSON.parse(n))});function h(t=null,e={}){if(e.id&&L.has(e.id))return L.get(e.id);let n=[],r=e.storage&&vt(e.storage),a=l=>{t=l,r&&r.setItem(e.id,JSON.stringify(t));for(let c of n)c.next(t)};function o(){return arguments.length&&t!==arguments[0]&&a(arguments[0]),t}let s=(l,c=null)=>{n.push(l),c?.signal.addEventListener("abort",()=>{let u=n.indexOf(l);u>-1&&n.splice(u,1)},{once:!0})};if(r){let l=r.getItem(e.id);a(typeof l=="string"&&l!=="undefined"?JSON.parse(l):t)}let i=Object.assign(o,{id:e.id,storage:e.storage,toString:()=>t.toString(),set:l=>t=l,update:a,subscribe:s,map:l=>{let c=h(l(t)),u=new AbortController,w=c.subscribe;return s({next:f=>c(l(f))},{signal:u.signal}),Object.assign(c,{set:()=>null,subscribe:(f,y)=>{w(f,y),y?.signal.addEventListener("abort",()=>u.abort())}})},filter:l=>{let c=h(l(t)?t:null);return s({next:u=>l(u)?c(u):null}),Object.assign(c,{set:()=>null})}});return e.id&&L.set(e.id,i),i}function U(t,e=[],n=null){for(let r of e)r.subscribe({next:()=>n=t(n)});return t(n)}function St(t,e=[],n=null){let r=h(null);return r(U(a=>r(t(a)),e,n)),r}function $(t,e=null){let n=h(e),r=h("loaded"),a=async()=>{if(r()!="pending"){try{r("pending"),n(await t()),r("loaded"),delete n.error}catch(o){r("error"),n.error=o}return n()}};return a(),Object.assign(n,{state:r,refetch:a})}function At(t,e,n=null){let r=$(()=>e(d(t)),n);return m(t)&&t.subscribe({next:()=>r.refetch()}),r}var m=t=>t&&t.subscribe;var kt=h({}),N=h(location.pathname);var b=document.querySelector('head meta[name="route"]');b||(b=document.createElement("meta"),b.name="route",b.content=location.pathname,document.head.append(b));var E=()=>{b.content="",N(location.pathname),kt(Object.fromEntries(new URLSearchParams(location.search))),b.content=b.content||location.pathname};window.addEventListener("popstate",E);window.addEventListener("hashchange",E);var Lt=window.history.pushState,Nt=window.history.replaceState;window.history.pushState=function(e,n,r){Lt.call(window.history,e,n,r),E()};window.history.replaceState=function(e,n,r){Nt.call(window.history,e,n,r),E()};var I=new WeakMap,Pt=new MutationObserver(t=>{for(let e of t)I.has(e.target)&&I.get(e.target)()}),F={select:"[data-match]",run:t=>{let e=t.dataset.match,n=o=>o.replace(/index\.*[a-z0-9]*$/gm,"");function r(){return n(new URL(t.dataset.route||t.getAttribute("href"),location.href).pathname)}let a=()=>{r()==n(location.pathname)?t.classList.add(e):t.classList.remove(e)};N.subscribe({next:a}),I.set(t,a),Pt.observe(t,{attributes:!0,attributeFilter:["href","data-route"]}),a(),t.removeAttribute("data-match")}};var V={number:t=>t.valueAsNumber,date:t=>t.valueAsDate,text:t=>t.value,checkbox:t=>t.checked,"":t=>t.value},J={select:"[data-bind],[name]",run:(t,e)=>{let n=t.dataset.bind||t.getAttribute("name"),r=p(e,n);if(r){let a=o=>{t.type=="checkbox"?t.checked=o:t.value=o};a(d(r)),m(r)&&(r.subscribe({next:a}),t.addEventListener("input",()=>r(V[t.type]?.(t)??t.value)),t.addEventListener("change",()=>r(V[t.type]?.(t)??t.value)))}}};var P=new WeakMap,D=new IntersectionObserver(t=>{for(let e of t)if(e.isIntersecting&&P.has(e.target)){for(let n of P.get(e.target))n();P.delete(e.target),D.unobserve(e.target)}},{rootMargin:"256px"});function x(t){return new Promise(e=>{let n=P.get(t)??[];n.push(e),P.set(t,n),D.observe(t)})}var O=new WeakSet,K={select:"[data-include]",run:(t,e)=>{if(O.has(t)||t.children.length)return;O.add(t);let n=t.hasAttribute("data-lazy")&&t.closest("[hidden]"),r=async()=>{t.dispatchEvent(new CustomEvent("::load",{bubbles:!0}));let a=await fetch(t.dataset.include,{headers:{accept:"text/html,text/*"}});if(a.ok){let o=await a.text();t.dispatchEvent(new CustomEvent("::loaded",{bubbles:!0})),t.innerHTML=o;for(let s of t.childNodes)g(s,e);t.removeAttribute("data-include"),t.removeAttribute("data-lazy")}};t.hasAttribute("data-lazy")?x(t).then(r):r()}};var G=new WeakSet,Q={select:"[data-for]",run:(t,e,n)=>{if(G.has(t))return;let r=t.dataset.for.replace("let","").split("of"),a=r[0].split(","),o=r.at(-1).trim(),s=a[0].trim()==o?"__e":a[0].trim(),i=a[1]?.trim()??"__i",l=p(e,o),c=document.createComment(t.dataset.for);t.replaceWith(c),O.add(t);let u=()=>{let f=c;for(;(f=f.nextSibling)&&(f instanceof HTMLElement&&f.dataset.for==t.dataset.for);)f=f.previousSibling,f.nextSibling.remove()},w=f=>{if(u(),!f||!f[Symbol.iterator])return console.warn("data-for: The value given is not iterable.",{key:o,value:f});for(let y=0,W=c;y{let n=p(e,t.dataset.if),r=document.createComment("if: "+t.dataset.if);t.replaceWith(r);let a=o=>{!t.parentNode&&o?(t.hidden=!1,r.after(t)):t.localName!="link"&&t.remove()};a(d(n)),m(n)&&n.subscribe({next:a})}};var Y=new WeakSet,Z={select:"[data-lazy]",run:(t,e,n)=>{if(Y.has(t)||!t.childNodes.length)return;Y.add(t);let r=t.dataset.lazy,a=()=>{t.removeAttribute("data-lazy"),C(t,e);for(let o of t.childNodes)g(o,e)};r&&(t.addEventListener("::load",()=>t.classList.add(r),{once:!0}),t.addEventListener("::loaded",()=>t.classList.remove(r),{once:!0})),x(t).then(a),n()}};var tt={select:"[data-on]",run:(t,e)=>{let n=r=>{let a=r.split(":"),o=a[0].trim(),s=a.at(-1).trim(),i=p(e,s);i&&t.addEventListener(o,i)};for(let r of t.dataset.on.split(","))n(r)}};var et=t=>{let e=document.createElement("link");Object.assign(e,t),e.rel="preload",document.head.append(e)};var rt=new WeakSet,nt={select:"[data-preload]",run:t=>{if(rt.has(t)||t.hidden)return;rt.add(t);let e=()=>{let n=t.dataset.preload.split(",");for(let r of n){let a=r.split(":");et({href:a[0],as:a[1]??"fetch"})}};t.hasAttribute("data-lazy")?x(t).then(e):e()}};var Et=t=>{let e=t.dataset.route||t.dataset.routeNot;if(e[0]=="/")return e;for(;t=t.parentElement;){let n=t.dataset.route||t.dataset.routeNot;n&&(e=n.replaceAll("*","")+e)}return e.replaceAll(/\/+|\/\*\//g,"/")},at=[],ot=()=>{let t=location.href.replace(/index\.*[a-z0-9]*$/gm,"");for(let e of at){let n=e.pattern.test(t);if(e.negate?!n:n){if(e.node.hidden=!1,e.node.parentNode)continue;e.placeholder.after(e.node);let r=document.querySelector('head meta[name="route"]');r&&(r.content=e.pattern.pathname)}else e.node.localName!="link"&&e.node.remove()}};N.subscribe({next:ot});var st={select:"[data-route], [data-route-not]",run:async t=>{"URLPattern"in window||await import("https://kevinblt.github.io/hec/packages/@hec.js/ui/dist/urlpattnern.min.js");let e=Et(t),n=new URLPattern({pathname:e}),r=document.createComment("route: "+e);t.replaceWith(r),at.push({node:t,pattern:n,placeholder:r,negate:t.hasAttribute("data-route-not")}),ot()}};var R=[Q,X,st,nt,K,tt,J,F,Z];var it={},_={};function Ot(t,e={}){t instanceof URL&&(t=t.host==location.host?t.pathname:t.toString());let n=document.querySelector(`template[name="${t}"]`);if(!n){let r=document.querySelector('head meta[name="template-path"]');return it[t]??=new Promise(async a=>{n=document.createElement("template"),n.setAttribute("id",t.toString()),n.innerHTML=await fetch(r?.content?.replaceAll("[name]",t.toString())??t).then(i=>i.text());let o=n.content.querySelectorAll('link[rel="stylesheet"][href]'),s=[];for(let i of o)_[i.href]??=fetch(i.href,{headers:{accept:"text/css"}}).then(l=>l.text()),_[i.href].then(l=>{let c=document.createElement("style");c.innerHTML=l,i.replaceWith(c)}),s.push(_[i.href]);await Promise.all(s),document.body.append(n),a(n)}),it[t].then(a=>g(a.content.cloneNode(!0),e))}return g(n.content.cloneNode(!0),e)}function Ct(t,e={}){let n=document.createElement("template");return n.dataset.name="anonymous",n.innerHTML=t,g(n.content.cloneNode(!0),e)}function g(t,e={}){let n=(r,a=new WeakSet)=>{let o=!1;if(!(j(r)||a.has(r))){if(r.nodeName=="#document-fragment"&&A(r,e),r instanceof HTMLElement){A(r,e);for(let s of R)r.matches(s.select)&&s.run(r,e,()=>o=!0);if(o)return;C(r,e)}else if(r instanceof Text&&r.textContent.includes("{{")){let s=r.textContent.split(/{{|}}/g);for(let i=0,l=r,c;ic.data=u.replaceAll("","")),a.add(c),l.after(c),l=c;r.remove()}a.add(r);for(let s of r.childNodes)n(s,a)}};return n(t,new WeakSet),t}var C=(t,e)=>{let n=t.getAttributeNames();for(let r of n){let a=t.getAttribute(r);a?.includes("{{")?lt(a,e,o=>{o=o.trim().replace(/ +/," "),o===""?t.removeAttribute(r):t.setAttribute(r,o)}):t.localName.includes("-")&&B(e,a)&&t.setAttribute(r,`@parent.${a}`)}},lt=(t,e,n)=>{let r=t.match(/{{[^}]+}}/g).map(T),a=t,o=()=>{t=a;for(let s of r){let i=d(s.value);t=t.replace(s.text,i??"")}return t};for(let s of r){let i=p(e,s.prop);if(i==null&&console.warn(`{{ ${s.prop} }}: No value for this key`,{key:s.prop,value:i}),m(i)){let l=i;for(let c in s.meta)if(v[c]){let u=v[c];l=l.map(w=>u({value:w,key:s.prop,param:s.meta[c],options:s.meta}))}s.value=l,l.subscribe({next:()=>n(o())})}else{let l=i;for(let c in s.meta)if(v[c]){let u=v[c];l=u({value:d(i),key:s.prop,param:s.meta[c],options:s.meta})}s.value=()=>l}}n(o())};function Mt(t,e,n){customElements.define(t,class extends HTMLElement{static observedAttributes=Object.keys(e).map(r=>r.toLowerCase());#t=Object.fromEntries(Object.entries(e).map(r=>[r[0],h(r[1])]));#e={};#r=!1;#n=null;on(r,a,o=null){this.addEventListener(r,a,o)}emit(r,a=null,o=!1){this.dispatchEvent(new CustomEvent(r,{detail:a,bubbles:o}))}async connectedCallback(){if(this.#n??=this.hasAttribute("data-lazy"),this.#n&&!this.#r)this.#r=!0,this.emit("::load",null,!0),this.removeAttribute("data-lazy"),await x(this);else{if(this.#r)return this.emit("::mount");await Promise.resolve(),this.emit("::load",null,!0),this.#r=!0}let r=this.shadowRoot??this.attachShadow({mode:"open"}),a=n(this.#t,this);(s=>{if(A(this,S(s)),"querySelector"in s){let i=s.querySelector("slot");if(i)for(;i.firstChild;)this.append(i.firstChild)}r.append(s),this.emit("::loaded",null,!0);for(let i in e){let l=this.getAttribute(i)??"";this.hasAttribute(i)||this.setAttribute(i,e[i]?.toString()),l.startsWith("@parent.")||(this.#e[i]??=new AbortController,this.#t[i].subscribe({next:c=>c==null?this.removeAttribute(i):this.setAttribute(i,c.toString())},{signal:this.#e[i].signal}))}this.dispatchEvent(new CustomEvent("::mount"))})(a instanceof Promise?await a:a)}disconnectedCallback(){this.dispatchEvent(new CustomEvent("::unmount"))}#a(r=""){r=r.toLowerCase();for(let a in this.#t)if(a.toLowerCase()==r)return[e[a],this.#t[a]];return[null,null]}attributeChangedCallback(r,a,o){let[s,i]=this.#a(r);if(o?.startsWith("@parent.")){let l=this.parentNode.host||this.parentNode,c=o.slice(8),u=p(S(l),c)??p(S(this),c);m(u)?(this.#e[r]?.abort(),this.#e[r]=new AbortController,this.#t[r]=u):i(u)}else i(typeof s=="number"?parseFloat(o):o)}})}var ct=new WeakMap;function Wt(t,e=null){document.dispatchEvent(new CustomEvent(t,{detail:e}))}function zt(t,e){let n=r=>e(r.detail);ct.set(e,n),document.addEventListener(t,n)}function Tt(t){return new Promise(e=>{let n=r=>e(r.detail);document.addEventListener(t,n,{once:!0})})}function jt(t,e){document.removeEventListener(t,ct.get(e))}for(let t in M)globalThis[t]=M[t];})(); +(()=>{var ft=Object.create;var z=Object.defineProperty;var mt=Object.getOwnPropertyDescriptor;var dt=Object.getOwnPropertyNames;var pt=Object.getPrototypeOf,ht=Object.prototype.hasOwnProperty;var gt=(t=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(t,{get:(e,n)=>(typeof require<"u"?require:e)[n]}):t)(function(t){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+t+'" is not supported')});var bt=(t,e)=>{for(var n in e)z(t,n,{get:e[n],enumerable:!0})},xt=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of dt(e))!ht.call(t,a)&&a!==n&&z(t,a,{get:()=>e[a],enumerable:!(r=mt(e,a))||r.enumerable});return t};var yt=(t,e,n)=>(n=t!=null?ft(pt(t)):{},xt(e||!t||!t.__esModule?z(n,"default",{value:t,enumerable:!0}):n,t));var M={};bt(M,{component:()=>Mt,deletePropsOf:()=>wt,effect:()=>U,emit:()=>Wt,executeNodeAttributesTemplate:()=>C,expression:()=>T,f:()=>d,hasProp:()=>B,hasProps:()=>j,isSignal:()=>m,memo:()=>St,off:()=>jt,on:()=>zt,once:()=>Tt,pipes:()=>v,plugins:()=>R,prop:()=>p,propsOf:()=>S,resource:()=>V,resourceBy:()=>At,setPropsOf:()=>A,signal:()=>h,templateByName:()=>Ot,templateByNode:()=>g,templateByString:()=>Ct});function T(t){let e=t.matchAll(/([^ {}\s]+)/g),n={meta:{},text:t,prop:null};for(let r of e)if(r[1].includes("=")){let a=r[1].split("=");n.meta[a[0]]=a[1].replaceAll(/'|"/g,"")}else n.prop=r[1];return n}var v={};var k=new WeakMap,S=t=>k.get(t),wt=t=>k.delete(t),j=t=>k.has(t),A=(t,e)=>{let n=S(t);n&&typeof n=="object"?k.set(t,Object.assign(n,e)):k.set(t,e)},d=t=>typeof t=="function"?d(t()):t;function p(t,e){let n=e.split(".");if(!e)return t;for(let r of n){if(["state"].includes(r)&&t?.state)return t[r];if(m(t)){let a=t()?.[r];if(m(a)){let o=new AbortController,s=h(a());a.subscribe({next:s},{signal:o.signal});let i=l=>{o.abort(),m(l[r])?(o=new AbortController,l[r].subscribe({next:s},{signal:o.signal}),s(l[r]())):s(l[r])};t.subscribe({next:i}),t=s}else t=t.map(o=>o&&o[r])}else if(typeof t=="function")t=d(t);else if(typeof t[r]<"u")typeof t[r]=="function"&&!m(t[r])?t=t[r].bind(t):t=t[r];else return}return t}function B(t,e){let n=e.split(".");if(!e)return!1;for(let r of n){if(["loading","error"].includes(r)&&t?.loading&&t?.error)return t[r];if(typeof t=="function")t=d(t);else if(typeof t[r]<"u")t=t[r];else return!1}return!0}var H={items:new Map,setItem(t,e){this.items.set(t,e.toString())},get length(){return this.items.keys().length},key(t){return Array.from(this.items.values()).at(t)},clear(){this.items.clear()},getItem(t){return this.items.get(t)},removeItem(t){this.items.delete(t)}},L=new Map;function vt(t){try{let e=window[t+"Storage"];return typeof e.length=="number"?e:H}catch{return H}}window.addEventListener("storage",t=>{if(!L.has(t.key))return;let e=L.get(t.key),n=t.storageArea.getItem(t.key);typeof n=="string"&&n!=="undefined"&&e.update(JSON.parse(n))});function h(t=null,e={}){if(e.id&&L.has(e.id))return L.get(e.id);let n=[],r=e.storage&&vt(e.storage),a=l=>{t=l,r&&r.setItem(e.id,JSON.stringify(t));for(let c of n)c.next(t)};function o(){return arguments.length&&t!==arguments[0]&&a(arguments[0]),t}let s=(l,c=null)=>{n.push(l),c?.signal.addEventListener("abort",()=>{let u=n.indexOf(l);u>-1&&n.splice(u,1)},{once:!0})};if(r){let l=r.getItem(e.id);a(typeof l=="string"&&l!=="undefined"?JSON.parse(l):t)}let i=Object.assign(o,{id:e.id,storage:e.storage,toString:()=>t.toString(),set:l=>t=l,update:a,subscribe:s,map:l=>{let c=h(l(t)),u=new AbortController,w=c.subscribe;return s({next:f=>c(l(f))},{signal:u.signal}),Object.assign(c,{set:()=>null,subscribe:(f,y)=>{w(f,y),y?.signal.addEventListener("abort",()=>u.abort())}})},filter:l=>{let c=h(l(t)?t:null);return s({next:u=>l(u)?c(u):null}),Object.assign(c,{set:()=>null})}});return e.id&&L.set(e.id,i),i}function U(t,e=[],n=null){for(let r of e)r.subscribe({next:()=>n=t(n)});return t(n)}function St(t,e=[],n=null){let r=h(null);return r(U(a=>r(t(a)),e,n)),r}function V(t,e=null){let n=h(e),r=h("loaded"),a=async()=>{if(r()!="pending"){try{r("pending"),n(await t()),r("loaded"),delete n.error}catch(o){r("error"),n.error=o}return n()}};return a(),Object.assign(n,{state:r,refetch:a})}function At(t,e,n=null){let r=V(()=>e(d(t)),n);return m(t)&&t.subscribe({next:()=>r.refetch()}),r}var m=t=>t&&t.subscribe;var kt=h({}),N=h(location.pathname);var b=document.querySelector('head meta[name="route"]');b||(b=document.createElement("meta"),b.name="route",b.content=location.pathname,document.head.append(b));var E=()=>{b.content="",N(location.pathname),kt(Object.fromEntries(new URLSearchParams(location.search))),b.content=b.content||location.pathname};window.addEventListener("popstate",E);window.addEventListener("hashchange",E);var Lt=window.history.pushState,Nt=window.history.replaceState;window.history.pushState=function(e,n,r){Lt.call(window.history,e,n,r),E()};window.history.replaceState=function(e,n,r){Nt.call(window.history,e,n,r),E()};var I=new WeakMap,Pt=new MutationObserver(t=>{for(let e of t)I.has(e.target)&&I.get(e.target)()}),$={select:"[data-match]",run:t=>{let e=t.dataset.match,n=o=>o.replace(/index\.*[a-z0-9]*$/gm,"");function r(){return n(new URL(t.dataset.route||t.getAttribute("href"),location.href).pathname)}let a=()=>{r()==n(location.pathname)?t.classList.add(e):t.classList.remove(e)};N.subscribe({next:a}),I.set(t,a),Pt.observe(t,{attributes:!0,attributeFilter:["href","data-route"]}),a(),t.removeAttribute("data-match")}};var F={number:t=>t.valueAsNumber,date:t=>t.valueAsDate,text:t=>t.value,checkbox:t=>t.checked,"":t=>t.value},J={select:"[data-bind],[name]",run:(t,e)=>{let n=t.dataset.bind||t.getAttribute("name"),r=p(e,n);if(r){let a=o=>{t.type=="checkbox"?t.checked=o:t.value=o};a(d(r)),m(r)&&(r.subscribe({next:a}),t.addEventListener("input",()=>r(F[t.type]?.(t)??t.value)),t.addEventListener("change",()=>r(F[t.type]?.(t)??t.value)))}}};var P=new WeakMap,D=new IntersectionObserver(t=>{for(let e of t)if(e.isIntersecting&&P.has(e.target)){for(let n of P.get(e.target))n();P.delete(e.target),D.unobserve(e.target)}},{rootMargin:"256px"});function x(t){return new Promise(e=>{let n=P.get(t)??[];n.push(e),P.set(t,n),D.observe(t)})}var O=new WeakSet,G={select:"[data-include]",run:(t,e)=>{if(O.has(t)||t.children.length)return;O.add(t);let n=t.hasAttribute("data-lazy")&&t.closest("[hidden]"),r=async()=>{t.dispatchEvent(new CustomEvent("::load",{bubbles:!0}));let a=await fetch(t.dataset.include,{headers:{accept:"text/html,text/*"}});if(a.ok){let o=await a.text();t.dispatchEvent(new CustomEvent("::loaded",{bubbles:!0})),t.innerHTML=o;for(let s of t.childNodes)g(s,e);t.removeAttribute("data-include"),t.removeAttribute("data-lazy")}};t.hasAttribute("data-lazy")?x(t).then(r):r()}};var K=new WeakSet,Q={select:"[data-for]",run:(t,e,n)=>{if(K.has(t))return;let r=t.dataset.for.replace("let","").split("of"),a=r[0].split(","),o=r.at(-1).trim(),s=a[0].trim()==o?"__e":a[0].trim(),i=a[1]?.trim()??"__i",l=p(e,o),c=document.createComment(t.dataset.for);t.replaceWith(c),O.add(t);let u=()=>{let f=c;for(;(f=f.nextSibling)&&(f instanceof HTMLElement&&f.dataset.for==t.dataset.for);)f=f.previousSibling,f.nextSibling.remove()},w=f=>{if(u(),!f||!f[Symbol.iterator])return console.warn("data-for: The value given is not iterable.",{key:o,value:f});for(let y=0,W=c;y{let n=p(e,t.dataset.if),r=document.createComment("if: "+t.dataset.if);t.replaceWith(r);let a=o=>{!t.parentNode&&o?(t.hidden=!1,r.after(t)):t.localName!="link"&&t.remove()};a(d(n)),m(n)&&n.subscribe({next:a})}};var Y=new WeakSet,Z={select:"[data-lazy]",run:(t,e,n)=>{if(Y.has(t)||!t.childNodes.length)return;Y.add(t);let r=t.dataset.lazy,a=()=>{t.removeAttribute("data-lazy"),C(t,e);for(let o of t.childNodes)g(o,e)};r&&(t.addEventListener("::load",()=>t.classList.add(r),{once:!0}),t.addEventListener("::loaded",()=>t.classList.remove(r),{once:!0})),x(t).then(a),n()}};var tt={select:"[data-on]",run:(t,e)=>{let n=r=>{let a=r.split(":"),o=a[0].trim(),s=a.at(-1).trim(),i=p(e,s);i&&t.addEventListener(o,i)};for(let r of t.dataset.on.split(","))n(r)}};var et=t=>{let e=document.createElement("link");Object.assign(e,t),e.rel="preload",document.head.append(e)};var rt=new WeakSet,nt={select:"[data-preload]",run:t=>{if(rt.has(t)||t.hidden)return;rt.add(t);let e=()=>{let n=t.dataset.preload.split(",");for(let r of n){let a=r.split(":");et({href:a[0],as:a[1]??"fetch"})}};t.hasAttribute("data-lazy")?x(t).then(e):e()}};var Et=t=>{let e=t.dataset.route||t.dataset.routeNot;if(e[0]=="/")return e;for(;t=t.parentElement;){let n=t.dataset.route||t.dataset.routeNot;n&&(e=n.replaceAll("*","")+e)}return e.replaceAll(/\/+|\/\*\//g,"/")},at=[],ot=()=>{let t=location.href.replace(/index\.*[a-z0-9]*$/gm,"");for(let e of at){let n=e.pattern.test(t);if(e.negate?!n:n){if(e.node.hidden=!1,e.node.parentNode)continue;e.placeholder.after(e.node);let r=document.querySelector('head meta[name="route"]');r&&(r.content=e.pattern.pathname)}else e.node.localName!="link"&&e.node.remove()}};N.subscribe({next:ot});var st={select:"[data-route], [data-route-not]",run:async t=>{"URLPattern"in window||await import("https://kevinblt.github.io/hec/packages/@hec.js/ui/dist/urlpattnern.min.js");let e=Et(t),n=new URLPattern({pathname:e}),r=document.createComment("route: "+e);t.replaceWith(r),at.push({node:t,pattern:n,placeholder:r,negate:t.hasAttribute("data-route-not")}),ot()}};var R=[Q,X,st,nt,G,tt,J,$,Z];var it={},_={};function Ot(t,e={}){t instanceof URL&&(t=t.host==location.host?t.pathname:t.toString());let n=document.querySelector(`template[name="${t}"]`);if(!n){let r=document.querySelector('head meta[name="template-path"]');return it[t]??=new Promise(async a=>{n=document.createElement("template"),n.setAttribute("id",t.toString()),n.innerHTML=await fetch(r?.content?.replaceAll("[name]",t.toString())??t).then(i=>i.text());let o=n.content.querySelectorAll('link[rel="stylesheet"][href]'),s=[];for(let i of o)_[i.href]??=fetch(i.href,{headers:{accept:"text/css"}}).then(l=>l.text()),_[i.href].then(l=>{let c=document.createElement("style");c.innerHTML=l,i.replaceWith(c)}),s.push(_[i.href]);await Promise.all(s),document.body.append(n),a(n)}),it[t].then(a=>g(a.content.cloneNode(!0),e))}return g(n.content.cloneNode(!0),e)}function Ct(t,e={}){let n=document.createElement("template");return n.dataset.name="anonymous",n.innerHTML=t,g(n.content.cloneNode(!0),e)}function g(t,e={}){let n=(r,a=new WeakSet)=>{let o=!1;if(!(j(r)||a.has(r))){if(r.nodeName=="#document-fragment"&&A(r,e),r instanceof HTMLElement||r instanceof SVGElement){A(r,e);for(let s of R)r.matches(s.select)&&s.run(r,e,()=>o=!0);if(o)return;C(r,e)}else if(r instanceof Text&&r.textContent.includes("{{")){let s=r.textContent.split(/{{|}}/g);for(let i=0,l=r,c;ic.data=u.replaceAll("","")),a.add(c),l.after(c),l=c;r.remove()}a.add(r);for(let s of r.childNodes)n(s,a)}};return n(t,new WeakSet),t}var C=(t,e)=>{let n=t.getAttributeNames();for(let r of n){let a=t.getAttribute(r);a?.includes("{{")?lt(a,e,o=>{o=o.trim().replace(/ +/," "),o===""?t.removeAttribute(r):t.setAttribute(r,o)}):t.localName.includes("-")&&B(e,a)&&t.setAttribute(r,`@parent.${a}`)}},lt=(t,e,n)=>{let r=t.match(/{{[^}]+}}/g).map(T),a=t,o=()=>{t=a;for(let s of r){let i=d(s.value);t=t.replace(s.text,i??"")}return t};for(let s of r){let i=p(e,s.prop);if(i==null&&console.warn(`{{ ${s.prop} }}: No value for this key`,{key:s.prop,value:i}),m(i)){let l=i;for(let c in s.meta)if(v[c]){let u=v[c];l=l.map(w=>u({value:w,key:s.prop,param:s.meta[c],options:s.meta}))}s.value=l,l.subscribe({next:()=>n(o())})}else{let l=i;for(let c in s.meta)if(v[c]){let u=v[c];l=u({value:d(i),key:s.prop,param:s.meta[c],options:s.meta})}s.value=()=>l}}n(o())};function Mt(t,e,n){customElements.define(t,class extends HTMLElement{static observedAttributes=Object.keys(e).map(r=>r.toLowerCase());#t=Object.fromEntries(Object.entries(e).map(r=>[r[0],h(r[1])]));#e={};#r=!1;#n=null;on(r,a,o=null){this.addEventListener(r,a,o)}emit(r,a=null,o=!1){this.dispatchEvent(new CustomEvent(r,{detail:a,bubbles:o}))}async connectedCallback(){if(this.#n??=this.hasAttribute("data-lazy"),this.#n&&!this.#r)this.#r=!0,this.emit("::load",null,!0),this.removeAttribute("data-lazy"),await x(this);else{if(this.#r)return this.emit("::mount");await Promise.resolve(),this.emit("::load",null,!0),this.#r=!0}let r=this.shadowRoot??this.attachShadow({mode:"open"}),a=n(this.#t,this);(s=>{if(A(this,S(s)),"querySelector"in s){let i=s.querySelector("slot");if(i)for(;i.firstChild;)this.append(i.firstChild)}r.append(s),this.emit("::loaded",null,!0);for(let i in e){let l=this.getAttribute(i)??"";this.hasAttribute(i)||this.setAttribute(i,e[i]?.toString()),l.startsWith("@parent.")||(this.#e[i]??=new AbortController,this.#t[i].subscribe({next:c=>c==null?this.removeAttribute(i):this.setAttribute(i,c.toString())},{signal:this.#e[i].signal}))}this.dispatchEvent(new CustomEvent("::mount"))})(a instanceof Promise?await a:a)}disconnectedCallback(){this.dispatchEvent(new CustomEvent("::unmount"))}#a(r=""){r=r.toLowerCase();for(let a in this.#t)if(a.toLowerCase()==r)return[e[a],this.#t[a]];return[null,null]}attributeChangedCallback(r,a,o){let[s,i]=this.#a(r);if(o?.startsWith("@parent.")){let l=this.parentNode.host||this.parentNode,c=o.slice(8),u=p(S(l),c)??p(S(this),c);m(u)?(this.#e[r]?.abort(),this.#e[r]=new AbortController,this.#t[r]=u):i(u)}else i(typeof s=="number"?parseFloat(o):o)}})}var ct=new WeakMap;function Wt(t,e=null){document.dispatchEvent(new CustomEvent(t,{detail:e}))}function zt(t,e){let n=r=>e(r.detail);ct.set(e,n),document.addEventListener(t,n)}function Tt(t){return new Promise(e=>{let n=r=>e(r.detail);document.addEventListener(t,n,{once:!0})})}function jt(t,e){document.removeEventListener(t,ct.get(e))}for(let t in M)globalThis[t]=M[t];})(); diff --git a/packages/@hec.js/ui/lib/src/plugins.js b/packages/@hec.js/ui/lib/src/plugins.js index 29a8a02..9008882 100644 --- a/packages/@hec.js/ui/lib/src/plugins.js +++ b/packages/@hec.js/ui/lib/src/plugins.js @@ -18,7 +18,7 @@ import { dataRoutePlugin } from "./plugins/data-route.js"; /** * @template [T=HTMLElement] - * @type { Plugin[] } + * @type { Plugin[] } */ export const plugins = [ dataForPlugin, diff --git a/packages/@hec.js/ui/lib/src/template.js b/packages/@hec.js/ui/lib/src/template.js index 6f85bd4..e7f7503 100644 --- a/packages/@hec.js/ui/lib/src/template.js +++ b/packages/@hec.js/ui/lib/src/template.js @@ -101,8 +101,7 @@ export function templateByNode(template, props = {}) { setPropsOf(node, props); } - if (node instanceof HTMLElement) { - + if (node instanceof HTMLElement || node instanceof SVGElement) { setPropsOf(node, props); @@ -149,7 +148,7 @@ export function templateByNode(template, props = {}) { } /** - * @param { HTMLElement } node + * @param { HTMLElement | SVGElement } node * @param { {[key: string]: any } } props */ export const executeNodeAttributesTemplate = (node, props) => {