Vite plugin that allows the removal of specified attributes and supports a variety of options, including file extensions, attributes, ignored folders, and files.
Only tested with Svelte, SvelteKit and Vue.js projects. Please open an issue if you encounter any problems with other frameworks.
- Removes specified attributes
- Allows you to specify the file extensions to be processed
- Can ignore certain folders or files based on configuration
- Ensures clean production code by removing unnecessary attributes, like 'data-testid' used in testing
Use your package manager to install:
npm i --save-dev @castlenine/vite-remove-attributeTo use this plugin, you must have a Vite config file set up in your project. If you don't have one, create a vite.config.js or vite.config.ts file in the root of your project.
For some frameworks, like Svelte & SvelteKit, this plugin should be placed first (before the framework's plugin) in the plugins array and for others, like Vue.js, it should be placed after the framework's plugin.
This configuration will remove data-testid attributes from all .svelte files in the production build.
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import removeAttribute from '@castlenine/vite-remove-attribute';
const IS_PRODUCTION = process.env.NODE_ENV == 'production';
export default defineConfig({
plugins: [
IS_PRODUCTION
? removeAttribute({
extensions: ['svelte'],
attributes: ['data-testid'],
})
: null,
sveltekit(), // SvelteKit plugin should be placed after removeAttribute
],
});This configuration will remove data-testid and data-id attributes from all .svelte, .ts, and .js files, with the exception of those located in the src/tests and src/utilities folders, as well as the Header.svelte, src/components/Modal.svelte, and src/layouts/LayoutAuth.svelte files in all builds.
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import removeAttribute from '@castlenine/vite-remove-attribute';
export default defineConfig({
plugins: [
removeAttribute({
extensions: ['svelte', 'ts', 'js'],
attributes: ['data-testid', 'data-id'],
ignoreFolders: ['src/tests', 'src/utilities'],
ignoreFiles: ['Header.svelte', 'src/components/Modal.svelte', 'src/layouts/LayoutAuth.svelte'],
}),
sveltekit(), // SvelteKit plugin should be placed after removeAttribute
],
});This configuration will remove 'data-testid' attributes from all '.vue' files in the production build.
const IS_PRODUCTION = process.env.NODE_ENV == 'production';
export default defineConfig({
plugins: [
vue(), // Vue plugin should be placed before removeAttribute
IS_PRODUCTION
? removeAttribute({
extensions: ['vue'],
attributes: ['data-testid'],
})
: null,
]
})This configuration will remove data-testid and data-id attributes from all .vue, .ts, and .js files, with the exception of those located in the src/tests and src/utilities folders, as well as the Header.vue, src/components/Modal.vue, and src/layouts/LayoutAuth.vue files in all builds.
export default defineConfig({
plugins: [
vue(), // Vue plugin should be placed before removeAttribute
removeAttr({
extensions: [ 'vue', "ts", "js" ],
attributes: [ 'data-testid', "data-id" ],
ignoreFolders: [ 'src/tests', "src/utilities" ],
ignoreFiles: [ 'Header.vue', 'src/components/Modal.vue', "src/layouts/LayoutAuth.vue" ]
})
]
})Forked from mustafadalga/remove-attr