ember-computed-macro-codemod

A codemod for converting Ember computed property macros (a.k.a. shorthands) to native getters in class syntax.

Updating your codebase

The recommended Ember ESLint config discourages computed property macros for class based syntax. Instead, it recommends to use auto tracking and native getters. This codemod converts a subset (see support matrix) of all computed property macros to native getters.

See also:

• This codemod only runs on JavaScript Class syntax. If you haven't already, use the ember-native-class codemod to transform object syntax to class syntax.
• The ember-tracked-properties codemod will further help you migrate from @computed to tracked properties.

Usage

npx @ota-insight/ember-computed-macro-codemod path/of/files/ or/some**/*glob.js

Warning As with most codemods, changes are made in place, meaning it will overwrite existing files. Make sure to run this codemod on a codebase that has been checked into version control to avoid losing progress.

The codemod accepts the following options:

| Option | Value | Default | Details | | --------------------- | ------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | --macros | string | alias,and,equal,gt,gte,lt,lte,or,readOnly | Filter which computed macros should be transformed. By default, all supported ones are transformed. | | --add-computed-decorator | boolean | false | Add the @computed decorator to the native getter for full compatibility. Skipping this has sublte side effects which could cause issues.1 |

1. Computed property macros are computed properties, thus only recompute once the dependency keys are updated. If you want to keep this behaviour, the @cached decorator should be added. This should however be used with caution, and is usually something you don't want. (see docs) Alternatively, you can opt to readd the @computed decorator to keep compatible behaviour in case where not all dependencies are auto tracked yet.

Basic example

Given the following input file:

import { readOnly } from '@ember/object/computed';

class Foo {
  @readOnly('foo.bar') bar;
}

The codemod will rewrite this to use native getters:

class Foo {
  get bar() {
    return this.foo?.bar;
  }
}

For a complete list of example transforms, see the computed-macro transform description.

Support matrix

| Computed property macro | Supported | |------------------|-----------| | alias | ✅ | | and | ✅ | | bool | ❌ | | collect | ❌ | | deprecatingAlias | ❌ | | empty | ❌ | | equal | ✅ | | expandProperties | ❌ | | filter | ❌ | | filterBy | ❌ | | gt | ✅ | | gte | ✅ | | intersect | ❌ | | lt | ✅ | | lte | ✅ | | map | ❌ | | mapBy | ❌ | | match | ❌ | | max | ❌ | | min | ❌ | | not | ❌ | | notEmpty | ❌ | | oneWay | ❌ | | or | ✅ | | readOnly | ✅ | | reads | ❌ | | setDiff | ❌ | | sort | ❌ | | sum | ❌ | | union | ❌ | | uniq | ❌ | | uniqBy | ❌ |

Known limitations

• Computed property macros with complex dependent keys are not supported (@each, .{}, .[]).
• Doesn't handle invalid usages of marcos, e.g. using and, or with only one argument.
• Expects you import computed macros from @ember/object/computed, instead of e.g. using @computed.readOnly().

Transforms

• computed-macro

Contributing

Installation

• clone the repo
• change into the repo directory
• yarn

Running tests

• yarn test

Update Documentation

• yarn update-docs