README.md

ember-tracked-properties-codemod

Usage

npx ember-tracked-properties-codemod path/of/files/ or/some**/*glob.js

Input / Output

• basic-with-prefix-false
• basic
• chained-complex-computed
• chained-computed
• complex
• non-computed-decorators
• read-only-computed-decorators
• with-tracked

basic

Input (basic.input.js):

import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  bar;
  baz = 'barBaz';

  @computed('baz')
  get bazInfo() {
    return `Name: ${get(this, 'baz')}`;
  }
}

Output (basic.output.js):

import { tracked } from '@glimmer/tracking';
import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  bar;
  @tracked baz = 'barBaz';

  get bazInfo() {
    return `Name: ${get(this, 'baz')}`;
  }
}

---

basic-with-prefix-false ({alwaysPrefix: false})

Input (basic-with-prefix-false.input.js):

import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  bar;
  baz = 'barBaz';

  @computed('baz')
  get bazInfo() {
    return `Name: ${get(this, 'baz')}`;
  }
}

Output (basic-with-prefix-false.output.js):

import { tracked } from '@glimmer/tracking';
import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  bar;
  @tracked
  baz = 'barBaz';

  get bazInfo() {
    return `Name: ${get(this, 'baz')}`;
  }
}

---

complex

Input (complex.input.js):

import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  firstName = 'Foo';
  lastName;
  phone;
  zipcode;

  @computed('firstName', 'lastName')
  get fullName() {
    return `Name: ${get(this, 'firstName')} ${get(this, 'lastName')}`;
  }

  @computed('areaCode', 'phone')
  get phoneNumber() {
    return `(${get(this, 'areaCode')}) ${get(this, 'phone')}`;
  }
}

Output (complex.output.js):

import { tracked } from '@glimmer/tracking';
import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  @tracked firstName = 'Foo';
  @tracked lastName;
  @tracked phone;
  zipcode;

  get fullName() {
    return `Name: ${get(this, 'firstName')} ${get(this, 'lastName')}`;
  }

  @computed('areaCode', 'phone')
  get phoneNumber() {
    return `(${get(this, 'areaCode')}) ${get(this, 'phone')}`;
  }
}

---

chained-computed

Input (chained-computed.input.js):

import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  foo = 'bar';
  baz;

  @computed('foo')
  get fooBar() {
    return `Foo: ${get(this, 'foo')}`;
  }

  @computed('fooBar')
  get fooBarDetail() {
    return `Foo bar detail: ${get(this, 'fooBar')}`;
  }

  @computed('fooBarDetail', 'bang')
  get fooBarDetailWithBaz() {
    return `(${get(this, 'fooBarDetail')}) ${get(this, 'baz')}`;
  }
}

Output (chained-computed.output.js):

import { tracked } from '@glimmer/tracking';
import Component from '@ember/component';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  @tracked foo = 'bar';
  baz;

  @computed('foo')
  get fooBar() {
    return `Foo: ${get(this, 'foo')}`;
  }

  @computed('fooBar')
  get fooBarDetail() {
    return `Foo bar detail: ${get(this, 'fooBar')}`;
  }

  @computed('fooBarDetail', 'bang')
  get fooBarDetailWithBaz() {
    return `(${get(this, 'fooBarDetail')}) ${get(this, 'baz')}`;
  }
}

---

chained-complex

Input (chained-complex-computed.input.js):

import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';
import { action, computed } from '@ember/object';
import { inject as service } from '@ember/service';

export default class AddTeamComponent extends Component {
  @service team;
  @tracked teamName;
  noOfHackers;

  @computed('fooBar', 'noOfHackers')
  get isMaxExceeded() {
    return this.noOfHackers > 10;
  }

  @computed('isMaxExceeded')
  get foo() {
    return this.isMaxExceeded;
  }

  @action
  addTeam() {
    this.team.addTeamName(this.teamName);
  }
}

Output (chained-complex-computed.output.js):

import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';
import { action, computed } from '@ember/object';
import { inject as service } from '@ember/service';

export default class AddTeamComponent extends Component {
  @service team;
  @tracked teamName;
  @tracked noOfHackers;

  @computed('fooBar', 'noOfHackers')
  get isMaxExceeded() {
    return this.noOfHackers > 10;
  }

  @computed('isMaxExceeded')
  get foo() {
    return this.isMaxExceeded;
  }

  @action
  addTeam() {
    this.team.addTeamName(this.teamName);
  }
}

---

non-computed-decorators

Input (non-computed-decorators.input.js):

import Component from '@ember/component';
import { computed, get } from '@ember/object';
import { alias } from '@ember/object/computed';

export default class Foo extends Component {
  bar;
  // baz class property
  baz = 'barBaz';

  @alias('model.isFoo')
  isFoo;

  @computed('baz', 'isFoo')
  get bazInfo() {
    return get(this, 'isFoo') ? `Name: ${get(this, 'baz')}` : 'Baz';
  }

  @(computed('bar', 'isFoo').readOnly())
  get barInfo() {
    return get(this, 'isFoo') ? `Name: ${get(this, 'bar')}` : 'Bar';
  }
}

Output (non-computed-decorators.output.js):

import { tracked } from '@glimmer/tracking';
import Component from '@ember/component';
import { computed, get } from '@ember/object';
import { alias } from '@ember/object/computed';

export default class Foo extends Component {
  @tracked bar;
  // baz class property
  @tracked baz = 'barBaz';

  @alias('model.isFoo')
  isFoo;

  @computed('baz', 'isFoo')
  get bazInfo() {
    return get(this, 'isFoo') ? `Name: ${get(this, 'baz')}` : 'Baz';
  }

  @computed('bar', 'isFoo').readOnly()
  get barInfo() {
    return get(this, 'isFoo') ? `Name: ${get(this, 'bar')}` : 'Bar';
  }
}

---

read-only-computed-decorators

Input (read-only-computed-decorators.input.js):

import Component from '@ember/component';
import { computed, get } from '@ember/object';
import { alias } from '@ember/object/computed';

export default class Foo extends Component {
  bar;
  // baz class property
  baz = 'barBaz';

  @alias('model.isFoo')
  isFoo;

  @computed('baz', 'bar')
  get barBazInfo() {
    return `Bar: ${get(this, 'bar')}, Baz: ${get(this, 'baz')}`;
  }

  @(computed('bar', 'isFoo').readOnly())
  get barInfo() {
    return get(this, 'isFoo') ? `Name: ${get(this, 'bar')}` : 'Bar';
  }

  // This should not remove the 'blah' decorator since its not a computed property.
  @blah('bar')
  get barData() {
    return get(this, 'bar');
  }
}

Output (read-only-computed-decorators.output.js):

import { tracked } from '@glimmer/tracking';
import Component from '@ember/component';
import { computed, get } from '@ember/object';
import { alias } from '@ember/object/computed';

export default class Foo extends Component {
  @tracked bar;
  // baz class property
  @tracked baz = 'barBaz';

  @alias('model.isFoo')
  isFoo;

  get barBazInfo() {
    return `Bar: ${get(this, 'bar')}, Baz: ${get(this, 'baz')}`;
  }

  @(computed('bar', 'isFoo').readOnly())
  get barInfo() {
    return get(this, 'isFoo') ? `Name: ${get(this, 'bar')}` : 'Bar';
  }

  // This should not remove the 'blah' decorator since its not a computed property.
  @blah('bar')
  get barData() {
    return get(this, 'bar');
  }
}

---

with-tracked

Input (with-tracked.input.js):

import Component from '@ember/component';
import { tracked } from '@glimmer/tracking';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  @tracked bar;
  baz = 'barBaz';

  @computed('baz')
  get bazInfo() {
    return `Name: ${get(this, 'baz')}`;
  }
}

Output (with-tracked.output.js):

import Component from '@ember/component';
import { tracked } from '@glimmer/tracking';
import { computed, get } from '@ember/object';

export default class Foo extends Component {
  @tracked bar;
  @tracked baz = 'barBaz';

  get bazInfo() {
    return `Name: ${get(this, 'baz')}`;
  }
}

---