respond to feedback

Author: Chris Garrett

packages/@ember/-internals/glimmer/index.ts

@@ -355,7 +355,7 @@ export { default as Checkbox } from './lib/components/checkbox';
 export { default as TextField } from './lib/components/text-field';
 export { default as TextArea } from './lib/components/textarea';
 export { default as LinkComponent } from './lib/components/link-to';
-export { default as Component, ROOT_REF } from './lib/component';
+export { default as Component } from './lib/component';
 export { default as Helper, helper } from './lib/helper';
 export { default as Environment } from './lib/environment';
 export { SafeString, escapeExpression, htmlSafe, isHTMLSafe } from './lib/utils/string';

packages/@ember/-internals/glimmer/lib/component-managers/curly.ts

@@ -35,14 +35,7 @@ import {
   WithStaticLayout,
 } from '@glimmer/runtime';
 import { Destroyable, EMPTY_ARRAY } from '@glimmer/util';
-import {
-  BOUNDS,
-  DIRTY_TAG,
-  GLIMMER_ENV,
-  HAS_BLOCK,
-  IS_DISPATCHING_ATTRS,
-  ROOT_REF,
-} from '../component';
+import { BOUNDS, DIRTY_TAG, HAS_BLOCK, IS_DISPATCHING_ATTRS } from '../component';
 import Environment from '../environment';
 import { DynamicScope } from '../renderer';
 import RuntimeResolver from '../resolver';
@@ -56,6 +49,7 @@ import {
 } from '../utils/bindings';
 import ComponentStateBucket, { Component } from '../utils/curly-component-state-bucket';
 import { processComponentArgs } from '../utils/process-args';
+import { RootReference } from '../utils/references';
 import AbstractManager from './abstract';
 import DefinitionState from './definition-state';
 
@@ -77,6 +71,7 @@ function applyAttributeBindings(
   element: Simple.Element,
   attributeBindings: Array<string>,
   component: Component,
+  rootRef: RootReference<Component>,
   operations: ElementOperations
 ) {
   let seen: string[] = [];
@@ -89,7 +84,7 @@ function applyAttributeBindings(
 
     if (seen.indexOf(attribute) === -1) {
       seen.push(attribute);
-      AttributeBinding.install(element, component, parsed, operations);
+      AttributeBinding.install(element, component, rootRef, parsed, operations);
     }
 
     i--;
@@ -105,7 +100,7 @@ function applyAttributeBindings(
     IsVisibleBinding !== undefined &&
     seen.indexOf('style') === -1
   ) {
-    IsVisibleBinding.install(element, component, operations);
+    IsVisibleBinding.install(element, component, rootRef, operations);
   }
 }
 
@@ -289,9 +284,6 @@ export default class CurlyComponentManager
       props.layout = state.template;
     }
 
-    // Pass the environment for the root reference
-    props[GLIMMER_ENV] = environment;
-
     // caller:
     // <FaIcon @name="bug" />
     //
@@ -366,12 +358,12 @@ export default class CurlyComponentManager
     return bucket;
   }
 
