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,77 @@ 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: '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: 'on',
+        args: { positional: ['click', didInsert], named: {} },
+        instance: (instance: any) => typeof instance === 'object',
+        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: 'did-insert',
+        args: { positional: [didInsert], named: {} },
+        instance: (instance: any) => typeof instance.install === 'function',
+        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 +591,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,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' | 'modifier';
 
 export interface RenderNode {
   type: RenderNodeType;

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

@@ -37,7 +37,7 @@ import {
 } from '@glimmer/debug';
 import { registerDestructor } from '@glimmer/destroyable';
 import { managerHasCapability } from '@glimmer/manager';
-import { isConstRef, valueForRef } from '@glimmer/reference';
+import { createUnboundRef, isConstRef, REFERENCE, valueForRef } from '@glimmer/reference';
 import {
   assert,
   assign,
@@ -489,8 +489,47 @@ export class ComponentElementOperations implements ElementOperations {
     this.attributes[name] = deferred;
   }
 
-  addModifier(modifier: ModifierInstance): void {
+  addModifier(vm: InternalVM, modifier: ModifierInstance, capturedArgs: CapturedArguments): void {
     this.modifiers.push(modifier);
+    const env = vm.env;
+    if (env.debugRenderTree) {
+      const element = vm.elements().constructing!;
+      const name =
+        modifier.definition.resolvedName ||
+        (modifier.state as any).debugName ||
+        (modifier.definition.state as any).name ||
+        'unknown-modifier';
+      const instance = (modifier.state as any).delegate || modifier.manager;
+      const args: any = {
+        positional: [],
+        named: {},
+      };
+      for (const value of capturedArgs.positional) {
+        if (value && value[REFERENCE]) {
+          args.positional.push(value);
+        } else {
+          args.positional.push(createUnboundRef(value, false));
+        }
+      }
+      for (const [key, value] of Object.entries(capturedArgs.named)) {
+        args.named[key] = createUnboundRef(value, false);
+      }
+      env.debugRenderTree.create(modifier.state as any, {
+        type: 'modifier',
+        name,
+        args,
+        instance,
+      });
+      env.debugRenderTree?.didRender(modifier.state as any, {
+        parentElement: () => (element as any).parentElement,
+        firstNode: () => element,
+        lastNode: () => element,
+      });
+      registerDestructor(
+        modifier.state as any,
+        () => vm.env.debugRenderTree?.willDestroy(modifier.state as any)
+      );
+    }
   }
 
   flush(vm: InternalVM): ModifierInstance[] {

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

@@ -117,11 +117,12 @@ APPEND_OPCODES.add(Op.Modifier, (vm, { op1: handle }) => {
 
   let { constructing } = vm.elements();
 
+  let capturedArgs = args.capture();
   let state = manager.create(
     owner,
     expect(constructing, 'BUG: ElementModifier could not find the element it applies to'),
     definition.state,
-    args.capture()
+    capturedArgs
   );
 
   let instance: ModifierInstance = {
@@ -135,7 +136,7 @@ APPEND_OPCODES.add(Op.Modifier, (vm, { op1: handle }) => {
     'BUG: ElementModifier could not find operations to append to'
   );
 
-  operations.addModifier(instance);
+  operations.addModifier(vm, instance, capturedArgs);
 
   let tag = manager.getTag(state);
 
@@ -234,7 +235,7 @@ APPEND_OPCODES.add(Op.DynamicModifier, (vm) => {
       'BUG: ElementModifier could not find operations to append to'
     );
 
-    operations.addModifier(instance);
+    operations.addModifier(vm, instance, args);
 
     tag = instance.manager.getTag(instance.state);