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-modern

API

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" }]
  ]
}

BSD Licensed