@ramstack/alpinegear-main 1.2.4 → 1.4.0

package/README.md

@@ -173,6 +173,11 @@ Provides the `x-hotkey` directive, which allows you to easily handle keyboard sh
 **[@ramstack/alpinegear-router](https://www.npmjs.com/package/@ramstack/alpinegear-router)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router))<br>
 Provides the `x-router` and `x-route` directives, which enable client-side navigation and routing functionality within your Alpine.js application.
 
+**[@ramstack/alpinegear-dialog](https://www.npmjs.com/package/@ramstack/alpinegear-dialog)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/dialog))<br>
+Provides a headless dialog directive for Alpine.js based on the native HTML `<dialog>` element.
+It supports declarative composition, value-based close semantics, and both modal and non-modal dialogs,
+with optional Promise-based imperative control.
+
 
 ## Contributions
 Bug reports and contributions are welcome.

package/alpinegear-main.esm.js

@@ -69,7 +69,7 @@ const is_array = Array.isArray;
 const is_nullish = value => value === null || value === undefined;
 const is_checkable_input = el => el.type === "checkbox" || el.type === "radio";
 const is_numeric_input = el => el.type === "number" || el.type === "range";
-const is_template = el => el instanceof HTMLTemplateElement;
+const is_template = el => el.matches("template");
 const is_element = el => el.nodeType === Node.ELEMENT_NODE;
 const as_array = value => is_array(value) ? value : [value];
 const loose_equal = (a, b) => a == b;
@@ -124,7 +124,7 @@ function watch(get_value, callback, options = null) {
         }
 
         if (initialized || (options?.immediate ?? true)) {
-            
+            // Prevent the watcher from detecting its own dependencies.
             setTimeout(() => {
                 callback(new_value, old_value);
                 old_value = new_value;
@@ -148,10 +148,10 @@ const canonical_names = create_map(
     "group");
 
 function plugin$5({ directive, entangle, evaluateLater, mapAttributes, mutateDom, prefixed }) {
-    
-    
-    
-    
+    // creating a shortcut for the directive,
+    // when an attribute name starting with & will refer to our directive,
+    // allowing us to write like this: &value="prop",
+    // which is equivalent to x-bound:value="prop"
     mapAttributes(attr => ({
         name: attr.name.replace(/^&/, prefixed("bound:")),
         value: attr.value
@@ -167,8 +167,8 @@ function plugin$5({ directive, entangle, evaluateLater, mapAttributes, mutateDom
 
         expression = expression?.trim();
 
-        
-        
+        // since attributes come in a lowercase,
+        // we need to convert the bound property name to its canonical form
         const property_name = canonical_names.get(value.trim().replace("-", "").toLowerCase());
 
         // if the expression is omitted, then we assume it corresponds
@@ -225,7 +225,7 @@ function plugin$5({ directive, entangle, evaluateLater, mapAttributes, mutateDom
                 break;
 
             case "open":
-                process_details();
+                process_open_attribute();
                 break;
 
             case "group":
@@ -279,8 +279,8 @@ function plugin$5({ directive, entangle, evaluateLater, mapAttributes, mutateDom
             switch (tag_name) {
                 case "INPUT":
                 case "TEXTAREA":
-                    
-                    
+                    // if the value of the bound property is "null" or "undefined",
+                    // we initialize it with the value from the element.
                     is_nullish(get_value()) && update_variable();
 
                     effect(update_property);
@@ -290,16 +290,16 @@ function plugin$5({ directive, entangle, evaluateLater, mapAttributes, mutateDom
                     break;
 
                 case "SELECT":
-                    
-                    
-                    
-                    
-                    
-                    
-                    
+                    // WORKAROUND:
+                    // For the "select" element, there might be a situation
+                    // where options are generated dynamically using the "x-for" directive,
+                    // and in this case, attempting to set the "value" property
+                    // will have no effect since there are no options yet.
+                    // Therefore, we use a small trick to set the value a bit later
+                    // when the "x-for" directive has finished its work.
                     setTimeout(() => {
-                        
-                        
+                        // if the value of the bound property is "null" or "undefined",
+                        // we initialize it with the value from the element.
                         is_nullish(get_value()) && update_variable();
 
                         effect(() => apply_select_values(el, as_array(get_value() ?? [])));
@@ -361,13 +361,29 @@ function plugin$5({ directive, entangle, evaluateLater, mapAttributes, mutateDom
             processed = true;
         }
 
-        function process_details() {
-            if (tag_name === "DETAILS") {
-                
-                
-                is_nullish(get_value()) && update_variable();
-
-                effect(update_property);
+        function process_open_attribute() {
+            const [is_details, is_dialog] = [tag_name === "DETAILS", tag_name === "DIALOG"];
+
+            if (is_details || is_dialog) {
+                //
+                // <details>:
+                //   Supports safe two-way binding via the "open" attribute,
+                //   so we initialize from the element only if the bound value
+                //   is null or undefined.
+                //
+                // <dialog>:
+                //   Directly setting element.open is discouraged by the spec,
+                //   as it breaks native dialog behavior and the "close" event.
+                //   Therefore, we always initialize state from the element
+                //   and treat it as a one-way source of truth.
+                //   https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open#value
+                //
+                (is_dialog || is_nullish(get_value())) && update_variable();
+
+                //
+                // Enable two-way binding only for "<details>"
+                //
+                is_details && effect(update_property);
                 cleanup(listen(el, "toggle", update_variable));
                 processed = true;
             }
@@ -455,19 +471,19 @@ function plugin$4({ directive, evaluateLater, mutateDom }) {
 
                 case Node.ELEMENT_NODE:
                     if (node !== el) {
-                        
-                        
-                        
-                        
-                        
-                        
-                        
-                        
-                        
-                        
-                        
-                        
-                        
+                        //
+                        // When we encounter an element with the "x-data" attribute, its properties
+                        // are not yet initialized, and the Alpine context is unavailable.
+                        // Attempting to use these properties will result in
+                        // an "Alpine Expression Error: [expression] is not defined".
+                        //
+                        // Workaround:
+                        // To avoid this, we manually add our "x-format" directive to the element.
+                        // Alpine evaluates "x-format" directive once the context is initialized.
+                        // In the current loop, we skip these elements to defer their processing.
+                        //
+                        // This also handles cases where the user manually adds the "x-format" attribute.
+                        //
                         if (node.hasAttribute("x-data") && !has_format_attr(node)) {
                             node.setAttribute("x-format", "");
                         }
@@ -659,11 +675,11 @@ function plugin$1(alpine) {
             return;
         }
 
-        
-        
-        
-        
-        
+        // Adding a queued task ensures asynchronous content update, allowing Alpine.js
+        // to handle context propagation for cloned elements properly.
+        // This is important because manipulation can occur within the mutateDom function
+        // when mutation observing is disabled, preventing proper context propagation
+        // for cloned elements.
         queueMicrotask(() => {
             el.innerHTML = "";
             el.append(tpl.content.cloneNode(true));
@@ -686,4 +702,4 @@ function plugin({ addScopeToNode, directive, initTree, mutateDom }) {
     });
 }
 
-export { plugin$5 as bound, plugin$4 as format, plugin$3 as fragment, plugin$2 as match, plugin$1 as template, plugin as when };
+export { plugin$5 as bound, plugin$4 as format, plugin$3 as fragment, plugin$2 as match, plugin$1 as template, plugin as when };

package/alpinegear-main.esm.min.js

@@ -1 +1 @@
-function e(e,...t){const n=e(...t);return()=>{let e;return n(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}function t(e,...t){const n=e(...t);t[t.length-1]=`${t.at(-1)} = __val`;const o=e(...t);return e=>{let t;n(e=>t=e),function(e){return"function"==typeof e?.set}(t)?t.set(e):o(()=>{},{scope:{__val:e}})}}const n=Symbol();let o;const a=(...e)=>console.warn("alpinegear.js:",...e),r=Array.isArray,c=e=>null==e,i=e=>"checkbox"===e.type||"radio"===e.type,l=e=>e instanceof HTMLTemplateElement,u=e=>e.nodeType===Node.ELEMENT_NODE,s=e=>r(e)?e:[e],d=(e,t)=>e==t,f=(e,t)=>e.findIndex(e=>e==t),p=(e,t)=>e.includes(t),m=(e,t,n,o)=>(e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)),h=e=>"object"==typeof e?JSON.parse(JSON.stringify(e)):e;function v(e,t,n=null){const{effect:o,release:a}=Alpine;let r,c,i=!1;const l=o(()=>{r=e(),i||(n?.deep&&JSON.stringify(r),c=r),(i||(n?.immediate??1))&&setTimeout(()=>{t(r,c),c=r},0),i=!0});return()=>a(l)}const b=new Map("value,checked,files,innerHTML,innerText,textContent,videoHeight,videoWidth,naturalHeight,naturalWidth,clientHeight,clientWidth,offsetHeight,offsetWidth,indeterminate,open,group".split(",").map(e=>[e.trim().toLowerCase(),e.trim()]));function g({directive:l,entangle:u,evaluateLater:g,mapAttributes:T,mutateDom:x,prefixed:_}){T(e=>({name:e.name.replace(/^&/,_("bound:")),value:e.value})),l("bound",(l,{expression:T,value:_,modifiers:k},{effect:N,cleanup:y})=>{if(!_)return void a("x-bound directive expects the presence of a bound property name");const E=l.tagName.toUpperCase();T=T?.trim();const L=b.get(_.trim().replace("-","").toLowerCase());T||=L;const w=e(g,l,T),S=t(g,l,T),D=()=>d(l[L],w())||x(()=>l[L]=w()),A=()=>S((e=>"number"===e.type||"range"===e.type)(l)?function(e){return""===e?null:+e}(l[L]):l[L]);let H;switch(L){case"value":!function(){switch(E){case"INPUT":case"TEXTAREA":c(w())&&A(),N(D),y(m(l,"input",A)),H=!0;break;case"SELECT":setTimeout(()=>{c(w())&&A(),N(()=>function(e,t){for(const n of e.options)n.selected=f(t,n.value)>=0}(l,s(w()??[]))),y(m(l,"change",()=>S(function(e){return e.multiple?[...e.selectedOptions].map(e=>e.value):e.value}(l))))},0),H=!0}}();break;case"checked":i(l)&&(N(D),y(m(l,"change",A)),H=!0);break;case"files":"file"===l.type&&(w()instanceof FileList||A(),N(D),y(m(l,"input",A)),H=!0);break;case"innerHTML":case"innerText":case"textContent":"true"===l.contentEditable&&(c(w())&&A(),N(D),y(m(l,"input",A)),H=!0);break;case"videoHeight":case"videoWidth":C("VIDEO","resize");break;case"naturalHeight":case"naturalWidth":C("IMG","load");break;case"clientHeight":case"clientWidth":case"offsetHeight":case"offsetWidth":y(function(e,t){return o??=new ResizeObserver(e=>{for(const t of e)for(const e of t.target[n]?.values()??[])e(t)}),e[n]??=new Set,e[n].add(t),o.observe(e),()=>{e[n].delete(t),e[n].size||(o.unobserve(e),e[n]=null)}}(l,A)),H=!0;break;case"indeterminate":"checkbox"===l.type&&(c(w())&&A(),N(D),y(m(l,"change",A)),H=!0);break;case"open":"DETAILS"===E&&(c(w())&&A(),N(D),y(m(l,"toggle",A)),H=!0);break;case"group":i(l)&&(l.name||x(()=>l.name=T),N(()=>x(()=>function(e,t){e.checked=r(t)?f(t,e.value)>=0:d(e.value,t)}(l,w()??[]))),y(m(l,"input",()=>S(function(e,t){if("radio"===e.type)return e.value;t=s(t);const n=f(t,e.value);return e.checked?n>=0||t.push(e.value):n>=0&&t.splice(n,1),t}(l,w())))),H=!0)}if(!H){const n=p(k,"in")?"in":p(k,"out")?"out":"inout",o=T===_?((e,t)=>{for(;e&&!t(e);)e=(e._x_teleportBack??e).parentElement;return e})(l.parentNode,e=>e._x_dataStack):l;if(!l._x_dataStack)return void a("x-bound directive requires the presence of the x-data directive to bind component properties");if(!o)return void a(`x-bound directive cannot find the parent scope where the '${_}' property is defined`);const r={get:e(g,o,T),set:t(g,o,T)},c={get:e(g,l,_),set:t(g,l,_)};switch(n){case"in":y(v(()=>r.get(),e=>c.set(h(e))));break;case"out":y(v(()=>c.get(),e=>r.set(h(e))));break;default:y(u(r,c))}}function C(e,t){E===e&&(A(),y(m(l,t,A)),H=!0)}})}function T({directive:t,evaluateLater:n,mutateDom:o}){t("format",(t,{modifiers:a},{effect:r})=>{const c=/{{(?<expr>.+?)}}/g,i=p(a,"once"),l=e=>e.hasAttribute("x-format");function u(e){i?o(()=>e()):r(()=>o(()=>e()))}!function a(r){switch(r.nodeType){case Node.TEXT_NODE:!function(t){const a=t.textContent.split(c);if(a.length>1){const r=new DocumentFragment;for(let o=0;a.length>o;o++)if(o%2==0)r.appendChild(document.createTextNode(a[o]));else{const c=e(n,t.parentNode,a[o]),i=document.createTextNode("");r.append(i),u(()=>i.textContent=c())}o(()=>t.parentElement.replaceChild(r,t))}}(r);break;case Node.ELEMENT_NODE:if(r!==t&&(r.hasAttribute("x-data")&&!l(r)&&r.setAttribute("x-format",""),l(r)))break;!function(e){for(let t of e.childNodes)a(t)}(r),function(t){for(let o of t.attributes)if([...o.value.matchAll(c)].length){const a=o.value;u(()=>o.value=a.replace(c,(o,a)=>e(n,t,a)()))}}(r)}}(t)})}function x(e,t,{addScopeToNode:n,cleanup:o,initTree:a,mutateDom:r,scope:c={}}){if(e._r_block)return;document.body._r_block??=(()=>{const e=new MutationObserver(e=>{for(let t of e)for(let e of t.addedNodes)e._r_block?.update()});return e.observe(document.body,{childList:!0,subtree:!0}),e})();let i=l(t)?[...t.content.cloneNode(!0).childNodes]:[t.cloneNode(!0)];r(()=>{for(let t of i)u(t)&&n(t,c,e),e.parentElement.insertBefore(t,e),u(t)&&a(t)}),e._r_block={template:t,update(){r(()=>{for(let t of i??[])e.parentElement.insertBefore(t,e)})},delete(){e._r_block=null;for(let e of i??[])e.remove();i=null}},o(()=>e._r_block?.delete())}function _({addScopeToNode:e,directive:t,initTree:n,mutateDom:o}){t("fragment",(t,{},{cleanup:r})=>{l(t)?x(t,t,{addScopeToNode:e,cleanup:r,initTree:n,mutateDom:o}):a("x-fragment can only be used on a 'template' tag")})}function k({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("match",(n,{},{cleanup:c,effect:i,evaluateLater:u})=>{if(!l(n))return void a("x-match can only be used on a 'template' tag");const s=[];for(let t of n.content.children){const n=t.getAttribute("x-case");null!==n?s.push({el:t,get_value:e(u,n)}):t.hasAttribute("x-default")&&s.push({el:t,get_value:()=>!0,default:!0})}const d=()=>n._r_block?.delete();i(()=>{let e;for(let t of s)t.get_value()&&!e&&(e=t);var a;e?(a=e,n._r_block?.template!==a.el&&(d(),x(n,a.el,{addScopeToNode:t,cleanup:c,initTree:o,mutateDom:r}))):d()})})}function N(e){e.directive("template",(e,{expression:t})=>{if(l(e))return void a("x-template cannot be used on a 'template' tag");const n=document.getElementById(t);l(n)?queueMicrotask(()=>{e.innerHTML="",e.append(n.content.cloneNode(!0))}):a("x-template directive can only reference the template tag")})}function y({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("when",(n,{expression:c},{cleanup:i,effect:u,evaluateLater:s})=>{if(!l(n))return void a("x-when can only be used on a 'template' tag");const d=e(s,c);u(()=>d()?x(n,n,{addScopeToNode:t,cleanup:i,initTree:o,mutateDom:r}):n._r_block?.delete())})}export{g as bound,T as format,_ as fragment,k as match,N as template,y as when};
+function e(e,...t){const n=e(...t);return()=>{let e;return n(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}function t(e,...t){const n=e(...t);t[t.length-1]=`${t.at(-1)} = __val`;const o=e(...t);return e=>{let t;n(e=>t=e),function(e){return"function"==typeof e?.set}(t)?t.set(e):o(()=>{},{scope:{__val:e}})}}const n=Symbol();let o;const a=(...e)=>console.warn("alpinegear.js:",...e),r=Array.isArray,c=e=>null==e,i=e=>"checkbox"===e.type||"radio"===e.type,l=e=>e.matches("template"),u=e=>e.nodeType===Node.ELEMENT_NODE,s=e=>r(e)?e:[e],d=(e,t)=>e==t,f=(e,t)=>e.findIndex(e=>e==t),p=(e,t)=>e.includes(t),m=(e,t,n,o)=>(e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)),h=e=>"object"==typeof e?JSON.parse(JSON.stringify(e)):e;function v(e,t,n=null){const{effect:o,release:a}=Alpine;let r,c,i=!1;const l=o(()=>{r=e(),i||(n?.deep&&JSON.stringify(r),c=r),(i||(n?.immediate??1))&&setTimeout(()=>{t(r,c),c=r},0),i=!0});return()=>a(l)}const b=new Map("value,checked,files,innerHTML,innerText,textContent,videoHeight,videoWidth,naturalHeight,naturalWidth,clientHeight,clientWidth,offsetHeight,offsetWidth,indeterminate,open,group".split(",").map(e=>[e.trim().toLowerCase(),e.trim()]));function g({directive:l,entangle:u,evaluateLater:g,mapAttributes:x,mutateDom:T,prefixed:_}){x(e=>({name:e.name.replace(/^&/,_("bound:")),value:e.value})),l("bound",(l,{expression:x,value:_,modifiers:k},{effect:N,cleanup:y})=>{if(!_)return void a("x-bound directive expects the presence of a bound property name");const E=l.tagName.toUpperCase();x=x?.trim();const L=b.get(_.trim().replace("-","").toLowerCase());x||=L;const w=e(g,l,x),D=t(g,l,x),S=()=>d(l[L],w())||T(()=>l[L]=w()),A=()=>D((e=>"number"===e.type||"range"===e.type)(l)?function(e){return""===e?null:+e}(l[L]):l[L]);let H;switch(L){case"value":!function(){switch(E){case"INPUT":case"TEXTAREA":c(w())&&A(),N(S),y(m(l,"input",A)),H=!0;break;case"SELECT":setTimeout(()=>{c(w())&&A(),N(()=>function(e,t){for(const n of e.options)n.selected=f(t,n.value)>=0}(l,s(w()??[]))),y(m(l,"change",()=>D(function(e){return e.multiple?[...e.selectedOptions].map(e=>e.value):e.value}(l))))},0),H=!0}}();break;case"checked":i(l)&&(N(S),y(m(l,"change",A)),H=!0);break;case"files":"file"===l.type&&(w()instanceof FileList||A(),N(S),y(m(l,"input",A)),H=!0);break;case"innerHTML":case"innerText":case"textContent":"true"===l.contentEditable&&(c(w())&&A(),N(S),y(m(l,"input",A)),H=!0);break;case"videoHeight":case"videoWidth":O("VIDEO","resize");break;case"naturalHeight":case"naturalWidth":O("IMG","load");break;case"clientHeight":case"clientWidth":case"offsetHeight":case"offsetWidth":y(function(e,t){return o??=new ResizeObserver(e=>{for(const t of e)for(const e of t.target[n]?.values()??[])e(t)}),e[n]??=new Set,e[n].add(t),o.observe(e),()=>{e[n].delete(t),e[n].size||(o.unobserve(e),e[n]=null)}}(l,A)),H=!0;break;case"indeterminate":"checkbox"===l.type&&(c(w())&&A(),N(S),y(m(l,"change",A)),H=!0);break;case"open":!function(){const[e,t]=["DETAILS"===E,"DIALOG"===E];(e||t)&&((t||c(w()))&&A(),e&&N(S),y(m(l,"toggle",A)),H=!0)}();break;case"group":i(l)&&(l.name||T(()=>l.name=x),N(()=>T(()=>function(e,t){e.checked=r(t)?f(t,e.value)>=0:d(e.value,t)}(l,w()??[]))),y(m(l,"input",()=>D(function(e,t){if("radio"===e.type)return e.value;t=s(t);const n=f(t,e.value);return e.checked?n>=0||t.push(e.value):n>=0&&t.splice(n,1),t}(l,w())))),H=!0)}if(!H){const n=p(k,"in")?"in":p(k,"out")?"out":"inout",o=x===_?((e,t)=>{for(;e&&!t(e);)e=(e._x_teleportBack??e).parentElement;return e})(l.parentNode,e=>e._x_dataStack):l;if(!l._x_dataStack)return void a("x-bound directive requires the presence of the x-data directive to bind component properties");if(!o)return void a(`x-bound directive cannot find the parent scope where the '${_}' property is defined`);const r={get:e(g,o,x),set:t(g,o,x)},c={get:e(g,l,_),set:t(g,l,_)};switch(n){case"in":y(v(()=>r.get(),e=>c.set(h(e))));break;case"out":y(v(()=>c.get(),e=>r.set(h(e))));break;default:y(u(r,c))}}function O(e,t){E===e&&(A(),y(m(l,t,A)),H=!0)}})}function x({directive:t,evaluateLater:n,mutateDom:o}){t("format",(t,{modifiers:a},{effect:r})=>{const c=/{{(?<expr>.+?)}}/g,i=p(a,"once"),l=e=>e.hasAttribute("x-format");function u(e){i?o(()=>e()):r(()=>o(()=>e()))}!function a(r){switch(r.nodeType){case Node.TEXT_NODE:!function(t){const a=t.textContent.split(c);if(a.length>1){const r=new DocumentFragment;for(let o=0;a.length>o;o++)if(o%2==0)r.appendChild(document.createTextNode(a[o]));else{const c=e(n,t.parentNode,a[o]),i=document.createTextNode("");r.append(i),u(()=>i.textContent=c())}o(()=>t.parentElement.replaceChild(r,t))}}(r);break;case Node.ELEMENT_NODE:if(r!==t&&(r.hasAttribute("x-data")&&!l(r)&&r.setAttribute("x-format",""),l(r)))break;!function(e){for(let t of e.childNodes)a(t)}(r),function(t){for(let o of t.attributes)if([...o.value.matchAll(c)].length){const a=o.value;u(()=>o.value=a.replace(c,(o,a)=>e(n,t,a)()))}}(r)}}(t)})}function T(e,t,{addScopeToNode:n,cleanup:o,initTree:a,mutateDom:r,scope:c={}}){if(e._r_block)return;document.body._r_block??=(()=>{const e=new MutationObserver(e=>{for(let t of e)for(let e of t.addedNodes)e._r_block?.update()});return e.observe(document.body,{childList:!0,subtree:!0}),e})();let i=l(t)?[...t.content.cloneNode(!0).childNodes]:[t.cloneNode(!0)];r(()=>{for(let t of i)u(t)&&n(t,c,e),e.parentElement.insertBefore(t,e),u(t)&&a(t)}),e._r_block={template:t,update(){r(()=>{for(let t of i??[])e.parentElement.insertBefore(t,e)})},delete(){e._r_block=null;for(let e of i??[])e.remove();i=null}},o(()=>e._r_block?.delete())}function _({addScopeToNode:e,directive:t,initTree:n,mutateDom:o}){t("fragment",(t,{},{cleanup:r})=>{l(t)?T(t,t,{addScopeToNode:e,cleanup:r,initTree:n,mutateDom:o}):a("x-fragment can only be used on a 'template' tag")})}function k({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("match",(n,{},{cleanup:c,effect:i,evaluateLater:u})=>{if(!l(n))return void a("x-match can only be used on a 'template' tag");const s=[];for(let t of n.content.children){const n=t.getAttribute("x-case");null!==n?s.push({el:t,get_value:e(u,n)}):t.hasAttribute("x-default")&&s.push({el:t,get_value:()=>!0,default:!0})}const d=()=>n._r_block?.delete();i(()=>{let e;for(let t of s)t.get_value()&&!e&&(e=t);var a;e?(a=e,n._r_block?.template!==a.el&&(d(),T(n,a.el,{addScopeToNode:t,cleanup:c,initTree:o,mutateDom:r}))):d()})})}function N(e){e.directive("template",(e,{expression:t})=>{if(l(e))return void a("x-template cannot be used on a 'template' tag");const n=document.getElementById(t);l(n)?queueMicrotask(()=>{e.innerHTML="",e.append(n.content.cloneNode(!0))}):a("x-template directive can only reference the template tag")})}function y({addScopeToNode:t,directive:n,initTree:o,mutateDom:r}){n("when",(n,{expression:c},{cleanup:i,effect:u,evaluateLater:s})=>{if(!l(n))return void a("x-when can only be used on a 'template' tag");const d=e(s,c);u(()=>d()?T(n,n,{addScopeToNode:t,cleanup:i,initTree:o,mutateDom:r}):n._r_block?.delete())})}export{g as bound,x as format,_ as fragment,k as match,N as template,y as when};

package/alpinegear-main.js

@@ -72,7 +72,7 @@
     const is_nullish = value => value === null || value === undefined;
     const is_checkable_input = el => el.type === "checkbox" || el.type === "radio";
     const is_numeric_input = el => el.type === "number" || el.type === "range";
-    const is_template = el => el instanceof HTMLTemplateElement;
+    const is_template = el => el.matches("template");
     const is_element = el => el.nodeType === Node.ELEMENT_NODE;
     const as_array = value => is_array(value) ? value : [value];
     const loose_equal = (a, b) => a == b;
@@ -127,7 +127,7 @@
             }
 
             if (initialized || (options?.immediate ?? true)) {
-                
+                // Prevent the watcher from detecting its own dependencies.
                 setTimeout(() => {
                     callback(new_value, old_value);
                     old_value = new_value;
@@ -151,10 +151,10 @@
         "group");
 
     function plugin$5({ directive, entangle, evaluateLater, mapAttributes, mutateDom, prefixed }) {
-        
-        
-        
-        
+        // creating a shortcut for the directive,
+        // when an attribute name starting with & will refer to our directive,
+        // allowing us to write like this: &value="prop",
+        // which is equivalent to x-bound:value="prop"
         mapAttributes(attr => ({
             name: attr.name.replace(/^&/, prefixed("bound:")),
             value: attr.value
@@ -170,8 +170,8 @@
 
             expression = expression?.trim();
 
-            
-            
+            // since attributes come in a lowercase,
+            // we need to convert the bound property name to its canonical form
             const property_name = canonical_names.get(value.trim().replace("-", "").toLowerCase());
 
             // if the expression is omitted, then we assume it corresponds
@@ -228,7 +228,7 @@
                     break;
 
                 case "open":
-                    process_details();
+                    process_open_attribute();
                     break;
 
                 case "group":
@@ -282,8 +282,8 @@
                 switch (tag_name) {
                     case "INPUT":
                     case "TEXTAREA":
-                        
-                        
+                        // if the value of the bound property is "null" or "undefined",
+                        // we initialize it with the value from the element.
                         is_nullish(get_value()) && update_variable();
 
                         effect(update_property);
@@ -293,16 +293,16 @@
                         break;
 
                     case "SELECT":
-                        
-                        
-                        
-                        
-                        
-                        
-                        
+                        // WORKAROUND:
+                        // For the "select" element, there might be a situation
+                        // where options are generated dynamically using the "x-for" directive,
+                        // and in this case, attempting to set the "value" property
+                        // will have no effect since there are no options yet.
+                        // Therefore, we use a small trick to set the value a bit later
+                        // when the "x-for" directive has finished its work.
                         setTimeout(() => {
-                            
-                            
+                            // if the value of the bound property is "null" or "undefined",
+                            // we initialize it with the value from the element.
                             is_nullish(get_value()) && update_variable();
 
                             effect(() => apply_select_values(el, as_array(get_value() ?? [])));
@@ -364,13 +364,29 @@
                 processed = true;
             }
 
-            function process_details() {
-                if (tag_name === "DETAILS") {
-                    
-                    
-                    is_nullish(get_value()) && update_variable();
-
-                    effect(update_property);
+            function process_open_attribute() {
+                const [is_details, is_dialog] = [tag_name === "DETAILS", tag_name === "DIALOG"];
+
+                if (is_details || is_dialog) {
+                    //
+                    // <details>:
+                    //   Supports safe two-way binding via the "open" attribute,
+                    //   so we initialize from the element only if the bound value
+                    //   is null or undefined.
+                    //
+                    // <dialog>:
+                    //   Directly setting element.open is discouraged by the spec,
+                    //   as it breaks native dialog behavior and the "close" event.
+                    //   Therefore, we always initialize state from the element
+                    //   and treat it as a one-way source of truth.
+                    //   https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open#value
+                    //
+                    (is_dialog || is_nullish(get_value())) && update_variable();
+
+                    //
+                    // Enable two-way binding only for "<details>"
+                    //
+                    is_details && effect(update_property);
                     cleanup(listen(el, "toggle", update_variable));
                     processed = true;
                 }
@@ -458,19 +474,19 @@
 
                     case Node.ELEMENT_NODE:
                         if (node !== el) {
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                            
-                            
+                            //
+                            // When we encounter an element with the "x-data" attribute, its properties
+                            // are not yet initialized, and the Alpine context is unavailable.
+                            // Attempting to use these properties will result in
+                            // an "Alpine Expression Error: [expression] is not defined".
+                            //
+                            // Workaround:
+                            // To avoid this, we manually add our "x-format" directive to the element.
+                            // Alpine evaluates "x-format" directive once the context is initialized.
+                            // In the current loop, we skip these elements to defer their processing.
+                            //
+                            // This also handles cases where the user manually adds the "x-format" attribute.
+                            //
                             if (node.hasAttribute("x-data") && !has_format_attr(node)) {
                                 node.setAttribute("x-format", "");
                             }
@@ -662,11 +678,11 @@
                 return;
             }
 
-            
-            
-            
-            
-            
+            // Adding a queued task ensures asynchronous content update, allowing Alpine.js
+            // to handle context propagation for cloned elements properly.
+            // This is important because manipulation can occur within the mutateDom function
+            // when mutation observing is disabled, preventing proper context propagation
+            // for cloned elements.
             queueMicrotask(() => {
                 el.innerHTML = "";
                 el.append(tpl.content.cloneNode(true));
@@ -700,4 +716,4 @@
 
     document.addEventListener("alpine:init", () => { Alpine.plugin(__main); });
 
-})();
+})();

package/alpinegear-main.min.js

@@ -1 +1 @@
-!function(){"use strict";function e(e,...t){const n=e(...t);return()=>{let e;return n(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}function t(e,...t){const n=e(...t);t[t.length-1]=`${t.at(-1)} = __val`;const o=e(...t);return e=>{let t;n(e=>t=e),function(e){return"function"==typeof e?.set}(t)?t.set(e):o(()=>{},{scope:{__val:e}})}}const n=Symbol();let o;const a=(...e)=>console.warn("alpinegear.js:",...e),i=Array.isArray,r=e=>null==e,c=e=>"checkbox"===e.type||"radio"===e.type,l=e=>e instanceof HTMLTemplateElement,u=e=>e.nodeType===Node.ELEMENT_NODE,s=e=>i(e)?e:[e],d=(e,t)=>e==t,f=(e,t)=>e.findIndex(e=>e==t),p=(e,t)=>e.includes(t),m=(e,t,n,o)=>(e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)),v=e=>"object"==typeof e?JSON.parse(JSON.stringify(e)):e;function h(e,t,n=null){const{effect:o,release:a}=Alpine;let i,r,c=!1;const l=o(()=>{i=e(),c||(n?.deep&&JSON.stringify(i),r=i),(c||(n?.immediate??1))&&setTimeout(()=>{t(i,r),r=i},0),c=!0});return()=>a(l)}const b=new Map("value,checked,files,innerHTML,innerText,textContent,videoHeight,videoWidth,naturalHeight,naturalWidth,clientHeight,clientWidth,offsetHeight,offsetWidth,indeterminate,open,group".split(",").map(e=>[e.trim().toLowerCase(),e.trim()]));function g(e,t,{addScopeToNode:n,cleanup:o,initTree:a,mutateDom:i,scope:r={}}){if(e._r_block)return;document.body._r_block??=(()=>{const e=new MutationObserver(e=>{for(let t of e)for(let e of t.addedNodes)e._r_block?.update()});return e.observe(document.body,{childList:!0,subtree:!0}),e})();let c=l(t)?[...t.content.cloneNode(!0).childNodes]:[t.cloneNode(!0)];i(()=>{for(let t of c)u(t)&&n(t,r,e),e.parentElement.insertBefore(t,e),u(t)&&a(t)}),e._r_block={template:t,update(){i(()=>{for(let t of c??[])e.parentElement.insertBefore(t,e)})},delete(){e._r_block=null;for(let e of c??[])e.remove();c=null}},o(()=>e._r_block?.delete())}function T(u){(function({directive:l,entangle:u,evaluateLater:g,mapAttributes:T,mutateDom:x,prefixed:_}){T(e=>({name:e.name.replace(/^&/,_("bound:")),value:e.value})),l("bound",(l,{expression:T,value:_,modifiers:k},{effect:N,cleanup:y})=>{if(!_)return void a("x-bound directive expects the presence of a bound property name");const E=l.tagName.toUpperCase();T=T?.trim();const L=b.get(_.trim().replace("-","").toLowerCase());T||=L;const S=e(g,l,T),w=t(g,l,T),D=()=>d(l[L],S())||x(()=>l[L]=S()),A=()=>w((e=>"number"===e.type||"range"===e.type)(l)?function(e){return""===e?null:+e}(l[L]):l[L]);let H;switch(L){case"value":!function(){switch(E){case"INPUT":case"TEXTAREA":r(S())&&A(),N(D),y(m(l,"input",A)),H=!0;break;case"SELECT":setTimeout(()=>{r(S())&&A(),N(()=>function(e,t){for(const n of e.options)n.selected=f(t,n.value)>=0}(l,s(S()??[]))),y(m(l,"change",()=>w(function(e){return e.multiple?[...e.selectedOptions].map(e=>e.value):e.value}(l))))},0),H=!0}}();break;case"checked":c(l)&&(N(D),y(m(l,"change",A)),H=!0);break;case"files":"file"===l.type&&(S()instanceof FileList||A(),N(D),y(m(l,"input",A)),H=!0);break;case"innerHTML":case"innerText":case"textContent":"true"===l.contentEditable&&(r(S())&&A(),N(D),y(m(l,"input",A)),H=!0);break;case"videoHeight":case"videoWidth":C("VIDEO","resize");break;case"naturalHeight":case"naturalWidth":C("IMG","load");break;case"clientHeight":case"clientWidth":case"offsetHeight":case"offsetWidth":y(function(e,t){return o??=new ResizeObserver(e=>{for(const t of e)for(const e of t.target[n]?.values()??[])e(t)}),e[n]??=new Set,e[n].add(t),o.observe(e),()=>{e[n].delete(t),e[n].size||(o.unobserve(e),e[n]=null)}}(l,A)),H=!0;break;case"indeterminate":"checkbox"===l.type&&(r(S())&&A(),N(D),y(m(l,"change",A)),H=!0);break;case"open":"DETAILS"===E&&(r(S())&&A(),N(D),y(m(l,"toggle",A)),H=!0);break;case"group":c(l)&&(l.name||x(()=>l.name=T),N(()=>x(()=>function(e,t){e.checked=i(t)?f(t,e.value)>=0:d(e.value,t)}(l,S()??[]))),y(m(l,"input",()=>w(function(e,t){if("radio"===e.type)return e.value;t=s(t);const n=f(t,e.value);return e.checked?n>=0||t.push(e.value):n>=0&&t.splice(n,1),t}(l,S())))),H=!0)}if(!H){const n=p(k,"in")?"in":p(k,"out")?"out":"inout",o=T===_?((e,t)=>{for(;e&&!t(e);)e=(e._x_teleportBack??e).parentElement;return e})(l.parentNode,e=>e._x_dataStack):l;if(!l._x_dataStack)return void a("x-bound directive requires the presence of the x-data directive to bind component properties");if(!o)return void a(`x-bound directive cannot find the parent scope where the '${_}' property is defined`);const i={get:e(g,o,T),set:t(g,o,T)},r={get:e(g,l,_),set:t(g,l,_)};switch(n){case"in":y(h(()=>i.get(),e=>r.set(v(e))));break;case"out":y(h(()=>r.get(),e=>i.set(v(e))));break;default:y(u(i,r))}}function C(e,t){E===e&&(A(),y(m(l,t,A)),H=!0)}})})(u),function({directive:t,evaluateLater:n,mutateDom:o}){t("format",(t,{modifiers:a},{effect:i})=>{const r=/{{(?<expr>.+?)}}/g,c=p(a,"once"),l=e=>e.hasAttribute("x-format");function u(e){c?o(()=>e()):i(()=>o(()=>e()))}!function a(i){switch(i.nodeType){case Node.TEXT_NODE:!function(t){const a=t.textContent.split(r);if(a.length>1){const i=new DocumentFragment;for(let o=0;a.length>o;o++)if(o%2==0)i.appendChild(document.createTextNode(a[o]));else{const r=e(n,t.parentNode,a[o]),c=document.createTextNode("");i.append(c),u(()=>c.textContent=r())}o(()=>t.parentElement.replaceChild(i,t))}}(i);break;case Node.ELEMENT_NODE:if(i!==t&&(i.hasAttribute("x-data")&&!l(i)&&i.setAttribute("x-format",""),l(i)))break;!function(e){for(let t of e.childNodes)a(t)}(i),function(t){for(let o of t.attributes)if([...o.value.matchAll(r)].length){const a=o.value;u(()=>o.value=a.replace(r,(o,a)=>e(n,t,a)()))}}(i)}}(t)})}(u),function({addScopeToNode:e,directive:t,initTree:n,mutateDom:o}){t("fragment",(t,{},{cleanup:i})=>{l(t)?g(t,t,{addScopeToNode:e,cleanup:i,initTree:n,mutateDom:o}):a("x-fragment can only be used on a 'template' tag")})}(u),function({addScopeToNode:t,directive:n,initTree:o,mutateDom:i}){n("match",(n,{},{cleanup:r,effect:c,evaluateLater:u})=>{if(!l(n))return void a("x-match can only be used on a 'template' tag");const s=[];for(let t of n.content.children){const n=t.getAttribute("x-case");null!==n?s.push({el:t,get_value:e(u,n)}):t.hasAttribute("x-default")&&s.push({el:t,get_value:()=>!0,default:!0})}const d=()=>n._r_block?.delete();c(()=>{let e;for(let t of s)t.get_value()&&!e&&(e=t);var a;e?(a=e,n._r_block?.template!==a.el&&(d(),g(n,a.el,{addScopeToNode:t,cleanup:r,initTree:o,mutateDom:i}))):d()})})}(u),function(e){e.directive("template",(e,{expression:t})=>{if(l(e))return void a("x-template cannot be used on a 'template' tag");const n=document.getElementById(t);l(n)?queueMicrotask(()=>{e.innerHTML="",e.append(n.content.cloneNode(!0))}):a("x-template directive can only reference the template tag")})}(u),function({addScopeToNode:t,directive:n,initTree:o,mutateDom:i}){n("when",(n,{expression:r},{cleanup:c,effect:u,evaluateLater:s})=>{if(!l(n))return void a("x-when can only be used on a 'template' tag");const d=e(s,r);u(()=>d()?g(n,n,{addScopeToNode:t,cleanup:c,initTree:o,mutateDom:i}):n._r_block?.delete())})}(u)}document.addEventListener("alpine:init",()=>{Alpine.plugin(T)})}();
+!function(){"use strict";function e(e,...t){const n=e(...t);return()=>{let e;return n(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}function t(e,...t){const n=e(...t);t[t.length-1]=`${t.at(-1)} = __val`;const o=e(...t);return e=>{let t;n(e=>t=e),function(e){return"function"==typeof e?.set}(t)?t.set(e):o(()=>{},{scope:{__val:e}})}}const n=Symbol();let o;const a=(...e)=>console.warn("alpinegear.js:",...e),i=Array.isArray,r=e=>null==e,c=e=>"checkbox"===e.type||"radio"===e.type,l=e=>e.matches("template"),u=e=>e.nodeType===Node.ELEMENT_NODE,s=e=>i(e)?e:[e],d=(e,t)=>e==t,f=(e,t)=>e.findIndex(e=>e==t),p=(e,t)=>e.includes(t),m=(e,t,n,o)=>(e.addEventListener(t,n,o),()=>e.removeEventListener(t,n,o)),v=e=>"object"==typeof e?JSON.parse(JSON.stringify(e)):e;function h(e,t,n=null){const{effect:o,release:a}=Alpine;let i,r,c=!1;const l=o(()=>{i=e(),c||(n?.deep&&JSON.stringify(i),r=i),(c||(n?.immediate??1))&&setTimeout(()=>{t(i,r),r=i},0),c=!0});return()=>a(l)}const b=new Map("value,checked,files,innerHTML,innerText,textContent,videoHeight,videoWidth,naturalHeight,naturalWidth,clientHeight,clientWidth,offsetHeight,offsetWidth,indeterminate,open,group".split(",").map(e=>[e.trim().toLowerCase(),e.trim()]));function g(e,t,{addScopeToNode:n,cleanup:o,initTree:a,mutateDom:i,scope:r={}}){if(e._r_block)return;document.body._r_block??=(()=>{const e=new MutationObserver(e=>{for(let t of e)for(let e of t.addedNodes)e._r_block?.update()});return e.observe(document.body,{childList:!0,subtree:!0}),e})();let c=l(t)?[...t.content.cloneNode(!0).childNodes]:[t.cloneNode(!0)];i(()=>{for(let t of c)u(t)&&n(t,r,e),e.parentElement.insertBefore(t,e),u(t)&&a(t)}),e._r_block={template:t,update(){i(()=>{for(let t of c??[])e.parentElement.insertBefore(t,e)})},delete(){e._r_block=null;for(let e of c??[])e.remove();c=null}},o(()=>e._r_block?.delete())}function x(u){(function({directive:l,entangle:u,evaluateLater:g,mapAttributes:x,mutateDom:T,prefixed:_}){x(e=>({name:e.name.replace(/^&/,_("bound:")),value:e.value})),l("bound",(l,{expression:x,value:_,modifiers:k},{effect:N,cleanup:y})=>{if(!_)return void a("x-bound directive expects the presence of a bound property name");const E=l.tagName.toUpperCase();x=x?.trim();const L=b.get(_.trim().replace("-","").toLowerCase());x||=L;const D=e(g,l,x),S=t(g,l,x),w=()=>d(l[L],D())||T(()=>l[L]=D()),A=()=>S((e=>"number"===e.type||"range"===e.type)(l)?function(e){return""===e?null:+e}(l[L]):l[L]);let H;switch(L){case"value":!function(){switch(E){case"INPUT":case"TEXTAREA":r(D())&&A(),N(w),y(m(l,"input",A)),H=!0;break;case"SELECT":setTimeout(()=>{r(D())&&A(),N(()=>function(e,t){for(const n of e.options)n.selected=f(t,n.value)>=0}(l,s(D()??[]))),y(m(l,"change",()=>S(function(e){return e.multiple?[...e.selectedOptions].map(e=>e.value):e.value}(l))))},0),H=!0}}();break;case"checked":c(l)&&(N(w),y(m(l,"change",A)),H=!0);break;case"files":"file"===l.type&&(D()instanceof FileList||A(),N(w),y(m(l,"input",A)),H=!0);break;case"innerHTML":case"innerText":case"textContent":"true"===l.contentEditable&&(r(D())&&A(),N(w),y(m(l,"input",A)),H=!0);break;case"videoHeight":case"videoWidth":O("VIDEO","resize");break;case"naturalHeight":case"naturalWidth":O("IMG","load");break;case"clientHeight":case"clientWidth":case"offsetHeight":case"offsetWidth":y(function(e,t){return o??=new ResizeObserver(e=>{for(const t of e)for(const e of t.target[n]?.values()??[])e(t)}),e[n]??=new Set,e[n].add(t),o.observe(e),()=>{e[n].delete(t),e[n].size||(o.unobserve(e),e[n]=null)}}(l,A)),H=!0;break;case"indeterminate":"checkbox"===l.type&&(r(D())&&A(),N(w),y(m(l,"change",A)),H=!0);break;case"open":!function(){const[e,t]=["DETAILS"===E,"DIALOG"===E];(e||t)&&((t||r(D()))&&A(),e&&N(w),y(m(l,"toggle",A)),H=!0)}();break;case"group":c(l)&&(l.name||T(()=>l.name=x),N(()=>T(()=>function(e,t){e.checked=i(t)?f(t,e.value)>=0:d(e.value,t)}(l,D()??[]))),y(m(l,"input",()=>S(function(e,t){if("radio"===e.type)return e.value;t=s(t);const n=f(t,e.value);return e.checked?n>=0||t.push(e.value):n>=0&&t.splice(n,1),t}(l,D())))),H=!0)}if(!H){const n=p(k,"in")?"in":p(k,"out")?"out":"inout",o=x===_?((e,t)=>{for(;e&&!t(e);)e=(e._x_teleportBack??e).parentElement;return e})(l.parentNode,e=>e._x_dataStack):l;if(!l._x_dataStack)return void a("x-bound directive requires the presence of the x-data directive to bind component properties");if(!o)return void a(`x-bound directive cannot find the parent scope where the '${_}' property is defined`);const i={get:e(g,o,x),set:t(g,o,x)},r={get:e(g,l,_),set:t(g,l,_)};switch(n){case"in":y(h(()=>i.get(),e=>r.set(v(e))));break;case"out":y(h(()=>r.get(),e=>i.set(v(e))));break;default:y(u(i,r))}}function O(e,t){E===e&&(A(),y(m(l,t,A)),H=!0)}})})(u),function({directive:t,evaluateLater:n,mutateDom:o}){t("format",(t,{modifiers:a},{effect:i})=>{const r=/{{(?<expr>.+?)}}/g,c=p(a,"once"),l=e=>e.hasAttribute("x-format");function u(e){c?o(()=>e()):i(()=>o(()=>e()))}!function a(i){switch(i.nodeType){case Node.TEXT_NODE:!function(t){const a=t.textContent.split(r);if(a.length>1){const i=new DocumentFragment;for(let o=0;a.length>o;o++)if(o%2==0)i.appendChild(document.createTextNode(a[o]));else{const r=e(n,t.parentNode,a[o]),c=document.createTextNode("");i.append(c),u(()=>c.textContent=r())}o(()=>t.parentElement.replaceChild(i,t))}}(i);break;case Node.ELEMENT_NODE:if(i!==t&&(i.hasAttribute("x-data")&&!l(i)&&i.setAttribute("x-format",""),l(i)))break;!function(e){for(let t of e.childNodes)a(t)}(i),function(t){for(let o of t.attributes)if([...o.value.matchAll(r)].length){const a=o.value;u(()=>o.value=a.replace(r,(o,a)=>e(n,t,a)()))}}(i)}}(t)})}(u),function({addScopeToNode:e,directive:t,initTree:n,mutateDom:o}){t("fragment",(t,{},{cleanup:i})=>{l(t)?g(t,t,{addScopeToNode:e,cleanup:i,initTree:n,mutateDom:o}):a("x-fragment can only be used on a 'template' tag")})}(u),function({addScopeToNode:t,directive:n,initTree:o,mutateDom:i}){n("match",(n,{},{cleanup:r,effect:c,evaluateLater:u})=>{if(!l(n))return void a("x-match can only be used on a 'template' tag");const s=[];for(let t of n.content.children){const n=t.getAttribute("x-case");null!==n?s.push({el:t,get_value:e(u,n)}):t.hasAttribute("x-default")&&s.push({el:t,get_value:()=>!0,default:!0})}const d=()=>n._r_block?.delete();c(()=>{let e;for(let t of s)t.get_value()&&!e&&(e=t);var a;e?(a=e,n._r_block?.template!==a.el&&(d(),g(n,a.el,{addScopeToNode:t,cleanup:r,initTree:o,mutateDom:i}))):d()})})}(u),function(e){e.directive("template",(e,{expression:t})=>{if(l(e))return void a("x-template cannot be used on a 'template' tag");const n=document.getElementById(t);l(n)?queueMicrotask(()=>{e.innerHTML="",e.append(n.content.cloneNode(!0))}):a("x-template directive can only reference the template tag")})}(u),function({addScopeToNode:t,directive:n,initTree:o,mutateDom:i}){n("when",(n,{expression:r},{cleanup:c,effect:u,evaluateLater:s})=>{if(!l(n))return void a("x-when can only be used on a 'template' tag");const d=e(s,r);u(()=>d()?g(n,n,{addScopeToNode:t,cleanup:c,initTree:o,mutateDom:i}):n._r_block?.delete())})}(u)}document.addEventListener("alpine:init",()=>{Alpine.plugin(x)})}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-main",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "description": "@ramstack/alpinegear-main is a combined plugin that includes several Alpine.js directives, providing a convenient all-in-one package.",
   "author": "Rameel Burhan",
   "license": "MIT",