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

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

   This has to be set before the ember JavaScript code is evaluated
   (i.e. before the vendor `<script>` tag). This is usually done by
   setting `window.EmberENV` or `window.ENV`.

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

   This flag is on by default in development mode.

   For production, 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
   export 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  |    3 +
 packages/@ember/-internals/glimmer/index.ts   |    4 +-
 .../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    |  135 ++
 .../glimmer/lib/utils/debug-stack.ts          |   18 +-
 .../-internals/glimmer/lib/utils/weak.ts      |   86 +
 .../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/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                       |    2 +
 packages/ember/tests/reexports_test.js        |    1 +
 29 files changed, 2421 insertions(+), 131 deletions(-)
 create mode 100644 packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
 create mode 100644 packages/@ember/-internals/glimmer/lib/utils/weak.ts
 create mode 100644 packages/@ember/-internals/glimmer/tests/integration/application/debug-render-tree-test.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..ef03681db64 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,8 @@ export const ENV = {
   */
   _TEMPLATE_ONLY_GLIMMER_COMPONENTS: false,
 
+  _DEBUG_RENDER_TREE: DEBUG,
+
   /**
     Whether the app is using jQuery. See RFC #294.
 
diff --git a/packages/@ember/-internals/glimmer/index.ts b/packages/@ember/-internals/glimmer/index.ts
index b6f4d79a6dd..8ce655282fd 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,5 @@ 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, captureRenderTree } from './lib/utils/debug-render-tree';
+export { WeakRef, WeakRefSet } from './lib/utils/weak';
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..de6ba535af0 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(owner);
+    }
+  }
+
+  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..3989d3d820f
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts
@@ -0,0 +1,135 @@
+import { Owner } from '@ember/-internals/owner';
+import { assert } from '@ember/debug';
+import { Simple } from '@glimmer/interfaces';
+import { Bounds, CapturedArguments } from '@glimmer/runtime';
+import { expect, Option, Stack } from '@glimmer/util';
+import { WeakRef, WeakRefSet } from './weak';
+
+export type RenderNodeType = 'outlet' | 'engine' | 'route-template' | 'component';
+
+export interface RenderNode {
+  type: RenderNodeType;
+  name: string;
+  args: CapturedArguments;
+  instance: unknown;
+}
+
+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[];
+}
+
+const RENDER_TREES = new WeakMap<Owner, DebugRenderTree>();
+
+export default class DebugRenderTree {
+  private stack = new Stack<object>();
+  private nodes = new WeakMap<object, RenderNode>();
+  private bounds = new WeakMap<object, Bounds>();
+
+  constructor(private owner: Owner) {
+    assert(`BUG: owner already has a DebugRenderTree associated with it`, !RENDER_TREES.has(owner));
+    RENDER_TREES.set(owner, this);
+  }
+
+  begin(): void {
+    if (this.stack.size !== 0) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Ember encountered an error during the last rendering loop. ' +
+          'This will likely trigger undefined behavior and memory leaks ' +
+          'as the error left things in an inconsistent state. ' +
+          'It is recommended that you refresh the page.'
+      );
+
+      while (!this.stack.isEmpty()) {
+        this.stack.pop();
+      }
+    }
+
+    this.stack.push(this.owner);
+  }
+
+  create(state: object, node: RenderNode): void {
+    this.nodes.set(state, node);
+    this.appendChild(state);
+    this.enter(state);
+  }
+
+  update(state: object): void {
+    this.enter(state);
+  }
+
+  didRender(state: object, bounds: Bounds): void {
+    assert(`BUG: Expecting ${this.stack.current}, got ${state}`, this.stack.current === state);
+    this.bounds.set(state, bounds);
+    this.exit();
+  }
+
+  willDestroy(state: object): void {
+    WeakRef.release(state);
+  }
+
+  commit(): void {
+    assert(
+      'BUG: Expecting the owner to be the only node',
+      this.stack.size === 1 && this.stack.current === this.owner
+    );
+    this.stack.pop();
+  }
+
+  capture(): CapturedRenderNode[] {
+    return this.captureChildren(this.owner);
+  }
+
+  private enter(state: object): void {
+    this.stack.push(state);
+  }
+
+  private exit(): void {
+    assert('BUG: Cannot pop the root node off the debug render tree', this.stack.size !== 1);
+    this.stack.pop();
+  }
+
+  private childrenFor(parent: object): WeakRefSet<object> {
+    return WeakRefSet.for(parent, 'render-tree:children');
+  }
+
+  private appendChild(child: object): void {
+    let parent = expect(this.stack.current, 'BUG: Unexpected empty stack');
+    this.childrenFor(parent).add(child);
+  }
+
+  private captureChildren(parent: object): CapturedRenderNode[] {
+    return this.childrenFor(parent)
+      .toArray()
+      .map(child => this.captureNode(child));
+  }
+
+  private captureNode(state: object): CapturedRenderNode {
+    let { type, name, args, instance } = expect(this.nodes.get(state), 'BUG: RenderNode not found');
+    let bounds = this.captureBounds(state);
+    let children = this.captureChildren(state);
+    return { type, name, args: args.value(), instance, bounds, children };
+  }
+
+  private captureBounds(state: object): CapturedRenderNode['bounds'] {
+    let bounds = expect(this.bounds.get(state), 'BUG: Bounds not found');
+    let parentElement = bounds.parentElement();
+    let firstNode = bounds.firstNode();
+    let lastNode = bounds.lastNode();
+    return { parentElement, firstNode, lastNode };
+  }
+}
+
+export function captureRenderTree(owner: Owner): CapturedRenderNode[] {
+  let tree = expect(RENDER_TREES.get(owner), 'BUG: DebugRenderTree not found');
+  return tree.capture();
+}
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/lib/utils/weak.ts b/packages/@ember/-internals/glimmer/lib/utils/weak.ts
new file mode 100644
index 00000000000..48051b55866
--- /dev/null
+++ b/packages/@ember/-internals/glimmer/lib/utils/weak.ts
@@ -0,0 +1,86 @@
+import { Dict } from '@glimmer/interfaces';
+import { dict } from '@glimmer/util';
+
+const REFS = new WeakMap<object, WeakRef>();
+const VALS = new WeakMap<WeakRef, object>();
+
+export class WeakRef<T extends object = object> {
+  static for<T extends object>(value: T | WeakRef<T>): WeakRef<T> {
+    if (value instanceof WeakRef) {
+      return value;
+    }
+
+    let ref = REFS.get(value) as WeakRef<T> | undefined;
+
+    if (ref === undefined) {
+      ref = new WeakRef();
+      VALS.set(ref, value);
+      REFS.set(value, ref);
+    }
+
+    return ref;
+  }
+
+  static release<T extends object>(value: T | WeakRef<T>): void {
+    let ref = WeakRef.for(value);
+    let val = VALS.get(ref);
+
+    VALS.delete(ref);
+
+    if (val !== undefined) {
+      REFS.delete(val);
+    }
+  }
+
+  private constructor() {}
+
+  get(): T | undefined {
+    return VALS.get(this) as T | undefined;
+  }
+}
+
+const SETS = new WeakMap<object, Dict<WeakRefSet>>();
+
+export class WeakRefSet<T extends object = object> {
+  static for<T extends object>(parent: object, purpose: string): WeakRefSet<T> {
+    let map = SETS.get(parent) as Dict<WeakRefSet<T>> | undefined;
+
+    if (map === undefined) {
+      map = dict();
+      SETS.set(parent, map);
+    }
+
+    let set = map[purpose] as WeakRefSet<T> | undefined;
+
+    if (set === undefined) {
+      set = new WeakRefSet();
+      map[purpose] = set;
+    }
+
+    return set;
+  }
+
+  private refs = new Set();
+
+  add(value: T | WeakRef<T>): WeakRef<T> {
+    let ref = WeakRef.for(value);
+    this.refs.add(ref);
+    return ref;
+  }
+
+  toArray(): T[] {
+    let items: T[] = [];
+
+    this.refs.forEach(ref => {
+      let value = ref.get();
+
+      if (value === undefined) {
+        this.refs.delete(ref);
+      } else {
+        items.push(value);
+      }
+    });
+
+    return items;
+  }
+}
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..3b89a781047
--- /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,
+  captureRenderTree,
+  Component,
+  setComponentManager,
+  setComponentTemplate,
+} from '@ember/-internals/glimmer';
+import { EngineInstanceOptions } from '@ember/-internals/owner';
+import { Route } from '@ember/-internals/routing';
+import templateOnly from '@ember/component/template-only';
+import Controller from '@ember/controller';
+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() {
+        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/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..86b064e632e 100644
--- a/packages/ember/index.js
+++ b/packages/ember/index.js
@@ -115,6 +115,7 @@ import {
   modifierCapabilities,
   setComponentTemplate,
   getComponentTemplate,
+  captureRenderTree,
 } from '@ember/-internals/glimmer';
 // eslint-disable-next-line import/no-unresolved
 import VERSION from './version';
@@ -534,6 +535,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..6d7b32e4fa9 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/-internals/glimmer', 'captureRenderTree'],
 
   // @ember/-internals/runtime
   ['A', '@ember/-internals/runtime'],