JSX transpiler. Desugar JSX into JavaScript.
This module aims to be a standard and configurable implementation of JSX decoupled from React.
For linting files containing JSX see JSXHint.
npm install jsx-transform
This JSX:
/** @jsx h */
var h = require('virtual-hyperscript');
var profile = <div>
<img src="avatar.png" class="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
is transformed into this JavaScript:
var h = require('virtual-hyperscript');
var profile = h('div', null, [
h('img', { src: "avatar.png", class: "profile" }),
h('h3', null, [[user.firstName, user.lastName].join(' ')])
]);
JSX is a JavaScript XML syntax.
Known tag names are passed as arguments to the ident specified by the @jsx
docblock:
<div class="blue"></div>
=> virtualdom.h('div', { class: 'blue' })
Unknown tags are assumed to be function names in scope:
<FrontPage class="blue"></FrontPage>
=> FrontPage({ class: 'blue' })
Only files with the /** @jsx DOM */
docblock will be parsed unless
options.ignoreDocblock
is set. The constructor name is taken from the @jsx
definition.
/** @jsx React.createElement */
<div>Hello World</div>
is desugared to
React.createElement("div", null, ["Hello World"]);
Use JavaScript expressions as attribute values by wrapping the expression in a pair of curly braces ({}) instead of quotes (""):
<Profile class={state.isLoggedIn ? 'loggedIn' : 'loggedOut'}></Profile>
Profile({ class: state.isLoggedIn ? 'loggedIn' : 'loggedOut' });
Expressions can also express children:
<Profile>{ state.isLoggedIn ? <Settings /> : <CreateAccount /> }</Profile>
Profile(null, [state.isLoggedIn ? Settings(null) : CreateAccount(null)]);
Desugar JSX and return transformed string.
Desugar JSX in file and return transformed string.
ignoreDocblock
Parse files without docblock. If true,options.jsx
must also be set (default: false).tagMethods
Use tag as method instead of argument (default: false). If true,DOM.h1()
instead ofDOM('h1')
.jsx
name of virtual DOM node constructor (default: set by docblock).tags
array of known tags (default: exports.tags). It can be cleared by setting it to an empty array ([]
).renameAttrs
dictionary of attribute names and their replacements. For example,{'class': 'className'}
will replace allclass
attributes withclassName
. This is useful for writing more HTML-like JSX.