Ember/5/Jquery Apis

1.0.1Last update Jul 24, 2024

Codemod verified

Regularly tested and maintained by our engineers and codemod expert community.

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