in JavaScript AST React JSX Parsing ~ read.

Alternative, faster React.js JSX parser

View on GitHub

This is modification of Acorn - a tiny, fast JavaScript parser, written completely in JavaScript.

UPD (June 12, 2015): Facebook deprecates own parsing and transformation tools in favor of Acorn, Acorn-JSX and Babel. Looks like I'll need to be more careful about updates starting from now 😜

It was forked to create experimental, alternative, faster React.js JSX parser by integrating pieces
of code from official parser, modified to match Acorn's parsing logic.

According to benchmarks, Acorn is 5x faster than Esprima
when parsing code with location tracking (call it "source maps enabled mode"), and JSX extensions almost don't
affect those numbers. However, esprima-fb is forked&maintained from
harmony branch of esprima which is being heavily optimized and currently acorn-jsx is only 1.5-2x faster than

Currently, it consumes all the ES5+JSX syntax that can be consumed by official Esprima-based parser.
However, official parser can consume ES6 syntax as well, and is maintained by authors of React.js itself, so it's
preferred to be used in real projects.


The easiest way to install acorn is with npm.

npm install acorn-jsx

Alternately, download the source.

git clone


When run in a CommonJS (node.js) or AMD environment, exported values
appear in the interfaces exposed by the individual files, as usual.
When loaded in the browser (Acorn works in any JS-enabled browser more
recent than IE5) without any kind of module management, a single
global object acorn will be defined, and all the exported properties
will be added to that.


This file contains the actual parser (and is what you get when you
require("acorn") in node.js).

parse(input, options) is used to parse a JavaScript program.
The input parameter is a string, options can be undefined or an
object setting some of the options listed below. The return value will
be an abstract syntax tree object as specified by the
Mozilla Parser API.

