ember-inspector 4.13.1 → 4.15.0

package/ember_debug/general-debug.js

@@ -1,7 +1,7 @@
 /* eslint no-empty:0 */
-import DebugPort from './debug-port';
+import DebugPort from './debug-port.js';
 
-import Ember from 'ember-debug/utils/ember';
+import { libraries } from './utils/ember';
 
 /**
  * Class that handles gathering general information of the inspected app.
@@ -22,7 +22,7 @@ export default class extends DebugPort {
     if (found) {
       try {
         return JSON.parse(unescape(found.getAttribute('content')));
-      } catch (e) {}
+      } catch {}
     }
   }
 
@@ -88,7 +88,7 @@ export default class extends DebugPort {
        */
       getLibraries() {
         this.sendMessage('libraries', {
-          libraries: Ember.libraries?._registry,
+          libraries: libraries?._registry,
         });
       },
 

package/ember_debug/lib/boot-ember-inspector.js

@@ -0,0 +1,9 @@
+export default function bootEmberInspector(appInstance) {
+  appInstance.application.__inspector__booted = true;
+  appInstance.__inspector__booted = true;
+
+  // Boot the inspector (or re-boot if already booted, for example in tests)
+  window.EmberInspector._application = appInstance.application;
+  window.EmberInspector.owner = appInstance;
+  window.EmberInspector.start(true);
+}

package/ember_debug/lib/get-applications.js

@@ -0,0 +1,28 @@
+import { Application, Namespace, guidFor } from '../utils/ember';
+
+/**
+ * Get all the Ember.Application instances from Ember.Namespace.NAMESPACES
+ * and add our own applicationId and applicationName to them
+ * @return {*}
+ */
+export default function getApplications() {
+  var namespaces = Namespace.NAMESPACES;
+
+  var apps = namespaces.filter(function (namespace) {
+    return namespace instanceof Application;
+  });
+
+  return apps.map(function (app) {
+    // Add applicationId and applicationName to the app
+    var applicationId = guidFor(app);
+    var applicationName =
+      app.name || app.modulePrefix || `(unknown app - ${applicationId})`;
+
+    Object.assign(app, {
+      applicationId,
+      applicationName,
+    });
+
+    return app;
+  });
+}

package/ember_debug/lib/load-ember-debug-in-webpage.js

@@ -0,0 +1,32 @@
+export default function loadEmberDebugInWebpage(callback) {
+  const waitForEmberLoad = new Promise((resolve) => {
+    if (window.requireModule) {
+      const has =
+        window.requireModule.has ||
+        function has(id) {
+          return !!(
+            window.requireModule.entries[id] ||
+            window.requireModule.entries[id + '/index']
+          );
+        };
+      if (has('ember')) {
+        return resolve();
+      }
+    }
+
+    /**
+     * NOTE: if the above (for some reason) fails and the consuming app has
+     *       deprecation-workflow's throwOnUnhandled: true
+     *         or set \`ember-global\`'s handler to 'throw'
+     *       and is using at least \`ember-source@3.27\`
+     *
+     *       this will throw an exception in the consuming project
+     */
+    if (window.Ember) return resolve();
+
+    if (globalThis.emberInspectorApps) return resolve();
+
+    window.addEventListener('Ember', resolve, { once: true });
+  });
+  waitForEmberLoad.then(callback);
+}

package/ember_debug/lib/send-apps.js

@@ -0,0 +1,14 @@
+export default function sendApps(adapter, apps) {
+  const serializedApps = apps.map((app) => {
+    return {
+      applicationName: app.applicationName,
+      applicationId: app.applicationId,
+    };
+  });
+
+  adapter.sendMessage({
+    type: 'apps-loaded',
+    apps: serializedApps,
+    from: 'inspectedWindow',
+  });
+}

package/ember_debug/lib/send-version-miss.js

@@ -0,0 +1,38 @@
+let channel = new MessageChannel();
+let port = channel.port1;
+window.postMessage('debugger-client', '*', [channel.port2]);
+
+let registeredMiss = false;
+
+/**
+ * This function is called if the app's Ember version
+ * is not supported by this version of the inspector.
+ *
+ * It sends a message to the inspector app to redirect
+ * to an inspector version that supports this Ember version.
+ */
+export default function sendVersionMiss(VERSION) {
+  if (registeredMiss) {
+    return;
+  }
+
+  registeredMiss = true;
+
+  port.addEventListener('message', (message) => {
+    if (message.type === 'check-version') {
+      sendVersionMismatch();
+    }
+  });
+
+  sendVersionMismatch();
+
+  port.start();
+
+  function sendVersionMismatch() {
+    port.postMessage({
+      name: 'version-mismatch',
+      version: VERSION,
+      from: 'inspectedWindow',
+    });
+  }
+}

