fix

Author: patricklx

ember_debug/libs/render-tree.js

@@ -33,20 +33,25 @@ class InElementSupportProvider {
     const NewElementBuilder = this.NewElementBuilder;
     const remoteStack = [];
 
+    function createRef(value) {
+      if (self.reference.createUnboundRef) {
+        return self.reference.createUnboundRef(value);
+      } else {
+        return new self.reference.ConstReference(value);
+      }
+    }
+
     const didAppendNode = NewElementBuilder.prototype.didAppendNode;
     NewElementBuilder.prototype.didAppendNode = function (...args) {
-      const debugRenderTree =
-        this.env?.debugRenderTree || this.env?.extra?.debugRenderTree;
+      const debugRenderTree = self.debugRenderTree;
       const parent = debugRenderTree.stack.current;
       args[0].__emberInspectorParentNode = debugRenderTree.nodeFor(parent);
       return didAppendNode.call(this, ...args);
     };
 
     const pushElement = NewElementBuilder.prototype.pushElement;
     NewElementBuilder.prototype.pushElement = function (...args) {
-      const debugRenderTree =
-        this.env?.debugRenderTree || this.env?.extra?.debugRenderTree;
-      // for first push element, .env is not yet set...
+      const debugRenderTree = self.debugRenderTree;
       if (debugRenderTree) {
         const parent = debugRenderTree.stack.current;
         args[0].__emberInspectorParentNode = debugRenderTree.nodeFor(parent);
@@ -55,54 +60,51 @@ class InElementSupportProvider {
     };
 
     const pushRemoteElement = NewElementBuilder.prototype.pushRemoteElement;
-    NewElementBuilder.prototype.pushRemoteElement = function (...args) {
-      const element = args[0];
-      remoteStack.push({});
-      let capturedArgs, ref;
-      if (self.reference.createUnboundRef) {
-        ref = self.reference.createUnboundRef?.(element);
-        capturedArgs = {
-          positional: [],
-          named: {
-            destination: ref,
-          },
-        };
-      } else {
-        ref = new self.reference.ConstReference(() => element);
-        capturedArgs = {
-          value() {
-            return {
-              positional: [],
-              named: {
-                destination: ref,
-              },
-            };
-          },
-        };
+    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 debugRenderTree =
-        this.env?.debugRenderTree || this.env?.extra?.debugRenderTree;
+      const inElementArgs = self.reference.createUnboundRef
+        ? capturedArgs
+        : {
+            value() {
+              return capturedArgs;
+            },
+          };
+      const debugRenderTree = self.debugRenderTree;
       debugRenderTree?.create(remoteStack.at(-1), {
-        type: 'remote-element',
+        type: 'keyword',
         name: 'in-element',
-        args: capturedArgs,
+        args: inElementArgs,
         instance: {
           args: {
-            destination: element,
+            named: {
+              insertBefore,
+            },
+            positional: [element],
           },
           constructor: {
             name: 'InElement',
           },
         },
       });
-      return pushRemoteElement.call(this, ...args);
+      return pushRemoteElement.call(this, element, guid, insertBefore);
     };
 
     const popRemoteElement = NewElementBuilder.prototype.popRemoteElement;
     NewElementBuilder.prototype.popRemoteElement = function (...args) {
       const element = this.element;
-      const debugRenderTree =
-        this.env?.debugRenderTree || this.env?.extra?.debugRenderTree;
+      const debugRenderTree = self.debugRenderTree;
       debugRenderTree?.didRender(remoteStack.at(-1), {
         parentElement: () => element.parentElement,
         firstNode: () => element,
@@ -409,7 +411,7 @@ export default class RenderTree {
 
     if (serialized === undefined) {
       this.nodes[node.id] = node;
-      if (node.type === 'remote-element') {
+      if (node.type === 'keyword') {
         node.type = 'component';
         this.inElementSupport?.nodeMap.set(node, node.id);
         this.inElementSupport?.remoteRoots.push(node);

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();

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>