Rollup Plugin Data-QA
rollup plugin of react and styled-component that can injection data-qa
attribute to DOM that can display/hide with ENV flag.
inspired by
Installation
yarn add -D rollup-plugin-data-qa
Usage
- on rollup.config.js
import { injectDataQa } from 'rollup-plugin-data-qa'
export default [{
...,
plugins:[
injectDataQa()
]
}]
- on script
E2E_ENABLED=true yarn build
- however if you are using rollup to build the library, you should set the env flag
E2E_ENABLED=true
in your main project instead.
input
const StyledA = styled.div`...`
const ComponentA = () => (
<div>
<StyledA>...</StyledA>
</div>
)
output
const ComponentA = () => (
<div data-qa="component-a">
<div className="styled-xxx" data-qa="styled-a">
...
</div>
</div>
)
Params
include
- Type: String[]
- Default: null
exclude
- Type: String[]
- Default: null
format
- Type: 'paramCase' | 'camelCase' | ..
- Default: 'paramCase'
this lib using change-case to format data-qa attribute value.
options
- Type: Object
- Default: null
options for configure plugin setting
disabledStyledComponent
- Type: Boolean
- Default: false
if you are not using styled-component it should set to be true
disabledReactFunctionComponent
- Type: Boolean
- Default: false