-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
333 lines (294 loc) · 19.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shift AST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,700" rel="stylesheet" type="text/css"/>
<!-- highlight.js -->
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/magula.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- ui-treeview web component -->
<script src="vendor/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="vendor/ui-treeview/dist/index.js"></script>
<link href="css/ui-treeview.css" rel="stylesheet">
<style>
.marketing {
margin: 50px 0;
}
figure.comparison {
width: 47%;
margin: 0 2px;
text-align: left;
}
figure.left {
float: left;
}
figure.right {
float: right;
}
figure.comparison ui-treeview {
background-color: whitesmoke;
width: 100%;
height: 350px;
overflow: auto;
}
figure.comparison figcaption {
text-align: center;
}
.marketing h3 {
text-align: center;
}
abbr[title] {
border: none;
text-decoration: underline dotted;
}
</style>
</head>
<body>
<div class="container-narrow">
<div class="content">
<ul class="nav nav-pills pull-right">
<li class="dropdown">
<a href="#" onclick="return false;">Family <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="parser.html">Shift Parser</a></li>
<li><a href="codegen.html">Shift Code Generator</a></li>
<li><a href="scope.html">Shift Scope Analyser</a></li>
<li><a href="reducer.html">Shift Reducer</a></li>
<li><a href="fuzzer.html">Shift Fuzzer</a></li>
<li><a href="validator.html">Shift Validator</a></li>
<li><a href="estree-converter.html">Shift-ESTree Converter</a></li>
<li><a href="template.html">Shift Template</a></li>
</ul>
</li>
<li><a target="_blank" href="https://github.com/shapesecurity/shift-spec">Spec</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a target="_blank" href="https://github.com/shapesecurity?utf8=%E2%9C%93&q=shift">GitHub</a></li>
</ul>
<div class="jumbotron">
<h1><span class="shift">Shift</span> AST</h1>
<p class="lead">... and the Shift family of tools</p>
</div>
<hr />
<div class="row-fluid marketing">
<div class="span6">
<h3>What is the Shift <abbr class="initialism" title="abstract syntax tree">AST</abbr>?</h3>
<ul class="list-unstyled">
<li>Represents the structure of an ECMAScript program as a tree</li>
<li>Easily transformed to create new programs or analysed to create reports or inform other computations</li>
</ul>
</div>
<div class="span6">
<h3>Why is it relevant to you?</h3>
<ul class="list-unstyled">
<li>ECMAScript ASTs are used in the vast majority of language tooling: linters, compilers, minifiers, refactoring tools, IDEs, etc.</li>
<li>Nearly eliminates the chance of accidentally creating an AST that does not represent an ECMAScript program</li>
</ul>
</div>
</div>
<hr />
<h3>Use Cases</h3>
<section id="transformation">
<h4>Transformation</h4>
<p>
Allowing for convenient, error-free transformation was the highest
priority in the design of the Shift AST format. This has been
achieved through a number of means, some of which are illustrated
below. The following program is represented in both the Shift AST
(left) and an alternative representation,
<a href="https://github.com/estree/estree">ESTree</a>,
formerly known as the SpiderMonkey AST (right).
</p>
<div class="text-center">
<pre><code class="javascript" style="font-size: 130%">var x; for(var y;;);</code></pre>
</div>
<div class="row-fluid">
<figure class="comparison left">
<ui-treeview expanded>
{"type":"Script","directives":[],"statements":[{"type":"VariableDeclarationStatement","declaration":{"type":"VariableDeclaration","kind":"var","declarators":[{"type":"VariableDeclarator","binding":{"type":"BindingIdentifier","name":"x"},"init":null}]}},{"type":"ForStatement","init":{"type":"VariableDeclaration","kind":"var","declarators":[{"type":"VariableDeclarator","binding":{"type":"BindingIdentifier","name":"y"},"init":null}]},"test":null,"update":null,"body":{"type":"EmptyStatement"}}]}
</ui-treeview>
<figcaption><h5><span class="shift">Shift</span></h5></figcaption>
</figure>
<figure class="comparison right">
<ui-treeview expanded>
{"type":"Program","body":[{"type":"VariableDeclaration","declarations":[{"type":"VariableDeclarator","id":{"type":"Identifier","name":"x"},"init":null}],"kind":"var"},{"type":"ForStatement","init":{"type":"VariableDeclaration","declarations":[{"type":"VariableDeclarator","id":{"type":"Identifier","name":"y"},"init":null}],"kind":"var"},"test":null,"update":null,"body":{"type":"EmptyStatement"}}]}
</ui-treeview>
<figcaption><h5>ESTree</h5></figcaption>
</figure>
</div>
<p>
Using the ESTree format, a user that is only considering programs
that contain variable declarations in statement position may write
a naïve transformation that replaces all variable declarations
with while statements. But the same user using the Shift AST format
knows that all statement nodes may be replaced by other statement
nodes, and would apply the transformation to the
VariableDeclarationStatement node instead.
</p>
<p>
This is a single, simple example of the benefits reaped from using
an AST format that was specifically designed with transformation in
mind. For other examples, see the Shape Security blog post,
<a href="https://blog.shapesecurity.com/2015/01/06/a-technical-comparison-of-the-shift-and-spidermonkey-ast-formats/">
<em>A Technical Comparison of the Shift and SpiderMonkey AST Formats</em></a>.
</p>
</section>
<section id="analysis">
<h4>Analysis</h4>
<p>
Program analysis using the Shift AST is easy due to the large
variety of node types that help reduce the necessary amount of
context during analysis.
</p>
<p>
As a case study, consider the implementation of the
<a href="http://eslint.org/docs/rules/id-length">id-length</a>
linting rule in eslint, which allows a user to enforce a minimum or
maximum length for identifiers. Because eslint uses the ESTree
representation internally, this rule has to do a surprising amount
of work keeping track of context while linting to ensure that
labels, object property names, and static member accesses do not
get misinterpreted as identifiers. This difficulty originates from
the use of a generic Identifier node in ESTree, which is used in
all of these contexts and more. Using the Shift AST, a linting rule
like this would be trivial: assert that the name of each
VariableReference node is within the given bounds.
</p>
</section>
<hr />
<h3>Support</h3>
<section id="support">
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th></th>
<th>ES2015 (ES6)</th>
<th>ES2016</th>
<th>ES2017</th>
<th>ES2018</th>
<th>ES2019</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="https://github.com/shapesecurity/shift-spec">AST Specification</a></th>
<td><a href="https://github.com/shapesecurity/shift-spec/blob/es6/spec.idl">Legacy</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec/blob/es2016/spec.idl">Legacy</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec/blob/es2017/spec.idl">Legacy</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec/blob/es2018/spec.idl">Legacy</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec/blob/es2019/spec.idl">Complete</a></td>
</tr>
<tr>
<th><a href="parser.html">Parser</a></th>
<td><a href="https://github.com/shapesecurity/shift-parser-js/tree/es6">JS</a> + <a href="https://github.com/shapesecurity/shift-java/blob/es6/src/main/java/com/shapesecurity/shift/parser/">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-parser-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/src/main/java/com/shapesecurity/shift/es2016/parser">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-parser-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/src/main/java/com/shapesecurity/shift/es2017/parser">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-parser-js/tree/es2018">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2018/src/main/java/com/shapesecurity/shift/es2018/parser">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-parser-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th><a href="codegen.html">Code Generator</a></th>
<td><a href="https://github.com/shapesecurity/shift-codegen-js/tree/es6">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es6/src/main/java/com/shapesecurity/shift/codegen">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-codegen-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/src/main/java/com/shapesecurity/shift/es2016/codegen">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-codegen-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/src/main/java/com/shapesecurity/shift/es2017/codegen">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-codegen-js/tree/es2018">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2018/src/main/java/com/shapesecurity/shift/es2018/codegen">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-codegen-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th><a href="scope.html">Scope Analyser</a></th>
<td><a href="https://github.com/shapesecurity/shift-scope-js/tree/es6">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es6/src/main/java/com/shapesecurity/shift/scope">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-scope-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/src/main/java/com/shapesecurity/shift/es2016/scope">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-scope-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/src/main/java/com/shapesecurity/shift/es2017/scope">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-scope-js/tree/es2018">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2018/src/main/java/com/shapesecurity/shift/es2018/scope">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-scope-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th><a href="reducer.html">Reducer</a></th>
<td><a href="https://github.com/shapesecurity/shift-reducer-js/tree/es6">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es6/src/main/java/com/shapesecurity/shift/visitor">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-reducer-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/src/main/java/com/shapesecurity/shift/es2016/reducer">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-reducer-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/src/main/java/com/shapesecurity/shift/es2017/reducer">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-reducer-js/tree/es2018">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2018/src/main/java/com/shapesecurity/shift/es2018/reducer">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-reducer-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th><a href="fuzzer.html">Fuzzer</a></th>
<td><a href="https://github.com/shapesecurity/shift-java/tree/es6/src/main/java/com/shapesecurity/shift/fuzzer">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-fuzzer-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/src/main/java/com/shapesecurity/shift/es2016/fuzzer">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-fuzzer-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/src/main/java/com/shapesecurity/shift/es2017/fuzzer">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-fuzzer-js/tree/es2018">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2018/src/main/java/com/shapesecurity/shift/es2018/fuzzer">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-fuzzer-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th><a href="validator.html">Validator</a></th>
<td><a href="https://github.com/shapesecurity/shift-validator-js/tree/es6">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es6/src/main/java/com/shapesecurity/shift/validator">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-validator-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/src/main/java/com/shapesecurity/shift/es2016/validator">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-validator-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/src/main/java/com/shapesecurity/shift/es2017/validator">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-validator-js/tree/es2018">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2018/src/main/java/com/shapesecurity/shift/es2018/validator">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-validator-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th><a href="estree-converter.html">ESTree Converter</a></th>
<td><a href="https://github.com/shapesecurity/shift-spidermonkey-converter-js/tree/es6">JS</a></td>
<td>—</td>
<td>—</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<th><a href="template.html">Shift Template</a></th>
<td>—</td>
<td><a href="https://github.com/shapesecurity/shift-template-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/src/main/java/com/shapesecurity/shift/es2016/template">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-template-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/src/main/java/com/shapesecurity/shift/es2017/template">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-java/tree/es2018/src/main/java/com/shapesecurity/shift/es2018/template">Java</a></td>
<td>—</td>
</tr>
<tr>
<th>Regexp Acceptor</th>
<td>—</td>
<td><a href="https://github.com/shapesecurity/shift-regexp-acceptor-js/tree/es2016">JS</a></td>
<td>—</td>
<td><a href="https://github.com/shapesecurity/shift-regexp-acceptor-js/tree/es2018">JS</a></td>
<td><a href="https://github.com/shapesecurity/shift-regexp-acceptor-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th>AST Constructors</th>
<td><a href="https://github.com/shapesecurity/shift-ast-js/tree/es6">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es6/generated-sources/main/java/com/shapesecurity/shift/ast">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-ast-js/tree/es2016">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2016/generated-sources/main/java/com/shapesecurity/shift/es2016/ast">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-ast-js/tree/es2017">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2017/generated-sources/main/java/com/shapesecurity/shift/es2017/ast">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-ast-js/tree/es2018">JS</a> + <a href="https://github.com/shapesecurity/shift-java/tree/es2018/generated-sources/main/java/com/shapesecurity/shift/es2018/ast">Java</a></td>
<td><a href="https://github.com/shapesecurity/shift-ast-js/tree/es2019">JS</a></td>
</tr>
<tr>
<th>Spec Representation</th>
<td><a href="https://github.com/shapesecurity/shift-spec-js/tree/es6">JS</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec-js/tree/es2016">JS</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec-js/tree/es2017">JS</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec-js/tree/es2018">JS</a></td>
<td><a href="https://github.com/shapesecurity/shift-spec-js/tree/es2019">JS</a></td>
</tr>
</tbody>
</table>
</div>
<p>
Note that older versions of the Shift specification and many of the
Shift tools (back to ES5) are available but not listed here.
</p>
</section>
</div>
<hr />
<div class="footer">
<p>© Shape Security, Inc.</p>
</div>
</div>
</body>
</html>