pseudo-dom 0.2.0 → 0.3.0

package/dist/services/EventTargetService.js

@@ -4,6 +4,8 @@ require('core-js/modules/esnext.iterator.constructor.js')
 require('core-js/modules/esnext.iterator.filter.js')
 require('core-js/modules/esnext.iterator.find.js')
 require('core-js/modules/esnext.iterator.for-each.js')
+require('core-js/modules/esnext.iterator.map.js')
+require('core-js/modules/esnext.iterator.some.js')
 const __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule
     ? mod
@@ -21,9 +23,13 @@ Object.defineProperty(exports, '__esModule', {
  */
 const EventService_1 = require('./EventService')
 const PseudoEventListener_1 = __importDefault(require('../classes/PseudoEventListener'))
+const getParentNodes_1 = __importDefault(require('../functions/getParentNodes'))
 const LinkedList_1 = require('collect-your-stuff/dist/collections/linked-list/LinkedList')
 /**
  * Simulate the behaviour of the EventTarget Class when there is no DOM available.
+ * Dispatching an event sends it through the tree the way the DOM does: down from the root to the target (capture
+ * listeners), to the target itself, then back up to the root (the listeners which are not capture listeners, when the
+ * event bubbles).
  * @author Joshua Heagle <joshuaheagle@gmail.com>
  * @class
  * @property {Object.<string, Array.<PseudoEventListener>>} listeners
@@ -53,33 +59,51 @@ class EventTargetService {
   }
 
   /**
-   * Run each of the listeners registered on this target for the type of the event.
-   * Listeners which do not apply to the event's phase are skipped, running stops once immediate propagation is stopped,
-   * and listeners added or removed while running do not change which ones run for this event.
-   * @param {EventService} event
-   * @returns {*} true when there was nothing registered, otherwise the last value returned from a handler (null when none ran)
+   * Run the listeners registered on this target for the type of the event which apply to the phase the event is in
+   * (at the target, the capture listeners run before the others). Listeners which are added while this runs do not run
+   * for this event, and listeners which are removed while it runs no longer do. Running stops as soon as immediate
+   * propagation is stopped. A listener which throws does not stop the others.
+   * @param {EventService} event The event, which is at a phase and has a current target
+   * @returns {Array<*>} The errors which the listeners threw
    */
   runEvents (event) {
+    const errors = []
     if (!(event.type in this.listeners)) {
-      return true
+      return errors
     }
-    const listeners = this.listeners[event.type]
-    let eventReturn = null
-    // Work from a copy of the linkers so that removing a listener (for example a once listener) does not disturb the walk
-    for (const linker of Array.from(listeners)) {
-      const listener = linker.data
+    const listeners = Array.from(this.listeners[event.type]).map(linker => linker.data)
+    // At the target the capture listeners come first, otherwise the order is the order they were added
+    const ordered = event.eventPhase === EventService_1.EventService.AT_TARGET ? listeners.filter(listener => listener.capture).concat(listeners.filter(listener => !listener.capture)) : listeners
+    for (const listener of ordered) {
       if (event.inner.immediatePropagationStopped) {
         break
       }
       if (listener.rejectEvent(event)) {
         continue
       }
-      eventReturn = listener.handleEvent(event)
       if (listener.once) {
-        listeners.remove(linker)
+        this.removeListener(event.type, listener)
       }
+      event.inner.inPassiveListener = listener.passive
+      try {
+        listener.handleEvent(event)
+      } catch (error) {
+        errors.push(error)
+      }
+      event.inner.inPassiveListener = false
     }
-    return eventReturn
+    return errors
+  }
+
+  /**
+   * Take a listener out of the registered listeners, so that it does not run again.
+   * @param {string} type
+   * @param {PseudoEventListener} listener
+   */
+  removeListener (type, listener) {
+    listener.removed = true
+    const registered = this.listeners[type]
+    Array.from(registered).filter(linker => linker.data === listener).forEach(linker => registered.remove(linker))
   }
 
   /**
@@ -92,48 +116,34 @@ class EventTargetService {
     this.defaultEvent[type] = callback
   }
 
-  runDefaultEvent (event) {
-    if (event.defaultPrevented) {
-      return false
-    }
-    this.defaultEvent[event.type](event)
-    return true
-  }
-
-  startEvents (eventType) {
-    const event = new EventService_1.EventService(eventType)
-    event.inner.target = this;
-    [EventService_1.EventService.CAPTURING_PHASE, EventService_1.EventService.AT_TARGET, EventService_1.EventService.BUBBLING_PHASE].forEach(phase => {
-      let continueEvents = null
-      if (phase === EventService_1.EventService.AT_TARGET || !event.inner.propagationStopped) {
-        event.inner.eventPhase = phase
-        event.composedPath().forEach(target => {
-          event.inner.currentTarget = target
-          continueEvents = event.currentTarget.runEvents(event)
-        })
-      }
-      if (event.eventPhase === EventService_1.EventService.AT_TARGET && typeof continueEvents !== 'boolean' && this.defaultEvent[eventType]) {
-        this.runDefaultEvent(event)
-      }
-    })
-    return true
-  }
-
+  /**
+   * Registers an event handler of a specific event type. Adding the same handler again for the same type and phase does
+   * nothing, like the DOM.
+   * @param {string} type The type of event to listen for
+   * @param {Function|Object} callback The function to call (or an object with a handleEvent function)
+   * @param {Object|boolean} [useCapture=false] Listen while the event travels down to the target (true), or an object with capture, once and passive
+   */
   addEventListener (type, callback, useCapture = false) {
     let options = {
       capture: false,
       once: false,
       passive: false
     }
-    if (typeof useCapture === 'object') {
+    if (typeof useCapture === 'object' && useCapture !== null) {
       // Originally useCapture was a single boolean flag, later optional other flags can be used
       // Here we take all the given flags from the object and assign them as the options
       options = Object.assign(options, useCapture)
     } else {
-      options.capture = useCapture
+      options.capture = !!useCapture
     }
-    const listener = new PseudoEventListener_1.default(type, options, (callback.handleEvent || callback).bind(this), callback)
     const listeners = this.listenersFor(type)
+    const alreadyAdded = Array.from(listeners).some(linker => linker.data.callback === callback && linker.data.capture === options.capture)
+    if (alreadyAdded) {
+      return
+    }
+    // A function runs with this target as this, an object runs its handleEvent as itself
+    const handler = typeof callback === 'function' ? callback.bind(this) : callback.handleEvent.bind(callback)
+    const listener = new PseudoEventListener_1.default(type, options, handler, callback)
     // Listeners run in the order they were added, except that listeners which are not defaults always come before the defaults
     const firstDefault = Array.from(listeners).find(linker => linker.data.isDefault)
     if (firstDefault && !listener.isDefault) {
@@ -143,20 +153,79 @@ class EventTargetService {
     }
   }
 
-  removeEventListener (type, callback) {
+  /**
+   * Removes an event listener, the one which was added with the same type, handler and phase.
+   * @param {string} type The type of event
+   * @param {Function|Object} callback The handler which was added
+   * @param {Object|boolean} [options=false] Whether the listener was a capture listener (true), or an object with capture
+   */
+  removeEventListener (type, callback, options = false) {
     if (!(type in this.listeners)) {
       return
     }
-    const listeners = this.listeners[type]
-    Array.from(listeners).filter(linker => !linker.data.isDefault && linker.data.callback === callback).forEach(linker => listeners.remove(linker))
+    const capture = typeof options === 'object' && options !== null ? !!options.capture : !!options
+    Array.from(this.listeners[type]).map(linker => linker.data).filter(listener => !listener.isDefault && listener.callback === callback && listener.capture === capture).forEach(listener => this.removeListener(type, listener))
   }
 
-  dispatchEvent (event, target = this) {
-    event.inner.target = target
-    if (!(event.type in this.listeners)) {
-      return true
+  /**
+   * Dispatches an event to this target and through the tree: capture listeners of the ancestors from the root down,
+   * then the listeners of this target, then (when the event bubbles) the other listeners of the ancestors from the
+   * parent up to the root. stopPropagation() stops it reaching further targets, stopImmediatePropagation() also stops
+   * the remaining listeners of the current target. Afterwards, unless the default was prevented, the default action
+   * of this target (see setDefaultEvent) runs. The event can be dispatched again afterwards.
+   * @param {EventService} event The event to dispatch
+   * @returns {boolean} False when the event was cancelable and a listener prevented the default, otherwise true
+   * @throws {Error} When the event is already being dispatched, or (after the whole dispatch has finished) the error
+   * which a listener threw (an error with all of them in its errors property when several did)
+   */
+  dispatchEvent (event) {
+    if (event.inner.dispatching) {
+      throw new Error('The event is already being dispatched.')
+    }
+    event.inner.dispatching = true
+    event.inner.target = this
+    // The ancestors, the root first, which can have listeners
+    const ancestors = (0, getParentNodes_1.default)(this).filter(node => node instanceof EventTargetService)
+    event.inner.path = [this].concat(ancestors.slice().reverse())
+    const errors = []
+    const visit = (target, phase) => {
+      event.inner.eventPhase = phase
+      event.inner.currentTarget = target
+      errors.push(...target.runEvents(event))
+    }
+    for (const ancestor of ancestors) {
+      if (event.inner.propagationStopped) {
+        break
+      }
+      visit(ancestor, EventService_1.EventService.CAPTURING_PHASE)
+    }
+    if (!event.inner.propagationStopped) {
+      visit(this, EventService_1.EventService.AT_TARGET)
+    }
+    if (event.bubbles) {
+      for (const ancestor of ancestors.slice().reverse()) {
+        if (event.inner.propagationStopped) {
+          break
+        }
+        visit(ancestor, EventService_1.EventService.BUBBLING_PHASE)
+      }
+    }
+    event.inner.finishDispatch()
+    if (!event.defaultPrevented && typeof this.defaultEvent[event.type] === 'function') {
+      try {
+        this.defaultEvent[event.type](event)
+      } catch (error) {
+        errors.push(error)
+      }
+    }
+    if (errors.length === 1) {
+      throw errors[0]
+    }
+    if (errors.length > 1) {
+      throw Object.assign(new Error(`${errors.length} listeners threw an error while dispatching the ${event.type} event.`), {
+        errors
+      })
     }
-    this.runEvents(event)
     return !event.defaultPrevented
   }
 }

package/dist/services/EventTargetService.min.js

@@ -1 +1 @@
-"use strict";require("core-js/modules/esnext.iterator.constructor.js"),require("core-js/modules/esnext.iterator.filter.js"),require("core-js/modules/esnext.iterator.find.js"),require("core-js/modules/esnext.iterator.for-each.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const EventService_1=require("./EventService"),PseudoEventListener_1=__importDefault(require("../classes/PseudoEventListener")),LinkedList_1=require("collect-your-stuff/dist/collections/linked-list/LinkedList");class EventTargetService{constructor(){this.listeners={},this.defaultEvent={}}listenersFor(e){return e in this.listeners||(this.listeners[e]=new LinkedList_1.LinkedList),this.listeners[e]}runEvents(e){if(!(e.type in this.listeners))return!0;const t=this.listeners[e.type];let r=null;for(const n of Array.from(t)){const s=n.data;if(e.inner.immediatePropagationStopped)break;s.rejectEvent(e)||(r=s.handleEvent(e),s.once&&t.remove(n))}return r}setDefaultEvent(e,t){this.listenersFor(e),this.defaultEvent[e]=t}runDefaultEvent(e){return!e.defaultPrevented&&(this.defaultEvent[e.type](e),!0)}startEvents(e){const t=new EventService_1.EventService(e);return t.inner.target=this,[EventService_1.EventService.CAPTURING_PHASE,EventService_1.EventService.AT_TARGET,EventService_1.EventService.BUBBLING_PHASE].forEach(r=>{let n=null;r!==EventService_1.EventService.AT_TARGET&&t.inner.propagationStopped||(t.inner.eventPhase=r,t.composedPath().forEach(e=>{t.inner.currentTarget=e,n=t.currentTarget.runEvents(t)})),t.eventPhase===EventService_1.EventService.AT_TARGET&&"boolean"!=typeof n&&this.defaultEvent[e]&&this.runDefaultEvent(t)}),!0}addEventListener(e,t,r=!1){let n={capture:!1,once:!1,passive:!1};"object"==typeof r?n=Object.assign(n,r):n.capture=r;const s=new PseudoEventListener_1.default(e,n,(t.handleEvent||t).bind(this),t),i=this.listenersFor(e),o=Array.from(i).find(e=>e.data.isDefault);o&&!s.isDefault?i.insertBefore(o,s):i.append(s)}removeEventListener(e,t){if(!(e in this.listeners))return;const r=this.listeners[e];Array.from(r).filter(e=>!e.data.isDefault&&e.data.callback===t).forEach(e=>r.remove(e))}dispatchEvent(e,t=this){return e.inner.target=t,!(e.type in this.listeners)||(this.runEvents(e),!e.defaultPrevented)}}exports.default=EventTargetService;
+"use strict";require("core-js/modules/esnext.iterator.constructor.js"),require("core-js/modules/esnext.iterator.filter.js"),require("core-js/modules/esnext.iterator.find.js"),require("core-js/modules/esnext.iterator.for-each.js"),require("core-js/modules/esnext.iterator.map.js"),require("core-js/modules/esnext.iterator.some.js");var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});const EventService_1=require("./EventService"),PseudoEventListener_1=__importDefault(require("../classes/PseudoEventListener")),getParentNodes_1=__importDefault(require("../functions/getParentNodes")),LinkedList_1=require("collect-your-stuff/dist/collections/linked-list/LinkedList");class EventTargetService{constructor(){this.listeners={},this.defaultEvent={}}listenersFor(e){return e in this.listeners||(this.listeners[e]=new LinkedList_1.LinkedList),this.listeners[e]}runEvents(e){const t=[];if(!(e.type in this.listeners))return t;const r=Array.from(this.listeners[e.type]).map(e=>e.data),n=e.eventPhase===EventService_1.EventService.AT_TARGET?r.filter(e=>e.capture).concat(r.filter(e=>!e.capture)):r;for(const r of n){if(e.inner.immediatePropagationStopped)break;if(!r.rejectEvent(e)){r.once&&this.removeListener(e.type,r),e.inner.inPassiveListener=r.passive;try{r.handleEvent(e)}catch(e){t.push(e)}e.inner.inPassiveListener=!1}}return t}removeListener(e,t){t.removed=!0;const r=this.listeners[e];Array.from(r).filter(e=>e.data===t).forEach(e=>r.remove(e))}setDefaultEvent(e,t){this.listenersFor(e),this.defaultEvent[e]=t}addEventListener(e,t,r=!1){let n={capture:!1,once:!1,passive:!1};"object"==typeof r&&null!==r?n=Object.assign(n,r):n.capture=!!r;const i=this.listenersFor(e);if(Array.from(i).some(e=>e.data.callback===t&&e.data.capture===n.capture))return;const s="function"==typeof t?t.bind(this):t.handleEvent.bind(t),o=new PseudoEventListener_1.default(e,n,s,t),a=Array.from(i).find(e=>e.data.isDefault);a&&!o.isDefault?i.insertBefore(a,o):i.append(o)}removeEventListener(e,t,r=!1){if(!(e in this.listeners))return;const n="object"==typeof r&&null!==r?!!r.capture:!!r;Array.from(this.listeners[e]).map(e=>e.data).filter(e=>!e.isDefault&&e.callback===t&&e.capture===n).forEach(t=>this.removeListener(e,t))}dispatchEvent(e){if(e.inner.dispatching)throw new Error("The event is already being dispatched.");e.inner.dispatching=!0,e.inner.target=this;const t=(0,getParentNodes_1.default)(this).filter(e=>e instanceof EventTargetService);e.inner.path=[this].concat(t.slice().reverse());const r=[],n=(t,n)=>{e.inner.eventPhase=n,e.inner.currentTarget=t,r.push(...t.runEvents(e))};for(const r of t){if(e.inner.propagationStopped)break;n(r,EventService_1.EventService.CAPTURING_PHASE)}if(e.inner.propagationStopped||n(this,EventService_1.EventService.AT_TARGET),e.bubbles)for(const r of t.slice().reverse()){if(e.inner.propagationStopped)break;n(r,EventService_1.EventService.BUBBLING_PHASE)}if(e.inner.finishDispatch(),!e.defaultPrevented&&"function"==typeof this.defaultEvent[e.type])try{this.defaultEvent[e.type](e)}catch(e){r.push(e)}if(1===r.length)throw r[0];if(r.length>1)throw Object.assign(new Error(`${r.length} listeners threw an error while dispatching the ${e.type} event.`),{errors:r});return!e.defaultPrevented}}exports.default=EventTargetService;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pseudo-dom",
   "description": "Mock the DOM on the server side for managing state and testing",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
   "author": "Joshua Heagle",