open-index/open-npm huggingface dataset:
npm package: @k4ran909/react-vite-component-tagger
Description: A Vite plugin that automatically adds data attributes to your React components.
Author: Orbix
Latest version: 0.8.1

# @k4ran909/react-vite-component-tagger

A Vite plugin that automatically adds `data-orbix-id` and `data-orbix-name` attributes to your React components. This is useful for identifying components in the DOM, for example for testing or analytics.

## Installation

```bash
npm install @k4ran909/react-vite-component-tagger
# or
yarn add @k4ran909/react-vite-component-tagger
# or
pnpm add @k4ran909/react-vite-component-tagger
```

## Usage

Add the plugin to your `vite.config.ts` file:

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import orbixTagger from "@k4ran909/react-vite-component-tagger";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), orbixTagger()],
});
```

The plugin will automatically add `data-orbix-id` and `data-orbix-name` to all your React components.

The `data-orbix-id` will be a unique identifier for each component instance, in the format `path/to/file.tsx:line:column`.

The `data-orbix-name` will be the name of the component.

## Testing & Publishing

Bump it to an alpha version and test in Orbix app, eg. `"version": "0.0.1-alpha.0",`

Then publish it:

```sh
cd packages/@k4ran909/react-vite-component-tagger/ && npm run prepublishOnly && npm publish
```

Update the scaffold like this:

```sh
cd scaffold && pnpm remove @k4ran909/react-vite-component-tagger && pnpm add -D @k4ran909/react-vite-component-tagger
```

Run the E2E tests and make sure it passes.

Then, bump to a normal version, e.g. "0.1.0" and then re-publish. We'll try to match the main Orbix app version where possible.