x-widget
Version:
Adds the ability to define reusable Widgets (WebComponents) using Alpinejs.
2 lines (1 loc) • 1.73 kB
JavaScript
var u=Object.defineProperty;var p=e=>u(e,"__esModule",{value:!0});var g=(e,s)=>{p(e);for(var o in s)u(e,o,{get:s[o],enumerable:!0})};g(exports,{slotsMagic:()=>w,xWidgetDirective:()=>E});function w(e){for(;e&&!e._x_slots;)e=e.parentElement;return e?._x_slots}function E(e,{expression:s,modifiers:o},{Alpine:t}){let l=s;if(window.customElements.get(l))return;if(o[0]){let i=document.createElement("style");i.innerHTML=`${l} { display: ${o[0]}}`,document.head.appendChild(i)}t._widgets?t._widgets.push(l):t._widgets=[l];let c=e.content.firstElementChild;window.customElements.define(l,class extends HTMLElement{constructor(){super();this._slotFills=null}connectedCallback(){let i;this._slotFills?i=this._slotFills:(i=_(this),this._slotFills=i);let d=c.cloneNode(!0);this._x_slots=Object.fromEntries([...i.entries()].map(([n,r])=>[n,r]));let h=f(d);for(let n of h){let r=n.name||"default",a=i.get(r);a?n.replaceWith(...a.map(m=>m.cloneNode(!0))):n.replaceWith(...n.childNodes)}requestAnimationFrame(()=>{for(;this.firstChild;)this.removeChild(this.firstChild);this.appendChild(d)}),this.dispatchEvent(new CustomEvent("x-widget:connected",{bubbles:!0}))}})}function f(e){let s=[...e.querySelectorAll("slot")];e.tagName==="SLOT"&&s.unshift(e);let o=e.querySelectorAll("template");for(let t of o)if(!t.getAttribute("x-widget"))for(let l of t.content.children)s.push(...f(l));return s}function _(e){let s=new Map;function o(t,l){s.has(t)?s.get(t).push(...l):s.set(t,l)}for(let t of e.childNodes)if(t.tagName==="TEMPLATE"){let l=t.getAttribute("slot"),c=!l&&(t.getAttribute("x-for")||t.getAttribute("x-if"));o(l||"default",c?[t]:[...t.content.childNodes])}else(t.nodeType!==Node.TEXT_NODE||t.textContent.trim())&&o("default",[t]);return s}