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 plugin for Acorn - a tiny, fast JavaScript parser, written completely in JavaScript.

It was created as an experimental alternative, faster React.js JSX parser. Later, it replaced the official parser and these days is used by many prominent development tools.

Transpiler

Please note that this tool only parses source code to JSX AST, which is useful for various language tools and services. If you want to transpile your code to regular ES5-compliant JavaScript with source map, check out Babel and Buble transpilers which use acorn-jsx under the hood.

Usage

Requiring this module provides you with an Acorn plugin that you can use like this:

var acorn = require("acorn");
var jsx = require("acorn-jsx");
acorn.Parser.extend(jsx()).parse("my(<jsx/>, 'code');");

Note that official spec doesn't support mix of XML namespaces and object-style access in tag names (#27) like in <namespace:Object.Property />, so it was deprecated in acorn-jsx@3.0. If you still want to opt-in to support of such constructions, you can pass the following option:

acorn.Parser.extend(jsx({ allowNamespacedObjects: true }))

Also, since most apps use pure React transformer, a new option was introduced that allows to prohibit namespaces completely:

acorn.Parser.extend(jsx({ allowNamespaces: false }))

Note that by default allowNamespaces is enabled for spec compliancy.

License

This plugin is issued under the MIT license.