Merge pull request #1560 from patricklx/add-in-element-debug-render-tree

add in element to debug render tree

Author: NullVoxPopuli

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

@@ -283,6 +283,54 @@ 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: 'keyword',
+            name: 'in-element',
+            args: { positional: [this.element.firstChild], named: {} },
+            instance: (instance: GlimmerishComponent) => instance === null,
+            template: null,
+            bounds: this.elementBounds(this.element.firstChild! as unknown as Element),
+            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 = {};
@@ -532,7 +580,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/dom/attributes.d.ts

@@ -37,8 +37,8 @@ export interface DOMStack {
     element: SimpleElement,
     guid: string,
     insertBefore: Maybe<SimpleNode>
-  ): Nullable<RemoteLiveBlock>;
-  popRemoteElement(): void;
+  ): RemoteLiveBlock;
+  popRemoteElement(): RemoteLiveBlock;
   popElement(): void;
   openElement(tag: string, _operations?: ElementOperations): SimpleElement;
   flushElement(modifiers: Nullable<ModifierInstance[]>): void;

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

@@ -3,7 +3,7 @@ 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' | 'keyword';
 
 export interface RenderNode {
   type: RenderNodeType;

packages/@glimmer/node/lib/serialize-builder.ts

@@ -129,7 +129,7 @@ class SerializeBuilder extends NewElementBuilder implements ElementBuilder {
     element: SimpleElement,
     cursorId: string,
     insertBefore: Maybe<SimpleNode> = null
-  ): Nullable<RemoteLiveBlock> {
+  ): RemoteLiveBlock {
     let { dom } = this;
     let script = dom.createElement('script');
     script.setAttribute('glmr', cursorId);

packages/@glimmer/runtime/lib/compiled/opcodes/dom.ts

@@ -19,7 +19,7 @@ import {
   CheckOption,
   CheckString,
 } from '@glimmer/debug';
-import { associateDestroyableChild, destroy } from '@glimmer/destroyable';
+import { associateDestroyableChild, destroy, registerDestructor } from '@glimmer/destroyable';
 import { getInternalModifierManager } from '@glimmer/manager';
 import { createComputeRef, isConstRef, valueForRef } from '@glimmer/reference';
 import { debugToString, expect, isObject } from '@glimmer/util';
@@ -32,6 +32,7 @@ import type { DynamicAttribute } from '../../vm/attributes/dynamic';
 import { isCurriedType, resolveCurriedValue } from '../../curried-value';
 import { APPEND_OPCODES } from '../../opcodes';
 import { CONSTANTS } from '../../symbols';
+import { createCapturedArgs } from '../../vm/arguments';
 import { CheckArguments, CheckOperations, CheckReference } from './-debug-strip';
 import { Assert } from './vm';
 
@@ -71,10 +72,36 @@ APPEND_OPCODES.add(Op.PushRemoteElement, (vm) => {
 
   let block = vm.elements().pushRemoteElement(element, guid, insertBefore);
   if (block) vm.associateDestroyable(block);
+
+  if (vm.env.debugRenderTree !== undefined) {
+    // Note that there is nothing to update – when the args for an
+    // {{#in-element}} changes it gets torn down and a new one is
+    // re-created/rendered in its place (see the `Assert`s above)
+    let args = createCapturedArgs(
+      insertBefore === undefined ? {} : { insertBefore: insertBeforeRef },
+      [elementRef]
+    );
+
+    vm.env.debugRenderTree.create(block, {
+      type: 'keyword',
+      name: 'in-element',
+      args,
+      instance: null,
+    });
+
+    registerDestructor(block, () => {
+      vm.env.debugRenderTree?.willDestroy(block);
+    });
+  }
 });
 
 APPEND_OPCODES.add(Op.PopRemoteElement, (vm) => {
-  vm.elements().popRemoteElement();
+  let bounds = vm.elements().popRemoteElement();
+
+  if (vm.env.debugRenderTree !== undefined) {
+    // The RemoteLiveBlock is also its bounds
+    vm.env.debugRenderTree.didRender(bounds, bounds);
+  }
 });
 
 APPEND_OPCODES.add(Op.FlushElement, (vm) => {

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

@@ -100,7 +100,6 @@ 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();
@@ -214,15 +213,15 @@ export class NewElementBuilder implements ElementBuilder {
     element: SimpleElement,
     guid: string,
     insertBefore: Maybe<SimpleNode>
-  ): Nullable<RemoteLiveBlock> {
+  ): RemoteLiveBlock {
     return this.__pushRemoteElement(element, guid, insertBefore);
   }
 
   __pushRemoteElement(
     element: SimpleElement,
     _guid: string,
     insertBefore: Maybe<SimpleNode>
-  ): Nullable<RemoteLiveBlock> {
+  ): RemoteLiveBlock {
     this.pushElement(element, insertBefore);
 
     if (insertBefore === undefined) {
@@ -236,12 +235,14 @@ export class NewElementBuilder implements ElementBuilder {
     return this.pushLiveBlock(block, true);
   }
 
-  popRemoteElement() {
-    this.popBlock();
+  popRemoteElement(): RemoteLiveBlock {
+    const block = this.popBlock();
+    assert(block instanceof RemoteLiveBlock, '[BUG] expecting a RemoteLiveBlock');
     this.popElement();
+    return block;
   }
 
-  protected pushElement(element: SimpleElement, nextSibling: Maybe<SimpleNode> = null) {
+  protected pushElement(element: SimpleElement, nextSibling: Maybe<SimpleNode> = null): void {
     this[CURSOR_STACK].push(new CursorImpl(element, nextSibling));
   }
 
@@ -268,7 +269,7 @@ export class NewElementBuilder implements ElementBuilder {
     return element;
   }
 
-  willCloseElement() {
+  willCloseElement(): void {
     this.block().closeElement();
   }
 

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

@@ -455,7 +455,7 @@ export class RehydrateBuilder extends NewElementBuilder implements ElementBuilde
     element: SimpleElement,
     cursorId: string,
     insertBefore: Maybe<SimpleNode>
-  ): Nullable<RemoteLiveBlock> {
+  ): RemoteLiveBlock {
     const marker = this.getMarker(castToBrowser(element, 'HTML'), cursorId);
 
     assert(