# babel-plugin-jsx

> Plugin for Babel which generates JSX intermediate representation

Latest version **1.2.0** (published 2015-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-jsx
pnpm add babel-plugin-jsx
yarn add babel-plugin-jsx
bun add babel-plugin-jsx
```

## 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 | 1.2.0 |
| Published | 2015-07-20 |
| First published | 2015-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Arthur Stolyar |
| Maintainers | nekr |
| Keywords | babel, babel-plugin, plugin, jsx, jsx-ir, babel-jsx, jsx-plugin |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-jsx
- Repository: https://github.com/jsx-ir/babel-plugin-jsx
- Issues: https://github.com/jsx-ir/babel-plugin-jsx/issues
- npm.io page: https://npm.io/package/babel-plugin-jsx

## Dependencies (1)

- [esutils](https://npm.io/package/esutils.md) ^2.0.2

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2015-07-20
- 1.1.0 — 2015-07-15
- 1.0.1 — 2015-07-07
- 1.0.0 — 2015-07-06
- 0.0.3 — 2015-06-29
- 0.0.2 — 2015-06-29

## README

[![Build Status](https://travis-ci.org/jsx-ir/babel-plugin-jsx.svg?branch=master)](https://travis-ci.org/jsx-ir/babel-plugin-jsx)

## Babel Plugin for generating JSX-IR

### Overview

This plugin produces [JSX-IR](https://github.com/jsx-ir/spec) output of given JSX source. Main purpose of this plugin is to be used with [```jsx-runtime```](https://github.com/jsx-ir/jsx-runtime) and one or more its [renderers](https://github.com/jsx-ir?utf8=%E2%9C%93&query=jsx-to). But, of course, if could be used separately.

### Installation

```npm install  babel-plugin-jsx```

### Usage

Basic usage look like this:
```js
babel.transform(code, {
  plugins: ['babel-plugin-jsx'],
  blacklist: ['react']
});
```
or any other way described [here](http://babeljs.io/docs/advanced/plugins/#usage).

### Advanced usage (options)

Because Babel does not supports direct providing options for plugins (yet), here are some tricks:

First of all, you need to require "plugin-generator" which will generate for you plugin instance with specified options:
```js
var jsx = require('babel-plugin-jsx/gen');
```

Next you can generate plugin on the fly if you are using ``babel-core`` directly:
```js
var jsx = require('babel-plugin-jsx/gen');
var babel = require('babel-core');

babel.transform(code, {
  plugins: [jsx({
    ... // options goes here
  })],
  blacklist: ['react']
});
```
Or create special file in your package and use it as a module instead:
```js
// my-local-plugin.js
module.exports = require('babel-plugin-jsx/gen')({
  ... // options goes here
});
```
then use it in other place like ``index.js``:
```js
babel.transform(code, {
  plugins: ['./my-local-plugin'],
  blacklist: ['react']
});
```

#### Options and combinations

There is some number of options, first and main option is ```captureScope```:
* ```captureScope``` [boolean] - when enabled plugin looks for current scope to find same variables as JSX source tags. For example, this code ``<div></div>`` will produce ``{ tag: 'div', ... }`` when capture is disabled and ``{ tag: ['div', div], ...}`` when capture is enabled -- plugin captures variable for feature use by runtime.
* ```builtins``` [Array<string>] - only has effect when ``captureScope`` is ``true``. This options allows number of built-ins tags so plugin won't need to look for when in the scope. Usage of this options assumes that _renderer_ knows how to handle listed built-in tags. If this option is provided and used tag is not a _built-in_ and it's not in the current _scope_ when compilation error will be thrown.
* ```throwOnMissing``` [boolean] - only has effect when ``captureScope`` and ``builtins`` options are used simultaneously. By default this is ``true``, setting it to ``false`` means that plugin won't throw compilation error for missed tags, instead it will produce normal _scope output_ and if variable is missing you will get an runtime error.

### Examples

#### Example of input

```xml
<div className="box">
  <List>
    <div className="list-wrap">
      <ListItem index={ index } {... val } />
    </div>
  </List>
</div>
```

### Example of output

```js
({
  tag: "div",
  props: {
    className: "box"
  },
  children: [{
    tag: "List",
    props: null,
    children: [{
      tag: "div",
      props: {
        className: "list-wrap"
      },
      children: [{
        tag: "ListItem",
        props: _extends({
          index: index
        }, val),
        children: null
      }]
    }]
  }]
})
```

### License

[MIT](LICESE.md)

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