ember-native-devtools 1.0.2 → 3.0.0

package/src/inspector-server.mjs

@@ -0,0 +1,206 @@
+import express from 'express';
+#!/usr/bin/env node
+
+import { createServer } from 'http';
+import { Server } from 'socket.io';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Creates and starts an Ember Inspector server
+ * @param {Object} options - Server configuration
+ * @param {number} options.port - Port to listen on (default: 9229)
+ * @param {string} options.host - Host to bind to (default: 'localhost')
+ * @param {boolean} options.verbose - Enable verbose logging (default: false)
+ * @returns {Object} Server instance with stop method
+ */
+export function createInspectorServer(options = {}) {
+  const {
+    port = process.env.PORT || 9229,
+    host = process.env.HOST || 'localhost',
+    verbose = false
+  } = options;
+
+  const app = express();
+  const httpServer = createServer(app);
+  const io = new Server(httpServer, {
+    cors: {
+      origin: '*',
+      methods: ['GET', 'POST']
+    }
+  });
+
+  // Try to serve ember-inspector UI from node_modules
+  console.log('dirname', __dirname);
+  const inspectorPath = path.resolve(require.resolve('ember-inspector/ember-cli-build.js'), '..', 'dist', 'websocket');
+  
+  // Middleware to inject WebSocket setup into index.html
+  app.get('/', (req, res, next) => {
+    const fs = require('fs');
+    const indexPath = path.join(inspectorPath, 'index.html');
+    
+    fs.readFile(indexPath, 'utf8', (err, html) => {
+      if (err) {
+        return next(err);
+      }
+      
+      // Create the WebSocket client wrapper script
+      const wsScript = `
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+      (function() {
+        // Connect to the inspector server as UI client
+        const socket = io({
+          query: { type: 'ui' }
+        });
+        
+        // Create EventEmitter-like wrapper for Socket.IO
+        const socketWrapper = {
+          _listeners: {},
+          
+          on: function(eventName, callback) {
+            if (!this._listeners[eventName]) {
+              this._listeners[eventName] = [];
+              
+              // Set up Socket.IO listener
+              socket.on(eventName, (data) => {
+                this._listeners[eventName].forEach(cb => cb(data));
+              });
+            }
+            this._listeners[eventName].push(callback);
+          },
+          
+          removeAllListeners: function(eventName) {
+            if (eventName) {
+              delete this._listeners[eventName];
+              socket.off(eventName);
+            } else {
+              Object.keys(this._listeners).forEach(name => {
+                socket.off(name);
+              });
+              this._listeners = {};
+            }
+          },
+          
+          emit: function(eventName, data) {
+            socket.emit(eventName, data);
+          }
+        };
+        
+        // Set up the global config for Ember Inspector
+        window.EMBER_INSPECTOR_CONFIG = {
+          remoteDebugSocket: socketWrapper
+        };
+        
+        console.log('Ember Inspector WebSocket client initialized');
+      })();
+    </script>
+`;
+      
+      // Replace the {{ remote-port }} placeholder with our script
+      const modifiedHtml = html.replace('{{ remote-port }}', wsScript);
+      
+      res.setHeader('Content-Type', 'text/html');
+      res.send(modifiedHtml);
+    });
+  });
+  
+  app.use(express.static(inspectorPath));
+
+  // Store connections
+  const connections = {
+    ui: null,
+    app: null
+  };
+
+  const log = (...args) => {
+    if (verbose) {
+      console.log('[Inspector Server]', ...args);
+    }
+  };
+
+  io.on('connection', (socket) => {
+    const clientType = socket.handshake.query.type;
+    log(`Client connected: ${socket.id} (type: ${clientType})`);
+
+    if (clientType === 'ui') {
+      connections.ui = socket;
+      console.log('✅ Inspector UI connected');
+    } else if (clientType === 'app') {
+      connections.app = socket;
+      console.log('✅ Ember app connected');
+    }
+
+    // Forward emberInspectorMessage between UI and app
+    socket.on('emberInspectorMessage', (message) => {
+      log(`Message from ${clientType}:`, message.type);
+
+      if (clientType === 'ui' && connections.app) {
+        connections.app.emit('emberInspectorMessage', message);
+      } else if (clientType === 'app' && connections.ui) {
+        connections.ui.emit('emberInspectorMessage', message);
+      } else {
+        log(`Cannot forward message - ${clientType === 'ui' ? 'app' : 'ui'} not connected`);
+      }
+    });
+
+    socket.on('disconnect', () => {
+      log(`${clientType} disconnected`);
+      if (clientType === 'ui') {
+        connections.ui = null;
+        console.log('⚠️  Inspector UI disconnected');
+      }
+      if (clientType === 'app') {
+        connections.app = null;
+        console.log('⚠️  Ember app disconnected');
+      }
+    });
+
+    socket.on('error', (error) => {
+      console.error(`❌ Socket error (${clientType}):`, error);
+    });
+  });
+
+  return new Promise((resolve, reject) => {
+    httpServer.listen(port, host, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      console.log('');
+      console.log('🔍 Ember Inspector Server');
+      console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+      console.log(`📡 Server running at: http://${host}:${port}`);
+      console.log(`🌐 Inspector UI: http://${host}:${port}`);
+      console.log(`🔌 WebSocket: ws://${host}:${port}`);
+      console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+      console.log('');
+      console.log('Waiting for connections...');
+      console.log('');
+
+      resolve({
+        server: httpServer,
+        io,
+        stop: () => {
+          return new Promise((resolve) => {
+            io.close();
+            httpServer.close(() => {
+              console.log('Server stopped');
+              resolve();
+            });
+          });
+        }
+      });
+    });
+  });
+}
+
+createInspectorServer({ verbose: true }).catch((err) => {
+  console.error('Failed to start server:', err);
+  process.exit(1);
+});

