An introduction to automated refactoring with JavaScript codemods 👾

Short and practical introduction to codemods. They are "scripted search and replace" and super useful for automation and refactoring.

Transcript

1. REFACTORING WITH CODEMODS @KENNETH_SKOVHUS COPENHAGEN.JS X-MAS SPECIAL 2016
2. JAVASCRIPT CODEMODS @KENNETH_SKOVHUS COPENHAGEN.JS X-MAS SPECIAL 2016
3. CODEMODS?
5. SEARCH AND REPLACE
6. SEARCH AND REPLACE REGULAR EXPRESSIONS
7. SEARCH AND REPLACE REGULAR EXPRESSIONS BABEL
8. SEARCH AND REPLACE REGULAR EXPRESSIONS CODEMODS BABEL
9. “THINK OF CODEMODS AS A SCRIPTED FIND AND REPLACE FUNCTIONALITY THAT CAN READ AND WRITE CODE.” JEREMY GREER @REERGYMEREJ
10. var O = 'Tannenbaum' var song = 'Let it snow' song += '!'
11. var O = 'Tannenbaum' var song = 'Let it snow' song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!'
12. var O = 'Tannenbaum' var song = 'Let it snow' song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!' ABSTRACT SYNTAX TREE (AST)
13. var O = 'Tannenbaum' var song = 'Let it snow' song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!' Program VariableDeclaration {type: ‘var’} VariableDeclaration {type: ‘var’} ExpressionStatement VariableDeclarator VariableDeclarator AssignmentExpression {operator: ‘+=‘} Identifier: O Literal: “Tannenbaum” Identifier: song Literal: “Let is snow” Identifier: song Literal: “!”
14. var O = 'Tannenbaum' var song = 'Let it snow' song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!' Program VariableDeclaration {type: ‘var’} VariableDeclaration {type: ‘var’} ExpressionStatement VariableDeclarator VariableDeclarator AssignmentExpression {operator: ‘+=‘} Identifier: O Literal: “Tannenbaum” Identifier: song Literal: “Let is snow” Identifier: song Literal: “!”
15. var O = 'Tannenbaum' var song = 'Let it snow' song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!' Program VariableDeclaration {type: ‘const’} VariableDeclaration {type: ‘let’} ExpressionStatement VariableDeclarator VariableDeclarator AssignmentExpression {operator: ‘+=‘} Identifier: O Literal: “Tannenbaum” Identifier: song Literal: “Let is snow” Identifier: song Literal: “!”
16. C++: YACFE PHP: SPATCH PYTHON: ROPE JAVASCRIPT: JSCODESHIFT AST TO AST CODE TRANSFORMATION TOOLS
17. “A JAVASCRIPT CODEMOD TOOLKIT.” CLI TO EXECUTE CODEMODS & WRAPPER AROUND RECAST/AST-TYPES GITHUB.COM / FACEBOOK / JSCODESHIFT
18. # install it $ npm -g install jscodeshift # execute it $ jscodeshift -t my-transformer.js src-folder GITHUB.COM / FACEBOOK / JSCODESHIFT
19. /** * This doesn’t do anything. */ module.exports = function(fileInfo, api, options) { // transform `fileInfo.source` here // ... // return changed source return source; };
20. /** * This replaces every occurrence of variable "foo". */ module.exports = function(fileInfo, api) { return api.jscodeshift(fileInfo.source) .findVariableDeclarators('foo') .renameTo('bar') .toSource(); };
21. var O = 'Tannenbaum' var song = 'Let it snow' song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!' Program VariableDeclaration {type: ‘const’} VariableDeclaration {type: ‘let’} ExpressionStatement VariableDeclarator VariableDeclarator AssignmentExpression {operator: ‘+=‘} Identifier: O Literal: “Tannenbaum” Identifier: song Literal: “Let is snow” Identifier: song Literal: “!”
22. YES! LET’S TRY IT!
23. ASTEXPLORER.NET https://astexplorer.net/#/p9o7jKfvHm/2 https://astexplorer.net/#/p9o7jKfvHm/3
24. ES2015 (ARROW FUNCTIONS, CONST/LET, TEMPLATE STRING) COFFEESCRIPT TO ES2015 REACT CLASSES TO PURE COMPONENTS PAINLESS LIB UPGRADING (REACT INCLUDES CODEMODS) CODE FITNESS! CODEMODS APPLICATIONS
25. “TOOL ASSISTED CODE MODIFICATIONS CAN HELP EVOLVE COMPLEX SYSTEMS INCREMENTALLY AND AID IN MAINTAINING THE HEALTH OF LARGE CODEBASES.” CHRISTOPH POJER @CPOJER
26. REMOVAL OF TRANSLATIONS CODEMODS APPLICATIONS const i18n = require('i18n'); var song = i18n.t('xmas.snow'); { "xmas": { "snow": "let it snow" } } const __ = t => t; var song = __('let is snow');
27. TRY OUT NEW SHINY TOOLS ON EXISTING CODEBASE CODEMODS APPLICATIONS
29. TAPE AVA JEST
31. “CODEMODS ENABLES YOU TO FIND THE RIGHT TOOL FOR THE JOB BY LETTING YOU TRY OUT DIFFERENT TOOLS ON EXISTING CODEBASE.”
32. THANKS!
33. @KENNETH_SKOVHUS COPENHAGEN.JS X-MAS SPECIAL 2016 REFACTORING WITH CODEMODS
34. @KENNETH_SKOVHUS COPENHAGEN.JS X-MAS SPECIAL 2016 REFACTORING WITH CODEMODS