@ramstack/alpinegear-destroy 1.2.3 → 1.3.0

package/README.md

@@ -4,7 +4,8 @@
 
 `@ramstack/alpinegear-destroy` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-destroy` directive.
 
-This directive is the opposite of `x-init` and allows you to execute code when an element is removed from the DOM.
+This directive is the opposite of `x-init` and allows you to hook into the cleanup phase of any element in Alpine,
+running a callback when the element is removed from the DOM.
 
 ## Installation
 
@@ -16,7 +17,7 @@ To include the CDN version of this plugin, add the following `<script>` tag befo
 <script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-destroy@1/alpinegear-destroy.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,25 +42,69 @@ In this example, when the `<div>` is removed, the message `Element destroyed` wi
 
 ```html
 <div x-data="{ show: true, destroyed: false }">
-  <button @click="show = false">Hide message</button>
+  <button @click="show = false">Remove element</button>
+  <button @click="show = true, destroyed = false">Reset</button>
 
   <p x-show="destroyed">
-    <u>Element destroyed</u>
+    Element destroyed
   </p>
 
   <template x-if="show">
-    <div x-destroy="destroyed = true">
-      <p>Hello, World!</p>
-    </div>
+    <p x-destroy="destroyed = true">
+      Hello, World!
+    </p>
   </template>
 </div>
 ```
+🚀 [Live demo | Alpine.js x-destroy: Handle DOM element removal](https://jsfiddle.net/rameel/qcnwm2b0/)
 
 ## Source code
 You can find the source code for this plugin on GitHub:
 
 https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy
 
+
+## 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-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-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-destroy.esm.js

@@ -4,4 +4,4 @@ function plugin(alpine) {
     });
 }
 
-export { plugin as destroy };
+export { plugin as destroy };

package/alpinegear-destroy.js

@@ -9,4 +9,4 @@
 
     document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
 
-})();
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-destroy",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "@ramstack/alpinegear-destroy provides 'x-destroy' Alpine.js directive, which is the opposite of 'x-init' and allows you to execute code when an element is removed from the DOM.",
   "author": "Rameel Burhan",
   "license": "MIT",
@@ -11,7 +11,9 @@
   },
   "keywords": [
     "alpine.js",
-    "alpinejs"
+    "alpinejs",
+    "alpinejs-directive",
+    "alpinejs-plugin"
   ],
   "main": "alpinegear-destroy.js",
   "module": "alpinegear-destroy.esm.js"