Package Exports

classed.macro

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (classed.macro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm

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 install babel-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