package/src/setup-inspector.js

@@ -0,0 +1,147 @@
+import { io } from 'socket.io-client';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+
+/**
+ * Sets up Ember Inspector for a Node.js Ember application
+ * @param {Object} options - Configuration options
+ * @param {string} options.serverUrl - Inspector server URL (default: 'http://localhost:9229')
+ * @param {string} options.appName - Application name for identification
+ * @param {boolean} options.autoConnect - Auto-connect on setup (default: true)
+ * @param {boolean} options.verbose - Enable verbose logging (default: false)
+ * @returns {Object} Inspector client with connect/disconnect methods
+ */
+export function setupEmberInspector(options = {}) {
+  const {
+    serverUrl = process.env.INSPECTOR_URL || 'http://localhost:9229',
+    appName = 'Ember App',
+    autoConnect = true,
+    verbose = false
+  } = options;
+
+  const log = (...args) => {
+    if (verbose) {
+      console.log('[Ember Inspector]', ...args);
+    }
+  };
+
+  let socket = null;
+  let isConnected = false;
+
+  const client = {
+    connect() {
+      if (socket) {
+        log('Already connected');
+        return socket;
+      }
+
+      log(`Connecting to inspector server at ${serverUrl}...`);
+
+      // Create Socket.IO client
+      socket = io(serverUrl, {
+        query: { type: 'app' },
+        reconnection: true,
+        reconnectionDelay: 1000,
+        reconnectionAttempts: 5
+      });
+
+      // Set up global config for ember-inspector
+      if (typeof window !== 'undefined') {
+        window.EMBER_INSPECTOR_CONFIG = {
+          remoteDebugSocket: socket,
+          appName
+        };
+      } else if (typeof global !== 'undefined') {
+        global.EMBER_INSPECTOR_CONFIG = {
+          remoteDebugSocket: socket,
+          appName
+        };
+      }
+
+      socket.on('connect', () => {
+        isConnected = true;
+        console.log('✅ Connected to Ember Inspector server');
+        log(`Socket ID: ${socket.id}`);
+      });
+
+      socket.on('disconnect', (reason) => {
+        isConnected = false;
+        console.log('⚠️  Disconnected from Ember Inspector server:', reason);
+      });
+
+      socket.on('connect_error', (error) => {
+        console.error('❌ Failed to connect to Ember Inspector server:', error.message);
+      });
+
+      socket.on('emberInspectorMessage', (message) => {
+        log('Received message:', message.type);
+      });
+
+      return socket;
+    },
+
+    disconnect() {
+      if (socket) {
+        log('Disconnecting from inspector server...');
+        socket.disconnect();
+        socket = null;
+        isConnected = false;
+        console.log('Disconnected from Ember Inspector server');
+      }
+    },
+
+    get isConnected() {
+      return isConnected;
+    },
+
+    get socket() {
+      return socket;
+    }
+  };
+
+  // Auto-connect if enabled
+  if (autoConnect) {
+    client.connect();
+  }
+
+  return client;
+}
+
+/**
+ * Loads ember_debug for Node.js environment
+ * This loads the websocket version of ember_debug from ember-inspector package
+ * Call this after setupEmberInspector() and after Ember app has booted
+ *
+ * IMPORTANT: For Node.js environments, ember_debug must be loaded via require()
+ * The file is located at: node_modules/ember-inspector/dist/websocket/ember_debug.js
+ */
+export async function loadEmberDebug() {
+  try {
+    let loaded = false;
+    let lastError = null;
+
+    try {
+      await import('ember-inspector/dist/websocket/ember_debug.js');
+      loaded = true;
+    } catch (e) {
+      lastError = e;
+    }
+
+
+    if (!loaded) {
+      console.error('❌ Failed to load ember_debug. Make sure ember-inspector is installed.');
+      console.error('   Try: npm install ember-inspector');
+      if (lastError) {
+        console.error('   Last error:', lastError.message);
+      }
+    }
+  } catch (error) {
+    console.error('❌ Error loading ember_debug:', error);
+  }
+}
+
+// Export for convenience
+export default setupEmberInspector;

