From a828887e02e1bcd5a2503955605da1aebac77bf3 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Fri, 6 Sep 2019 16:55:57 -0700
Subject: [PATCH 1/2] [FEATURE] Introduce debug render tree

1. Before loading Ember, set `ENV._DEBUG_RENDER_TREE = true;`

   This controls whether to perform extra bookkeeping needed to make
   the `captureRenderTree` API work.

   This has to be set before the ember JavaScript code is evaluated.
   This is usually done by setting one of these...

   ```
   window.EmberENV = { _DEBUG_RENDER_TREE: true };
   ```

   ```
   window.ENV = { _DEBUG_RENDER_TREE: true };
   ```

   ...before the "vendor" `<script>` tag in `index.html`.

   Setting the flag after Ember is already loaded will not work
   correctly. It may appear to work somewhat, but fundamentally broken.

   This is not intended to be set directly. Ember Inspector will enable
   the flag on behalf of the user as needed.

   This flag is always on in development mode.

   The flag is off by default in production mode, due to the cost
   associated with the the bookkeeping work.

   The expected flow is that Ember Inspector will ask the user to
   refresh the page after enabling the feature. It could also offer a
   feature where the user add some domains to the "always on" list. In
   either case, Ember Inspector will inject the code on the page to set
   the flag if needed.

2. With the flag on, `Ember._captureRenderTree()` is available.

   It takes the *application instance* as an argument and returns an
   array of `CapturedRenderNode`:

   ```typescript
   interface CapturedRenderNode {
     type: 'outlet' | 'engine' | 'route-template' | 'component';
     name: string;
     args: {
       positional: unknown[];
       named: Dict<unknown>;
     };
     instance: unknown;
     bounds: Option<{
       parentElement: Simple.Element;
       firstNode: Simple.Node;
       lastNode: Simple.Node;
     }>;
     children: CapturedRenderNode[];
   }
   ```

