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

Let’s try to hack AST of JavaScript

sota ohara
July 06, 2019
1.7k

Let’s try to hack AST of JavaScript

sota ohara

July 06, 2019
Tweet

Transcript

  1. 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
  2. 9 JavaScript AST is not difficult We can use AST

    easily in JavaScript What’s a JavaScript AST?
  3. 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?
  4. 12 AST Flow Source Code AST New AST New Source

    Code parser traverser generator
  5. 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
  6. 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'
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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'
  12. 29 If you have any question or feedback, please get

    in touch with twitter (@sottar_) Thank you~