package/bin/devtools.js

@@ -1,95 +0,0 @@
-const webdriver = require('selenium-webdriver')
-const chrome = require('selenium-webdriver/chrome')
-const chromedriver = require('chromedriver')
-const path = require('path');
-
-// shortcuts
-const until = webdriver.until
-const By = webdriver.By
-
-/* -----------------------------------------------------------------------------
- * configure
- * -------------------------------------------------------------------------- */
-
-/* -----------------------------------------------------------------------------
- * devtools public
- * -------------------------------------------------------------------------- */
-
-const Devtools = function (options) {
-  this.options = options || {}
-  this.service = new chrome.ServiceBuilder(chromedriver.path).build()
-  const chromeOpts = new chrome.Options();
-  chromeOpts.addArguments('--disable-search-engine-choice-screen');
-  chromeOpts.addArguments('--app');
-  const devtools = path.resolve(__dirname, '..', 'download', 'chrome-devtools-frontend.appspot.com', 'serve_file', '@abb728f8afc6a86cc66b1313f5056728ce422ddd');
-  const EmberInspector = path.resolve(require.resolve('ember-inspector/package.json'), '..', 'dist', 'chrome');
-  console.log('devtools', devtools);
-  chromeOpts.addArguments(`--custom-devtools-frontend=file://${devtools}`);
-  chromeOpts.addArguments(`--app=http://www.google.de`);
-  chromeOpts.addArguments(`disable-infobars`);
-  chromeOpts.addArguments(`--disable-infobars`);
-  chromeOpts.addArguments(`--load-extension=${EmberInspector}`);
-  chromeOpts.excludeSwitches("disable-popup-blocking", "enable-automation");
-
-  this.driver = chrome.Driver.createSession(chromeOpts, this.service)
-}
-
-Devtools.prototype.open = function (debuggerUrl, options) {
-  return this._resize()
-    .then(() => this._navigateToUrl(debuggerUrl))
-    .then(() => this._waitUntilPause())
-    .then(() => this.options['debug-exception'] ? this._pauseOnException() : null)
-    .then(() => this.options['debug-brk'] ? null : this._continueExecution())
-    .then(() => this.onOpen ? this.onOpen() : null)
-    .catch((e) => {
-      console.error(e)
-      // webdriver throws errors on already resolved promises upon manual browser
-      // quit/close. This is a catch all to avoid killing the entire process.
-    })
-}
-
-// wrapper around driver.quit to ensure error is caught if close gets called
-// multiple times.
-Devtools.prototype.close = function () {
-  return this.driver.quit()
-    .then(() => this.service.stop())
-    .catch((e) => null)
-}
-
-/* -----------------------------------------------------------------------------
- * devtools private
- * -------------------------------------------------------------------------- */
-
-Devtools.prototype._resize = function () {
-  const window = this.driver.manage().window()
-
-  return window.getSize()
-  //   .then((size) => window.setSize(size.width, 450))
-}
-
-Devtools.prototype._navigateToUrl = function (debuggerUrl) {
-  return this.driver.get(debuggerUrl)
-}
-
-Devtools.prototype._waitUntilPause = function () {
-  return this.driver.wait(until.elementLocated(By.css('.cm-execution-line')))
-}
-
-Devtools.prototype._pauseOnException = function () {
-  return this._executeOnPanel('_togglePauseOnExceptions')
-}
-
-Devtools.prototype._continueExecution = function () {
-  return this._executeOnPanel('_togglePause')
-}
-
-Devtools.prototype._executeOnPanel = function (methodName) {
-  let script = `const root = window['WebInspector'] || window['Sources'];`
-  script += `return root.SourcesPanel.instance().${methodName}();`
-
-  return this.driver.executeScript(script)
-}
-
-
-const devtools = new Devtools({});
-devtools.open('devtools://devtools/bundled/ember_app.html?ws=localhost:40000')