When encountering a syntax error, the parser will raise a
SyntaxError object with a meaningful message. The error object will
have a pos property that indicates the character offset at which the
error occurred, and a loc object that contains a {line, column}
object referring to that same position.

  • ecmaVersion: Indicates the ECMAScript version to parse. Must be
    either 3, 5, or 6. This influences support for strict mode, the set
    of reserved words, and support for getters and setter. Default is 5.
    ES6 is only partially supported.

  • strictSemicolons: If true, prevents the parser from doing
    automatic semicolon insertion, and statements that do not end with
    a semicolon will generate an error. Defaults to false.

  • allowTrailingCommas: If false, the parser will not allow
    trailing commas in array and object literals. Default is true.

  • forbidReserved: If true, using a reserved word will generate
    an error. Defaults to false. When given the value "everywhere",
    reserved words and keywords can also not be used as property names
    (as in Internet Explorer's old parser).

  • allowReturnOutsideFunction: By default, a return statement at
    the top level raises an error. Set this to true to accept such

  • locations: When true, each node has a loc object attached
    with start and end subobjects, each of which contains the
    one-based line and zero-based column numbers in {line, column}
    form. Default is false.

  • onComment: If a function is passed for this option, whenever a
    comment is encountered the function will be called with the
    following parameters:

    • block: true if the comment is a block comment, false if it
      is a line comment.
    • text: The content of the comment.
    • start: Character offset of the start of the comment.
    • end: Character offset of the end of the comment.

    When the locations options is on, the {line, column} locations
    of the comment’s start and end are passed as two additional

    Note that you are not allowed to call the parser from the
    callback—that will corrupt its internal state.

  • ranges: Nodes have their start and end characters offsets
    recorded in start and end properties (directly on the node,
    rather than the loc object, which holds line/column data. To also
    add a semi-standardized "range" property holding a
    [start, end] array with the same numbers, set the ranges option
    to true.

  • program: It is possible to parse multiple files into a single
    AST by passing the tree produced by parsing the first file as the
    program option in subsequent parses. This will add the toplevel
    forms of the parsed file to the "Program" (top) node of an existing
    parse tree.

  • sourceFile: When the locations option is true, you can pass
    this option to add a sourceFile attribute in every node’s loc
    object. Note that the contents of this option are not examined or
    processed in any way; you are free to use whatever format you

  • directSourceFile: Like sourceFile, but the property will be
    added directly to the nodes, rather than to a loc object.

getLineInfo(input, offset) can be used to get a {line, column} object for a given program string and character offset.

tokenize(input, options) exports a primitive interface to
Acorn's tokenizer. The function takes an input string and options
similar to parse (though only some options are meaningful here), and
returns a function that can be called repeatedly to read a single
token, and returns a {start, end, type, value} object (with added
startLoc and endLoc properties when the locations option is
enabled). This object will be reused (updated) for each token, so you
can't count on it staying stable.

tokTypes holds an object mapping names to the token type objects
that end up in the type properties of tokens.


This file implements an error-tolerant parser. It exposes a single

parse_dammit(input, options) takes the same arguments and
returns the same syntax tree as the parse function in acorn.js,
but never raises an error, and will do its best to parse syntactically
invalid code in as meaningful a way as it can. It'll insert identifier
nodes with name "✖" as placeholders in places where it can't make
sense of the input. Depends on acorn.js, because it uses the same


Implements an abstract syntax tree walker. Will store its interface in
acorn.walk when used without a module system.

simple(node, visitors, base, state) does a 'simple' walk over
a tree. node should be the AST node to walk, and visitors an
object with properties whose names correspond to node types in the
Mozilla Parser API. The properties should contain functions
that will be called with the node object and, if applicable the state
at that point. The last two arguments are optional. base is a walker
algorithm, and state is a start state. The default walker will
simply visit all statements and expressions and not produce a
meaningful state. (An example of a use of state it to track scope at
each point in the tree.)

ancestor(node, visitors, base, state) does a 'simple' walk over
a tree, building up an array of ancestor nodes (including the current node)
and passing the array to callbacks in the state parameter.

recursive(node, state, functions, base) does a 'recursive'
walk, where the walker functions are responsible for continuing the
walk on the child nodes of their target node. state is the start
state, and functions should contain an object that maps node types
to walker functions. Such functions are called with (node, state, c)
arguments, and can cause the walk to continue on a sub-node by calling
the c argument on it with (node, state) arguments. The optional
base argument provides the fallback walker functions for node types
that aren't handled in the functions object. If not given, the
default walkers will be used.

make(functions, base) builds a new walker object by using the
walker functions in functions and filling in the missing ones by
taking defaults from base.

findNodeAt(node, start, end, test, base, state) tries to
locate a node in a tree at the given start and/or end offsets, which
satisfies the predicate test. start end end can be either null
(as wildcard) or a number. test may be a string (indicating a node
type) or a function that takes (nodeType, node) arguments and
returns a boolean indicating whether this node is interesting. base
and state are optional, and can be used to specify a custom walker.
Nodes are tested from inner to outer, so if two nodes match the
boundaries, the inner one will be preferred.

findNodeAround(node, pos, test, base, state) is a lot like
findNodeAt, but will match any node that exists 'around' (spanning)
the given position.

findNodeAfter(node, pos, test, base, state) is similar to
findNodeAround, but will match all nodes after the given position
(testing outer nodes before inner nodes).

Command line interface

The bin/acorn utility can be used to parse a file from the command
line. It accepts as arguments its input file and the following

  • --ecma3|--ecma5: Sets the ECMAScript version to parse. Default is
    version 5.

  • --strictSemicolons: Prevents the parser from doing automatic
    semicolon insertion. Statements that do not end in semicolons will
    generate an error.

  • --locations: Attaches a "loc" object to each node with "start" and
    "end" subobjects, each of which contains the one-based line and
    zero-based column numbers in {line, column} form.

  • --compact: No whitespace is used in the AST output.

  • --silent: Do not output the AST, just return the exit status.

  • --help: Print the usage information and quit.

The utility spits out the syntax tree as JSON data.