add tests

add in element to debug render tree

My learnings from hacking on this in inspector
https://github.com/emberjs/ember-inspector/pull/2549/files

Adding modifiers is also easy, will add it in another pr

Author: patricklx

packages/@glimmer-workspace/integration-tests/test/debug-render-tree-test.ts

@@ -253,6 +253,56 @@ class DebugRenderTreeTest extends RenderTest {
     ]);
   }
 
+  @test 'in-element in tree'() {
+    this.registerComponent(
+        'Glimmer',
+        'HiWorld',
+        'Hi World'
+    );
+    this.registerComponent(
+      'Glimmer',
+      'HelloWorld',
+      '{{#in-element this.destinationElement}}<HiWorld />{{/in-element}}',
+      class extends GlimmerishComponent {
+        get destinationElement() {
+          return document.getElementById('target');
+        }
+      }
+    );
+
+    this.render(`<div id='target'></div><HelloWorld @arg="first"/>`);
+
+    this.assertRenderTree([
+      {
+        type: 'component',
+        name: 'HelloWorld',
+        args: { positional: [], named: { arg: 'first' } },
+        instance: (instance: GlimmerishComponent) => instance.args['arg'] === 'first',
+        template: '(unknown template module)',
+        bounds: this.nodeBounds(this.element.firstChild!.nextSibling),
+        children: [
+          {
+            type: 'remote-element',
+            name: 'in-element',
+            args: { positional: [], named: { destination: this.element.firstChild } },
+            instance: (instance: GlimmerishComponent) => instance.constructor.name === 'InElement',
+            template: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [{
+              type: 'component',
+              name: 'HiWorld',
+              args: { positional: [], named: {} },
+              instance: (instance: GlimmerishComponent) => instance,
+              template: '(unknown template module)',
+              bounds: this.nodeBounds(this.element.firstChild!.firstChild),
+              children: []
+            }],
+          },
+        ],
+      },
+    ]);
+  }
+
   @test 'getDebugCustomRenderTree works'() {
     let bucket1 = {};
     let instance1 = {};
@@ -502,7 +552,7 @@ class DebugRenderTreeTest extends RenderTest {
         this.assertRenderNode(actualNode, expected, `${actualNode.type}:${actualNode.name}`);
       });
     } else {
-      this.assert.deepEqual(actual, [], path);
+      this.assert.deepEqual(actual, expectedNodes, path);
     }
   }
 

packages/@glimmer/interfaces/lib/runtime/debug-render-tree.d.ts

@@ -3,7 +3,12 @@ import type { SimpleElement, SimpleNode } from '@simple-dom/interface';
 import type { Bounds } from '../dom/bounds.js';
 import type { Arguments, CapturedArguments } from './arguments.js';
 
-export type RenderNodeType = 'outlet' | 'engine' | 'route-template' | 'component';
+export type RenderNodeType =
+  | 'outlet'
+  | 'engine'
+  | 'route-template'
+  | 'component'
+  | 'remote-element';
 
 export interface RenderNode {
   type: RenderNodeType;

packages/@glimmer/runtime/lib/vm/element-builder.ts

@@ -20,6 +20,7 @@ import type {
   UpdatableBlock,
 } from '@glimmer/interfaces';
 import { destroy, registerDestructor } from '@glimmer/destroyable';
+import { createUnboundRef } from '@glimmer/reference';
 import { assert, expect, Stack } from '@glimmer/util';
 
 import type { DynamicAttribute } from './attributes/dynamic';
@@ -83,6 +84,7 @@ export class NewElementBuilder implements ElementBuilder {
   [CURSOR_STACK] = new Stack<Cursor>();
   private modifierStack = new Stack<Nullable<ModifierInstance[]>>();
   private blockStack = new Stack<LiveBlock>();
+  private remoteStateStack: Object[];
 
   static forInitialRender(env: Environment, cursor: CursorImpl) {
     return new this(env, cursor.element, cursor.nextSibling).initialize();
@@ -100,10 +102,10 @@ export class NewElementBuilder implements ElementBuilder {
 
   constructor(env: Environment, parentNode: SimpleElement, nextSibling: Nullable<SimpleNode>) {
     this.pushElement(parentNode, nextSibling);
-
     this.env = env;
     this.dom = env.getAppendOperations();
     this.updateOperations = env.getDOM();
+    this.remoteStateStack = [];
   }
 
   protected initialize(): this {
@@ -215,6 +217,29 @@ export class NewElementBuilder implements ElementBuilder {
     guid: string,
     insertBefore: Maybe<SimpleNode>
   ): Nullable<RemoteLiveBlock> {
+    if (this.env.debugRenderTree) {
+      const state = {};
+      this.remoteStateStack.push(state);
+      const ref = createUnboundRef(element, false);
+      this.env.debugRenderTree.create(state, {
+        type: 'remote-element',
+        name: 'in-element',
+        args: {
+          positional: [],
+          named: {
+            destination: ref,
+          },
+        } as any,
+        instance: {
+          args: {
+            destination: ref,
+          },
+          constructor: {
+            name: 'InElement',
+          },
+        },
+      });
+    }
     return this.__pushRemoteElement(element, guid, insertBefore);
   }
 
@@ -237,6 +262,15 @@ export class NewElementBuilder implements ElementBuilder {
   }
 
   popRemoteElement() {
+    if (this.env.debugRenderTree) {
+      const state = this.remoteStateStack.pop();
+      const element = this.element;
+      this.env.debugRenderTree?.didRender(state!, {
+        parentElement: () => (element as any).parentElement,
+        firstNode: () => element,
+        lastNode: () => element,
+      });
+    }
     this.popBlock();
     this.popElement();
   }