alpinejs-component/dist/component.min.js

Reusable HTML components powered by Alpine JS reactivity 🛸

(()=>{function u(t,n){let l=(n.includes("global")?[...document.styleSheets]:[...document.styleSheets].filter(({title:e})=>n.includes(e))).filter(({href:e})=>e?e?.includes(window.location.host):!0).flatMap(({cssRules:e})=>[...e]),i=new CSSStyleSheet;for(let e of[...l].reverse())e instanceof CSSStyleRule&&e.selectorText===":root"||i.insertRule(e.cssText);t.adoptedStyleSheets=[i]}async function d(t,n,o){function r(l){let i=document.getElementById(l),a=new DOMParser().parseFromString(i.innerHTML,"text/html").body.firstChild;return Promise.resolve(a)}let s=await r(n);o.appendChild(s),t.initTree(o)}async function h(t,n,o){let s=await(await fetch(n)).text(),i=new DOMParser().parseFromString(s,"text/html").body.firstChild;o.appendChild(i),t.initTree(o)}function f(t){class n extends HTMLElement{connectedCallback(){if(this._hasInit)return;let s=this.attachShadow({mode:"open"}),l=this.hasAttribute(":template"),i=this.hasAttribute(":url");(l||i)&&t.initTree(this);let{template:e,url:a,styles:S}=this.attributes||{},m=e?.value||"",c=a?.value||"",p=S?.value.split(",")||"";m.length&&d(t,m,s),c.length&&h(t,c,s),p.length&&u(s,p),this._hasInit=!0}}let{name:o}=window?.xComponent||{name:"x-component"};window.customElements.get(o)||(customElements.define(o,n),new n)}document.addEventListener("alpine:init",()=>window.Alpine.plugin(f));})();