classed.macro
A babel-plugin-macros
for classed-components
This macro adds a display name to components created with classed-components
and a data-react-component
attribute to the rendered HTML to enable a better debugging experience
Installation
- First make sure
classed-components
is installed:
npm i classed-components
- Then install
classed.macro
as a dev dependency:
npm i -D classed.macro
- If you're using
create react app
then you're done. Otherwise installbabel-plugin-macros
and add it to your babel config
Usage
Simply replace classed-components
with classed.macro
in each of your import statements
- import classed from "classed-components";
+ import classed from "classed.macro";
Display Name
The macro uses the variable name as your component's display name. This creates a better experience with react dev tools and with jest snapshots.
For example the following component:
const YourComponent = classed.div`flex flex-row ml-auto`;
Will now have a display name of YourComponent
and will show as <YourComponent>
in react dev tools and in your jest snapshots
HTML Data Attribute
The macro will also add a data-react-component
attribute to your dom node. If the previous YourComponent
component is defined inside a module called your-module.(jsx|tsx)
or your-module/index.(jsx|tsx)
it will render the following HTML:
<div data-react-component="your-module__YourComponent" class="flex flex-row ml-auto">
...
</div>
Configuration
Options
Name | Default | Description |
---|---|---|
displayName | true |
Enables generation of the component displayName |
dataAttribute | true |
Enables adding a data-react-component attribute to the component DOM element |
Config Files
You can override the above options by adding a classed
section to any of the following files:
- .babel-plugin-macrosrc
- .babel-plugin-macrosrc.json
- .babel-plugin-macrosrc.yaml
- .babel-plugin-macrosrc.yml
- .babel-plugin-macrosrc.js
- babel-plugin-macros.config.js
-
babelMacros
in package.json
Environment specific configuration
You can set environment specific configuration in any js based configuration file:
// .babel-plugin-macrosrc.js
module.exports = {
classed: {
dataAttribute: process.env.NODE_ENV !== 'production'
}
}
Synchronization with classed-components
- Types are simply copied over from classed-components to keep them in sync
- Major and minor version are set to match classed-components releases
- Patch versions are specific to the macro