sygnal 5.4.0 → 6.0.0

package/src/cycle/dom/EventDelegator.ts

@@ -1,6 +1,6 @@
 import xs, {Stream, Subscription} from 'xstream';
 import {ScopeChecker} from './ScopeChecker';
-import {IsolateModule} from './IsolateModule';
+import {IsolateModule, upOf} from './IsolateModule';
 import {getSelectors, isEqualNamespace} from './utils';
 import {ElementFinder} from './ElementFinder';
 import {EventsFnOptions} from './DOMSource';
@@ -41,7 +41,11 @@ export const eventTypesThatDontBubble = [
   `pointerleave`,
   `gotpointercapture`,
   `lostpointercapture`,
-  // Media
+  // Media (and img/script/link error, abort)
+  `abort`,
+  `error`,
+  `loadstart`,
+  `progress`,
   `canplay`,
   `canplaythrough`,
   `durationchange`,
@@ -68,7 +72,11 @@ export const eventTypesThatDontBubble = [
   `reset`,
   `submit`,
   `formdata`,
+  // details, popover, dialog
   `toggle`,
+  `beforetoggle`,
+  `cancel`,
+  `close`,
   // Animation / Transition
   `animationstart`,
   `animationend`,
@@ -91,7 +99,8 @@ interface NonBubblingListener {
   destination: Destination;
 }
 
-type NonBubblingMeta = [Stream<Event>, string, ElementFinder, Destination]
+// [subject, type, finder, destination, number of started streams]
+type NonBubblingMeta = [Stream<Event>, string, ElementFinder, Destination, number]
 
 export class EventDelegator {
   private virtualListeners = new SymbolTree<
@@ -142,9 +151,6 @@ export class EventDelegator {
     options: EventsFnOptions,
     bubbles?: boolean
   ): Stream<Event> {
-    const subject = xs.never();
-    let dest;
-
     const scopeChecker = new ScopeChecker(namespace, this.isolateModule);
 
     const shouldBubble =
@@ -157,94 +163,87 @@ export class EventDelegator {
         this.setupDOMListener(eventType, !!options.passive);
       }
 
-      dest = this.insertListener(subject, scopeChecker, eventType, options);
-      return subject;
-    } else {
-      const setArray: Array<NonBubblingMeta> = [];
-      this.nonBubblingListenersToAdd.forEach(v => setArray.push(v));
-      let found = undefined, index = 0;
-      const length = setArray.length;
-      const tester = (x: NonBubblingMeta) => {
-        const [_sub, et, ef, _] = x;
-        return eventType === et && isEqualNamespace(ef.namespace, namespace);
-      }
-
-      while (!found && index < length) {
-        const item = setArray[index]
-        found = tester(item) ? item : found;
-        index++;
-      }
-
-      let input: NonBubblingMeta = found as NonBubblingMeta;
-
-      let nonBubbleSubject: Stream<Event>;
-      if (!input) {
-        const finder = new ElementFinder(namespace, this.isolateModule);
-        dest = this.insertListener(subject, scopeChecker, eventType, options);
-        input = [subject, eventType, finder, dest];
-        nonBubbleSubject = subject;
-        this.nonBubblingListenersToAdd.add(input);
-        this.setupNonBubblingListener(input);
-      } else {
-        const [sub] = input;
-        nonBubbleSubject = sub;
-      }
-
-      const self = this;
-
-      let subscription: any = null;
-      return xs.create({
-        start: listener => {
-          subscription = nonBubbleSubject.subscribe(listener);
+      // P45-A: the destination is in the delegator only while the stream has listeners, so
+      // a disposed component leaves nothing behind (audit rec 3). Each stream has its own
+      // destination; xstream counts the stream's own listeners
+      let dest: Destination;
+      const out: Stream<Event> = xs.create({
+        start: () => {
+          dest = this.insertListener(out, scopeChecker, eventType, options);
         },
-        stop: () => {
-          const [_s, et, ef, _d] = input;
-          const elements = ef.call();
-
-          elements.forEach(function(element: any) {
-            const subs = element.subs;
-            if (subs && subs[et]) {
-              subs[et].unsubscribe();
-              delete subs[et];
+        stop: () => this.removeListener(dest, eventType),
+      });
+      return out;
+    }
+
+    // one record, and one listener per element, per type and scope: the streams on it share
+    // it, and the last one to stop removes it. G-263: a stream finds (or makes) the live record
+    // each time it starts, so a stream never started leaves none, and one restarted after its
+    // record was removed shares the record made meanwhile
+    let rec: NonBubblingMeta | undefined, subscription: any;
+    return xs.create({
+      start: listener => {
+        rec = undefined;
+        this.nonBubblingListenersToAdd.forEach(x => {
+          if (!rec && x[1] === eventType && isEqualNamespace(x[2].namespace, namespace)) rec = x;
+        });
+        if (!rec) {
+          const s = xs.never();
+          rec = [s, eventType, new ElementFinder(namespace, this.isolateModule), this.insertListener(s, scopeChecker, eventType, options), 0];
+          this.nonBubblingListenersToAdd.add(rec);
+        }
+        if (!rec[4]++) this.setupNonBubblingListener(rec);
+        subscription = rec[0].subscribe(listener);
+      },
+      stop: () => {
+        const r = rec!;
+        subscription.unsubscribe();
+        if (!--r[4]) {
+          const map = this.nonBubblingListeners.get(eventType);
+          if (map) map.forEach((l, element: any) => {
+            if (l.destination === r[3]) {
+              l.sub!.unsubscribe();
+              delete element.subs[eventType];
+              map.delete(element);
             }
           });
-
-          self.nonBubblingListenersToAdd.delete(input as any);
-
-          subscription.unsubscribe();
+          this.nonBubblingListenersToAdd.delete(r);
+          this.removeListener(r[3], eventType);
         }
-      });
-    }
+      },
+    });
   }
 
-  public removeElement(element: Element, namespace?: Array<Scope>): void {
-    if (namespace !== undefined) {
-      this.virtualListeners.delete(namespace);
-    }
-    const toRemove: Array<[string, Element]> = [];
+  public removeElement(element: Element): void {
+    const types: Array<string> = [];
     this.nonBubblingListeners.forEach((map, type) => {
       if (map.has(element)) {
-        toRemove.push([type, element]);
+        types.push(type);
         const subs = (element as any).subs;
-        if (subs) {
-          Object.keys(subs).forEach((key: any) => {
-            subs[key].unsubscribe();
-          });
-        }
+        if (subs) Object.keys(subs).forEach(key => subs[key].unsubscribe());
       }
     });
-    for (let i = 0; i < toRemove.length; i++) {
-      const map = this.nonBubblingListeners.get(toRemove[i][0]);
-      if (!map) {
-        continue;
-      }
-      map.delete(toRemove[i][1]);
-      if (map.size === 0) {
-        this.nonBubblingListeners.delete(toRemove[i][0]);
-      } else {
-        this.nonBubblingListeners.set(toRemove[i][0], map);
-      }
-    }
+    types.forEach(type => {
+      const map = this.nonBubblingListeners.get(type);
+      if (!map) return;
+      map.delete(element);
+      if (!map.size) this.nonBubblingListeners.delete(type);
+    });
+  }
+
+  // the queues a destination goes in: its scope's and its ancestors' up to the nearest total scope
+  private eachSet(
+    n: Array<Scope>,
+    eventType: string,
+    f: (map: Map<string, PriorityQueue<Destination>>, max: number) => void,
+    create?: boolean
+  ): void {
+    let max = n.length;
+    do {
+      const map = this.virtualListeners.get(n, create ? () => new Map() : undefined, max);
+      if (map) f(map, max);
+      max--;
+    } while (max >= 0 && n[max].type !== 'total');
   }
 
   private insertListener(
@@ -253,15 +252,7 @@ export class EventDelegator {
     eventType: string,
     options: EventsFnOptions
   ): Destination {
-    const relevantSets: Array<PriorityQueue<Destination>> = [];
     const n = scopeChecker._namespace;
-    let max = n.length;
-
-    do {
-      relevantSets.push(this.getVirtualListeners(eventType, n, true, max));
-      max--;
-    } while (max >= 0 && n[max].type !== 'total');
-
     const destination = {
       ...options,
       scopeChecker,
@@ -271,40 +262,37 @@ export class EventDelegator {
       passive: !!options.passive,
     };
 
-    for (let i = 0; i < relevantSets.length; i++) {
-      relevantSets[i].add(destination, n.length);
-    }
+    this.eachSet(n, eventType, map => {
+      if (!map.has(eventType)) map.set(eventType, new PriorityQueue<Destination>());
+      map.get(eventType)!.add(destination, n.length);
+    }, true);
 
     return destination;
   }
 
+  // P45-A: take a stopped stream's destination out, and drop the queues and scopes left empty
+  private removeListener(dest: Destination, eventType: string): void {
+    const n = dest.scopeChecker._namespace;
+    this.eachSet(n, eventType, (map, max) => {
+      const q = map.get(eventType);
+      if (q && !q.delete(dest)) {
+        map.delete(eventType);
+        if (!map.size) this.virtualListeners.delete(n, max);
+      }
+    });
+  }
+
   private getVirtualListeners(
     eventType: string,
-    namespace: Array<Scope>,
-    exact = false,
-    max?: number
+    namespace: Array<Scope>
   ): PriorityQueue<Destination> {
-    let _max = max !== undefined ? max : namespace.length;
-    if (!exact) {
-      for (let i = _max - 1; i >= 0; i--) {
-        if (namespace[i].type === 'total') {
-          _max = i + 1;
-          break;
-        }
-        _max = i;
-      }
-    }
-
-    const map = this.virtualListeners.getDefault(
-      namespace,
-      () => new Map<string, PriorityQueue<Destination>>(),
-      _max
-    );
+    // up to the innermost total scope (none: the root's)
+    let _max = namespace.length;
+    while (_max && namespace[_max - 1].type !== 'total') _max--;
 
-    if (!map.has(eventType)) {
-      map.set(eventType, new PriorityQueue<Destination>());
-    }
-    return map.get(eventType) as PriorityQueue<Destination>;
+    // a lookup never adds a scope (P45-A)
+    const map = this.virtualListeners.get(namespace, undefined, _max);
+    return (map && map.get(eventType)) || ([] as any);
   }
 
   private setupDOMListener(eventType: string, passive: boolean): void {
@@ -329,59 +317,43 @@ export class EventDelegator {
   private setupNonBubblingListener(
     input: NonBubblingMeta
   ): void {
-    const [_, eventType, elementFinder, destination] = input;
-    if (!this.origin) {
+    const [_, eventType, elementFinder, destination, started] = input;
+    if (!this.origin || !started) {
       return;
     }
 
-    const elements = elementFinder.call();
-    if (elements.length) {
-      const self = this;
-      elements.forEach((element: Element) => {
-        const subs = (element as any).subs;
-        if (!subs || !subs[eventType]) {
-          const sub = fromEvent(
-            element,
-            eventType,
-            false,
-            false,
-            destination.passive
-          ).subscribe({
-            next: (ev: Event) =>
-              self.onEvent(eventType, ev, !!destination.passive, false),
-            error: () => {},
-            complete: () => {},
-          });
-          if (!self.nonBubblingListeners.has(eventType)) {
-            self.nonBubblingListeners.set(
-              eventType,
-              new Map<Element, NonBubblingListener>()
-            );
-          }
-          const map = self.nonBubblingListeners.get(eventType);
-          if (!map) {
-            return;
-          }
-          map.set(element, {sub, destination});
-
-          (element as any).subs = {
-            ...subs,
-            [eventType]: sub,
-          };
-        }
-      });
-    }
+    elementFinder.call().forEach((element: Element) => {
+      const subs = (element as any).subs;
+      if (!subs || !subs[eventType]) {
+        const sub = fromEvent(
+          element,
+          eventType,
+          false,
+          false,
+          destination.passive
+        ).subscribe({
+          next: (ev: Event) =>
+            this.onEvent(eventType, ev, !!destination.passive, false),
+          error: () => {},
+          complete: () => {},
+        });
+        let map = this.nonBubblingListeners.get(eventType);
+        if (!map) this.nonBubblingListeners.set(eventType, map = new Map());
+        map.set(element, {sub, destination});
+
+        (element as any).subs = {
+          ...subs,
+          [eventType]: sub,
+        };
+      }
+    });
   }
 
   private resetEventListeners(): void {
-    const iter = this.domListeners.entries();
-    let curr = iter.next();
-    while (!curr.done) {
-      const [type, {sub, passive}] = curr.value;
+    this.domListeners.forEach(({sub, passive}, type) => {
       sub.unsubscribe();
       this.setupDOMListener(type, passive);
-      curr = iter.next();
-    }
+    });
   }
 
   private putNonBubblingListener(
@@ -411,73 +383,43 @@ export class EventDelegator {
     bubbles = true
   ): void {
     const cycleEvent = this.patchEvent(event);
-    const rootElement = this.isolateModule.getRootElement(
-      event.target as Element
-    );
+    const target = event.target as Element;
+    const rootElement = this.isolateModule.getRootElement(target);
 
     if (bubbles) {
-      const namespace = this.isolateModule.getNamespace(
-        event.target as Element
-      );
+      const namespace = this.isolateModule.getNamespace(target);
       if (!namespace) {
         return;
       }
       const listeners = this.getVirtualListeners(eventType, namespace);
-      this.bubble(
-        eventType,
-        event.target as Element,
-        rootElement,
-        cycleEvent,
-        listeners,
-        namespace,
-        namespace.length - 1,
-        true,
-        passive
-      );
-
-      this.bubble(
+      const phase = (useCapture: boolean) => this.bubble(
         eventType,
-        event.target as Element,
+        target,
         rootElement,
         cycleEvent,
         listeners,
         namespace,
         namespace.length - 1,
-        false,
+        useCapture,
         passive
       );
+      phase(true);
+      phase(false);
     } else {
-      this.putNonBubblingListener(
-        eventType,
-        event.target as Element,
-        true,
-        passive
-      );
-      this.doBubbleStep(
-        eventType,
-        event.target as Element,
-        rootElement,
-        cycleEvent,
-        this.virtualNonBubblingListener,
-        true,
-        passive
-      );
-
-      this.putNonBubblingListener(
-        eventType,
-        event.target as Element,
-        false,
-        passive
-      );
-      this.doBubbleStep(
-        eventType,
-        event.target as Element,
-        rootElement,
-        cycleEvent,
-        this.virtualNonBubblingListener,
-        false,
-        passive
-      );
+      const phase = (useCapture: boolean) => {
+        this.putNonBubblingListener(eventType, target, useCapture, passive);
+        this.doBubbleStep(
+          eventType,
+          target,
+          rootElement,
+          cycleEvent,
+          this.virtualNonBubblingListener,
+          useCapture,
+          passive
+        );
+      };
+      phase(true);
+      phase(false);
       event.stopPropagation();
     }
   }
@@ -505,24 +447,34 @@ export class EventDelegator {
       );
     }
 
+    // G-356: a moved element bubbles to its home (an element of its component), not to the
+    // element it was moved into (G-381: upOf counts the homes on the event)
+    const up = upOf(elm, event) as Element;
     let newRoot: Element | undefined = rootElement;
     let newIndex = index;
+    let newListeners = listeners;
     if (elm === rootElement) {
-      if (index >= 0 && namespace[index].type === 'sibling') {
-        newRoot = this.isolateModule.getElement(namespace, index);
-        newIndex--;
-      } else {
+      if (index < 0 || !up) {
         return;
       }
+      // the parent scope's root that contains elm (G-144: it may have several)
+      newRoot = this.isolateModule.getRootElement(up);
+      newIndex--;
+      // G-145: like the browser, the event bubbles out of a total scope (a child
+      // component) to the parent's own elements; their listeners live in the parent's
+      // scope, and isDirectlyInScope keeps them from matching the child's elements
+      if (namespace[index].type === 'total') {
+        newListeners = this.getVirtualListeners(eventType, namespace.slice(0, index));
+      }
     }
 
-    if (elm.parentNode && newRoot) {
+    if (up && newRoot) {
       this.bubble(
         eventType,
-        elm.parentNode as Element,
+        up,
         newRoot,
         event,
-        listeners,
+        newListeners,
         namespace,
         newIndex,
         useCapture,
@@ -562,8 +514,7 @@ export class EventDelegator {
         if (
           !event.propagationHasBeenStopped &&
           dest.scopeChecker.isDirectlyInScope(elm) &&
-          ((sel !== '' && elm.matches(sel)) ||
-            (sel === '' && elm === rootElement))
+          (sel ? elm.matches(sel) : elm === rootElement)
         ) {
           preventDefaultConditional(
             event,