Deprecate {{attrs.foo}}

emberjs · Dec 12, 2017 · 5f5b434 · 5f5b434
1 parent 416f56f
commit 5f5b434
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 5 deletions.
diff --git a/packages/ember-glimmer/tests/integration/application/engine-test.js b/packages/ember-glimmer/tests/integration/application/engine-test.js
@@ -6,6 +6,7 @@ import { Component } from 'ember-glimmer';
 import { Engine } from 'ember-application';
 import { Route, Router } from 'ember-routing';
 import { run } from 'ember-metal';
+import { EMBER_GLIMMER_NAMED_ARGUMENTS } from 'ember/features';
 
 moduleFor('Application test: engine rendering', class extends ApplicationTest {
   get routerOptions() {
@@ -182,7 +183,7 @@ moduleFor('Application test: engine rendering', class extends ApplicationTest {
       init() {
         this._super(...arguments);
         this.register('template:components/foo-bar', compile(`{{partial "troll"}}`));
-        this.register('template:troll', compile('{{attrs.wat}}'));
+        this.register('template:troll', EMBER_GLIMMER_NAMED_ARGUMENTS ? compile('{{@wat}}') : compile('{{attrs.wat}}'));
         this.register('controller:application', Controller.extend({
           contextType: 'Engine'
         }));

diff --git a/packages/ember-glimmer/tests/integration/components/curly-components-test.js b/packages/ember-glimmer/tests/integration/components/curly-components-test.js
@@ -24,6 +24,7 @@ import {
   styles
 } from '../../utils/test-helpers';
 import {
+  EMBER_GLIMMER_NAMED_ARGUMENTS,
   MANDATORY_SETTER
 } from 'ember/features';
 
@@ -1066,6 +1067,10 @@ moduleFor('Components test: curly components', class extends RenderingTest {
   }
 
   ['@test non-block with properties on attrs']() {
+    if (EMBER_GLIMMER_NAMED_ARGUMENTS) {
+      expectDeprecation('Accessing `attrs.someProp` is deprecated, use `@someProp` instead.');
+    }
+
     this.registerComponent('non-block', {
       template: 'In layout - someProp: {{attrs.someProp}}'
     });
@@ -1259,6 +1264,8 @@ moduleFor('Components test: curly components', class extends RenderingTest {
   }
 
   ['@feature(ember-glimmer-named-arguments) this.attrs.foo === attrs.foo === @foo === foo']() {
+    expectDeprecation('Accessing `attrs.value` is deprecated, use `@value` instead.');
+
     this.registerComponent('foo-bar', {
       template: strip`
         Args: {{this.attrs.value}} | {{attrs.value}} | {{@value}} | {{value}}
@@ -1351,6 +1358,10 @@ moduleFor('Components test: curly components', class extends RenderingTest {
   }
 
   ['@test block with properties on attrs']() {
+    if (EMBER_GLIMMER_NAMED_ARGUMENTS) {
+      expectDeprecation('Accessing `attrs.someProp` is deprecated, use `@someProp` instead.');
+    }
+
     this.registerComponent('with-block', {
       template: 'In layout - someProp: {{attrs.someProp}} - {{yield}}'
     });
@@ -3070,6 +3081,11 @@ moduleFor('Components test: curly components', class extends RenderingTest {
   }
 
   ['@test using attrs for positional params'](assert) {
+    if (EMBER_GLIMMER_NAMED_ARGUMENTS) {
+      expectDeprecation('Accessing `attrs.myVar` is deprecated, use `@myVar` instead.');
+      expectDeprecation('Accessing `attrs.myVar2` is deprecated, use `@myVar2` instead.');
+    }
+
     let MyComponent = Component.extend();
 
     this.registerComponent('foo-bar', {

diff --git a/packages/ember-glimmer/tests/integration/components/dynamic-components-test.js b/packages/ember-glimmer/tests/integration/components/dynamic-components-test.js
@@ -446,9 +446,9 @@ moduleFor('Components test: dynamic components', class extends RenderingTest {
   }
 
   ['@test nested component helpers'](assert) {
-    this.registerComponent('foo-bar', { template: 'yippie! {{attrs.location}} {{yield}}' });
-    this.registerComponent('baz-qux', { template: 'yummy {{attrs.location}} {{yield}}' });
-    this.registerComponent('corge-grault', { template: 'delicious {{attrs.location}} {{yield}}' });
+    this.registerComponent('foo-bar', { template: 'yippie! {{location}} {{yield}}' });
+    this.registerComponent('baz-qux', { template: 'yummy {{location}} {{yield}}' });
+    this.registerComponent('corge-grault', { template: 'delicious {{location}} {{yield}}' });
 
     this.render('{{#component componentName1 location=location}}{{#component componentName2 location=location}}arepas!{{/component}}{{/component}}', {
       componentName1: 'foo-bar',

diff --git a/packages/ember-glimmer/tests/integration/helpers/closure-action-test.js b/packages/ember-glimmer/tests/integration/helpers/closure-action-test.js
@@ -5,7 +5,10 @@ import {
   instrumentationSubscribe,
   instrumentationUnsubscribe
 } from 'ember-metal';
-import { EMBER_IMPROVED_INSTRUMENTATION } from 'ember/features';
+import {
+  EMBER_GLIMMER_NAMED_ARGUMENTS,
+  EMBER_IMPROVED_INSTRUMENTATION
+} from 'ember/features';
 import { RenderingTest, moduleFor } from '../../utils/test-case';
 import { strip } from '../../utils/abstract-test-case';
 import { Component, INVOKE } from '../../utils/helpers';
@@ -232,6 +235,10 @@ moduleFor('Helpers test: closure {{action}}', class extends RenderingTest {
   }
 
   ['@test [#12718] a nice error is shown when a bound action function is undefined and it is passed as attrs.foo']() {
+    if (EMBER_GLIMMER_NAMED_ARGUMENTS) {
+      expectDeprecation('Accessing `attrs.external-action` is deprecated, use `@external-action` instead.');
+    }
+
     this.registerComponent('inner-component', {
       template: '<button id="inner-button" {{action (action attrs.external-action)}}>Click me</button>'
     });
@@ -905,6 +912,10 @@ moduleFor('Helpers test: closure {{action}}', class extends RenderingTest {
   }
 
   ['@test action closure does not get auto-mut wrapped'](assert) {
+    if (EMBER_GLIMMER_NAMED_ARGUMENTS) {
+      expectDeprecation('Accessing `attrs.submit` is deprecated, use `@submit` instead.');
+    }
+
     let first = 'raging robert';
     let second = 'mild machty';
     let returnValue = 'butch brian';
@@ -972,6 +983,7 @@ moduleFor('Helpers test: closure {{action}}', class extends RenderingTest {
 
   ['@test action should be called within a run loop']() {
     let innerComponent;
+
     let capturedRunLoop;
 
     let InnerComponent = Component.extend({

diff --git a/packages/ember-template-compiler/lib/plugins/transform-attrs-into-args.js b/packages/ember-template-compiler/lib/plugins/transform-attrs-into-args.js
@@ -1,3 +1,7 @@
+import { deprecate } from 'ember-debug';
+import { EMBER_GLIMMER_NAMED_ARGUMENTS } from 'ember/features';
+import calculateLocationDisplay from '../system/calculate-location-display';
+
 /**
  @module ember
 */
@@ -43,6 +47,13 @@ export default function transformAttrsIntoArgs(env) {
 
       PathExpression(node) {
         if (isAttrs(node, stack[stack.length - 1])) {
+          if (EMBER_GLIMMER_NAMED_ARGUMENTS) {
+            deprecate(deprecationMessage(env.meta.moduleName, node), false, {
+              id: 'ember-template-compiler.deprecate-attrs',
+              until: 'TBD'
+            });
+          }
+
           let path = b.path(node.original.substr(6));
           path.original = `@${path.original}`;
           path.data = true;
@@ -71,3 +82,12 @@ function isAttrs(node, symbols) {
 
   return false;
 }
+
+function deprecationMessage(moduleName, node) {
+  let sourceInformation = calculateLocationDisplay(moduleName, node.loc);
+  let name = node.original.substr(6);
+  let original = `attrs.${name}`;
+  let preferred = `@${name}`;
+
+  return `Accessing \`${original}\` is deprecated, use \`${preferred}\` instead.`;
+}