Skip to content

Commit

Permalink
[CLEANUP] Remove deprecated mouse events
Browse files Browse the repository at this point in the history
  • Loading branch information
@btecu
btecu committed Aug 18, 2021
1 parent 747f5ff commit a92682d
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 566 deletions.
40 changes: 0 additions & 40 deletions packages/@ember/-internals/glimmer/lib/component.ts
View file
Expand Up @@ -706,46 +706,6 @@ const Component = CoreView.extend(
!eventNames.length
);
}

deprecate(
`${this}: Using \`mouseEnter\` event handler methods in components has been deprecated.`,
this.mouseEnter === undefined,
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_component-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);
deprecate(
`${this}: Using \`mouseLeave\` event handler methods in components has been deprecated.`,
this.mouseLeave === undefined,
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_component-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);
deprecate(
`${this}: Using \`mouseMove\` event handler methods in components has been deprecated.`,
this.mouseMove === undefined,
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_component-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);
},

get _dispatcher(): EventDispatcher | null {
Expand Down
21 changes: 2 additions & 19 deletions packages/@ember/-internals/glimmer/lib/modifiers/action.ts
View file
@@ -1,7 +1,7 @@
import { Owner } from '@ember/-internals/owner';
import { uuid } from '@ember/-internals/utils';
import { ActionManager, EventDispatcher, isSimpleClick } from '@ember/-internals/views';
import { assert, deprecate } from '@ember/debug';
import { assert } from '@ember/debug';
import { flaggedInstrument } from '@ember/instrumentation';
import { join } from '@ember/runloop';
import { registerDestructor } from '@glimmer/destroyable';
Expand Down Expand Up @@ -194,25 +194,8 @@ class ActionModifierManager implements InternalModifierManager<ActionState, obje
}

let actionId = uuid();
let actionState = new ActionState(element, owner, actionId, actionArgs, named, positional);

deprecate(
`Using the \`{{action}}\` modifier with \`${actionState.eventName}\` events has been deprecated.`,
actionState.eventName !== 'mouseEnter' &&
actionState.eventName !== 'mouseLeave' &&
actionState.eventName !== 'mouseMove',
{
id: 'ember-views.event-dispatcher.mouseenter-leave-move',
until: '4.0.0',
url: 'https://deprecations.emberjs.com/v3.x#toc_action-mouseenter-leave-move',
for: 'ember-source',
since: {
enabled: '3.13.0-beta.1',
},
}
);

return actionState;
return new ActionState(element, owner, actionId, actionArgs, named, positional);
}

getDebugName(): string {
Expand Down
260 changes: 0 additions & 260 deletions packages/@ember/-internals/glimmer/tests/integration/event-dispatcher-test.js
View file
Expand Up @@ -270,266 +270,6 @@ moduleFor(

this.$('#is-done').trigger('click');
}

['@test native event on text node does not throw on hasAttribute [ISSUE #16730]'](assert) {
this.registerComponent('x-foo', {
ComponentClass: Component.extend({
actions: {
someAction() {},
},
}),
template: `<a id="inner" href="#" {{action 'someAction'}}>test</a>`,
});

this.render(`{{x-foo id="outer"}}`);

let node = this.$('#inner')[0].childNodes[0];

runTask(() => {
let event = document.createEvent('HTMLEvents');
event.initEvent('mousemove', true, true);
node.dispatchEvent(event);
});

assert.ok(true);
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave'](assert) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `<div id="inner"></div>`,
});

expectDeprecation(
() => this.render(`{{x-foo id="outer"}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// mouse moves over #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: outer });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, outer);

// mouse moves over #inner
runTask(() => {
this.$(inner).trigger('mouseover', { relatedTarget: outer });
this.$(outer).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was not triggered again');

// mouse moves out of #inner
runTask(() => {
this.$(inner).trigger('mouseout', { relatedTarget: outer });
this.$(outer).trigger('mouseover', { relatedTarget: inner });
});
assert.equal(receivedLeaveEvents.length, 0, 'mouseleave event was not triggered');

// mouse moves out of #outer
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: outer });
});
assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, outer);
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter on SVG elements'](assert) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
tagName: 'svg',
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `<g id="inner"></g>`,
});

expectDeprecation(
() => this.render(`{{x-foo id="outer"}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// mouse moves over #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: outer });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, outer);

// mouse moves over #inner
runTask(() => {
this.$(inner).trigger('mouseover', { relatedTarget: outer });
this.$(outer).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was not triggered again');

// mouse moves out of #inner
runTask(() => {
this.$(inner).trigger('mouseout', { relatedTarget: outer });
this.$(outer).trigger('mouseover', { relatedTarget: inner });
});
assert.equal(receivedLeaveEvents.length, 0, 'mouseleave event was not triggered');

// mouse moves out of #outer
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(outer).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: outer });
});
assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, outer);
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave with skipped events'](
assert
) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `<div id="inner"></div>`,
});

expectDeprecation(
() => this.render(`{{x-foo id="outer"}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// we replicate fast mouse movement, where mouseover is fired directly in #inner, skipping #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, inner);

// mouse moves out of #outer
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: inner });
});
assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, inner);
}

['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave with skipped events and subcomponent'](
assert
) {
let receivedEnterEvents = [];
let receivedLeaveEvents = [];

this.registerComponent('x-outer', {
ComponentClass: Component.extend({
mouseEnter(event) {
receivedEnterEvents.push(event);
},
mouseLeave(event) {
receivedLeaveEvents.push(event);
},
}),
template: `{{yield}}`,
});

this.registerComponent('x-inner', {
ComponentClass: Component.extend(),
template: ``,
});

expectDeprecation(
() => this.render(`{{#x-outer id="outer"}}{{x-inner id="inner"}}{{/x-outer}}`),
/Using `mouse(Enter|Leave)` event handler methods in components has been deprecated./
);

let parent = this.element;
let outer = this.$('#outer')[0];
let inner = this.$('#inner')[0];

// we replicate fast mouse movement, where mouseover is fired directly in #inner, skipping #outer
runTask(() => {
this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseover', { relatedTarget: parent });
this.$(parent).trigger('mouseout', { relatedTarget: inner });
});
assert.equal(receivedEnterEvents.length, 1, 'mouseenter event was triggered');
assert.strictEqual(receivedEnterEvents[0].target, inner);

// mouse moves out of #inner
runTask(() => {
this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
this.$(inner).trigger('mouseout', { relatedTarget: parent });
this.$(parent).trigger('mouseover', { relatedTarget: inner });
});

assert.equal(receivedLeaveEvents.length, 1, 'mouseleave event was triggered');
assert.strictEqual(receivedLeaveEvents[0].target, inner);
}

['@test [DEPRECATED] supports mouseMove events'](assert) {
let receivedEvent;

this.registerComponent('x-foo', {
ComponentClass: Component.extend({
mouseMove(event) {
receivedEvent = event;
},
}),
template: `<div id="inner"></div>`,
});

expectDeprecation(
/Using `mouseMove` event handler methods in components has been deprecated\./
);

this.render(`{{x-foo}}`);

runTask(() => this.$('#inner').trigger('mousemove'));
assert.ok(receivedEvent, 'mousemove event was triggered');
}
}
);

Expand Down

0 comments on commit a92682d

Please sign in to comment.