improve component tree perf

Author: patricklx

app/components/component-tree-item.hbs

@@ -11,6 +11,7 @@
   {{on "mouseenter" @item.showPreview}}
   {{on "mouseleave" @item.hidePreview}}
 >
+  {{resource @item.id create=@item.load update=@item.update teardown=@item.unload}}
   <div class="component-tree-item-background flex items-center pr-2 rounded">
     {{#if @item.hasChildren}}
       <Ui::DisclosureTriangle

app/controllers/component-tree.js

@@ -1,6 +1,6 @@
 import Controller, { inject as controller } from '@ember/controller';
 import { action } from '@ember/object';
-import { debounce } from '@ember/runloop';
+import { debounce, next } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
@@ -42,6 +42,9 @@ export default class ComponentTreeController extends Controller {
           item = new RenderItem(this, parent, renderNode);
         } else {
           item.renderNode = renderNode;
+          if (item.isRendered) {
+            item.load();
+          }
         }
 
         store[renderNode.id] = item;
@@ -59,6 +62,15 @@ export default class ComponentTreeController extends Controller {
     this.renderItems = renderItems;
   }
 
+  setRenderTreeItem(item) {
+    if (item && this._store[item.id]) {
+      this._store[item.id].renderNode = Object.assign(
+        this._store[item.id].renderNode,
+        item
+      );
+    }
+  }
+
   findItem(id) {
     return this._store[id];
   }
@@ -275,6 +287,7 @@ function arrowKeyPressed(keyCode) {
 class RenderItem {
   @tracked isExpanded;
   @tracked renderNode;
+  @tracked renderCounter = 0;
 
   constructor(controller, parentItem, renderNode) {
     this.controller = controller;
@@ -284,6 +297,42 @@ class RenderItem {
     this.isExpanded = this.isExpandable;
   }
 
+  get isRendered() {
+    return this.renderCounter > 0;
+  }
+
+  @action
+  load() {
+    next(() => {
+      this.renderCounter += 1;
+      if (this.renderNode.args) {
+        return;
+      }
+      console.log('load', this.id);
+      this.send('view:getTreeItem', { id: this.id });
+    });
+  }
+
+  @action
+  async update(prevId) {
+    next(() => {
+      this.controller._store[prevId].renderCounter -= 1;
+      this.renderCounter += 1;
+      if (this.renderNode.args) {
+        return;
+      }
+      console.log('load', this.id);
+      this.send('view:getTreeItem', { id: this.id });
+    });
+  }
+
+  @action
+  async unload() {
+    next(() => {
+      this.renderCounter -= 1;
+    });
+  }
+
   get id() {
     return this.renderNode.id;
   }

app/helpers/resource.js

@@ -0,0 +1,25 @@
+import Helper from '@ember/component/helper';
+import { registerDestructor, unregisterDestructor } from '@ember/destroyable';
+
+export default class ResourceHelper extends Helper {
+  compute(positional, named) {
+    const firstTime = !this.updateCallback;
+    this.updateCallback = named.update;
+    if (named.teardown) {
+      if (this.teardownCallback) {
+        unregisterDestructor(this, this.teardownCallback);
+      }
+      this.teardownCallback = named.teardown;
+      registerDestructor(this, this.teardownCallback);
+    }
+    if (this.updateCallback && !firstTime) {
+      this.updateCallback(this.prevState, positional);
+    }
+    if (firstTime && named.create) {
+      named.create();
+    }
+    //access all positional params
+    positional.forEach(() => null);
+    this.prevState = [...positional];
+  }
+}

app/routes/component-tree.js

@@ -28,6 +28,7 @@ export default class ComponentTreeRoute extends TabRoute {
     super.activate(...arguments);
 
     this.port.on('view:renderTree', this, this.setRenderTree);
+    this.port.on('view:renderTreeItem', this, this.setRenderTreeItem);
     this.port.on('view:cancelSelection', this, this.cancelSelection);
     this.port.on('view:startInspecting', this, this.startInspecting);
     this.port.on('view:stopInspecting', this, this.stopInspecting);
@@ -38,6 +39,7 @@ export default class ComponentTreeRoute extends TabRoute {
     super.deactivate(...arguments);
 
     this.port.off('view:renderTree', this, this.setRenderTree);
+    this.port.off('view:renderTreeItem', this, this.setRenderTreeItem);
     this.port.off('view:cancelSelection', this, this.cancelSelection);
     this.port.off('view:startInspecting', this, this.startInspecting);
     this.port.off('view:stopInspecting', this, this.stopInspecting);
@@ -48,6 +50,10 @@ export default class ComponentTreeRoute extends TabRoute {
     this.controller.renderTree = tree;
   }
 
+  setRenderTreeItem({ treeItem }) {
+    this.controller.setRenderTreeItem(treeItem);
+  }
+
   cancelSelection({ id, pin }) {
     this.controller.cancelSelection(id, pin);
   }

ember_debug/libs/render-tree.js

@@ -314,11 +314,7 @@ export default class RenderTree {
     this._reset();
 
     this.tree = captureRenderTree(this.owner);
-    let serialized = this._serializeRenderNodes(this.tree);
-
-    this._releaseStaleObjects();
-
-    return serialized;
+    return this._createSimpleNodes(this.tree);
   }
 
   /**
@@ -540,7 +536,7 @@ export default class RenderTree {
     };
     const idx = parentNode.children.indexOf(node);
     parentNode.children.splice(idx, 0, htmlNode);
-    return this._serializeRenderNode(htmlNode, parentNode);
+    return this._createSimpleNode(htmlNode, parentNode);
   }
 
   _serializeRenderNodes(nodes, parentNode = null) {
@@ -552,14 +548,66 @@ export default class RenderTree {
     return mapped;
   }
 
-  _serializeRenderNode(node, parentNode = null) {
+  _createSimpleNode(node, parentNode) {
     if (!node.id.startsWith(this.renderNodeIdPrefix)) {
       node.id = `${this.renderNodeIdPrefix}-${node.id}`;
     }
+
+    this.nodes[node.id] = node;
+    this.parentNodes[node.id] = parentNode;
+
+    if (node.type === 'modifier') {
+      if (parentNode.instance !== node.bounds.firstNode) {
+        return this._insertHtmlElementNode(node, parentNode);
+      }
+    }
+
+    if (node.type === 'html-element') {
+      // show set attributes in inspector
+      Array.from(node.instance.attributes).forEach((attr) => {
+        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.type === 'modifier' &&
+            child.bounds.firstNode === node.instance)
+        ) {
+          node.children.push(child);
+        }
+      });
+      node.children.forEach((child) => {
+        const idx = parentNode.children.indexOf(child);
+        if (idx >= 0) {
+          parentNode.children.splice(idx, 1);
+        }
+      });
+    }
+
+    return {
+      id: node.id,
+      type: node.type,
+      name: node.name,
+      children: this._createSimpleNodes(node.children, node),
+    };
+  }
+
+  _createSimpleNodes(nodes, parentNode = null) {
+    const mapped = [];
+    // nodes can be mutated during serialize, which is why we use indexing instead of .map
+    for (let i = 0; i < nodes.length; i++) {
+      mapped.push(this._createSimpleNode(nodes[i], parentNode));
+    }
+    return mapped;
+  }
+
+  _serializeRenderNode(nodeId) {
+    const node = this.nodes[nodeId];
+    if (!node) return null;
     let serialized = this.serialized[node.id];
 
     if (serialized === undefined) {
-      this.nodes[node.id] = node;
       if (node.type === 'keyword') {
         node.type = 'component';
         this.inElementSupport?.nodeMap.set(node, node.id);
@@ -586,33 +634,6 @@ export default class RenderTree {
         });
       }
 
-      if (parentNode) {
-        this.parentNodes[node.id] = parentNode;
-      }
-
-      if (node.type === 'html-element') {
-        // show set attributes in inspector
-        Array.from(node.instance.attributes).forEach((attr) => {
-          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.type === 'modifier' &&
-              child.bounds.firstNode === node.instance)
-          ) {
-            node.children.push(child);
-          }
-        });
-        node.children.forEach((child) => {
-          const idx = parentNode.children.indexOf(child);
-          if (idx >= 0) {
-            parentNode.children.splice(idx, 1);
-          }
-        });
-      }
-
       if (node.type === 'component' && !node.instance) {
         node.instance = this._createSimpleInstance(
           'TemplateOnlyComponent',
@@ -624,18 +645,15 @@ export default class RenderTree {
         node.instance =
           node.instance || this._createSimpleInstance(node.name, node.args);
         node.instance.toString = () => node.name;
-        if (parentNode.instance !== node.bounds.firstNode) {
-          return this._insertHtmlElementNode(node, parentNode);
-        }
       }
 
       this.serialized[node.id] = serialized = {
         ...node,
         args: this._serializeArgs(node.args),
         instance: this._serializeItem(node.instance),
         bounds: this._serializeBounds(node.bounds),
-        children: this._serializeRenderNodes(node.children, node),
       };
+      delete serialized.children;
     }
 
     return serialized;
@@ -691,12 +709,7 @@ export default class RenderTree {
   }
 
   _serializeObject(object) {
-    let id = this.previouslyRetainedObjects.get(object);
-
-    if (id === undefined) {
-      id = this.retainObject(object);
-    }
-
+    let id = this.retainObject(object);
     this.retainedObjects.set(object, id);
 
     return { id, type: typeof object, inspect: inspect(object) };

ember_debug/view-debug.js

@@ -20,6 +20,10 @@ export default class extends DebugPort {
         this.sendTree(immediate);
       },
 
+      getTreeItem({ id }) {
+        this.sendTreeItem(id);
+      },
+
       showInspection({ id, pin }) {
         this.viewInspection.show(id, pin);
       },
@@ -151,6 +155,12 @@ export default class extends DebugPort {
     }, 250);
   }
 
+  sendTreeItem(id) {
+    this.sendMessage('renderTreeItem', {
+      treeItem: this.renderTree._serializeRenderNode(id),
+    });
+  }
+
   send() {
     if (this.isDestroying || this.isDestroyed) {
       return;

tests/ember_debug/view-debug-test.js

@@ -87,6 +87,23 @@ async function getRenderTree() {
     EmberDebug.port.trigger('view:getTree', {});
   });
 
+  const all = [];
+  const stack = [...message.tree];
+  while (stack.length) {
+    const item = stack.pop();
+    all.push(item);
+    stack.push(...item.children);
+  }
+
+  const fetchAll = all.map(async (item) => {
+    const message = await captureMessage('view:renderTreeItem', async () => {
+      EmberDebug.port.trigger('view:getTreeItem', { id: item.id });
+    });
+    Object.assign(item, message.treeItem);
+  });
+
+  await Promise.all(fetchAll);
+
   if (message) {
     return message.tree;
   }