https://github.com/x-kom/babel-plugin-react-component-trace-data-attr
Adds data- attribute to html elements showing the trace of components names that led to this element creation.
https://github.com/x-kom/babel-plugin-react-component-trace-data-attr
babel-plugin data-attributes react testing
Last synced: about 2 months ago
JSON representation
Adds data- attribute to html elements showing the trace of components names that led to this element creation.
- Host: GitHub
- URL: https://github.com/x-kom/babel-plugin-react-component-trace-data-attr
- Owner: x-kom
- License: mit
- Created: 2019-02-07T13:23:31.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T22:24:33.000Z (over 3 years ago)
- Last Synced: 2025-12-03T08:50:29.623Z (5 months ago)
- Topics: babel-plugin, data-attributes, react, testing
- Language: JavaScript
- Size: 74.2 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-react-component-trace-data-attr
Adds `data-component-trace` attribute to html elements showing the trace of React components names that led to this element creation.
> Note: it will only work with JSX elements, not with `React.createElement`. If you're using TypeScript and transpile it separately, use `"jsx": "preserve"` in your `tsconfig.json` and add `preset-react` to your babel presets.
Useful when combined with [component-trace-element-finder](https://www.npmjs.com/package/component-trace-element-finder)
## Example
Considering components structure:
```jsx
const HeaderOfComponent = () =>
;
const ContentOfComponent = () => ;
const SecondComponent = () => <>>;
const Component = () => ;
render();
```
Resulting HTML markup will look like this:
```html
```
where components names are separated by a single space
## Options:
- **`attribute`** - any attribute name you want, should begin from `data-`. Default: `data-component-trace`.
- **`format`** - can be "camel" (camelCase), "snake" (snake_case) or "kebab" (kebab-case). Default: `kebab`.
- **`separator`** - can by any non-empty string. Default: ` ` (single space, useful for selectors like `[data-component-trace~=second-component]`).
Example:
```json
["react-component-trace-data-attr", {
"attribute": "data-component-trace",
"format": "kebab",
"separator": " ",
}]
```