@ungap/babel-plugin-transform-hinted-jsx
v0.1.0
Published
A JSX transformer with extra hints around interpolations and outer templates
Downloads
13
Maintainers
Readme
@ungap/babel-plugin-transform-hinted-jsx
This plugin is a follow up of this post and it can be used in place of @babel/plugin-transform-react-jsx.
A huge thanks to Nicolò Ribaudo for helping out.
babel.config.json
{
"plugins": [
["@ungap/babel-plugin-transform-hinted-jsx"]
]
}
npm install
npm i --save-dev @babel/cli
npm i --save-dev @babel/core
npm i --save-dev @ungap/plugin-transform-hinted-jsx
What is it / How to use it
This produces a slightly different JSX transform.
const div = (
<div>
<p className="static" runtime={'prop'}/>
{<p />}
</div>
);
// becomes
var _token = {},
_token2 = {};
const div = React.createElement(
"div",
{__token: _token},
React.createElement(
"p",
{
className: "static",
runtime: React.interpolation('prop')
}
),
React.interpolation(
React.createElement(
"p",
{__token: _token2}
)
)
);
How to hint interpolations
/** @jsx your.createElement */
/** @jsxFrag your.Fragment */
/** @jsxInterpolation your.interpolation */