@babel/plugin-transform-react-jsx-source
Advanced tools
Adds source file and line number to JSX elements.
In
<sometag />
Out
<sometag __source={ { fileName: 'this/file.js', lineNumber: 10 } } />
npm install --save-dev @babel/plugin-transform-react-jsx-source
.babelrc (Recommended).babelrc
{
"plugins": ["@babel/plugin-transform-react-jsx-source"]
}
babel --plugins @babel/plugin-transform-react-jsx-source script.js
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-react-jsx-source"]
});
Similar to @babel/plugin-transform-react-jsx-source, this plugin transforms JSX into createElement calls but does not add source and line number information. It's more focused on the transformation itself rather than enhancing the debugging experience.
While not a direct alternative, react-hot-loader provides hot reloading for React components during development. It enhances the development experience by allowing live updates without losing state. It complements the functionality of @babel/plugin-transform-react-jsx-source by improving the overall development workflow rather than focusing solely on debugging.
FAQs
Add a __source prop to all JSX Elements
The npm package @babel/plugin-transform-react-jsx-source receives a total of 11,702,417 weekly downloads. As such, @babel/plugin-transform-react-jsx-source popularity was classified as popular.
We found that @babel/plugin-transform-react-jsx-source demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers 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.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.