Slide 1

Slide 1 text

Writing Codemods with jscodeshift

Slide 2

Slide 2 text

Matija Marohnić @silvenon

Slide 3

Slide 3 text

Refactoring • changing dependencies • improving the codebase

Slide 4

Slide 4 text

› npm outdated A New Project

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Codemods • scripts for refactoring • use AST • easily testable

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Let's See a Codemod for our styleSheet Example "

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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