Skip to content
vic

alexmingoia/jsx-transform

JSX transpiler. A standard and configurable implementation of JSX decoupled from React.

alexmingoia/jsx-transform.json
{
"createdAt": "2014-06-27T09:49:20Z",
"defaultBranch": "master",
"description": "JSX transpiler. A standard and configurable implementation of JSX decoupled from React.",
"fullName": "alexmingoia/jsx-transform",
"homepage": "",
"language": "JavaScript",
"name": "jsx-transform",
"pushedAt": "2020-02-27T17:18:19Z",
"stargazersCount": 293,
"topics": [],
"updatedAt": "2025-08-27T13:31:41Z",
"url": "https://github.com/alexmingoia/jsx-transform"
}

JSX transpiler. Desugar JSX into JavaScript.

This module aims to be a standard and configurable implementation of JSX decoupled from React for use with Mercury or other modules.

JSX is a JavaScript syntax for composing virtual DOM elements. See React’s [documentation][0] for an explanation.

For linting files containing JSX see JSXHint.

Terminal window
npm install jsx-transform

This module aims to be a standard and configurable implementation of JSX decoupled from React for use with Mercury or other modules.

JSX is a JavaScript syntax for composing virtual DOM elements. See React’s [documentation][0] for an explanation.

For linting files containing JSX see JSXHint.

jsx-transform~fromString(str, [options]) ⇒ String

Section titled “jsx-transform~fromString(str, [options]) ⇒ String”

Desugar JSX and return transformed string.

Kind: inner method of jsx-transform

ParamTypeDescription
strString
[options]Object
options.factoryStringFactory function name for element creation.
[options.spreadFn]StringName of function for use with spread attributes (default: Object.assign).
[options.unknownTagPattern]Stringuses given pattern for unknown tags where {tag} is replaced by the tag name. Useful for rending mercury components as Component.render() instead of Component().
[options.passUnknownTagsToFactory]BooleanHandle unknown tags like known tags, and pass them as an object to options.factory. If true, createElement(Component) instead of Component() (default: false).
[options.unknownTagsAsString]BooleanPass unknown tags as string to options.factory (default: false).
[options.arrayChildren]BooleanPass children as array instead of arguments (default: true).

Example

var jsx = require('jsx-transform');
jsx.fromString('<h1>Hello World</h1>', {
factory: 'mercury.h'
});
// => 'mercury.h("h1", null, ["Hello World"])'

jsx-transform~fromFile(path, [options]) ⇒ String

Section titled “jsx-transform~fromFile(path, [options]) ⇒ String”

Kind: inner method of jsx-transform

ParamType
pathString
[options]Object

jsx-transform~browserifyTransform([filename], [options]) ⇒ function

Section titled “jsx-transform~browserifyTransform([filename], [options]) ⇒ function”

Make a browserify transform.

Kind: inner method of jsx-transform
Returns: function - browserify transform

ParamTypeDescription
[filename]String
[options]Object
[options.extensions]StringArray of file extensions to run browserify transform on (default: ['.js', '.jsx', '.es', '.es6']).

Example

var browserify = require('browserify');
var jsxify = require('jsx-transform').browserifyTransform;
browserify()
.transform(jsxify, options)
.bundle()

Use .configure(options) to return a configured transform:

var browserify = require('browserify');
var jsxify = require('jsx-transform').browserifyTransform;
browserify({
transforms: [jsxify.configure(options)]
}).bundle()

Use in package.json:

"browserify": {
"transform": [
["jsx-transform/browserify", { "factory": "h" }]
]
}

[0] !: https://facebook.github.io/react/docs/jsx-in-depth.html