Merge pull request #18214 from simonihmig/rfc486

 Add deprecations for mouseEnter/Leave/Move Ember events

packages/@ember/-internals/glimmer/lib/component.ts

@@ -11,7 +11,7 @@ import {
   ViewMixin,
   ViewStateSupport,
 } from '@ember/-internals/views';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
 import { DirtyableTag } from '@glimmer/reference';
 import { normalizeProperty, SVG_NAMESPACE } from '@glimmer/runtime';
@@ -642,11 +642,8 @@ export const BOUNDS = symbol('BOUNDS');
   * `contextMenu`
   * `click`
   * `doubleClick`
-  * `mouseMove`
   * `focusIn`
   * `focusOut`
-  * `mouseEnter`
-  * `mouseLeave`
 
   Form events:
 
@@ -749,6 +746,34 @@ const Component = CoreView.extend(
           !eventNames.length
         );
       }
+
+      deprecate(
+        `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://emberjs.com/deprecations/v3.x#toc_component-mouseenter-leave-move',
+        }
+      );
+      deprecate(
+        `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://emberjs.com/deprecations/v3.x#toc_component-mouseenter-leave-move',
+        }
+      );
+      deprecate(
+        `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://emberjs.com/deprecations/v3.x#toc_component-mouseenter-leave-move',
+        }
+      );
     },
 
     rerender() {

packages/@ember/-internals/glimmer/lib/modifiers/action.ts

@@ -1,6 +1,6 @@
 import { uuid } from '@ember/-internals/utils';
 import { ActionManager, isSimpleClick } from '@ember/-internals/views';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 import { flaggedInstrument } from '@ember/instrumentation';
 import { join } from '@ember/runloop';
 import { Opaque, Simple } from '@glimmer/interfaces';
@@ -230,7 +230,7 @@ export default class ActionModifierManager implements ModifierManager<ActionStat
     }
 
     let actionId = uuid();
-    return new ActionState(
+    let actionState = new ActionState(
       element,
       actionId,
       actionName,
@@ -241,6 +241,20 @@ export default class ActionModifierManager implements ModifierManager<ActionStat
       dom,
       tag
     );
+
+    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://emberjs.com/deprecations/v3.x#toc_action-mouseenter-leave-move',
+      }
+    );
+
+    return actionState;
   }
 
   install(actionState: ActionState) {

packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js

@@ -97,11 +97,8 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
         contextmenu: 'contextMenu',
         click: 'click',
         dblclick: 'doubleClick',
-        mousemove: 'mouseMove',
         focusin: 'focusIn',
         focusout: 'focusOut',
-        mouseenter: 'mouseEnter',
-        mouseleave: 'mouseLeave',
         submit: 'submit',
         input: 'input',
         change: 'change',

packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js

@@ -92,11 +92,8 @@ class InputRenderingTest extends RenderingTestCase {
       contextmenu: 'contextMenu',
       click: 'click',
       dblclick: 'doubleClick',
-      mousemove: 'mouseMove',
       focusin: 'focusIn',
       focusout: 'focusOut',
-      mouseenter: 'mouseEnter',
-      mouseleave: 'mouseLeave',
       submit: 'submit',
       input: 'input',
       change: 'change',

packages/@ember/-internals/glimmer/tests/integration/event-dispatcher-test.js

@@ -175,7 +175,7 @@ moduleFor(
       this.$('#is-done').trigger('click');
     }
 
-    ['@test delegated event listeners work for mouseEnter/Leave'](assert) {
+    ['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave'](assert) {
       let receivedEnterEvents = [];
       let receivedLeaveEvents = [];
 
@@ -191,7 +191,10 @@ moduleFor(
         template: `<div id="inner"></div>`,
       });
 
-      this.render(`{{x-foo id="outer"}}`);
+      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];
@@ -230,7 +233,7 @@ moduleFor(
       assert.strictEqual(receivedLeaveEvents[0].target, outer);
     }
 
-    ['@test delegated event listeners work for mouseEnter on SVG elements'](assert) {
+    ['@test [DEPRECATED] delegated event listeners work for mouseEnter on SVG elements'](assert) {
       let receivedEnterEvents = [];
       let receivedLeaveEvents = [];
 
@@ -247,7 +250,10 @@ moduleFor(
         template: `<g id="inner"></g>`,
       });
 
-      this.render(`{{x-foo id="outer"}}`);
+      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];
@@ -286,7 +292,9 @@ moduleFor(
       assert.strictEqual(receivedLeaveEvents[0].target, outer);
     }
 
-    ['@test delegated event listeners work for mouseEnter/Leave with skipped events'](assert) {
+    ['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave with skipped events'](
+      assert
+    ) {
       let receivedEnterEvents = [];
       let receivedLeaveEvents = [];
 
@@ -302,7 +310,10 @@ moduleFor(
         template: `<div id="inner"></div>`,
       });
 
-      this.render(`{{x-foo id="outer"}}`);
+      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];
@@ -327,7 +338,7 @@ moduleFor(
       assert.strictEqual(receivedLeaveEvents[0].target, inner);
     }
 
-    ['@test delegated event listeners work for mouseEnter/Leave with skipped events and subcomponent'](
+    ['@test [DEPRECATED] delegated event listeners work for mouseEnter/Leave with skipped events and subcomponent'](
       assert
     ) {
       let receivedEnterEvents = [];
@@ -350,7 +361,10 @@ moduleFor(
         template: ``,
       });
 
-      this.render(`{{#x-outer id="outer"}}{{x-inner id="inner"}}{{/x-outer}}`);
+      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];
@@ -375,6 +389,28 @@ moduleFor(
       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');
+    }
   }
 );
 

