modernize ember debug (#2475)

Author: patricklx

ember-cli-build.js

@@ -104,22 +104,32 @@ module.exports = function (defaults) {
 
   let emberDebug = 'ember_debug';
 
+  let sourceMap = new Funnel('node_modules/source-map/dist', {
+    files: ['source-map.js'],
+    destDir: 'ember-debug/deps',
+  });
+
+  const backburner = new Funnel('node_modules/backburner.js/dist/es6', {
+    files: ['backburner.js'],
+    destDir: 'ember-debug/deps',
+  });
+
   emberDebug = new Funnel(emberDebug, {
     destDir: 'ember-debug',
     include: ['**/*.js'],
-    exclude: [
-      'vendor/loader.js',
-      'vendor/source-map.js',
-      'vendor/startup-wrapper.js',
-    ],
+    exclude: ['vendor/startup-wrapper.js', 'vendor/loader.js'],
   });
 
+  emberDebug = mergeTrees([sourceMap, backburner, emberDebug]);
+
   emberDebug = new Babel(emberDebug, {
     moduleIds: true,
     getModuleId: getRelativeModulePath,
     plugins: [
+      ['@babel/plugin-transform-class-properties'],
+      ['@babel/plugin-transform-class-static-block'],
       ['module-resolver', { resolvePath: resolveRelativeModulePath }],
-      ['transform-es2015-modules-amd', { noInterop: true }],
+      ['@babel/plugin-transform-modules-amd', { noInterop: true }],
     ],
   });
 
@@ -149,21 +159,12 @@ module.exports = function (defaults) {
     ],
   });
 
-  let sourceMap = new Funnel('ember_debug', {
-    srcDir: 'vendor',
-    files: ['source-map.js'],
-  });
-
   const loader = new Funnel('ember_debug', {
     srcDir: 'vendor',
     files: ['loader.js'],
   });
 
-  sourceMap = map(sourceMap, '**/*.js', function (content) {
-    return `(function() {\n${content}\n}());`;
-  });
-
-  emberDebug = mergeTrees([loader, startupWrapper, sourceMap, emberDebug]);
+  emberDebug = mergeTrees([startupWrapper, emberDebug, loader]);
 
   emberDebug = concatFiles(emberDebug, {
     headerFiles: ['loader.js'],

ember_debug/adapters/basic.js

@@ -1,22 +1,15 @@
 /* eslint no-console: 0 */
 import { onReady } from 'ember-debug/utils/on-ready';
+import BaseObject from '../utils/base-object';
 
-import { A } from 'ember-debug/utils/ember/array';
-import EmberObject, { computed } from 'ember-debug/utils/ember/object';
-import { Promise, resolve } from 'ember-debug/utils/rsvp';
-
-export default EmberObject.extend({
+export default class BasicAdapter extends BaseObject {
   init() {
-    resolve(this.connect(), 'ember-inspector').then(
-      () => {
-        this.onConnectionReady();
-      },
-      null,
-      'ember-inspector'
-    );
+    Promise.resolve(this.connect()).then(() => {
+      this.onConnectionReady();
+    }, null);
 
     this._messageCallbacks = [];
-  },
+  }
 
   /**
    * Uses the current build's config module to determine
@@ -25,17 +18,21 @@ export default EmberObject.extend({
    * @property environment
    * @type {String}
    */
-  environment: computed(function () {
-    return requireModule('ember-debug/config')['default'].environment;
-  }),
+  get environment() {
+    if (!this.__environment) {
+      this.__environment =
+        requireModule('ember-debug/config')['default'].environment;
+    }
+    return this.__environment;
+  }
 
   debug() {
     return console.debug(...arguments);
-  },
+  }
 
   log() {
     return console.log(...arguments);
-  },
+  }
 
   /**
    * A wrapper for `console.warn`.
@@ -44,14 +41,14 @@ export default EmberObject.extend({
    */
   warn() {
     return console.warn(...arguments);
-  },
+  }
 
   /**
     Used to send messages to EmberExtension
 
     @param {Object} type the message to the send
   */
-  sendMessage(/* options */) {},
+  sendMessage(/* options */) {}
 
   /**
     Register functions to be called
@@ -61,7 +58,7 @@ export default EmberObject.extend({
   */
   onMessageReceived(callback) {
     this._messageCallbacks.push(callback);
-  },
+  }
 
   /**
     Inspect a specific DOM node. This usually
@@ -74,13 +71,13 @@ export default EmberObject.extend({
 
     @param {Node} node
   */
