Let’s try to hack AST of JavaScript

Transcript

1. 1 Let’s try to hack AST of JavaScript Sota Ohara

   2019.7.4 Battle Conference U30

2. 2 Tech Lead @ Mercari inc. Twitter: @sottar_ GitHub: @sottar

   Sota Ohara

3. 3 - Introduce the AST - Create babel plugin Index

4. 4 What’s an AST

5. 5 Abstract Syntax Tree (抽象構文木)

6. 6 What’s an AST An AST is the result of

   parsing source code. A tree data structure which extracted necessary information from the source code DOM Tree is one of them Used for analysis and processing the source code It’s using by the compiler and interpreter

7. 7 It seems difficult...

8. 8 JavaScript AST

9. 9 JavaScript AST is not difficult We can use AST

   easily in JavaScript What’s a JavaScript AST?

10. 10 Just a JavaScript Object which displays an architecture of

    code What’s a JavaScript AST?

11. 11 ESTree de facto standard Parser Acorn Esprima Babylon: used

    by Babel, Acorn based Espree: used by ESLint, Acorn based What’s a JavaScript AST?

12. 12 AST Flow Source Code AST New AST New Source

    Code parser traverser generator

13. 13 Useful Tool AST Explorer

14. 14 Let’s create a babel plugin

15. 15 Create a babel plugin transform function take care the

    parser, traverser and generator. $ npm i -S @babel/core const { transform } = require("babel-core"); index.js

16. 16 Replace var with const

17. 17 Create a babel plugin index.js const { transform }

    = require("babel-core"); const src = "var foo = 'foooooo'" const plugin = ({ types }) => ({ visitor: { VariableDeclaration: nodePath => { if (nodePath.node.kind === "var") { nodePath.node.kind = "const"; } } } }); const { code } = transform(src, { plugins: [plugin] }); console.log(code); // -> const foo = 'foooooo'

18. 18 That’s all

19. 19 const { transform } = require("babel-core"); const src =

    "var foo = 'foooooo'" const plugin = ({ types }) => ({ visitor: { VariableDeclaration: nodePath => { if (nodePath.node.kind === "var") { nodePath.node.kind = "const"; } } } }); const { code } = transform(src, { plugins: [plugin] }); console.log(code); // -> const foo = 'foooooo' Create babel plugin index.js Original source code Generated source code

20. 20 const { transform } = require("babel-core"); const src =

    "var foo = 'foooooo'" const plugin = ({ types }) => ({ visitor: { VariableDeclaration: nodePath => { if (nodePath.node.kind === "var") { nodePath.node.kind = "const"; } } } }); const { code } = transform(src, { plugins: [plugin] }); console.log(code); // -> const foo = 'foooooo' Create babel plugin index.js Call transform function with src and defined plugin

21. 21 const { transform } = require("babel-core"); const src =

    "var foo = 'foooooo'" const plugin = ({ types }) => ({ visitor: { VariableDeclaration: nodePath => { if (nodePath.node.kind === "var") { nodePath.node.kind = "const"; } } } }); const { code } = transform(src, { plugins: [plugin] }); console.log(code); // -> const foo = 'foooooo' Create babel plugin index.js Kind of visitor pattern

22. 22 Create babel plugin index.js const { transform } =

    require("babel-core"); const src = "var foo = 'foooooo'" const plugin = ({ types }) => ({ visitor: { VariableDeclaration: nodePath => { if (nodePath.node.kind === "var") { nodePath.node.kind = "const"; } } } }); const { code } = transform(src, { plugins: [plugin] }); console.log(code); // -> const foo = 'foooooo' Kind of visitor pattern This function will be fired when this label is found in the AST

23. 23 Understand, but how to write it?

24. 24 Useful Tools AST Explorer

25. 25 Create babel plugin

26. 26 Create babel plugin var foo = 'foooooo'

27. 27 Create babel plugin var foo = 'foooooo'

28. 28 Create babel plugin index.js const { transform } =

    require("babel-core"); const src = "var foo = 'foooooo'" const plugin = ({ types }) => ({ visitor: { VariableDeclaration: nodePath => { if (nodePath.node.kind === "var") { nodePath.node.kind = "const"; } } } }); const { code } = transform(src, { plugins: [plugin] }); console.log(code); // -> const foo = 'foooooo'

29. 29 If you have any question or feedback, please get

    in touch with twitter (@sottar_) Thank you~

30. 30 AST Explorer https://astexplorer.net/ Acorn https://github.com/acornjs/acorn Esprima https://github.com/jquery/esprima Babylon https://github.com/babel/babel/tree/master/packages/babel-parser

    Espree https://github.com/eslint/espree Appendix