-  getSelf({ component }: ComponentStateBucket): VersionedPathReference {
-    return component[ROOT_REF];
+  getSelf({ rootRef }: ComponentStateBucket): VersionedPathReference {
+    return rootRef;
   }
 
   didCreateElement(
-    { component, classRef, environment }: ComponentStateBucket,
+    { component, classRef, environment, rootRef }: ComponentStateBucket,
     element: Simple.Element,
     operations: ElementOperations
   ): void {
@@ -381,12 +373,12 @@ export default class CurlyComponentManager
     let { attributeBindings, classNames, classNameBindings } = component;
 
     if (attributeBindings && attributeBindings.length) {
-      applyAttributeBindings(element, attributeBindings, component, operations);
+      applyAttributeBindings(element, attributeBindings, component, rootRef, operations);
     } else {
       let id = component.elementId ? component.elementId : guidFor(component);
       operations.setAttribute('id', PrimitiveReference.create(id), false, null);
       if (EMBER_COMPONENT_IS_VISIBLE && IsVisibleBinding !== undefined) {
-        IsVisibleBinding.install(element, component, operations);
+        IsVisibleBinding.install(element, component, rootRef, operations);
       }
     }
 
@@ -403,13 +395,13 @@ export default class CurlyComponentManager
 
     if (classNameBindings && classNameBindings.length) {
       classNameBindings.forEach((binding: string) => {
-        ClassNameBinding.install(element, component, binding, operations);
+        ClassNameBinding.install(element, rootRef, binding, operations);
       });
     }
     operations.setAttribute('class', PrimitiveReference.create('ember-view'), false, null);
 
     if ('ariaRole' in component) {
-      operations.setAttribute('role', referenceForKey(component, 'ariaRole'), false, null);
+      operations.setAttribute('role', referenceForKey(rootRef, 'ariaRole'), false, null);
     }
 
     component._transitionTo('hasElement');

packages/@ember/-internals/glimmer/lib/component.ts

@@ -16,15 +16,13 @@ import { DEBUG } from '@glimmer/env';
 import { createTag, dirty } from '@glimmer/reference';
 import { normalizeProperty, SVG_NAMESPACE } from '@glimmer/runtime';
 
-import { RootReference, UPDATE } from './utils/references';
+import { UPDATE } from './utils/references';
 
 export const DIRTY_TAG = symbol('DIRTY_TAG');
 export const ARGS = symbol('ARGS');
-export const ROOT_REF = symbol('ROOT_REF');
 export const IS_DISPATCHING_ATTRS = symbol('IS_DISPATCHING_ATTRS');
 export const HAS_BLOCK = symbol('HAS_BLOCK');
 export const BOUNDS = symbol('BOUNDS');
-export const GLIMMER_ENV = symbol('GLIMMER_ENV');
 
 /**
 @module @ember/component
@@ -723,7 +721,6 @@ const Component = CoreView.extend(
       this._super(...arguments);
       this[IS_DISPATCHING_ATTRS] = false;
       this[DIRTY_TAG] = createTag();
-      this[ROOT_REF] = new RootReference(this, this[GLIMMER_ENV]);
       this[BOUNDS] = null;
 
       if (DEBUG && this.renderer._destinedForDOM && this.tagName === '') {

packages/@ember/-internals/glimmer/lib/modifiers/custom.ts

@@ -1,16 +1,12 @@
-import {
-  clearRenderingContextDesc,
-  setRenderingContextDesc,
-  track,
-  untrack,
-} from '@ember/-internals/metal';
+import { track, untrack } from '@ember/-internals/metal';
 import { Factory } from '@ember/-internals/owner';
 import { getDebugName } from '@ember/-internals/utils';
 import { assert, deprecate } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
 import { Dict, Opaque, Simple } from '@glimmer/interfaces';
 import { combine, CONSTANT_TAG, createUpdatableTag, Tag, update } from '@glimmer/reference';
 import { Arguments, CapturedArguments, ModifierManager } from '@glimmer/runtime';
+import debugRenderMessage from '../utils/debug-render-message';
 
 export interface CustomModifierDefinitionState<ModifierInstance> {
   ModifierClass: Factory<ModifierInstance>;
@@ -169,19 +165,11 @@ class InteractiveCustomModifierManager<ModifierInstance>
     if (capabilities.disableAutoTracking === true) {
       untrack(() => delegate.installModifier(modifier, element, args.value()));
     } else {
-      if (DEBUG) {
-        let debugName = getDebugName!(modifier);
-        setRenderingContextDesc!(`(instance of a \`${debugName}\` modifier)`);
-      }
-
-      let combinedTrackingTag = track(() =>
-        delegate.installModifier(modifier, element, args.value())
+      let combinedTrackingTag = track(
+        () => delegate.installModifier(modifier, element, args.value()),
+        DEBUG && debugRenderMessage!(`(instance of a \`${getDebugName!(modifier)}\` modifier)`)
       );
 
-      if (DEBUG) {
-        clearRenderingContextDesc!();
-      }
-
       update(tag, combinedTrackingTag);
     }
   }
@@ -193,7 +181,10 @@ class InteractiveCustomModifierManager<ModifierInstance>
     if (capabilities.disableAutoTracking === true) {
       untrack(() => delegate.updateModifier(modifier, args.value()));
     } else {
-      let combinedTrackingTag = track(() => delegate.updateModifier(modifier, args.value()));
+      let combinedTrackingTag = track(
+        () => delegate.updateModifier(modifier, args.value()),
+        DEBUG && debugRenderMessage!(`(instance of a \`${getDebugName!(modifier)}\` modifier)`)
+      );
       update(tag, combinedTrackingTag);
     }
   }

packages/@ember/-internals/glimmer/lib/renderer.ts

@@ -418,7 +418,9 @@ export abstract class Renderer {
           }
 
           if (DEBUG) {
-            // run in an autotracking transaction to prevent backflow errors
+            // run in an autotracking transaction to prevent backflow errors.
+            // we use `bind` here to avoid creating a closure (and requiring a
+            // hoisted variable).
             runInAutotrackingTransaction!(root.render.bind(root));
           } else {
             root.render();

packages/@ember/-internals/glimmer/lib/syntax/outlet.ts

@@ -144,7 +144,7 @@ class OutletModelReference implements VersionedPathReference {
 
 if (DEBUG) {
   OutletModelReference.prototype['debug'] = function debug(subPath: string): string {
-    return `${this['debugStackLog']}@mount.${subPath}`;
+    return `${this['debugStackLog']}@model.${subPath}`;
   };
 }
 

packages/@ember/-internals/glimmer/lib/utils/bindings.ts

@@ -6,28 +6,27 @@ import { Opaque, Option, Simple } from '@glimmer/interfaces';
 import { CachedReference, combine, map, Reference, Tag } from '@glimmer/reference';
 import { ElementOperations, PrimitiveReference } from '@glimmer/runtime';
 import { Core, Ops } from '@glimmer/wire-format';
-import { ROOT_REF } from '../component';
 import { Component } from './curly-component-state-bucket';
-import { referenceFromParts } from './references';
+import { referenceFromParts, RootReference } from './references';
 import { htmlSafe, isHTMLSafe, SafeString } from './string';
 
-export function referenceForKey(component: Component, key: string) {
-  return component[ROOT_REF].get(key);
+export function referenceForKey(rootRef: RootReference<Component>, key: string) {
+  return rootRef.get(key);
 }
 
-function referenceForParts(component: Component, parts: string[]): Reference {
+function referenceForParts(rootRef: RootReference<Component>, parts: string[]): Reference {
   let isAttrs = parts[0] === 'attrs';
 
   // TODO deprecate this
   if (isAttrs) {
     parts.shift();
 
     if (parts.length === 1) {
-      return referenceForKey(component, parts[0]);
+      return referenceForKey(rootRef, parts[0]);
     }
   }
 
-  return referenceFromParts(component[ROOT_REF], parts);
+  return referenceFromParts(rootRef, parts);
 }
 
 // TODO we should probably do this transform at build time
@@ -81,6 +80,7 @@ export const AttributeBinding = {
   install(
     _element: Simple.Element,
     component: Component,
+    rootRef: RootReference<Component>,
     parsed: [string, string, boolean],
     operations: ElementOperations
   ) {
@@ -99,8 +99,8 @@ export const AttributeBinding = {
 
     let isPath = prop.indexOf('.') > -1;
     let reference = isPath
-      ? referenceForParts(component, prop.split('.'))
-      : referenceForKey(component, prop);
+      ? referenceForParts(rootRef, prop.split('.'))
+      : referenceForKey(rootRef, prop);
 
     assert(
       `Illegal attributeBinding: '${prop}' is not a valid attribute name.`,
@@ -114,7 +114,7 @@ export const AttributeBinding = {
     ) {
       reference = new StyleBindingReference(
         reference,
-        referenceForKey(component, 'isVisible'),
+        referenceForKey(rootRef, 'isVisible'),
         component
       );
     }
@@ -134,16 +134,14 @@ let StyleBindingReference:
 if (EMBER_COMPONENT_IS_VISIBLE) {
   StyleBindingReference = class extends CachedReference<string | SafeString> {
     public tag: Tag;
-    private component: Component;
     constructor(
       private inner: Reference<string>,
       private isVisible: Reference<Opaque>,
-      component: Component
+      private component: Component
     ) {
       super();
 
       this.tag = combine([inner.tag, isVisible.tag]);
-      this.component = component;
     }
 
     compute(): string | SafeString {
@@ -179,20 +177,30 @@ if (EMBER_COMPONENT_IS_VISIBLE) {
 export let IsVisibleBinding:
   | undefined
   | {
-      install(element: Simple.Element, component: Component, operations: ElementOperations): void;
+      install(
+        element: Simple.Element,
+        component: Component,
+        rootRef: RootReference<Component>,
+        operations: ElementOperations
+      ): void;
       mapStyleValue(isVisible: boolean, component: Component): SafeString | null;
     };
 
 if (EMBER_COMPONENT_IS_VISIBLE) {
   IsVisibleBinding = {
-    install(_element: Simple.Element, component: Component, operations: ElementOperations) {
+    install(
+      _element: Simple.Element,
+      component: Component,
+      rootRef: RootReference<Component>,
+      operations: ElementOperations
+    ) {
       let componentMapStyleValue = (isVisible: boolean) => {
         return this.mapStyleValue(isVisible, component);
       };
 
       operations.setAttribute(
         'style',
-        map(referenceForKey(component, 'isVisible'), componentMapStyleValue),
+        map(referenceForKey(rootRef, 'isVisible') as any, componentMapStyleValue),
         false,
         null
       );
@@ -219,7 +227,7 @@ if (EMBER_COMPONENT_IS_VISIBLE) {
 export const ClassNameBinding = {
   install(
     _element: Simple.Element,
-    component: Component,
+    rootRef: RootReference<Component>,
     microsyntax: string,
     operations: ElementOperations
   ) {
@@ -231,7 +239,7 @@ export const ClassNameBinding = {
     } else {
       let isPath = prop.indexOf('.') > -1;
       let parts = isPath ? prop.split('.') : [];
-      let value = isPath ? referenceForParts(component, parts) : referenceForKey(component, prop);
+      let value = isPath ? referenceForParts(rootRef, parts) : referenceForKey(rootRef, prop);
       let ref;
 
       if (truthy === undefined) {

packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts

@@ -4,6 +4,7 @@ import { CapturedNamedArguments } from '@glimmer/runtime';
 import { Opaque } from '@glimmer/util';
 import Environment from '../environment';
 import { Factory as TemplateFactory, OwnedTemplate } from '../template';
+import { RootReference } from './references';
 
 export interface Component {
   _debugContainerKey: string;
@@ -38,6 +39,7 @@ function NOOP() {}
 */
 export default class ComponentStateBucket {
   public classRef: VersionedReference<Opaque> | null = null;
+  public rootRef: RootReference<Component>;
   public argsRevision: Revision;
 
   constructor(
@@ -49,6 +51,7 @@ export default class ComponentStateBucket {
   ) {
     this.classRef = null;
     this.argsRevision = args === null ? 0 : value(args.tag);
+    this.rootRef = new RootReference(component, environment);
   }
 
   destroy() {

packages/@ember/-internals/glimmer/lib/utils/debug-render-message.ts

@@ -0,0 +1,11 @@
+import { DEBUG } from '@glimmer/env';
+
+let debugRenderMessage: undefined | ((renderingStack: string) => string);
+
+if (DEBUG) {
+  debugRenderMessage = (renderingStack: string) => {
+    return `While rendering:\n----------------\n${renderingStack.replace(/^/gm, '  ')}`;
+  };
+}
+
+export default debugRenderMessage;

packages/@ember/-internals/glimmer/lib/utils/debug-render-tree.ts

@@ -136,7 +136,7 @@ export default class DebugRenderTree<Bucket extends object = object> {
   logCurrentRenderStack(): string {
     let nodes = this.stack.toArray().map(bucket => this.nodeFor(bucket));
     let message = nodes
-      .filter(node => node.type !== 'outlet')
+      .filter(node => node.type !== 'outlet' && node.name !== '-top-level')
       .map((node, index) => `${repeatString(' ', index * 2)}${node.name}`);
 
     message.push(`${repeatString(' ', message.length * 2)}`);