Consistent typing of $els in components

Allow them to be passed as null or undefined everywhere.
nimiq · Sep 6, 2024 · 50a7e74 · 50a7e74
1 parent a15fcda
commit 50a7e74
Show file tree

Hide file tree

Showing 21 changed files with 48 additions and 45 deletions.
diff --git a/src/components/AddressInfo.js b/src/components/AddressInfo.js
@@ -14,8 +14,9 @@ class AddressInfo { // eslint-disable-line no-unused-vars
 
     /**
      * Inserts this AddressInfo into $el overwriting the original content of $el.
-     * @param {HTMLElement} $el
+     * @param {?HTMLElement} [$el]
      * @param {boolean} [isDetailedView = false]
+     * @returns {HTMLElement}
      */
     renderTo($el, isDetailedView = false) {
         $el = $el || document.createElement('div');
@@ -94,5 +95,7 @@ class AddressInfo { // eslint-disable-line no-unused-vars
             const copyableAddress = new Copyable(this._addressInfo.userFriendlyAddress, $address);
             $el.appendChild(copyableAddress.getElement());
         }
+
+        return $el;
     }
 }
diff --git a/src/components/BalanceDistributionBar.js b/src/components/BalanceDistributionBar.js
@@ -15,7 +15,7 @@ class BalanceDistributionBar { // eslint-disable-line no-unused-vars
      *  leftFiatRate: number,
      *  rightFiatRate: number,
      * }} settings
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor(settings, $el) {
         this.$el = BalanceDistributionBar._createElement($el);
@@ -74,7 +74,7 @@ class BalanceDistributionBar { // eslint-disable-line no-unused-vars
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/Copyable.js b/src/components/Copyable.js
@@ -4,7 +4,7 @@
 class Copyable {
     /**
      * @param {string} text
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor(text, $el) {
         this._text = text;
@@ -37,7 +37,7 @@ class Copyable {
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/DownloadLoginFile.js b/src/components/DownloadLoginFile.js
@@ -9,7 +9,7 @@
 
 class DownloadLoginFile extends Nimiq.Observable {
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor($el) {
         super();

diff --git a/src/components/FileImporter.js b/src/components/FileImporter.js
@@ -38,7 +38,7 @@ class FileImporter extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLLabelElement} [$el]
+     * @param {?HTMLLabelElement} [$el]
      * @param {boolean} [displayFile = true]
      */
     constructor($el, displayFile = true) {
@@ -63,7 +63,7 @@ class FileImporter extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLLabelElement} [$el]
+     * @param {?HTMLLabelElement} [$el]
      * @returns {HTMLLabelElement}
      */
     static _createElement($el) {

diff --git a/src/components/Identicon.js b/src/components/Identicon.js
@@ -3,7 +3,7 @@
 class Identicon { // eslint-disable-line no-unused-vars
     /**
      * @param {string} [address]
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor(address, $el) {
         this._address = address;
@@ -31,7 +31,7 @@ class Identicon { // eslint-disable-line no-unused-vars
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/LanguagePicker.js b/src/components/LanguagePicker.js
@@ -2,15 +2,15 @@
 
 class LanguagePicker { // eslint-disable-line no-unused-vars
     /**
-     * @param {HTMLSelectElement} [$el]
+     * @param {?HTMLSelectElement} [$el]
      */
     constructor($el) {
         this.$el = $el || LanguagePicker._createElement($el);
     }
 
     /**
      * Produces a select element that the user can chose an available language from.
-     * @param {HTMLSelectElement} [$el]
+     * @param {?HTMLSelectElement} [$el]
      * @returns {HTMLSelectElement}
      */
     static _createElement($el) {

diff --git a/src/components/LoginFileAnimation.js b/src/components/LoginFileAnimation.js
@@ -3,7 +3,7 @@
 
 class LoginFileAnimation {
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor($el) {
         this._color = 0;
@@ -58,7 +58,7 @@ class LoginFileAnimation {
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/LoginFileIcon.js b/src/components/LoginFileIcon.js
@@ -3,7 +3,7 @@
 class LoginFileIcon { // eslint-disable-line no-unused-vars
     /**
      *
-     * @param {HTMLDivElement?} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor($el) {
         this.colorClass = '';

diff --git a/src/components/PasswordBox.js b/src/components/PasswordBox.js
@@ -19,7 +19,7 @@
 class PasswordBox extends Nimiq.Observable {
     // eslint-disable-next-line valid-jsdoc
     /**
-     * @param {HTMLFormElement} [$el]
+     * @param {?HTMLFormElement} [$el]
      * @param {Partial<PasswordBoxOptions>} [options]
      */
     constructor($el, options = {}) {
@@ -41,7 +41,7 @@ class PasswordBox extends Nimiq.Observable {
 
         this.$el.classList.toggle('hide-input', this.options.hideInput);
 
-        this._passwordInput = new PasswordInput(this.$el.querySelector('[password-input]'));
+        this._passwordInput = new PasswordInput(/** @type {HTMLElement} */(this.$el.querySelector('[password-input]')));
         this._passwordInput.on(PasswordInput.Events.VALID, isValid => this._onInputChangeValidity(isValid));
 
         this.setMinLength(this.options.minLength);
@@ -60,7 +60,7 @@ class PasswordBox extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLFormElement | undefined} $el
+     * @param {?HTMLFormElement | undefined} $el
      * @param {PasswordBoxOptions} options
      * @returns {HTMLFormElement}
      */

diff --git a/src/components/PasswordInput.js b/src/components/PasswordInput.js
@@ -5,10 +5,10 @@
 
 class PasswordInput extends Nimiq.Observable {
     /**
-     * @param {?HTMLElement} $el
+     * @param {?HTMLElement} [$el]
      * @param {object} [options]
-     * @param {number=} [options.maxLength = Infinity]
-     * @param {string=} [options.placeholder = '••••••••']
+     * @param {number} [options.maxLength = Infinity]
+     * @param {string} [options.placeholder = '••••••••']
      * @param {'current-password' | 'new-password' | undefined} [options.autocomplete = 'current-password']
      */
     constructor($el, options = {}) {

diff --git a/src/components/PasswordSetterBox.js b/src/components/PasswordSetterBox.js
@@ -8,7 +8,7 @@
 class PasswordSetterBox extends Nimiq.Observable {
     // eslint-disable-next-line valid-jsdoc
     /**
-     * @param {?HTMLFormElement} $el
+     * @param {?HTMLFormElement} [$el]
      * @param {{bgColor?: string, buttonI18nTag?: string}} [options]
      */
     constructor($el, options = {}) {
@@ -27,7 +27,7 @@ class PasswordSetterBox extends Nimiq.Observable {
         this.$el = PasswordSetterBox._createElement($el, this.options);
 
         this._passwordInput = new PasswordInput(
-            this.$el.querySelector('[password-input]'),
+            /** @type {HTMLElement} */ (this.$el.querySelector('[password-input]')),
             {
                 maxLength: PasswordSetterBox.PASSWORD_MAX_LENGTH,
                 autocomplete: 'new-password',
@@ -52,7 +52,7 @@ class PasswordSetterBox extends Nimiq.Observable {
     }
 
     /**
-     * @param {?HTMLFormElement} $el
+     * @param {?HTMLFormElement | undefined} $el
      * @param {{bgColor: string, buttonI18nTag: string}} options
      * @returns {HTMLFormElement}
      */

diff --git a/src/components/PaymentInfoLine.js b/src/components/PaymentInfoLine.js
@@ -23,7 +23,7 @@
 class PaymentInfoLine { // eslint-disable-line no-unused-vars
     /**
      * @param {PaymentInfo} paymentInfo
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      */
     constructor(paymentInfo, $el) {
         this.paymentInfo = paymentInfo;
@@ -56,7 +56,7 @@ class PaymentInfoLine { // eslint-disable-line no-unused-vars
 
     /**
      * @private
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      * @returns {HTMLElement}
      */
     static _createElement($el) {

diff --git a/src/components/PolygonAddressInfo.js b/src/components/PolygonAddressInfo.js
@@ -17,7 +17,7 @@ class PolygonAddressInfo { // eslint-disable-line no-unused-vars
 
     /**
      * Inserts this AddressInfo into $el overwriting the original content of $el.
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      * @returns {HTMLElement}
      */
     renderTo($el) {

diff --git a/src/components/ProgressIndicator.js b/src/components/ProgressIndicator.js
@@ -3,7 +3,7 @@
 
 class ProgressIndicator extends Nimiq.Observable { // eslint-disable-line no-unused-vars
     /**
-     * @param {?HTMLElement} $el
+     * @param {?Element | undefined} $el
      * @param {number} numberOfSteps
      * @param {number} [currentStep]
      */
@@ -14,9 +14,9 @@ class ProgressIndicator extends Nimiq.Observable { // eslint-disable-line no-unu
     }
 
     /**
-     * @param {?HTMLElement} $el
+     * @param {?Element | undefined} $el
      * @param {number} numberOfSteps
-     * @returns {HTMLElement}
+     * @returns {Element}
      */
     static _createElement($el, numberOfSteps) {
         $el = $el || document.createElement('div');
@@ -33,12 +33,12 @@ class ProgressIndicator extends Nimiq.Observable { // eslint-disable-line no-unu
         return $el;
     }
 
-    /** @returns {HTMLElement} @deprecated */
+    /** @returns {Element} @deprecated */
     getElement() {
         return this.$el;
     }
 
-    /** @type {HTMLElement} */
+    /** @type {Element} */
     get element() {
         return this.$el;
     }

diff --git a/src/components/QrVideoScanner.js b/src/components/QrVideoScanner.js
@@ -6,7 +6,7 @@
 class QrVideoScanner extends Nimiq.Observable {
     // eslint-disable-next-line valid-jsdoc
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @param {(result: string) => boolean} [validator]
      * @param {number} [reportFrequency = 7000]
      */
@@ -110,7 +110,7 @@ class QrVideoScanner extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/RecoveryWords.js b/src/components/RecoveryWords.js
@@ -7,7 +7,7 @@
 class RecoveryWords extends Nimiq.Observable {
     /**
      *
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      * @param {boolean} [providesInput]
      */
     constructor($el, providesInput) {
@@ -40,7 +40,7 @@ class RecoveryWords extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      * @param {boolean} input
      * @returns {HTMLElement}
      * */
@@ -160,7 +160,7 @@ class RecoveryWords extends Nimiq.Observable {
 
     /**
      * @param {number} index
-     * @param {?string} paste
+     * @param {string} [paste]
      */
     _setFocusToNextInput(index, paste) {
         index = Math.max(index, 0);

diff --git a/src/components/TabWidthSelector.js b/src/components/TabWidthSelector.js
@@ -4,7 +4,7 @@
 
 class TabWidthSelector extends Nimiq.Observable {
     /**
-     * @param {?HTMLElement} $el
+     * @param {?HTMLElement} [$el]
      */
     constructor($el) {
         super();

diff --git a/src/components/Timer.js b/src/components/Timer.js
@@ -15,7 +15,7 @@ class Timer extends Nimiq.Observable {
     /**
      * @param {number} startTime
      * @param {number} endTime
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      */
     constructor(startTime, endTime, $el) {
         super();
@@ -52,7 +52,7 @@ class Timer extends Nimiq.Observable {
 
     /**
      * @private
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      * @returns {HTMLElement}
      */
     static _createElement($el) {

diff --git a/src/components/ValidateWords.js b/src/components/ValidateWords.js
@@ -4,7 +4,7 @@
 
 class ValidateWords extends Nimiq.Observable {
     /**
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      */
     constructor($el) {
         super();
@@ -29,7 +29,7 @@ class ValidateWords extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      * @returns {HTMLElement}
      */
     static _createElement($el) {

diff --git a/src/request/create/IdenticonSelector.js b/src/request/create/IdenticonSelector.js
@@ -5,7 +5,7 @@
 
 class IdenticonSelector extends Nimiq.Observable {
     /**
-     * @param {HTMLElement} $el
+     * @param {?HTMLElement | undefined} $el
      * @param {string} keyPath
      */
     constructor($el, keyPath) {
@@ -15,7 +15,7 @@ class IdenticonSelector extends Nimiq.Observable {
 
         this.$el = IdenticonSelector._createElement($el);
 
-        /** @type {{ [address: string]: Nimiq.Entropy}} */
+        /** @type {{ [address: string]: Nimiq.Entropy }} */
         this._volatileEntropies = {};
 
         this.$identicons = /** @type {HTMLElement} */ (this.$el.querySelector('.identicons'));
@@ -25,7 +25,7 @@ class IdenticonSelector extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLElement} [$el]
+     * @param {?HTMLElement} [$el]
      *
      * @returns {HTMLElement}
      */