package/download/chrome-devtools-frontend.appspot.com/robots.txt/index.html

@@ -1,4 +0,0 @@
-<!DOCTYPE html><html><head><title>404 Not Found</title>
-</head><body><h1>Not Found</h1>
-<p>The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.</p>
-</body></html>

package/download/chrome-devtools-frontend.appspot.com/serve_file/@abb728f8afc6a86cc66b1313f5056728ce422ddd/Images/3d-center.svg

@@ -1 +0,0 @@
-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.062 17 3 15.938 5.438 13.5H4V12h4v4H6.5v-1.438L4.062 17Zm11.876 0L13.5 14.562V16H12v-4h4v1.5h-1.438L17 15.938 15.938 17ZM4 8V6.5h1.438L3 4.062 4.062 3 6.5 5.438V4H8v4H4Zm8 0V4h1.5v1.438L15.938 3 17 4.062 14.562 6.5H16V8h-4Z" fill="#000"/></svg>

package/download/chrome-devtools-frontend.appspot.com/serve_file/@abb728f8afc6a86cc66b1313f5056728ce422ddd/Images/3d-pan.svg

@@ -1 +0,0 @@
-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 18-3.5-3.5 1.062-1.062 1.688 1.687V10.75H4.875l1.687 1.688L5.5 13.5 2 10l3.5-3.5 1.062 1.062L4.875 9.25H9.25V4.875L7.562 6.562 6.5 5.5 10 2l3.5 3.5-1.062 1.062-1.688-1.687V9.25h4.375l-1.687-1.688L14.5 6.5 18 10l-3.5 3.5-1.062-1.062 1.687-1.688H10.75v4.375l1.688-1.687L13.5 14.5 10 18Z" fill="#000"/></svg>

package/download/chrome-devtools-frontend.appspot.com/serve_file/@abb728f8afc6a86cc66b1313f5056728ce422ddd/Images/3d-rotate.svg

@@ -1 +0,0 @@
-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m8 16.25-1.062-1.062 1.291-1.292c-1.82-.195-3.312-.66-4.479-1.396C2.583 11.764 2 10.93 2 10c0-1.111.778-2.056 2.333-2.833C5.889 6.389 7.778 6 10 6s4.111.389 5.667 1.167C17.222 7.944 18 8.889 18 10c0 .833-.455 1.587-1.365 2.26-.91.674-2.121 1.157-3.635 1.448v-1.541c1-.237 1.833-.56 2.5-.969.667-.41 1-.81 1-1.198 0-.639-.674-1.215-2.021-1.729S11.639 7.5 10 7.5c-1.625 0-3.115.26-4.469.781C4.177 8.801 3.5 9.375 3.5 10c0 .472.448.944 1.344 1.417.896.472 1.941.784 3.135.937l-1.041-1.042L8 10.25l3 3-3 3Z" fill="#000"/></svg>