jsx-transform-modern v2.0.3
jsx-transform-modern
This module is a rewrite of jsx-transform using acorn. It aims to be a drop in replacement for the old module, keeping the same API, and taking the tests and documentation from it to ensure compatibility. The rest of this document comes from the original module.
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 for an explanation.
For linting files containing JSX see JSXHint.
Installation
npm install jsx-transform-modernAPI
jsx-transform-modern
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 for an explanation.
For linting files containing JSX see JSXHint.
- jsx-transform-modern
- ~fromString(str, [options]) ⇒ String
- ~fromFile(path, [options]) ⇒ String
- ~browserifyTransform([filename], [options]) ⇒ function
jsx-transform-modern~fromString(str, options) ⇒ String
Desugar JSX and return transformed string.
Kind: inner method of jsx-transform-modern
| Param | Type | Description |
|---|---|---|
| str | String | |
| options | Object | |
| options.factory | String | Factory function name for element creation. |
| options.spreadFn | String | Name of function for use with spread attributes (default: Object.assign). |
| options.unknownTagPattern | String | uses 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 | Boolean | Handle 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 | Boolean | Pass unknown tags as string to options.factory (default: false). |
| options.arrayChildren | Boolean | Pass children as array instead of arguments (default: true). |
| options.ecmaversion | Number | ECMAScript version (default: 8). |
Example
var jsx = require('jsx-transform-modern');
jsx.fromString('<h1>Hello World</h1>', {
factory: 'mercury.h'
});
// => 'mercury.h("h1", null, ["Hello World"])'jsx-transform-modern~fromFile(path, options) ⇒ String
Kind: inner method of jsx-transform-modern
| Param | Type |
|---|---|
| path | String |
| options | Object |
jsx-transform-modern~browserifyTransform(filename, options) ⇒ function
Make a browserify transform.
Kind: inner method of jsx-transform-modern
Returns: function - browserify transform
| Param | Type | Description |
|---|---|---|
| filename | String | |
| options | Object | |
| options.extensions | String | Array of file extensions to run browserify transform on (default: ['.js', '.jsx', '.es', '.es6']). |
Example
var browserify = require('browserify');
var jsxify = require('jsx-transform-modern').browserifyTransform;
browserify()
.transform(jsxify, options)
.bundle()Use .configure(options) to return a configured transform:
var browserify = require('browserify');
var jsxify = require('jsx-transform-modern').browserifyTransform;
browserify({
transforms: [jsxify.configure(options)]
}).bundle()Use in package.json:
"browserify": {
"transform": [
["jsx-transform-modern/browserify", { "factory": "h" }]
]
}