https://github.com/rreverser/jsx-transpiler
Parses and compiles JSX code to JavaScript AST or code.
https://github.com/rreverser/jsx-transpiler
Last synced: 3 months ago
JSON representation
Parses and compiles JSX code to JavaScript AST or code.
- Host: GitHub
- URL: https://github.com/rreverser/jsx-transpiler
- Owner: RReverser
- License: mit
- Created: 2014-07-28T20:14:33.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-01-24T22:45:54.000Z (over 11 years ago)
- Last Synced: 2025-09-05T21:10:51.872Z (9 months ago)
- Language: JavaScript
- Size: 326 KB
- Stars: 26
- Watchers: 5
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jsx-transpiler
## Note
This tool is no longer maintained as it was superseded by [6to5 transpiler](http://6to5.org/) which also uses [acorn-jsx](https://github.com/RReverser/acorn-jsx) under the hood and transpiles both ES6 and JSX syntax to ES5.
------------------
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
```
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('Back to top')
(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
```