Recommended
More Related Content
What's hot
What's hot (20)
Similar to Esprima - What is that
Similar to Esprima - What is that (20)
Recently uploaded
Recently uploaded (20)
Esprima - What is that
- 1. Esprima – What is that ? https://github.com/ariya/esprima http://esprima.org
- 2. What is Esprima Esprima is an ECMAScript parser written in ECMAScript (Javascript) Esprima produces a source tree of your JavaScript code (in json format), which in turn can be traversed to analyze the code for various aspects. Also static code analysis can be applied to give an insight to the code. It can help to determine meta information about the Javascript code. Full support for ECMAScript 5.1 - Any Javascript code written in EcmaScript 5.1 or below can be parsed throgh current version of Esprima(v1.0.4).
- 3. Availabilty Esprima is available: ✔ on Browser ✔ as a node package ✔ through module loader(RequireJS) ✔ as Bower component ✔ with Yeoman
- 4. Usage esprima.parse(code, options); This produces a sytax tree format that is compatible with Parser API of SpiderMonkey (Mozilla). Options parameter can be provided to generate the detailed syntax tree. esprima.tokenize(code, options); This produces an array of tokens used in JavaScript Program
- 5. Usage (parameters) code is the actual JavaScript code as string. options parameter can have following: loc - when true, nodes have line and column-based location info range - when true, nodes have an index-based location range (array) raw – when true, literals have extra property to store the verbatim source tokens – when true, an extra array is provided containing all found tokens comment – when true, an extra array is provided containing all line and block comments tolerant - when true, an extra array containing all errors found, attempts to continue parsing when an error is encountered All are set to false by default.
- 6. Example esprima.parse('var answer = 42;'); Outputs: { } "type": "Program", "body": [{ "type": "VariableDeclaration", "kind": "var", "declarations": [{ "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "answer" }, "init": { "type": "Literal", "value": 42, "raw": "42" } }] }]
- 7. How can it help ● Check for general bad practices – – – ● Identify Double Negatives - component.setHidden(false); Identify declared, but not called functions; Identify code/comment ratio Tool to create utilities as: – – – Syntax validator Code Autocomplete Function Instrumentation
- 9. escodegen https://github.com/Constellation/escodegen escodegen generates the ecmascript code from Abstract Source Tree (the source tree generated from Esprima) escodegen.generate({ type: 'BinaryExpression', operator: '+', left: { type: 'Literal', value: 40 }, right: { type: 'Literal', value: 2 } }); produces the string '40 + 2'
- 10. Similar things ● acorn.js http://marijnhaverbeke.nl/acorn/ ● Traceur-compiler https://github.com/google/traceur-compiler Traceur is a JavaScript.next-to-JavaScript-of-today compiler ● ZeParser https://github.com/qfox/ZeParser ● Narcissus https://github.com/mozilla/narcissus ● UglifyJS 2 https://github.com/mishoo/UglifyJS2
- 11. References ● Esprima - http://esprima.org ● Presentation by Ariya Hidayat http://www.youtube.com/watch?v=ACYZFkvq0Sk ● Parser API by Mozilla https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API