Skip to content

Latest commit

 

History

History
120 lines (88 loc) · 5 KB

README.md

File metadata and controls

120 lines (88 loc) · 5 KB

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

Contributing

Installation

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

Running tests

  • yarn test

Update Documentation

  • yarn update-docs