A few weeks ago I came across this tweet from @phenomnominal where he was introducing a tool called BETTERER. I immediately thought about using this to track my team's progress in converting our NgRx code to use the greatly improved Action creators.

Creating the rule

I finally got round to trying it out and with the help of the TSQuery Playground - lovingly crafted by Uri Shaked, I was able to write the following TSQuery check.

const { tsqueryBetterer } = require('@betterer/tsquery');

module.exports = {
    'NgRx: Action Creators:': tsqueryBetterer(
        './tsconfig.json',
        'HeritageClause > ExpressionWithTypeArguments > Identifier[name=Action]'
    ),
};

Running betterer gave the following output (greatly shortened...)

  137 | export class SelectSimulation implements Action {
      |
  139 |     readonly type = SELECT_SIMULATION;
  140 | 
  141 |     constructor(public payload: SimulationId) {}
☀️  betterer  info 💬   - 1 thing got checked.
☀️  betterer  warn ⚠️   - 1 thing stayed the same. 😐
Done in 9.48s.

The number of matches gets recorded in a better.results snapshot file. If you then update the Action declaration to use the createAction syntax you will reduce the number of matches. Running betterer again will then give the following output.

☀️  betterer  info 💬   - 1 thing got checked.
☀️  betterer  good ❤️   - 1 thing got better! 😍
Done in 9.61s.

Preventing Old Style Code

Now comes the really useful part. Once agreed with the rest of the team, we can add Betterer to our lint stage. If someone then adds an action using the old syntax the number of matches will go up and we can fail the task accordingly.

  betterer  info 💬   - 1 thing got checked.
☀️  betterer  baad 💀   - 1 thing got worse. 😔
☀️  betterer  baad 💀   - "NgRx: Action Creators:" got worse
error Command failed with exit code 1.

It's then clear to see which of your checks failed making it easy to go and update your code as required. If you really need to get something out you can always just reset the snapshot results file.

Tracking Progress

The cherry on the cake. I can now search our Github repos for "NgRx: Action Creators" and get an accurate and up to date snapshot on our progress. No longer is it a vague guess as to what is left because we have concrete figures!

Thank you so much to @phenomnominal for sharing this tool with us!