package/ember_debug/lib/setup-instance-initializer.js

@@ -0,0 +1,17 @@
+import { guidFor } from '../utils/ember';
+
+export default function setupInstanceInitializer(app, callback) {
+  if (!app.__inspector__setup) {
+    app.__inspector__setup = true;
+
+    // We include the app's guid in the initializer name because in Ember versions < 3
+    // registering an instance initializer with the same name, even if on a different app,
+    // triggers an error because instance initializers seem to be global instead of per app.
+    app.instanceInitializer({
+      name: 'ember-inspector-app-instance-booted-' + guidFor(app),
+      initialize: function (instance) {
+        callback(instance);
+      },
+    });
+  }
+}

package/ember_debug/lib/start-inspector.js

@@ -0,0 +1,195 @@
+/* eslint-disable ember/no-test-import-export */
+import versionTest from './version-test';
+import { EMBER_VERSIONS_SUPPORTED } from './versions';
+import sendApps from './send-apps';
+import getApplications from './get-applications';
+import bootEmberInspector from './boot-ember-inspector';
+import setupInstanceInitializer from './setup-instance-initializer';
+import sendVersionMiss from './send-version-miss';
+import { guidFor, Application, VERSION } from '../utils/ember';
+
+function onReady(callback) {
+  if (
+    document.readyState === 'complete' ||
+    document.readyState === 'interactive'
+  ) {
+    setTimeout(completed);
+  } else {
+    document.addEventListener('DOMContentLoaded', completed, false);
+    // For some reason DOMContentLoaded doesn't always work
+    window.addEventListener('load', completed, false);
+  }
+
+  function completed() {
+    document.removeEventListener('DOMContentLoaded', completed, false);
+    window.removeEventListener('load', completed, false);
+    callback();
+  }
+}
+
+export function onEmberReady(callback) {
+  var triggered = false;
+  var triggerOnce = function () {
+    if (triggered) {
+      return;
+    }
+
+    triggered = true;
+    callback();
+  };
+
+  // Newest Ember versions >= 1.10
+
+  const later = () => setTimeout(triggerOnce, 0);
+  window.addEventListener('Ember', later, { once: true });
+  // Oldest Ember versions or if this was injected after Ember has loaded.
+  onReady(triggerOnce);
+}
+
+export function startInspector(adapter) {
+  // There's probably a better way
+  // to determine when the application starts
+  // but this definitely works
+  function onApplicationStart(callback) {
+    const adapterInstance = new adapter();
+
+    adapterInstance.onMessageReceived(function (message) {
+      if (message.type === 'app-picker-loaded') {
+        sendApps(adapterInstance, getApplications());
+      }
+
+      if (message.type === 'app-selected') {
+        let current = window.EmberInspector._application;
+        let selected = getApplications().find(
+          (app) => guidFor(app) === message.applicationId,
+        );
+
+        if (
+          selected &&
+          current !== selected &&
+          selected.__deprecatedInstance__
+        ) {
+          bootEmberInspector(selected.__deprecatedInstance__);
+        }
+      }
+    });
+
+    var apps = getApplications();
+
+    sendApps(adapterInstance, apps);
+
+    function loadInstance(app) {
+      const applicationInstances = app._applicationInstances && [
+        ...app._applicationInstances,
+      ];
+      let instance = app.__deprecatedInstance__ || applicationInstances[0];
+      if (instance) {
+        // App started
+        setupInstanceInitializer(app, callback);
+        callback(instance);
+        return true;
+      }
+    }
+
+    var app;
+    for (var i = 0, l = apps.length; i < l; i++) {
+      app = apps[i];
+      // We check for the existance of an application instance because
+      // in Ember > 3 tests don't destroy the app when they're done but the app has no booted instances.
+      if (app._readinessDeferrals === 0) {
+        if (loadInstance(app)) {
+          break;
+        }
+      }
+
+      // app already run initializers, but no instance, use _bootPromise and didBecomeReady
+      if (app._bootPromise) {
+        app._bootPromise.then((app) => {
+          loadInstance(app);
+        });
+      }
+
+      app.reopen({
+        didBecomeReady() {
+          this._super.apply(this, arguments);
+          setTimeout(() => loadInstance(app), 0);
+        },
+      });
+    }
+    Application.initializer({
+      name: 'ember-inspector-booted',
+      initialize: function (app) {
+        setupInstanceInitializer(app, callback);
+      },
+    });
+  }
+
+  return async function startInspector() {
+    // global to prevent injection
+    if (window.NO_EMBER_DEBUG) {
+      return;
+    }
+
+    /**
+     * If we don't have a way to know the Ember version at this point
+     * because the Ember app has not loaded and provided it somehow,
+     * we can't continue (we need the version to know what version of
+     * the Inspector to load).
+     */
+    if (!VERSION) {
+      return;
+    }
+
+    /**
+     * This is used to redirect to an old snapshot of the Inspector if the
+     * inspected app uses an older Ember version than supported versions.
+     * The code fits the Inspector supporting Ember back to 3.16: any version
+     * before 3.16 is necessarily a classic Ember app with Ember defined.
+     */
+    if ((VERSION, !versionTest(VERSION, EMBER_VERSIONS_SUPPORTED))) {
+      // Wrong inspector version. Redirect to the correct version.
+      sendVersionMiss(VERSION);
+      return;
+    }
+
+    // prevent from injecting twice
+    if (!window.EmberInspector) {
+      let emberDebugMainModule = (await import('../main')).default;
+      if (!emberDebugMainModule) {
+        return;
+      }
+      window.EmberInspector = emberDebugMainModule;
+      window.EmberInspector.Adapter = adapter;
+
+      onApplicationStart(function appStarted(instance) {
+        let app = instance.application;
+        if (!('__inspector__booted' in app)) {
+          // Watch for app reset/destroy
+          app.reopen({
+            reset: function () {
+              this.__inspector__booted = false;
+              this._super.apply(this, arguments);
+            },
+          });
+        }
+
+        if (instance && !('__inspector__booted' in instance)) {
+          instance.reopen({
+            // Clean up on instance destruction
+            willDestroy() {
+              if (window.EmberInspector.owner === instance) {
+                window.EmberInspector.destroyContainer();
+                window.EmberInspector.clear();
+              }
+              return this._super.apply(this, arguments);
+            },
+          });
+
+          if (!window.EmberInspector._application) {
+            setTimeout(() => bootEmberInspector(instance), 0);
+          }
+        }
+      });
+    }
+  };
+}