-  inspectNode(/* node */) {},
+  inspectNode(/* node */) {}
 
   _messageReceived(message) {
     this._messageCallbacks.forEach((callback) => {
       callback(message);
     });
-  },
+  }
 
   /**
    * Handle an error caused by EmberDebug.
@@ -109,7 +106,7 @@ export default EmberObject.extend({
       this.warn('EmberDebug has errored:');
       throw error;
     }
-  },
+  }
 
   /**
 
@@ -131,26 +128,24 @@ export default EmberObject.extend({
           }
         }, 10);
       });
-    }, 'ember-inspector');
-  },
+    });
+  }
 
   willDestroy() {
-    this._super();
+    super.willDestroy();
     clearInterval(this.interval);
-  },
+  }
 
-  _isReady: false,
-  _pendingMessages: computed(function () {
-    return A();
-  }),
+  _isReady = false;
+  _pendingMessages = [];
 
   send(options) {
     if (this._isReady) {
       this.sendMessage(...arguments);
     } else {
       this._pendingMessages.push(options);
     }
-  },
+  }
 
   /**
     Called when the connection is set up.
@@ -160,7 +155,7 @@ export default EmberObject.extend({
     // Flush pending messages
     const messages = this._pendingMessages;
     messages.forEach((options) => this.sendMessage(options));
-    messages.clear();
+    messages.length = 0;
     this._isReady = true;
-  },
-});
+  }
+}

ember_debug/adapters/bookmarklet.js

@@ -1,15 +1,15 @@
 import BasicAdapter from './basic';
 
-export default BasicAdapter.extend({
+export default class extends BasicAdapter {
   init() {
-    this._super();
+    super.init();
     this._listen();
-  },
+  }
 
   sendMessage(options) {
     options = options || {};
     window.emberInspector.w.postMessage(options, window.emberInspector.url);
-  },
+  }
 
   _listen() {
     window.addEventListener('message', (e) => {
@@ -27,5 +27,5 @@ export default BasicAdapter.extend({
         unloading: true,
       });
     };
-  },
-});
+  }
+}

ember_debug/adapters/chrome.js

@@ -1,2 +1,2 @@
 import WebExtension from './web-extension';
-export default WebExtension.extend();
+export default class extends WebExtension {}

ember_debug/adapters/firefox.js

@@ -1,23 +1,24 @@
 /* eslint no-empty:0 */
 import WebExtension from './web-extension';
 
-export default WebExtension.extend({
+export default class extends WebExtension {
   debug() {
     // WORKAROUND: temporarily workaround issues with firebug console object:
     // - https://github.com/tildeio/ember-extension/issues/94
     // - https://github.com/firebug/firebug/pull/109
     // - https://code.google.com/p/fbug/issues/detail?id=7045
     try {
-      this._super(...arguments);
+      super.debug(...arguments);
     } catch (e) {}
-  },
+  }
+
   log() {
     // WORKAROUND: temporarily workaround issues with firebug console object:
     // - https://github.com/tildeio/ember-extension/issues/94
     // - https://github.com/firebug/firebug/pull/109
     // - https://code.google.com/p/fbug/issues/detail?id=7045
     try {
-      this._super(...arguments);
+      super.log(...arguments);
     } catch (e) {}
-  },
-});
+  }
+}

ember_debug/adapters/web-extension.js

@@ -7,25 +7,20 @@ import { run } from 'ember-debug/utils/ember/runloop';
 const { isArray } = Array;
 const { keys } = Object;
 
-export default BasicAdapter.extend({
+export default class extends BasicAdapter {
   init() {
-    this.set('_channel', new MessageChannel());
-    this.set('_chromePort', this.get('_channel.port1'));
-
-    this._super(...arguments);
-  },
+    this._channel = new MessageChannel();
+    this._chromePort = this._channel?.port1;
+    super.init();
+  }
 
   connect() {
     const channel = this._channel;
-    return this._super(...arguments).then(
-      () => {
-        window.postMessage('debugger-client', '*', [channel.port2]);
-        this._listen();
-      },
-      null,
-      'ember-inspector'
-    );
-  },
+    return super.connect().then(() => {
+      window.postMessage('debugger-client', '*', [channel.port2]);
+      this._listen();
+    }, null);
+  }
 
   sendMessage(options = {}) {
     // If prototype extensions are disabled, `Ember.A()` arrays
@@ -34,7 +29,7 @@ export default BasicAdapter.extend({
     // native array.
     options = deepClone(options);
     this._chromePort.postMessage(options);
-  },
+  }
 
   /**
    * Open the devtools "Elements" and select an DOM node.
@@ -65,8 +60,8 @@ export default BasicAdapter.extend({
 
     window[name] = node;
 
-    this.get('namespace.port').send('view:inspectDOMNode', { name });
-  },
+    this.namespace.port.send('view:inspectDOMNode', { name });
+  }
 
   _listen() {
     let chromePort = this._chromePort;
@@ -95,8 +90,8 @@ export default BasicAdapter.extend({
     });
 
     chromePort.start();
-  },
-});
+  }
+}
 
 // On some older Ember version `Ember.ENV.EXTEND_PROTOTYPES` is not
 // guarenteed to be an object. While this code only support 3.4+ (all

ember_debug/adapters/websocket.js

@@ -1,18 +1,15 @@
 import BasicAdapter from './basic';
 import { onReady } from 'ember-debug/utils/on-ready';
-
-import { computed } from 'ember-debug/utils/ember/object';
 import { run } from 'ember-debug/utils/ember/runloop';
-import { Promise } from 'ember-debug/utils/rsvp';
 
-export default BasicAdapter.extend({
+export default class extends BasicAdapter {
   sendMessage(options = {}) {
     this.socket.emit('emberInspectorMessage', options);
-  },
+  }
 
-  socket: computed(function () {
+  get socket() {
     return window.EMBER_INSPECTOR_CONFIG.remoteDebugSocket;
-  }),
+  }
 
   _listen() {
     this.socket.on('emberInspectorMessage', (message) => {
@@ -35,11 +32,11 @@ export default BasicAdapter.extend({
         });
       }
     });
-  },
+  }
 
   _disconnect() {
     this.socket.removeAllListeners('emberInspectorMessage');
-  },
+  }
 
   connect() {
     return new Promise((resolve, reject) => {
@@ -58,9 +55,9 @@ export default BasicAdapter.extend({
     }).then(() => {
       this._listen();
     });
-  },
+  }
 
   willDestroy() {
     this._disconnect();
-  },
-});
+  }
+}