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

Readme

Source

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.

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

UPDATE [14-Apr-2015]: Facebook implementation started deprecation process in favor of Acorn + Acorn-JSX + Babel for parsing and transpiling JSX syntax.

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 the babel transpiler which uses acorn-jsx under the hood.

Usage

You can use module directly in order to get Acorn instance with plugin installed:

var acorn = require('acorn-jsx');

Or you can use inject.js for injecting plugin into your own version of Acorn like following:

var acorn = require('acorn-jsx/inject')(require('./custom-acorn'));

Then, use plugins option whenever you need to support JSX while parsing:

var ast = acorn.parse(code, {
  plugins: { jsx: true }
});

License

This plugin is issued under the MIT license.

FAQs

What is acorn-jsx?

Is acorn-jsx popular?

Is acorn-jsx well maintained?

Last updated on 30 Apr 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install