Ember.js V5 - Fpe Computed

The "Fpe Computed" codemod for Ember.js V5 refactors computed property definitions from the older .property method to the modern computed function syntax.

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-computed
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

Description

Example

Before:

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:

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