Co-authored-by: Yehuda Katz <wycats@gmail.com>
---
 .eslintrc.js                                  |    1 +
 .../@ember/-internals/environment/lib/env.ts  |   38 +
 packages/@ember/-internals/glimmer/index.ts   |    3 +-
 .../lib/component-managers/abstract.ts        |   23 +-
 .../glimmer/lib/component-managers/curly.ts   |   51 +-
 .../glimmer/lib/component-managers/custom.ts  |   62 +-
 .../glimmer/lib/component-managers/input.ts   |   63 +-
 .../glimmer/lib/component-managers/mount.ts   |  109 +-
 .../glimmer/lib/component-managers/outlet.ts  |  139 +-
 .../glimmer/lib/component-managers/root.ts    |   30 +-
 .../lib/component-managers/template-only.ts   |  101 +-
 .../-internals/glimmer/lib/environment.ts     |   46 +-
 .../@ember/-internals/glimmer/lib/resolver.ts |    4 +-
 .../glimmer/lib/utils/debug-render-tree.ts    |  184 ++
 .../glimmer/lib/utils/debug-stack.ts          |   18 +-
 .../application/debug-render-tree-test.ts     | 1620 +++++++++++++++++
 .../tests/unit/utils/debug-stack-test.js      |    4 +-
 packages/@ember/-internals/owner/index.ts     |    3 +-
 packages/@ember/application/index.d.ts        |    1 -
 packages/@ember/component/template-only.ts    |    2 +-
 packages/@ember/controller/index.d.ts         |    7 +-
 packages/@ember/debug/index.ts                |    1 +
 .../@ember/debug/lib/capture-render-tree.ts   |   28 +
 packages/@ember/engine/index.d.ts             |    9 +
 packages/@ember/engine/instance.d.ts          |    8 +
 .../lib/system/compile-options.ts             |    2 +-
 .../lib/system/compile.ts                     |   16 +-
 .../lib/system/precompile.ts                  |    2 +-
 packages/ember/index.js                       |    3 +-
 packages/ember/tests/reexports_test.js        |    1 +
 tests/docs/expected.js                        |    2 +
 31 files changed, 2449 insertions(+), 132 deletions(-)
 create mode 100644 packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
 create mode 100644 packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
 create mode 100644 packages/@ember/debug/lib/capture-render-tree.ts
 create mode 100644 packages/@ember/engine/index.d.ts
 create mode 100644 packages/@ember/engine/instance.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 8373e0d402e..c59d5867014 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -64,6 +64,7 @@ module.exports = {
       rules: {
         // the TypeScript compiler already takes care of this and
         // leaving it enabled results in false positives for interface imports
+        'no-dupe-class-members': 'off',
         'no-unused-vars': 'off',
         'no-undef': 'off',
 
diff --git a/packages/@ember/-internals/environment/lib/env.ts b/packages/@ember/-internals/environment/lib/env.ts
index 65463301d69..903e07ae309 100644
--- a/packages/@ember/-internals/environment/lib/env.ts
+++ b/packages/@ember/-internals/environment/lib/env.ts
@@ -1,4 +1,5 @@
 import { FUNCTION_PROTOTYPE_EXTENSIONS } from '@ember/deprecated-features';
+import { DEBUG } from '@glimmer/env';
 import global from './global';
 
 /**
@@ -98,6 +99,39 @@ export const ENV = {
   */
   _TEMPLATE_ONLY_GLIMMER_COMPONENTS: false,
 
+  /**
+    Whether to perform extra bookkeeping needed to make the `captureRenderTree`
+    API work.
+
+    This has to be set before the ember JavaScript code is evaluated. This is
+    usually done by setting `window.EmberENV = { _DEBUG_RENDER_TREE: true };`
+    or `window.ENV = { _DEBUG_RENDER_TREE: true };` before the "vendor"
+    `<script>` tag in `index.html`.
+
+    Setting the flag after Ember is already loaded will not work correctly. It
+    may appear to work somewhat, but fundamentally broken.
+
+    This is not intended to be set directly. Ember Inspector will enable the
+    flag on behalf of the user as needed.
+
+    This flag is always on in development mode.
+
+    The flag is off by default in production mode, due to the cost associated
+    with the the bookkeeping work.
+
+    The expected flow is that Ember Inspector will ask the user to refresh the
+    page after enabling the feature. It could also offer a feature where the
+    user add some domains to the "always on" list. In either case, Ember
+    Inspector will inject the code on the page to set the flag if needed.
+
+    @property _DEBUG_RENDER_TREE
+    @for EmberENV
+    @type Boolean
+    @default false
+    @private
+  */
+  _DEBUG_RENDER_TREE: DEBUG,
+
   /**
     Whether the app is using jQuery. See RFC #294.
 
@@ -203,6 +237,10 @@ export const ENV = {
       ENV.FEATURES[feature] = FEATURES[feature] === true;
     }
   }
+
+  if (DEBUG) {
+    ENV._DEBUG_RENDER_TREE = true;
+  }
 })(global.EmberENV || global.ENV);
 
 export function getENV() {
diff --git a/packages/@ember/-internals/glimmer/index.ts b/packages/@ember/-internals/glimmer/index.ts
index b6f4d79a6dd..3af6cac534b 100644
--- a/packages/@ember/-internals/glimmer/index.ts
+++ b/packages/@ember/-internals/glimmer/index.ts
@@ -388,7 +388,7 @@ export { default as AbstractComponentManager } from './lib/component-managers/ab
 // it supports for example
 export { UpdatableReference, INVOKE } from './lib/utils/references';
 export { default as iterableFor } from './lib/utils/iterable';
-export { default as DebugStack } from './lib/utils/debug-stack';
+export { default as getDebugStack, DebugStack } from './lib/utils/debug-stack';
 export { default as OutletView } from './lib/views/outlet';
 export { capabilities } from './lib/component-managers/custom';
 export { setComponentManager, getComponentManager } from './lib/utils/custom-component-manager';
@@ -396,3 +396,4 @@ export { setModifierManager, getModifierManager } from './lib/utils/custom-modif
 export { capabilities as modifierCapabilities } from './lib/modifiers/custom';
 export { isSerializationFirstNode } from './lib/utils/serialization-first-node-helpers';
 export { setComponentTemplate, getComponentTemplate } from './lib/utils/component-template';
+export { CapturedRenderNode } from './lib/utils/debug-render-tree';
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts b/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts
index e53881d85b9..cf5d7012ac0 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts
@@ -1,4 +1,3 @@
-import { DEBUG } from '@glimmer/env';
 import { ComponentCapabilities, Simple } from '@glimmer/interfaces';
 import { Tag, VersionedPathReference } from '@glimmer/reference';
 import {
@@ -11,20 +10,14 @@ import {
   PreparedArguments,
 } from '@glimmer/runtime';
 import { Destroyable, Opaque, Option } from '@glimmer/util';
-import DebugStack from '../utils/debug-stack';
+import { DebugStack } from '../utils/debug-stack';
 
 // implements the ComponentManager interface as defined in glimmer:
 // tslint:disable-next-line:max-line-length
 // https://github.com/glimmerjs/glimmer-vm/blob/v0.24.0-beta.4/packages/%40glimmer/runtime/lib/component/interfaces.ts#L21
 
 export default abstract class AbstractManager<T, U> implements ComponentManager<T, U> {
-  public debugStack: typeof DebugStack;
-  public _pushToDebugStack!: (name: string, environment: any) => void;
-  public _pushEngineToDebugStack!: (name: string, environment: any) => void;
-
-  constructor() {
-    this.debugStack = undefined;
-  }
+  public debugStack: DebugStack | undefined = undefined;
 
   prepareArgs(_state: U, _args: Arguments): Option<PreparedArguments> {
     return null;
@@ -83,15 +76,3 @@ export default abstract class AbstractManager<T, U> implements ComponentManager<
 
   abstract getDestructor(bucket: T): Option<Destroyable>;
 }
-
-if (DEBUG) {
-  AbstractManager.prototype._pushToDebugStack = function(name: string, environment) {
-    this.debugStack = environment.debugStack;
-    this.debugStack.push(name);
-  };
-
-  AbstractManager.prototype._pushEngineToDebugStack = function(name: string, environment) {
-    this.debugStack = environment.debugStack;
-    this.debugStack.pushEngine(name);
-  };
-}
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
index 376f8e5ce51..881b3cc7309 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
@@ -1,4 +1,5 @@
 import { privatize as P } from '@ember/-internals/container';
+import { ENV } from '@ember/-internals/environment';
 import { getOwner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
 import {
@@ -239,7 +240,7 @@ export default class CurlyComponentManager
     hasBlock: boolean
   ): ComponentStateBucket {
     if (DEBUG) {
-      this._pushToDebugStack(`component:${state.name}`, environment);
+      environment.debugStack.push(`component:${state.name}`);
     }
 
     // Get the nearest concrete component instance from the scope. "Virtual"
@@ -275,6 +276,12 @@ export default class CurlyComponentManager
       props.layout = state.template;
     }
 
+    // caller:
+    // <FaIcon @name="bug" />
+    //
+    // callee:
+    // <i class="fa-{{@name}}"></i>
+
     // Now that we've built up all of the properties to set on the component instance,
     // actually create it.
     let component = factory.create(props);
@@ -330,6 +337,15 @@ export default class CurlyComponentManager
       component.trigger('willRender');
     }
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: state.name,
+        args: args.capture(),
+        instance: component,
+      });
+    }
+
     return bucket;
   }
 
@@ -388,8 +404,12 @@ export default class CurlyComponentManager
     bucket.component[BOUNDS] = bounds;
     bucket.finalize();
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
+
     if (DEBUG) {
-      this.debugStack.pop();
+      bucket.environment.debugStack.pop();
     }
   }
 
@@ -408,8 +428,12 @@ export default class CurlyComponentManager
   update(bucket: ComponentStateBucket): void {
     let { component, args, argsRevision, environment } = bucket;
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.update(bucket);
+    }
+
     if (DEBUG) {
-      this._pushToDebugStack(component._debugContainerKey, environment);
+      environment.debugStack.push(component._debugContainerKey);
     }
 
     bucket.finalizer = _instrumentStart('render.component', rerenderInstrumentDetails, component);
@@ -433,11 +457,15 @@ export default class CurlyComponentManager
     }
   }
 
-  didUpdateLayout(bucket: ComponentStateBucket): void {
+  didUpdateLayout(bucket: ComponentStateBucket, bounds: Bounds): void {
     bucket.finalize();
 
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
+
     if (DEBUG) {
-      this.debugStack.pop();
+      bucket.environment.debugStack.pop();
     }
   }
 
@@ -448,8 +476,17 @@ export default class CurlyComponentManager
     }
   }
 
-  getDestructor(stateBucket: ComponentStateBucket): Option<Destroyable> {
-    return stateBucket;
+  getDestructor(bucket: ComponentStateBucket): Option<Destroyable> {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          bucket.environment.debugRenderTree.willDestroy(bucket);
+          bucket.destroy();
+        },
+      };
+    } else {
+      return bucket;
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts b/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
index a9d86e88338..8db08de87c2 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
@@ -15,6 +15,7 @@ import {
 import { createTag, isConst, PathReference, Tag } from '@glimmer/reference';
 import {
   Arguments,
+  Bounds,
   CapturedArguments,
   ComponentDefinition,
   Invocation,
@@ -22,6 +23,7 @@ import {
 } from '@glimmer/runtime';
 import { Destroyable } from '@glimmer/util';
 
+import { ENV } from '@ember/-internals/environment';
 import Environment from '../environment';
 import RuntimeResolver from '../resolver';
 import { OwnedTemplate } from '../template';
@@ -184,7 +186,7 @@ export default class CustomComponentManager<ComponentInstance>
       RuntimeResolver
     > {
   create(
-    _env: Environment,
+    env: Environment,
     definition: CustomComponentDefinitionState<ComponentInstance>,
     args: Arguments
   ): CustomComponentState<ComponentInstance> {
@@ -267,10 +269,27 @@ export default class CustomComponentManager<ComponentInstance>
 
     const component = delegate.createComponent(definition.ComponentClass.class, value);
 
-    return new CustomComponentState(delegate, component, capturedArgs, namedArgsProxy);
+    let bucket = new CustomComponentState(delegate, component, capturedArgs, env, namedArgsProxy);
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      env.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: definition.name,
+        args: args.capture(),
+        instance: component,
+      });
+    }
+
+    return bucket;
   }
 
-  update({ delegate, component, args, namedArgsProxy }: CustomComponentState<ComponentInstance>) {
+  update(bucket: CustomComponentState<ComponentInstance>) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.env.debugRenderTree.update(bucket);
+    }
+
+    let { delegate, component, args, namedArgsProxy } = bucket;
+
     let value;
 
     if (EMBER_CUSTOM_COMPONENT_ARG_PROXY) {
@@ -308,18 +327,34 @@ export default class CustomComponentManager<ComponentInstance>
   }
 
   getDestructor(state: CustomComponentState<ComponentInstance>): Option<Destroyable> {
+    let destructor: Option<Destroyable> = null;
+
     if (hasDestructors(state.delegate)) {
-      return state;
-    } else {
-      return null;
+      destructor = state;
     }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      let inner = destructor;
+
+      destructor = {
+        destroy() {
+          state.env.debugRenderTree.willDestroy(state);
+
+          if (inner) {
+            inner.destroy();
+          }
+        },
+      };
+    }
+
+    return destructor;
   }
 
   getCapabilities({
     delegate,
   }: CustomComponentDefinitionState<ComponentInstance>): ComponentCapabilities {
     return Object.assign({}, CAPABILITIES, {
-      updateHook: delegate.capabilities.updateHook,
+      updateHook: ENV._DEBUG_RENDER_TREE || delegate.capabilities.updateHook,
     });
   }
 
@@ -332,7 +367,17 @@ export default class CustomComponentManager<ComponentInstance>
     }
   }
 
-  didRenderLayout() {}
+  didRenderLayout(bucket: CustomComponentState<ComponentInstance>, bounds: Bounds) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.env.debugRenderTree.didRender(bucket, bounds);
+    }
+  }
+
+  didUpdateLayout(bucket: CustomComponentState<ComponentInstance>, bounds: Bounds) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.env.debugRenderTree.didRender(bucket, bounds);
+    }
+  }
 
   getLayout(state: DefinitionState<ComponentInstance>): Invocation {
     return {
@@ -351,6 +396,7 @@ export class CustomComponentState<ComponentInstance> {
     public delegate: ManagerDelegate<ComponentInstance>,
     public component: ComponentInstance,
     public args: CapturedArguments,
+    public env: Environment,
     public namedArgsProxy?: {}
   ) {}
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/input.ts b/packages/@ember/-internals/glimmer/lib/component-managers/input.ts
index 22f3cf46811..fa0de7ad7f7 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/input.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/input.ts
@@ -1,10 +1,12 @@
+import { ENV } from '@ember/-internals/environment';
 import { set } from '@ember/-internals/metal';
 import { Owner } from '@ember/-internals/owner';
 import { assert, debugFreeze } from '@ember/debug';
 import { ComponentCapabilities, Dict } from '@glimmer/interfaces';
-import { CONSTANT_TAG, isConst, VersionedPathReference } from '@glimmer/reference';
-import { Arguments, DynamicScope, Environment, PreparedArguments } from '@glimmer/runtime';
+import { CONSTANT_TAG, createTag, isConst, VersionedPathReference } from '@glimmer/reference';
+import { Arguments, Bounds, DynamicScope, PreparedArguments } from '@glimmer/runtime';
 import { Destroyable } from '@glimmer/util';
+import Environment from '../environment';
 import { RootReference } from '../utils/references';
 import InternalComponentManager, { InternalDefinitionState } from './internal';
 
@@ -22,6 +24,7 @@ const CAPABILITIES: ComponentCapabilities = {
 };
 
 export interface InputComponentState {
+  env: Environment;
   type: VersionedPathReference;
   instance: Destroyable;
 }
@@ -53,7 +56,7 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
   }
 
   create(
-    _env: Environment,
+    env: Environment,
     { ComponentClass }: InternalDefinitionState,
     args: Arguments,
     _dynamicScope: DynamicScope,
@@ -68,7 +71,18 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
       type: type.value(),
     });
 
-    return { type, instance };
+    let state = { env, type, instance };
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      env.debugRenderTree.create(state, {
+        type: 'component',
+        name: 'input',
+        args: args.capture(),
+        instance,
+      });
+    }
+
+    return state;
   }
 
   getSelf({ instance }: InputComponentState): VersionedPathReference {
@@ -76,15 +90,46 @@ export default class InputComponentManager extends InternalComponentManager<Inpu
   }
 
   getTag() {
-    return CONSTANT_TAG;
+    if (ENV._DEBUG_RENDER_TREE) {
+      // returning a const tag skips the update hook (VM BUG?)
+      return createTag();
+    } else {
+      // an outlet has no hooks
+      return CONSTANT_TAG;
+    }
+  }
+
+  didRenderLayout(state: InputComponentState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.env.debugRenderTree.didRender(state, bounds);
+    }
+  }
+
+  update(state: InputComponentState): void {
+    set(state.instance, 'type', state.type.value());
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.env.debugRenderTree.update(state);
+    }
   }
 
-  update({ type, instance }: InputComponentState): void {
-    set(instance, 'type', type.value());
+  didUpdateLayout(state: InputComponentState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.env.debugRenderTree.didRender(state, bounds);
+    }
   }
 
-  getDestructor({ instance }: InputComponentState): Destroyable {
-    return instance;
+  getDestructor(state: InputComponentState): Destroyable {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          state.env.debugRenderTree.willDestroy(state);
+          state.instance.destroy();
+        },
+      };
+    } else {
+      return state.instance;
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts b/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
index cd294e3148e..0f9c7ae1a0d 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/mount.ts
@@ -1,31 +1,38 @@
 import { DEBUG } from '@glimmer/env';
 import { ComponentCapabilities } from '@glimmer/interfaces';
-import { CONSTANT_TAG, Tag, VersionedPathReference } from '@glimmer/reference';
-import { Arguments, ComponentDefinition, Invocation, WithDynamicLayout } from '@glimmer/runtime';
+import {
+  CONSTANT_TAG,
+  createTag,
+  isConstTag,
+  Tag,
+  VersionedPathReference,
+} from '@glimmer/reference';
+import {
+  Arguments,
+  Bounds,
+  ComponentDefinition,
+  Invocation,
+  WithDynamicLayout,
+} from '@glimmer/runtime';
 import { Destroyable, Opaque, Option } from '@glimmer/util';
 
-import { Owner } from '@ember/-internals/owner';
 import { generateControllerFactory } from '@ember/-internals/routing';
 import { OwnedTemplateMeta } from '@ember/-internals/views';
 import { EMBER_ROUTING_MODEL_ARG } from '@ember/canary-features';
-import { assert } from '@ember/debug';
 
+import { ENV } from '@ember/-internals/environment';
+import EngineInstance from '@ember/engine/instance';
 import { TemplateFactory } from '../..';
 import Environment from '../environment';
 import RuntimeResolver from '../resolver';
 import { RootReference } from '../utils/references';
 import AbstractManager from './abstract';
 
-// TODO: remove these stubbed interfaces when better typing is in place
-interface EngineInstance extends Owner {
-  boot(): void;
-  destroy(): void;
-}
-
 interface EngineState {
   engine: EngineInstance;
   controller: any;
   self: RootReference<any>;
+  environment: Environment;
   modelRef?: VersionedPathReference<Opaque>;
 }
 
@@ -70,7 +77,7 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
 
   create(environment: Environment, { name }: EngineDefinitionState, args: Arguments) {
     if (DEBUG) {
-      this._pushEngineToDebugStack(`engine:${name}`, environment);
+      environment.debugStack.pushEngine(`engine:${name}`);
     }
 
     // TODO
@@ -78,7 +85,7 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
     // we should resolve the engine app template in the helper
     // it also should use the owner that looked up the mount helper.
 
-    let engine = environment.owner.buildChildEngineInstance<EngineInstance>(name);
+    let engine = environment.owner.buildChildEngineInstance(name);
 
     engine.boot();
 
@@ -96,12 +103,28 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
     if (modelRef === undefined) {
       controller = controllerFactory.create();
       self = new RootReference(controller);
-      bucket = { engine, controller, self };
+      bucket = { engine, controller, self, environment };
     } else {
       let model = modelRef.value();
       controller = controllerFactory.create({ model });
       self = new RootReference(controller);
-      bucket = { engine, controller, self, modelRef };
+      bucket = { engine, controller, self, modelRef, environment };
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.create(bucket, {
+        type: 'engine',
+        name,
+        args: args.capture(),
+        instance: engine,
+      });
+
+      environment.debugRenderTree.create(controller, {
+        type: 'route-template',
+        name: 'application',
+        args: args.capture(),
+        instance: controller,
+      });
     }
 
     return bucket;
@@ -112,26 +135,64 @@ class MountManager extends AbstractManager<EngineState, EngineDefinitionState>
   }
 
   getTag(state: EngineState): Tag {
+    let tag: Tag = CONSTANT_TAG;
+
     if (state.modelRef) {
-      return state.modelRef.tag;
-    } else {
-      return CONSTANT_TAG;
+      tag = state.modelRef.tag;
+    }
+
+    if (ENV._DEBUG_RENDER_TREE && isConstTag(tag)) {
+      tag = createTag();
     }
+
+    return tag;
   }
 
-  getDestructor({ engine }: EngineState): Option<Destroyable> {
-    return engine;
+  getDestructor(bucket: EngineState): Option<Destroyable> {
+    let { engine, environment, controller } = bucket;
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          environment.debugRenderTree.willDestroy(controller);
+          environment.debugRenderTree.willDestroy(bucket);
+          engine.destroy();
+        },
+      };
+    } else {
+      return engine;
+    }
   }
 
-  didRenderLayout(): void {
+  didRenderLayout(bucket: EngineState, bounds: Bounds): void {
     if (DEBUG) {
-      this.debugStack.pop();
+      bucket.environment.debugStack.pop();
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket.controller, bounds);
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
+  }
+
+  update(bucket: EngineState): void {
+    let { controller, environment, modelRef } = bucket;
+
+    if (modelRef !== undefined) {
+      controller.set('model', modelRef!.value());
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.update(bucket);
+      environment.debugRenderTree.update(bucket.controller);
     }
   }
 
-  update({ controller, modelRef }: EngineState): void {
-    assert('[BUG] `update` should only be called when modelRef is present', modelRef !== undefined);
-    controller.set('model', modelRef!.value());
+  didUpdateLayout(bucket: EngineState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket.environment.debugRenderTree.didRender(bucket.controller, bounds);
+      bucket.environment.debugRenderTree.didRender(bucket, bounds);
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
index b9ed4d57ef6..097733c7cde 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts
@@ -1,21 +1,25 @@
 import { ENV } from '@ember/-internals/environment';
 import { guidFor } from '@ember/-internals/utils';
 import { OwnedTemplateMeta } from '@ember/-internals/views';
+import { assert } from '@ember/debug';
+import EngineInstance from '@ember/engine/instance';
 import { _instrumentStart } from '@ember/instrumentation';
 import { assign } from '@ember/polyfills';
 import { DEBUG } from '@glimmer/env';
 import { ComponentCapabilities, Option, Simple } from '@glimmer/interfaces';
-import { CONSTANT_TAG, Tag, VersionedPathReference } from '@glimmer/reference';
+import { CONSTANT_TAG, createTag, Tag, VersionedPathReference } from '@glimmer/reference';
 import {
   Arguments,
+  Bounds,
   ComponentDefinition,
   ElementOperations,
-  Environment,
+  EMPTY_ARGS,
   Invocation,
   WithDynamicTagName,
   WithStaticLayout,
 } from '@glimmer/runtime';
 import { Destroyable } from '@glimmer/util';
+import Environment from '../environment';
 import { DynamicScope } from '../renderer';
 import RuntimeResolver from '../resolver';
 import { OwnedTemplate } from '../template';
@@ -30,6 +34,9 @@ function instrumentationPayload(def: OutletDefinitionState) {
 
 interface OutletInstanceState {
   self: VersionedPathReference<any | undefined>;
+  environment: Environment;
+  outlet?: { name: string };
+  engine?: { mountPoint: string };
   finalize: () => void;
 }
 
@@ -46,12 +53,12 @@ const CAPABILITIES: ComponentCapabilities = {
   dynamicLayout: false,
   dynamicTag: false,
   prepareArgs: false,
-  createArgs: false,
+  createArgs: ENV._DEBUG_RENDER_TREE,
   attributeHook: false,
   elementHook: false,
-  createCaller: true,
+  createCaller: false,
   dynamicScope: true,
-  updateHook: false,
+  updateHook: ENV._DEBUG_RENDER_TREE,
   createInstance: true,
 };
 
@@ -66,18 +73,65 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
   create(
     environment: Environment,
     definition: OutletDefinitionState,
-    _args: Arguments,
+    args: Arguments,
     dynamicScope: DynamicScope
-  ) {
+  ): OutletInstanceState {
     if (DEBUG) {
-      this._pushToDebugStack(`template:${definition.template.referrer.moduleName}`, environment);
+      environment.debugStack.push(`template:${definition.template.referrer.moduleName}`);
     }
-    dynamicScope.outletState = definition.ref;
 
-    return {
+    let parentStateRef = dynamicScope.outletState;
+    let currentStateRef = definition.ref;
+
+    dynamicScope.outletState = currentStateRef;
+
+    let state: OutletInstanceState = {
       self: RootReference.create(definition.controller),
+      environment,
       finalize: _instrumentStart('render.outlet', instrumentationPayload, definition),
     };
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.outlet = { name: definition.outlet };
+
+      environment.debugRenderTree.create(state.outlet, {
+        type: 'outlet',
+        name: state.outlet.name,
+        args: EMPTY_ARGS,
+        instance: undefined,
+      });
+
+      let parentState = parentStateRef.value();
+      let parentOwner = parentState && parentState.render && parentState.render.owner;
+      let currentOwner = currentStateRef.value()!.render!.owner;
+
+      if (parentOwner && parentOwner !== currentOwner) {
+        let engine = currentOwner as EngineInstance;
+
+        assert('invalid engine: missing mountPoint', typeof currentOwner.mountPoint === 'string');
+        assert('invalid engine: missing routable', currentOwner.routable === true);
+
+        let mountPoint = engine.mountPoint!;
+
+        state.engine = { mountPoint };
+
+        environment.debugRenderTree.create(state.engine, {
+          type: 'engine',
+          name: mountPoint,
+          args: EMPTY_ARGS,
+          instance: engine,
+        });
+      }
+
+      environment.debugRenderTree.create(state, {
+        type: 'route-template',
+        name: definition.name,
+        args: args.capture(),
+        instance: definition.controller,
+      });
+    }
+
+    return state;
   }
 
   getLayout({ template }: OutletDefinitionState, _resolver: RuntimeResolver): Invocation {
@@ -98,20 +152,73 @@ class OutletComponentManager extends AbstractManager<OutletInstanceState, Outlet
   }
 
   getTag(): Tag {
-    // an outlet has no hooks
-    return CONSTANT_TAG;
+    if (ENV._DEBUG_RENDER_TREE) {
+      // returning a const tag skips the update hook (VM BUG?)
+      return createTag();
+    } else {
+      // an outlet has no hooks
+      return CONSTANT_TAG;
+    }
   }
 
-  didRenderLayout(state: OutletInstanceState) {
+  didRenderLayout(state: OutletInstanceState, bounds: Bounds): void {
     state.finalize();
 
     if (DEBUG) {
-      this.debugStack.pop();
+      state.environment.debugStack.pop();
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.environment.debugRenderTree.didRender(state, bounds);
+
+      if (state.engine) {
+        state.environment.debugRenderTree.didRender(state.engine, bounds);
+      }
+
+      state.environment.debugRenderTree.didRender(state.outlet!, bounds);
+    }
+  }
+
+  update(state: OutletInstanceState): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.environment.debugRenderTree.update(state.outlet!);
+
+      if (state.engine) {
+        state.environment.debugRenderTree.update(state.engine);
+      }
+
+      state.environment.debugRenderTree.update(state);
     }
   }
 
-  getDestructor(): Option<Destroyable> {
-    return null;
+  didUpdateLayout(state: OutletInstanceState, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      state.environment.debugRenderTree.didRender(state, bounds);
+
+      if (state.engine) {
+        state.environment.debugRenderTree.didRender(state.engine, bounds);
+      }
+
+      state.environment.debugRenderTree.didRender(state.outlet!, bounds);
+    }
+  }
+
+  getDestructor(state: OutletInstanceState): Option<Destroyable> {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          state.environment.debugRenderTree.willDestroy(state);
+
+          if (state.engine) {
+            state.environment.debugRenderTree.willDestroy(state.engine);
+          }
+
+          state.environment.debugRenderTree.willDestroy(state.outlet!);
+        },
+      };
+    } else {
+      return null;
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/root.ts b/packages/@ember/-internals/glimmer/lib/component-managers/root.ts
index 813578f7802..d21ce11bbd3 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/root.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/root.ts
@@ -1,9 +1,10 @@
 import { FACTORY_FOR } from '@ember/-internals/container';
+import { ENV } from '@ember/-internals/environment';
 import { Factory } from '@ember/-internals/owner';
 import { _instrumentStart } from '@ember/instrumentation';
 import { DEBUG } from '@glimmer/env';
-import { ComponentCapabilities } from '@glimmer/interfaces';
-import { Arguments, ComponentDefinition } from '@glimmer/runtime';
+import { ComponentCapabilities, Option } from '@glimmer/interfaces';
+import { Arguments, ComponentDefinition, EMPTY_ARGS } from '@glimmer/runtime';
 import { DIRTY_TAG } from '../component';
 import Environment from '../environment';
 import { DynamicScope } from '../renderer';
@@ -33,14 +34,14 @@ class RootComponentManager extends CurlyComponentManager {
 
   create(
     environment: Environment,
-    _state: DefinitionState,
-    _args: Arguments | null,
+    state: DefinitionState,
+    _args: Option<Arguments>,
     dynamicScope: DynamicScope
   ) {
     let component = this.component;
 
     if (DEBUG) {
-      this._pushToDebugStack((component as any)._debugContainerKey, environment);
+      environment.debugStack.push((component as any)._debugContainerKey);
     }
 
     let finalizer = _instrumentStart('render.component', initialRenderInstrumentDetails, component);
@@ -66,7 +67,24 @@ class RootComponentManager extends CurlyComponentManager {
       processComponentInitializationAssertions(component, {});
     }
 
-    return new ComponentStateBucket(environment, component, null, finalizer, hasWrappedElement);
+    let bucket = new ComponentStateBucket(
+      environment,
+      component,
+      null,
+      finalizer,
+      hasWrappedElement
+    );
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      environment.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: state.name,
+        args: EMPTY_ARGS,
+        instance: component,
+      });
+    }
+
+    return bucket;
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts b/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts
index 2c6b3606f06..acc159c07df 100644
--- a/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts
+++ b/packages/@ember/-internals/glimmer/lib/component-managers/template-only.ts
@@ -1,12 +1,16 @@
+import { ENV } from '@ember/-internals/environment';
 import { OwnedTemplateMeta } from '@ember/-internals/views';
-import { ComponentCapabilities } from '@glimmer/interfaces';
-import { CONSTANT_TAG } from '@glimmer/reference';
+import { ComponentCapabilities, Option } from '@glimmer/interfaces';
+import { CONSTANT_TAG, createTag } from '@glimmer/reference';
 import {
+  Arguments,
+  Bounds,
   ComponentDefinition,
   Invocation,
   NULL_REFERENCE,
   WithStaticLayout,
 } from '@glimmer/runtime';
+import Environment from '../environment';
 import RuntimeResolver from '../resolver';
 import { OwnedTemplate } from '../template';
 import AbstractManager from './abstract';
@@ -15,18 +19,29 @@ const CAPABILITIES: ComponentCapabilities = {
   dynamicLayout: false,
   dynamicTag: false,
   prepareArgs: false,
-  createArgs: false,
+  createArgs: ENV._DEBUG_RENDER_TREE,
   attributeHook: false,
   elementHook: false,
   createCaller: false,
   dynamicScope: false,
-  updateHook: false,
+  updateHook: ENV._DEBUG_RENDER_TREE,
   createInstance: true,
 };
 
-export default class TemplateOnlyComponentManager extends AbstractManager<null, OwnedTemplate>
-  implements WithStaticLayout<null, OwnedTemplate, OwnedTemplateMeta, RuntimeResolver> {
-  getLayout(template: OwnedTemplate): Invocation {
+export interface DebugStateBucket {
+  environment: Environment;
+}
+
+export default class TemplateOnlyComponentManager
+  extends AbstractManager<Option<DebugStateBucket>, TemplateOnlyComponentDefinitionState>
+  implements
+    WithStaticLayout<
+      Option<DebugStateBucket>,
+      TemplateOnlyComponentDefinitionState,
+      OwnedTemplateMeta,
+      RuntimeResolver
+    > {
+  getLayout({ template }: TemplateOnlyComponentDefinitionState): Invocation {
     const layout = template.asLayout();
     return {
       handle: layout.compile(),
@@ -38,8 +53,23 @@ export default class TemplateOnlyComponentManager extends AbstractManager<null,
     return CAPABILITIES;
   }
 
-  create(): null {
-    return null;
+  create(
+    environment: Environment,
+    { name }: TemplateOnlyComponentDefinitionState,
+    args: Arguments
+  ): Option<DebugStateBucket> {
+    if (ENV._DEBUG_RENDER_TREE) {
+      let bucket = { environment };
+      environment.debugRenderTree.create(bucket, {
+        type: 'component',
+        name: name,
+        args: args.capture(),
+        instance: null,
+      });
+      return bucket;
+    } else {
+      return null;
+    }
   }
 
   getSelf() {
@@ -47,18 +77,61 @@ export default class TemplateOnlyComponentManager extends AbstractManager<null,
   }
 
   getTag() {
-    return CONSTANT_TAG;
+    if (ENV._DEBUG_RENDER_TREE) {
+      // returning a const tag skips the update hook (VM BUG?)
+      return createTag();
+    } else {
+      // an outlet has no hooks
+      return CONSTANT_TAG;
+    }
+  }
+
+  getDestructor(bucket: Option<DebugStateBucket>) {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return {
+        destroy() {
+          bucket!.environment.debugRenderTree.willDestroy(bucket!);
+        },
+      };
+    } else {
+      return null;
+    }
+  }
+
+  didRenderLayout(bucket: Option<DebugStateBucket>, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket!.environment.debugRenderTree.didRender(bucket!, bounds);
+    }
   }
 
-  getDestructor() {
-    return null;
+  update(bucket: Option<DebugStateBucket>): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket!.environment.debugRenderTree.update(bucket!);
+    }
+  }
+
+  didUpdateLayout(bucket: Option<DebugStateBucket>, bounds: Bounds): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      bucket!.environment.debugRenderTree.didRender(bucket!, bounds);
+    }
   }
 }
 
 const MANAGER = new TemplateOnlyComponentManager();
 
+export interface TemplateOnlyComponentDefinitionState {
+  name: string;
+  template: OwnedTemplate;
+}
+
 export class TemplateOnlyComponentDefinition
-  implements ComponentDefinition<OwnedTemplate, TemplateOnlyComponentManager> {
+  implements
+    TemplateOnlyComponentDefinitionState,
+    ComponentDefinition<TemplateOnlyComponentDefinitionState, TemplateOnlyComponentManager> {
   manager = MANAGER;
-  constructor(public state: OwnedTemplate) {}
+  constructor(public name: string, public template: OwnedTemplate) {}
+
+  get state(): TemplateOnlyComponentDefinitionState {
+    return this;
+  }
 }
diff --git a/packages/@ember/-internals/glimmer/lib/environment.ts b/packages/@ember/-internals/glimmer/lib/environment.ts
index 65b9e3213fb..09ad3910b05 100644
--- a/packages/@ember/-internals/glimmer/lib/environment.ts
+++ b/packages/@ember/-internals/glimmer/lib/environment.ts
@@ -10,14 +10,16 @@ import {
   SimpleDynamicAttribute,
 } from '@glimmer/runtime';
 import { Destroyable, Opaque } from '@glimmer/util';
-import DebugStack from './utils/debug-stack';
+import getDebugStack, { DebugStack } from './utils/debug-stack';
 import createIterable from './utils/iterable';
 import { ConditionalReference, UpdatableReference } from './utils/references';
 import { isHTMLSafe } from './utils/string';
 
 import installPlatformSpecificProtocolForURL from './protocol-for-url';
 
+import { ENV } from '@ember/-internals/environment';
 import { OwnedTemplate } from './template';
+import DebugRenderTree from './utils/debug-render-tree';
 
 export interface CompilerFactory {
   id: string;
@@ -33,13 +35,17 @@ export default class Environment extends GlimmerEnvironment {
   public isInteractive: boolean;
   public destroyedComponents: Destroyable[];
 
-  public debugStack: typeof DebugStack;
+  private _debugStack: DebugStack | undefined;
+  private _debugRenderTree: DebugRenderTree | undefined;
   public inTransaction = false;
 
   constructor(injections: any) {
     super(injections);
-    this.owner = injections[OWNER];
-    this.isInteractive = this.owner.lookup<any>('-environment:main').isInteractive;
+
+    let owner: Owner = injections[OWNER];
+
+    this.owner = owner;
+    this.isInteractive = owner.lookup<any>('-environment:main').isInteractive;
 
     // can be removed once https://github.com/tildeio/glimmer/pull/305 lands
     this.destroyedComponents = [];
@@ -47,7 +53,29 @@ export default class Environment extends GlimmerEnvironment {
     installPlatformSpecificProtocolForURL(this);
 
     if (DEBUG) {
-      this.debugStack = new DebugStack();
+      this._debugStack = getDebugStack();
+    }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      this._debugRenderTree = new DebugRenderTree();
+    }
+  }
+
+  get debugStack(): DebugStack {
+    if (DEBUG) {
+      return this._debugStack!;
+    } else {
+      throw new Error("Can't access debug stack outside of debug mode");
+    }
+  }
+
+  get debugRenderTree(): DebugRenderTree {
+    if (ENV._DEBUG_RENDER_TREE) {
+      return this._debugRenderTree!;
+    } else {
+      throw new Error(
+        "Can't access debug render tree outside of the inspector (_DEBUG_RENDER_TREE flag is disabled)"
+      );
     }
   }
 
@@ -82,6 +110,10 @@ export default class Environment extends GlimmerEnvironment {
   }
 
   begin(): void {
+    if (ENV._DEBUG_RENDER_TREE) {
+      this.debugRenderTree.begin();
+    }
+
     this.inTransaction = true;
 
     super.begin();
@@ -102,6 +134,10 @@ export default class Environment extends GlimmerEnvironment {
     } finally {
       this.inTransaction = false;
     }
+
+    if (ENV._DEBUG_RENDER_TREE) {
+      this.debugRenderTree.commit();
+    }
   }
 }
 
diff --git a/packages/@ember/-internals/glimmer/lib/resolver.ts b/packages/@ember/-internals/glimmer/lib/resolver.ts
index 19d342c68ed..89603e35e98 100644
--- a/packages/@ember/-internals/glimmer/lib/resolver.ts
+++ b/packages/@ember/-internals/glimmer/lib/resolver.ts
@@ -436,13 +436,13 @@ export default class RuntimeResolver implements IRuntimeResolver<OwnedTemplateMe
 
     if (pair.component === null) {
       if (ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS) {
-        definition = new TemplateOnlyComponentDefinition(layout!);
+        definition = new TemplateOnlyComponentDefinition(name, layout!);
       }
     } else if (
       EMBER_GLIMMER_SET_COMPONENT_TEMPLATE &&
       isTemplateOnlyComponent(pair.component.class)
     ) {
-      definition = new TemplateOnlyComponentDefinition(layout!);
+      definition = new TemplateOnlyComponentDefinition(name, layout!);
     }
 
     if (pair.component !== null) {
diff --git a/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts b/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
new file mode 100644
index 00000000000..984f7876f1c
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
@@ -0,0 +1,184 @@
+import { assert } from '@ember/debug';
+import { Simple } from '@glimmer/interfaces';
+import { Bounds, CapturedArguments } from '@glimmer/runtime';
+import { expect, Option, Stack } from '@glimmer/util';
+
+export type RenderNodeType = 'outlet' | 'engine' | 'route-template' | 'component';
+
+export interface RenderNode {
+  type: RenderNodeType;
+  name: string;
+  args: CapturedArguments;
+  instance: unknown;
+}
+
+interface InternalRenderNode<T extends object> extends RenderNode {
+  bounds: Option<Bounds>;
+  refs: Set<Ref<T>>;
+}
+
+export interface CapturedRenderNode {
+  type: RenderNodeType;
+  name: string;
+  args: ReturnType<CapturedArguments['value']>;
+  instance: unknown;
+  bounds: Option<{
+    parentElement: Simple.Element;
+    firstNode: Simple.Node;
+    lastNode: Simple.Node;
+  }>;
+  children: CapturedRenderNode[];
+}
+
+let GUID = 0;
+
+export class Ref<T extends object> {
+  private id: number = GUID++;
+  private value: Option<T>;
+
+  constructor(value: T) {
+    this.value = value;
+  }
+
+  get(): Option<T> {
+    return this.value;
+  }
+
+  release(): void {
+    assert('BUG: double release?', this.value !== null);
+    this.value = null;
+  }
+
+  toString(): String {
+    let label = `Ref ${this.id}`;
+
+    if (this.value === null) {
+      return `${label} (released)`;
+    } else {
+      try {
+        return `${label}: ${this.value}`;
+      } catch {
+        return label;
+      }
+    }
+  }
+}
+
+export default class DebugRenderTree<Bucket extends object = object> {
+  private stack = new Stack<Bucket>();
+
+  private refs = new WeakMap<Bucket, Ref<Bucket>>();
+  private roots = new Set<Ref<Bucket>>();
+  private nodes = new WeakMap<Bucket, InternalRenderNode<Bucket>>();
+
+  begin(): void {
+    this.reset();
+  }
+
+  create(state: Bucket, node: RenderNode): void {
+    this.nodes.set(state, {
+      ...node,
+      bounds: null,
+      refs: new Set(),
+    });
+    this.appendChild(state);
+    this.enter(state);
+  }
+
+  update(state: Bucket): void {
+    this.enter(state);
+  }
+
+  didRender(state: Bucket, bounds: Bounds): void {
+    assert(`BUG: expecting ${this.stack.current}, got ${state}`, this.stack.current === state);
+    this.nodeFor(state).bounds = bounds;
+    this.exit();
+  }
+
+  willDestroy(state: Bucket): void {
+    expect(this.refs.get(state), 'BUG: missing ref').release();
+  }
+
+  commit(): void {
+    this.reset();
+  }
+
+  capture(): CapturedRenderNode[] {
+    return this.captureRefs(this.roots);
+  }
+
+  private reset(): void {
+    if (this.stack.size !== 0) {
+      // We probably encountered an error during the rendering loop. This will
+      // likely trigger undefined behavior and memory leaks as the error left
+      // things in an inconsistent state. It is recommended that the user
+      // refresh the page.
+
+      // TODO: We could warn here? But this happens all the time in our tests?
+
+      while (!this.stack.isEmpty()) {
+        this.stack.pop();
+      }
+    }
+  }
+
+  private enter(state: Bucket): void {
+    this.stack.push(state);
+  }
+
+  private exit(): void {
+    assert('BUG: unbalanced pop', this.stack.size !== 0);
+    this.stack.pop();
+  }
+
+  private nodeFor(state: Bucket): InternalRenderNode<Bucket> {
+    return expect(this.nodes.get(state), 'BUG: missing node');
+  }
+
+  private appendChild(state: Bucket): void {
+    assert('BUG: child already appended', !this.refs.has(state));
+
+    let parent = this.stack.current;
+    let ref = new Ref(state);
+
+    this.refs.set(state, ref);
+
+    if (parent) {
+      this.nodeFor(parent).refs.add(ref);
+    } else {
+      this.roots.add(ref);
+    }
+  }
+
+  private captureRefs(refs: Set<Ref<Bucket>>): CapturedRenderNode[] {
+    let captured: CapturedRenderNode[] = [];
+
+    refs.forEach(ref => {
+      let state = ref.get();
+
+      if (state) {
+        captured.push(this.captureNode(state));
+      } else {
+        refs.delete(ref);
+      }
+    });
+
+    return captured;
+  }
+
+  private captureNode(state: Bucket): CapturedRenderNode {
+    let node = this.nodeFor(state);
+    let { type, name, args, instance, refs } = node;
+    let bounds = this.captureBounds(node);
+    let children = this.captureRefs(refs);
+    return { type, name, args: args.value(), instance, bounds, children };
+  }
+
+  private captureBounds(node: InternalRenderNode<Bucket>): CapturedRenderNode['bounds'] {
+    let bounds = expect(node.bounds, 'BUG: missing bounds');
+    let parentElement = bounds.parentElement();
+    let firstNode = bounds.firstNode();
+    let lastNode = bounds.lastNode();
+    return { parentElement, firstNode, lastNode };
+  }
+}
diff --git a/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts b/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts
index 72df23ac3a9..535e72dbcae 100644
--- a/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts
+++ b/packages/@ember/-internals/glimmer/lib/utils/debug-stack.ts
@@ -2,7 +2,16 @@
 
 import { DEBUG } from '@glimmer/env';
 
-let DebugStack: any;
+export interface DebugStack {
+  push(name: string): void;
+  pushEngine(name: string): void;
+  pop(): string | void;
+  peek(): string | void;
+}
+
+let getDebugStack: () => DebugStack = () => {
+  throw new Error("Can't access the DebugStack class outside of debug mode");
+};
 
 if (DEBUG) {
   class Element {
@@ -12,8 +21,7 @@ if (DEBUG) {
   class TemplateElement extends Element {}
   class EngineElement extends Element {}
 
-  // tslint:disable-next-line:no-shadowed-variable
-  DebugStack = class DebugStack {
+  let DebugStackImpl = class DebugStackImpl implements DebugStack {
     private _stack: TemplateElement[] = [];
 
     push(name: string) {
@@ -60,6 +68,8 @@ if (DEBUG) {
       }
     }
   };
+
+  getDebugStack = () => new DebugStackImpl();
 }
 
-export default DebugStack;
+export default getDebugStack;
diff --git a/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
new file mode 100644
index 00000000000..a527c6de7e6
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.ts
@@ -0,0 +1,1620 @@
+import { ApplicationTestCase, moduleFor, strip } from 'internal-test-helpers';
+
+import { ENV } from '@ember/-internals/environment';
+import {
+  capabilities,
+  CapturedRenderNode,
+  Component,
+  setComponentManager,
+  setComponentTemplate,
+} from '@ember/-internals/glimmer';
+import { EngineInstanceOptions, Owner } from '@ember/-internals/owner';
+import { Route } from '@ember/-internals/routing';
+import templateOnly from '@ember/component/template-only';
+import Controller from '@ember/controller';
+import { captureRenderTree } from '@ember/debug';
+import Engine from '@ember/engine';
+import EngineInstance from '@ember/engine/instance';
+import { Simple } from '@glimmer/interfaces';
+import { expect } from '@glimmer/util';
+import { compile } from 'ember-template-compiler';
+import { runTask } from 'internal-test-helpers/lib/run';
+
+interface CapturedBounds {
+  parentElement: Simple.Element;
+  firstNode: Simple.Node;
+  lastNode: Simple.Node;
+}
+
+type Expected<T> = T | ((actual: T) => boolean);
+
+function isExpectedFunc<T>(expected: Expected<T>): expected is (actual: T) => boolean {
+  return typeof expected === 'function';
+}
+
+interface ExpectedRenderNode {
+  type: CapturedRenderNode['type'];
+  name: CapturedRenderNode['name'];
+  args: Expected<CapturedRenderNode['args']>;
+  instance: Expected<CapturedRenderNode['instance']>;
+  bounds: Expected<CapturedRenderNode['bounds']>;
+  children: Expected<CapturedRenderNode['children']> | ExpectedRenderNode[];
+}
+
+if (ENV._DEBUG_RENDER_TREE) {
+  moduleFor(
+    'Application test: debug render tree',
+    class extends ApplicationTestCase {
+      constructor() {
+        super(...arguments);
+        this._TEMPLATE_ONLY_GLIMMER_COMPONENTS = ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS;
+        ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = true;
+      }
+
+      teardown() {
+        super.teardown();
+        ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = this._TEMPLATE_ONLY_GLIMMER_COMPONENTS;
+      }
+
+      async '@test routes'() {
+        this.addTemplate('index', 'Index');
+        this.addTemplate('foo', 'Foo {{outlet}}');
+        this.addTemplate('foo.index', 'index');
+        this.addTemplate('foo.inner', '{{@model}}');
+        this.addTemplate('bar', 'Bar {{outlet}}');
+        this.addTemplate('bar.index', 'index');
+        this.addTemplate('bar.inner', '{{@model}}');
+
+        this.router.map(function(this: any) {
+          this.route('foo', function(this: any) {
+            this.route('inner', { path: '/:model' });
+          });
+          this.route('foo', function(this: any) {
+            this.route('inner', { path: '/:model' });
+          });
+        });
+
+        class PassThroughRoute extends Route {
+          model({ model }: { model: string }) {
+            return model;
+          }
+        }
+
+        this.add('route:foo.inner', PassThroughRoute);
+        this.add('route:bar.inner', PassThroughRoute);
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/foo');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'foo',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('foo'),
+            bounds: this.elementBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'foo.index',
+                args: { positional: [], named: { model: undefined } },
+                instance: this.controllerFor('foo.index'),
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              }),
+            ],
+          }),
+        ]);
+
+        await this.visit('/foo/wow');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'foo',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('foo'),
+            bounds: this.elementBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'foo.inner',
+                args: { positional: [], named: { model: 'wow' } },
+                instance: this.controllerFor('foo.inner'),
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              }),
+            ],
+          }),
+        ]);
+
+        await this.visit('/foo/zomg');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'foo',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('foo'),
+            bounds: this.elementBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'foo.inner',
+                args: { positional: [], named: { model: 'zomg' } },
+                instance: this.controllerFor('foo.inner'),
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              }),
+            ],
+          }),
+        ]);
+      }
+
+      async '@test named outlets'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <div id="header">{{outlet "header"}}</div>
+            {{outlet}}
+          `
+        );
+        this.addTemplate('header', 'header');
+        this.addTemplate('index', 'index');
+
+        this.add(
+          'controller:index',
+          class extends Controller {
+            queryParams = ['showHeader'];
+            showHeader = false;
+          }
+        );
+
+        interface Model {
+          showHeader: boolean;
+        }
+
+        this.add(
+          'route:index',
+          class extends Route {
+            queryParams = {
+              showHeader: {
+                refreshModel: true,
+              },
+            };
+
+            model({ showHeader }: Model): Model {
+              return { showHeader };
+            }
+
+            setupController(controller: Controller, { showHeader }: Model): void {
+              controller.setProperties({ showHeader });
+            }
+
+            renderTemplate(_: Controller, { showHeader }: Model): void {
+              this.render();
+
+              if (showHeader) {
+                this.render('header', { outlet: 'header' });
+              } else {
+                this.disconnectOutlet('header');
+              }
+            }
+          }
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: { showHeader: false } } },
+            instance: this.controllerFor('index'),
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/?showHeader');
+
+        this.assertRenderTree([
+          this.outlet('header', {
+            type: 'route-template',
+            name: 'header',
+            args: { positional: [], named: { model: { showHeader: true } } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element.firstChild),
+            children: [],
+          }),
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: { showHeader: true } } },
+            instance: this.controllerFor('index'),
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: { showHeader: false } } },
+            instance: this.controllerFor('index'),
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          }),
+        ]);
+      }
+
+      async '@test {{mount}}'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <div id="static">{{mount "foo"}}</div>
+            <div id="dynamic">{{mount this.engineName}}</div>
+            {{#if this.showMore}}
+              <div id="static-with-model">{{mount "foo" model=this.engineModel}}</div>
+              <div id="dynamic-with-model">{{mount this.engineName model=this.engineModel}}</div>
+            {{/if}}
+          `
+        );
+
+        this.add(
+          'engine:foo',
+          class extends Engine {
+            isFooEngine = true;
+
+            init() {
+              super.init(...arguments);
+              this.register(
+                'template:application',
+                compile(strip`
+                  {{outlet}}
+
+                  {{#if @model}}
+                    <InspectModel @model={{@model}} />
+                  {{/if}}
+                `)
+              );
+              this.register('template:index', compile('Foo'));
+              this.register('template:components/inspect-model', compile('{{@model}}'));
+            }
+
+            buildInstance(options?: EngineInstanceOptions): EngineInstance {
+              let instance = super.buildInstance(options);
+              instance['isFooEngineInstance'] = true;
+              return instance;
+            }
+          }
+        );
+
+        this.add(
+          'engine:bar',
+          class extends Engine {
+            init() {
+              super.init(...arguments);
+              this.register(
+                'template:application',
+                compile(strip`
+                  {{outlet}}
+
+                  {{#if @model}}
+                    <InspectModel @model={{@model}} />
+                  {{/if}}
+                `)
+              );
+              this.register('template:index', compile('Bar'));
+              this.register('template:components/inspect-model', compile('{{@model}}'));
+            }
+
+            buildInstance(options?: EngineInstanceOptions): EngineInstance {
+              let instance = super.buildInstance(options);
+              instance['isBarEngineInstance'] = true;
+              return instance;
+            }
+          }
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('engineName', 'bar');
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'bar',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isBarEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#dynamic')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#dynamic')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#dynamic')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('engineName', undefined);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+
+        let model = {
+          toStrin() {
+            return 'some model';
+          },
+        };
+
+        runTask(() => {
+          this.controllerFor('application').setProperties({
+            showMore: true,
+            engineModel: model,
+          });
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: { model } },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static-with-model')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model } },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static-with-model')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'inspect-model',
+                    args: { positional: [], named: { model } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('engineName', 'bar');
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'bar',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isBarEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#dynamic')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#dynamic')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#dynamic')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: { model } },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static-with-model')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model } },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static-with-model')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'inspect-model',
+                    args: { positional: [], named: { model } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.$('#static-with-model')[0].lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'engine',
+            name: 'bar',
+            args: { positional: [], named: { model } },
+            instance: (instance: object) => instance['isBarEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#dynamic-with-model')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model } },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#dynamic-with-model')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#dynamic-with-model')[0].firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'inspect-model',
+                    args: { positional: [], named: { model } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.$('#dynamic-with-model')[0].lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').setProperties({
+            showMore: false,
+            engineName: undefined,
+          });
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: (instance: object) => instance['isFooEngineInstance'] === true,
+            bounds: this.elementBounds(this.$('#static')[0]),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: {} },
+                instance: (instance: object) =>
+                  instance.toString() === '(generated application controller)',
+                bounds: this.elementBounds(this.$('#static')[0]),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: (instance: object) =>
+                      instance.toString() === '(generated index controller)',
+                    bounds: this.nodeBounds(this.$('#static')[0].firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          },
+        ]);
+      }
+
+      async '@test routable engine'() {
+        this.addTemplate('index', 'Index');
+
+        let instance: EngineInstance;
+
+        this.add(
+          'engine:foo',
+          class extends Engine {
+            isFooEngine = true;
+
+            init() {
+              super.init(...arguments);
+              this.register(
+                'template:application',
+                compile(strip`
+                  {{outlet}}
+
+                  {{#if this.message}}
+                    <Hello @message={{this.message}} />
+                  {{/if}}
+                `)
+              );
+              this.register('template:index', compile('Foo'));
+              this.register(
+                'template:components/hello',
+                compile('<span>Hello {{@message}}</span>')
+              );
+            }
+
+            buildInstance(options?: EngineInstanceOptions): EngineInstance {
+              return (instance = super.buildInstance(options));
+            }
+          }
+        );
+
+        this.router.map(function(this: any) {
+          this.mount('foo');
+        });
+
+        this.add('route-map:foo', function() {});
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element),
+            children: [],
+          }),
+        ]);
+
+        await this.visit('/foo');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: instance!,
+            bounds: this.elementBounds(this.element),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: instance!.lookup('controller:application'),
+                bounds: this.elementBounds(this.element),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: instance!.lookup('controller:index'),
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          }),
+        ]);
+
+        runTask(() => {
+          let controller = instance!.lookup<Controller>('controller:application')!;
+          controller.set('message', 'World');
+        });
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: instance!,
+            bounds: this.elementBounds(this.element),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: instance!.lookup('controller:application'),
+                bounds: this.elementBounds(this.element),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: instance!.lookup('controller:index'),
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  }),
+                  {
+                    type: 'component',
+                    name: 'hello',
+                    args: { positional: [], named: { message: 'World' } },
+                    instance: null,
+                    bounds: this.nodeBounds(this.element.lastChild),
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          }),
+        ]);
+
+        runTask(() => {
+          let controller = instance!.lookup<Controller>('controller:application')!;
+          controller.set('message', undefined);
+        });
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'engine',
+            name: 'foo',
+            args: { positional: [], named: {} },
+            instance: instance!,
+            bounds: this.elementBounds(this.element),
+            children: [
+              {
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: instance!.lookup('controller:application'),
+                bounds: this.elementBounds(this.element),
+                children: [
+                  this.outlet({
+                    type: 'route-template',
+                    name: 'index',
+                    args: { positional: [], named: { model: undefined } },
+                    instance: instance!.lookup('controller:index'),
+                    bounds: this.nodeBounds(this.element.firstChild),
+                    children: [],
+                  }),
+                ],
+              },
+            ],
+          }),
+        ]);
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          this.outlet({
+            type: 'route-template',
+            name: 'index',
+            args: { positional: [], named: { model: undefined } },
+            instance: this.controllerFor('index'),
+            bounds: this.elementBounds(this.element),
+            children: [],
+          }),
+        ]);
+      }
+
+      async '@test template-only components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: null,
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@feature(EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) templateOnlyComponent()'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: templateOnly(),
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@feature(EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) templateOnlyComponent() + setComponentTemplate()'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: setComponentTemplate(compile('Hello World'), templateOnly()),
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: null,
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test classic components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: Component.extend(),
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: (instance: object) => instance['name'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test custom components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <HelloWorld @name="first" />
+
+            {{#if this.showSecond}}
+              <HelloWorld @name="second" />
+            {{/if}}
+          `
+        );
+
+        this.addComponent('hello-world', {
+          ComponentClass: setComponentManager(_owner => {
+            return {
+              capabilities: capabilities('3.13', {}),
+
+              createComponent(_, { named: { name } }) {
+                return { name };
+              },
+
+              getContext(instances) {
+                return instances;
+              },
+            };
+          }, {}),
+          template: 'Hello World',
+        });
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'second' } },
+            instance: (instance: object) => instance['name'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'hello-world',
+            args: { positional: [], named: { name: 'first' } },
+            instance: (instance: object) => instance['name'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test <Input> components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <Input @type="text" @value="first" />
+
+            {{#if this.showSecond}}
+              <Input @type="checkbox" @checked={{false}} />
+            {{/if}}
+          `
+        );
+
+        await this.visit('/');
+
+        let target = this.controllerFor('application');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'text' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'text',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [
+              {
+                type: 'component',
+                name: '-text-field',
+                args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                instance: (instance: object) => instance['value'] === 'first',
+                bounds: this.nodeBounds(this.element.firstChild),
+                children: [],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => target.set('showSecond', true));
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'text' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'text',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [
+              {
+                type: 'component',
+                name: '-text-field',
+                args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                instance: (instance: object) => instance['value'] === 'first',
+                bounds: this.nodeBounds(this.element.firstChild),
+                children: [],
+              },
+            ],
+          },
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'checkbox' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'checkbox',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [
+              {
+                type: 'component',
+                name: '-checkbox',
+                args: { positional: [], named: { target, type: 'checkbox', checked: false } },
+                instance: (instance: object) => instance['checked'] === false,
+                bounds: this.nodeBounds(this.element.lastChild),
+                children: [],
+              },
+            ],
+          },
+        ]);
+
+        runTask(() => target.set('showSecond', false));
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'input',
+            args: args => args.named.type === 'text' && '__ARGS__' in args.named,
+            instance: (instance: object) => instance['type'] === 'text',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [
+              {
+                type: 'component',
+                name: '-text-field',
+                args: { positional: [], named: { target, type: 'text', value: 'first' } },
+                instance: (instance: object) => instance['value'] === 'first',
+                bounds: this.nodeBounds(this.element.firstChild),
+                children: [],
+              },
+            ],
+          },
+        ]);
+      }
+
+      async '@test <Textarea> components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <Textarea @value="first" />
+
+            {{#if this.showSecond}}
+              <Textarea @value="second" />
+            {{/if}}
+          `
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'first' } },
+            instance: (instance: object) => instance['value'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'first' } },
+            instance: (instance: object) => instance['value'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'second' } },
+            instance: (instance: object) => instance['value'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'textarea',
+            args: { positional: [], named: { value: 'first' } },
+            instance: (instance: object) => instance['value'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      async '@test <LinkTo> components'() {
+        this.addTemplate(
+          'application',
+          strip`
+            <LinkTo @id="first" @route="index">Hello World</LinkTo>
+
+            {{#if this.showSecond}}
+              <LinkTo @id="second" @route="index">Hello World</LinkTo>
+            {{/if}}
+          `
+        );
+
+        await this.visit('/');
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'first', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', true);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'first', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'second', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'second',
+            bounds: this.nodeBounds(this.element.lastChild),
+            children: [],
+          },
+        ]);
+
+        runTask(() => {
+          this.controllerFor('application').set('showSecond', false);
+        });
+
+        this.assertRenderTree([
+          {
+            type: 'component',
+            name: 'link-to',
+            args: { positional: [], named: { id: 'first', route: 'index' } },
+            instance: (instance: object) => instance['id'] === 'first',
+            bounds: this.nodeBounds(this.element.firstChild),
+            children: [],
+          },
+        ]);
+      }
+
+      get owner(): Owner {
+        return this.applicationInstance;
+      }
+
+      outlet(
+        name: string,
+        node: ExpectedRenderNode & { type: 'engine' | 'route-template' }
+      ): ExpectedRenderNode;
+      outlet(node: ExpectedRenderNode & { type: 'engine' | 'route-template' }): ExpectedRenderNode;
+      outlet(
+        nodeOrName: string | ExpectedRenderNode & { type: 'engine' | 'route-template' },
+        node?: ExpectedRenderNode & { type: 'engine' | 'route-template' }
+      ): ExpectedRenderNode {
+        let name: string;
+
+        if (typeof nodeOrName === 'string') {
+          name = nodeOrName;
+          node = node!;
+        } else {
+          name = 'main';
+          node = nodeOrName;
+        }
+
+        return {
+          type: 'outlet',
+          name,
+          instance: undefined,
+          args: { positional: [], named: {} },
+          bounds: node.bounds,
+          children: [node],
+        };
+      }
+
+      nodeBounds(node: Node): CapturedBounds {
+        return {
+          parentElement: (expect(
+            node.parentNode,
+            'BUG: detached node'
+          ) as Simple.Node) as Simple.Element,
+          firstNode: node as Simple.Node,
+          lastNode: node as Simple.Node,
+        };
+      }
+
+      elementBounds(element: Element): CapturedBounds {
+        return {
+          parentElement: element as Simple.Element,
+          firstNode: element.firstChild! as Simple.Node,
+          lastNode: element.lastChild! as Simple.Node,
+        };
+      }
+
+      assertRenderTree(expected: ExpectedRenderNode[]): void {
+        let actual = captureRenderTree(this.owner);
+        let wrapped: ExpectedRenderNode[] = [
+          this.outlet({
+            type: 'route-template',
+            name: '-top-level',
+            args: { positional: [], named: {} },
+            instance: undefined,
+            bounds: this.nodeBounds(this.element),
+            children: [
+              this.outlet({
+                type: 'route-template',
+                name: 'application',
+                args: { positional: [], named: { model: undefined } },
+                instance: this.controllerFor('application'),
+                bounds: this.elementBounds(this.element),
+                children: expected,
+              }),
+            ],
+          }),
+        ];
+
+        this.assertRenderNodes(actual, wrapped, 'root');
+      }
+
+      assertRenderNodes(
+        actual: CapturedRenderNode[],
+        expected: ExpectedRenderNode[],
+        path: string
+      ): void {
+        this.assert.strictEqual(
+          actual.length,
+          expected.length,
+          `Expecting ${expected.length} render nodes at ${path}, got ${actual.length}.\n`
+        );
+
+        if (actual.length === expected.length) {
+          let byTypeAndName = <T, U, V extends { type: T; name: U }>(a: V, b: V): number => {
+            if (a.type > b.type) {
+              return 1;
+            } else if (a.type < b.type) {
+              return -1;
+            } else if (a.name > b.name) {
+              return 1;
+            } else if (a.name < b.name) {
+              return -1;
+            } else {
+              return 0;
+            }
+          };
+
+          actual = actual.sort(byTypeAndName);
+          expected = expected.sort(byTypeAndName);
+
+          for (let i = 0; i < actual.length; i++) {
+            this.assertRenderNode(actual[i], expected[i], `${actual[i].type}:${actual[i].name}`);
+          }
+        } else {
+          this.assert.deepEqual(actual, [], path);
+        }
+      }
+
+      assertRenderNode(
+        actual: CapturedRenderNode,
+        expected: ExpectedRenderNode,
+        path: string
+      ): void {
+        this.assertProperty(actual.type, expected.type, false, `${path} (type)`);
+        this.assertProperty(actual.name, expected.name, false, `${path} (name)`);
+        this.assertProperty(actual.args, expected.args, true, `${path} (args)`);
+        this.assertProperty(actual.instance, expected.instance, false, `${path} (instance)`);
+        this.assertProperty(actual.bounds, expected.bounds, true, `${path} (bounds)`);
+
+        if (Array.isArray(expected.children)) {
+          this.assertRenderNodes(actual.children, expected.children, path);
+        } else {
+          this.assertProperty(actual.children, expected.children, false, `${path} (children)`);
+        }
+      }
+
+      assertProperty<T>(actual: T, expected: Expected<T>, deep: boolean, path: string): void {
+        if (isExpectedFunc(expected)) {
+          this.assert.ok(expected(actual), `Matching ${path}, got ${actual}`);
+        } else if (deep) {
+          this.assert.deepEqual(actual, expected, `Matching ${path}`);
+        } else {
+          this.assert.strictEqual(actual, expected, `Matching ${path}`);
+        }
+      }
+    }
+  );
+}
diff --git a/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js b/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js
index 1607db84171..3284d926690 100644
--- a/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js
+++ b/packages/@ember/-internals/glimmer/tests/unit/utils/debug-stack-test.js
@@ -1,6 +1,6 @@
 import { moduleFor, AbstractTestCase } from 'internal-test-helpers';
 
-import { DebugStack } from '@ember/-internals/glimmer';
+import { getDebugStack } from '@ember/-internals/glimmer';
 import { DEBUG } from '@glimmer/env';
 
 moduleFor(
@@ -8,7 +8,7 @@ moduleFor(
   class extends AbstractTestCase {
     ['@test pushing and popping'](assert) {
       if (DEBUG) {
-        let stack = new DebugStack();
+        let stack = getDebugStack(this.owner);
 
         assert.equal(stack.peek(), undefined);
 
diff --git a/packages/@ember/-internals/owner/index.ts b/packages/@ember/-internals/owner/index.ts
index 0c1f78d3168..618b3bf9650 100644
--- a/packages/@ember/-internals/owner/index.ts
+++ b/packages/@ember/-internals/owner/index.ts
@@ -25,11 +25,12 @@ export interface EngineInstanceOptions {
   routable: boolean;
 }
 
+import EngineInstance from '@ember/engine/instance';
 export interface Owner {
   lookup<T>(fullName: string, options?: LookupOptions): T | undefined;
   factoryFor<T, C>(fullName: string, options?: LookupOptions): Factory<T, C> | undefined;
   factoryFor(fullName: string, options?: LookupOptions): Factory<any, any> | undefined;
-  buildChildEngineInstance<T>(name: string, options?: EngineInstanceOptions): T;
+  buildChildEngineInstance(name: string, options?: EngineInstanceOptions): EngineInstance;
   register<T, C>(fullName: string, factory: Factory<T, C>, options?: object): void;
   hasRegistration(name: string, options?: LookupOptions): boolean;
   mountPoint?: string;
diff --git a/packages/@ember/application/index.d.ts b/packages/@ember/application/index.d.ts
index 275e8259e0c..30eeea101a9 100644
--- a/packages/@ember/application/index.d.ts
+++ b/packages/@ember/application/index.d.ts
@@ -1,2 +1 @@
 export { getOwner, setOwner } from '@ember/-internals/owner';
-export type EngineInstance = any;
diff --git a/packages/@ember/component/template-only.ts b/packages/@ember/component/template-only.ts
index a74f1b5e195..6b123603b8c 100644
--- a/packages/@ember/component/template-only.ts
+++ b/packages/@ember/component/template-only.ts
@@ -36,7 +36,7 @@ export class TemplateOnlyComponent {
   @param {String} moduleName the module name that the template only component represents, this will be used for debugging purposes
   @category EMBER_GLIMMER_SET_COMPONENT_TEMPLATE
 */
-export default function templateOnlyComponent(moduleName: string): TemplateOnlyComponent {
+export default function templateOnlyComponent(moduleName?: string): TemplateOnlyComponent {
   return new TemplateOnlyComponent(moduleName);
 }
 
diff --git a/packages/@ember/controller/index.d.ts b/packages/@ember/controller/index.d.ts
index 14b75c41298..07dd76a9df4 100644
--- a/packages/@ember/controller/index.d.ts
+++ b/packages/@ember/controller/index.d.ts
@@ -1,8 +1,11 @@
-export default interface Controller {
+export default class Controller {
   isController: true;
   target?: unknown;
   store?: unknown;
   model?: unknown;
+  get<T>(key: string): T;
+  set<T>(key: string, value: T): void;
+  setProperties(props: { [key: string]: any }): void;
 }
 
-export function inject(name?: string): Controller;
+export function inject(name?: string): any;
diff --git a/packages/@ember/debug/index.ts b/packages/@ember/debug/index.ts
index ff669750047..5c3b01ec292 100644
--- a/packages/@ember/debug/index.ts
+++ b/packages/@ember/debug/index.ts
@@ -8,6 +8,7 @@ import _warn, { WarnFunc } from './lib/warn';
 export { registerHandler as registerWarnHandler } from './lib/warn';
 export { registerHandler as registerDeprecationHandler } from './lib/deprecate';
 export { isTesting, setTesting } from './lib/testing';
+export { default as captureRenderTree } from './lib/capture-render-tree';
 
 export type DebugFunctionType =
   | 'assert'
diff --git a/packages/@ember/debug/lib/capture-render-tree.ts b/packages/@ember/debug/lib/capture-render-tree.ts
new file mode 100644
index 00000000000..e423e3a1199
--- /dev/null
+++ b/packages/@ember/debug/lib/capture-render-tree.ts
@@ -0,0 +1,28 @@
+import { CapturedRenderNode, Environment } from '@ember/-internals/glimmer';
+import { Owner } from '@ember/-internals/owner';
+import { expect } from '@glimmer/util';
+
+/**
+  @module @ember/debug
+*/
+/**
+  Ember Inspector calls this function to capture the current render tree.
+
+  In production mode, this requires turning on `ENV._DEBUG_RENDER_TREE`
+  before loading Ember.
+
+  @private
+  @static
+  @method captureRenderTree
+  @for @ember/debug
+  @param app {ApplicationInstance} An `ApplicationInstance`.
+  @since 3.14.0
+*/
+export default function captureRenderTree(app: Owner): CapturedRenderNode[] {
+  let env = expect(
+    app.lookup<Environment>('service:-glimmer-environment'),
+    'BUG: owner is missing service:-glimmer-environment'
+  );
+
+  return env.debugRenderTree.capture();
+}
diff --git a/packages/@ember/engine/index.d.ts b/packages/@ember/engine/index.d.ts
new file mode 100644
index 00000000000..3df5eac5b39
--- /dev/null
+++ b/packages/@ember/engine/index.d.ts
@@ -0,0 +1,9 @@
+import { Owner, LookupOptions, Factory, EngineInstanceOptions } from '@ember/-internals/owner';
+import EngineInstance from './instance';
+
+export default class Engine {
+  constructor(...args: any[]);
+  init(...args: any[]): void;
+  register<T, C>(fullName: string, factory: Factory<T, C>, options?: object): void;
+  buildInstance(options?: EngineInstanceOptions): EngineInstance;
+}
diff --git a/packages/@ember/engine/instance.d.ts b/packages/@ember/engine/instance.d.ts
new file mode 100644
index 00000000000..033f3d787b4
--- /dev/null
+++ b/packages/@ember/engine/instance.d.ts
@@ -0,0 +1,8 @@
+import { Owner } from '@ember/-internals/owner';
+
+export default interface EngineInstance extends Owner {
+  mountPoint?: string;
+  routable?: boolean;
+  boot(): void;
+  destroy(): void;
+}
diff --git a/packages/ember-template-compiler/lib/system/compile-options.ts b/packages/ember-template-compiler/lib/system/compile-options.ts
index 589e4e6f825..47c961949ed 100644
--- a/packages/ember-template-compiler/lib/system/compile-options.ts
+++ b/packages/ember-template-compiler/lib/system/compile-options.ts
@@ -19,7 +19,7 @@ export interface CompileOptions {
   plugins?: Plugins | undefined;
 }
 
-export default function compileOptions(_options: Partial<CompileOptions>): PrecompileOptions {
+export default function compileOptions(_options: Partial<CompileOptions> = {}): PrecompileOptions {
   let options = assign({ meta: {} }, _options, {
     customizeComponentName(tagname: string): string {
       return COMPONENT_NAME_SIMPLE_DASHERIZE_CACHE.get(tagname);
diff --git a/packages/ember-template-compiler/lib/system/compile.ts b/packages/ember-template-compiler/lib/system/compile.ts
index c12501a62c6..41e400d385f 100644
--- a/packages/ember-template-compiler/lib/system/compile.ts
+++ b/packages/ember-template-compiler/lib/system/compile.ts
@@ -5,7 +5,11 @@ import require, { has } from 'require';
 import { CompileOptions } from './compile-options';
 import precompile from './precompile';
 
-let template: (templateJS: () => string) => string;
+// FIXME
+type StaticTemplate = unknown;
+type Factory = any;
+
+let template: (templateJS: StaticTemplate) => Factory;
 
 /**
   Uses HTMLBars `compile` function to process a string into a compiled template.
@@ -17,7 +21,7 @@ let template: (templateJS: () => string) => string;
   @param {String} templateString This is the string to be compiled by HTMLBars.
   @param {Object} options This is an options hash to augment the compiler options.
 */
-export default function compile(templateString: string, options: CompileOptions) {
+export default function compile(templateString: string, options: CompileOptions = {}): Factory {
   if (!template && has('@ember/-internals/glimmer')) {
     // tslint:disable-next-line:no-require-imports
     template = require('@ember/-internals/glimmer').template;
@@ -29,7 +33,9 @@ export default function compile(templateString: string, options: CompileOptions)
     );
   }
 
-  let precompiledTemplateString = precompile(templateString, options);
-  let templateJS = new Function(`return ${precompiledTemplateString}`)();
-  return template(templateJS);
+  return template(evaluate(precompile(templateString, options)));
+}
+
+function evaluate(precompiled: string): StaticTemplate {
+  return new Function(`return ${precompiled}`)();
 }
diff --git a/packages/ember-template-compiler/lib/system/precompile.ts b/packages/ember-template-compiler/lib/system/precompile.ts
index 02ddc9b2804..d74fa690b06 100644
--- a/packages/ember-template-compiler/lib/system/precompile.ts
+++ b/packages/ember-template-compiler/lib/system/precompile.ts
@@ -15,6 +15,6 @@ import compileOptions, { CompileOptions } from './compile-options';
   @method precompile
   @param {String} templateString This is the string to be compiled by HTMLBars.
 */
-export default function precompile(templateString: string, options: CompileOptions): string {
+export default function precompile(templateString: string, options: CompileOptions = {}): string {
   return glimmerPrecompile(templateString, compileOptions(options));
 }
diff --git a/packages/ember/index.js b/packages/ember/index.js
index ea571f5c3c5..492cbefca88 100644
--- a/packages/ember/index.js
+++ b/packages/ember/index.js
@@ -9,7 +9,7 @@ import { deleteMeta, meta } from '@ember/-internals/meta';
 import * as metal from '@ember/-internals/metal';
 import { FEATURES, isEnabled, EMBER_GLIMMER_SET_COMPONENT_TEMPLATE } from '@ember/canary-features';
 import * as EmberDebug from '@ember/debug';
-import { assert, deprecate } from '@ember/debug';
+import { assert, captureRenderTree, deprecate } from '@ember/debug';
 import Backburner from 'backburner';
 import Logger from '@ember/-internals/console';
 import Controller, { inject as injectController } from '@ember/controller';
@@ -534,6 +534,7 @@ if (EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) {
   Ember._setComponentTemplate = setComponentTemplate;
   Ember._templateOnlyComponent = templateOnlyComponent;
 }
+Ember._captureRenderTree = captureRenderTree;
 Ember.Handlebars = {
   template,
   Utils: {
diff --git a/packages/ember/tests/reexports_test.js b/packages/ember/tests/reexports_test.js
index 0e3ee3999f5..aa7f0a7aa69 100644
--- a/packages/ember/tests/reexports_test.js
+++ b/packages/ember/tests/reexports_test.js
@@ -234,6 +234,7 @@ let allExports = [
   EMBER_GLIMMER_SET_COMPONENT_TEMPLATE
     ? ['_templateOnlyComponent', '@ember/component/template-only', 'default']
     : null,
+  ['_captureRenderTree', '@ember/debug', 'captureRenderTree'],
 
   // @ember/-internals/runtime
   ['A', '@ember/-internals/runtime'],
diff --git a/tests/docs/expected.js b/tests/docs/expected.js
index 3ed1967bb02..f1b2952a109 100644
--- a/tests/docs/expected.js
+++ b/tests/docs/expected.js
@@ -9,6 +9,7 @@ module.exports = {
     'LOG_VERSION',
     '[]',
     '_APPLICATION_TEMPLATE_WRAPPER',
+    '_DEBUG_RENDER_TREE',
     '_JQUERY_INTEGRATION',
     '_DEFAULT_ASYNC_OBSERVERS',
     '_RERENDER_LOOP_LIMIT',
@@ -114,6 +115,7 @@ module.exports = {
     'cancel',
     'cancelRouterSetup',
     'capitalize',
+    'captureRenderTree',
     'catalogEntriesByType',
     'catch',
     'changeProperties',

From d7d942e4b17e2dfb654175b2b91c8e9ad9f549bc Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Sun, 15 Sep 2019 22:13:47 -0500
Subject: [PATCH 2/2] Run debug render tree tests in prod

---
 .travis.yml      | 6 ++++++
 bin/run-tests.js | 4 ++++
 tests/index.html | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index affaacafb3a..240a3d11ac3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -82,6 +82,12 @@ jobs:
         - yarn ember build -prod
         - yarn test
 
+    - name: Production (All Tests + Canary Features + Debug Render Tree)
+      env: DEBUG_RENDER_TREE=true
+      script:
+        - yarn ember build -prod
+        - yarn test
+
     - name: Old Jquery and Extend Prototypes
       env: TEST_SUITE=old-jquery-and-extend-prototypes
       script:
diff --git a/bin/run-tests.js b/bin/run-tests.js
index c8ba2eed654..39bed475f07 100755
--- a/bin/run-tests.js
+++ b/bin/run-tests.js
@@ -35,6 +35,10 @@ function getBrowserRunner() {
 }
 
 function run(queryString) {
+  if (process.env.DEBUG_RENDER_TREE) {
+    queryString = `${queryString}&debugrendertree`;
+  }
+
   let url = 'http://localhost:' + PORT + '/tests/?' + queryString;
   return runInBrowser(url, 3);
 }
diff --git a/tests/index.html b/tests/index.html
index 29609eb2f7f..d41e30c98f6 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -58,6 +58,10 @@
         }
 
         ENV['RAISE_ON_DEPRECATION'] = true;
+
+        if (QUnit.urlParams.debugrendertree) {
+          ENV['_DEBUG_RENDER_TREE'] = true;
+        }
       })();
     </script>