JavaScript Syntax Tree Demystified

@ariyahidayat @mikesherov PhantomJS Esprima

Composable De-facto Interface

SpiderMonkey Reflect.js Escodegen Esprima

SpiderMonkey Reflect.js Esprima Escodegen Escope Esmangle Istanbul Acorn Babel JSCS js2coffee Webpack ast-query recast falafel ESLint Esformatter Jsfmt Require.js Blanket MetaJS Ibrik JSDoc Rocambole JSComplexity Plato

Parsing

Parser Interpreter Run-time Libraries var answer = 42; alert(answer);

JavaScript Execution Visualization int3.github.io/metajs/

Parser Execution Static analysis Transformatio n

“jQuery is cool” jQuery is cool separator word jQuery is cool Subject Adjective Verb

var answer = 42; keyword identifier equal sign number semicolon

var answer = 42; var answer = 42; var answer = 42 ; var answer = 42 ; same tokens

var answer = 42; Variable Declaration Initializer Identifier syntax tree

var answer = 42; alert(answer); Program Variable Declaration Call Expression Initializer Identifier answer 42 Arguments Identifier alert answer

Syntax Tree Visualization esprima.org/demo/parse.html var answer = 42 github.com/estree/estree

Stray Logging function detect_console(code) { function check(node) { if (node.type === 'CallExpression') { if (node.callee.type === 'MemberExpression') { if (node.callee.object.name === 'console') { alert('console call at line', node.loc.start.line); } } } } var tree = esprima.parse(code, { loc: true }); estraverse.traverse(tree, { enter:check }); } http://ariya.ofilabs.com/2013/04/automagic-removal-of-javascript-logging.html

Style Checking

A Note on Style... “Arguments over style are pointless. There should be a style guide, and you should follow it” - Rebecca Murphey “Have the robots do it.” - Someone, probably.

A Rose By Any Other Name... var answer = 6 * 7; var answer=6*7

Inspecting The Tree var answer = 6 * 7; literal literal 6 7 var answer=6*7 Binary Expression Variable Declaration Identifier answer *

No content

Using Ranges literal literal 6 7 var answer=6*7 Binary Expression * range: 11-14 range: 11-12 range: 13-14

Using Ranges literal literal 6 7 var answer = 6 * 7; Binary Expression * range: 13-18 range: 13-14 range: 17-18

Using Ranges literal literal 6 7 var answer = 6* 7; Binary Expression * range: 13-18 range: 13-14 range: 17-18

No content

Using Tokens literal literal 6 7 * range: 13-14 range: 17-18 6 7 * 13-14 17-18 ... Tokens Tree 14-15

Tying Tokens To The Tree literal literal * Tree 6 7 * 13-14 17-18 Tokens 14-15

No content

JSCS A Javascript Style Guide Enforcer https://github.com/jscs-dev/node-jscs

JSCS File Object Walks AST, creates annotations, API for traversal

JSCS Error Object Assertion Library, Error Retrieval and Addition API

JSCS Rule Object

YOU CAN SHOULD CONTRIBUTE https://github.com/jquery/esprima/issues https://github.com/jscs-dev/node-jscs/issues https://github.com/estree/estree/issues

@ariyahidayat @mikesherov Thank You Some artworks are from http://openclipart.org.