Question: Using babel plugins as codemods, disable other rules?

[donferi]

Hello, I have some questions that I would love some guidance, I'm not sure what I'm doing wrong.

I'm trying to use a babel plugin, so semi-following the readme I did the following:

Create a .putout.json with the following:

{
    "plugins": [
        "babel/transform-inline-consecutive-adds"
    ]
}

a.js

const t = [];
t.push(1);
t.push(2);

Then run the following:

npm install babel-plugin-transform-inline-consecutive-adds
npx putout a.js -f codeframe

I get a different output:

a.js:3:0
  1 | const t = [];
  2 | t.push(1);
> 3 | t.push(2);
    | ^ transform inline consecutive adds (babel/transform-inline-consecutive-adds)
  4 |

a.js:1:6
> 1 | const t = [];
    |      ^ 't' is defined but never used (remove-unused-variables)
  2 | t.push(1);
  3 | t.push(2);
  4 |

a.js:1:0
> 1 | const t = [];
    | ^ 'use strict' directive should be on top of CommonJS (strict-mode/add-missing)
  2 | t.push(1);
  3 | t.push(2);
  4 |

✖ 3 errors in 1 files
  fixable with the `--fix` option

If I run npx putout --fix a.js I now end up with a.js like this:

'use strict';

What am I doing wrong? It's a bit weird that only the use strict rule "won" the whole file, but I'm sure it's only because I don't fully understand how putout works yet.

I then "fixed" it by using --disable-all and then enabling only the rule that I wanted (the babel one in this case). But that seems a bit odd, is there a way where I can only run the rules I'm defining?

I'm planning on using this to run codemods on large repos, mostly using babel plugins and I can't know ahead of time which rules will apply to all the repos. Would love some guidance!

[coderaiser]

Look, this code:

const t = [];
t.push(1);
t.push(2);

has variable that used nowhere so it’s dropped.

If you want to disable all the rules (what is not recommended) you can always use —-disable-all on the path you want to lint.

What kind of Babel plugins do you want to run? 🐊Putout has much more plugins that makes code a better place. So yes, there is a big difference with ESLint, which starts with no rules, 🐊Putout starts with recommended rules, this is by design.

[donferi]

Gotcha, makes sense. My use case is a bit of a corner case but let me try to explain.

We have a lot of old angularjs applications that we build with our custom babel + webpack configs. I want to move them to something like vite so that we don't have to keep maintaining our babel + webpack setup.

Unfortunately Angularjs dependency injection is pretty delicate specially when minifying the code, so we use a babel plugin https://github.com/schmod/babel-plugin-angularjs-annotate that adds annotations for angular.

Since I would like to use vite with swc, which doesn't support babel plugins. So my idea was to write a codemod to add the annotations to the apps themselves and not rely on the babel plugin anymore.

I'm new to codemods and jscodeshift looks pretty painful, that's how I ended up here 😄, then I read you supported babel plugins and got even more excited.

I just did a quick try disabling all rules and adding the babel/angularjs-annotate plugin and kind of works. It adds the annotation but for some reason it seems like it runs multiple times or something 🤔 I see the annotations being added multiple times vs if I do it with babel cli I get only one. It's better than nothing tho!

[coderaiser]

Could you please show me the code before and after transform?

[coderaiser]

Just checked example:

angular.module("MyMod").controller("MyCtrl", ($scope, $timeout) => {});

Becomes:

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", ($scope, $timeout) => {}]);

When used putout --fix example.js with .putout.json:

{
    "rules": {
        "remove-unused-variables": "off"
    },
    "plugins": [
        "babel/angularjs-annotate"
    ]
}

[donferi]

Thanks for taking a look! I tried with angularjs-annotate example too and worked fine, then I tried using 'ngInject' like so:

export default function run($document, $http, $injector) {
  'ngInject';
}

Putout fixes it to:

run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
run.$inject = ['$document', '$http', '$injector'];
export default function run($document, $http, $injector) {
  'ngInject';
}

Same code with babel:

run.$inject = ["$document", "$http", "$injector"];
export default function run($document, $http, $injector) {
  'ngInject';
}

[coderaiser]

Look, this is because by default 🐊Putout uses 10 fix count, to fix everything it can find, and there is no checks in angularjs-annotate that annotation is already added, so one of the solutions is using:

putout example.js --fix --fix-count 1

🐊Putout plugins are usually split by find and fix, and they fixing only what was found.

You can try this example, if you process this code with angularjs-annotate:

run.$inject = ["$document", "$http", "$injector"];
export default function run($document, $http, $injector) {
  'ngInject';
}

It will produce:

run.$inject = ["$document", "$http", "$injector"];
run.$inject = ["$document", "$http", "$injector"];
export default function run($document, $http, $injector) {
  'ngInject';
}

This is because there is no checks on existing run.$inject in angularjs-annotate.

[donferi]

@coderaiser I hadn't thought about that, that makes perfect sense now. I appreciate your help and patience, much respect.

[coderaiser]

Just made fork you can use, it fixes your case: https://github.com/coderaiser/babel-plugin-angularjs-annotate.

And created PR: schmod/babel-plugin-angularjs-annotate#61.

[donferi]

Wow I've never received such kind help, you are incredible.

[coderaiser]

You can support project, if you want, I always here to help :).