refactor: Replace old event handler bindings with new initialize callback rebinding

Author: Sub-Xaero

dist/utilities/elements.d.ts

@@ -1,8 +1,8 @@
-export declare function isHTMLLinkElement(element: Element): element is HTMLLinkElement;
-export declare function isHTMLFormElement(element: Element): element is HTMLFormElement;
-export declare function isHTMLInputElement(element: Element): element is HTMLInputElement;
-export declare function isHTMLImageElement(element: Element): element is HTMLImageElement;
-export declare function isElementCheckable(element: Element): element is HTMLInputElement & {
-    checked: boolean;
-};
+export declare function isHTMLLinkElement(element: Element): element is HTMLLinkElement;
+export declare function isHTMLFormElement(element: Element): element is HTMLFormElement;
+export declare function isHTMLInputElement(element: Element): element is HTMLInputElement;
+export declare function isHTMLImageElement(element: Element): element is HTMLImageElement;
+export declare function isElementCheckable(element: Element): element is HTMLInputElement & {
+    checked: boolean;
+};
 //# sourceMappingURL=elements.d.ts.map

src/auto_submit_form_controller.ts

@@ -2,20 +2,22 @@ import {BaseController} from "./base_controller";
 
 export class AutoSubmitFormController extends BaseController {
 
-  private boundHandler = this.handler.bind(this);
+  initialize() {
+    this.handler = this.handler.bind(this);
+  }
 
   connect() {
-    (this.element as HTMLElement).querySelectorAll("input, select, textarea").forEach(el => el.addEventListener("change", this.boundHandler));
+    (this.element as HTMLElement).querySelectorAll("input, select, textarea").forEach(el => el.addEventListener("change", this.handler));
   }
 
   disconnect() {
-    (this.element as HTMLElement).querySelectorAll("input, select, textarea").forEach(el => el.removeEventListener("change", this.boundHandler));
+    (this.element as HTMLElement).querySelectorAll("input, select, textarea").forEach(el => el.removeEventListener("change", this.handler));
   }
 
   private handler(e: Event) {
     // this.element.submit()
     // Moved to this to support remote forms and CSRF properly
-    this.element.dispatchEvent(
+    (this.element as HTMLElement).dispatchEvent(
       new CustomEvent("submit", {
         bubbles: true,
         cancelable: true,

src/autosize_controller.ts

@@ -3,23 +3,25 @@ import {BaseController} from "./base_controller";
 
 export class AutosizeController extends BaseController {
 
-  private boundHandler = this.handler.bind(this);
+  initialize() {
+    this._handler = this._handler.bind(this);
+  }
 
   connect() {
     let target = this.element as HTMLTextAreaElement;
     target.style.resize = "none";
     target.style.boxSizing = "border-box";
-    target.addEventListener("input", this.boundHandler);
-    target.addEventListener("focus", this.boundHandler);
+    target.addEventListener("input", this._handler);
+    target.addEventListener("focus", this._handler);
     useWindowResize(this);
-    requestAnimationFrame(this.boundHandler);
+    requestAnimationFrame(this._handler);
   }
 
   windowResize() {
-    this.handler();
+    this._handler();
   }
 
-  private handler() {
+  private _handler() {
     this.autosize(this.element as HTMLTextAreaElement);
   };
 

src/char_count_controller.ts

@@ -15,30 +15,32 @@ export class CharCountController extends BaseController {
   declare errorClass: string;
   declare hasErrorClass: boolean;
 
-  boundHandler = this.updateCharCount.bind(this);
+  initialize() {
+    this._updateCharCount = this._updateCharCount.bind(this);
+  }
 
   connect() {
-    this.updateCharCount();
-    this.inputTarget.addEventListener("input", this.boundHandler);
+    this._updateCharCount();
+    this.inputTarget.addEventListener("input", this._updateCharCount);
   }
 
   disconnect() {
-    this.inputTarget.removeEventListener("input", this.boundHandler);
+    this.inputTarget.removeEventListener("input", this._updateCharCount);
   }
 
-  updateCharCount() {
+  private _updateCharCount() {
     let charCount = this.inputTarget.value.length;
     this.outputTarget.innerText = charCount.toString();
     if (this.hasErrorClass) {
-      if (this.isValidCount(charCount)) {
+      if (this._isValidCount(charCount)) {
         this.outputTarget.classList.remove(this.errorClass);
       } else {
         this.outputTarget.classList.add(this.errorClass);
       }
     }
   }
 
-  isValidCount(count: number) {
+  private _isValidCount(count: number) {
     let min = 0;
     let max = 99999;
 

src/detect_dirty_controller.ts

@@ -5,7 +5,9 @@ export class DetectDirtyController extends BaseController {
 
   initialValue: string | boolean | null = null;
 
-  boundHandler = this.handler.bind(this);
+  initialize() {
+    this.checkDirty = this.checkDirty.bind(this);
+  }
 
   connect() {
     let element = this.element as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
@@ -14,14 +16,14 @@ export class DetectDirtyController extends BaseController {
     } else {
       this.initialValue = element.value;
     }
-    element.addEventListener("input", this.boundHandler);
-    element.addEventListener("change", this.boundHandler);
+    element.addEventListener("input", this.checkDirty);
+    element.addEventListener("change", this.checkDirty);
   }
 
   disconnect() {
     let element = this.element as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    element.removeEventListener("input", this.boundHandler);
-    element.removeEventListener("change", this.boundHandler);
+    element.removeEventListener("input", this.checkDirty);
+    element.removeEventListener("change", this.checkDirty);
   }
 
   restore() {
@@ -33,7 +35,7 @@ export class DetectDirtyController extends BaseController {
     }
   }
 
-  private handler(event?: Event) {
+  private checkDirty(event?: Event) {
     let element = this.element as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
     if (this.initialValue !== element.value) {

src/limited_selection_checkboxes_controller.ts

@@ -11,16 +11,16 @@ export class LimitedSelectionCheckboxesController extends BaseController {
   declare readonly maxValue: number;
   declare readonly messageValue: string;
 
-  maxSelections = 0;
-
-  boundHandleInputs = this.handleInputs.bind(this);
+  initialize() {
+    this.handleInputs = this.handleInputs.bind(this);
+  }
 
   connect() {
-    this.inputTargets.forEach((el) => el.addEventListener("change", this.boundHandleInputs));
+    this.inputTargets.forEach((el) => el.addEventListener("change", this.handleInputs));
   }
 
   disconnect() {
-    this.inputTargets.forEach((el) => el.removeEventListener("change", this.boundHandleInputs));
+    this.inputTargets.forEach((el) => el.removeEventListener("change", this.handleInputs));
   }
 
   handleInputs(event: Event) {

src/password_confirm_controller.ts

@@ -10,17 +10,19 @@ export class PasswordConfirmController extends BaseController {
   declare readonly errorClass: string;
   declare readonly hasErrorClass: boolean;
 
-  private boundCheckPasswordsMatch = this.checkPasswordsMatch.bind(this);
+  initialize() {
+    this.checkPasswordsMatch = this.checkPasswordsMatch.bind(this);
+  }
 
   connect() {
-    this.passwordTargets.forEach((el) => el.addEventListener("change", this.boundCheckPasswordsMatch));
+    this.passwordTargets.forEach((el) => el.addEventListener("change", this.checkPasswordsMatch));
   }
 
   disconnect() {
-    this.passwordTargets.forEach((el) => el.removeEventListener("change", this.boundCheckPasswordsMatch));
+    this.passwordTargets.forEach((el) => el.removeEventListener("change", this.checkPasswordsMatch));
   }
 
-  private allPasswordsMatch() {
+  private allPasswordsMatch(): boolean {
     let values = new Set(this.passwordTargets.map(el => el.value));  // Create a unique set of the password values
     return values.has("") || values.size == 1; // If any of the passwords are still blank, or there is only one distinct password value (i.e. they all are the same)
   }

src/responsive_iframe_controller.ts

@@ -9,14 +9,16 @@ interface ResponsiveIframeMessage {
 
 export class ResponsiveIframeWrapperController extends BaseController {
 
-  boundMessageReceived = this.messageReceived.bind(this);
+  initialize() {
+    this.messageReceived = this.messageReceived.bind(this);
+  }
 
   connect() {
-    window.addEventListener("message", this.boundMessageReceived);
+    window.addEventListener("message", this.messageReceived);
   }
 
   disconnect() {
-    window.removeEventListener("message", this.boundMessageReceived);
+    window.removeEventListener("message", this.messageReceived);
   }
 
   messageReceived(message: MessageEvent<ResponsiveIframeMessage>) {

src/word_count_controller.ts

@@ -15,15 +15,17 @@ export class WordCountController extends BaseController {
   declare errorClass: string;
   declare hasErrorClass: boolean;
 
-  boundHandler = this.updateWordCount.bind(this);
+  initialize() {
+    this.updateWordCount = this.updateWordCount.bind(this);
+  }
 
   connect() {
     this.updateWordCount();
-    this.inputTarget.addEventListener("input", this.boundHandler);
+    this.inputTarget.addEventListener("input", this.updateWordCount);
   }
 
   disconnect() {
-    this.inputTarget.removeEventListener("input", this.boundHandler);
+    this.inputTarget.removeEventListener("input", this.updateWordCount);
   }
 
   updateWordCount() {