Convert adapters and port to TS, remove Evented from port (#2617)

Author: RobbieTheWagner

app/components/date-property-field.js app/components/date-property-field.ts

@@ -1,16 +1,16 @@
 import { scheduleOnce } from '@ember/runloop';
 import { action } from '@ember/object';
-import DatePicker from 'ember-inspector/components/ember-flatpickr';
+import DatePicker from 'ember-flatpickr/components/ember-flatpickr';
 
 export default class DatePropertyFieldComponent extends DatePicker {
   @action
-  onInsert(element) {
+  onInsert(element: HTMLInputElement) {
     super.onInsert(element);
 
     scheduleOnce('afterRender', this, this._openFlatpickr);
   }
 
   _openFlatpickr() {
-    this.flatpickrRef.open();
+    this.flatpickrRef?.open();
   }
 }

app/config/environment.d.ts

@@ -3,10 +3,12 @@
  *    import config from 'my-app/config/environment'
  */
 declare const config: {
+  emberVersionsSupported: [fromVersion: string, tillVersion: string];
   environment: string;
   modulePrefix: string;
   podModulePrefix: string;
   locationType: 'history' | 'hash' | 'none' | 'auto';
+  previousEmberVersionsSupported: Array<string>;
   rootURL: string;
   APP: Record<string, unknown>;
 };

app/services/adapters/basic.js app/services/adapters/basic.ts

@@ -14,22 +14,25 @@
 import Service, { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import type { AnyFn } from 'ember/-private/type-utils';
 import config from 'ember-inspector/config/environment';
+import type PortService from '../port';
+import type { Message } from '../port';
 
-export default class Basic extends Service {
-  @service port;
+export default abstract class Basic extends Service {
+  @service declare port: PortService;
 
-  @tracked canOpenResource = false;
+  _messageCallbacks: Array<AnyFn>;
   name = 'basic';
 
+  @tracked canOpenResource = false;
+
   /**
    * Called when the adapter is created (when
    * the inspector app boots).
-   *
-   * @method init
    */
-  init() {
-    super.init(...arguments);
+  constructor(properties?: object) {
+    super(properties);
     this._messageCallbacks = [];
     this._checkVersion();
   }
@@ -41,7 +44,6 @@ export default class Basic extends Service {
    * Ember version and needs to switch to an inspector version
    * that does.
    *
-   * @method _checkVersion
    * @private
    */
   _checkVersion() {
@@ -73,35 +75,35 @@ export default class Basic extends Service {
    * to switch to an older/new inspector version
    * that supports this Ember version.
    *
-   * @method onVersionMismatch
-   * @param {String} neededVersion (The version to go to)
+   * @param _neededVersion (The version to go to)
    */
-  onVersionMismatch() {}
+  onVersionMismatch(_neededVersion?: string) {}
 
   /**
     Used to send messages to EmberDebug
 
-    @param type {Object} the message to the send
+    @param _message the message to send
   **/
-  sendMessage() {}
+  sendMessage(_message: Partial<Message>) {}
 
   /**
     Register functions to be called
     when a message from EmberDebug is received
   **/
-  onMessageReceived(callback) {
+  onMessageReceived(callback: AnyFn) {
     this._messageCallbacks.push(callback);
   }
 
-  _messageReceived(...args) {
+  _messageReceived(...args: Array<any>) {
     this._messageCallbacks.forEach((callback) => {
       callback(...args);
     });
   }
 
+  abstract reloadTab(): void;
   // Called when the "Reload" is clicked by the user
   willReload() {}
-  openResource /* file, line */() {}
+  openResource(_file: string, _line: number) {}
 
   @action
   refreshPage() {
@@ -126,15 +128,14 @@ export default class Basic extends Service {
  * 0 if version1 == version2
  * 1 if version1 > version2
  *
- * @param {String} version1
- * @param {String} version2
- * @return {Boolean} result of the comparison
+ * @return result of the comparison
  */
-function compareVersion(version1, version2) {
-  version1 = cleanupVersion(version1).split('.');
-  version2 = cleanupVersion(version2).split('.');
+function compareVersion(version1: string, version2: string) {
+  const v1 = cleanupVersion(version1).split('.');
+  const v2 = cleanupVersion(version2).split('.');
   for (let i = 0; i < 3; i++) {
-    let compared = compare(+version1[i], +version2[i]);
+    // @ts-expect-error TODO: refactor this to make TS happy
+    let compared = compare(+v1[i], +v2[i]);
     if (compared !== 0) {
       return compared;
     }
@@ -143,11 +144,11 @@ function compareVersion(version1, version2) {
 }
 
 /* Remove -alpha, -beta, etc from versions */
-function cleanupVersion(version) {
+function cleanupVersion(version: string) {
   return version.replace(/-.*/g, '');
 }
 
-function compare(val, number) {
+function compare(val: number, number: number) {
   if (val === number) {
     return 0;
   } else if (val < number) {

app/services/adapters/bookmarklet.js app/services/adapters/bookmarklet.ts

@@ -1,43 +1,34 @@
 /* eslint-disable no-useless-escape */
-import { computed } from '@ember/object';
-
 import BasicAdapter from './basic';
+import type { Message } from '../port';
 
 export default class Bookmarklet extends BasicAdapter {
   name = 'bookmarklet';
 
   /**
    * Called when the adapter is created.
-   *
-   * @method init
    */
-  init() {
+  constructor(properties?: object) {
+    super(properties);
     this._connect();
-    return super.init(...arguments);
   }
 
-  @computed
   get inspectedWindow() {
     return window.opener || window.parent;
   }
 
-  @computed
   get inspectedWindowURL() {
     return loadPageVar('inspectedWindowURL');
   }
 
-  sendMessage(options) {
-    options = options || {};
-    this.inspectedWindow.postMessage(options, this.inspectedWindowURL);
+  sendMessage(message?: Partial<Message>) {
+    this.inspectedWindow.postMessage(message ?? {}, this.inspectedWindowURL);
   }
 
   /**
    * Redirect to the correct inspector version.
-   *
-   * @method onVersionMismatch
-   * @param {String} goToVersion
    */
-  onVersionMismatch(goToVersion) {
+  onVersionMismatch(goToVersion: string) {
     this.sendMessage({ name: 'version-mismatch', version: goToVersion });
     window.location.href = `../panes-${goToVersion.replace(
       /\./g,
@@ -47,7 +38,7 @@ export default class Bookmarklet extends BasicAdapter {
 
   _connect() {
     window.addEventListener('message', (e) => {
-      let message = e.data;
+      let message = e.data as Message;
       if (e.origin !== this.inspectedWindowURL) {
         return;
       }
@@ -62,7 +53,7 @@ export default class Bookmarklet extends BasicAdapter {
   }
 }
 
-function loadPageVar(sVar) {
+function loadPageVar(sVar: string) {
   return decodeURI(
     window.location.search.replace(
       new RegExp(

app/services/adapters/chrome.js app/services/adapters/chrome.ts

@@ -5,8 +5,7 @@ export default class Chrome extends WebExtension {
   name = 'chrome';
   @tracked canOpenResource = true;
 
-  openResource(file, line) {
-    /*global chrome */
+  openResource(file: string, line: number) {
     // For some reason it opens the line after the one specified
     chrome.devtools.panels.openResource(file, line - 1);
   }

app/services/adapters/firefox.js app/services/adapters/firefox.ts

@@ -1,34 +1,30 @@
-/* globals chrome */
-import { computed } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 import BasicAdapter from './basic';
 import config from 'ember-inspector/config/environment';
+import type { Message } from '../port';
 
-let emberDebug = null;
+let emberDebug: string | null = null;
 
 export default class WebExtension extends BasicAdapter {
   @tracked canOpenResource = false;
   name = 'web-extension';
 
   /**
    * Called when the adapter is created.
-   *
-   * @method init
    */
-  init() {
+  constructor(properties?: object) {
+    super(properties);
+
     this._connect();
     this._handleReload();
     this._setThemeColors();
 
     Promise.resolve().then(() => this._sendEmberDebug());
-
-    return super.init(...arguments);
   }
 
-  sendMessage(options) {
-    options = options || {};
-    this._chromePort.postMessage(options);
+  sendMessage(message?: Partial<Message>) {
+    this._chromePort.postMessage(message ?? {});
   }
 
   _sendEmberDebug() {
@@ -44,17 +40,16 @@ export default class WebExtension extends BasicAdapter {
     this.onMessageReceived((message, sender) => {
       if (message === 'ember-content-script-ready') {
         this.sendMessage({
+          frameId: sender.frameId,
           from: 'devtools',
+          tabId: chrome.devtools.inspectedWindow.tabId,
           type: 'inject-ember-debug',
           value: url,
-          tabId: chrome.devtools.inspectedWindow.tabId,
-          frameId: sender.frameId,
         });
       }
     });
   }
 
-  @computed
   get _chromePort() {
     return chrome.runtime.connect();
   }
@@ -77,17 +72,20 @@ export default class WebExtension extends BasicAdapter {
     let self = this;
     chrome.devtools.network.onNavigated.addListener(function () {
       self._injectDebugger();
-      location.reload(true);
+      location.reload();
     });
   }
 
   _injectDebugger() {
     loadEmberDebug().then((emberDebug) => {
-      chrome.devtools.inspectedWindow.eval(emberDebug, (success, error) => {
-        if (success === undefined && error) {
-          throw error;
-        }
-      });
+      chrome.devtools.inspectedWindow.eval(
+        emberDebug as string,
+        (success, error) => {
+          if (success === undefined && error) {
+            throw error;
+          }
+        },
+      );
     });
   }
 
@@ -108,11 +106,8 @@ export default class WebExtension extends BasicAdapter {
 
   /**
    * Open the devtools "Elements" or "Sources" tab and select a specific DOM node or function.
-   *
-   * @method inspectJSValue
-   * @param {String} name
    */
-  inspectJSValue(name) {
+  inspectJSValue(name: string) {
     chrome.devtools.inspectedWindow.eval(`
       inspect(window[${JSON.stringify(name)}]);
       delete window[${JSON.stringify(name)}];
@@ -121,11 +116,8 @@ export default class WebExtension extends BasicAdapter {
 
   /**
    * Redirect to the correct inspector version.
-   *
-   * @method onVersionMismatch
-   * @param {String} goToVersion
    */
-  onVersionMismatch(goToVersion) {
+  onVersionMismatch(goToVersion: string) {
     window.location.href = `../panes-${goToVersion.replace(
       /\./g,
       '-',
@@ -138,14 +130,16 @@ export default class WebExtension extends BasicAdapter {
   */
   reloadTab() {
     loadEmberDebug().then((emberDebug) => {
-      chrome.devtools.inspectedWindow.reload({ injectedScript: emberDebug });
+      chrome.devtools.inspectedWindow.reload({
+        injectedScript: emberDebug as string,
+      });
     });
   }
 }
 
 function loadEmberDebug() {
   let minimumVersion = config.emberVersionsSupported[0].replace(/\./g, '-');
-  let xhr;
+  let xhr: XMLHttpRequest;
 
   return new Promise((resolve) => {
     if (!emberDebug) {

app/services/adapters/web-extension.js app/services/adapters/web-extension.ts

@@ -1,20 +1,23 @@
 import { run } from '@ember/runloop';
 import BasicAdapter from './basic';
+import type { Message } from '../port';
 
 export default class Websocket extends BasicAdapter {
-  init() {
-    super.init();
+  socket: any;
+
+  constructor(properties?: object) {
+    super(properties);
+    // @ts-expect-error TODO: figure out how to type this stuff
     this.socket = window.EMBER_INSPECTOR_CONFIG.remoteDebugSocket;
     this._connect();
   }
 
-  sendMessage(options) {
-    options = options || {};
-    this.socket.emit('emberInspectorMessage', options);
+  sendMessage(message?: Partial<Message>) {
+    this.socket.emit('emberInspectorMessage', message ?? {});
   }
 
   _connect() {
-    this.socket.on('emberInspectorMessage', (message) => {
+    this.socket.on('emberInspectorMessage', (message: Message) => {
       run(() => {
         this._messageReceived(message);
       });