Writing Codemods with jscodeshift

Matija Marohnić @silvenon

Refactoring • changing dependencies • improving the codebase

› npm outdated A New Project

autoprefixer 6.7.7 6.7.7 8.0.0 your-project babel-eslint 8.0.0 8.2.1 8.2.1 your-project css-loader 0.26.4 0.26.4 0.28.9 your-project dotenv 4.0.0 4.0.0 5.0.0 your-project eslint-plugin-react 7.4.0 7.6.1 7.6.1 your-project Day One

autoprefixer 6.7.7 6.7.7 8.0.0 your-project babel-eslint 8.0.0 8.2.1 8.2.1 your-project css-loader 0.26.4 0.26.4 0.28.9 your-project dotenv 4.0.0 4.0.0 5.0.0 your-project eslint-plugin-react 7.4.0 7.6.1 7.6.1 your-project file-loader 0.10.1 0.10.1 1.1.6 your-project flow-bin 0.61.0 0.61.0 0.65.0 your-project flow-typed 2.2.3 2.3.0 2.3.0 your-project jest 22.0.1 22.3.0 22.3.0 your-project lodash 4.17.4 4.17.5 4.17.5 your-project nock 9.1.5 9.1.6 9.1.6 your-project node-sass 4.5.3 4.7.2 4.7.2 your-project nodemon 1.14.11 1.14.12 1.14.12 your-project postcss-loader 1.3.3 1.3.3 2.1.0 your-project query-string 4.3.4 4.3.4 5.1.0 your-project react-dates 16.2.1 16.3.0 16.3.0 your-project react-draggable 3.0.3 3.0.5 3.0.5 your-project react-router 3.0.5 3.2.0 4.2.0 your-project react-virtualized 9.12.0 9.18.5 9.18.5 your-project redux-form 7.0.4 7.2.3 7.2.3 your-project style-loader 0.13.2 0.13.2 0.20.1 your-project url-loader 0.5.9 0.5.9 0.6.2 your-project Day Three

Let's just say that we update things a lot!

const styleSheet = () => ({ toolbar: { margin: [10, "auto"] } }) Example

const styleSheet = () => ({ toolbar: { margin: "10px auto" } }) Example

const styleSheet = theme => ({ toolbar: { margin: [10, theme.spacing.unit] } }) Example

const styleSheet = theme => ({ toolbar: { margin: `10px ${theme.spacing.unit}px` } }) Example

Search & Replace /!/g It needs to understand
 the syntax

AST • Abstract Syntax Tree • represents code structure • source vs desired result

Codemods • scripts for refactoring • use AST • easily testable

Codemods › jscodeshift -t codemod.js can be a file or folder

Pros • faster iterations of ideas • up-to-date with dependencies • work on multiple codebases

cpojer/js-codemod • collection of codemods to transform code to next generation JS

cpojer/js-codemod •arrow-function.js •no-vars.js •template-literals.js

reactjs/react-codemod • collection of codemods that help update React APIs

reactjs/react-codemod •pure-component.js •error-boundaries.js •findDOMNode.js

Let's See a Codemod for our styleSheet Example "

Cons • many AST variations • lacking documentation • big learning curve

Photo by Alex Boyd on Unsplash Be Patient, Go to Sleep and Try Again Tomorrow