Automatically annotate JSX components and HTML elements with data attributes
Automatically annotate JSX components and HTML elements with data attributes.
``bash`
npm install @dhiwise/component-tagger
`js
// vite.config.js
import { defineConfig } from 'vite';
import componentTagger from '@dhiwise/component-tagger';
export default defineConfig({
plugins: [
componentTagger({
verbose: true,
attributePrefix: 'data-component',
}),
],
});
`
`js
// next.config.js
const componentTagger = require('@dhiwise/component-tagger/nextLoader');
module.exports = {
webpack: (config) => {
config.module.rules.push({
test: /\.(js|jsx|ts|tsx)$/,
use: [
{
loader: componentTagger,
options: {
verbose: true,
},
},
],
});
return config;
},
};
`
`bash``
npx @dhiwise/component-tagger-html --output-dir public
- Automatically tags JSX components with data attributes
- Supports Vite, Webpack, Next.js, and HTML
- Configurable attribute prefixes and content extraction
MIT