Deprecate Evented

.gitignore

@@ -54,3 +54,4 @@ npm-debug.log
 # couple of the files. Once it is, we can switch this over to just ignoring
 # `types/stable` entirely.
 types/stable
+.puppeteer-cache/

package.json

@@ -211,6 +211,7 @@
       "@ember/-internals/views/lib/mixins/action_support.js": "ember-source/@ember/-internals/views/lib/mixins/action_support.js",
       "@ember/-internals/views/lib/system/event_dispatcher.js": "ember-source/@ember/-internals/views/lib/system/event_dispatcher.js",
       "@ember/-internals/views/lib/system/utils.js": "ember-source/@ember/-internals/views/lib/system/utils.js",
+      "@ember/-internals/views/lib/views/core-view-utils.js": "ember-source/@ember/-internals/views/lib/views/core-view-utils.js",
       "@ember/-internals/views/lib/views/core_view.js": "ember-source/@ember/-internals/views/lib/views/core_view.js",
       "@ember/-internals/views/lib/views/states.js": "ember-source/@ember/-internals/views/lib/views/states.js",
       "@ember/application/index.js": "ember-source/@ember/application/index.js",

packages/@ember/-internals/deprecations/index.ts

@@ -20,7 +20,7 @@ export function isRemoved(options: DeprecationOptions) {
   return emberVersionGte(options.until);
 }
 
-interface DeprecationObject {
+export interface DeprecationObject {
   options: DeprecationOptions;
   test: boolean;
   isEnabled: boolean;
@@ -122,6 +122,13 @@ export const DEPRECATIONS = {
     until: '7.0.0',
     url: 'https://deprecations.emberjs.com/id/using-amd-bundles',
   }),
+  DEPRECATE_EVENTED: deprecation({
+    id: 'ember-evented',
+    for: 'ember-source',
+    since: { available: '6.12.0' },
+    until: '8.0.0',
+    url: 'https://deprecations.emberjs.com/id/ember-evented',
+  }),
 };
 
 export function deprecateUntil(message: string, deprecation: DeprecationObject) {

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

@@ -5,7 +5,12 @@ import {
   setOwner,
 } from '@ember/-internals/owner';
 import { enumerableSymbol, guidFor } from '@ember/-internals/utils';
-import { addChildView, setElementView, setViewElement } from '@ember/-internals/views';
+import {
+  addChildView,
+  sendCoreViewEvent,
+  setElementView,
+  setViewElement,
+} from '@ember/-internals/views';
 import type { Nullable } from '@ember/-internals/utility-types';
 import { assert, debugFreeze } from '@ember/debug';
 import { _instrumentStart } from '@ember/instrumentation';
@@ -305,20 +310,20 @@ export default class CurlyComponentManager
       addChildView(parentView, component);
     }
 
-    component.trigger('didReceiveAttrs');
+    sendCoreViewEvent(component, 'didReceiveAttrs');
 
     let hasWrappedElement = component.tagName !== '';
 
     // We usually do this in the `didCreateElement`, but that hook doesn't fire for tagless components
     if (!hasWrappedElement) {
       if (isInteractive) {
-        component.trigger('willRender');
+        sendCoreViewEvent(component, 'willRender');
       }
 
       component._transitionTo('hasElement');
 
       if (isInteractive) {
-        component.trigger('willInsertElement');
+        sendCoreViewEvent(component, 'willInsertElement');
       }
     }
 
@@ -342,7 +347,7 @@ export default class CurlyComponentManager
     }
 
     if (isInteractive && hasWrappedElement) {
-      component.trigger('willRender');
+      sendCoreViewEvent(component, 'willRender');
     }
 
     endUntrackFrame();
@@ -407,7 +412,7 @@ export default class CurlyComponentManager
 
     if (isInteractive) {
       beginUntrackFrame();
-      component.trigger('willInsertElement');
+      sendCoreViewEvent(component, 'willInsertElement');
       endUntrackFrame();
     }
   }
@@ -420,8 +425,8 @@ export default class CurlyComponentManager
   didCreate({ component, isInteractive }: ComponentStateBucket): void {
     if (isInteractive) {
       component._transitionTo('inDOM');
-      component.trigger('didInsertElement');
-      component.trigger('didRender');
+      sendCoreViewEvent(component, 'didInsertElement');
+      sendCoreViewEvent(component, 'didRender');
     }
   }
 
@@ -443,13 +448,13 @@ export default class CurlyComponentManager
       component.setProperties(props);
       component[IS_DISPATCHING_ATTRS] = false;
 
-      component.trigger('didUpdateAttrs');
-      component.trigger('didReceiveAttrs');
+      sendCoreViewEvent(component, 'didUpdateAttrs');
+      sendCoreViewEvent(component, 'didReceiveAttrs');
     }
 
     if (isInteractive) {
-      component.trigger('willUpdate');
-      component.trigger('willRender');
+      sendCoreViewEvent(component, 'willUpdate');
+      sendCoreViewEvent(component, 'willRender');
     }
 
     endUntrackFrame();
