Reverse event optimisation PR that breaks Safari

Author: plegner

src/elements.ts

@@ -43,20 +43,12 @@ interface EventListenerOptions {
 export abstract class BaseView<T extends HTMLElement|SVGElement> {
   readonly _data: Obj<unknown> = {};
   readonly _events: Obj<EventCallback[]> = {};
-  _mutationObserver: MutationObserver|undefined;
-  private readonly _mutationObserverCallbacks: Obj<EventCallback[]> = {};
   readonly type: string = 'default';
   model?: Observable;
-  isDeleted?: boolean;
 
-  constructor(readonly __el: T) {
+  constructor(readonly _el: T) {
     // Store a reference to this element within the native browser DOM.
-    __el._view = this;
-  }
-
-  get _el() {
-    if (this.isDeleted) console.error('Trying to access a deleted element:', this);
-    return this.__el;
+    _el._view = this;
   }
 
   get id() {
@@ -606,33 +598,12 @@ export abstract class BaseView<T extends HTMLElement|SVGElement> {
     }
   }
 
-  /** Removes listeners and model data from el */
-  private unsubscribe() {
-    this.isDeleted = true;
-    this.model?.clear();
-    this._mutationObserver?.disconnect();
-    this.offAll();
-
-    for (const child of this.children) {
-      child.unsubscribe();
-    }
-
-    /* Disabled temporarily
-    // hack to avoid TS notification
-    // about setting undefined value to readonly properties
-    delete (this as any)._el;
-    delete (this as any)._data;
-    delete (this as any)._events;
-
-    // remove mutation observer instances
-    delete (this as any)._mutationObserver;
-    delete (this as any)._mutationObserverCallbacks; */
-  }
-
   /** Removes this element. */
   remove() {
     this.detach();
-    this.unsubscribe();
+    // TODO Remove event listeners (including children)
+    // TODO Remove model bindings (including children)
+    // this._el = this._data = this._events = undefined;
   }
 
   /** Removes all children of this element. */
@@ -678,24 +649,13 @@ export abstract class BaseView<T extends HTMLElement|SVGElement> {
    */
   off(events: string, callback?: EventCallback) {
     for (const e of words(events)) {
-      if (callback) {
-        this._events[e] = this._events[e].filter(fn => fn !== callback);
-        unbindEvent(this, e, callback);
-        continue;
+      if (e in this._events) {
+        this._events[e] = callback ? this._events[e].filter(fn => fn !== callback) : [];
       }
-      for (const eventsCallback of this._events[e]) unbindEvent(this, e, eventsCallback);
+      unbindEvent(this, e, callback);
     }
   }
 
-  /**
-   * Removes all event listeners from this element
-   */
-  offAll() {
-    Object.entries(this._events).forEach(([eventName, callbacks]) => {
-      callbacks.forEach((callback) => this.off(eventName, callback));
-    });
-  }
-
   /** Triggers a specific event on this element. */
   trigger(events: string, args: unknown = {}) {
     for (const e of words(events)) {
@@ -713,41 +673,28 @@ export abstract class BaseView<T extends HTMLElement|SVGElement> {
     const keyNames = new Set(words(keys));
     const event = options?.up ? 'keyup' : 'keydown';
 
-    const eventFunction = (e: KeyboardEvent) => {
+    const target = (this._el === document.body ? document : this._el) as HTMLElement;
+    target.addEventListener(event, (e: KeyboardEvent) => {
       const key = keyCode(e);
       if (options?.meta ? !e.ctrlKey && !e.metaKey : e.ctrlKey || e.metaKey) return;
       if (!key || !keyNames.has(key)) return;
       if (document.activeElement !== this._el && document.activeElement?.shadowRoot?.activeElement !== this._el && Browser.formIsActive) return;
       callback(e as KeyboardEvent, key);
-    };
-
-    const target = (this._el === document.body ? document : this._el) as HTMLElement;
-    target.addEventListener(event, eventFunction);
-
-    if (!(event in this._events)) this._events[event] = [];
-    this._events[event].push(eventFunction);
+    });
   }
 
-  /**
-   * Bind an listener when element attribute changed
-   */
   onAttr(name: string, callback: (value: string, initial?: boolean) => void) {
-    if (!this._mutationObserver) {
-      this._mutationObserver = new MutationObserver((mutations) => {
-        for (const m of mutations) {
-          if (m.type === 'attributes' && m.attributeName === name) {
-            for (const attributeCallback of this._mutationObserverCallbacks[name]) {
-              attributeCallback(this.attr(name));
-            }
-          }
-        }
-      });
-      this._mutationObserver.observe(this._el, {attributes: true});
-    }
+    // TODO Reuse existing observers, remove events, disconnect when deleting.
 
-    if (!(name in this._mutationObserverCallbacks)) this._mutationObserverCallbacks[name] = [];
-    this._mutationObserverCallbacks[name].push(callback);
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === 'attributes' && m.attributeName === name) {
+          callback(this.attr(name));
+        }
+      }
+    });
 
+    observer.observe(this._el, {attributes: true});
     callback(this.attr(name), true);
   }
 
@@ -1199,7 +1146,7 @@ export class WindowView extends HTMLBaseView<HTMLHtmlElement|HTMLBodyElement> {
   }
 
   get scrollTop() {
-    return window.scrollY;
+    return window.pageYOffset;
   }
 
   set scrollTop(y) {
@@ -1208,7 +1155,7 @@ export class WindowView extends HTMLBaseView<HTMLHtmlElement|HTMLBodyElement> {
   }
 
   get scrollLeft() {
-    return window.scrollX;
+    return window.pageXOffset;
   }
 
   set scrollLeft(x) {