ember-inspector 4.10.4 → 4.11.0

package/ember_debug/libs/render-tree.js

@@ -6,10 +6,8 @@ class InElementSupportProvider {
   constructor(owner) {
     this.nodeMap = new Map();
     this.remoteRoots = [];
-    this.currentNode = null;
-    this.nodeStack = [];
-    this.remoteNodeStack = [];
     this.runtime = this.require('@glimmer/runtime');
+    this.reference = this.require('@glimmer/reference');
     try {
       this.Wormhole = requireModule('ember-wormhole/components/ember-wormhole');
     } catch (e) {
@@ -27,112 +25,122 @@ class InElementSupportProvider {
   reset() {
     this.nodeMap.clear();
     this.remoteRoots.length = 0;
-    this.nodeStack.length = 0;
-    this.remoteNodeStack.length = 0;
-    this.currentRemoteNode = null;
-    this.currentNode = null;
-  }
-
-  buildInElementNode(node) {
-    const obj = Object.create(null);
-    obj.index = this.currentNode?.refs?.size || 0;
-    obj.name = 'in-element';
-    obj.type = 'component';
-    obj.template = null;
-    obj.isRemote = true;
-    obj.args = {
-      positional: [],
-      named: {
-        destination: node,
-      },
-    };
-    obj.instance = {
-      args: obj.args.named,
-      constructor: {
-        name: 'InElement',
-      },
-    };
-    obj.bounds = {
-      firstNode: node,
-      lastNode: node,
-      parentElement: node.parentElement,
-    };
-    obj.children = [];
-    return obj;
   }
 
   patch() {
     const self = this;
 
-    const captureNode = this.debugRenderTree.captureNode;
-    this.debugRenderTree.captureNode = function (...args) {
-      const capture = captureNode.call(this, ...args);
-      const [id, state] = args;
-      const node = this.nodeFor(state);
-      self.setupNodeRemotes(node, id, capture);
-      return capture;
-    };
+    const NewElementBuilder = this.NewElementBuilder;
+    const remoteStack = [];
+    const componentStack = [];
 
-    const enter = this.debugRenderTree.enter;
-    this.debugRenderTree.enter = function (...args) {
-      const state = args[0];
-      self.enter(this.nodeFor(state));
-      return enter.call(this, ...args);
+    function createRef(value) {
+      if (self.reference.createUnboundRef) {
+        return self.reference.createUnboundRef(value);
+      } else {
+        return value;
+      }
+    }
+
+    const appendChild = this.debugRenderTree.appendChild;
+    this.debugRenderTree.appendChild = function (node, state) {
+      if (node.type === 'component') {
+        componentStack.push(node);
+      }
+      return appendChild.call(this, node, state);
     };
 
     const exit = this.debugRenderTree.exit;
-    this.debugRenderTree.exit = function (...args) {
-      self.exit();
-      return exit.call(this, ...args);
+    this.debugRenderTree.exit = function (state) {
+      const node = this.nodeFor(this.stack.current);
+      if (node?.type === 'component') {
+        componentStack.pop();
+      }
+      exit.call(this, state);
     };
 
-    const NewElementBuilder = this.NewElementBuilder;
     const didAppendNode = NewElementBuilder.prototype.didAppendNode;
     NewElementBuilder.prototype.didAppendNode = function (...args) {
-      args[0].__emberInspectorParentNode = self.currentNode;
+      args[0].__emberInspectorParentNode = componentStack.at(-1);
       return didAppendNode.call(this, ...args);
     };
 
     const pushElement = NewElementBuilder.prototype.pushElement;
     NewElementBuilder.prototype.pushElement = function (...args) {
-      args[0].__emberInspectorParentNode = self.currentNode;
-      return pushElement.call(this, ...args);
+      pushElement.call(this, ...args);
+      args[0].__emberInspectorParentNode = componentStack.at(-1);
     };
 
     const pushRemoteElement = NewElementBuilder.prototype.pushRemoteElement;
-    NewElementBuilder.prototype.pushRemoteElement = function (...args) {
-      const block = pushRemoteElement.call(this, ...args);
-      self.registerRemote(block, ...args);
-      self.nodeStack.push(self.currentNode);
-      self.remoteNodeStack.push(self.currentNode);
-      self.currentRemoteNode = self.currentNode;
-      return block;
+    NewElementBuilder.prototype.pushRemoteElement = function (
+      element,
+      guid,
+      insertBefore
+    ) {
+      remoteStack.push({ element });
+      const ref = createRef(element);
+      const capturedArgs = {
+        positional: [ref],
+        named: {},
+      };
+      if (insertBefore) {
+        capturedArgs.named.insertBefore = insertBefore;
+      }
+      const inElementArgs = self.reference.createUnboundRef
+        ? capturedArgs
+        : {
+            value() {
+              return capturedArgs;
+            },
+          };
+      const debugRenderTree = self.debugRenderTree;
+      debugRenderTree?.create(remoteStack.at(-1), {
+        type: 'keyword',
+        name: 'in-element',
+        args: inElementArgs,
+        instance: {
+          args: {
+            named: {
+              insertBefore,
+            },
+            positional: [element],
+          },
+          constructor: {
+            name: 'InElement',
+          },
+        },
+      });
+      return pushRemoteElement.call(this, element, guid, insertBefore);
     };
 
     const popRemoteElement = NewElementBuilder.prototype.popRemoteElement;
     NewElementBuilder.prototype.popRemoteElement = function (...args) {
-      const block = popRemoteElement.call(this, ...args);
-      self.remoteNodeStack.pop();
-      self.nodeStack.pop();
-      self.currentRemoteNode =
-        self.remoteNodeStack[self.remoteNodeStack.length - 1];
-      return block;
+      const element = this.element;
+      popRemoteElement.call(this, ...args);
+      const parentElement = this.element;
+      const debugRenderTree = self.debugRenderTree;
+      debugRenderTree?.didRender(remoteStack.at(-1), {
+        parentElement: () => parentElement,
+        firstNode: () => element,
+        lastNode: () => element,
+      });
+      remoteStack.pop();
     };
 
     this.debugRenderTreeFunctions = {
+      appendChild,
       exit,
-      enter,
-      captureNode,
     };
     this.NewElementBuilderFunctions = {
       pushElement,
       pushRemoteElement,
+      popRemoteElement,
       didAppendNode,
     };
   }
 
   teardown() {
-    if (!this.debugRenderTreeFunctions) {
+    if (!this.NewElementBuilderFunctions) {
       return;
     }
     Object.assign(this.debugRenderTree, this.debugRenderTreeFunctions);
@@ -147,77 +155,6 @@ class InElementSupportProvider {
       ? requireModule(req)
       : EmberLoader.require(req);
   }
-
-  enter(node) {
-    if (this.currentNode && this.currentNode === this.currentRemoteNode) {
-      this.currentRemoteNode.children.push(node);
-      node.remoteParent = this.currentRemoteNode;
-    }
-    this.currentNode = node;
-    this.nodeStack.push(this.currentNode);
-  }
-
-  exit() {
-    this.nodeStack.pop();
-    this.currentNode = this.nodeStack[this.nodeStack.length - 1];
-  }
-
-  registerRemote(block, node) {
-    const obj = this.buildInElementNode(node);
-    if (this.currentNode) {
-      this.currentNode.remotes = this.currentNode.remotes || [];
-      this.currentNode.remotes.push(obj);
-    }
-    this.remoteRoots.push(obj);
-    this.currentNode = obj;
-  }
-
-  setupNodeRemotes(node, id, capture) {
-    capture.isInRemote = !!node.remoteParent;
-    this.nodeMap.set(node, id);
-    if (node.remoteParent) {
-      const idx = node.remoteParent.children.indexOf(node);
-      if (idx >= 0) {
-        node.remoteParent.children[idx] = capture;
-      }
-    }
-    capture.children = capture.children.filter((c) => !c.isInRemote);
-    node.remotes?.forEach((remote) => {
-      remote.id = 'remote-render-node:' + this.remoteRoots.length;
-      this.nodeMap.set(remote, remote.id);
-      this.remoteRoots.push(remote);
-      capture.children.splice(remote.index, 0, remote);
-    });
-    if (capture.instance?.__emberInspectorTargetNode) {
-      Object.defineProperty(capture, 'bounds', {
-        get() {
-          return {
-            firstNode: capture.instance.__emberInspectorTargetNode,
-            lastNode: capture.instance.__emberInspectorTargetNode,
-            parentElement:
-              capture.instance.__emberInspectorTargetNode.parentElement,
-          };
-        },
-      });
-    }
-    if (this.Wormhole && capture.instance instanceof this.Wormhole.default) {
-      this.remoteRoots.push(capture);
-      const bounds = capture.bounds;
-      Object.defineProperty(capture, 'bounds', {
-        get() {
-          if (capture.instance._destination) {
-            return {
-              firstNode: capture.instance._destination,
-              lastNode: capture.instance._destination,
-              parentElement: capture.instance._destination.parentElement,
-            };
-          }
-          return bounds;
-        },
-      });
-    }
-    return capture;
-  }
 }
 
 export default class RenderTree {
@@ -238,6 +175,7 @@ export default class RenderTree {
     try {
       this.inElementSupport = new InElementSupportProvider(owner);
     } catch (e) {
+      console.error('failed to setup in element support', e);
       // not supported
     }
 
@@ -321,7 +259,7 @@ export default class RenderTree {
     let hintNode = this._findUp(this.nodes[hint]);
     let hints = [hintNode];
     if (node.__emberInspectorParentNode) {
-      const remoteNode = this.inElementSupport.nodeMap.get(node);
+      const remoteNode = this.inElementSupport?.nodeMap.get(node);
       const n = remoteNode && this.nodes[remoteNode];
       hints.push(n);
     }
@@ -492,6 +430,31 @@ export default class RenderTree {
 
     if (serialized === undefined) {
       this.nodes[node.id] = node;
+      if (node.type === 'keyword') {
+        node.type = 'component';
+        this.inElementSupport?.nodeMap.set(node, node.id);
+        this.inElementSupport?.remoteRoots.push(node);
+      }
+
+      if (
+        this.inElementSupport?.Wormhole &&
+        node.instance instanceof this.inElementSupport.Wormhole.default
+      ) {
+        this.inElementSupport?.remoteRoots.push(node);
+        const bounds = node.bounds;
+        Object.defineProperty(node, 'bounds', {
+          get() {
+            if (node.instance._destination) {
+              return {
+                firstNode: node.instance._destination,
+                lastNode: node.instance._destination,
+                parentElement: node.instance._destination.parentElement,
+              };
+            }
+            return bounds;
+          },
+        });
+      }
 
       if (parentNode) {
         this.parentNodes[node.id] = parentNode;
@@ -679,11 +642,8 @@ function isSingleNode({ firstNode, lastNode }) {
   return firstNode === lastNode;
 }
 
-function isAttached({ parentElement, firstNode, lastNode }) {
-  return (
-    parentElement === firstNode.parentElement &&
-    parentElement === lastNode.parentElement
-  );
+function isAttached({ firstNode, lastNode }) {
+  return firstNode.isConnected && lastNode.isConnected;
 }
 
 function isEmptyRect({ x, y, width, height }) {

package/ember_debug/object-inspector.js

@@ -217,27 +217,22 @@ function getTagTrackedProps(tag, ownTag, level = 0) {
   }
   const subtags = tag.subtags || (Array.isArray(tag.subtag) ? tag.subtag : []);
   if (tag.subtag && !Array.isArray(tag.subtag)) {
-    if (tag.subtag._propertyKey)
-      props.push(
-        (tag.subtag._object ? getObjectName(tag.subtag._object) + '.' : '') +
-          tag.subtag._propertyKey
-      );
+    if (tag.subtag._propertyKey) props.push(tag.subtag);
+
     props.push(...getTagTrackedProps(tag.subtag, ownTag, level + 1));
   }
   if (subtags) {
     subtags.forEach((t) => {
       if (t === ownTag) return;
-      if (t._propertyKey)
-        props.push(
-          (t._object ? getObjectName(t._object) + '.' : '') + t._propertyKey
-        );
+      if (t._propertyKey) props.push(t);
       props.push(...getTagTrackedProps(t, ownTag, level + 1));
     });
   }
   return props;
 }
 
-function getTrackedDependencies(object, property, tag) {
+function getTrackedDependencies(object, property, tagInfo) {
+  const tag = tagInfo.tag;
   const proto = Object.getPrototypeOf(object);
   if (!proto) return [];
   const cpDesc = emberMeta(object).peekDescriptors(property);
@@ -249,21 +244,32 @@ function getTrackedDependencies(object, property, tag) {
     const ownTag = tagForProperty(object, property);
     const props = getTagTrackedProps(tag, ownTag);
     const mapping = {};
-    props.forEach((p) => {
+    let maxRevision = tagInfo.revision ?? 0;
+    let minRevision = Infinity;
+    props.forEach((t) => {
+      const p =
+        (t._object ? getObjectName(t._object) + '.' : '') + t._propertyKey;
       const [objName, ...props] = p.split('.');
       mapping[objName] = mapping[objName] || new Set();
-      props.forEach((p) => mapping[objName].add(p));
+      maxRevision = Math.max(maxRevision, t.revision);
+      minRevision = Math.min(minRevision, t.revision);
+      props.forEach((p) => mapping[objName].add([p, t.revision]));
     });
 
+    const hasChange = maxRevision !== minRevision;
+
     Object.entries(mapping).forEach(([objName, props]) => {
       if (props.size > 1) {
         dependentKeys.push(objName);
         props.forEach((p) => {
-          dependentKeys.push('  •  --  ' + p);
+          const changed = hasChange && p[1] >= maxRevision ? ' 🔸' : '';
+          dependentKeys.push('  •  --  ' + p[0] + changed);
         });
       }
       if (props.size === 1) {
-        dependentKeys.push(objName + '.' + [...props][0]);
+        const p = [...props][0];
+        const changed = hasChange && p[1] >= maxRevision ? ' 🔸' : '';
+        dependentKeys.push(objName + '.' + p[0] + changed);
       }
       if (props.size === 0) {
         dependentKeys.push(objName);
@@ -325,7 +331,6 @@ export default class extends DebugPort {
                 tagInfo.tag = track(() => {
                   value = object.get?.(item.name) || object[item.name];
                 });
-                tagInfo.revision = tagValue(tagInfo.tag);
               }
               tracked[item.name] = tagInfo;
             } else {
@@ -344,8 +349,9 @@ export default class extends DebugPort {
                 dependentKeys = getTrackedDependencies(
                   object,
                   item.name,
-                  tracked[item.name].tag
+                  tracked[item.name]
                 );
+                tracked[item.name].revision = tagValue(tracked[item.name].tag);
               }
               this.sendMessage('updateProperty', {
                 objectId,
@@ -1121,12 +1127,12 @@ function calculateCPs(
                 item.isTracked = true;
               }
             }
-            tagInfo.revision = tagValue(tagInfo.tag);
             item.dependentKeys = getTrackedDependencies(
               object,
               item.name,
-              tagInfo.tag
+              tagInfo
             );
+            tagInfo.revision = tagValue(tagInfo.tag);
           } else {
             value = calculateCP(object, item, errorsForObject);
           }
@@ -1317,7 +1323,7 @@ function calculateCP(object, item, errorsForObject) {
     if (object instanceof Ember.ArrayProxy && property == parseInt(property)) {
       return object.objectAt(property);
     }
-    return item.isGetter || property.includes('.')
+    return item.isGetter || property.includes?.('.')
       ? object[property]
       : object.get?.(property) || object[property]; // need to use `get` to be able to detect tracked props
   } catch (error) {

package/ember_debug/utils/base-object.js

@@ -6,7 +6,9 @@ export default class BaseObject {
   }
 
   init() {}
-  willDestroy() {}
+  willDestroy() {
+    this.isDestroying = true;
+  }
 
   destroy() {
     this.willDestroy();

package/ember_debug/view-debug.js

@@ -152,7 +152,7 @@ export default class extends DebugPort {
   }
 
   send() {
-    if (this.isDestroying) {
+    if (this.isDestroying || this.isDestroyed) {
       return;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-inspector",
-  "version": "4.10.4",
+  "version": "4.11.0",
   "description": "Extends developer tools to allow you to better inspect your Ember.js apps.",
   "repository": "https://github.com/emberjs/ember-inspector",
   "license": "MIT",

package/tests/ember_debug/object-inspector-test.js

@@ -278,7 +278,7 @@ module('Ember Debug - Object Inspector', function (hooks) {
     assert.strictEqual(prop.name, 'getterWithTracked');
     assert.strictEqual(prop.value.type, 'type-string');
     assert.strictEqual(prop.value.inspect, '"item1item2tracked"');
-    const dependentKeys =
+    let dependentKeys =
       compareVersion(VERSION, '3.16.10') === 0
         ? 'item1,item2,trackedProperty'
         : 'ObjectWithTracked,  •  --  item1,  •  --  item2,Object:My Object.trackedProperty';
@@ -292,6 +292,22 @@ module('Ember Debug - Object Inspector', function (hooks) {
     assert.strictEqual(prop.name, 'aCP');
     assert.strictEqual(prop.value.type, 'type-boolean');
     assert.strictEqual(prop.dependentKeys.toString(), '');
+
+    inspected.objectWithTracked.item1 = 'item1-changed';
+    message = await captureMessage('objectInspector:updateObject', () => {
+      objectInspector.sendObject(inspected);
+    });
+
+    secondDetail = message.details[1];
+    prop = secondDetail.properties[1];
+    assert.strictEqual(prop.name, 'getterWithTracked');
+    assert.strictEqual(prop.value.type, 'type-string');
+    assert.strictEqual(prop.value.inspect, '"item1-changeditem2tracked"');
+    dependentKeys =
+      compareVersion(VERSION, '3.16.10') === 0
+        ? 'item1,item2,trackedProperty'
+        : 'ObjectWithTracked,  •  --  item1 🔸,  •  --  item2,Object:My Object.trackedProperty';
+    assert.strictEqual(prop.dependentKeys.toString(), dependentKeys);
   });
 
   skip('Correct mixin order with es6 class', async function (assert) {

package/tests/ember_debug/view-debug-test.js

@@ -73,6 +73,14 @@ async function digDeeper(objectId, property) {
   });
 }
 
+async function inspectById(objectId) {
+  return await captureMessage('objectInspector:updateObject', async () => {
+    EmberDebug.port.trigger('objectInspector:inspectById', {
+      objectId,
+    });
+  });
+}
+
 async function getRenderTree() {
   let message = await captureMessage('view:renderTree', async () => {
     EmberDebug.port.trigger('view:getTree', {});
@@ -652,7 +660,18 @@ module('Ember Debug - View', function (hooks) {
             Component(
               {
                 name: 'in-element',
-                args: Args({ names: ['destination'], positionals: 0 }),
+                args: (actual) => {
+                  QUnit.assert.ok(actual.positional[0]);
+                  async function testArgsValue() {
+                    const value = await inspectById(actual.positional[0].id);
+                    QUnit.assert.equal(
+                      value.details[1].name,
+                      'HTMLDivElement',
+                      'in-element args value inspect should be correct'
+                    );
+                  }
+                  argsTestPromise = testArgsValue();
+                },
                 template: null,
               },
               Component({
@@ -712,7 +731,7 @@ module('Ember Debug - View', function (hooks) {
             Component(
               {
                 name: 'in-element',
-                args: Args({ names: ['destination'], positionals: 0 }),
+                args: Args({ names: [], positionals: 1 }),
                 template: null,
               },
               Component({
@@ -951,7 +970,7 @@ module('Ember Debug - View', function (hooks) {
 
       assert
         .dom('.ember-inspector-tooltip-header', tooltip)
-        .hasText('<InElement>');
+        .hasText('{{in-element}}');
 
       let actual = highlight.getBoundingClientRect();
       let expected = inElement.getBoundingClientRect();

package/tests/index.html

@@ -41,7 +41,7 @@
         <div id="ember-testing"></div>
       </div>
     </div>
-    
+
     <script src="/testem.js" integrity="" data-embroider-ignore></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-support.js"></script>