# jsx-transpiler

> Parses and compiles JSX code to JavaScript AST or code.

Latest version **0.1.4** (published 2014-09-17) · 0 weekly downloads

## Install

```sh
npm install jsx-transpiler
pnpm add jsx-transpiler
yarn add jsx-transpiler
bun add jsx-transpiler
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2014-09-17 |
| First published | 2014-07-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Ingvar Stepanyan |
| Maintainers | rreverser |
| Keywords | react, jsx, parse, compile, transform, transpile, ast, javascript |

## Links

- npm: https://www.npmjs.com/package/jsx-transpiler
- Repository: https://github.com/RReverser/jsx-transpiler
- Issues: https://github.com/RReverser/jsx-transpiler/issues
- npm.io page: https://npm.io/package/jsx-transpiler

## Dependencies (6)

- [esutils](https://npm.io/package/esutils.md) ^1.1.4
- [through](https://npm.io/package/through.md) ^2.3
- [acorn-jsx](https://npm.io/package/acorn-jsx.md) ~0.6.1-3
- [ast-types](https://npm.io/package/ast-types.md) ^0.3.29
- [escodegen](https://npm.io/package/escodegen.md) ^1.3.3
- [estraverse-fb](https://npm.io/package/estraverse-fb.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2014-09-17
- 0.1.2 — 2014-07-29

## README

# jsx-transpiler

This is fork of [jsx-recast](https://github.com/vslinko/jsx-recast) that uses native and fast AST tools:

* [acorn-jsx](https://github.com/RReverser/acorn-jsx) for parsing JSX code to JSX AST.
* [estraverse](https://github.com/Constellation/estraverse) for traversal over AST.
	* [estraverse-fb](https://github.com/RReverser/estraverse-fb) for enabling traversal over JSX nodes and transforming them to JS nodes.
* [escodegen](https://github.com/Constellation/estraverse) for generating JS code and source map from AST.

## Purpose

Parses and compiles JSX code to JavaScript AST or code.

For example, this:

```html
<X prop={false}><Y /></X>
```

compiles to this:

```js
X({prop: false}, Y(null));
```

## Benefits

1. Attaches comments to AST in `esprima`/`escodegen`/etc.-compatible way (extra `leadingComments` + `trailingComments` properties) when `attachComment` option is set (feature of `esprima@1.2`).
2. When comments are enabled, uses them for parsing and applying `/** @jsx CustomDOM */` annotation.
3. Stores original locations in transformed nodes so source maps work for JSX elements, attributes etc.

## Installation

```
$ npm install jsx-transpiler
```

## Usage

### As JSX -> JS AST transformer

```js
jsx.parse('...jsx code...', {
	// ... any Acorn options ...,
	attachComment: true // additional option for comments
});
```

```js
$ node
> var jsxAst = jsx.parse('<a href="#">Back to top</a>')
(JSX AST)
> jsx.transform(jsxAst)
(JS AST)
```

### As JSX -> JS code with source map transformer

```js
$ node
> var jsx = require('jsx-transpiler')
> jsx.compile(jsxCode)
{ "code": ..., "map": ... }
```

### As [browserify](http://browserify.org) plugin

```
$ browserify -t jsx-transpiler $file
```

---
_Source: https://npm.io/package/jsx-transpiler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._