JavaScript and the AST

JavaScript and the AST
Jarrod Overson - Shape Security
@jsoverson

var jQuery = require('jquery')

(function(){
//browserify stuff
})({
1: [function(require, module, exports) {
var jQuery = require('jquery');
}, { "jquery": 2 }],
2: [function(require, module, exports) {
//*! jQuery v1.11.3 | (c) 2005, 2015 jQuery
!function(a,b){"object"==typeof module&&"object
}, {}]
}, {}, [1]);

// var jQuery = require('jquery')

/*
// */ var jQuery = require('jquery');

var jQuery = "require('jquery')"

var module = 'jquery';
var jQuery = require(module)

files.map(function (file) {
return file.ext;
})
files.map(file => file.ext))

files.map(file => this.parse(file));
var _this = this;
files.map(function (file) {
return _this.parse(file);
});

Let's say you wanted to tweak your code.
Just a little bit.

Remember life before RegExes?
Has anyone thought : "Meh, I got text search."

foo(a)
/foos*((:?[_$a-zA-Z][_$a-zA-
Z0-9]*|,)*?)/

foo(ಠ_ಠ)
/foo(([_$a-zA-ZxA0-uFFFF][_
$a-zA-Z0-9xA0-uFFFF]*)?)/

foo(4)
/foo((:?d*|[_$a-zA-ZxA0-
uFFFF][_$a-zA-Z0-9xA0-
uFFFF]*)?)/

foo(4,a)
/foo((:?d*|[_$a-zA-ZxA0-
uFFFF]*|,)*?)/

foo (4,a)
/foos*((:?d*|[_$a-zA-ZxA0-
uFFFF]*|,)*?)/

otherfoo()
bfoos*((:?d*|[_$a-zA-ZxA0-
uFFFF]*|,)*?)

