add modifiers to debug render tree

Author: patricklx

packages/@glimmer-workspace/integration-tests/lib/setup-harness.ts

@@ -63,6 +63,19 @@ export async function setupQunit() {
     qunit.moduleDone(pause);
   }
 
+  // @ts-expect-error missing in types, does exist: https://api.qunitjs.com/callbacks/QUnit.on/#the-testend-event
+  QUnit.on('testEnd', (testEnd) => {
+    if (testEnd.status === 'failed') {
+      testEnd.errors.forEach((assertion: any) => {
+        console.error(assertion.stack);
+        // message: speedometer
+        // actual: 75
+        // expected: 88
+        // stack: at dmc.test.js:12
+      });
+    }
+  });
+
   qunit.done(({ failed }) => {
     if (failed > 0) {
       console.log('[HARNESS] fail');

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

@@ -9,7 +9,7 @@ import type {
   SimpleNode,
 } from '@glimmer/interfaces';
 import type { TemplateOnlyComponent } from '@glimmer/runtime';
-import { setComponentTemplate } from '@glimmer/manager';
+import { modifierCapabilities, setComponentTemplate, setModifierManager } from '@glimmer/manager';
 import { EMPTY_ARGS, templateOnlyComponent, TemplateOnlyComponentManager } from '@glimmer/runtime';
 import { assign, expect } from '@glimmer/util';
 
@@ -66,9 +66,27 @@ class DebugRenderTreeDelegate extends JitRenderDelegate {
 
     this.registry.register('component', name, definition);
   }
+
+  registerCustomModifier(name: string) {
+    const r = setModifierManager(
+      () => ({
+        capabilities: modifierCapabilities('3.22'),
+        createModifier() {},
+        installModifier() {},
+        updateModifier() {},
+        destroyModifier() {},
+      }),
+      class DidInsertModifier {}
+    );
+    this.registry.register('modifier', name, r);
+    return r;
+  }
 }
 
 class DebugRenderTreeTest extends RenderTest {
+  defineModifier(name: string) {
+    return this.delegate.registerCustomModifier(name);
+  }
   static suiteName = 'Application test: debug render tree';
 
   declare delegate: DebugRenderTreeDelegate;
@@ -253,6 +271,87 @@ class DebugRenderTreeTest extends RenderTest {
     ]);
   }
 
+  @test modifiers() {
+    this.registerComponent('Glimmer', 'HelloWorld', 'Hello World');
+    const didInsert = () => null;
+    this.registerModifier(
+      'did-insert',
+      class {
+        element?: SimpleElement;
+        didInsertElement() {}
+        didUpdate() {}
+        willDestroyElement() {}
+      }
+    );
+    const modifier = this.defineModifier('did-update');
+
+    this.render(
+      `<div {{on 'click' this.didInsert}} {{did-insert this.didInsert}} {{did-update this.didInsert}} {{this.modifier this.didInsert}}><HelloWorld /></div>`,
+      {
+        didInsert: didInsert,
+        modifier: modifier,
+      }
+    );
+
+    this.assertRenderTree([
+      {
+        type: 'html-element',
+        name: 'div',
+        args: { positional: [], named: {} },
+        instance: (instance: HTMLDivElement) => instance.tagName === 'DIV',
+        template: null,
+        bounds: this.nodeBounds(this.element.firstChild),
+        children: [
+          {
+            type: 'modifier',
+            name: 'did-insert',
+            args: { positional: [didInsert], named: {} },
+            instance: (instance: any) => typeof instance.didInsertElement === 'function',
+            template: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'modifier',
+            name: 'did-update',
+            args: { positional: [didInsert], named: {} },
+            instance: (instance: any) => typeof instance.installModifier === 'function',
+            template: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'modifier',
+            name: 'DidInsertModifier',
+            args: { positional: [didInsert], named: {} },
+            instance: (instance: any) => typeof instance.installModifier === 'function',
+            template: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'modifier',
+            name: 'on',
+            args: { positional: ['click', didInsert], named: {} },
+            instance: (instance: any) => instance === undefined,
+            template: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'HelloWorld',
+            args: { positional: [], named: {} },
+            instance: (instance: any) => instance !== undefined,
+            template: '(unknown template module)',
+            bounds: this.nodeBounds(this.element.firstChild!.firstChild),
+            children: [],
+          },
+        ],
+      },
+    ]);
+  }
+
   @test 'getDebugCustomRenderTree works'() {
     let bucket1 = {};
     let instance1 = {};
@@ -502,7 +601,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,13 @@ 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'
+  | 'html-element'
+  | 'modifier';
 
 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, REFERENCE } 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 htmlElementsState: { shouldAddHtmlElement?: boolean }[];
 
   static forInitialRender(env: Environment, cursor: CursorImpl) {
     return new this(env, cursor.element, cursor.nextSibling).initialize();
@@ -104,6 +106,7 @@ export class NewElementBuilder implements ElementBuilder {
     this.env = env;
     this.dom = env.getAppendOperations();
     this.updateOperations = env.getDOM();
+    this.htmlElementsState = [];
   }
 
   protected initialize(): this {
@@ -195,8 +198,8 @@ export class NewElementBuilder implements ElementBuilder {
     this.constructing = null;
     this.operations = null;
 
-    this.pushModifiers(modifiers);
     this.pushElement(element, null);
+    this.pushModifiers(modifiers);
     this.didOpenElement(element);
   }
 
@@ -205,6 +208,15 @@ export class NewElementBuilder implements ElementBuilder {
   }
 
   closeElement(): Nullable<ModifierInstance[]> {
+    const htmlState = this.htmlElementsState.pop();
+    if (htmlState?.shouldAddHtmlElement) {
+      const element = this.element;
+      this.env.debugRenderTree?.didRender(htmlState, {
+        parentElement: () => (element as any).parentElement,
+        firstNode: () => element,
+        lastNode: () => element,
+      });
+    }
     this.willCloseElement();
     this.popElement();
     return this.popModifiers();
@@ -247,6 +259,59 @@ export class NewElementBuilder implements ElementBuilder {
 
   private pushModifiers(modifiers: Nullable<ModifierInstance[]>): void {
     this.modifierStack.push(modifiers);
+    if (this.env.debugRenderTree) {
+      modifiers = modifiers || [];
+      const htmlState = {
+        shouldAddHtmlElement:
+          modifiers.length || (globalThis as any).ENV_DEBUG_RENDER_TREE_ALL_ELEMENTS,
+      };
+      this.htmlElementsState.push(htmlState);
+      if (htmlState.shouldAddHtmlElement) {
+        this.env.debugRenderTree?.create(htmlState, {
+          type: 'html-element',
+          name: this.element.tagName.toLowerCase(),
+          args: {
+            named: {},
+            positional: [],
+          } as any,
+          instance: this.element,
+        });
+      }
+      for (const modifier of modifiers) {
+        const state = {};
+        const name =
+          modifier.definition.resolvedName ||
+          (modifier.state as any).debugName ||
+          'unknown-modifier';
+        const instance = (modifier.state as any).instance || (modifier.state as any).delegate;
+        const element = this.element;
+        const args: any = {
+          positional: [],
+          named: {},
+        };
+        for (const value of (modifier.state as any).args.positional) {
+          if (value && value[REFERENCE]) {
+            args.positional.push(value);
+          } else {
+            args.positional.push(createUnboundRef(value, false));
+          }
+        }
+        for (const [key, value] of Object.entries((modifier.state as any)?.args.named)) {
+          args.named[key] = createUnboundRef(value, false);
+        }
+        this.env.debugRenderTree?.create(state, {
+          type: 'modifier',
+          name,
+          args: args,
+          instance,
+        });
+        this.env.debugRenderTree?.didRender(state, {
+          parentElement: () => (element as any).parentElement,
+          firstNode: () => element,
+          lastNode: () => element,
+        });
+      }
+    }
   }
 
   private popModifiers(): Nullable<ModifierInstance[]> {