babel-plugin-source-mapper

A Babel plugin to inject data-filepath and data-component attributes into React JSX elements.

Why?

This is useful for:

- Mapping DOM elements back to their source files
- Building screen-to-source tools
- Enabling AI agents to reason about code ownership
- This is built by TestChimp primarily for mapping the source files related to screens of webapps during exploratory testing

Usage

$3

npm install –save-dev babel-plugin-source-mapper

$3

``js
const sourceMapper = require('babel-plugin-source-mapper');

module.exports = {
babel: {
plugins: [sourceMapper],
},
webpack: {
configure: (config) => {
config.optimization.minimize = false;
return config;
},
},
};
`

$3

Each JSX element will get:

`

Notes
• Only applies to custom React components (not HTML tags)
• Skips node_modules
• Works best with NODE_ENV=development and minification turned off