[wip] better backtracking re-render assertion

packages/ember-glimmer/lib/environment.js

@@ -58,6 +58,25 @@ const builtInComponents = {
 
 import { default as ActionModifierManager } from './modifiers/action';
 
+//TODO: GJ: extract
+class TemplateDebugStack {
+  constructor() {
+    this._stack = [];
+  }
+
+  push(templateName) {
+    this._stack.push(templateName);
+  }
+
+  pop() {
+    return this._stack.pop();
+  }
+
+  getCurrent() {
+    return this._stack[this._stack.length - 1];
+  }
+}
+
 export default class Environment extends GlimmerEnvironment {
   static create(options) {
     return new Environment(options);
@@ -131,6 +150,8 @@ export default class Environment extends GlimmerEnvironment {
       '-html-safe': htmlSafeHelper,
       '-get-dynamic-var': getDynamicVar
     };
+
+    runInDebug(() => this.templateDebugStack = new TemplateDebugStack());
   }
 
   // Hello future traveler, welcome to the world of syntax refinement.

packages/ember-glimmer/lib/syntax/curly-component.js

@@ -184,6 +184,12 @@ class CurlyComponentManager {
   }
 
   create(environment, definition, args, dynamicScope, callerSelfRef, hasBlock) {
+    runInDebug(() => {
+      let templateName = definition.ComponentClass._debugContainerKey;
+      environment.templateDebugStack.push(templateName);
+      this.templateDebugStack = environment.templateDebugStack;
+    });
+
     let parentView = dynamicScope.view;
 
     let klass = definition.ComponentClass;
@@ -302,6 +308,8 @@ class CurlyComponentManager {
   didRenderLayout(bucket, bounds) {
     bucket.component[BOUNDS] = bounds;
     bucket.finalize();
+
+    runInDebug(() => this.templateDebugStack.pop());
   }
 
   getTag({ component }) {
@@ -319,6 +327,12 @@ class CurlyComponentManager {
   update(bucket, _, dynamicScope) {
     let { component, args, argsRevision, environment } = bucket;
 
+    runInDebug(() => {
+      let templateName = Object.getPrototypeOf(bucket.component)._debugContainerKey;
+      environment.templateDebugStack.push(templateName);
+      this.templateDebugStack = environment.templateDebugStack; //TODO: GJ: do we need this?
+    });
+
     bucket.finalizer = _instrumentStart('render.component', rerenderInstrumentDetails, component);
 
     if (!args.tag.validate(argsRevision)) {
@@ -363,6 +377,12 @@ const MANAGER = new CurlyComponentManager();
 
 class TopComponentManager extends CurlyComponentManager {
   create(environment, definition, args, dynamicScope, currentScope, hasBlock) {
+    runInDebug(() => {
+      let templateName = definition.ComponentClass._debugContainerKey;
+      environment.templateDebugStack.push(templateName);
+      this.templateDebugStack = environment.templateDebugStack;
+    });
+
     let component = definition.ComponentClass;
 
     let finalizer = _instrumentStart('render.component', initialRenderInstrumentDetails, component);

packages/ember-glimmer/lib/syntax/outlet.js

@@ -8,7 +8,7 @@ import {
   StatementSyntax,
   ComponentDefinition
 } from 'glimmer-runtime';
-import { _instrumentStart } from 'ember-metal';
+import { runInDebug, _instrumentStart } from 'ember-metal';
 import { RootReference } from '../utils/references';
 import {
   UpdatableTag,
@@ -180,6 +180,11 @@ class OutletComponentManager {
   }
 
   create(environment, definition, args, dynamicScope) {
+    runInDebug(() => {
+      environment.templateDebugStack.push(definition.template.meta.moduleName);
+      this.templateDebugStack = environment.templateDebugStack;
+    });
+
     let outletStateReference = dynamicScope.outletState = dynamicScope.outletState.get('outlets').get(definition.outletName);
     let outletState = outletStateReference.value();
     return new StateBucket(outletState);
@@ -203,6 +208,8 @@ class OutletComponentManager {
 
   didRenderLayout(bucket) {
     bucket.finalize();
+
+    runInDebug(() => this.templateDebugStack.pop());
   }
 
   didCreateElement() {}
@@ -216,6 +223,11 @@ const MANAGER = new OutletComponentManager();
 
 class TopLevelOutletComponentManager extends OutletComponentManager {
   create(environment, definition, args, dynamicScope) {
+    runInDebug(() => {
+      environment.templateDebugStack.push(definition.template.meta.moduleName);
+      this.templateDebugStack = environment.templateDebugStack;
+    });
+
     return new StateBucket(dynamicScope.outletState.value());
   }
 

packages/ember-glimmer/tests/integration/components/curly-components-test.js

@@ -2076,7 +2076,7 @@ moduleFor('Components test: curly components', class extends RenderingTest {
 
   ['@test when a property is changed during children\'s rendering'](assert) {
     if (isFeatureEnabled('ember-glimmer-allow-backtracking-rerender')) {
-      expectDeprecation(/modified value twice on <\(.+> in a single render/);
+      expectDeprecation(/rendered "value" in "component:x-middle" and modified it in "component:x-inner" \(<\(.+>\) in a single render/);
     }
 
     let outer, middle;
@@ -2126,7 +2126,7 @@ moduleFor('Components test: curly components', class extends RenderingTest {
     if (!isFeatureEnabled('ember-glimmer-allow-backtracking-rerender')) {
       expectAssertion(() => {
         this.runTask(() => outer.set('value', 2));
-      }, /modified value twice on <\(.+> in a single render/);
+      }, /rendered "value" in "component:x-middle" and modified it in "component:x-inner" \(<\(.+>\) in a single render/);
 
       return;
     } else {
@@ -2149,7 +2149,7 @@ moduleFor('Components test: curly components', class extends RenderingTest {
 
   ['@test when a shared dependency is changed during children\'s rendering'](assert) {
     if (isFeatureEnabled('ember-glimmer-allow-backtracking-rerender')) {
-      expectDeprecation(/modified wrapper.content twice on <Ember.Object.+> in a single render/);
+      expectDeprecation(/rendered "wrapper.content" in "component:x-outer" and modified it in "component:x-inner" \(<Ember.Object.+>\) in a single render/);
     }
 
     let outer;
@@ -2179,7 +2179,7 @@ moduleFor('Components test: curly components', class extends RenderingTest {
     if (!isFeatureEnabled('ember-glimmer-allow-backtracking-rerender')) {
       expectAssertion(() => {
         this.render('{{x-outer}}');
-      }, /modified wrapper.content twice on <Ember.Object.+> in a single render/);
+      }, /rendered "wrapper.content" in "component:x-outer" and modified it in "component:x-inner" \(<Ember.Object.+>\) in a single render/);
 
       return;
     } else {

packages/ember-metal/lib/meta.js

@@ -67,7 +67,9 @@ const IS_PROXY = 1 << 4;
 if (isEnabled('ember-glimmer-detect-backtracking-rerender') ||
     isEnabled('ember-glimmer-allow-backtracking-rerender')) {
   members.lastRendered = ownMap;
+  //TODO: GJ: are these the best names?
   members.lastRenderedFrom = ownMap; // FIXME: not used in production, remove me from prod builds
+  members.lastRenderedInTemplate = ownMap;
 }
 
 let memberNames = Object.keys(members);
@@ -109,6 +111,7 @@ export function Meta(obj, parentMeta) {
       isEnabled('ember-glimmer-allow-backtracking-rerender')) {
     this._lastRendered = undefined;
     this._lastRenderedFrom = undefined; // FIXME: not used in production, remove me from prod builds
+    this._lastRenderedInTemplate = undefined;
   }
 
   this._initializeListeners();

packages/ember-metal/lib/transaction.js

@@ -23,10 +23,14 @@ if (isEnabled('ember-glimmer-detect-backtracking-rerender') ||
   let counter = 0;
   let inTransaction = false;
   let shouldReflush;
+  let templateDebugStack;
 
   runInTransaction = function(context, methodName) {
     shouldReflush = false;
     inTransaction = true;
+    runInDebug(() => {
+      templateDebugStack = context.env.templateDebugStack;
+    });
     context[methodName]();
     inTransaction = false;
     counter++;
@@ -42,6 +46,11 @@ if (isEnabled('ember-glimmer-detect-backtracking-rerender') ||
     runInDebug(() => {
       let lastRenderedFrom = meta.writableLastRenderedFrom();
       lastRenderedFrom[key] = reference;
+
+      if (templateDebugStack) { //TODO: GJ: why is templateDebugStack sometimes undefined?
+        var lastRenderedInTemplate = meta.writableLastRenderedInTemplate();
+        lastRenderedInTemplate[key] = templateDebugStack.getCurrent();
+      }
     });
   };
 
@@ -69,7 +78,11 @@ if (isEnabled('ember-glimmer-detect-backtracking-rerender') ||
             label = 'the same value';
           }
 
-          return `You modified ${label} twice on ${object} in a single render. This was unreliable and slow in Ember 1.x and ${implication}`;
+          let templates = meta.readableLastRenderedInTemplate();
+          var lastRenderedInTemplate = templates[key];
+
+          let currentTemplate = templateDebugStack.getCurrent();
+          return `You rendered "${parts.join('.')}" in "${lastRenderedInTemplate}" and modified it in "${currentTemplate}" (${object}) in a single render. This was unreliable and slow in Ember 1.x and ${implication}`;
         }()),
         false);