Ember.js V5 - Fpe On

This automation updates event handling in Ember.js by transitioning from the .on method to using the on function for event listeners.

Ember.js
jscodeshift
Estimated time saving
5 minutes/occurrence
Change mode
Autonomous
Applicability criteria

Ember.js version higher or equal to 3.11.

Made by
Rajasegar Chandran
Rajasegar Chandran

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod ember/5/fpe-on
copy CLI command icon

Codemod VS Code extension:

intalling vs code extension tooltip icon
vs code logo
Run in VS Code

Use/edit codemod in Codemod Studio:

intuita logo without text
Open in Codemod Studio

Example

This codemod updates event handling in Ember.js by transitioning from the .on method to using the on function for event listeners.

Before:

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:

import { on } from '@ember/object/evented';
import EmberObject from '@ember/object';
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!'