AST: Awesome Super Tool

It’s always good to understand how things work under the hood. Not only because it allows you to understand how to properly use things or how things may fail, but also to add that knowledge to your toolkit when needing to solve a problem.

How does Babel work? And ESLint? What about Prettier? Oh, and codemods? They all share a common concept which will unlock a world of possibilities if you understand it: the AST (stands for Abstract Syntax Tree).

Let’s learn a bit about yet another acronym, in order to learn how we can use it to bend the code to our will, and also have fun experimenting.

Demo link: https://astexplorer.net/#/gist/799185cf7b15f16d5d3b151a9bc67ac0/f6592234348f404263ad5c03c10ba3098a84d706

Transcript

1. Lenny @leogcrespo
2. ESLint
4. ES2015 ES5 ES2016 ES2017 ESNext ES2015 ES2016 ES2017
5. ES2015 ES5 ES2016 ES2017 ESNext ES2015 ES2016 ES2017 … … … … … …
6. import idx from 'idx'; function getFriends() { return idx(props, _ => _.user.friends[0].friends) };
7. function getFriends() { return props.user == null ? props.user : props.user.friends == null ? props.user.friends : props.user.friends[0] == null ? props.user.friends[0] : props.user.friends[0].friends }
8. const name = 'Bob Hope' const person = preval` const [first, last] = require('./name-splitter')(${name}) module.exports = {first, last} `
9. const name = 'Bob Hope' const person = {first: 'Bob', last: 'Hope'}
10. ESLint
11. ESLint ES2015 ES2016 ES2017 ESNext Style JS gotchas Variables Node.js CommonJS …
12. ESLint ES2015 ES2016 ES2017 ESNext Style JS gotchas Variables Node.js CommonJS … … … …
15. How do they work?
17. PARSERS
18. make a parser Write function parse(code) { return ‘todo’; } Write parser PARSER
19. PARSER
20. Code PARSER const hello = 'world';
21. AST Code PARSER const hello = 'world'; { type: 'Program', sourceType: 'module', body: [ { type: 'VariableDeclaration', kind: 'const', declarations: [ { type: 'VariableDeclarator', id: { type: 'Identifier', name: 'hello', }, init: { type: 'StringLiteral', value: 'world', }, }, ],
22. Abstract Syntax Tree (AST)
23. Abstract Syntax Tree (AST)
24. AST
25. AST
26. AST Plugins Code Code
27. ⚠ Rules Warnings/Errors ESLint AST Code
28. DEMO
29. ESLint GraphQL Prettier PostCSS JSCodeShift Syntax Highlighting Flow Typescript TSLint
31. ESLint rule to validate that a deprecated component is not used in your app.
32. Babel plugin to add contextual debug parameters to API calls in development.
33. Use Babylon (Babel’s parser) to parse your app files and extract i18n messages into another file to send to a translation service.
34. readable in dev ⚡ optimized in prod
35. generate artifacts
36. ⚙ automate refactors
37. Nope. Yep!
38. https://kentcdodds.com/talks/#writing-custom-babel-and-eslint- plugins-with-asts https://blog.kentcdodds.com/how-writing-custom-babel-and-eslint- plugins-can-increase-your-productivity-and-improve-user- fd6dd8076e26 https://kentcdodds.com/workshops/#code-transformation-and-linting Kent C. Dodds James Kyle https://github.com/thejameskyle/babel-handbook https://github.com/thejameskyle/the-super-tiny-compiler Henry Zhu http://henryzoo.com/babel-plugin-slides/assets/player/ KeynoteDHTMLPlayer.html#0
39. It’s AST, I know this!
40. AST a la vista, baby @leogcrespo