[BUGFIX release] add template to debug render tree

emberjs · Nov 15, 2019 · e1b945b · e1b945b
1 parent 30dfff0
commit e1b945b
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 149 deletions.
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
@@ -145,10 +145,15 @@ export default class CurlyComponentManager
     return factory(owner);
   }
 
-  getDynamicLayout({ component }: ComponentStateBucket): Invocation {
+  getDynamicLayout(bucket: ComponentStateBucket): Invocation {
+    let component = bucket.component;
     let template = this.templateFor(component);
     let layout = template.asWrappedLayout();
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.setTemplate(bucket, template);
+    }
+
     return {
       handle: layout.compile(),
       symbolTable: layout.symbolTable,
@@ -348,6 +353,7 @@ export default class CurlyComponentManager
         name: state.name,
         args: args.capture(),
         instance: component,
+        template: state.template,
       });
     }
 

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts b/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
@@ -277,6 +277,7 @@ export default class CustomComponentManager<ComponentInstance>
         name: definition.name,
         args: args.capture(),
         instance: component,
+        template: definition.template,
       });
     }
 

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/input.ts b/packages/@ember/-internals/glimmer/lib/component-managers/input.ts
@@ -57,7 +57,7 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
 
   create(
     env: Environment,
-    { ComponentClass }: InternalDefinitionState,
+    { ComponentClass, layout }: InternalDefinitionState,
     args: Arguments,
     _dynamicScope: DynamicScope,
     caller: VersionedPathReference
@@ -79,6 +79,7 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
         name: 'input',
         args: args.capture(),
         instance,
+        template: layout,
       });
     }
 

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts b/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
@@ -65,6 +65,10 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
     let template = templateFactory(state.engine);
     let layout = template.asLayout();
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.environment.debugRenderTree.setTemplate(state.controller, template);
+    }
+
     return {
       handle: layout.compile(),
       symbolTable: layout.symbolTable,
@@ -117,13 +121,16 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
         name,
         args: args.capture(),
         instance: engine,
+        template: undefined,
       });
 
       environment.debugRenderTree.create(controller, {
         type: 'route-template',
         name: 'application',
         args: args.capture(),
         instance: controller,
+        // set in getDynamicLayout
+        template: undefined,
       });
     }
 

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
@@ -99,6 +99,7 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
         name: state.outlet.name,
         args: EMPTY_ARGS,
         instance: undefined,
+        template: undefined,
       });
 
       let parentState = parentStateRef.value();
@@ -120,6 +121,7 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
           name: mountPoint,
           args: EMPTY_ARGS,
           instance: engine,
+          template: undefined,
         });
       }
 
@@ -128,6 +130,7 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
         name: definition.name,
         args: args.capture(),
         instance: definition.controller,
+        template: definition.template,
       });
     }
 

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/root.ts b/packages/@ember/-internals/glimmer/lib/component-managers/root.ts
@@ -81,6 +81,7 @@ class RootComponentManager extends CurlyComponentManager {
         name: state.name,
         args: EMPTY_ARGS,
         instance: component,
+        template: state.template,
       });
     }
 

diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts b/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts
@@ -55,7 +55,7 @@ export default class TemplateOnlyComponentManager
 
   create(
     environment: Environment,
-    { name }: TemplateOnlyComponentDefinitionState,
+    { name, template }: TemplateOnlyComponentDefinitionState,
     args: Arguments
   ): Option<DebugStateBucket> {
     if (ENV._DEBUG_RENDER_TREE) {
@@ -65,6 +65,7 @@ export default class TemplateOnlyComponentManager
         name: name,
         args: args.capture(),
         instance: null,
+        template,
       });
       return bucket;
     } else {

diff --git a/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts b/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
@@ -2,6 +2,7 @@ import { assert } from '@ember/debug';
 import { Simple } from '@glimmer/interfaces';
 import { Bounds, CapturedArguments } from '@glimmer/runtime';
 import { expect, Option, Stack } from '@glimmer/util';
+import { OwnedTemplate } from '../template';
 
 export type RenderNodeType = 'outlet' | 'engine' | 'route-template' | 'component';
 
@@ -10,6 +11,7 @@ export interface RenderNode {
   name: string;
   args: CapturedArguments;
   instance: unknown;
+  template?: OwnedTemplate;
 }
 
 interface InternalRenderNode<T extends object> extends RenderNode {
@@ -23,6 +25,7 @@ export interface CapturedRenderNode {
   name: string;
   args: ReturnType<CapturedArguments['value']>;
   instance: unknown;
+  template: Option<string>;
   bounds: Option<{
     parentElement: Simple.Element;
     firstNode: Simple.Node;
@@ -90,6 +93,11 @@ export default class DebugRenderTree<Bucket extends object = object> {
     this.enter(state);
   }
 
+  // for dynamic layouts
+  setTemplate(state: Bucket, template: OwnedTemplate): void {
+    this.nodeFor(state).template = template;
+  }
+
   didRender(state: Bucket, bounds: Bounds): void {
     assert(`BUG: expecting ${this.stack.current}, got ${state}`, this.stack.current === state);
     this.nodeFor(state).bounds = bounds;
@@ -170,9 +178,14 @@ export default class DebugRenderTree<Bucket extends object = object> {
   private captureNode(id: string, state: Bucket): CapturedRenderNode {
     let node = this.nodeFor(state);
     let { type, name, args, instance, refs } = node;
+    let template = this.captureTemplate(node);
     let bounds = this.captureBounds(node);
     let children = this.captureRefs(refs);
-    return { id, type, name, args: args.value(), instance, bounds, children };
+    return { id, type, name, args: args.value(), instance, template, bounds, children };
+  }
+
+  private captureTemplate({ template }: InternalRenderNode<Bucket>): Option<string> {
+    return (template && template.referrer.moduleName) || null;
   }
 
   private captureBounds(node: InternalRenderNode<Bucket>): CapturedRenderNode['bounds'] {