https://github.com/alexmingoia/jsx-transform

JSX transpiler. A standard and configurable implementation of JSX decoupled from React.
https://github.com/alexmingoia/jsx-transform

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/alexmingoia/jsx-transform
• Owner: alexmingoia
• Created: 2014-06-27T09:49:20.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2020-02-27T17:18:19.000Z (over 4 years ago)
• Last Synced: 2024-07-27T23:28:00.290Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 101 KB
• Stars: 293
• Watchers: 10
• Forks: 28
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# jsx-transform [![Build Status](http://img.shields.io/travis/alexmingoia/jsx-transform.svg?style=flat)](http://travis-ci.org/alexmingoia/jsx-transform) [![NPM version](http://img.shields.io/npm/v/jsx-transform.svg?style=flat)](https://npmjs.org/package/jsx-transform) [![Dependency Status](http://img.shields.io/david/alexmingoia/jsx-transform.svg?style=flat)](http://david-dm.org/alexmingoia/jsx-transform)

> JSX transpiler. Desugar JSX into JavaScript.

This module aims to be a standard and configurable implementation of JSX

decoupled from [React](https://github.com/facebook/react) for use with

[Mercury](https://github.com/Raynos/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](https://github.com/STRML/JSXHint).

## Installation

```sh

npm install jsx-transform

```

## API



## jsx-transform

This module aims to be a standard and configurable implementation of JSX

decoupled from [React](https://github.com/facebook/react) for use with

[Mercury](https://github.com/Raynos/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](https://github.com/STRML/JSXHint).

* [jsx-transform](#module_jsx-transform)

  * [~fromString(str, [options])](#module_jsx-transform..fromString) ⇒ String

  * [~fromFile(path, [options])](#module_jsx-transform..fromFile) ⇒ String

  * [~browserifyTransform([filename], [options])](#module_jsx-transform..browserifyTransform) ⇒ function



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

Desugar JSX and return transformed string.

**Kind**: inner method of [jsx-transform](#module_jsx-transform)  

| 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). |

**Example**  

```javascript

var jsx = require('jsx-transform');

jsx.fromString('
Hello World
', {

  factory: 'mercury.h'

});

// => 'mercury.h("h1", null, ["Hello World"])'

```



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

**Kind**: inner method of [jsx-transform](#module_jsx-transform)  


| Param | Type |

| --- | --- |

| path | String | 

| [options] | Object | 



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

Make a browserify transform.

**Kind**: inner method of [jsx-transform](#module_jsx-transform)  

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

```javascript

var browserify = require('browserify');

var jsxify = require('jsx-transform').browserifyTransform;

browserify()

  .transform(jsxify, options)

  .bundle()

```

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

```javascript

var browserify = require('browserify');

var jsxify = require('jsx-transform').browserifyTransform;

browserify({

  transforms: [jsxify.configure(options)]

}).bundle()

```

Use in `package.json`:

```json

"browserify": {

  "transform": [

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

  ]

}

```

## BSD Licensed

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