README.md

component-property-ordering

Transform component property ordering to follow eslint rules for order-in-components.

Example:

const { Component, computed, inject: { service } } = Ember;
const { alias } = computed;

export default Component.extend({
  // 1. Services
  i18n: service(),

  // 2. Properties
  role: 'sloth',

  // 3. Empty methods
  onRoleChange() {},

  // 4. Single line Computed Property
  vehicle: alias('car'),

  // 5. Multiline Computed Property
  levelOfHappiness: computed('attitude', 'health', function() {
    const result = this.get('attitude') * this.get('health') * Math.random();
    return result;
  }),

  // 6. Observers
  onVehicleChange: observer('vehicle', function() {
    // observer logic
  }),

  // 7. Lifecycle Hooks
  init() {
    // custom init logic
  },

  didInsertElement() {
    // custom didInsertElement logic
  },

  willDestroyElement() {
    // custom willDestroyElement logic
  },

  // 8. All actions
  actions: {
    sneakyAction() {
      return this._secretMethod();
    }
  },

  // 9. Custom / private methods
  _secretMethod() {
    // custom secret method logic
  }
});

Usage

npx lil-codemods run component-property-ordering path/of/files/ or/some**/*glob.js

# or

yarn global add lil-codemods
lil-codemods run component-property-ordering path/of/files/ or/some**/*glob.js

Input / Output

• basic

---

basic

Input (basic.input.js):

import Component from "@ember/component";
import { computed } from "@ember/object";
import { equal } from "@ember/object/computed";

export default Component.extend({
  willDestroy() {},

  _privateSingle: equal("bool").readOnly(),
  publicSingle: equal("bool").readOnly(),

  /**
   * Return
   * @param {string} param1
   */
  _private(param1) {
    return param1;
  },

  actions: {
    action1() {},
    action2() {}
  },

  init() {
    this._super(...arguments);
  },

  _privateMulti: computed("single", function multi() {}).readOnly(),
  publicMulti: computed("single", function multi() {}).readOnly(),


  service: service()
});

Output (basic.output.js):

import Component from "@ember/component";
import { computed } from "@ember/object";
import { equal } from "@ember/object/computed";

export default Component.extend({
  service: service(),
  publicSingle: equal("bool").readOnly(),
  _privateSingle: equal("bool").readOnly(),
  publicMulti: computed("single", function multi() {}).readOnly(),
  _privateMulti: computed("single", function multi() {}).readOnly(),

  init() {
    this._super(...arguments);
  },

  willDestroy() {},

  actions: {
    action1() {},
    action2() {}
  },

  /**
   * Return
   * @param {string} param1
   */
  _private(param1) {
    return param1;
  }
});