https://github.com/mustafadalga/react-remove-attr
A Vite plugin designed specifically for React.js projects that allows the removal of specified attributes in production builds. Useful for excluding attributes like 'data-testid' used in testing. Options include specific file extensions, attributes, ignored folders, and files.
https://github.com/mustafadalga/react-remove-attr
build-tool javascript jsx optimization react reactjs remove-attr remove-attribute remove-attributes testing-library testing-library-react testing-library-vue tsx typescript vite vite-plugin vitest web-developer web-development
Last synced: 8 months ago
JSON representation
A Vite plugin designed specifically for React.js projects that allows the removal of specified attributes in production builds. Useful for excluding attributes like 'data-testid' used in testing. Options include specific file extensions, attributes, ignored folders, and files.
- Host: GitHub
- URL: https://github.com/mustafadalga/react-remove-attr
- Owner: mustafadalga
- License: gpl-3.0
- Created: 2023-05-21T21:07:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-30T07:42:13.000Z (over 2 years ago)
- Last Synced: 2025-02-19T07:17:20.712Z (9 months ago)
- Topics: build-tool, javascript, jsx, optimization, react, reactjs, remove-attr, remove-attribute, remove-attributes, testing-library, testing-library-react, testing-library-vue, tsx, typescript, vite, vite-plugin, vitest, web-developer, web-development
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-remove-attr
- Size: 30.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite Plugin - React.js Remove Attributes
Simplify your production code and enhance performance with this unique Vite plugin designed specifically for React.js
projects. The plugin seamlessly removes specified attributes from your tsx/jsx HTML codes during production builds,
ensuring a clutter-free and optimized application.
Through its robust functionality, this Vite plugin elevates your production code to a new level of cleanliness and
efficiency. It's a must-have tool for any developer seeking to streamline their React.js applications for production.
[](https://www.npmjs.com/package/react-remove-attr)
[](https://www.npmjs.com/package/vite)
## Table of Contents
- [Highlighted Features](#highlighted-features)
- [Installation](#installation)
- [Usage](#usage)
- [Prerequisites](#prerequisites)
- [Examples](#examples)
- [License](#license)
## Highlighted Features
1. **Selective Attribute Removal:** The plugin gives you the power to choose which attributes you want to remove in the
production build of your React.js project. This feature is particularly useful for eliminating attributes like '
data-testid', which are only necessary during testing.
2. **File Extension Specificity:** Customize the plugin according to the specific needs of your project. You can define
which file extensions should be considered for attribute removal. Currently, the plugin supports tsx and jsx
extensions.
3. **Granular Exclusions:** Have some folders or files you want to exclude from the plugin's operation? No problem. This
plugin allows for configurable exemptions, meaning you can specify certain files or folders to be ignored during the
attribute removal process.
4. **Clean Production Code:** By strategically removing unnecessary attributes, this plugin ensures your production code
is cleaner, leaner, and better performing. Say goodbye to bloated code and hello to optimized application
performance.
## Installation
You can install this plugin through npm:
```sh
npm install --save-dev react-remove-attr
```
## Usage
### Prerequisites
To use this plugin, you need to have a Vite project set up. Import and use the plugin in your vite.config.js or
vite.config.ts file.
```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import removeAttr from "react-remove-attr"
export default defineConfig({
plugins: [
removeAttr({
extensions: [],
attributes: []
}),
react(),
],
})
```
## Examples
#### Example 1: Removing 'data-testid', 'data-timestamp' and 'ignored-element' attributes from '.tsx' and ".jsx" files
This configuration will remove 'data-testid', 'data-timestamp' and 'ignored-element' attributes from all '.tsx' and ".jsx"
files in the production build.
```typescript
export default defineConfig({
plugins: [
removeAttr({
extensions: [ "jsx", "tsx" ],
attributes: [ 'data-testid', "data-timestamp", "ignored-element" ]
}),
react()
]
})
```
#### Example 2: Ignoring specific folders and files
This configuration will remove 'data-testid' attributes from '.tsx' files, with the
exception of those in the 'src/tests' and 'src/utilities' folders, as well as the 'src/Home.tsx', '
src/components/Modal.tsx', and 'src/layouts/LayoutAuth.tsx' files.
```typescript
export default defineConfig({
plugins: [
removeAttr({
extensions: [ "tsx" ],
attributes: [ 'data-testid'],
ignoreFolders: [ 'src/tests', "src/utilities" ],
ignoreFiles: [ 'src/Home.tsx', 'src/components/Modal.tsx', "src/layouts/LayoutAuth.tsx" ]
}),
react()
]
})
```
## License
[](https://github.com/mustafadalga/react-remove-attr/blob/main/LICENSE)