WIP: migrate to typescript

ember-phone-input/package.json

@@ -62,11 +62,13 @@
     "@glint/core": "^1.2.0",
     "@glint/environment-ember-loose": "^1.2.0",
     "@glint/template": "^1.2.0",
+    "@glimmer/component": "1.1.2",
     "@rollup/plugin-babel": "6.0.3",
     "@tsconfig/ember": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "concurrently": "8.2.1",
+    "ember-source": "5.3.0",
     "ember-template-lint": "5.11.2",
     "eslint": "7.32.0",
     "eslint-config-prettier": "9.0.0",

ember-phone-input/src/components/phone-input.hbs

@@ -7,6 +7,6 @@
   {{did-insert this.onDidInsert}}
   {{did-update this.onDidUpdate @country @number}}
   {{will-destroy this.onDestroy}}
-  data-test-loading-iti={{this.loadingIti}}
+  data-test-loading-iti={{this.isLoadingIti}}
   type={{this.type}}
 />

ember-phone-input/src/components/phone-input.js → ember-phone-input/src/components/phone-input.ts

@@ -7,6 +7,10 @@ import { action } from '@ember/object';
 import 'intl-tel-input/build/css/intlTelInput.css';
 import '../styles/styles.css';
 
+declare global {
+  var intlTelInputUtils: any;
+}
+
 /**
   A phone-input component. Usage:
   ```hbs
@@ -29,10 +33,68 @@ import '../styles/styles.css';
   @public
 */
 
