Writing Codemods with jscodeshift

Transcript

1. Writing Codemods with jscodeshift
2. Matija Marohnić @silvenon
3. Refactoring • changing dependencies • improving the codebase
4. › npm outdated A New Project
5. 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
6. 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
7. Let's just say that we update things a lot!
8. const styleSheet = () => ({ toolbar: { margin: [10, "auto"] } }) Example
9. const styleSheet = () => ({ toolbar: { margin: "10px auto" } }) Example
10. const styleSheet = theme => ({ toolbar: { margin: [10, theme.spacing.unit] } }) Example
11. const styleSheet = theme => ({ toolbar: { margin: `10px ${theme.spacing.unit}px` } }) Example
12. Search & Replace /!/g It needs to understand
 the syntax
13. AST • Abstract Syntax Tree • represents code structure • source vs desired result
14. Codemods • scripts for refactoring • use AST • easily testable
15. Codemods › jscodeshift -t codemod.js <target> <target> can be a file or folder
16. Pros • faster iterations of ideas • up-to-date with dependencies • work on multiple codebases
17. cpojer/js-codemod • collection of codemods to transform code to next generation JS
18. cpojer/js-codemod •arrow-function.js •no-vars.js •template-literals.js
19. reactjs/react-codemod • collection of codemods that help update React APIs
20. reactjs/react-codemod •pure-component.js •error-boundaries.js •findDOMNode.js
21. Let's See a Codemod for our styleSheet Example "
22. Cons • many AST variations • lacking documentation • big learning curve
23. Photo by Alex Boyd on Unsplash Be Patient, Go to Sleep and Try Again Tomorrow