Add simple core events

dist/alpine-ie11.js

@@ -4884,6 +4884,8 @@
     }
   });
 
+  var _this16 = undefined;
+
   // Thanks @stimulus:
   // https://github.com/stimulusjs/stimulus/blob/master/packages/%40stimulus/core/src/application.ts
   function domReady() {
@@ -5313,6 +5315,10 @@
   function transition(el, stages) {
     var _this12 = this;
 
+    var eventContext = {
+      target: el
+    };
+    dispatch('alpine:transition-start', eventContext);
     stages.start();
     stages.during();
     requestAnimationFrame(function () {
@@ -5340,10 +5346,55 @@
             stages.cleanup();
           }
         }.bind(this), duration);
+        dispatch('alpine:transition-end', eventContext);
       }.bind(this));
     }.bind(this));
+  } // I grabbed this from Turbolink's codebase.
+
+  function dispatch(eventName) {
+    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        target = _ref.target,
+        cancelable = _ref.cancelable,
+        data = _ref.data;
+
+    var event = document.createEvent("Events");
+    event.initEvent(eventName, true, cancelable == true);
+    event.data = data || {}; // Fix setting `defaultPrevented` when `preventDefault()` is called
+    // http://stackoverflow.com/questions/23349191/event-preventdefault-is-not-working-in-ie-11-for-custom-events
+
+    if (event.cancelable && !preventDefaultSupported) {
+      var preventDefault = event.preventDefault;
+
+      event.preventDefault = function () {
+        var _this15 = this;
+
+        if (!this.defaultPrevented) {
+          Object.defineProperty(this, "defaultPrevented", {
+            get: function get() {
+              _newArrowCheck(this, _this15);
+
+              return true;
+            }.bind(this)
+          });
+        }
+
+        preventDefault.call(this);
+      };
+    }
+
+    (target || document).dispatchEvent(event);
+    return event;
   }
 
+  var preventDefaultSupported = function () {
+    _newArrowCheck(this, _this16);
+
+    var event = document.createEvent("Events");
+    event.initEvent("test", true, true);
+    event.preventDefault();
+    return event.defaultPrevented;
+  }.bind(undefined)();
+
   function isNumeric(subject) {
     return !isNaN(subject);
   }
@@ -6886,8 +6937,9 @@
 
                   this.initializeComponent(el);
                 }.bind(this));
+                dispatch('alpine:loaded');
 
-              case 6:
+              case 7:
               case "end":
                 return _context.stop();
             }

dist/alpine.js

@@ -369,6 +369,10 @@
     transition(el, stages);
   }
   function transition(el, stages) {
+    const eventContext = {
+      target: el
+    };
+    dispatch('alpine:transition-start', eventContext);
     stages.start();
     stages.during();
     requestAnimationFrame(() => {
@@ -386,10 +390,48 @@
             stages.cleanup();
           }
         }, duration);
+        dispatch('alpine:transition-end', eventContext);
       });
     });
+  } // I grabbed this from Turbolink's codebase.
+
+  function dispatch(eventName, {
+    target,
+    cancelable,
+    data
+  } = {}) {
+    const event = document.createEvent("Events");
+    event.initEvent(eventName, true, cancelable == true);
+    event.data = data || {}; // Fix setting `defaultPrevented` when `preventDefault()` is called
+    // http://stackoverflow.com/questions/23349191/event-preventdefault-is-not-working-in-ie-11-for-custom-events
+
+    if (event.cancelable && !preventDefaultSupported) {
+      const {
+        preventDefault
+      } = event;
+
+      event.preventDefault = function () {
+        if (!this.defaultPrevented) {
+          Object.defineProperty(this, "defaultPrevented", {
+            get: () => true
+          });
+        }
+
+        preventDefault.call(this);
+      };
+    }
+
+    (target || document).dispatchEvent(event);
+    return event;
   }
 
+  const preventDefaultSupported = (() => {
+    const event = document.createEvent("Events");
+    event.initEvent("test", true, true);
+    event.preventDefault();
+    return event.defaultPrevented;
+  })();
+
   function isNumeric(subject) {
     return !isNaN(subject);
   }
@@ -1597,6 +1639,7 @@
       this.listenForNewUninitializedComponentsAtRunTime(el => {
         this.initializeComponent(el);
       });
+      dispatch('alpine:loaded');
     },
     discoverComponents: function discoverComponents(callback) {
       const rootEls = document.querySelectorAll('[x-data]');

src/index.js

@@ -1,5 +1,5 @@
 import Component from './component'
-import { domReady, isTesting } from './utils'
+import { domReady, isTesting, dispatch } from './utils'
 
 const Alpine = {
     start: async function () {
@@ -22,6 +22,8 @@ const Alpine = {
         this.listenForNewUninitializedComponentsAtRunTime(el => {
             this.initializeComponent(el)
         })
+
+        dispatch('alpine:loaded')
     },
 
     discoverComponents: function (callback) {

src/utils.js

@@ -359,6 +359,10 @@ export function transitionClasses(el, classesDuring, classesStart, classesEnd, h
 }
 
 export function transition(el, stages) {
+    const eventContext = { target: el }
+
+    dispatch('alpine:transition-start', eventContext)
+
     stages.start()
     stages.during()
 
@@ -381,10 +385,41 @@ export function transition(el, stages) {
                     stages.cleanup()
                 }
             }, duration);
+
+            dispatch('alpine:transition-end', eventContext)
         })
     });
 }
 
+// I grabbed this from Turbolink's codebase.
+export function dispatch(eventName, { target, cancelable, data } = {}) {
+    const event = document.createEvent("Events")
+    event.initEvent(eventName, true, cancelable == true)
+    event.data = data || {}
+
+    // Fix setting `defaultPrevented` when `preventDefault()` is called
+    // http://stackoverflow.com/questions/23349191/event-preventdefault-is-not-working-in-ie-11-for-custom-events
+    if (event.cancelable && ! preventDefaultSupported) {
+        const { preventDefault } = event
+        event.preventDefault = function () {
+            if (! this.defaultPrevented) {
+                Object.defineProperty(this, "defaultPrevented", { get: () => true })
+            }
+            preventDefault.call(this)
+        }
+    }
+
+    (target || document).dispatchEvent(event)
+    return event
+}
+
+const preventDefaultSupported = (() => {
+    const event = document.createEvent("Events")
+    event.initEvent("test", true, true)
+    event.preventDefault()
+    return event.defaultPrevented
+})()
+
 function isNumeric(subject){
     return ! isNaN(subject)
 }