package/ember_debug/lib/version-test.js

@@ -0,0 +1,73 @@
+/* eslint-disable ember/no-test-import-export */
+
+/**
+ * @method compare
+ * @param {Number} val
+ * @param {Number} number
+ * @return {Number}
+ *  0: same
+ * -1: <
+ *  1: >
+ */
+function compare(val, number) {
+  if (val === number) {
+    return 0;
+  } else if (val < number) {
+    return -1;
+  } else if (val > number) {
+    return 1;
+  }
+}
+
+/**
+ * Remove -alpha, -beta, etc from versions
+ *
+ * @param {String} version
+ * @return {String} The cleaned up version
+ */
+function cleanupVersion(version) {
+  return version.replace(/-.*/g, '');
+}
+
+/**
+ * Compares two Ember versions.
+ *
+ * Returns:
+ * `-1` if version1 < version
+ * 0 if version1 == version2
+ * 1 if version1 > version2
+ *
+ * @param {String} version1
+ * @param {String} version2
+ * @return {Boolean} result of the comparison
+ */
+function compareVersion(version1, version2) {
+  let compared, i;
+  version1 = cleanupVersion(version1).split('.');
+  version2 = cleanupVersion(version2).split('.');
+  for (i = 0; i < 3; i++) {
+    compared = compare(+version1[i], +version2[i]);
+    if (compared !== 0) {
+      return compared;
+    }
+  }
+  return 0;
+}
+
+/**
+ * Checks if a version is between two different versions.
+ * version should be >= left side, < right side
+ *
+ * @param {String} version1
+ * @param {String} version2
+ * @return {Boolean}
+ */
+export default function versionTest(version, between) {
+  var fromVersion = between[0];
+  var toVersion = between[1];
+
+  if (compareVersion(version, fromVersion) === -1) {
+    return false;
+  }
+  return !toVersion || compareVersion(version, toVersion) === -1;
+}

package/ember_debug/lib/versions.js

