rollup(& vite)-plugin-jsx-remove-attributes

rollup & vite plugin to remove jsx attributes

This plugin can be used in vite or rollup.

The initial motivation was to remove data-testid attributes from jsx (react, etc) components.

It can be generally used to remove any number of attributes.

The plugin only runs when NODE_ENV matches the values of the environments option (default is ['production']).

Table of contents

1. Installation
2. Usage with Vite
3. Usage with Rollup
4. Options Object
5. Usage with Preact
6. Usage with Babel

1. Installation

npm i -D rollup-plugin-jsx-remove-attributes

2. Usage with Vite

Example:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

import removeTestIdAttribute from 'rollup-plugin-jsx-remove-attributes';

export default defineConfig({
    build: { sourcemap: true },
    plugins: [
        react(),
        removeTestIdAttribute({
            include: [/\.[tj]sx$/], //default
            exclude: ['**/node_modules/**'], // default
            attributes: ['data-testid'], // default, array of attribute names to strip from jsx
            environments: ['production', 'pre-prod', 'prod', 'q&a'], // default = ["production"]
            debug: false, // is the default, if "true" show more logging of the internal workings of this plugin, for troubleshooting configs
            usage: 'vite' // Must specify for vite use, default usage is rollup
        })
        // other plugins
    ]
});

3. Usage with Rollup

Example:

import { rollup } from 'rollup';
import removeTestIdAttribute from 'rollup-plugin-jsx-remove-attributes';

// see below for details on these options
const inputOptions = {
    ...
    plugins:[
      removeTestIdAttribute({
            include: [/\.[tj]sx$/], //default
            exclude: ['**/node_modules/**'], // default
            attributes: ['data-testid'],  // default, array of attribute names to strip from jsx
            environments: ['production', 'pre-prod', 'prod', 'q&a'], // default = ["production"]
            debug: false, // is the default, if "true" show more logging of the internal workings of this plugin, for troubleshooting configs
            usage: 'rollup'  // default,  when configuring for rollup "usage" can be omitted, shown for clarity only
        }),
    ]
};

const outputOptions = {...};

const bundle = await rollup.build(inputOptions);

await rollup.write(outputOptions);

4. Options Object

• usage: default rollup, possible values are vite or rollup,
• include: default[/\.[tj]sx$/], will allow anything that matches the array of glob/regexp pattern, default[/\.[tj]sx$/]
• exclude: default ['**/node_modules/**'], will exclude anything matching the array of glob/regexp patterns
• attributes: (optional default = [data-testid] ) array of jsx attributes to be stripped if found
• environments: array of strings representing values of NODE_ENV for wich this plugin will run.
• debug: default false, show more logging of internal workings of the plugin, default false

5. Usage with Preact

Preact is now supported since version 3.1.0

Please take care the insert this plugin before any minification/uglify plugin.

For example:

// imports removed for brevity
//
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        esbuild(),
        jsxRemoveAttributes(), // <-- this plugin
        minify()
    ],
    //
    // other config info removed for brevity
});

For more information see issue

6. Usage with Babel

Since version 3.1.2 supporting runtime injections of @babel/plugin-transform-react-jsx. (this PR).