added new event listeners cleaner

Author: swarty

src/elements.ts

@@ -43,8 +43,11 @@ 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) {
     // Store a reference to this element within the native browser DOM.
@@ -628,9 +631,27 @@ export abstract class BaseView<T extends HTMLElement|SVGElement> {
     }
   }
 
+  /** Removes listeners and model data from el */
+  private unsubscribe() {
+    this.isDeleted = true;
+    if (!Browser.isSafari) this.model?.clear();
+    this._mutationObserver?.disconnect();
+    this.offAll();
+
+    for (const child of this.children) {
+      child.unsubscribe();
+    }
+
+    delete (this as any)._data;
+    delete (this as any)._events;
+    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;
@@ -679,13 +700,27 @@ export abstract class BaseView<T extends HTMLElement|SVGElement> {
    */
   off(events: string, callback?: EventCallback) {
     for (const e of words(events)) {
-      if (e in this._events) {
-        this._events[e] = callback ? this._events[e].filter(fn => fn !== callback) : [];
+      if (callback) {
+        this._events[e] = this._events[e].filter(fn => fn !== callback);
+        unbindEvent(this, e, callback);
+        continue;
       }
-      unbindEvent(this, e, callback);
+      if (this._events[e]) {
+        for (const eventsCallback of this._events[e]) unbindEvent(this, e, eventsCallback);
+      }
+      this._events[e] = [];
     }
   }
 
+  /**
+   * 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)) {
@@ -703,28 +738,40 @@ export abstract class BaseView<T extends HTMLElement|SVGElement> {
     const keyNames = new Set(words(keys));
     const event = options?.up ? 'keyup' : 'keydown';
 
-    const target = (this._el === document.body ? document : this._el) as HTMLElement;
-    target.addEventListener(event, (e: KeyboardEvent) => {
+    const eventFunction = (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) {
-    // TODO Reuse existing observers, remove events, disconnect when deleting.
-
-    const observer = new MutationObserver((mutations) => {
-      for (const m of mutations) {
-        if (m.type === 'attributes' && m.attributeName === name) {
-          callback(this.attr(name));
+    if (!this._mutationObserver) {
+      this._mutationObserver = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          if (m.type === 'attributes' && m.attributeName && m.attributeName in this._mutationObserverCallbacks) {
+            for (const attributeCallback of this._mutationObserverCallbacks[m.attributeName]) {
+              attributeCallback(this.attr(m.attributeName));
+            }
+          }
         }
-      }
-    });
+      });
+      this._mutationObserver.observe(this._el, {attributes: true});
+    }
 
-    observer.observe(this._el, {attributes: true});
+    if (!(name in this._mutationObserverCallbacks)) this._mutationObserverCallbacks[name] = [];
+    this._mutationObserverCallbacks[name].push(callback);
     callback(this.attr(name), true);
   }
 

src/observable.ts

@@ -3,6 +3,8 @@
 // (c) Mathigon
 // =============================================================================
 
+import {Browser} from './browser';
+
 
 type Callback<T> = (state: T, initial?: boolean) => void;
 type Expr<T> = (state: T) => void;
@@ -111,7 +113,7 @@ export function observe<T extends object = any>(state: T, parentModel?: Observab
   }
 
   function assign(changes: Partial<T>, clear?: boolean) {
-    if (clear) state = {} as T;
+    if (clear && !Browser.isSafari) state = {} as T;
     batch(() => {
       for (const [key, value] of Object.entries(changes)) {
         if (!(key in previous)) (previous as any)[key] = (state as any)[key];
@@ -127,10 +129,10 @@ export function observe<T extends object = any>(state: T, parentModel?: Observab
   }
 
   function clear() {
-    state = {} as T;
     callbackMap.clear();
     computedKeys.clear();
     watchAllCallbacks.clear();
+    if (!Browser.isSafari) state = {} as T;
     lastKey = 0;
   }