@ramstack/alpinegear-hotkey 1.4.3 → 1.4.4

package/README.md

@@ -1,208 +1,175 @@
-# @ramstack/alpinegear-hotkey
-[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-hotkey)](https://www.npmjs.com/package/@ramstack/alpinegear-hotkey)
-[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
-
-`@ramstack/alpinegear-hotkey` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-hotkey` directive.
-
-This directive allows you to easily handle keyboard shortcuts within your Alpine.js components or application.
-
-Uses [@ramstack/hotkey](https://github.com/rameel/ramstack.hotkey.js) package under the hood.
-
-## 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-hotkey@1/alpinegear-hotkey.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-hotkey
-```
-
-Then initialize it in your bundle:
-
-```js
-import Alpine from "alpinejs";
-import hotkey from "@ramstack/alpinegear-hotkey";
-
-Alpine.plugin(hotkey);
-Alpine.start();
-```
-
-## Usage
-Define a hotkey combination using the directive by specifying key modifiers (such as `Ctrl`, `Alt`, `Shift`) with a `+` sign
-(e.g., `Ctrl+Alt+Shift+S`).
-
-Here's a simple example:
-
-```html
-<div x-data x-hotkey.shift+f.window="console.log($event.hotkey)">
-  Hello, World!
-</div>
-```
-
-> [!TIP]
-> The hotkey is **case-insensitive**. Standard key names are used.
->
-> You can find a list of key names here [Key values for keyboard events](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
-
-### Event Object
-
-The `x-hotkey` directive provides access to the native JavaScript event object via the magic `$event` property.
-
-```html
-<div x-data x-hotkey.shift+f.window="console.log($event)"></div>
-```
-
-Also, the `x-hotkey` automatically passes the event object as the first argument to the method handler:
-
-```html
-<div x-data x-hotkey.shift+f.window="e => console.log(e)"></div>
-
-<!--  OR  -->
-<div x-data x-hotkey.shift+f.window="handle"></div>
-
-<script>
-  function handle(e) {
-    console.log(e);
-  }
-</script>
-```
-
-### Event Modifiers
-To simplify common tasks like calling `event.preventDefault()` or `event.stopPropagation()`,
-the `x-hotkey` directive supports following event modifiers:
-* `.prevent` - calls `event.preventDefault()` before calling the event handler.
-* `.stop` - call `event.stopPropagation()`, stopping the event from propagating further.
-* `.passive` - indicates that the handler will never call `event.preventDefault()`.
-* `.capture` - calling the event handler in the capture phase instead of the bubbling phase.
-* `.once` - ensures the event handler is called only once.
-* `.trusted` - ensures that only trusted events are handled.
-
-```html
-<!-- prevent the default behavior for the keyboard event -->
-<div x-hotkey.ctrl+s.prevent="save($event)"></div>
-
-<!-- the event's propagation will be stopped -->
-<div x-hotkey.ctrl+s.stop="save($event)"></div>
-
-<!-- modifiers can be chained -->
-<div x-hotkey.ctrl+s.prevent.stop.trusted="save($event)"></div>
-```
-
-### Global Event Listening
-Use the `window` or `document` modifiers to listen for hotkeys globally, across the entire page:
-
-```html
-<div x-hotkey.ctrl+s.window.prevent="save($event)"></div>
-```
-
-### Defining Alternative Hotkeys
-You can assign multiple hotkeys to a single action by separating them with a dot (`.`).
-For instance, in the example below, the same action is triggered by both `Ctrl + Shift + S` and `Alt + U`.
-
-To determine which hotkey triggered the event, use the `hotkey` property from the event object.
-This property contains the string representation of the hotkey.
-
-```html
-<div x-data x-hotkey.ctrl+shift+f.alt+u.window="console.log($event.hotkey)">
-  Hello, World!
-</div>
-```
-
-### Specific Events Listening
-To change the event that `x-hotkey` listens for, use a directive argument.
-By default, the event is `keydown`, but you can specify `keyup`, `keypress`, or others:
-
-```html
-<div x-hotkey:keyup.alt+u="console.log('Search...')"></div>
-```
-
-### Exclude Elements
-
-If you want to prevent hotkey handling from being triggered by specific elements, add the `data-hotkey-ignore` attribute to those elements:
-
-```html
-<div x-hotkey.shift+k="...">
-  ...
-  <!-- Ignoring hotkeys from the input element -->
-  <input type="text" data-hotkey-ignore>
-</div>
-```
-
-You can also exclude a group of elements by applying the attribute to their parent:
-
-```html
-<div x-hotkey.shift+k="...">
-  ...
-
-  <!-- Ignoring hotkeys from all elements within the form -->
-  <form data-hotkey-ignore>
-  ...
-  </form>
-</div>
-```
-
-## Source code
-You can find the source code for this plugin on GitHub:
-
-https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey
-
-
-## 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-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-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-hotkey
+[![NPM](https://img.shields.io/npm/v/@ramstack/alpinegear-hotkey)](https://www.npmjs.com/package/@ramstack/alpinegear-hotkey)
+[![MIT](https://img.shields.io/github/license/rameel/ramstack.alpinegear.js)](https://github.com/rameel/ramstack.alpinegear.js/blob/main/LICENSE)
+
+`@ramstack/alpinegear-hotkey` is a plugin for [Alpine.js](https://alpinejs.dev/) that provides the `x-hotkey` directive.
+
+This directive allows you to easily handle keyboard shortcuts within your Alpine.js components or application.
+
+Uses [@ramstack/hotkey](https://github.com/rameel/ramstack.hotkey.js) package under the hood.
+
+## 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-hotkey@1/alpinegear-hotkey.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-hotkey
+```
+
+Then initialize it in your bundle:
+
+```js
+import Alpine from "alpinejs";
+import hotkey from "@ramstack/alpinegear-hotkey";
+
+Alpine.plugin(hotkey);
+Alpine.start();
+```
+
+## Usage
+Define a hotkey combination using the directive by specifying key modifiers (such as `Ctrl`, `Alt`, `Shift`)
+with a `+` sign (e.g., `Ctrl+Alt+Shift+S`).
+
+Here's a simple example:
+
+```html
+<div x-data x-hotkey.shift+f.window="console.log($event.hotkey)">
+  Hello, World!
+</div>
+```
+
+> [!TIP]
+> The hotkey is **case-insensitive**. Standard key names are used.
+>
+> You can find a list of key names here [Key values for keyboard events](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)
+
+### Event Object
+
+The `x-hotkey` directive provides access to the native event object via the magic `$event` property.
+
+```html
+<div x-data x-hotkey.shift+f.window="console.log($event)"></div>
+```
+
+Also, the `x-hotkey` automatically passes the event object as the first argument to the method handler:
+
+```html
+<div x-data x-hotkey.shift+f.window="e => console.log(e)"></div>
+
+<!--  OR  -->
+<div x-data x-hotkey.shift+f.window="handle"></div>
+
+<script>
+  function handle(e) {
+    console.log(e);
+  }
+</script>
+```
+
+### Event Modifiers
+To simplify common tasks like calling `event.preventDefault()` or `event.stopPropagation()`,
+the `x-hotkey` directive supports following event modifiers:
+* `.prevent` - calls `event.preventDefault()` before calling the event handler.
+* `.stop` - call `event.stopPropagation()`, stopping the event from propagating further.
+* `.passive` - indicates that the handler will never call `event.preventDefault()`.
+* `.capture` - calling the event handler in the capture phase instead of the bubbling phase.
+* `.once` - ensures the event handler is called only once.
+* `.trusted` - ensures that only trusted events are handled.
+
+```html
+<!-- prevent the default behavior for the keyboard event -->
+<div x-hotkey.ctrl+s.prevent="save($event)"></div>
+
+<!-- the event's propagation will be stopped -->
+<div x-hotkey.ctrl+s.stop="save($event)"></div>
+
+<!-- modifiers can be chained -->
+<div x-hotkey.ctrl+s.prevent.stop.trusted="save($event)"></div>
+```
+
+### Global Event Listening
+Use the `window` or `document` modifiers to listen for hotkeys globally, across the entire page:
+
+```html
+<div x-hotkey.ctrl+s.window.prevent="save($event)"></div>
+```
+
+### Defining Alternative Hotkeys
+You can assign multiple hotkeys to a single action by separating them with a dot (`.`).
+For instance, in the example below, the same action is triggered by both `Ctrl + Shift + S` and `Alt + U`.
+
+To determine which hotkey triggered the event, use the `hotkey` property from the event object.
+This property contains the string representation of the hotkey.
+
+```html
+<div x-data x-hotkey.ctrl+shift+f.alt+u.window="console.log($event.hotkey)">
+  Hello, World!
+</div>
+```
+
+### Specific Events Listening
+To change the event that `x-hotkey` listens for, use a directive argument.
+By default, the event is `keydown`, but you can specify `keyup`, `keypress`, or others:
+
+```html
+<div x-hotkey:keyup.alt+u="console.log('Search...')"></div>
+```
+
+### Exclude Elements
+
+If you want to prevent hotkey handling from being triggered by specific elements,
+add the `data-hotkey-ignore` attribute to those elements:
+
+```html
+<div x-hotkey.shift+k="...">
+  ...
+  <!-- Ignoring hotkeys from the input element -->
+  <input type="text" data-hotkey-ignore>
+</div>
+```
+
+You can also exclude a group of elements by applying the attribute to their parent:
+
+```html
+<div x-hotkey.shift+k="...">
+  ...
+
+  <!-- Ignoring hotkeys from all elements within the form -->
+  <form data-hotkey-ignore>
+  ...
+  </form>
+</div>
+```
+
+## Source code
+You can find the source code for this plugin on GitHub:
+
+https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey
+
+
+## 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-hotkey.esm.js

@@ -90,54 +90,54 @@ function error(message) {
     throw new Error(message);
 }
 
-const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
-
-const single = (...fns) => (...args) => {
-    for (const fn of fns) {
-        fn && fn(...args);
-    }
+const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
+
+const single = (...fns) => (...args) => {
+    for (const fn of fns) {
+        fn && fn(...args);
+    }
 };
 
-const option_keys = ["capture", "passive", "once", "prevent", "stop", "trusted", "window", "document"];
-
-function plugin({ directive }) {
-    directive("hotkey", (el, { expression, value, modifiers }, { evaluateLater, cleanup }) => {
-        const listener = e => evaluate(() => { }, { scope: { $event: e }, params: [e] });
-
-        const evaluate = expression
-            ? evaluateLater(expression)
-            : () => {};
-
-        const target =
-            has_modifier(modifiers, "window")
-                ? window
-                : has_modifier(modifiers, "document")
-                    ? document
-                    : el;
-
-        const disposes = modifiers
-            .filter(m => !option_keys.includes(m))
-            .flatMap(s => s.split(","))
-            .map(hotkey => registerHotkey(
-                target,
-                hotkey,
-                e => {
-                    has_modifier(modifiers, "prevent") && e.preventDefault();
-                    has_modifier(modifiers, "stop") && e.stopPropogation();
-
-                    e.hotkey = hotkey;
-                    listener(e);
-                },
-                value || "keydown",
-                {
-                    capture: has_modifier(modifiers, "capture"),
-                    passive: has_modifier(modifiers, "passive"),
-                    once: has_modifier(modifiers, "once"),
-                    trusted: has_modifier(modifiers, "trusted")
-                }));
-
-        cleanup(single(...disposes));
-    });
+const option_keys = ["capture", "passive", "once", "prevent", "stop", "trusted", "window", "document"];
+
+function plugin({ directive }) {
+    directive("hotkey", (el, { expression, value, modifiers }, { evaluateLater, cleanup }) => {
+        const listener = e => evaluate(() => { }, { scope: { $event: e }, params: [e] });
+
+        const evaluate = expression
+            ? evaluateLater(expression)
+            : () => {};
+
+        const target =
+            has_modifier(modifiers, "window")
+                ? window
+                : has_modifier(modifiers, "document")
+                    ? document
+                    : el;
+
+        const disposes = modifiers
+            .filter(m => !option_keys.includes(m))
+            .flatMap(s => s.split(","))
+            .map(hotkey => registerHotkey(
+                target,
+                hotkey,
+                e => {
+                    has_modifier(modifiers, "prevent") && e.preventDefault();
+                    has_modifier(modifiers, "stop") && e.stopPropogation();
+
+                    e.hotkey = hotkey;
+                    listener(e);
+                },
+                value || "keydown",
+                {
+                    capture: has_modifier(modifiers, "capture"),
+                    passive: has_modifier(modifiers, "passive"),
+                    once: has_modifier(modifiers, "once"),
+                    trusted: has_modifier(modifiers, "trusted")
+                }));
+
+        cleanup(single(...disposes));
+    });
 }
 
-export { plugin as hotkey };
+export { plugin as default, plugin as hotkey };

package/alpinegear-hotkey.esm.min.js

@@ -1 +1 @@
-const e={esc:"escape",ins:"insert",del:"delete",up:"arrowup",down:"arrowdown",right:"arrowright",left:"arrowleft",pgup:"pageup",pgdn:"pagedown",break:"pause",scroll:"scrolllock",scrlk:"scrolllock",prtscr:"printscreen",win:"meta",windows:"meta",cmd:"meta",command:"meta",comma:",",period:".",quote:'"',singlequote:"'",colon:":",semicolon:";",plus:"+",minus:"-",tilde:"~",equal:"=",slash:"/"},t=["ctrlKey","altKey","shiftKey","metaKey"];function o(e){r(`Invalid hotkey: '${e}'`)}function r(e){throw new Error(e)}const n=(e,t)=>e.includes(t),s=["capture","passive","once","prevent","stop","trusted","window","document"];function c({directive:c}){c("hotkey",(c,{expression:a,value:i,modifiers:l},{evaluateLater:u,cleanup:p})=>{const d=a?u(a):()=>{},m=n(l,"window")?window:n(l,"document")?document:c;p(((...e)=>(...t)=>{for(const o of e)o&&o(...t)})(...l.filter(e=>!s.includes(e)).flatMap(e=>e.split(",")).map(s=>function(n,s,c,a="keydown",i){const l=function(t){const r=t.replace(/\s+/g,"").toLowerCase().split("+").reduce((r,n)=>{switch(n=e[n]??n){case"ctrl":case"alt":case"shift":case"meta":r[`${n}Key`]=!0;break;default:n.length||o(t),n=n.toUpperCase(),r.code=1!==n.length||"A">n||n>"Z"?n:`KEY${n}`}return r},{code:"",ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1});return r.code||o(t),r}(s);return"string"==typeof n&&(n=document.querySelector(n)??r(`No element found for selector '${n}'`)),function(e,t,o,r){return e.addEventListener(t,o,r),()=>e.removeEventListener(t,o,r)}(n,a,function(e){i?.trusted&&!e.isTrusted||e.target?.closest("[data-hotkey-ignore]")||l.code===e.code.toUpperCase()&&t.every(t=>l[t]===e[t])&&c.call(this,e)},i)}(m,s,e=>{n(l,"prevent")&&e.preventDefault(),n(l,"stop")&&e.stopPropogation(),e.hotkey=s,(e=>{d(()=>{},{scope:{$event:e},params:[e]})})(e)},i||"keydown",{capture:n(l,"capture"),passive:n(l,"passive"),once:n(l,"once"),trusted:n(l,"trusted")}))))})}export{c as hotkey};
+const e={esc:"escape",ins:"insert",del:"delete",up:"arrowup",down:"arrowdown",right:"arrowright",left:"arrowleft",pgup:"pageup",pgdn:"pagedown",break:"pause",scroll:"scrolllock",scrlk:"scrolllock",prtscr:"printscreen",win:"meta",windows:"meta",cmd:"meta",command:"meta",comma:",",period:".",quote:'"',singlequote:"'",colon:":",semicolon:";",plus:"+",minus:"-",tilde:"~",equal:"=",slash:"/"},t=["ctrlKey","altKey","shiftKey","metaKey"];function o(e){r(`Invalid hotkey: '${e}'`)}function r(e){throw new Error(e)}const n=(e,t)=>e.includes(t),s=["capture","passive","once","prevent","stop","trusted","window","document"];function c({directive:c}){c("hotkey",(c,{expression:a,value:l,modifiers:i},{evaluateLater:u,cleanup:d})=>{const p=a?u(a):()=>{},f=n(i,"window")?window:n(i,"document")?document:c;d(((...e)=>(...t)=>{for(const o of e)o&&o(...t)})(...i.filter(e=>!s.includes(e)).flatMap(e=>e.split(",")).map(s=>function(n,s,c,a="keydown",l){const i=function(t){const r=t.replace(/\s+/g,"").toLowerCase().split("+").reduce((r,n)=>{switch(n=e[n]??n){case"ctrl":case"alt":case"shift":case"meta":r[`${n}Key`]=!0;break;default:n.length||o(t),n=n.toUpperCase(),r.code=1!==n.length||"A">n||n>"Z"?n:`KEY${n}`}return r},{code:"",ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1});return r.code||o(t),r}(s);return"string"==typeof n&&(n=document.querySelector(n)??r(`No element found for selector '${n}'`)),function(e,t,o,r){return e.addEventListener(t,o,r),()=>e.removeEventListener(t,o,r)}(n,a,function(e){l?.trusted&&!e.isTrusted||e.target?.closest("[data-hotkey-ignore]")||i.code===e.code.toUpperCase()&&t.every(t=>i[t]===e[t])&&c.call(this,e)},l)}(f,s,e=>{n(i,"prevent")&&e.preventDefault(),n(i,"stop")&&e.stopPropogation(),e.hotkey=s,(e=>{p(()=>{},{scope:{$event:e},params:[e]})})(e)},l||"keydown",{capture:n(i,"capture"),passive:n(i,"passive"),once:n(i,"once"),trusted:n(i,"trusted")}))))})}export{c as default,c as hotkey};

package/alpinegear-hotkey.js

@@ -1,6 +1,19 @@
 (function () {
     'use strict';
 
+    const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
+
+    const listen$1 = (target, type, listener, options) => {
+        target.addEventListener(type, listener, options);
+        return () => target.removeEventListener(type, listener, options);
+    };
+
+    const single = (...fns) => (...args) => {
+        for (const fn of fns) {
+            fn && fn(...args);
+        }
+    };
+
     const aliases = {
         "esc": "escape",
         "ins": "insert",
@@ -93,56 +106,48 @@
         throw new Error(message);
     }
 
-    const has_modifier = (modifiers, modifier) => modifiers.includes(modifier);
-
-    const single = (...fns) => (...args) => {
-        for (const fn of fns) {
-            fn && fn(...args);
-        }
-    };
+    const option_keys = ["capture", "passive", "once", "prevent", "stop", "trusted", "window", "document"];
 
-    const option_keys = ["capture", "passive", "once", "prevent", "stop", "trusted", "window", "document"];
-
-    function plugin({ directive }) {
-        directive("hotkey", (el, { expression, value, modifiers }, { evaluateLater, cleanup }) => {
-            const listener = e => evaluate(() => { }, { scope: { $event: e }, params: [e] });
-
-            const evaluate = expression
-                ? evaluateLater(expression)
-                : () => {};
-
-            const target =
-                has_modifier(modifiers, "window")
-                    ? window
-                    : has_modifier(modifiers, "document")
-                        ? document
-                        : el;
-
-            const disposes = modifiers
-                .filter(m => !option_keys.includes(m))
-                .flatMap(s => s.split(","))
-                .map(hotkey => registerHotkey(
-                    target,
-                    hotkey,
-                    e => {
-                        has_modifier(modifiers, "prevent") && e.preventDefault();
-                        has_modifier(modifiers, "stop") && e.stopPropogation();
-
-                        e.hotkey = hotkey;
-                        listener(e);
-                    },
-                    value || "keydown",
-                    {
-                        capture: has_modifier(modifiers, "capture"),
-                        passive: has_modifier(modifiers, "passive"),
-                        once: has_modifier(modifiers, "once"),
-                        trusted: has_modifier(modifiers, "trusted")
-                    }));
-
-            cleanup(single(...disposes));
-        });
+    function plugin({ directive }) {
+        directive("hotkey", (el, { expression, value, modifiers }, { evaluateLater, cleanup }) => {
+            const listener = e => evaluate(() => { }, { scope: { $event: e }, params: [e] });
+
+            const evaluate = expression
+                ? evaluateLater(expression)
+                : () => {};
+
+            const target =
+                has_modifier(modifiers, "window")
+                    ? window
+                    : has_modifier(modifiers, "document")
+                        ? document
+                        : el;
+
+            const disposes = modifiers
+                .filter(m => !option_keys.includes(m))
+                .flatMap(s => s.split(","))
+                .map(hotkey => registerHotkey(
+                    target,
+                    hotkey,
+                    e => {
+                        has_modifier(modifiers, "prevent") && e.preventDefault();
+                        has_modifier(modifiers, "stop") && e.stopPropogation();
+
+                        e.hotkey = hotkey;
+                        listener(e);
+                    },
+                    value || "keydown",
+                    {
+                        capture: has_modifier(modifiers, "capture"),
+                        passive: has_modifier(modifiers, "passive"),
+                        once: has_modifier(modifiers, "once"),
+                        trusted: has_modifier(modifiers, "trusted")
+                    }));
+
+            cleanup(single(...disposes));
+        });
     }
 
-    document.addEventListener("alpine:init", () => { Alpine.plugin(plugin); });
+    listen$1(document, "alpine:init", () => Alpine.plugin(plugin));
 
 })();

package/alpinegear-hotkey.min.js

@@ -1 +1 @@
-!function(){"use strict";const e={esc:"escape",ins:"insert",del:"delete",up:"arrowup",down:"arrowdown",right:"arrowright",left:"arrowleft",pgup:"pageup",pgdn:"pagedown",break:"pause",scroll:"scrolllock",scrlk:"scrolllock",prtscr:"printscreen",win:"meta",windows:"meta",cmd:"meta",command:"meta",comma:",",period:".",quote:'"',singlequote:"'",colon:":",semicolon:";",plus:"+",minus:"-",tilde:"~",equal:"=",slash:"/"},t=["ctrlKey","altKey","shiftKey","metaKey"];function o(e){n(`Invalid hotkey: '${e}'`)}function n(e){throw new Error(e)}const r=(e,t)=>e.includes(t),s=["capture","passive","once","prevent","stop","trusted","window","document"];function c({directive:c}){c("hotkey",(c,{expression:a,value:i,modifiers:l},{evaluateLater:u,cleanup:d})=>{const p=a?u(a):()=>{},m=r(l,"window")?window:r(l,"document")?document:c;d(((...e)=>(...t)=>{for(const o of e)o&&o(...t)})(...l.filter(e=>!s.includes(e)).flatMap(e=>e.split(",")).map(s=>function(r,s,c,a="keydown",i){const l=function(t){const n=t.replace(/\s+/g,"").toLowerCase().split("+").reduce((n,r)=>{switch(r=e[r]??r){case"ctrl":case"alt":case"shift":case"meta":n[`${r}Key`]=!0;break;default:r.length||o(t),r=r.toUpperCase(),n.code=1!==r.length||"A">r||r>"Z"?r:`KEY${r}`}return n},{code:"",ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1});return n.code||o(t),n}(s);return"string"==typeof r&&(r=document.querySelector(r)??n(`No element found for selector '${r}'`)),function(e,t,o,n){return e.addEventListener(t,o,n),()=>e.removeEventListener(t,o,n)}(r,a,function(e){i?.trusted&&!e.isTrusted||e.target?.closest("[data-hotkey-ignore]")||l.code===e.code.toUpperCase()&&t.every(t=>l[t]===e[t])&&c.call(this,e)},i)}(m,s,e=>{r(l,"prevent")&&e.preventDefault(),r(l,"stop")&&e.stopPropogation(),e.hotkey=s,(e=>{p(()=>{},{scope:{$event:e},params:[e]})})(e)},i||"keydown",{capture:r(l,"capture"),passive:r(l,"passive"),once:r(l,"once"),trusted:r(l,"trusted")}))))})}document.addEventListener("alpine:init",()=>{Alpine.plugin(c)})}();
+!function(){"use strict";const e=(e,t)=>e.includes(t),t={esc:"escape",ins:"insert",del:"delete",up:"arrowup",down:"arrowdown",right:"arrowright",left:"arrowleft",pgup:"pageup",pgdn:"pagedown",break:"pause",scroll:"scrolllock",scrlk:"scrolllock",prtscr:"printscreen",win:"meta",windows:"meta",cmd:"meta",command:"meta",comma:",",period:".",quote:'"',singlequote:"'",colon:":",semicolon:";",plus:"+",minus:"-",tilde:"~",equal:"=",slash:"/"},o=["ctrlKey","altKey","shiftKey","metaKey"];function n(e){r(`Invalid hotkey: '${e}'`)}function r(e){throw new Error(e)}const s=["capture","passive","once","prevent","stop","trusted","window","document"];function c({directive:c}){c("hotkey",(c,{expression:a,value:i,modifiers:l},{evaluateLater:u,cleanup:d})=>{const p=a?u(a):()=>{},m=e(l,"window")?window:e(l,"document")?document:c;d(((...e)=>(...t)=>{for(const o of e)o&&o(...t)})(...l.filter(e=>!s.includes(e)).flatMap(e=>e.split(",")).map(s=>function(e,s,c,a="keydown",i){const l=function(e){const o=e.replace(/\s+/g,"").toLowerCase().split("+").reduce((o,r)=>{switch(r=t[r]??r){case"ctrl":case"alt":case"shift":case"meta":o[`${r}Key`]=!0;break;default:r.length||n(e),r=r.toUpperCase(),o.code=1!==r.length||"A">r||r>"Z"?r:`KEY${r}`}return o},{code:"",ctrlKey:!1,altKey:!1,shiftKey:!1,metaKey:!1});return o.code||n(e),o}(s);return"string"==typeof e&&(e=document.querySelector(e)??r(`No element found for selector '${e}'`)),function(e,t,o,n){return e.addEventListener(t,o,n),()=>e.removeEventListener(t,o,n)}(e,a,function(e){i?.trusted&&!e.isTrusted||e.target?.closest("[data-hotkey-ignore]")||l.code===e.code.toUpperCase()&&o.every(t=>l[t]===e[t])&&c.call(this,e)},i)}(m,s,t=>{e(l,"prevent")&&t.preventDefault(),e(l,"stop")&&t.stopPropogation(),t.hotkey=s,(e=>{p(()=>{},{scope:{$event:e},params:[e]})})(t)},i||"keydown",{capture:e(l,"capture"),passive:e(l,"passive"),once:e(l,"once"),trusted:e(l,"trusted")}))))})}document.addEventListener("alpine:init",()=>Alpine.plugin(c),void 0)}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramstack/alpinegear-hotkey",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "@ramstack/alpinegear-hotkey provides 'x-hotkey' Alpine.js directive, allowing easily handle keyboard shortcuts.",
   "author": "Rameel Burhan",
   "license": "MIT",
@@ -19,6 +19,12 @@
     "alpinejs-directive",
     "alpinejs-plugin"
   ],
-  "main": "alpinegear-hotkey.js",
-  "module": "alpinegear-hotkey.esm.js"
+  "exports": {
+    ".": {
+      "import": {
+        "production": "./alpinegear-hotkey.esm.min.js",
+        "default": "./alpinegear-hotkey.esm.js"
+      }
+    }
+  }
 }