fix

Author: patricklx

ember_debug/libs/render-tree.js

@@ -1,9 +1,10 @@
-import captureRenderTree from "./capture-render-tree";
-import { guidFor } from "ember-debug/utils/ember/object/internals";
-import { EmberLoader } from "ember-debug/utils/ember/loader";
+import captureRenderTree from './capture-render-tree';
+import { guidFor } from 'ember-debug/utils/ember/object/internals';
+import { EmberLoader } from 'ember-debug/utils/ember/loader';
 
 class InElementSupportProvider {
   constructor(owner) {
+    this.owner = owner;
     this.nodeMap = new Map();
     this.remoteRoots = [];
     this.runtime = this.require('@glimmer/runtime');
@@ -32,6 +33,7 @@ class InElementSupportProvider {
 
     const NewElementBuilder = this.NewElementBuilder;
     const remoteStack = [];
+    const modifierStack = [];
 
     const didAppendNode = NewElementBuilder.prototype.didAppendNode;
     NewElementBuilder.prototype.didAppendNode = function (...args) {
@@ -71,6 +73,29 @@ class InElementSupportProvider {
       return pushRemoteElement.call(this, ...args);
     };
 
+    const pushModifiers = NewElementBuilder.prototype.pushModifiers;
+    NewElementBuilder.prototype.pushModifiers = function (modifiers) {
+      if (!modifiers) return pushModifiers.call(this, modifiers);
+      for (const modifier of modifiers) {
+        const state = {};
+        const name = modifier.definition.resolvedName;
+        const delegate = modifier.manager.componentManagerDelegates.get(self.owner);
+        const element = modifier.state.element;
+        this.env.debugRenderTree?.create(state, {
+          type: 'modifier',
+          name,
+          args: modifier.state.args,
+          instance: delegate
+        });
+        this.env.debugRenderTree?.didRender(state, {
+          parentElement: () => element.parentElement,
+          firstNode: () => element,
+          lastNode: () => element,
+        });
+      }
+      return pushModifiers.call(this, modifiers);
+    };
+
     const popRemoteElement = NewElementBuilder.prototype.popRemoteElement;
     NewElementBuilder.prototype.popRemoteElement = function (...args) {
       this.env.debugRenderTree?.didRender(remoteStack.at(-1), {
@@ -80,7 +105,7 @@ class InElementSupportProvider {
       });
       remoteStack.pop();
       return popRemoteElement.call(this, ...args);
-    }
+    };
 
     this.NewElementBuilderFunctions = {
       pushElement,
@@ -161,91 +186,9 @@ export default class RenderTree {
   build() {
     this._reset();
 
-    const manager = requirejs('@glimmer/manager');
-    const didInsertDefinition = requirejs('@ember/render-modifiers/modifiers/did-insert')?.default;
-    if (didInsertDefinition) {
-      const delegate = manager.getInternalModifierManager(didInsertDefinition).componentManagerDelegates.get(this.owner);
-      if (delegate) {
-        delegate.name = 'did-insert';
-      }
-    }
-
-    const willRemoveDefinition = requirejs('@ember/render-modifiers/modifiers/will-destroy')?.default;
-    if (willRemoveDefinition) {
-      const delegate = manager.getInternalModifierManager(willRemoveDefinition).componentManagerDelegates.get(this.owner);
-      if (delegate) {
-        delegate.name = 'will-remove';
-      }
-    }
-
-    const didUpdateDefinition = requirejs('@ember/render-modifiers/modifiers/did-update')?.default;
-    if (didUpdateDefinition) {
-      const delegate = manager.getInternalModifierManager(didUpdateDefinition).componentManagerDelegates.get(this.owner);
-      if (delegate) {
-        delegate.name = 'will-remove';
-      }
-    }
-
     this.tree = captureRenderTree(this.owner);
-
-    const self = this;
-    let idx = Object.keys(self.nodes).length;
-
-    function buildModifierNode(options) {
-      const obj = Object.create(null);
-      obj.index = idx++;
-      obj.id = obj.index.toString();
-      obj.name =
-        options.modifier?.name || options.delegate?.name || 'unknown-modifier';
-      obj.type = 'modifier';
-      obj.template = null;
-      obj.isRemote = false;
-      obj.args = options.args;
-      obj.instance = {
-        args: options.args,
-        modifier: options.modifier,
-      };
-      obj.bounds = {
-        firstNode: options.element,
-        lastNode: options.element,
-        parentElement: options.element.parentElement,
-      };
-      obj.children = [];
-      return obj;
-    }
-
-    function buildTagNode(node, options) {
-      const obj = Object.create(null);
-      obj.index = idx++;
-      obj.id = obj.index.toString();
-      obj.name = node.localName;
-      obj.type = 'htmlTag';
-      obj.template = null;
-      obj.isRemote = false;
-      obj.instance = {};
-      obj.args = {
-        named: {},
-        positional: [],
-      };
-      obj.bounds = {
-        firstNode: node,
-        lastNode: node,
-        parentElement: node.parentElement,
-      };
-      obj.children = options.map((m) => buildModifierNode(m));
-      return obj;
-    }
-
     let serialized = this._serializeRenderNodes(this.tree);
 
-    for (const modifiersForNode of this.modifiersForNodes.entries()) {
-      const component = this.findNearest(modifiersForNode[0]);
-      if (!component) continue;
-      this.serialized[component.id].children.push(
-        this._serializeRenderNode(buildTagNode(...modifiersForNode))
-      );
-    }
-
     this._releaseStaleObjects();
 
     return serialized;
@@ -466,7 +409,10 @@ export default class RenderTree {
         this.inElementSupport?.remoteRoots.push(node);
       }
 
-      if (this.inElementSupport?.Wormhole && node.instance instanceof this.inElementSupport?.Wormhole.default) {
+      if (
+        this.inElementSupport?.Wormhole &&
+        node.instance instanceof this.inElementSupport.Wormhole.default
+      ) {
         this.inElementSupport?.remoteRoots.push(node);
         const bounds = node.bounds;
         Object.defineProperty(node, 'bounds', {