Power of (JavaScript) codemods

Andriy Mykulyak

"Power of (JavaScript) codemods"

2018-02-14

@amykulyak LinkedIn Gmail

Who am I ?

Senior software consultant

@ Shedul, Warsaw

Full stack developer. Like challenges, JavaScript and Python.
Privately is passionate about triathlon.

"Do. Or do not. There is no try" (c) Yoda

The only thing is permanent is change !

This is so true in the IT. We need to be prepared for it !

Refactoring

Refactorng is the process of restructuring existing source code without changing its external behaviour.

It is easy in the small scale

One class, several methods ...

This can be done manually.

But what if the change is large ?

Think of renaming 100+ classes according to some naming schema ...

Modifying imports after moving files ...

Changing signature of some library function ...

We need tools to support us !

At least partially !

Real life example - from

        
          <Form>
            <Label>Some label</Label>
            <Input hint="Hint text" />
            ...
          </Form>

Real life example - to

        
          <Form>
            <Label tid="123">Some label</Label>
            <Input hint={tr("124", "Hint text")} />
            ...
          </Form>

Real life example - context

900 files, 15000+ replacements

couple of liters of coffee, almost two days w/o much sleep !

And then I started to search ...

Found out that others also had this problem ... and found ... codemods !

What is codemod ?

Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention.

What this talk is about, anyway ?

This talk is about codemods. But not everything about them.

I will concentrate on:

how to use existing codemods and tools
find materials to start writing ours

Tools - AST Explorer

http://astexplorer.net/

Online sandbox for language inspection and transformation tools.

Tools - jscodeshift

https://github.com/facebook/jscodeshift

A tool to run codemods on multiple files.

Tools - recast

https://github.com/benjamn/recast

A library for AST to AST transformation and non-destructive printing

Tools - ast-types

https://github.com/benjamn/ast-types

JavaScript parser as well as builder

Tools - Existing codemods

How to use all this goodness ?

        
          > npm install -g jscodeshift
          > npm install js-codemod
          > jscodeshift -t CODEMOD_PATH PATH

What if I need more ?

No existing plugins suit your needs. Then write your own !

Anatomy of a codemod

        
          module.exports = function (fileInfo, api, options) {
            const { path, source } = fileInfo;
            const { jscodeshift: j, stats } = api;
            return j(source)
              .forEach((path) => {
                ... do something with path ...
              })
              .toSource();
          }

WarsawJS Slides: Power of (JavaScript) codemods

Andriy Mykulyak