feature: add support for debouncing x-on.away

dist/alpine-ie11.js

@@ -6929,8 +6929,12 @@
       event = camelCase(event);
     }
 
+    var _handler2, listenerTarget;
+
     if (modifiers.includes('away')) {
-      var _handler = function handler(e) {
+      listenerTarget = document;
+
+      _handler2 = function handler(e) {
         _newArrowCheck(this, _this);
 
         // Don't do anything if the click came from the element or within it.
@@ -6942,16 +6946,13 @@
         runListenerHandler(component, expression, e, extraVars);
 
         if (modifiers.includes('once')) {
-          document.removeEventListener(event, _handler, options);
+          document.removeEventListener(event, _handler2, options);
         }
-      }.bind(this); // Listen for this event at the root level.
-
-
-      document.addEventListener(event, _handler, options);
+      }.bind(this);
     } else {
-      var listenerTarget = modifiers.includes('window') ? window : modifiers.includes('document') ? document : el;
+      listenerTarget = modifiers.includes('window') ? window : modifiers.includes('document') ? document : el;
 
-      var _handler2 = function handler(e) {
+      _handler2 = function _handler(e) {
         var _this2 = this;
 
         _newArrowCheck(this, _this);
@@ -6991,15 +6992,15 @@
           }.bind(this));
         }
       }.bind(this);
+    }
 
-      if (modifiers.includes('debounce')) {
-        var nextModifier = modifiers[modifiers.indexOf('debounce') + 1] || 'invalid-wait';
-        var wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250;
-        _handler2 = debounce(_handler2, wait);
-      }
-
-      listenerTarget.addEventListener(event, _handler2, options);
+    if (modifiers.includes('debounce')) {
+      var nextModifier = modifiers[modifiers.indexOf('debounce') + 1] || 'invalid-wait';
+      var wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250;
+      _handler2 = debounce(_handler2, wait);
     }
+
+    listenerTarget.addEventListener(event, _handler2, options);
   }
 
   function runListenerHandler(component, expression, e, extraVars) {

dist/alpine.js

@@ -863,8 +863,12 @@
       event = camelCase(event);
     }
 
+    let handler, listenerTarget;
+
     if (modifiers.includes('away')) {
-      let handler = e => {
+      listenerTarget = document;
+
+      handler = e => {
         // Don't do anything if the click came from the element or within it.
         if (el.contains(e.target)) return; // Don't do anything if this element isn't currently visible.
 
@@ -876,14 +880,11 @@
         if (modifiers.includes('once')) {
           document.removeEventListener(event, handler, options);
         }
-      }; // Listen for this event at the root level.
-
-
-      document.addEventListener(event, handler, options);
+      };
     } else {
-      let listenerTarget = modifiers.includes('window') ? window : modifiers.includes('document') ? document : el;
+      listenerTarget = modifiers.includes('window') ? window : modifiers.includes('document') ? document : el;
 
-      let handler = e => {
+      handler = e => {
         // Remove this global event handler if the element that declared it
         // has been removed. It's now stale.
         if (listenerTarget === window || listenerTarget === document) {
@@ -917,15 +918,15 @@
           });
         }
       };
+    }
 
-      if (modifiers.includes('debounce')) {
-        let nextModifier = modifiers[modifiers.indexOf('debounce') + 1] || 'invalid-wait';
-        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250;
-        handler = debounce(handler, wait);
-      }
-
-      listenerTarget.addEventListener(event, handler, options);
+    if (modifiers.includes('debounce')) {
+      let nextModifier = modifiers[modifiers.indexOf('debounce') + 1] || 'invalid-wait';
+      let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250;
+      handler = debounce(handler, wait);
     }
+
+    listenerTarget.addEventListener(event, handler, options);
   }
 
   function runListenerHandler(component, expression, e, extraVars) {

src/directives/on.js

@@ -9,8 +9,12 @@ export function registerListener(component, el, event, modifiers, expression, ex
         event = camelCase(event);
     }
 
+    let handler, listenerTarget
+
     if (modifiers.includes('away')) {
-        let handler = e => {
+        listenerTarget = document
+
+        handler = e => {
             // Don't do anything if the click came from the element or within it.
             if (el.contains(e.target)) return
 
@@ -25,14 +29,11 @@ export function registerListener(component, el, event, modifiers, expression, ex
                 document.removeEventListener(event, handler, options)
             }
         }
-
-        // Listen for this event at the root level.
-        document.addEventListener(event, handler, options)
     } else {
-        let listenerTarget = modifiers.includes('window')
+        listenerTarget = modifiers.includes('window')
             ? window : (modifiers.includes('document') ? document : el)
 
-        let handler = e => {
+        handler = e => {
             // Remove this global event handler if the element that declared it
             // has been removed. It's now stale.
             if (listenerTarget === window || listenerTarget === document) {
@@ -68,15 +69,15 @@ export function registerListener(component, el, event, modifiers, expression, ex
                 })
             }
         }
+    }
 
-        if (modifiers.includes('debounce')) {
-            let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
-            let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
-            handler = debounce(handler, wait, this)
-        }
-
-        listenerTarget.addEventListener(event, handler, options)
+    if (modifiers.includes('debounce')) {
+        let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
+        let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
+        handler = debounce(handler, wait, this)
     }
+
+    listenerTarget.addEventListener(event, handler, options)
 }
 
 function runListenerHandler(component, expression, e, extraVars) {