Socket
Socket
Sign inDemoInstall

@babel/plugin-transform-react-jsx

Package Overview
Dependencies
83
Maintainers
5
Versions
97
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 7.0.0-beta.49 to 7.0.0-beta.50

12

package.json
{
"name": "@babel/plugin-transform-react-jsx",
"version": "7.0.0-beta.49",
"version": "7.0.0-beta.50",
"description": "Turn JSX into React function calls",

@@ -12,5 +12,5 @@ "repository": "https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx",

"dependencies": {
"@babel/helper-builder-react-jsx": "7.0.0-beta.49",
"@babel/helper-plugin-utils": "7.0.0-beta.49",
"@babel/plugin-syntax-jsx": "7.0.0-beta.49"
"@babel/helper-builder-react-jsx": "7.0.0-beta.50",
"@babel/helper-plugin-utils": "7.0.0-beta.50",
"@babel/plugin-syntax-jsx": "7.0.0-beta.50"
},

@@ -21,5 +21,5 @@ "peerDependencies": {

"devDependencies": {
"@babel/core": "7.0.0-beta.49",
"@babel/helper-plugin-test-runner": "7.0.0-beta.49"
"@babel/core": "7.0.0-beta.50",
"@babel/helper-plugin-test-runner": "7.0.0-beta.50"
}
}

@@ -5,194 +5,16 @@ # @babel/plugin-transform-react-jsx

## Example
See our website [@babel/plugin-transform-react-jsx](https://new.babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html) for more information.
### React
## Install
**In**
Using npm:
```javascript
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
```
**Out**
```javascript
var profile = React.createElement("div", null,
React.createElement("img", { src: "avatar.png", className: "profile" }),
React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);
```
### Custom
**In**
```javascript
/** @jsx dom */
var { dom } = require("deku");
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
```
**Out**
```javascript
/** @jsx dom */
var dom = require("deku").dom;
var profile = dom("div", null,
dom("img", { src: "avatar.png", className: "profile" }),
dom("h3", null, [user.firstName, user.lastName].join(" "))
);
```
### Fragments
Fragments are a feature available in React 16.2.0+.
#### React
**In**
```javascript
var descriptions = items.map(item => (
<>
<dt>{item.name}</dt>
<dd>{item.value}</dd>
</>
));
```
**Out**
```javascript
var descriptions = items.map(item => React.createElement(
React.Fragment,
null,
React.createElement("dt", null, item.name),
React.createElement("dd", null, item.value)
));
```
#### Custom
**In**
```javascript
/** @jsx dom */
/** @jsxFrag DomFrag */
var { dom, DomFrag } = require("deku"); // DomFrag is fictional!
var descriptions = items.map(item => (
<>
<dt>{item.name}</dt>
<dd>{item.value}</dd>
</>
));
```
**Out**
```javascript
/** @jsx dom */
/** @jsxFrag DomFrag */
var { dom, DomFrag } = require("deku"); // DomFrag is fictional!
var descriptions = items.map(item => dom(
DomFrag,
null,
dom("dt", null, item.name),
dom("dd", null, item.value)
));
```
Note that if a custom pragma is specified, then a custom fragment pragma must also be specified if the `<></>` is used. Otherwise, an error will be thrown.
## Installation
```sh
npm install --save-dev @babel/plugin-transform-react-jsx
npm install --save @babel/plugin-transform-react-jsx
```
## Usage
or using yarn:
### Via `.babelrc` (Recommended)
**.babelrc**
Without options:
```json
{
"plugins": ["@babel/plugin-transform-react-jsx"]
}
```
With options:
```json
{
"plugins": [
["@babel/plugin-transform-react-jsx", {
"pragma": "dom", // default pragma is React.createElement
"pragmaFrag": "DomFrag", // default is React.Fragment
"throwIfNamespace": false // defaults to true
}]
]
}
```
### Via CLI
```sh
babel --plugins @babel/plugin-transform-react-jsx script.js
yarn add --save @babel/plugin-transform-react-jsx
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-react-jsx"]
});
```
## Options
### `pragma`
`string`, defaults to `React.createElement`.
Replace the function used when compiling JSX expressions.
Note that the `@jsx React.DOM` pragma has been deprecated as of React v0.12
### `pragmaFrag`
`string`, defaults to `React.Fragment`.
Replace the component used when compiling JSX fragments.
### `useBuiltIns`
`boolean`, defaults to `false`.
When spreading props, use `Object.assign` directly instead of Babel's extend helper.
### `throwIfNamespace`
`boolean`, defaults to `true`.
Toggles whether or not to throw an error if a XML namespaced tag name is used. For example:
<f:image />
Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc