diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
index 80a864e5418..e3f22863f4f 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js
@@ -3612,6 +3612,8 @@ if (jQueryDisabled) {
class extends RenderingTestCase {
['@test it has a jQuery proxy to the element']() {
let instance;
+ let element1;
+ let element2;
let FooBarComponent = Component.extend({
init() {
@@ -3627,13 +3629,17 @@ if (jQueryDisabled) {
this.render('{{foo-bar}}');
- let element1 = instance.$()[0];
+ expectDeprecation(() => {
+ element1 = instance.$()[0];
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
this.assertComponentElement(element1, { content: 'hello' });
runTask(() => this.rerender());
- let element2 = instance.$()[0];
+ expectDeprecation(() => {
+ element2 = instance.$()[0];
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
this.assertComponentElement(element2, { content: 'hello' });
@@ -3642,6 +3648,7 @@ if (jQueryDisabled) {
['@test it scopes the jQuery proxy to the component element'](assert) {
let instance;
+ let $span;
let FooBarComponent = Component.extend({
init() {
@@ -3657,14 +3664,18 @@ if (jQueryDisabled) {
this.render('outer{{foo-bar}}');
- let $span = instance.$('span');
+ expectDeprecation(() => {
+ $span = instance.$('span');
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
assert.equal($span.length, 1);
assert.equal($span.attr('class'), 'inner');
runTask(() => this.rerender());
- $span = instance.$('span');
+ expectDeprecation(() => {
+ $span = instance.$('span');
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
assert.equal($span.length, 1);
assert.equal($span.attr('class'), 'inner');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js
index 77808c4f33c..5bd00eaec68 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js
@@ -835,6 +835,8 @@ if (jQueryDisabled) {
class extends RenderingTestCase {
['@test it has a jQuery proxy to the element']() {
let instance;
+ let element1;
+ let element2;
let FooBarComponent = Component.extend({
init() {
@@ -850,13 +852,17 @@ if (jQueryDisabled) {
this.render('{{component "foo-bar"}}');
- let element1 = instance.$()[0];
+ expectDeprecation(() => {
+ element1 = instance.$()[0];
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
this.assertComponentElement(element1, { content: 'hello' });
runTask(() => this.rerender());
- let element2 = instance.$()[0];
+ expectDeprecation(() => {
+ element2 = instance.$()[0];
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
this.assertComponentElement(element2, { content: 'hello' });
@@ -865,6 +871,7 @@ if (jQueryDisabled) {
['@test it scopes the jQuery proxy to the component element'](assert) {
let instance;
+ let $span;
let FooBarComponent = Component.extend({
init() {
@@ -880,14 +887,18 @@ if (jQueryDisabled) {
this.render('outer{{component "foo-bar"}}');
- let $span = instance.$('span');
+ expectDeprecation(() => {
+ $span = instance.$('span');
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
assert.equal($span.length, 1);
assert.equal($span.attr('class'), 'inner');
runTask(() => this.rerender());
- $span = instance.$('span');
+ expectDeprecation(() => {
+ $span = instance.$('span');
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
assert.equal($span.length, 1);
assert.equal($span.attr('class'), 'inner');
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js
index 24d1fa7ad5d..b62e9ff3951 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js
@@ -1603,7 +1603,7 @@ if (!jQueryDisabled) {
'Run loop and lifecycle hooks - jQuery only',
class extends RenderingTestCase {
['@test lifecycle hooks have proper access to this.$()'](assert) {
- assert.expect(6);
+ assert.expect(7);
let component;
let FooBarComponent = Component.extend({
tagName: 'div',
@@ -1634,8 +1634,12 @@ if (!jQueryDisabled) {
template: 'hello',
});
let { owner } = this;
- let comp = owner.lookup('component:foo-bar');
- runAppend(comp);
+
+ expectDeprecation(() => {
+ let comp = owner.lookup('component:foo-bar');
+ runAppend(comp);
+ runTask(() => tryInvoke(component, 'destroy'));
+ }, 'Using this.$() in a component has been deprecated, consider using this.element');
runTask(() => tryInvoke(component, 'destroy'));
}
}
diff --git a/packages/@ember/-internals/views/lib/mixins/view_support.js b/packages/@ember/-internals/views/lib/mixins/view_support.js
index c5a02f5740c..7e0b35205ef 100644
--- a/packages/@ember/-internals/views/lib/mixins/view_support.js
+++ b/packages/@ember/-internals/views/lib/mixins/view_support.js
@@ -5,6 +5,7 @@ import { assert } from '@ember/debug';
import { hasDOM } from '@ember/-internals/browser-environment';
import { matches } from '../system/utils';
import { default as jQuery, jQueryDisabled } from '../system/jquery';
+import { deprecate } from '@ember/debug';
function K() {
return this;
@@ -177,6 +178,15 @@ export default Mixin.create({
this.tagName !== ''
);
assert('You cannot access this.$() with `jQuery` disabled.', !jQueryDisabled);
+ deprecate(
+ 'Using this.$() in a component has been deprecated, consider using this.element',
+ false,
+ {
+ id: 'ember-views.curly-components.jquery-element',
+ until: '4.0.0',
+ url: 'https://emberjs.com/deprecations/v3.x#toc_jquery-apis',
+ }
+ );
if (this.element) {
return sel ? jQuery(sel, this.element) : jQuery(this.element);
}