react-transform-qa-classes

Simple Babel plugin that adds classes to React component root nodes generated from the displayName or class name.

This was developed for a specific use case, but I guess it could be useful more generally (or at least as a code reference). It's an alpha release - I have yet to test it in the wild.

Usage

You should have Babel 6 installed and setup, then run npm install babel-plugin-react-transform react-transform-qa-classes --save-dev.

Next setup .babelrc. In the example below, I have a special env value for QA testing.

{
	"env": {
		"qa": {
			"plugins": [
				["react-transform", {
					"transforms": [{
						"transform": "react-transform-qa-classes"
					}]
				}]
			]
		}
	}
}

Then launch babel or your build process with BABEL_ENV=qa.

Result

Two classes are added to all component root nodes - __qa and _qa_[displayName] where [displayName] is the component displayName or class name in lowercase.

Bookmarklet

javascript:var comps = document.querySelectorAll('.__qa');[].forEach.call(comps, function(c, i){console.log(i, c.className, c);c.style.outline = '1px solid red'});