# jsx-transform

> JSX transpiler. Desugar JSX into JavaScript. A standard and configurable implementation of JSX decoupled from React.

Latest version **2.4.1** (published 2020-02-27) · 0BSD license · 0 weekly downloads

## Install

```sh
npm install jsx-transform
pnpm add jsx-transform
yarn add jsx-transform
bun add jsx-transform
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.1 |
| Published | 2020-02-27 |
| First published | 2014-06-30 |
| Weekly downloads | 0 |
| License | 0BSD |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 23.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 292 |
| Author | Alex Mingoia |
| Maintainers | amingoia, dfcreative, wildlyinaccurate |
| Keywords | jsx, virtual-hyperscript, vtree, virtual-dom, html, mercury, hyperscript |

## Links

- npm: https://www.npmjs.com/package/jsx-transform
- Repository: https://github.com/alexmingoia/jsx-transform
- Issues: https://github.com/alexmingoia/jsx-transform/issues
- npm.io page: https://npm.io/package/jsx-transform

## Dependencies (3)

- [through2](https://npm.io/package/through2.md) ^2.0.0
- [esprima-fb](https://npm.io/package/esprima-fb.md) ^15001.1001.0-dev-harmony-fb
- [jstransform](https://npm.io/package/jstransform.md) ^11.0.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.4.1 (latest) — 2020-02-27
- 2.4.0 — 2018-03-21
- 2.3.0 — 2016-01-26
- 2.2.1 — 2015-06-06
- 2.2.0 — 2015-06-03
- 2.1.2 — 2015-05-27
- 2.1.1 — 2015-05-17
- 2.1.0 — 2015-04-30
- 2.0.0 — 2015-04-27
- 1.2.1 — 2015-04-24
- 1.2.0 — 2015-04-24
- 1.1.0 — 2015-04-24
- 1.0.0 — 2015-04-24
- 0.14.0 — 2015-04-23
- 0.13.0 — 2015-04-19
- … 13 more at https://npm.io/package/jsx-transform/versions

## 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
<a name="module_jsx-transform"></a>
## 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) ⇒ <code>String</code>
  * [~fromFile(path, [options])](#module_jsx-transform..fromFile) ⇒ <code>String</code>
  * [~browserifyTransform([filename], [options])](#module_jsx-transform..browserifyTransform) ⇒ <code>function</code>

<a name="module_jsx-transform..fromString"></a>
### jsx-transform~fromString(str, [options]) ⇒ <code>String</code>
Desugar JSX and return transformed string.

**Kind**: inner method of <code>[jsx-transform](#module_jsx-transform)</code>  

| Param | Type | Description |
| --- | --- | --- |
| str | <code>String</code> |  |
| [options] | <code>Object</code> |  |
| options.factory | <code>String</code> | Factory function name for element creation. |
| [options.spreadFn] | <code>String</code> | Name of function for use with spread attributes (default: Object.assign). |
| [options.unknownTagPattern] | <code>String</code> | 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] | <code>Boolean</code> | 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] | <code>Boolean</code> | Pass unknown tags as string to `options.factory` (default: false). |
| [options.arrayChildren] | <code>Boolean</code> | Pass children as array instead of arguments (default: true). |

**Example**  
```javascript
var jsx = require('jsx-transform');

jsx.fromString('<h1>Hello World</h1>', {
  factory: 'mercury.h'
});
// => 'mercury.h("h1", null, ["Hello World"])'
```
<a name="module_jsx-transform..fromFile"></a>
### jsx-transform~fromFile(path, [options]) ⇒ <code>String</code>
**Kind**: inner method of <code>[jsx-transform](#module_jsx-transform)</code>  

| Param | Type |
| --- | --- |
| path | <code>String</code> | 
| [options] | <code>Object</code> | 

<a name="module_jsx-transform..browserifyTransform"></a>
### jsx-transform~browserifyTransform([filename], [options]) ⇒ <code>function</code>
Make a browserify transform.

**Kind**: inner method of <code>[jsx-transform](#module_jsx-transform)</code>  
**Returns**: <code>function</code> - browserify transform  

| Param | Type | Description |
| --- | --- | --- |
| [filename] | <code>String</code> |  |
| [options] | <code>Object</code> |  |
| [options.extensions] | <code>String</code> | 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

---
_Source: https://npm.io/package/jsx-transform · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._