foo("2")
/bfoos*((:?(['"])[^2]*2|
d*|[_$a-zA-ZxA0-uFFFF][_$a-
zA-Z0-9xA0-uFFFF]*|,)*?)/

foo(''.prototype.toUpperCase.call([a
,""",b,"""].join('')))
/(╯°□°）╯︵ ┻━┻/

Using esquery:
[callee.name="foo"]

Abstract Syntax Tree
A tree representation of the syntactic structure of source code.

• How do you get a JavaScript AST?
• How do you use it?
• How do you transform it?
• Building a transpiler.

Parsing JavaScript
• Esprima - Fast, conservative. Parses to ESTree format.
• Acorn - Error tolerant. Parses to ESTree format.
• Shift - Most spec-compliant. Parses to Shift format.

ESTree Shift
• Community effort
• Wide tool support
• Somewhat backwards  
compatible with  
SpiderMonkey AST
• Shape Security product
• Limited tool support
• Not compatible with ESTree
• Cross platform
• First spec-based AST
vs
Standardized AST formats

Why ever use Shift?
• Shift was developed by Ariya Hidayat (Esprima), Michael Ficarra
(CoffeeScript, loads of ES tools), and several others.
• Shift was designed speciﬁcally for simpler and more efﬁcient
transformation and analysis code.
• Shift creators still contribute to ESTree.
• When in doubt, use ESTree for the community.
• If ESTree causes problems, consider Shift.

Just a Plain Old
JavaScript Object
{
"type": "Script",
"directives": [],
"statements": [
{
"type": "VariableDeclarationStatement",
"declaration": {
"type": "VariableDeclaration",
"kind": "var",
"declarators": [
{
"type": "VariableDeclarator",
"binding": {
"type": "BindingIdentifier",
"name": "a"
},
"init": {
"type": "CallExpression",
"callee": {
"type": "FunctionExpression",
"isGenerator": false,
"name": null,
"params": {
"type": "FormalParameters",
"items": [
{
"type": "BindingIdentifier",
"name": "a"
}
],

AST Explorer
http://felix-kling.de/esprima_ast_explorer/

Ready made traversal tools/helpers
• estraverse (estree)
• esprima-walk (estree)
• ast-traverse (estree)
• shift-traverse (shift)
• shift-reducer (shift)

How do you transform an AST?
let a = 2;
let b = 2;

{ type: 'Script',
directives: [],
statements:
[ { type: 'VariableDeclarationStatement',
declaration:
{ type: 'VariableDeclaration',
kind: 'let',
declarators:
[ { type: 'VariableDeclarator',
binding: { type: 'BindingIdentifier', name: 'a' },
init: { type: 'LiteralNumericExpression', value: 2 }

import {parseScript} from 'shift-parser';
import codegen from 'shift-codegen';
let ast = parse('let a = 2;');
ast.
statements[0].
declaration.
declarators[0].
binding.name = 'b';
let newSource = codegen(ast);

OK, Let's build a transpiler.
I really really like Arrow Expressions, how 'bout you?

Test ﬁrst: what are we expecting?
(() => { return 2 })()
If we run* the following in an ES5 environment
it will return
2
* transpile and eval()

shift-reducer
Like [].reduce() but for ASTs

import reduce from 'shift-reducer';
var result = reduce(reducer, ast);

import spec from 'shift-spec';
let reducer = {};
for (var nodeName in spec) {
reducer["reduce" + nodeName] = function (node, state) {
return state;
};
}

Hypothesis:
(function(){ return 2 })()
Transforming the ArrowExpression into a FunctionExpression, eg
should pass the test.

reducer.reduceArrowExpression = function(node, state) {
state.type = 'FunctionExpression';
return state;
}

(function(){return 2}())
(()=>{return 2})()

Next step, omit the return.
(() => 2)()

reduceArrowExpression(node, state) {
if (state.body.type !== 'FunctionBody') {
var oldBody = state.body;
state.body = {
type : 'FunctionBody',
directives : [],
statements : [{
type: 'ReturnStatement',
expression: oldBody
}]
}
}
return state;
}

(function(){return 2}())
(() => 2)()

And now for this
() => this.foo

The good way…
// assign "this" to a temporary variable
var _this = this;
// before we access it here
function(){ return _this.foo }

The easy way…
function(){ return this.foo }.bind(this)
(The good way is left as an exercise to you, mostly due to time)

ArrowExpressions && bind()
this.val = 2;
arrow = () => this.val;
arrow()
arrow.bind({val:6})()
obj = { val : 12, arrow : arrow }
obj.arrow();
// 2
// 2
// 2

FunctionExpressions && bind()
this.val = 2;
fn = function() { return this.val };
fn()
fn.bind({val:6})()
obj = { val : 12, fn : fn }
obj.fn();
// 2
// 6
// 12

FunctionExpression

CallExpression
FunctionExpression

let callExpression = {
type: 'CallExpression',
callee: {
type: 'StaticMemberExpression',
object: state,
property: 'bind'
},
arguments: [{ type: 'ThisExpression' }]
};
state.body = {
directives : [],()

callee: {
object: state,
property: 'bind'
},
};
state.body = {
directives : [],<state>.bind()

{
type: "CallExpression",
callee: {
type: "StaticMemberExpression",
object: {
type: "IdentifierExpression",
name: "foo"
},
property: "bind"
},
arguments: []
}
foo.bind()
AST BREAK!

{
callee: {
type: "ComputedMemberExpression",
object: {
type:"IdentifierExpression",
name:"foo"
},
expression: {
type: "LiteralStringExpression",
value: "bind"
}
},
arguments: []
}
foo["bind"]()
AST BREAK!

{
callee: {
type: "IdentifierExpression",
name: "foo"
},
arguments: []
}
foo()
AST BREAK!

callee: {
object: state,
property: 'bind'
},
};
state.body = {
directives : [],<state>.bind(this)

},
};
state.body = {
directives : [],
statements : [{
expression: oldBody
]
}
}
return callExpression;
}

"use strict";
import spec from 'shift-spec';
let reducer = {};
for (var nodeName in spec) {
reducer['reduce' + nodeName] = (node, state) => state;
}
reducer.reduceArrowExpression = function (node, state) {
callee: {
object: state,
property: 'bind'
},
arguments: [{type: 'ThisExpression'}]
};
let oldBody = state.body;
state.body = {
type: 'FunctionBody',
directives: [],
statements: [
{
expression: oldBody
}
]
}
}
return callExpression;
};
export default reducer;

import {parseScript} from 'shift-parser';
import reduce from 'shift-reducer';
import codegen from 'shift-codegen';
import transpiler from './transpiler';
let ast = parseScript(source);
var result = reduce(transpiler, ast);
var newSource = codegen(result);
console.log(newSource);

Analyze Transform
• Linting
• Complexity
• Auto Documentation
• Type Checking
• API Conformance
• Transpiling
• Code generation
• Preprocessing
• Refactoring
• Reformatting
What can you do with an AST?

"The worst mistake man ever
committed was treating
source code as text."
- John Stamos
Season 3, episode 20 of "Full House"

When have you ever typed this
function greet(target) {
}
without this?

Have you ever been concerned about this string?
function greet(target) {
}

JavaScript and the AST

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (8)

Semelhante a JavaScript and the AST

Semelhante a JavaScript and the AST (20)

Mais de Jarrod Overson

Mais de Jarrod Overson (19)

Último

Último (20)

JavaScript and the AST