acorn-jsx

What is acorn-jsx?

The acorn-jsx npm package is a plugin for the Acorn JavaScript parser that allows it to parse JSX syntax. JSX is a syntax extension for JavaScript commonly used with React to describe what the UI should look like. By using acorn-jsx, developers can extend the Acorn parser to handle JSX elements as part of the JavaScript code, enabling the development of tools like linters, code formatters, and compilers that work with JSX.

What are acorn-jsx's main functionalities?

JSX Parsing

This feature allows the parsing of JSX syntax by extending the Acorn parser. The code sample demonstrates how to create a new parser instance that can parse a string containing JSX code and output the abstract syntax tree (AST).

const acorn = require('acorn');
const jsx = require('acorn-jsx');
const JSXParser = acorn.Parser.extend(jsx());
const code = `<div>Hello, world!</div>`;
const ast = JSXParser.parse(code, {ecmaVersion: 2020});
console.log(ast);

Other packages similar to acorn-jsx

espree

Espree is an actively maintained ECMAScript parser built on top of Acorn by the ESLint team. It is designed to be compatible with Esprima and is used primarily for the ESLint project. Espree supports JSX out of the box and is a good alternative to acorn-jsx for projects that require compatibility with ESLint's use cases.

esprima

Esprima is a high performance, standard-compliant ECMAScript parser that also supports JSX. It is often used for static analysis tools and source code transformation. While Esprima and acorn-jsx both support JSX, Esprima is a standalone parser, whereas acorn-jsx is a plugin that extends Acorn.

README

Acorn-JSX

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

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-JSX is 2x faster than official Esprima-based parser when location tracking is turned on in both (call it "source maps enabled mode"). At the same time, it consumes all the ES6+JSX syntax that can be consumed by Esprima-FB (this is proved by official tests).

However, Esprima-FB is maintained by authors of React.js itself, so it's recommended to be used in production code.

Transpiler

Please note that this tool only parses source code to JSX AST. If you want to convert result to JS AST or directly to JS code and source map, check out jsx-transpiler.

Installation

The easiest way to install acorn is with npm.

npm install acorn-jsx

Alternately, download the source.

git clone https://github.com/RReverser/acorn-jsx.git

Components

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.

acorn.js

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 new syntax features. Default is 5.

• 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 code.

• 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.

• onToken: If a function is passed for this option, each found token will be passed in same format as tokenize() returns.

  If array is passed, each found token is pushed to it.

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

• 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 parameters.

  If array is passed for this option, each found comment is pushed to it as object in Esprima format:

  {
    "type": "Line" | "Block",
    "value": "comment text",
    "range": ...,
    "loc": ...
  }
  

  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 source 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 choose.

• directSourceFile: Like sourceFile, but a sourceFile property will be added directly to the nodes, rather than the 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 loc property when the locations option is enabled and range property when the ranges option is enabled).

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

Note on using with Escodegen

Escodegen supports generating comments from AST, attached in Esprima-specific format. In order to simulate same format in Acorn, consider following example:

var comments = [], tokens = [];

var ast = acorn.parse('var x = 42; // answer', {
	// collect ranges for each node
	ranges: true,
	// collect comments in Esprima's format
	onComment: comments,
	// collect token ranges
	onToken: tokens
});

// attach comments using collected information
escodegen.attachComments(ast, comments, tokens);

// generate code
console.log(escodegen.generate(ast, {comment: true}));
// > 'var x = 42;    // answer'

acorn_loose.js

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

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 tokenizer.

util/walk.js

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 options:

• --ecma3|--ecma5|--ecma6: 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.