@ramstack/alpinegear-destroy 1.4.2 → 1.4.4

package/README.md

@@ -1,113 +1,80 @@
-# @ramstack/alpinegear-destroy
-[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-destroy)](https://www.npmjs.com/package/@ramstack/alpinegear-destroy)
-[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
-
-`@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 hook into the cleanup phase of any element in Alpine,
-running a callback when the element is removed from the DOM.
-
-## 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-destroy@1/alpinegear-destroy.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-destroy
-```
-
-Then initialize it in your bundle:
-
-```js
-import Alpine from "alpinejs";
-import destroy from "@ramstack/alpinegear-destroy";
-
-Alpine.plugin(destroy);
-Alpine.start();
-```
-
-## Usage
-In this example, when the `<div>` is removed, the message `Element destroyed` will appear.
-
-```html
-<div x-data="{ show: true, destroyed: false }">
-  <button @click="show = false">Remove element</button>
-  <button @click="show = true, destroyed = false">Reset</button>
-
-  <p x-show="destroyed">
-    Element destroyed
-  </p>
-
-  <template x-if="show">
-    <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.
-
-## 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-destroy
+[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-destroy)](https://www.npmjs.com/package/@ramstack/alpinegear-destroy)
+[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
+
+`@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 hook into the cleanup phase of any element in Alpine,
+running a callback when the element is removed from the DOM.
+
+## 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-destroy@1/alpinegear-destroy.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-destroy
+```
+
+Then initialize it in your bundle:
+
+```js
+import Alpine from "alpinejs";
+import destroy from "@ramstack/alpinegear-destroy";
+
+Alpine.plugin(destroy);
+Alpine.start();
+```
+
+## Usage
+In this example, when the `<div>` is removed, the message `Element destroyed` will appear.
+
+```html
+<div x-data="{ show: true, destroyed: false }">
+  <button @click="show = false">Remove element</button>
+  <button @click="show = true, destroyed = false">Reset</button>
+
+  <p x-show="destroyed">
+    Element destroyed
+  </p>
+
+  <template x-if="show">
+    <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 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-destroy.esm.js

@@ -1,7 +1,7 @@
-function plugin(alpine) {
-    alpine.directive("destroy", (_, { expression }, { cleanup, evaluate }) => {
-        cleanup(() => evaluate(expression));
-    });
+function plugin(alpine) {
+    alpine.directive("destroy", (_, { expression }, { cleanup, evaluate }) => {
+        cleanup(() => evaluate(expression));
+    });
 }
 
-export { plugin as destroy };
+export { plugin as default, plugin as destroy };

package/alpinegear-destroy.esm.min.js

@@ -1 +1 @@
-function e(e){e.directive("destroy",(e,{expression:t},{cleanup:o,evaluate:r})=>{o(()=>r(t))})}export{e as destroy};
+function e(e){e.directive("destroy",(e,{expression:t},{cleanup:a,evaluate:s})=>{a(()=>s(t))})}export{e as default,e as destroy};

package/alpinegear-destroy.js

@@ -1,12 +1,17 @@
 (function () {
     'use strict';
 
-    function plugin(alpine) {
-        alpine.directive("destroy", (_, { expression }, { cleanup, evaluate }) => {
-            cleanup(() => evaluate(expression));
-        });
+    const listen = (target, type, listener, options) => {
+        target.addEventListener(type, listener, options);
+        return () => target.removeEventListener(type, listener, options);
+    };
+
+    function plugin(alpine) {
+        alpine.directive("destroy", (_, { expression }, { cleanup, evaluate }) => {
+            cleanup(() => evaluate(expression));
+        });
     }
 
-    document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
+    listen(document, "alpine:init", () => Alpine.plugin(plugin));
 
 })();

package/alpinegear-destroy.min.js

@@ -1 +1 @@
-!function(){"use strict";function e(e){e.directive("destroy",(e,{expression:n},{cleanup:i,evaluate:t})=>{i(()=>t(n))})}document.addEventListener("alpine:init",()=>{Alpine.plugin(e)})}();
+!function(){"use strict";function e(e){e.directive("destroy",(e,{expression:i},{cleanup:n,evaluate:t})=>{n(()=>t(i))})}document.addEventListener("alpine:init",()=>Alpine.plugin(e),void 0)}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-destroy",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "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",
@@ -15,6 +15,12 @@
     "alpinejs-directive",
     "alpinejs-plugin"
   ],
-  "main": "alpinegear-destroy.js",
-  "module": "alpinegear-destroy.esm.js"
+  "exports": {
+    ".": {
+      "import": {
+        "production": "./alpinegear-destroy.esm.min.js",
+        "default": "./alpinegear-destroy.esm.js"
+      }
+    }
+  }
 }