Revert "Drop support for websocket adapter" (#2762)

Author: mansona

packages/ember-debug/adapters/websocket.js

@@ -0,0 +1,63 @@
+import BasicAdapter from './basic.js';
+import { onReady } from '../utils/on-ready.js';
+import { run } from '../lib/ember/runloop.js';
+
+export default class Websocket extends BasicAdapter {
+  sendMessage(options = {}) {
+    this.socket.emit('emberInspectorMessage', options);
+  }
+
+  get socket() {
+    return window.EMBER_INSPECTOR_CONFIG.remoteDebugSocket;
+  }
+
+  _listen() {
+    this.socket.on('emberInspectorMessage', (message) => {
+      // We should generally not be run-wrapping here. Starting a runloop in
+      // ember-debug will cause the inspected app to revalidate/rerender. We
+      // are generally not intending to cause changes to the rendered output
+      // of the app, so this is generally unnecessary, and in big apps this
+      // could be quite slow. There is nothing special about the `view:*`
+      // messages – I (GC) just happened to have reviewed all of them recently
+      // and can be quite sure that they don't need the runloop. We should
+      // audit the rest of them and see if we can remove the else branch. I
+      // think we most likely can. In the limited cases (if any) where the
+      // runloop is needed, the callback code should just do the wrapping
+      // themselves.
+      if (message.type.startsWith('view:')) {
+        this._messageReceived(message);
+      } else {
+        run(() => {
+          this._messageReceived(message);
+        });
+      }
+    });
+  }
+
+  _disconnect() {
+    this.socket.removeAllListeners('emberInspectorMessage');
+  }
+
+  connect() {
+    return new Promise((resolve, reject) => {
+      onReady(() => {
+        if (this.isDestroyed) {
+          reject();
+        }
+        const EMBER_INSPECTOR_CONFIG = window.EMBER_INSPECTOR_CONFIG;
+        if (
+          typeof EMBER_INSPECTOR_CONFIG === 'object' &&
+          EMBER_INSPECTOR_CONFIG.remoteDebugSocket
+        ) {
+          resolve();
+        }
+      });
+    }).then(() => {
+      this._listen();
+    });
+  }
+
+  willDestroy() {
+    this._disconnect();
+  }
+}

packages/ember-debug/entrypoints/websocket-debug.js

@@ -0,0 +1,11 @@
+import hasEmber from './utils/has-ember.js';
+
+await hasEmber();
+
+// These dynamic imports are intentionally after the above await hasEmber() call.
+// We cannot move these to a regular import because we want to wait for Ember to
+// be available on page before we can initialise the module tree.
+const startInspector = await import('../lib/start-inspector.js');
+const adapter = await import('../adapters/websocket.js');
+
+startInspector.default(adapter.default);

packages/ember-inspector/app/services/adapters/websocket.js

@@ -0,0 +1,34 @@
+import { run } from '@ember/runloop';
+import BasicAdapter from './basic';
+
+export default class Websocket extends BasicAdapter {
+  constructor() {
+    super(...arguments);
+    this._connect();
+  }
+
+  get socket() {
+    return window.EMBER_INSPECTOR_CONFIG.remoteDebugSocket;
+  }
+
+  sendMessage(message) {
+    this.socket.emit('emberInspectorMessage', message ?? {});
+  }
+
+  _connect() {
+    this.socket.on('emberInspectorMessage', (message) => {
+      // eslint-disable-next-line ember/no-runloop
+      run(() => {
+        this._messageReceived(message);
+      });
+    });
+  }
+
+  _disconnect() {
+    this.socket.removeAllListeners('emberInspectorMessage');
+  }
+
+  willDestroy() {
+    this._disconnect();
+  }
+}

packages/ember-inspector/ember-cli-build.js

@@ -101,21 +101,23 @@ module.exports = function (defaults) {
     'dist',
   );
 
-  for (const dist of ['basic', 'chrome', 'firefox', 'bookmarklet']) {
-    const entryPoint = concatFiles(
-      new Funnel(emberDebug, {
-        destDir: 'ember-debug',
-        include: [`${dist}-debug.js`],
-      }),
-      {
-        inputFiles: ['**/*.js'],
-        outputFile: '/ember_debug.js',
-        sourceMapConfig: { enabled: false },
-      },
-    );
+  ['basic', 'chrome', 'firefox', 'bookmarklet', 'websocket'].forEach(
+    function (dist) {
+      let entryPoint = concatFiles(
+        new Funnel(emberDebug, {
+          destDir: 'ember-debug',
+          include: [`${dist}-debug.js`],
+        }),
+        {
+          inputFiles: ['**/*.js'],
+          outputFile: '/ember_debug.js',
+          sourceMapConfig: { enabled: false },
+        },
+      );
 
-    emberDebugs[dist] = mergeTrees([emberDebug, entryPoint]);
-  }
+      emberDebugs[dist] = mergeTrees([emberDebug, entryPoint]);
+    },
+  );
 
   let tree = app.toTree();
 
@@ -241,6 +243,7 @@ module.exports = function (defaults) {
     chrome,
     firefox,
     bookmarklet,
+    websocket: mergeTrees([tree, emberDebugs.websocket]),
     basic: mergeTrees([tree, emberDebugs.basic]),
   };
   Object.keys(dists).forEach(function (key) {
@@ -255,6 +258,20 @@ module.exports = function (defaults) {
     });
   });
 
+  // Add {{ remote-port }} to the head
+  // so that the websocket addon can replace it.
+  dists.websocket = replace(dists.websocket, {
+    files: ['index.html'],
+    patterns: [
+      {
+        match: /<head>/,
+        replacement: '<head>\n{{ remote-port }}\n',
+      },
+    ],
+  });
+
+  let output;
+
   if (env === 'test') {
     // `ember test` expects the index.html file to be in the
     // output directory.
@@ -268,16 +285,18 @@ module.exports = function (defaults) {
         },
       ],
     });
-
-    return mergeTrees([dists.basic, dists.chrome]);
+    output = mergeTrees([dists.basic, dists.chrome]);
+  } else {
+    dists.testing = mergeTrees([dists.basic, dists.chrome]);
+
+    output = mergeTrees([
+      mv(dists.bookmarklet, 'bookmarklet'),
+      mv(dists.firefox, 'firefox'),
+      mv(dists.chrome, 'chrome'),
+      mv(dists.websocket, 'websocket'),
+      mv(dists.testing, 'testing'),
+    ]);
   }
 
-  dists.testing = mergeTrees([dists.basic, dists.chrome]);
-
-  return mergeTrees([
-    mv(dists.bookmarklet, 'bookmarklet'),
-    mv(dists.firefox, 'firefox'),
-    mv(dists.chrome, 'chrome'),
-    mv(dists.testing, 'testing'),
-  ]);
+  return output;
 };