Hiking Through the JavaScript Forest

A talk about Abstract Syntax Trees (ASTs) in JavaScript and how to use them to create codemods and eslint rules

Transcript

1. Hiking Through the JavaScript Forest
2. An AST makes it easier to inspect and manipulate your code with confidence.
3. An abstract syntax tree is basically a DOM for your code.
4. Syntax Highlighting Code Completion Static Analysis Code Coverage • Minification • JIT Compilation in the Browser • Source Maps • Transpilers (CoffeeScript, Babel) Interesting Things
5. Getting Started with ASTs Parser 
 
 Tree Code
6. var seattle = rain + trees;
7. var acorn = require(“acorn”) acorn.parse(“var seattle = rain + trees”) Could also be esprima, espree, babylon, etc.
8. Program Variable Declaration Variable Declarator Binary Expression
9. Program Variable Declaration Variable Declarator Binary Expression var seattle rain + trees
10. { "type": "Program", "body": [{ "type": “VariableDeclaration", "kind": "var" "declarations": [{ "type": "VariableDeclarator", "id": { "type": “Identifier", "name": "seattle" }, "init": { "type": "BinaryExpression", "left": { "type": “Identifier", "name": “rain" }, "operator": "+", "right": { "type": “Identifier", "name": “trees" } } }] }] }
11. { "type": "Program", "body": [{ "type": “VariableDeclaration", "kind": "var" "declarations": [{ "type": "VariableDeclarator", "id": { "type": “Identifier", "name": "seattle" }, "init": { "type": "BinaryExpression", "left": { "type": “Identifier", "name": “rain" }, "operator": "+", "right": { "type": “Identifier", "name": “trees" } } }] }] }
12. { "type": "Program", "body": [{ "type": “VariableDeclaration", "kind": "var" "declarations": [{ "type": "VariableDeclarator", "id": { "type": “Identifier", "name": "seattle" }, "init": { "type": "BinaryExpression", "left": { "type": “Identifier", "name": “rain" }, "operator": "+", "right": { "type": “Identifier", "name": “trees" } } }] }] }
13. Fun With Trees Static Analysis Codemods Transpilers
14. Tree Wrangling 1. Use ESLint to perform static analysis 2. Use jscodeshift for one-time code migration (codemods) 3. Use Babel for build-time transformation
15. Types of AST Tools Most use something called the visitor pattern Some tools prefer a “jQuery-like” API
16. Visitor Pattern You’re climbing the tree, but you stop and visit certain parts that seem really nice.
17. { "type": "Program", "body": [{ "type": “VariableDeclaration", "kind": "var" "declarations": [{ "type": "VariableDeclarator", "id": { "type": “Identifier", "name": "seattle" }, "init": { "type": "BinaryExpression", "left": { "type": “Identifier", "name": “rain" }, "operator": "+", "right": { "type": “Identifier", "name": “trees" } } }] }] }
18. Visitor Pattern {
 “VariableDeclaration”: function(node) {
 console.log(node);
 }
 }
19. { "type": “VariableDeclaration", "kind": "var" “declarations": [ … ] } One Branch of the Tree
20. Static Analysis
21. It’s not just about formatting.
22. Fix a bug. Add a unit test. Fix a similar bug…
23. Fix a bug. Write an ESLint Rule. Prevent that entire class of bugs from entering your codebase ever again.
24. var seattle = rain + trees;
25. const seattle = rain + trees;
26. Visitor Pattern (Revisited) {
 “VariableDeclaration”: function(node) {
 console.log(node);
 }
 }
27. { "type": “VariableDeclaration", "kind": "var" “declarations": [ … ] } One Branch of the Tree
28. ESLint Rules! module.exports = function(context) {
 // …
 return vistor;
 }
29. ESLint Rules! {
 “VariableDeclaration”: function(node) {
 if (node.kind === “var”)
 context.report(node, “You’re var-y bad!”);
 }
 }
30. ESLint Rules! module.exports = function(context) { return {
 “VariableDeclaration”: function(node) {
 if (node.kind === “var”) {
 context.report(node, “You’re var-y bad!”);
 }
 }
 }}
32. Transforms
33. Basic AST Flow Chart Parser 
 
 Tree Code
34. Reverse AST Flow Chart Generator 
 
 Tree Code
35. Reverse AST Flow Chart Generator 
 
 Tree Code
36. Program Variable Declaration Variable Declarator Binary Expression
37. Program Variable Declaration Variable Declarator Binary Expression
38. Tools like jscodeshift and babel give you an API to manipulate an AST and then convert that back into source code.
39. Build a Simple Babel Plugin
40. const seattle = rain + trees;
41. Program Variable Declaration Variable Declarator Binary Expression
42. Babel Plugins module.exports = function(babel) {
 // var visitor = …
 return { visitor: visitor };
 }
43. Babel Plugins {
 “VariableDeclaration”: function(path) {
 if (path.node.kind === “const”) {
 path.node.kind = “var”;
 }
 }
 }
44. Babel Plugins module.exports = function(babel) {
 return {
 visitor: {
 “VariableDeclaration”: function(path){
 if (path.node.kind === “const”) {
 path.node.kind = “var”;
 }
 }
 }
 }}
46. AST Explorer
47. export default function(file, api) { const j = api.jscodeshift; return j(file.source) .find(j.VariableDeclaration) .replaceWith( p => j.variableDeclaration(“const”, p.value.declarations) ) .toSource(); }; JSCodeshift Transform