Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
babel-plugin-transform-jsx-flexible
Advanced tools
Babel plugin to allow multiple JSX handlers in the same file.
Turn JSX into arbitrary function calls
This is a drop-in replacement for
babel-plugin-transform-react-jsx
,
with the additional feature that multiple JSX handler functions can be used in
the same file. The plugin passes all tests for the transform-react-jsx
plugin (included in this repo).
Changing the JSX handler within a file is accomplished by enclosing a JSX block
within a special tag that is defined in the plugin's configuration (see the
tags
option below).
npm install --save-dev babel-plugin-transform-react-jsx
.babelrc
(Recommended).babelrc
Without options (no different from transform-react-jsx
):
{
"plugins": ["transform-jsx-flexible"]
}
With options:
{
"plugins": [
["transform-jsx-flexible", {
"tags": {
"CustomTag1": "createElement_CustomTag1",
"CustomTag2": "createElement_CustomTag2"
}
}]
]
}
Code In
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
var somethingElse = <CustomTag1>
<div />
</CustomTag1>;
Code Out
var profile = React.createElement("div", null,
React.createElement("img", { src: "avatar.png", className: "profile" }),
React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);
var somethingElse = createElement_CustomTag1(CustomTag1, null,
createElement_CustomTag1("div", null)
);
pragma
Inherited from babel-plugin-transform-react-jsx
.
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
useBuiltIns
Inherited from babel-plugin-transform-react-jsx
.
boolean
, defaults to false
.
When spreading props, use Object.assign
directly instead of Babel's extend helper.
tags
An object that maps custom JSX tag names (the keys) to custom functions (the values) that should be used to render any JSX element enclosed inside the given custom tag name.
For example:
"plugins": [
"transform-jsx-flexible",
{
"tags": {
"CustomTag1": "createElement_CustomTag1",
"CustomTag2": "createElement_CustomTag2"
}
}
]
Using this configuration, any CustomTag1
element and any JSX elements
enclosed inside of it will be created using the function
createElement_CustomTag1()
in the transpiled JS code, instead of
React.createElement
(or the current default JSX function).
The same goes for CustomTag2
and createElement_CustomTag2
. Also, JSX
handlers can be changed within the same block by nesting these custom tags
together.
FAQs
Babel plugin to allow multiple JSX handlers in the same file.
The npm package babel-plugin-transform-jsx-flexible receives a total of 3 weekly downloads. As such, babel-plugin-transform-jsx-flexible popularity was classified as not popular.
We found that babel-plugin-transform-jsx-flexible demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.