@ramstack/alpinegear-when 1.4.2 → 1.4.4

package/README.md

@@ -1,144 +1,111 @@
-# @ramstack/alpinegear-when
-[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-when)](https://www.npmjs.com/package/@ramstack/alpinegear-when)
-[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
-
-`@ramstack/alpinegear-when` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-when` directive.
-
-This directive is used for conditionally rendering elements on the page, similar to `x-if`.
-
-However, unlike `x-if`, it supports multiple root elements inside the `<template>` tag.
-Essentially, `x-when` works like a combination of `x-if` and [x-fragment](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment), but with cleaner syntax. There's no need to nest multiple `<template>` tags, which makes the markup simpler and easier to manage.
-
-> [!Note]
-> This package is part of the **[`@ramstack/alpinegear-main`](https://www.npmjs.com/package/@ramstack/alpinegear-main)** bundle.
-> If you are using the main bundle, you don't need to install this package separately.
-
-## Installation
-
-### Using CDN
-To include the CDN version of this plugin, add the following `<script>` tag before the core `alpine.js` file:
-
-```html
-<!-- alpine.js plugin -->
-<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-when@1/alpinegear-when.min.js" defer></script>
-
-<!-- alpine.js -->
-<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
-```
-
-### Using NPM
-Alternatively, you can install the plugin via `npm`:
-
-```bash
-npm install --save @ramstack/alpinegear-when
-```
-
-Then initialize it in your bundle:
-
-```js
-import Alpine from "alpinejs";
-import when from "@ramstack/alpinegear-when";
-
-Alpine.plugin(when);
-Alpine.start();
-```
-
-## Usage
-The `x-when` directive functions similarly to `x-if`, but allows multiple root elements in the `<template>` tag:
-
-```html
-<div x-data="{ show: false }">
-  <button @click="show = !show">Show more</button>
-
-  <ul>
-    <li>Apple</li>
-    <li>Banana</li>
-
-    <template x-when="show">
-      <li>Orange</li>
-      <li>Grape</li>
-      <li>Mango</li>
-    </template>
-  </ul>
-</div>
-```
-🚀 [Live demo | Alpine.js x-when: Multiple root elements](https://jsfiddle.net/rameel/91zhsLqp/)
-
-### Using with `x-for`
-The `x-when` directive can also be used with the directive `x-for` to conditionally render multiple items:
-
-```html
-<div x-data="{
-  items: [
-    { term: 'Star', description: 'Luminous plasma sphere.' },
-    { term: 'Planet', description: 'Body orbiting a star.' },
-    { term: 'Galaxy', description: 'Stars and dust system.' },
-    { term: 'Nebula', description: 'Cloud of gas in space.' }
-  ]}">
-  <button @click="items.reverse()">Reverse</button>
-
-  <dl>
-    <template x-for="item in items" :key="item.term">
-      <template x-when="true">
-        <dt x-text="item.term"></dt>
-        <dd x-text="item.description"></dd>
-      </template>
-    </template>
-  </dl>
-</div>
-```
-🚀 [Live demo | Alpine.js x-when: Multiple root elements with x-for](https://jsfiddle.net/rameel/cuoh3297/)
-
-## Source code
-You can find the source code for this plugin on GitHub:
-
-https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when
-
-## Related projects
-
-**[@ramstack/alpinegear-main](https://www.npmjs.com/package/@ramstack/alpinegear-main)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main))<br>
-Provides a combined plugin that includes several useful directives.
-This package aggregates multiple individual plugins, offering a convenient all-in-one bundle.
-Included directives: `x-bound`, `x-format`, `x-fragment`, `x-match`, `x-template`, and `x-when`.
-
-**[@ramstack/alpinegear-bound](https://www.npmjs.com/package/@ramstack/alpinegear-bound)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound))<br>
-Provides the `x-bound` directive, which allows for two-way binding of input elements and their associated data properties.
-It works similarly to the binding provided by [Svelte](https://svelte.dev/docs/element-directives#bind-property)
-and also supports synchronizing values between two `Alpine.js` data properties.
-
-**[@ramstack/alpinegear-format](https://www.npmjs.com/package/@ramstack/alpinegear-format)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format))<br>
-Provides the `x-format` directive, which allows you to easily interpolate text using a template syntax similar to what's available in `Vue.js`.
-
-**[@ramstack/alpinegear-template](https://www.npmjs.com/package/@ramstack/alpinegear-template)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/template))<br>
-Provides the `x-template` directive, which allows you to define a template once anywhere in the DOM and reference it by its ID.
-
-**[@ramstack/alpinegear-fragment](https://www.npmjs.com/package/@ramstack/alpinegear-fragment)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment))<br>
-Provides the `x-fragment` directive, which allows for fragment-like behavior similar to what's available in frameworks
-like `Vue.js` or `React`, where multiple root elements can be grouped together.
-
-**[@ramstack/alpinegear-match](https://www.npmjs.com/package/@ramstack/alpinegear-match)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match))<br>
-Provides the `x-match` directive, which functions similarly to the `switch` statement in many programming languages,
-allowing you to conditionally render elements based on matching cases.
-
-**[@ramstack/alpinegear-destroy](https://www.npmjs.com/package/@ramstack/alpinegear-destroy)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy))<br>
-Provides the `x-destroy` directive, which is the opposite of `x-init` and allows you to hook into the cleanup phase
-of any element, running a callback when the element is removed from the DOM.
-
-**[@ramstack/alpinegear-hotkey](https://www.npmjs.com/package/@ramstack/alpinegear-hotkey)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey))<br>
-Provides the `x-hotkey` directive, which allows you to easily handle keyboard shortcuts within your Alpine.js components or application.
-
-**[@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.
-
-## License
-This package is released as open source under the **MIT License**.
-See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.
+# @ramstack/alpinegear-when
+[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-when)](https://www.npmjs.com/package/@ramstack/alpinegear-when)
+[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
+
+`@ramstack/alpinegear-when` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-when` directive.
+
+This directive is used for conditionally rendering elements on the page, similar to `x-if`.
+
+However, unlike `x-if`, it supports multiple root elements inside the `<template>` tag.
+Essentially, `x-when` works like a combination of `x-if` and [x-fragment](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment), but with cleaner syntax. There's no need to nest multiple `<template>` tags, which makes the markup simpler and easier to manage.
+
+> [!Note]
+> This package is part of the **[`@ramstack/alpinegear-main`](https://www.npmjs.com/package/@ramstack/alpinegear-main)** bundle.
+> If you are using the main bundle, you don't need to install this package separately.
+
+## Installation
+
+### Using CDN
+To include the CDN version of this plugin, add the following `<script>` tag before the core `alpine.js` file:
+
+```html
+<!-- alpine.js plugin -->
+<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-when@1/alpinegear-when.min.js" defer></script>
+
+<!-- alpine.js -->
+<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
+```
+
+### Using NPM
+Alternatively, you can install the plugin via `npm`:
+
+```bash
+npm install --save @ramstack/alpinegear-when
+```
+
+Then initialize it in your bundle:
+
+```js
+import Alpine from "alpinejs";
+import when from "@ramstack/alpinegear-when";
+
+Alpine.plugin(when);
+Alpine.start();
+```
+
+## Usage
+The `x-when` directive functions similarly to `x-if`, but allows multiple root elements in the `<template>` tag:
+
+```html
+<div x-data="{ show: false }">
+  <button @click="show = !show">Show more</button>
+
+  <ul>
+    <li>Apple</li>
+    <li>Banana</li>
+
+    <template x-when="show">
+      <li>Orange</li>
+      <li>Grape</li>
+      <li>Mango</li>
+    </template>
+  </ul>
+</div>
+```
+🚀 [Live demo | Alpine.js x-when: Multiple root elements](https://jsfiddle.net/rameel/91zhsLqp/)
+
+### Using with `x-for`
+The `x-when` directive can also be used with the directive `x-for` to conditionally render multiple items:
+
+```html
+<div x-data="{
+  items: [
+    { term: 'Star', description: 'Luminous plasma sphere.' },
+    { term: 'Planet', description: 'Body orbiting a star.' },
+    { term: 'Galaxy', description: 'Stars and dust system.' },
+    { term: 'Nebula', description: 'Cloud of gas in space.' }
+  ]}">
+  <button @click="items.reverse()">Reverse</button>
+
+  <dl>
+    <template x-for="item in items" :key="item.term">
+      <template x-when="true">
+        <dt x-text="item.term"></dt>
+        <dd x-text="item.description"></dd>
+      </template>
+    </template>
+  </dl>
+</div>
+```
+🚀 [Live demo | Alpine.js x-when: Multiple root elements with x-for](https://jsfiddle.net/rameel/cuoh3297/)
+
+## Source code
+You can find the source code for this plugin on GitHub:
+
+https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when
+
+
+## Related packages
+This package is part of **[AlpineGear](https://github.com/rameel/ramstack.alpinegear.js)** —
+a collection of utilities and directives for [Alpine.js](https://alpinejs.dev).
+
+You can find the full list of related packages and their documentation here:
+https://github.com/rameel/ramstack.alpinegear.js
+
+
+## Contributions
+Bug reports and contributions are welcome.
+
+## License
+This package is released as open source under the **MIT License**.
+See the [LICENSE](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE) file for more details.

package/alpinegear-when.esm.js

@@ -1,60 +1,60 @@
-const warn = (...args) => console.warn("alpinegear.js:", ...args);
-const is_template = el => el.matches("template");
+const warn = (...args) => console.warn("alpinegear.js:", ...args);
+const is_template = el => el.matches("template");
 const is_element = el => el.nodeType === Node.ELEMENT_NODE;
 
-function anchor_block(el, template, { addScopeToNode, cleanup, initTree, mutateDom, scope = {} }) {
-    if (el._r_block) {
-        return;
-    }
-
-    initialize();
-
-    let nodes = is_template(template)
-        ? [...template.content.cloneNode(true).childNodes]
-        : [template.cloneNode(true)];
-
-    mutateDom(() => {
-        for (let node of nodes) {
-            is_element(node) && addScopeToNode(node, scope, el);
-            el.parentElement.insertBefore(node, el);
-            is_element(node) && initTree(node);
-        }
-    });
-
-    el._r_block = {
-        template,
-        update() {
-            mutateDom(() => {
-                for (let node of nodes ?? []) {
-                    el.parentElement.insertBefore(node, el);
-                }
-            });
-        },
-        delete() {
-            el._r_block = null;
-            for (let node of nodes ?? []) {
-                node.remove();
-            }
-            nodes = null;
-        }
-    };
-
-    cleanup(() => el._r_block?.delete());
-}
-
-function initialize() {
-    document.body._r_block ??= (() => {
-        const observer = new MutationObserver(mutations => {
-            for (let mutation of mutations) {
-                for (let node of mutation.addedNodes) {
-                    node._r_block?.update();
-                }
-            }
-        });
-
-        observer.observe(document.body, { childList: true, subtree: true });
-        return observer;
-    })();
+function anchor_block(el, template, { addScopeToNode, cleanup, initTree, mutateDom, scope = {} }) {
+    if (el._r_block) {
+        return;
+    }
+
+    initialize();
+
+    let nodes = is_template(template)
+        ? [...template.content.cloneNode(true).childNodes]
+        : [template.cloneNode(true)];
+
+    mutateDom(() => {
+        for (let node of nodes) {
+            is_element(node) && addScopeToNode(node, scope, el);
+            el.parentElement.insertBefore(node, el);
+            is_element(node) && initTree(node);
+        }
+    });
+
+    el._r_block = {
+        template,
+        update() {
+            mutateDom(() => {
+                for (let node of nodes ?? []) {
+                    el.parentElement.insertBefore(node, el);
+                }
+            });
+        },
+        delete() {
+            el._r_block = null;
+            for (let node of nodes ?? []) {
+                node.remove();
+            }
+            nodes = null;
+        }
+    };
+
+    cleanup(() => el._r_block?.delete());
+}
+
+function initialize() {
+    document.body._r_block ??= (() => {
+        const observer = new MutationObserver(mutations => {
+            for (let mutation of mutations) {
+                for (let node of mutation.addedNodes) {
+                    node._r_block?.update();
+                }
+            }
+        });
+
+        observer.observe(document.body, { childList: true, subtree: true });
+        return observer;
+    })();
 }
 
 function create_getter(evaluate_later, ...args) {
@@ -70,19 +70,19 @@ function has_getter(value) {
     return typeof value?.get === "function";
 }
 
-function plugin({ addScopeToNode, directive, initTree, mutateDom }) {
-    directive("when", (el, { expression }, { cleanup, effect, evaluateLater }) => {
-        if (!is_template(el)) {
-            warn("x-when can only be used on a 'template' tag");
-            return;
-        }
-
-        const activate = () => anchor_block(el, el, { addScopeToNode, cleanup, initTree, mutateDom });
-        const clear = () => el._r_block?.delete();
-
-        const get = create_getter(evaluateLater, expression);
-        effect(() => get() ? activate() : clear());
-    });
+function plugin({ addScopeToNode, directive, initTree, mutateDom }) {
+    directive("when", (el, { expression }, { cleanup, effect, evaluateLater }) => {
+        if (!is_template(el)) {
+            warn("x-when can only be used on a 'template' tag");
+            return;
+        }
+
+        const activate = () => anchor_block(el, el, { addScopeToNode, cleanup, initTree, mutateDom });
+        const clear = () => el._r_block?.delete();
+
+        const get = create_getter(evaluateLater, expression);
+        effect(() => get() ? activate() : clear());
+    });
 }
 
-export { plugin as when };
+export { plugin as default, plugin as when };

package/alpinegear-when.esm.min.js

@@ -1 +1 @@
-const e=e=>e.matches("template"),o=e=>e.nodeType===Node.ELEMENT_NODE;function t({addScopeToNode:t,directive:n,initTree:r,mutateDom:l}){n("when",(n,{expression:c},{cleanup:d,effect:a,evaluateLater:u})=>{if(!e(n))return void console.warn("alpinegear.js:","x-when can only be used on a 'template' tag");const i=function(e,...o){const t=e(...o);return()=>{let e;return t(o=>e=o),o=e,"function"==typeof o?.get?e.get():e;var o}}(u,c);a(()=>i()?function(t,n,{addScopeToNode:r,cleanup:l,initTree:c,mutateDom:d,scope:a={}}){if(t._r_block)return;document.body._r_block??=(()=>{const e=new MutationObserver(e=>{for(let o of e)for(let e of o.addedNodes)e._r_block?.update()});return e.observe(document.body,{childList:!0,subtree:!0}),e})();let u=e(n)?[...n.content.cloneNode(!0).childNodes]:[n.cloneNode(!0)];d(()=>{for(let e of u)o(e)&&r(e,a,t),t.parentElement.insertBefore(e,t),o(e)&&c(e)}),t._r_block={template:n,update(){d(()=>{for(let e of u??[])t.parentElement.insertBefore(e,t)})},delete(){t._r_block=null;for(let e of u??[])e.remove();u=null}},l(()=>t._r_block?.delete())}(n,n,{addScopeToNode:t,cleanup:d,initTree:r,mutateDom:l}):n._r_block?.delete())})}export{t as when};
+const e=e=>e.matches("template"),t=e=>e.nodeType===Node.ELEMENT_NODE;function o({addScopeToNode:o,directive:n,initTree:r,mutateDom:l}){n("when",(n,{expression:c},{cleanup:d,effect:a,evaluateLater:u})=>{if(!e(n))return void console.warn("alpinegear.js:","x-when can only be used on a 'template' tag");const i=function(e,...t){const o=e(...t);return()=>{let e;return o(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}(u,c);a(()=>i()?function(o,n,{addScopeToNode:r,cleanup:l,initTree:c,mutateDom:d,scope:a={}}){if(o._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 u=e(n)?[...n.content.cloneNode(!0).childNodes]:[n.cloneNode(!0)];d(()=>{for(let e of u)t(e)&&r(e,a,o),o.parentElement.insertBefore(e,o),t(e)&&c(e)}),o._r_block={template:n,update(){d(()=>{for(let e of u??[])o.parentElement.insertBefore(e,o)})},delete(){o._r_block=null;for(let e of u??[])e.remove();u=null}},l(()=>o._r_block?.delete())}(n,n,{addScopeToNode:o,cleanup:d,initTree:r,mutateDom:l}):n._r_block?.delete())})}export{o as default,o as when};

package/alpinegear-when.js

@@ -1,63 +1,68 @@
 (function () {
     'use strict';
 
-    const warn = (...args) => console.warn("alpinegear.js:", ...args);
-    const is_template = el => el.matches("template");
+    const warn = (...args) => console.warn("alpinegear.js:", ...args);
+    const is_template = el => el.matches("template");
     const is_element = el => el.nodeType === Node.ELEMENT_NODE;
 
-    function anchor_block(el, template, { addScopeToNode, cleanup, initTree, mutateDom, scope = {} }) {
-        if (el._r_block) {
-            return;
-        }
-
-        initialize();
-
-        let nodes = is_template(template)
-            ? [...template.content.cloneNode(true).childNodes]
-            : [template.cloneNode(true)];
-
-        mutateDom(() => {
-            for (let node of nodes) {
-                is_element(node) && addScopeToNode(node, scope, el);
-                el.parentElement.insertBefore(node, el);
-                is_element(node) && initTree(node);
-            }
-        });
-
-        el._r_block = {
-            template,
-            update() {
-                mutateDom(() => {
-                    for (let node of nodes ?? []) {
-                        el.parentElement.insertBefore(node, el);
-                    }
-                });
-            },
-            delete() {
-                el._r_block = null;
-                for (let node of nodes ?? []) {
-                    node.remove();
-                }
-                nodes = null;
-            }
-        };
-
-        cleanup(() => el._r_block?.delete());
-    }
-
-    function initialize() {
-        document.body._r_block ??= (() => {
-            const observer = new MutationObserver(mutations => {
-                for (let mutation of mutations) {
-                    for (let node of mutation.addedNodes) {
-                        node._r_block?.update();
-                    }
-                }
-            });
-
-            observer.observe(document.body, { childList: true, subtree: true });
-            return observer;
-        })();
+    const listen = (target, type, listener, options) => {
+        target.addEventListener(type, listener, options);
+        return () => target.removeEventListener(type, listener, options);
+    };
+
+    function anchor_block(el, template, { addScopeToNode, cleanup, initTree, mutateDom, scope = {} }) {
+        if (el._r_block) {
+            return;
+        }
+
+        initialize();
+
+        let nodes = is_template(template)
+            ? [...template.content.cloneNode(true).childNodes]
+            : [template.cloneNode(true)];
+
+        mutateDom(() => {
+            for (let node of nodes) {
+                is_element(node) && addScopeToNode(node, scope, el);
+                el.parentElement.insertBefore(node, el);
+                is_element(node) && initTree(node);
+            }
+        });
+
+        el._r_block = {
+            template,
+            update() {
+                mutateDom(() => {
+                    for (let node of nodes ?? []) {
+                        el.parentElement.insertBefore(node, el);
+                    }
+                });
+            },
+            delete() {
+                el._r_block = null;
+                for (let node of nodes ?? []) {
+                    node.remove();
+                }
+                nodes = null;
+            }
+        };
+
+        cleanup(() => el._r_block?.delete());
+    }
+
+    function initialize() {
+        document.body._r_block ??= (() => {
+            const observer = new MutationObserver(mutations => {
+                for (let mutation of mutations) {
+                    for (let node of mutation.addedNodes) {
+                        node._r_block?.update();
+                    }
+                }
+            });
+
+            observer.observe(document.body, { childList: true, subtree: true });
+            return observer;
+        })();
     }
 
     function create_getter(evaluate_later, ...args) {
@@ -73,21 +78,21 @@
         return typeof value?.get === "function";
     }
 
-    function plugin({ addScopeToNode, directive, initTree, mutateDom }) {
-        directive("when", (el, { expression }, { cleanup, effect, evaluateLater }) => {
-            if (!is_template(el)) {
-                warn("x-when can only be used on a 'template' tag");
-                return;
-            }
-
-            const activate = () => anchor_block(el, el, { addScopeToNode, cleanup, initTree, mutateDom });
-            const clear = () => el._r_block?.delete();
-
-            const get = create_getter(evaluateLater, expression);
-            effect(() => get() ? activate() : clear());
-        });
+    function plugin({ addScopeToNode, directive, initTree, mutateDom }) {
+        directive("when", (el, { expression }, { cleanup, effect, evaluateLater }) => {
+            if (!is_template(el)) {
+                warn("x-when can only be used on a 'template' tag");
+                return;
+            }
+
+            const activate = () => anchor_block(el, el, { addScopeToNode, cleanup, initTree, mutateDom });
+            const clear = () => el._r_block?.delete();
+
+            const get = create_getter(evaluateLater, expression);
+            effect(() => get() ? activate() : clear());
+        });
     }
 
-    document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
+    listen(document, "alpine:init", () => Alpine.plugin(plugin));
 
 })();

package/alpinegear-when.min.js

@@ -1 +1 @@
-!function(){"use strict";const e=e=>e.matches("template"),t=e=>e.nodeType===Node.ELEMENT_NODE;function o({addScopeToNode:o,directive:n,initTree:r,mutateDom:l}){n("when",(n,{expression:c},{cleanup:d,effect:a,evaluateLater:i})=>{if(!e(n))return void console.warn("alpinegear.js:","x-when can only be used on a 'template' tag");const u=function(e,...t){const o=e(...t);return()=>{let e;return o(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}(i,c);a(()=>u()?function(o,n,{addScopeToNode:r,cleanup:l,initTree:c,mutateDom:d,scope:a={}}){if(o._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=e(n)?[...n.content.cloneNode(!0).childNodes]:[n.cloneNode(!0)];d(()=>{for(let e of i)t(e)&&r(e,a,o),o.parentElement.insertBefore(e,o),t(e)&&c(e)}),o._r_block={template:n,update(){d(()=>{for(let e of i??[])o.parentElement.insertBefore(e,o)})},delete(){o._r_block=null;for(let e of i??[])e.remove();i=null}},l(()=>o._r_block?.delete())}(n,n,{addScopeToNode:o,cleanup:d,initTree:r,mutateDom:l}):n._r_block?.delete())})}document.addEventListener("alpine:init",()=>{Alpine.plugin(o)})}();
+!function(){"use strict";const e=e=>e.matches("template"),t=e=>e.nodeType===Node.ELEMENT_NODE;function o({addScopeToNode:o,directive:n,initTree:r,mutateDom:l}){n("when",(n,{expression:c},{cleanup:d,effect:i,evaluateLater:a})=>{if(!e(n))return void console.warn("alpinegear.js:","x-when can only be used on a 'template' tag");const u=function(e,...t){const o=e(...t);return()=>{let e;return o(t=>e=t),t=e,"function"==typeof t?.get?e.get():e;var t}}(a,c);i(()=>u()?function(o,n,{addScopeToNode:r,cleanup:l,initTree:c,mutateDom:d,scope:i={}}){if(o._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 a=e(n)?[...n.content.cloneNode(!0).childNodes]:[n.cloneNode(!0)];d(()=>{for(let e of a)t(e)&&r(e,i,o),o.parentElement.insertBefore(e,o),t(e)&&c(e)}),o._r_block={template:n,update(){d(()=>{for(let e of a??[])o.parentElement.insertBefore(e,o)})},delete(){o._r_block=null;for(let e of a??[])e.remove();a=null}},l(()=>o._r_block?.delete())}(n,n,{addScopeToNode:o,cleanup:d,initTree:r,mutateDom:l}):n._r_block?.delete())})}document.addEventListener("alpine:init",()=>Alpine.plugin(o),void 0)}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-when",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "@ramstack/alpinegear-when provides additional directives, magic functions, and utilities for a more productive development experience",
   "author": {
     "name": "Rameel Burhan",
@@ -18,6 +18,12 @@
     "alpinejs-directive",
     "alpinejs-plugin"
   ],
-  "main": "dist/alpinegear-when.js",
-  "module": "dist/alpinegear-when.esm.js"
+  "exports": {
+    ".": {
+      "import": {
+        "production": "./alpinegear-when.esm.min.js",
+        "default": "./alpinegear-when.esm.js"
+      }
+    }
+  }
 }