@@ -464,8 +469,8 @@ export default class CurlyComponentManager
 
   didUpdate({ component, isInteractive }: ComponentStateBucket): void {
     if (isInteractive) {
-      component.trigger('didUpdate');
-      component.trigger('didRender');
+      sendCoreViewEvent(component, 'didUpdate');
+      sendCoreViewEvent(component, 'didRender');
     }
   }
 

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

@@ -20,6 +20,7 @@ import CurlyComponentManager, {
   initialRenderInstrumentDetails,
   processComponentInitializationAssertions,
 } from './curly';
+import { sendCoreViewEvent } from '@ember/-internals/views';
 
 class RootComponentManager extends CurlyComponentManager {
   component: Component;
@@ -47,13 +48,13 @@ class RootComponentManager extends CurlyComponentManager {
     // We usually do this in the `didCreateElement`, but that hook doesn't fire for tagless components
     if (!hasWrappedElement) {
       if (isInteractive) {
-        component.trigger('willRender');
+        sendCoreViewEvent(component, 'willRender');
       }
 
       component._transitionTo('hasElement');
 
       if (isInteractive) {
-        component.trigger('willInsertElement');
+        sendCoreViewEvent(component, 'willInsertElement');
       }
     }
 

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

@@ -3,7 +3,7 @@ import { ENV } from '@ember/-internals/environment';
 import type { InternalOwner } from '@ember/-internals/owner';
 import { getOwner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
-import { getViewElement, getViewId } from '@ember/-internals/views';
+import { getViewElement, getViewId, sendCoreViewEvent } from '@ember/-internals/views';
 import { assert } from '@ember/debug';
 import { _backburner, _getCurrentRunLoop } from '@ember/runloop';
 import {
@@ -917,7 +917,7 @@ export class Renderer extends BaseRenderer {
     this.cleanupRootFor(view);
 
     if (this.state.isInteractive) {
-      view.trigger('didDestroyElement');
+      sendCoreViewEvent(view, 'didDestroyElement');
     }
   }
 

packages/@ember/-internals/glimmer/lib/utils/curly-component-state-bucket.ts

@@ -1,4 +1,9 @@
-import { clearElementView, clearViewElement, getViewElement } from '@ember/-internals/views';
+import {
+  clearElementView,
+  clearViewElement,
+  getViewElement,
+  sendCoreViewEvent,
+} from '@ember/-internals/views';
 import { registerDestructor } from '@glimmer/destroyable';
 import type { CapturedNamedArguments } from '@glimmer/interfaces';
 import type { Reference } from '@glimmer/reference';
@@ -46,8 +51,8 @@ export default class ComponentStateBucket {
 
     if (isInteractive) {
       beginUntrackFrame();
-      component.trigger('willDestroyElement');
-      component.trigger('willClearRender');
+      sendCoreViewEvent(component, 'willDestroyElement');
+      sendCoreViewEvent(component, 'willClearRender');
       endUntrackFrame();
 
       let element = getViewElement(component);

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

@@ -1,4 +1,12 @@
-import { moduleFor, RenderingTestCase, strip, runTask } from 'internal-test-helpers';
+import {
+  moduleFor,
+  RenderingTestCase,
+  strip,
+  runTask,
+  expectDeprecation,
+  testUnless,
+} from 'internal-test-helpers';
+import { DEPRECATIONS } from '../../../../deprecations';
 
 import { set } from '@ember/object';
 
@@ -38,7 +46,9 @@ class AbstractAppendTest extends RenderingTestCase {
     this.ids.push(component.elementId);
   }
 
-  [`@test (new) lifecycle hooks during component append`](assert) {
+  [`${testUnless(DEPRECATIONS.DEPRECATE_EVENTED.isRemoved)} @test (new) lifecycle hooks during component append`](
+    assert
+  ) {
     let hooks = [];
 
     let componentsByName = {};
@@ -56,7 +66,13 @@ class AbstractAppendTest extends RenderingTestCase {
           }
           componentsByName[name] = this;
           pushHook('init');
-          this.on('init', () => pushHook('on(init)'));
+          expectDeprecation(
+            () => {
+              this.on('init', () => pushHook('on(init)'));
+            },
+            /Evented#on` is deprecated/,
+            DEPRECATIONS.DEPRECATE_EVENTED.isEnabled
+          );
         }
 
         didReceiveAttrs() {
@@ -278,7 +294,9 @@ class AbstractAppendTest extends RenderingTestCase {
     );
   }
 
-  [`@test lifecycle hooks during component append`](assert) {
+  [`${testUnless(DEPRECATIONS.DEPRECATE_EVENTED.isRemoved)} @test lifecycle hooks during component append`](
+    assert
+  ) {
     let hooks = [];
 
     let oldRegisterComponent = this.registerComponent;
@@ -299,7 +317,13 @@ class AbstractAppendTest extends RenderingTestCase {
             }
             componentsByName[name] = this;
             pushHook('init');
-            this.on('init', () => pushHook('on(init)'));
+            expectDeprecation(
+              () => {
+                this.on('init', () => pushHook('on(init)'));
+              },
+              /Evented#on` is deprecated/,
+              DEPRECATIONS.DEPRECATE_EVENTED.isEnabled
+            );
           }
 
           didReceiveAttrs() {

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

@@ -7,7 +7,10 @@ import {
   equalsElement,
   runTask,
   runLoopSettled,
+  expectDeprecation,
+  testUnless,
 } from 'internal-test-helpers';
+import { DEPRECATIONS } from '../../../../deprecations';
 
 import { action } from '@ember/object';
 import { run } from '@ember/runloop';
@@ -3159,48 +3162,60 @@ moduleFor(
       runTask(() => set(this.context, 'foo', 5));
     }
 
-    ['@test triggering an event only attempts to invoke an identically named method, if it actually is a function (GH#15228)'](
+    [`${testUnless(DEPRECATIONS.DEPRECATE_EVENTED.isRemoved)} @test triggering an event only attempts to invoke an identically named method, if it actually is a function (GH#15228)`](
       assert
     ) {
-      assert.expect(3);
+      assert.expect(5);
 
       let payload = ['arbitrary', 'event', 'data'];
 
-      this.registerComponent('evented-component', {
-        ComponentClass: Component.extend({
-          someTruthyProperty: true,
-
-          init() {
-            this._super(...arguments);
-            this.trigger('someMethod', ...payload);
-            this.trigger('someTruthyProperty', ...payload);
-          },
-
-          someMethod(...data) {
-            assert.deepEqual(
-              data,
-              payload,
-              'the method `someMethod` should be called, when `someMethod` is triggered'
-            );
-          },
-
-          listenerForSomeMethod: on('someMethod', function (...data) {
-            assert.deepEqual(
-              data,
-              payload,
-              'the listener `listenerForSomeMethod` should be called, when `someMethod` is triggered'
-            );
-          }),
-
-          listenerForSomeTruthyProperty: on('someTruthyProperty', function (...data) {
-            assert.deepEqual(
-              data,
-              payload,
-              'the listener `listenerForSomeTruthyProperty` should be called, when `someTruthyProperty` is triggered'
-            );
-          }),
-        }),
-      });
+      expectDeprecation(
+        () => {
+          this.registerComponent('evented-component', {
+            ComponentClass: Component.extend({
+              someTruthyProperty: true,
+
+              init() {
+                this._super(...arguments);
+                expectDeprecation(
+                  () => {
+                    this.trigger('someMethod', ...payload);
+                    this.trigger('someTruthyProperty', ...payload);
+                  },
+                  /Evented#trigger` is deprecated/,
+                  DEPRECATIONS.DEPRECATE_EVENTED.isEnabled
+                );
+              },
+
+              someMethod(...data) {
+                assert.deepEqual(
+                  data,
+                  payload,
+                  'the method `someMethod` should be called, when `someMethod` is triggered'
+                );
+              },
+
+              listenerForSomeMethod: on('someMethod', function (...data) {
+                assert.deepEqual(
+                  data,
+                  payload,
+                  'the listener `listenerForSomeMethod` should be called, when `someMethod` is triggered'
+                );
+              }),
+
+              listenerForSomeTruthyProperty: on('someTruthyProperty', function (...data) {
+                assert.deepEqual(
+                  data,
+                  payload,
+                  'the listener `listenerForSomeTruthyProperty` should be called, when `someTruthyProperty` is triggered'
+                );
+              }),
+            }),
+          });
+        },
+        /`on\(\)` event decorator is deprecated/,
+        DEPRECATIONS.DEPRECATE_EVENTED.isEnabled
+      );
 
       this.render(`{{evented-component}}`);
     }

packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js

@@ -6,6 +6,7 @@ import { A as emberA } from '@ember/array';
 import { getViewElement, getViewId } from '@ember/-internals/views';
 
 import { Component } from '../../utils/helpers';
+import { addListener } from '@ember/-internals/metal';
 
 class LifeCycleHooksTest extends RenderingTestCase {
   constructor() {
@@ -174,7 +175,7 @@ class LifeCycleHooksTest extends RenderingTestCase {
         assertNoElement('init', this);
         assertState('init', 'preRender', this);
 
-        this.on('init', () => pushHook('on(init)'));
+        addListener(this, 'init', () => pushHook('on(init)'));
 
         schedule('afterRender', () => {
           this.isInitialRender = false;