packages/@ember/-internals/glimmer/tests/integration/helpers/element-action-test.js

@@ -1663,5 +1663,130 @@ moduleFor(
         "Element with action handler has properly updated it's conditional class"
       );
     }
+
+    ['@test [DEPRECATED] it should support mouseEnter events']() {
+      let showCalled = false;
+
+      let ExampleComponent = Component.extend({
+        actions: {
+          show() {
+            showCalled = true;
+          },
+        },
+      });
+
+      this.registerComponent('example-component', {
+        ComponentClass: ExampleComponent,
+        template: '<div id="inner" {{action "show" on="mouseEnter"}}></div>',
+      });
+
+      expectDeprecation(
+        () => this.render('{{example-component id="outer"}}'),
+        'Using the `{{action}}` modifier with `mouseEnter` events has been deprecated.'
+      );
+
+      let parent = this.element;
+      let outer = this.$('#outer')[0];
+      let inner = this.$('#inner')[0];
+
+      runTask(() => {
+        this.$(outer).trigger('mouseenter', { canBubble: false, relatedTarget: parent });
+        this.$(inner).trigger('mouseover', { relatedTarget: parent });
+        this.$(parent).trigger('mouseout', { relatedTarget: inner });
+      });
+
+      this.assert.ok(showCalled, 'show action was called on mouseEnter');
+    }
+
+    ['@test [DEPRECATED] it should support mouseLeave events']() {
+      let showCalled = false;
+
+      let ExampleComponent = Component.extend({
+        actions: {
+          show() {
+            showCalled = true;
+          },
+        },
+      });
+
+      this.registerComponent('example-component', {
+        ComponentClass: ExampleComponent,
+        template: '<div id="inner" {{action "show" on="mouseLeave"}}></div>',
+      });
+
+      expectDeprecation(
+        () => this.render('{{example-component id="outer"}}'),
+        'Using the `{{action}}` modifier with `mouseLeave` events has been deprecated.'
+      );
+
+      let parent = this.element;
+      let outer = this.$('#outer')[0];
+      let inner = this.$('#inner')[0];
+
+      runTask(() => {
+        this.$(outer).trigger('mouseleave', { canBubble: false, relatedTarget: parent });
+        this.$(inner).trigger('mouseout', { relatedTarget: parent });
+        this.$(parent).trigger('mouseover', { relatedTarget: inner });
+      });
+
+      this.assert.ok(showCalled, 'show action was called on mouseLeave');
+    }
+
+    ['@test [DEPRECATED] it should support mouseMove events']() {
+      let showCalled = false;
+
+      let ExampleComponent = Component.extend({
+        actions: {
+          show() {
+            showCalled = true;
+          },
+        },
+      });
+
+      this.registerComponent('example-component', {
+        ComponentClass: ExampleComponent,
+        template: '<div id="inner" {{action "show" on="mouseMove"}}></div>',
+      });
+
+      expectDeprecation(
+        () => this.render('{{example-component id="outer"}}'),
+        'Using the `{{action}}` modifier with `mouseMove` events has been deprecated.'
+      );
+
+      runTask(() => {
+        this.$('#inner').trigger('mousemove');
+      });
+
+      this.assert.ok(showCalled, 'show action was called on mouseMove');
+    }
+
+    ['@test [DEPRECATED] it should support bound mouseMove events']() {
+      let showCalled = false;
+
+      let ExampleComponent = Component.extend({
+        eventType: 'mouseMove',
+        actions: {
+          show() {
+            showCalled = true;
+          },
+        },
+      });
+
+      this.registerComponent('example-component', {
+        ComponentClass: ExampleComponent,
+        template: '<div id="inner" {{action "show" on=eventType}}></div>',
+      });
+
+      expectDeprecation(
+        () => this.render('{{example-component id="outer"}}'),
+        'Using the `{{action}}` modifier with `mouseMove` events has been deprecated.'
+      );
+
+      runTask(() => {
+        this.$('#inner').trigger('mousemove');
+      });
+
+      this.assert.ok(showCalled, 'show action was called on mouseMove');
+    }
   }
 );