-export default class PhoneInputComponent extends Component {
-  @service phoneInput;
+export interface PhoneInputArgs {
+  country: string;
+  number: string | null;
+  disabled: boolean;
+  required: boolean;
+  autocomplete: string | null;
+  allowDropdown: boolean;
+  autoPlaceholder: string;
+  customPlaceholder: string | null;
+  initialCountry: string;
+  onlyCountries: string[];
+  preferredCountries: string[];
+  separateDialCode: boolean;
+  update: (number: string | null, meta: any) => void;
+  onError: (error: any) => void;
+}
+
+export interface PhoneInputSignature {
+  Element: HTMLInputElement;
+  Args: PhoneInputArgs;
+}
 
+export default class PhoneInputComponent extends Component<PhoneInputSignature> {
+  @service phoneInput: any;
+
+  isLoadingIti = false;
   type = 'tel';
+  _iti: any = null;
+  element: HTMLInputElement | undefined;
+  update: (number: string | null, meta: any) => void;
+
+  constructor(owner: any, args: any) {
+    super(owner, args);
+
+    /**
+     * You have to implement this function to update the `number`.
+     * @argument update
+     * @param {string} number The international phoneNumber
+     * @param {Object} metadata The phoneNumber metadata
+     * @param {string} metadata.extension The extension part of the current number, so if the number was '+1 (702) 123-1234 ext. 12345' this would return '12345'.
+     * @param {Object} metadata.selectedCountryData The country data for the currently selected flag.
+     * @param {boolean} metadata.isValidNumber The validity of the current `phoneNumber`.
+     */
+
+    this.update = this.args.update || function (): void {};
+
+    if (this.customPlaceholder) {
+      assert(
+        '`customPlaceholder` must be of type string',
+        typeof this.customPlaceholder === 'string'
+      );
+    }
+
+    const validAutoPlaceholder = ['polite', 'aggressive', 'off'].includes(
+      this.autoPlaceholder
+    );
+
+    assert(
+      "`autoPlaceholder` possible values are 'polite', 'aggressive' and 'off'",
+      validAutoPlaceholder
+    );
+  }
 
   /**
    * It will force the selected country. Set the country by it's country code.
@@ -42,7 +104,7 @@ export default class PhoneInputComponent extends Component {
    * @argument country
    * @type {string}
    */
-  get country() {
+  get country(): string {
     return this.args.country || '';
   }
 
@@ -52,7 +114,7 @@ export default class PhoneInputComponent extends Component {
    * @argument number
    * @type {string|null}
    */
-  get number() {
+  get number(): string | null {
     return this.args.number || null;
   }
 
@@ -62,7 +124,7 @@ export default class PhoneInputComponent extends Component {
    * @argument disabled
    * @type {boolean}
    */
-  get disabled() {
+  get disabled(): boolean {
     return this.args.disabled || false;
   }
 
@@ -72,7 +134,7 @@ export default class PhoneInputComponent extends Component {
    * @argument required
    * @type {boolean}
    */
-  get required() {
+  get required(): boolean {
     return this.args.required || false;
   }
 
@@ -82,7 +144,7 @@ export default class PhoneInputComponent extends Component {
    * @argument autocomplete
    * @type {string|null}
    */
-  get autocomplete() {
+  get autocomplete(): string | null {
     return this.args.autocomplete || null;
   }
 
@@ -91,7 +153,7 @@ export default class PhoneInputComponent extends Component {
    * @argument allowDropdown
    * @type {boolean}
    */
-  get allowDropdown() {
+  get allowDropdown(): boolean {
     return isPresent(this.args.allowDropdown) ? this.args.allowDropdown : true;
   }
 
@@ -103,7 +165,7 @@ export default class PhoneInputComponent extends Component {
    * @type {string}
    */
 
-  get autoPlaceholder() {
+  get autoPlaceholder(): string {
     return this.args.autoPlaceholder || 'polite';
   }
 
@@ -113,7 +175,7 @@ export default class PhoneInputComponent extends Component {
    * @argument customPlaceholder
    * @type {string|null}
    */
-  get customPlaceholder() {
+  get customPlaceholder(): string | null {
     return this.args.customPlaceholder || null;
   }
 
@@ -123,7 +185,7 @@ export default class PhoneInputComponent extends Component {
    * @argument initialCountry
    * @type {string}
    */
-  get initialCountry() {
+  get initialCountry(): string {
     return this.args.initialCountry || '';
   }
 
@@ -134,16 +196,16 @@ export default class PhoneInputComponent extends Component {
    * @type {Array}
    */
 
-  get onlyCountries() {
-    return this.args.onlyCountries || [];
+  get onlyCountries(): string[] {
+    return this.args.onlyCountries || Array<string>();
   }
 
   /**
    * Specify the countries to appear at the top of the list.
    * @argument preferredCountries
    * @type {Array}
    */
-  get preferredCountries() {
+  get preferredCountries(): string[] {
     return this.args.preferredCountries || ['us', 'gb'];
   }
 
@@ -152,48 +214,14 @@ export default class PhoneInputComponent extends Component {
    * @argument separateDialCode
    * @type {boolean}
    */
-  get separateDialCode() {
+  get separateDialCode(): boolean {
     return this.args.separateDialCode || false;
   }
 
-  _iti = null;
-
-  constructor() {
-    super(...arguments);
-
-    /**
-     * You have to implement this function to update the `number`.
-     * @argument update
-     * @param {string} number The international phoneNumber
-     * @param {Object} metadata The phoneNumber metadata
-     * @param {string} metadata.extension The extension part of the current number, so if the number was '+1 (702) 123-1234 ext. 12345' this would return '12345'.
-     * @param {Object} metadata.selectedCountryData The country data for the currently selected flag.
-     * @param {boolean} metadata.isValidNumber The validity of the current `phoneNumber`.
-     */
-
-    this.update = this.args.update || function () {};
-
-    if (this.customPlaceholder) {
-      assert(
-        '`customPlaceholder` must be of type string',
-        typeof this.customPlaceholder === 'string'
-      );
-    }
-
-    const validAutoPlaceholder = ['polite', 'aggressive', 'off'].includes(
-      this.autoPlaceholder
-    );
-
-    assert(
-      "`autoPlaceholder` possible values are 'polite', 'aggressive' and 'off'",
-      validAutoPlaceholder
-    );
-  }
-
   @action
-  onInput(event) {
+  onInput(event?: any): boolean {
     const internationalPhoneNumber =
-      this._iti?.getNumber() ?? event?.target.value;
+      this._iti?.getNumber() ?? event?.target?.value;
 
     var meta = this._metaData(this._iti);
     this.update(internationalPhoneNumber, meta);
@@ -207,13 +235,13 @@ export default class PhoneInputComponent extends Component {
   }
 
   @action
-  onDidInsert(element) {
+  onDidInsert(element: any) {
     this.element = element;
     this._loadAndSetup();
   }
 
   @action
-  onDestroy(element) {
+  onDestroy(element: any) {
     this._iti?.destroy();
     element.removeEventListener('countrychange', this._onCountryChange);
   }
@@ -239,8 +267,8 @@ export default class PhoneInputComponent extends Component {
         this._onCountryChange.bind(this)
       );
     } catch (error) {
-      if (this.onError) {
-        this.onError(error);
+      if (this.args.onError) {
+        this.args.onError(error);
       }
     } finally {
       if (!this.isDestroying && !this.isDestroyed) {
@@ -274,7 +302,7 @@ export default class PhoneInputComponent extends Component {
       separateDialCode
     } = this;
 
-    let options = {
+    let options: any = {
       autoInsertDialCode: false,
       nationalMode: true,
       allowDropdown,
@@ -286,7 +314,7 @@ export default class PhoneInputComponent extends Component {
     };
 
     if (customPlaceholder) {
-      options.customPlaceholder = () => customPlaceholder;
+      options.customPlaceholder = (): string => customPlaceholder;
     }
 
     let _iti = this.phoneInput.intlTelInput(this.element, options);
@@ -303,7 +331,7 @@ export default class PhoneInputComponent extends Component {
     this.update(this.number, this._metaData(_iti));
   }
 
-  _metaData(iti) {
+  _metaData(iti: any) {
     if (!iti) {
       // Libraries may rely on always receiving an object
       return {};

ember-phone-input/src/unpublished-developer-types/index.d.ts

@@ -0,0 +1,11 @@
+import '@glint/environment-ember-loose';
+import 'ember-source/types';
+import 'ember-source/types/preview';
+import type RenderModifiersRegistry from '@ember/render-modifiers/template-registry';
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry extends RenderModifiersRegistry {
+    // Add any registry entries from other addons here that your addon itself uses (in non-strict mode templates)
+    // See https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons
+  }
+}