Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CLEANUP] Remove deprecated jQuery integration #19665

Merged
merged 2 commits into from
Jul 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { DEBUG } from '@glimmer/env';
import { alias, set, get, observer, on, computed, tracked } from '@ember/-internals/metal';
import Service, { inject as injectService } from '@ember/service';
import { Object as EmberObject, A as emberA } from '@ember/-internals/runtime';
import { jQueryDisabled } from '@ember/-internals/views';

import { Component, compile, htmlSafe } from '../../utils/helpers';
import { backtrackingMessageFor } from '../../utils/debug-stack';
Expand Down Expand Up @@ -3882,108 +3881,3 @@ moduleFor(
}
}
);

if (jQueryDisabled) {
moduleFor(
'Components test: curly components: jQuery disabled',
class extends RenderingTestCase {
['@test jQuery proxy is not available without jQuery']() {
let instance;

let FooBarComponent = Component.extend({
init() {
this._super();
instance = this;
},
});

this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: 'hello',
});

this.render('{{foo-bar}}');

expectAssertion(() => {
instance.$()[0];
}, 'You cannot access this.$() with `jQuery` disabled.');
}
}
);
} else {
moduleFor(
'Components test: curly components: jQuery enabled',
class extends RenderingTestCase {
['@test it has a jQuery proxy to the element']() {
let instance;
let element1;
let element2;

let FooBarComponent = Component.extend({
init() {
this._super();
instance = this;
},
});

this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: 'hello',
});

this.render('{{foo-bar}}');

expectDeprecation(() => {
element1 = instance.$()[0];
}, 'Using this.$() in a component has been deprecated, consider using this.element');

this.assertComponentElement(element1, { content: 'hello' });

runTask(() => this.rerender());

expectDeprecation(() => {
element2 = instance.$()[0];
}, 'Using this.$() in a component has been deprecated, consider using this.element');

this.assertComponentElement(element2, { content: 'hello' });

this.assertSameNode(element2, element1);
}

['@test it scopes the jQuery proxy to the component element'](assert) {
let instance;
let $span;

let FooBarComponent = Component.extend({
init() {
this._super();
instance = this;
},
});

this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: '<span class="inner">inner</span>',
});

this.render('<span class="outer">outer</span>{{foo-bar}}');

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());

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');
}
}
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { DEBUG } from '@glimmer/env';
import { moduleFor, RenderingTestCase, strip, runTask } from 'internal-test-helpers';

import { set, computed } from '@ember/-internals/metal';
import { jQueryDisabled } from '@ember/-internals/views';

import { Component } from '../../utils/helpers';
import { backtrackingMessageFor } from '../../utils/debug-stack';
Expand Down Expand Up @@ -806,108 +805,3 @@ moduleFor(
}
}
);

if (jQueryDisabled) {
moduleFor(
'Components test: dynamic components: jQuery disabled',
class extends RenderingTestCase {
['@test jQuery proxy is not available without jQuery']() {
let instance;

let FooBarComponent = Component.extend({
init() {
this._super();
instance = this;
},
});

this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: 'hello',
});

this.render('{{component "foo-bar"}}');

expectAssertion(() => {
instance.$()[0];
}, 'You cannot access this.$() with `jQuery` disabled.');
}
}
);
} else {
moduleFor(
'Components test: dynamic components : jQuery enabled',
class extends RenderingTestCase {
['@test it has a jQuery proxy to the element']() {
let instance;
let element1;
let element2;

let FooBarComponent = Component.extend({
init() {
this._super();
instance = this;
},
});

this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: 'hello',
});

this.render('{{component "foo-bar"}}');

expectDeprecation(() => {
element1 = instance.$()[0];
}, 'Using this.$() in a component has been deprecated, consider using this.element');

this.assertComponentElement(element1, { content: 'hello' });

runTask(() => this.rerender());

expectDeprecation(() => {
element2 = instance.$()[0];
}, 'Using this.$() in a component has been deprecated, consider using this.element');

this.assertComponentElement(element2, { content: 'hello' });

this.assertSameNode(element2, element1);
}

['@test it scopes the jQuery proxy to the component element'](assert) {
let instance;
let $span;

let FooBarComponent = Component.extend({
init() {
this._super();
instance = this;
},
});

this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: '<span class="inner">inner</span>',
});

