Assess, plan, evolve.

## Before ```jsx import EmberObject from "@ember/object"; import { sendEvent } from "@ember/object/events"; let Job = EmberObject.extend({ logCompleted: function () { console.log("Job completed!"); }.on("completed"), }); let job = Job.create(); sendEvent(job, "completed"); // Logs 'Job completed!' ``` ## After ```tsx import EmberObject from "@ember/object"; import { on } from "@ember/object/evented"; import { sendEvent } from "@ember/object/events"; let Job = EmberObject.extend({ logCompleted: on("completed", function () { console.log("Job completed!"); }), }); let job = Job.create(); sendEvent(job, "completed"); // Logs 'Job completed!' ```

• migration

Using event object APIs that are specific to `jQuery.Event`, such as `originalEvent`, is deprecated in Ember.js v3.3. This codemod removes all calls to `originalEvent` in case of accessing properties that work with jQuery events as well as native events. ## Before ```jsx // your event handler: export default Component.extend({ click(event) { let x = event.originalEvent.clientX; }, }); ``` ## After ```tsx // your event handler: export default Component.extend({ click(event) { let x = event.clientX; }, }); ```

• migration

This codemod replaces all calls to `this.$()` inside of an `Ember.Component` with `this.element` property, which provides a reference to a native DOM element. ## Events ### Before: ```jsx import Component from "@ember/component"; export default Component.extend({ waitForAnimation() { this.$().on("transitionend", () => this.doSomething()); }, }); ``` ### After: ```tsx import Component from "@ember/component"; export default Component.extend({ waitForAnimation() { this.element.addEventListener("transitionend", () => this.doSomething()); }, }); ``` ## Query Selector ### Before: ```jsx import Component from "@ember/component"; export default Component.extend({ waitForAnimation() { this.$(".animated").on("transitionend", () => this.doSomething()); }, }); ``` ### After: ```tsx import Component from "@ember/component"; export default Component.extend({ waitForAnimation() { this.element .querySelectorAll(".animated") .forEach((el) => el.addEventListener("transitionend", () => this.doSomething()), ); }, }); ```

• migration

This codemod removes all calls to `volatile()` and ensures that native getters are directly used. ## Before ```jsx const Person = EmberObject.extend({ fullName: computed(function () { return `${this.firstName} ${this.lastName}`; }).volatile(), }); ``` ## After ```tsx const Person = EmberObject.extend({ get fullName() { return `${this.firstName} ${this.lastName}`; }, }); ```

• migration

`.property()` is a modifier that adds additional property dependencies to an existing computed property. This codemod moves the dependencies to the main computed property definition. ## Before ```jsx const Person = EmberObject.extend({ fullName: computed(function () { return `${this.firstName} ${this.lastName}`; }).property("firstName", "lastName"), }); ``` ## After ```tsx const Person = EmberObject.extend({ fullName: computed("firstName", "lastName", function () { return `${this.firstName} ${this.lastName}`; }), }); ```

• migration

## Before ```jsx import EmberObject from "@ember/object"; export default EmberObject.extend({ valueObserver: function () { // Executes whenever the "value" property changes }.observes("value"), }); ``` ## After ```tsx import EmberObject from "@ember/object"; export default EmberObject.extend({ valueObserver: observer("value", function () { // Executes whenever the "value" property changes }), }); ```

• migration

## Before ```jsx import EmberObject from "@ember/object"; let Person = EmberObject.extend({ init() { this._super(...arguments); this.firstName = "Betty"; this.lastName = "Jones"; }, fullName: function () { return `${this.firstName} ${this.lastName}`; }.property("firstName", "lastName"), }); let client = Person.create(); client.get("fullName"); // 'Betty Jones' client.set("lastName", "Fuller"); client.get("fullName"); // 'Betty Fuller' ``` ## After ```tsx import EmberObject, { computed } from "@ember/object"; let Person = EmberObject.extend({ init() { this._super(...arguments); this.firstName = "Betty"; this.lastName = "Jones"; }, fullName: computed("firstName", "lastName", function () { return `${this.firstName} ${this.lastName}`; }), }); let client = Person.create(); client.get("fullName"); // 'Betty Jones' client.set("lastName", "Fuller"); client.get("fullName"); // 'Betty Fuller' ```

• migration

This codemod removes any usage of `new` with `A`, and calls `A` as a standard function. ## Before ```jsx import { A } from "@ember/array"; let arr = new A(); ``` ## After ```tsx import { A as emberA } from "@ember/array"; let arr = A(); ```

• migration

Using event object APIs that are specific to `jQuery.Event`, such as `originalEvent`, is deprecated in Ember.js v3.3. This codemod ensures the access to the native event without triggering any deprecations via wrapping the `event` with the `normalizeEvent` function provided by `ember-jquery-legacy`. ## Before ```jsx export default Component.extend({ click(event) { let nativeEvent = event.originalEvent; }, }); ``` ## After ```tsx import { normalizeEvent } from "ember-jquery-legacy"; export default Component.extend({ click(event) { let nativeEvent = normalizeEvent(event); }, }); ```

• migration

This codemod replaces all calls to `Ember.merge` with `Ember.assign`. ## Before ```jsx import { merge } from "@ember/polyfills"; var a = { first: "Yehuda" }; var b = { last: "Katz" }; merge(a, b); ``` ## After ```tsx import { assign } from "@ember/polyfills"; var a = { first: "Yehuda" }; var b = { last: "Katz" }; assign(a, b); ```

• migration

`.property()` is a modifier that adds additional property dependencies to an existing computed property. For `filter`, `map`, and `sort` computed property macros, this codemod ensures they receive an array of additional dependent keys as a second parameter. ## Before ```jsx const Person = EmberObject.extend({ friendNames: map("friends", function (friend) { return friend[this.get("nameKey")]; }).property("nameKey"), }); ``` ## After ```tsx const Person = EmberObject.extend({ friendNames: map("friends", ["nameKey"], function (friend) { return friend[this.get("nameKey")]; }), }); ```

• migration

This codemod transforms `get()` to `getProperties()` to use traditional object dot notation. This standard was proposed by Ember.js team in https://github.com/emberjs/rfcs/blob/master/text/0281-es5-getters.md. ## Before ```jsx let chancancode = Person.create({ firstName: "Godfrey", lastName: "Chan" }); chancancode.get("fullName"); let model = Person.create({ firstName: "Godfrey", lastName: "Chan" }); model.get("fullName"); let route = Person.create({ firstName: "Godfrey", lastName: "Chan" }); route.get("fullName"); let controller = Person.create({ firstName: "Godfrey", lastName: "Chan" }); controller.get("fullName"); controller.get("foo.bar"); controller.get("foo-bar"); ``` ## After ```tsx let chancancode = Person.create({ firstName: "Godfrey", lastName: "Chan" }); chancancode.get("fullName"); let model = Person.create({ firstName: "Godfrey", lastName: "Chan" }); model.get("fullName"); let route = Person.create({ firstName: "Godfrey", lastName: "Chan" }); route.fullName; let controller = Person.create({ firstName: "Godfrey", lastName: "Chan" }); controller.fullName; controller.get("foo.bar"); controller["foo-bar"]; ```

• migration