1. acorn-jsx
Modern, fast React.js JSX parser
acorn-jsx
Package: acorn-jsx
Created by: acornjs
Last modified: Thu, 22 Jun 2023 16:31:22 GMT
Version: 5.3.2
License: MIT
Downloads: 133,341,253
Repository: https://github.com/acornjs/acorn-jsx

Install

npm install acorn-jsx
yarn add acorn-jsx

Acorn-JSX

Build Status
NPM version

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 [email protected]. 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.

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin