[](https://www.npmjs.com/package/rollup-plugin-data-qa) [](https://github.com/semantic-releas
npm install rollup-plugin-data-qa
!ts
rollup plugin of react and styled-component that can injection data-qa attribute to DOM that can display/hide with ENV flag.
inspired by
- babel-plugin-transform-react-styled-components-qa
- babel-plugin-transform-react-qa-classes
``sh`
yarn add -D rollup-plugin-data-qa
- on rollup.config.js
`sh
import { injectDataQa } from 'rollup-plugin-data-qa'
export default [{
...,
plugins:[
injectDataQa()
]
}]
`
- on script
`sh`
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
`js...
const StyledA = styled.div
const ComponentA = () => (
output
js
const ComponentA = () => (
...
)
`Parameters
ts
interface InjectDataQaParams {
// by default inject-data-qa will use input that rollup retrieved
include?: string[] = null
exclude?: string[] = null
// this lib using change-case to format data-qa attribute value.
format?: 'paramCase' | 'camelCase' | ... = 'paramCase'
options?: Options
}interface Options {
// if you don't want to use styled-component, should set to be true
disabledStyledComponent?: boolean
disabledReactFunctionComponent?: boolean
}
``