Babel: A refactoring tool @NicoloRibaudo NICOLÒ RIBAUDO Babel team @NicoloRibaudo [email protected] @nicolo-ribaudo @NicoloRibaudo 2 https://opencollective.com/babel @babeljs https://babeljs.io @babel @NicoloRibaudo 3 What is Babel? @NicoloRibaudo 4 What is Babel? Babel is a JavaScript compiler @NicoloRibaudo 5 It’s a JavaScript to JavaScript compiler (_player$level = player.level) != null player.level ??= 70_000; ? _player$level : player.level = 70000; @NicoloRibaudo 6 @NicoloRibaudo 7 @babel/how-to https://www.youtube.com/watch?v=UeVq_U5obnE @NicoloRibaudo 8 What is Babel? @NicoloRibaudo 9 What is Babel? Babel is a customizable JavaScript compiler @NicoloRibaudo 10 So… what can I do? @NicoloRibaudo 11 So… what can I do? ● Compile modern ECMAScript syntax to older (and more supported) syntax ● Compile TypeScript, Flow and JSX to plain JavaScript @NicoloRibaudo 12 So… what can I do? ● Compile modern ECMAScript syntax to older (and more supported) syntax ● Compile TypeScript, Flow and JSX to plain JavaScript ● Minify your code @NicoloRibaudo 13 So… what can I do? ● Compile modern ECMAScript syntax to older (and more supported) syntax ● Compile TypeScript, Flow and JSX to plain JavaScript ● Minify your code ● Statically evaluate parts of your program @NicoloRibaudo 14 So… what can I do? ● Compile modern ECMAScript syntax to older (and more supported) syntax ● Compile TypeScript, Flow and JSX to plain JavaScript ● Minify your code ● Statically evaluate parts of your program ● Perform static analysis on your code @NicoloRibaudo 15 So… what can I do? ● Compile modern ECMAScript syntax to older (and more supported) syntax ● Compile TypeScript, Flow and JSX to plain JavaScript ● Minify your code ● Statically evaluate parts of your program ● Perform static analysis on your code ● Run one-time transforms and automate refactorings @NicoloRibaudo 16 So… what can I do? ● Run one-time transforms and automate refactorings @NicoloRibaudo 17 Codemods One-time transforms and automate refactorings @NicoloRibaudo 18 Codemods @NicoloRibaudo 19 Codemods Refactors… happen. 路 @NicoloRibaudo 20 Codemods Refactors… happen. 路 Sometimes ... And they take ... … they are self-contained, without impacting … a few hours other parts or your program @NicoloRibaudo 21 Codemods Refactors… happen. 路 Sometimes ... And they take ... … they are self-contained, without impacting … a few hours other parts or your program … they affects your whole codebase … a week @NicoloRibaudo 22 Codemods Refactors… happen. 路 Sometimes ... And they take ... … they are self-contained, without impacting … a few hours other parts or your program … they affects your whole codebase … a week … you need to introduce changes accross … many weeks, maybe applications maintained by different teams months months @NicoloRibaudo 23 Codemods Refactors… happen. 路 Sometimes ... And they take ... … they are self-contained, without impacting … a few hours other parts or your program … they affects your whole codebase … a week … you need to introduce changes accross … many weeks, maybe applications maintained by different teams months months … you maintain a popular library that is used … ? by many users outside of your company @NicoloRibaudo 24 What can you use codemods for? @NicoloRibaudo 25 What can you use codemods for? What did we use them for in Babel? @NicoloRibaudo 26 What can you use codemods for? What did we use them for in Babel? ● Migrate our tests to Jest @NicoloRibaudo 27 What can you use codemods for? What did we use them for in Babel? ● Migrate our tests to Jest ● Remove unused catch bindings @NicoloRibaudo 28 What can you use codemods for? What did we use them for in Babel? ● Migrate our tests to Jest ● Remove unused catch bindings ● Remove the resolve dependency @NicoloRibaudo 29 What can you use codemods for? What did we use them for in Babel? ● Migrate our tests to Jest ● Remove unused catch bindings ● Remove the resolve dependency ● Migrate from Flow to TypeScript @NicoloRibaudo 30 What can you use codemods for? What other companies use them for? @NicoloRibaudo 31 What can you use codemods for? What other companies use them for? ● Facebook publishes codemods to migrate away from legacy React versions @NicoloRibaudo 32 What can you use codemods for? What other companies use them for? ● Facebook publishes codemods to migrate away from legacy React versions ● Gatsby provides codemods to migrate to new versions @NicoloRibaudo 33 What can you use codemods for? What other companies use them for? ● Facebook publishes codemods to migrate away from legacy React versions ● Gatsby provides codemods to migrate to new versions ● Next.js provides codemods to upgrade when a feature is deprecated @NicoloRibaudo 34 Compilers vs Codemods @NicoloRibaudo 35 Compilers vs Codemods @NicoloRibaudo 36 Compilers vs Codemods The usual Babel transforms are based on strictly defined semantics @NicoloRibaudo 37 Compilers vs Codemods The usual Babel transforms are based on strictly defined semantics person?.address.city?.size person == null ? void 0 : (_tmp = person.address.city) == null ? void 0 : _tmp.size @NicoloRibaudo 38 Compilers vs Codemods The usual Babel transforms are based on strictly Codemods are based on assumptions about defined semantics your coding style person?.address.city?.size person == null ? void 0 : (_tmp = person.address.city) == null ? void 0 : _tmp.size @NicoloRibaudo 39 Compilers vs Codemods The usual Babel transforms are based on strictly Codemods are based on assumptions about defined semantics your coding style person?.address.city?.size person && person.address.city && person.address.city.size person == null ? void 0 person?.address.city?.size : (_tmp = person.address.city) == null ? void 0 : _tmp.size @NicoloRibaudo 40 Compilers vs Codemods The usual Babel transforms are based on strictly Codemods are based on assumptions about defined semantics your coding style person?.address.city?.size person && person.address.city && person.address.city.size person == null ? void 0 person?.address.city?.size : (_tmp = person.address.city) == null ? void 0 false?.address.city?.size : _tmp.size �� @NicoloRibaudo 41 Compilers vs Codemods The usual Babel transforms are based on strictly Codemods are based on assumptions about defined semantics your coding style @NicoloRibaudo 42 Compilers vs Codemods The usual Babel transforms are based on strictly Codemods are based on assumptions about defined semantics your coding style They need to be precise and infallible. Developers should be able to trust the compiler output without checking it every time. @NicoloRibaudo 43 Compilers vs Codemods The usual Babel transforms are based on strictly Codemods are based on assumptions about defined semantics your coding style They need to be precise and infallible. They need to work in most cases, but it's not necessary that they work always. Developers should be able to trust the compiler output without checking it every time. @NicoloRibaudo 44 Compilers vs Codemods The usual Babel transforms are based on strictly Codemods are based on assumptions about defined semantics your coding style They need to be precise and infallible. They need to work in most cases, but it's not necessary that they work always. Developers should be able to trust the compiler output without checking it every time. They rely on human intervention. @NicoloRibaudo 45 Human-assisted automated transforms Why don't we just create the perfect codemod? @NicoloRibaudo 46 Human-assisted automated transforms https://xkcd.com/1319/ @NicoloRibaudo 47 Human-assisted automated transforms const fs = require("fs"); const { join } = require("path"); @NicoloRibaudo 48 Human-assisted automated transforms const fs = require("fs"); import fs from "fs"; const { join } = require("path"); import { join } from "path"; @NicoloRibaudo 49 Human-assisted automated transforms const fs = require("fs"); import fs from "fs"; const { join } = require("path"); import { join } from "path"; exports.readLocal = (file) => { return fs.readFileSync( join(__dirname, file) ); }; @NicoloRibaudo 50 Human-assisted automated transforms const fs = require("fs"); import fs from "fs"; const { join } = require("path"); import { join } from "path"; exports.readLocal = (file) => { export const readLocal = (file) => { return fs.readFileSync( return fs.readFileSync( join(__dirname, file) join(__dirname, file) ); ); }; } @NicoloRibaudo 51 Human-assisted automated transforms const fs = require("fs"); import fs from "fs"; const { join } = require("path"); import { join } from "path"; exports.readLocal = (file) => { export const readLocal = (file) => { return fs.readFileSync( return fs.readFileSync( join(__dirname, file) join(__dirname, file) ); ); }; } // "writeLocal" exports[`${fs.write.name}Local`] = (file, contents) => { return fs.writeFileSync( join(__dirname, file), contents ); }; @NicoloRibaudo 52 Human-assisted automated transforms const fs = require("fs"); import fs from "fs"; const { join } = require("path"); import { join } from "path"; exports.readLocal = (file) => { export const readLocal = (file) => { return fs.readFileSync( return fs.readFileSync( join(__dirname, file) join(__dirname, file) ); ); }; } // "writeLocal" // "writeLocal" exports[`${fs.write.name}Local`] = export const UNKNOWN = (file, contents) => { (file, contents) => { return fs.writeFileSync( return fs.writeFileSync( join(__dirname, file), contents join(__dirname, file), contents ); ); }; }; @NicoloRibaudo 53 Human-assisted automated transforms �� @NicoloRibaudo 54 Alternatives @NicoloRibaudo