Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Let’s try to hack AST of JavaScript
sota ohara
July 06, 2019
1
1.3k
Let’s try to hack AST of JavaScript
sota ohara
July 06, 2019
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Implement prerendering w/ puppeteer
sottar
1
130
create own CMS from scratch
sottar
2
8.3k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
17k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.3k
new version of context in React 16.3
sottar
3
1.2k
2ヶ月半でサービスをリリースした話し
sottar
2
1.9k
Redux のディレクトリ構成を考える
sottar
2
13k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.8k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Agile that works and the tools we love
rasmusluckow
320
20k
Optimizing for Happiness
mojombo
365
64k
4 Signs Your Business is Dying
shpigford
171
20k
Designing with Data
zakiwarfel
91
4.2k
Music & Morning Musume
bryan
37
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
Three Pipe Problems
jasonvnalue
89
8.9k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Transcript
1 Let’s try to hack AST of JavaScript Sota Ohara
2019.7.4 Battle Conference U30
2 Tech Lead @ Mercari inc. Twitter: @sottar_ GitHub: @sottar
Sota Ohara
3 - Introduce the AST - Create babel plugin Index
4 What’s an AST
5 Abstract Syntax Tree (抽象構文木)
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 It seems difficult...
8 JavaScript AST
9 JavaScript AST is not difficult We can use AST
easily in JavaScript What’s a JavaScript AST?
10 Just a JavaScript Object which displays an architecture of
code What’s a JavaScript AST?
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 AST Flow Source Code AST New AST New Source
Code parser traverser generator
13 Useful Tool AST Explorer
14 Let’s create a babel plugin
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 Replace var with const
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 That’s all
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 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 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 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 Understand, but how to write it?
24 Useful Tools AST Explorer
25 Create babel plugin
26 Create babel plugin var foo = 'foooooo'
27 Create babel plugin var foo = 'foooooo'
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 If you have any question or feedback, please get
in touch with twitter (@sottar_) Thank you~
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