diff --git a/packages/ember-glimmer/tests/integration/application/engine-test.js b/packages/ember-glimmer/tests/integration/application/engine-test.js index 5a4f8a29b52..1cf8ba57d76 100644 --- 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 index 48f46553b30..b05d5d98111 100644 --- 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 index 83042d1c75e..a1926366a0a 100644 --- 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 index 2504fdf96a8..b5506a97600 100644 --- 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: '' }); @@ -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 index 55dd0045277..bbcfca7ff76 100644 --- 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.`; +}