Ember/5/Jquery Apis

1.0.2Last update Jan 10, 2025

Codemod verified

Official codemod published by a verified account. Learn more.

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:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.$().on("transitionend", () => this.doSomething());
  },
});

After:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.element.addEventListener("transitionend", () => this.doSomething());
  },
});

Query Selector

Before:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.$(".animated").on("transitionend", () => this.doSomething());
  },
});

After:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.element
      .querySelectorAll(".animated")
      .forEach((el) =>
        el.addEventListener("transitionend", () => this.doSomething()),
      );
  },
});

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:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.$().on("transitionend", () => this.doSomething());
  },
});

After:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.element.addEventListener("transitionend", () => this.doSomething());
  },
});

Query Selector

Before:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.$(".animated").on("transitionend", () => this.doSomething());
  },
});

After:

import Component from "@ember/component";

export default Component.extend({
  waitForAnimation() {
    this.element
      .querySelectorAll(".animated")
      .forEach((el) =>
        el.addEventListener("transitionend", () => this.doSomething()),
      );
  },
});

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now