Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An introduction to automated refactoring with J...

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.

Kenneth Skovhus

December 07, 2016
Tweet

More Decks by Kenneth Skovhus

Other Decks in Programming

Transcript

  1. “THINK OF CODEMODS AS A SCRIPTED FIND AND REPLACE FUNCTIONALITY

    THAT CAN READ AND WRITE CODE.” JEREMY GREER @REERGYMEREJ
  2. var O = 'Tannenbaum' var song = 'Let it snow'

    song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!'
  3. var O = 'Tannenbaum' var song = 'Let it snow'

    song += '!' const O = 'Tannenbaum' let song = 'Let it snow' song += '!' ABSTRACT SYNTAX TREE (AST)
  4. 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: “!”
  5. 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: “!”
  6. 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: “!”
  7. “A JAVASCRIPT CODEMOD TOOLKIT.” CLI TO EXECUTE CODEMODS & WRAPPER

    AROUND RECAST/AST-TYPES GITHUB.COM / FACEBOOK / JSCODESHIFT
  8. # install it $ npm -g install jscodeshift # execute

    it $ jscodeshift -t my-transformer.js src-folder GITHUB.COM / FACEBOOK / JSCODESHIFT
  9. /** * This doesn’t do anything. */ module.exports = function(fileInfo,

    api, options) { // transform `fileInfo.source` here // ... // return changed source return source; };
  10. /** * This replaces every occurrence of variable "foo". */

    module.exports = function(fileInfo, api) { return api.jscodeshift(fileInfo.source) .findVariableDeclarators('foo') .renameTo('bar') .toSource(); };
  11. 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: “!”
  12. 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
  13. “TOOL ASSISTED CODE MODIFICATIONS CAN HELP EVOLVE COMPLEX SYSTEMS INCREMENTALLY

    AND AID IN MAINTAINING THE HEALTH OF LARGE CODEBASES.” CHRISTOPH POJER @CPOJER
  14. 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');
  15. “CODEMODS ENABLES YOU TO FIND THE RIGHT TOOL FOR THE

    JOB BY LETTING YOU TRY OUT DIFFERENT TOOLS ON EXISTING CODEBASE.”