@ramstack/alpinegear-when 1.2.3 → 1.3.0

package/README.md

@@ -9,6 +9,10 @@ This directive is used for conditionally rendering elements on the page, similar
 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
@@ -19,7 +23,7 @@ To include the CDN version of this plugin, add the following `<script>` tag befo
 <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.x.x/dist/cdn.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
 ```
 
 ### Using NPM
@@ -43,44 +47,95 @@ Alpine.start();
 The `x-when` directive functions similarly to `x-if`, but allows multiple root elements in the `<template>` tag:
 
 ```html
-<div x-data="{ show: true, message: 'Example' }">
-    <div>
-        <button @click="show = !show">Edit Message</button>
-    </div>
+<div x-data="{ show: false }">
+  <button @click="show = !show">Show more</button>
+
+  <ul>
+    <li>Apple</li>
+    <li>Banana</li>
 
     <template x-when="show">
-        <label>Message:</label>
-        <input x-model="message" />
+      <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: [
-        { id: 1, visible: true, term: 'Item 1', description: 'Description 1' },
-        { id: 2, visible: false, term: 'Item 2', description: 'Description 2' },
-        { id: 3, visible: true, term: 'Item 3', description: 'Description 3' } ]
-    }">
-    <dl>
-        <template x-for="item in items" :key="item.id">
-            <template x-when="item.visible">
-                <dt x-text="item.term"></dt>
-                <dd x-text="item.description"></dd>
-            </template>
-        </template>
-    </dl>
+  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.
 

package/alpinegear-when.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");
 const is_element = el => el.nodeType === Node.ELEMENT_NODE;
 
 function anchor_block(el, template, { addScopeToNode, cleanup, initTree, mutateDom, scope = {} }) {
@@ -85,4 +85,4 @@ function plugin({ addScopeToNode, directive, initTree, mutateDom }) {
     });
 }
 
-export { plugin as when };
+export { plugin as when };

package/alpinegear-when.esm.min.js

@@ -1 +1 @@
-const e=e=>e instanceof HTMLTemplateElement,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"),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};

package/alpinegear-when.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");
     const is_element = el => el.nodeType === Node.ELEMENT_NODE;
 
     function anchor_block(el, template, { addScopeToNode, cleanup, initTree, mutateDom, scope = {} }) {
@@ -90,4 +90,4 @@
 
     document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
 
-})();
+})();

package/alpinegear-when.min.js

@@ -1 +1 @@
-!function(){"use strict";const e=e=>e instanceof HTMLTemplateElement,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)})}();
+!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)})}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-when",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "@ramstack/alpinegear-when provides additional directives, magic functions, and utilities for a more productive development experience",
   "author": {
     "name": "Rameel Burhan",
@@ -12,6 +12,11 @@
     "url": "git+https://github.com/rameel/ramstack.alpinegear.js.git",
     "directory": "src/plugins/when"
   },
-  "keywords": [],
+  "keywords": [
+    "alpine.js",
+    "alpinejs",
+    "alpinejs-directive",
+    "alpinejs-plugin"
+  ],
   "main": "dist/alpinegear-when.js"
 }