@@ -0,0 +1,3 @@
+export const EMBER_VERSIONS_SUPPORTED = ['3.16.0', ''];
+
+export const PREVIOUS_EMBER_VERSIONS_SUPPORTED = ['0.0.0', '2.7.0', '3.4.0'];

package/ember_debug/libs/capture-render-tree.js

@@ -1,6 +1,5 @@
-import { captureRenderTree, getEnv } from 'ember-debug/utils/ember';
+import { captureRenderTree, getEnv } from '../utils/ember';
 
-/* eslint-disable no-console, no-inner-declarations */
 let capture = captureRenderTree;
 // Ember 3.14+ comes with debug render tree, but the version in 3.14.0/3.14.1 is buggy
 if (captureRenderTree) {

package/ember_debug/libs/promise-assembler.js

@@ -5,10 +5,10 @@
  and Yapp Labs (@yapplabs).
  */
 
-import Promise from 'ember-debug/models/promise';
-import RSVP from 'ember-debug/utils/rsvp';
-import BaseObject from 'ember-debug/utils/base-object';
-import Evented from 'ember-debug/utils/evented';
+import Promise from '../models/promise';
+import { RSVP } from '../utils/ember';
+import BaseObject from '../utils/base-object';
+import Evented from '../utils/evented';
 
 class PromiseAssembler extends BaseObject {
   // RSVP lib to debug
@@ -23,6 +23,7 @@ class PromiseAssembler extends BaseObject {
     Evented.applyTo(this);
   }
 
+  // eslint-disable-next-line ember/classic-decorator-hooks
   init() {
     super.init();
     this.all = [];

package/ember_debug/libs/render-tree.js

@@ -1,41 +1,37 @@
-import captureRenderTree from './capture-render-tree';
-import { guidFor } from 'ember-debug/utils/ember/object/internals';
-import { EmberLoader, emberSafeRequire } from 'ember-debug/utils/ember/loader';
-import { inspect } from 'ember-debug/utils/type-check';
-import { isInVersionSpecifier } from 'ember-debug/utils/version';
-import { VERSION } from 'ember-debug/utils/ember';
+import captureRenderTree from './capture-render-tree.js';
+import { guidFor } from '../utils/ember/object/internals';
+import { inspect } from '../utils/type-check';
+import { isInVersionSpecifier } from '../utils/version';
+import {
+  VERSION,
+  EmberDestroyable,
+  GlimmerManager,
+  GlimmerReference,
+  GlimmerRuntime,
+  GlimmerUtil,
+} from '../utils/ember';
 
 class InElementSupportProvider {
   constructor(owner) {
     this.nodeMap = new Map();
     this.remoteRoots = [];
-    this.runtime = this.require('@glimmer/runtime');
-    this.reference = this.require('@glimmer/reference');
-    try {
-      this.Wormhole = requireModule('ember-wormhole/components/ember-wormhole');
-    } catch (e) {
-      // nope
-    }
+    this.runtime = GlimmerRuntime;
+    this.reference = GlimmerReference;
 
-    try {
-      requireModule(
-        '@glimmer/manager'
-      ).CustomModifierManager.prototype.getDebugInstance = (args) =>
-        args.modifier || args.delegate;
-    } catch (e) {
-      // nope
+    if (GlimmerManager) {
+      GlimmerManager.CustomModifierManager.prototype.getDebugInstance = (
+        args,
+      ) => args.modifier || args.delegate;
     }
 
-    this.DESTROY = emberSafeRequire('@glimmer/util')?.DESTROY;
-    this.registerDestructor =
-      emberSafeRequire('@glimmer/destroyable')?.registerDestructor ||
-      emberSafeRequire('@ember/destroyable')?.registerDestructor ||
-      emberSafeRequire('@ember/runtime')?.registerDestructor;
+    this.DESTROY = GlimmerUtil?.DESTROY;
+    this.registerDestructor = EmberDestroyable?.registerDestructor;
 
     this.debugRenderTree =
       owner.lookup('renderer:-dom')?.debugRenderTree ||
       owner.lookup('service:-glimmer-environment')._debugRenderTree;
-    this.NewElementBuilder = this.runtime.NewElementBuilder;
+    this.NewElementBuilder =
+      this.runtime.NewElementBuilder || this.runtime.NewTreeBuilder;
 
     this.patch();
   }
@@ -56,7 +52,7 @@ class InElementSupportProvider {
       !isInVersionSpecifier('>5.9.0', VERSION);
     const hasModifierAndInElementSupport = isInVersionSpecifier(
       '>5.9.0',
-      VERSION
+      VERSION,
     );
 
     function createRef(value) {
@@ -151,7 +147,7 @@ class InElementSupportProvider {
             if (!name) {
               try {
                 name = modifier.manager?.getDebugName?.();
-              } catch (e) {
+              } catch {
                 // failed
               }
               name = name || 'unknown-modifier';
@@ -175,12 +171,12 @@ class InElementSupportProvider {
             if (!self.reference.createUnboundRef) {
               try {
                 named = modifierState?.args?.named?.constructor;
-              } catch (e) {
+              } catch {
                 //
               }
               try {
                 named = named || modifierState?.args?.named?.map;
-              } catch (e) {
+              } catch {
                 //
               }
             }
@@ -213,7 +209,7 @@ class InElementSupportProvider {
       NewElementBuilder.prototype.pushRemoteElement = function (
         element,
         guid,
-        insertBefore
+        insertBefore,
       ) {
         const ref = createRef(element);
         const capturedArgs = {
@@ -285,16 +281,10 @@ class InElementSupportProvider {
     Object.assign(this.debugRenderTree, this.debugRenderTreeFunctions);
     Object.assign(
       this.NewElementBuilder.prototype,
-      this.NewElementBuilderFunctions
+      this.NewElementBuilderFunctions,
     );
     this.NewElementBuilderFunctions = null;
   }
-
-  require(req) {
-    return requireModule.has(req)
-      ? requireModule(req)
-      : EmberLoader.require(req);
-  }
 }
 
 export default class RenderTree {
@@ -412,7 +402,7 @@ export default class RenderTree {
 
     renderNode = this._matchRenderNodes(
       [...hints, ...remoteRoots, ...this.tree],
-      node
+      node,
     );
 
     if (renderNode) {
@@ -612,9 +602,11 @@ export default class RenderTree {
         this.inElementSupport?.remoteRoots.push(node);
       }
 
+      // EmberWormhole component from ember-wormhole was used to provide
+      // rendering into a given DOM element prior to built-in in-element.
       if (
-        this.inElementSupport?.Wormhole &&
-        node.instance instanceof this.inElementSupport.Wormhole.default
+        node.template ===
+        'ember-wormhole/templates/components/ember-wormhole.hbs'
       ) {
         this.inElementSupport?.remoteRoots.push(node);
         const bounds = node.bounds;
@@ -642,10 +634,11 @@ export default class RenderTree {
           node.args.named[attr.nodeName] = attr.nodeValue;
         });
         // move modifiers and components into the element children
+
         parentNode.children.forEach((child) => {
           if (
-            child.bounds.parentElement === node.instance ||
-            child.meta?.parentElement === node.instance ||
+            node.instance.contains(child.bounds.parentElement) ||
+            node.instance.contains(child.meta?.parentElement) ||
             (child.type === 'modifier' &&
               child.bounds.firstNode === node.instance)
           ) {
@@ -672,7 +665,7 @@ export default class RenderTree {
         }
         node.instance = this._createSimpleInstance(
           'TemplateOnlyComponent',
-          node.args.named
+          node.args.named,
         );
       }
 

package/ember_debug/libs/source-map.js

@@ -1,8 +1,9 @@
-import BaseObject from 'ember-debug/utils/base-object';
-import * as SourceMap from 'ember-debug/deps/source-map';
+import BaseObject from '../utils/base-object';
+import * as SourceMap from 'source-map-js';
 const notFoundError = new Error('Source map url not found');
 
 export default class extends BaseObject {
+  // eslint-disable-next-line ember/classic-decorator-hooks
   init() {
     super.init();
     this._lastPromise = Promise.resolve(undefined);
@@ -62,7 +63,7 @@ export default class extends BaseObject {
       function () {
         sourceMaps[url] = null;
       },
-      'ember-inspector'
+      'ember-inspector',
     );
   }
 }
@@ -81,7 +82,7 @@ function retrieveSourceMap(source) {
         return mapURL;
       },
       null,
-      'ember-inspector'
+      'ember-inspector',
     )
     .then(retrieveFile, null, 'ember-inspector')
     .then(
@@ -95,7 +96,7 @@ function retrieveSourceMap(source) {
         };
       },
       null,
-      'ember-inspector'
+      'ember-inspector',
     );
 }
 
@@ -142,7 +143,7 @@ function retrieveSourceMapURL(source) {
       return url;
     },
     null,
-    'ember-inspector'
+    'ember-inspector',
   );
 }