Deprecate Evented and related

Author: wagenet

package.json

@@ -213,6 +213,7 @@
       "@ember/-internals/runtime/lib/mixins/action_handler.js": "ember-source/@ember/-internals/runtime/lib/mixins/action_handler.js",
       "@ember/-internals/runtime/lib/mixins/comparable.js": "ember-source/@ember/-internals/runtime/lib/mixins/comparable.js",
       "@ember/-internals/runtime/lib/mixins/container_proxy.js": "ember-source/@ember/-internals/runtime/lib/mixins/container_proxy.js",
+      "@ember/-internals/runtime/lib/mixins/evented.js": "ember-source/@ember/-internals/runtime/lib/mixins/evented.js",
       "@ember/-internals/runtime/lib/mixins/registry_proxy.js": "ember-source/@ember/-internals/runtime/lib/mixins/registry_proxy.js",
       "@ember/-internals/runtime/lib/mixins/target_action_support.js": "ember-source/@ember/-internals/runtime/lib/mixins/target_action_support.js",
       "@ember/-internals/string/index.js": "ember-source/@ember/-internals/string/index.js",
@@ -226,6 +227,7 @@
       "@ember/-internals/views/lib/system/action_manager.js": "ember-source/@ember/-internals/views/lib/system/action_manager.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/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 {
@@ -893,7 +893,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/meta/lib/meta.ts

@@ -355,7 +355,7 @@ export class Meta {
   addToListeners(
     eventName: string,
     target: object | null,
-    method: Function | PropertyKey,
+    method: ((...args: any[]) => void) | PropertyKey,
     once: boolean,
     sync: boolean
   ) {

packages/@ember/-internals/metal/lib/events.ts

@@ -5,7 +5,7 @@ import type { Meta } from '@ember/-internals/meta';
 import { meta as metaFor, peekMeta } from '@ember/-internals/meta';
 import { setListeners } from '@ember/-internals/utils';
 import type { AnyFn } from '@ember/-internals/utility-types';
-import { assert } from '@ember/debug';
+import { assert, deprecate } from '@ember/debug';
 
 /*
   The event system uses a series of nested hashes to store listeners on an
@@ -38,11 +38,24 @@ import { assert } from '@ember/debug';
   @param {Boolean} once A flag whether a function should only be called once
   @public
 */
+export function addListener<Target>(
+  obj: object,
+  eventName: string,
+  target: Target,
+  method: PropertyKey | ((this: Target, ...args: any[]) => void),
+  once?: boolean,
+  sync?: boolean
+): void;
+export function addListener(
+  obj: object,
+  eventName: string,
+  method: PropertyKey | ((...args: any[]) => void)
+): void;
 export function addListener(
   obj: object,
   eventName: string,
-  target: object | Function | null,
-  method?: Function | PropertyKey,
+  target: object | PropertyKey | ((...args: any[]) => void) | null,
+  method?: PropertyKey | ((...args: any[]) => void),
   once?: boolean,
   sync = true
 ): void {
@@ -52,10 +65,13 @@ export function addListener(
   );
 
   if (!method && 'function' === typeof target) {
-    method = target;
+    // SAFETY: This should be correct. It may be possible to get TS to infer it.
+    method = target as (...args: any[]) => void;
     target = null;
   }
 
+  assert('target should be object or null', target === null || typeof target === 'object');
+
   metaFor(obj).addToListeners(eventName, target, method!, once === true, sync);
 }
 
@@ -76,8 +92,19 @@ export function addListener(
 export function removeListener(
   obj: object,
   eventName: string,
-  targetOrFunction: object | Function | null,
-  functionOrName?: string | Function
+  target: object | null,
+  methodOrName: string | ((...args: any[]) => void)
+): void;
+export function removeListener(
+  obj: object,
+  eventName: string,
+  method: (...args: any[]) => void
+): void;
+export function removeListener(
+  obj: object,
+  eventName: string,
+  targetOrFunction: object | ((...args: any[]) => void) | null,
+  functionOrName?: string | ((...args: any[]) => void)
 ): void {
   assert(
     'You must pass at least an object, event name, and method or target and method/method name to removeListener',
@@ -199,13 +226,25 @@ export function hasListeners(obj: object, eventName: string): boolean {
 
   @method on
   @static
+  @deprecated Use native JavaScript events or a dedicated event library instead.
   @for @ember/object/evented
   @param {String} eventNames*
   @param {Function} func
   @return {Function} the listener function, passed as last argument to on(...)
   @public
 */
 export function on<T extends AnyFn>(...args: [...eventNames: string[], func: T]): T {
+  deprecate(
+    '`on` is deprecated. Use native JavaScript events or a dedicated event library instead.',
+    false,
+    {
+      for: 'ember-source',
+      id: 'ember-evented',
+      since: { available: '6.8.0' },
+      until: '7.0.0',
+    }
+  );
+
   let func = args.pop();
   let events = args as string[];
 

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

@@ -5,5 +5,6 @@ export { default as ActionHandler } from './lib/mixins/action_handler';
 export { default as _ProxyMixin, contentFor as _contentFor } from './lib/mixins/-proxy';
 export { default as MutableEnumerable } from '@ember/enumerable/mutable';
 export { default as TargetActionSupport } from './lib/mixins/target_action_support';
+export { default as Evented, on } from './lib/mixins/evented';
 
 export { default as RSVP, onerrorDefault } from './lib/ext/rsvp'; // just for side effect of extending Ember.RSVP