@ramstack/alpinegear-fragment 1.2.3 → 1.2.4

package/README.md

@@ -6,6 +6,9 @@
 
 This directive allows you to use multiple root elements in your templates, similar to the `Fragment` feature found in frameworks like `Vue.js` and `React`. It is particularly useful when you want to avoid wrapping elements in unnecessary container tags.
 
+> [!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
 
@@ -17,7 +20,7 @@ To include the CDN version of this plugin, add the following `<script>` tag befo
 <script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-fragment@1/alpinegear-fragment.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
@@ -41,47 +44,96 @@ Alpine.start();
 With the `x-fragment` directive, you can use multiple root elements in your components without needing a wrapper container:
 
 ```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-if="show">
-        <template x-fragment>
-            <label>Message:</label>
-            <input x-model="message" />
-        </template>
+      <template x-fragment>
+        <li>Orange</li>
+        <li>Grape</li>
+        <li>Mango</li>
+      </template>
     </template>
+  </ul>
 </div>
 ```
-In this example, the `x-fragment` directive allows the `<label>` and `<input>` elements to exist side by side without a parent container.
+🚀 [Live demo | Alpine.js x-fragment: Multiple root elements](https://jsfiddle.net/rameel/jdwuoatf/)
+
+In this example, the `x-fragment` directive allows the `<li>` elements (Orange, Grape, and Mango) to be added
+to the `<ul>` without a parent container, enabling multiple root elements in the `x-if` template.
 
 ### Using with `x-for`
-The `x-fragment` directive can also be used with the directive `x-for`, giving you the flexibility to render multiple sibling elements for each iteration without wrapping them:
+The `x-fragment` directive can also be used with the directive `x-for`, giving you the flexibility to render
+multiple sibling elements for each iteration without wrapping them:
 
 ```html
 <div x-data="{
-    items: [
-        { id: 1, term: 'Item 1', description: 'Description 1' },
-        { id: 2, term: 'Item 2', description: 'Description 2' },
-        { id: 3, term: 'Item 3', description: 'Description 3' } ]
-    }">
-    <dl>
-        <template x-for="item in items" :key="item.id">
-            <template x-fragment>
-                <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-fragment>
+        <dt x-text="item.term"></dt>
+        <dd x-text="item.description"></dd>
+      </template>
+    </template>
+  </dl>
 </div>
 ```
+🚀 [Live demo | Alpine.js x-fragment: Multiple root elements with x-for](https://jsfiddle.net/rameel/201rmntc/)
 
 ## Source code
 You can find the source code for this plugin on GitHub:
 
 https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment
 
+
+## 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-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-when](https://www.npmjs.com/package/@ramstack/alpinegear-when)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when))<br>
+Provides the `x-when` directive, which allows for conditional rendering of elements similar to `x-if`, but supports multiple root elements.
+
+**[@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.
+
+
 ## Contributions
 Bug reports and contributions are welcome.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-fragment",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "@ramstack/alpinegear-fragment provides 'x-format' Alpine.js directive, allowing for fragment-like behavior similar to what's available in frameworks like 'Vue.js' or 'React', where multiple root elements can be grouped together.",
   "author": "Rameel Burhan",
   "license": "MIT",
@@ -11,7 +11,12 @@
   },
   "keywords": [
     "alpine.js",
-    "alpinejs"
+    "alpinejs",
+    "fragment",
+    "alpinejs-fragment",
+    "alpinejs-directive",
+    "alpinejs-plugin",
+    "template"
   ],
   "main": "alpinegear-fragment.js",
   "module": "alpinegear-fragment.esm.js"