this.render('<span class="outer">outer</span>{{component "foo-bar"}}');

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());

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');
}
}
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -227,26 +227,6 @@ moduleFor(
this.assertText('baz');
}

['@test throws an error if when $() is accessed on component where `tagName` is an empty string']() {
let template = `hit dem folks`;
let FooBarComponent = Component.extend({
tagName: '',
init() {
this._super();
this.$();
},
});

this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template,
});

expectAssertion(() => {
this.render(`{{#foo-bar}}{{/foo-bar}}`);
}, /You cannot access this.\$\(\) on a component with `tagName: ''` specified/);
}

['@test renders a contained view with omitted start tag and tagless parent view context']() {
this.registerComponent('root-component', {
ComponentClass: Component.extend({
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
import {
moduleFor,
RenderingTestCase,
classes,
strip,
runAppend,
runTask,
} from 'internal-test-helpers';
import { classes, moduleFor, RenderingTestCase, runTask, strip } from 'internal-test-helpers';

import { schedule } from '@ember/runloop';
import { set, setProperties } from '@ember/-internals/metal';
import { A as emberA } from '@ember/-internals/runtime';
import { getViewId, getViewElement, jQueryDisabled } from '@ember/-internals/views';
import { getViewElement, getViewId } from '@ember/-internals/views';

import { Component } from '../../utils/helpers';

Expand Down Expand Up @@ -1604,54 +1597,6 @@ moduleFor(
}
);

if (!jQueryDisabled) {
moduleFor(
'Run loop and lifecycle hooks - jQuery only',
class extends RenderingTestCase {
['@test lifecycle hooks have proper access to this.$()'](assert) {
assert.expect(7);
let component;
let FooBarComponent = Component.extend({
tagName: 'div',
init() {
assert.notOk(this.$(), 'no access to element via this.$() on init() enter');
this._super(...arguments);
assert.notOk(this.$(), 'no access to element via this.$() after init() finished');
},
willInsertElement() {
component = this;
assert.ok(this.$(), 'willInsertElement has access to element via this.$()');
},
didInsertElement() {
assert.ok(this.$(), 'didInsertElement has access to element via this.$()');
},
willDestroyElement() {
assert.ok(this.$(), 'willDestroyElement has access to element via this.$()');
},
didDestroyElement() {
assert.notOk(
this.$(),
'didDestroyElement does not have access to element via this.$()'
);
},
});
this.registerComponent('foo-bar', {
ComponentClass: FooBarComponent,
template: 'hello',
});
let { owner } = this;

expectDeprecation(() => {
let comp = owner.lookup('component:foo-bar');
runAppend(comp);
runTask(() => component.destroy?.());
}, 'Using this.$() in a component has been deprecated, consider using this.element');
runTask(() => component.destroy?.());
}
}
);
}

function assertDestroyHooks(assert, _actual, _expected) {
_expected.forEach((expected, i) => {
let name = expected.name;
Expand Down
43 changes: 0 additions & 43 deletions packages/@ember/-internals/views/lib/mixins/view_support.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ import { descriptorForProperty, Mixin, nativeDescDecorator } from '@ember/-inter
import { assert } from '@ember/debug';
import { hasDOM } from '@ember/-internals/browser-environment';
import { matches } from '../system/utils';
import { jQuery, jQueryDisabled } from '../system/jquery';
import { deprecate } from '@ember/debug';
import { JQUERY_INTEGRATION } from '@ember/deprecated-features';

function K() {
return this;
Expand Down Expand Up @@ -422,46 +419,6 @@ let mixin = {
},
};

if (JQUERY_INTEGRATION) {
/**
Returns a jQuery object for this view's element. If you pass in a selector
string, this method will return a jQuery object, using the current element
as its buffer.

For example, calling `view.$('li')` will return a jQuery object containing
all of the `li` elements inside the DOM element of this view.

@method $
@param {String} [selector] a jQuery-compatible selector string
@return {jQuery} the jQuery object for the DOM node
@public
@deprecated
*/
mixin.$ = function $(sel) {
assert(
"You cannot access this.$() on a component with `tagName: ''` specified.",
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://deprecations.emberjs.com/v3.x#toc_jquery-apis',
for: 'ember-source',
since: {
enabled: '3.9.0',
},
}
);
if (this.element) {
return sel ? jQuery(sel, this.element) : jQuery(this.element);
}
};
}

/**
@class ViewMixin
@namespace Ember
Expand Down
Loading