@ramstack/alpinegear-template 1.2.4 → 1.4.0

package/README.md

@@ -202,6 +202,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-template.esm.js

@@ -1,5 +1,5 @@
 const warn = (...args) => console.warn("alpinegear.js:", ...args);
-const is_template = el => el instanceof HTMLTemplateElement;
+const is_template = el => el.matches("template");
 
 function plugin(alpine) {
     alpine.directive("template", (el, { expression }) => {
@@ -15,11 +15,11 @@ function plugin(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));
@@ -27,4 +27,4 @@ function plugin(alpine) {
     });
 }
 
-export { plugin as template };
+export { plugin as template };

package/alpinegear-template.esm.min.js

@@ -1 +1 @@
-const e=(...e)=>console.warn("alpinegear.js:",...e),t=e=>e instanceof HTMLTemplateElement;function n(n){n.directive("template",(n,{expression:a})=>{if(t(n))return void e("x-template cannot be used on a 'template' tag");const o=document.getElementById(a);t(o)?queueMicrotask(()=>{n.innerHTML="",n.append(o.content.cloneNode(!0))}):e("x-template directive can only reference the template tag")})}export{n as template};
+const e=(...e)=>console.warn("alpinegear.js:",...e),t=e=>e.matches("template");function n(n){n.directive("template",(n,{expression:a})=>{if(t(n))return void e("x-template cannot be used on a 'template' tag");const o=document.getElementById(a);t(o)?queueMicrotask(()=>{n.innerHTML="",n.append(o.content.cloneNode(!0))}):e("x-template directive can only reference the template tag")})}export{n as template};

package/alpinegear-template.js

@@ -2,7 +2,7 @@
     'use strict';
 
     const warn = (...args) => console.warn("alpinegear.js:", ...args);
-    const is_template = el => el instanceof HTMLTemplateElement;
+    const is_template = el => el.matches("template");
 
     function plugin(alpine) {
         alpine.directive("template", (el, { expression }) => {
@@ -18,11 +18,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));
@@ -32,4 +32,4 @@
 
     document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
 
-})();
+})();

package/alpinegear-template.min.js

@@ -1 +1 @@
-!function(){"use strict";const e=(...e)=>console.warn("alpinegear.js:",...e),t=e=>e instanceof HTMLTemplateElement;function n(n){n.directive("template",(n,{expression:i})=>{if(t(n))return void e("x-template cannot be used on a 'template' tag");const a=document.getElementById(i);t(a)?queueMicrotask(()=>{n.innerHTML="",n.append(a.content.cloneNode(!0))}):e("x-template directive can only reference the template tag")})}document.addEventListener("alpine:init",()=>{Alpine.plugin(n)})}();
+!function(){"use strict";const e=(...e)=>console.warn("alpinegear.js:",...e),t=e=>e.matches("template");function n(n){n.directive("template",(n,{expression:a})=>{if(t(n))return void e("x-template cannot be used on a 'template' tag");const i=document.getElementById(a);t(i)?queueMicrotask(()=>{n.innerHTML="",n.append(i.content.cloneNode(!0))}):e("x-template directive can only reference the template tag")})}document.addEventListener("alpine:init",()=>{Alpine.plugin(n)})}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-template",
-  "version": "1.2.4",
+  "version": "1.4.0",
   "description": "@ramstack/alpinegear-template provides 'x-template' Alpine.js directive, that enhances template management, providing better control over reusable template blocks, dynamic and recursive component rendering.",
   "author": "Rameel Burhan",
   "license": "MIT",