Socket
Socket
Sign inDemoInstall

@babel/plugin-transform-react-jsx

Package Overview
Dependencies
Maintainers
4
Versions
99
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@babel/plugin-transform-react-jsx - npm Package Compare versions

Comparing version 7.0.0-beta.5 to 7.0.0-beta.31

69

lib/index.js

@@ -14,5 +14,18 @@ "use strict";

var t = _ref.types;
var pragma = options.pragma || "React.createElement";
var throwIfNamespace = options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
var THROW_IF_NAMESPACE = options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
var PRAGMA_DEFAULT = options.pragma || "React.createElement";
var PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
var JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
var JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
var createIdentifierParser = function createIdentifierParser(id) {
return function () {
return id.split(".").map(function (name) {
return t.identifier(name);
}).reduce(function (object, property) {
return t.memberExpression(object, property);
});
};
};
var visitor = (0, _helperBuilderReactJsx.default)({

@@ -32,27 +45,41 @@ pre: function pre(state) {

},
throwIfNamespace: throwIfNamespace
throwIfNamespace: THROW_IF_NAMESPACE
});
visitor.Program = {
enter: function enter(path, state) {
var file = state.file;
var pragma = PRAGMA_DEFAULT;
var pragmaFrag = PRAGMA_FRAG_DEFAULT;
var pragmaSet = !!options.pragma;
var pragmaFragSet = !!options.pragmaFrag;
var _arr = file.ast.comments;
visitor.Program = function (path, state) {
var file = state.file;
var id = pragma;
var _arr = file.ast.comments;
for (var _i = 0; _i < _arr.length; _i++) {
var comment = _arr[_i];
var jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
for (var _i = 0; _i < _arr.length; _i++) {
var comment = _arr[_i];
var matches = JSX_ANNOTATION_REGEX.exec(comment.value);
if (jsxMatches) {
pragma = jsxMatches[1];
pragmaSet = true;
}
if (matches) {
id = matches[1];
break;
var jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
if (jsxFragMatches) {
pragmaFrag = jsxFragMatches[1];
pragmaFragSet = true;
}
}
state.set("jsxIdentifier", createIdentifierParser(pragma));
state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
state.set("usedFragment", false);
state.set("pragmaSet", pragmaSet);
state.set("pragmaFragSet", pragmaFragSet);
},
exit: function exit(path, state) {
if (state.get("pragmaSet") && state.get("usedFragment") && !state.get("pragmaFragSet")) {
throw new Error("transform-react-jsx: pragma has been set but " + "pragmafrag has not been set");
}
}
state.set("jsxIdentifier", function () {
return id.split(".").map(function (name) {
return t.identifier(name);
}).reduce(function (object, property) {
return t.memberExpression(object, property);
});
});
};

@@ -59,0 +86,0 @@

11

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

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

"dependencies": {
"@babel/helper-builder-react-jsx": "7.0.0-beta.5",
"@babel/plugin-syntax-jsx": "7.0.0-beta.5"
"@babel/helper-builder-react-jsx": "7.0.0-beta.31",
"@babel/plugin-syntax-jsx": "7.0.0-beta.31"
},
"peerDependencies": {
"@babel/core": ">=7.0.0-beta.4 <7.0.0-rc.0"
"@babel/core": "7.0.0-beta.31"
},
"devDependencies": {
"@babel/helper-plugin-test-runner": "7.0.0-beta.5"
"@babel/core": "7.0.0-beta.31",
"@babel/helper-plugin-test-runner": "7.0.0-beta.31"
}
}

73

README.md

@@ -49,3 +49,3 @@ # @babel/plugin-transform-react-jsx

var profile = dom( "div", null,
var profile = dom("div", null,
dom("img", { src: "avatar.png", className: "profile" }),

@@ -56,2 +56,66 @@ 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

@@ -84,2 +148,3 @@

"pragma": "dom", // default pragma is React.createElement
"pragmaFrag": "DomFrag", // default is React.Fragment
"throwIfNamespace": false // defaults to true

@@ -115,2 +180,8 @@ }]

### `pragmaFrag`
`string`, defaults to `React.Fragment`.
Replace the component used when compiling JSX fragments.
### `useBuiltIns`

@@ -117,0 +188,0 @@

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc