jsx-transpiler

Note

This tool is no longer maintained as it was superseded by 6to5 transpiler which also uses acorn-jsx under the hood and transpiles both ES6 and JSX syntax to ES5.

This is fork of jsx-recast that uses native and fast AST tools:

• acorn-jsx for parsing JSX code to JSX AST.
• estraverse for traversal over AST.
  • estraverse-fb for enabling traversal over JSX nodes and transforming them to JS nodes.
• escodegen for generating JS code and source map from AST.

Purpose

Parses and compiles JSX code to JavaScript AST or code.

For example, this:

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

compiles to this:

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

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

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

As JSX -> JS code with source map transformer

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

As browserify plugin

$ browserify -t jsx-transpiler $file