Fix inspecting Glimmer components w/ obj inspector (#1106)

Glimmer components instead dev mode assertion getters to warn about
mismatches between the Ember.js vs legacy Glimmer.js APIs. Skip
these properties when inspecting them to avoid tripping them.

Author: chancancode

ember_debug/object-inspector.js

@@ -13,21 +13,28 @@ const {
 const { oneWay } = computed;
 const { backburner, join } = run;
 
-let glimmer;
-let metal;
+const GlimmerComponent = (() => {
+  try {
+    return window.require('@glimmer/component').default;
+  } catch(e) {
+    // ignore, return undefined
+  }
+})();
+
+let GlimmerReference = null;
+let metal = null;
 let HAS_GLIMMER_TRACKING = false;
 try {
-  glimmer = Ember.__loader.require('@glimmer/reference');
+  GlimmerReference = Ember.__loader.require('@glimmer/reference');
   metal = Ember.__loader.require('@ember/-internals/metal');
-  HAS_GLIMMER_TRACKING = glimmer &&
-                         glimmer.value &&
-                         glimmer.validate &&
+  HAS_GLIMMER_TRACKING = GlimmerReference &&
+                         GlimmerReference.value &&
+                         GlimmerReference.validate &&
                          metal &&
                          metal.track &&
                          metal.tagForProperty;
 } catch (e) {
-  glimmer = null;
-  metal = null;
+  // ignore
 }
 
 const keys = Object.keys || Ember.keys;
@@ -237,12 +244,12 @@ export default EmberObject.extend(PortMixin, {
               let tagInfo = tracked[item.name] || { tag: metal.tagForProperty(object, item.name), revision: 0 };
               if (!tagInfo.tag) return;
 
-              changed = !glimmer.validate(tagInfo.tag, tagInfo.revision);
+              changed = !GlimmerReference.validate(tagInfo.tag, tagInfo.revision);
               if (changed) {
                 tagInfo.tag = metal.track(() => {
                   value = get(object, item.name);
                 });
-                tagInfo.revision = glimmer.value(object, item.name);
+                tagInfo.revision = GlimmerReference.value(object, item.name);
               }
               tracked[item.name] = tagInfo;
             } else {
@@ -972,7 +979,7 @@ function calculateCPs(object, mixinDetails, errorsForObject, expensiveProperties
                 item.isTracked = true;
               }
             }
-            tagInfo.revision = glimmer.value(object, item.name);
+            tagInfo.revision = GlimmerReference.value(object, item.name);
             item.dependentKeys = getTrackedDependencies(object, item.name, tagInfo.tag);
           } else {
             value = calculateCP(object, item, errorsForObject);
@@ -1106,8 +1113,7 @@ function getDebugInfo(object) {
     if (object instanceof Ember.ObjectProxy && object.content) {
       object = object.content;
     }
-    // We have to bind to object here to make sure the `this` context is correct inside _debugInfo when we call it
-    debugInfo = objectDebugInfo.bind(object)();
+    debugInfo = objectDebugInfo.call(object);
   }
   debugInfo = debugInfo || {};
   let propertyInfo = debugInfo.propertyInfo || (debugInfo.propertyInfo = {});
@@ -1132,6 +1138,17 @@ function getDebugInfo(object) {
       'element',
       'targetObject'
     );
+  } else if (GlimmerComponent && object instanceof GlimmerComponent) {
+    // These properties don't really exist on Glimmer Components, but
+    // reading their values trigger a development mode assertion. The
+    // more correct long term fix is to make getters lazy (shows "..."
+    // in the UI and only computed them when requested (when the user
+    // clicked on the "..." in the UI).
+    skipProperties.push(
+      'bounds',
+      'debugName',
+      'element'
+    );
   }
   return debugInfo;
 }

tests/ember_debug/object-inspector-test.js

@@ -18,6 +18,14 @@ import require from 'require';
 import { destroyEIApp, setupEIApp } from '../helpers/setup-destroy-ei-app';
 import hasEmberVersion from '@ember/test-helpers/has-ember-version';
 
+const GlimmerComponent = (function() {
+  try {
+    return require('@glimmer/component').default;
+  } catch(e) {
+    // ignore, return undefined
+  }
+})();
+
 let EmberDebug;
 let port;
 let App;
@@ -1010,4 +1018,58 @@ module('Ember Debug - Object Inspector', function(hooks) {
       ]);
     });
   }
+
+  // @glimmer/component 1.0 doesn't seem to support 3.4, even though it has the manager API
+  // Assertion Failed: Could not find custom component manager 'glimmer'
+  if (hasEmberVersion(3, 8) && GlimmerComponent) {
+    test('Inspecting GlimmerComponent does not cause errors', async function(assert) {
+      let instance;
+
+      class FooComponent extends GlimmerComponent {
+        constructor(...args) {
+          super(...args);
+          instance = this;
+        }
+
+        get foo() {
+          return 'foo';
+        }
+
+        bar = 'bar';
+
+        baz() {
+          return 'baz';
+        }
+      }
+
+      this.owner.register('component:foo', FooComponent);
+      this.owner.register('template:simple', hbs`<Foo />`);
+
+      await visit('/simple');
+
+      assert.ok(instance instanceof FooComponent, 'an instance of FooComponent has been created');
+
+      let { details, errors } = await inspectObject(instance);
+
+      assert.ok(details, 'has details');
+      assert.deepEqual(errors, [], 'has no errors');
+
+      let properties = [];
+
+      for (let mixin of details) {
+        for (let property of mixin.properties) {
+          properties.push(property.name);
+        }
+      }
+
+      assert.ok(properties.indexOf('args') > -1, 'contains args');
+      assert.ok(properties.indexOf('foo') > -1, 'contains foo');
+      assert.ok(properties.indexOf('bar') > -1, 'contains bar');
+      assert.ok(properties.indexOf('baz') > -1, 'contains baz');
+
+      assert.ok(properties.indexOf('bounds') === -1, 'does not contain bounds');
+      assert.ok(properties.indexOf('element') === -1, 'does not contain element');
+      assert.ok(properties.indexOf('debugName') === -1, 'does not contain debugName');
+    });
+  }
 });

tests/ember_debug/view-debug-test.js

@@ -251,15 +251,14 @@ module('Ember Debug - View', function(hooks) {
 
   test('Supports applications that don\'t have the ember-application CSS class', async function t(assert) {
     let name, message;
-    let rootElement = document.body;
 
     await visit('/simple');
 
-    assert.dom(rootElement).hasClass(
+    assert.dom(this.element).hasClass(
       'ember-application',
       'The rootElement has the .ember-application CSS class'
     );
-    rootElement.classList.remove('ember-application');
+    this.element.classList.remove('ember-application');
 
     // Restart the inspector
     EmberDebug.start();

tests/helpers/setup-destroy-ei-app.js

@@ -22,7 +22,10 @@ export async function setupEIApp(EmberDebug, routes) {
     Router.map(routes);
   }
 
-  let App = Application.create({ autoboot: false });
+  let App = Application.create({
+    autoboot: false,
+    rootElement: document.getElementById('ember-testing'),
+  });
   App.register('router:main', Router);
 
   await setApplication(App);