Protofast Vite Tagger

A Vite plugin that automatically tags JSX elements with component metadata for visual editing capabilities.

Installation

npm install protofast-vite-tagger
# or
pnpm add protofast-vite-tagger

Usage

Basic Usage

// vite.config.js
import { defineConfig } from "vite";
import { componentTagger } from "protofast-vite-tagger";

export default defineConfig({
  plugins: [
    componentTagger(), // Uses stage environment by default
  ],
});

Environment Configuration

You can specify which environment's comm-script to use:

import { componentTagger } from "protofast-vite-tagger";

export default defineConfig({
  plugins: [
    // Local development
    componentTagger({ environment: "local" }),

    // Staging environment
    componentTagger({ environment: "stage" }),

    // Production environment
    componentTagger({ environment: "prod" }),
  ],
});

Custom URL

For custom comm-script URLs:

import { componentTagger } from "protofast-vite-tagger";

export default defineConfig({
  plugins: [
    componentTagger({
      customUrl: "https://your-domain.com/custom-comm-script.js",
    }),
  ],
});

API

componentTagger(options?)

Creates the Vite plugin instance.

Options

interface ComponentTaggerOptions {
  environment?: "local" | "stage" | "prod";
  customUrl?: string;
}

• environment (optional): Selects the predefined comm-script URL

  • 'local': http://localhost:3002/comm-script.global.js
  • 'stage': https://comm-script-stage.turbobuild.ai/comm-script.global.js
  • 'prod': https://comm-script-prod.turbobuild.ai/comm-script.global.js
  • Default: 'stage'

• customUrl (optional): Override with a custom comm-script URL. Takes precedence over environment.

What it does

This plugin:

1. Tags JSX elements with metadata attributes for visual editing
2. Injects comm-script into your HTML for visual editing capabilities
3. Preserves component hierarchy and source information
4. Supports TypeScript and modern JSX syntax

Example Output

Input JSX:

<div className="container">
  <h1>Hello World</h1>
</div>

Output with plugin:

<div
  className="container"
  data-protofast-id="src/App.tsx:2:0"
  data-protofast-name="div"
  data-component-path="src/App.tsx"
  data-component-line="2"
  data-component-file="App.tsx"
  data-component-name="div"
>
  <h1
    data-protofast-id="src/App.tsx:3:2"
    data-protofast-name="h1"
    data-component-path="src/App.tsx"
    data-component-line="3"
    data-component-file="App.tsx"
    data-component-name="h1"
  >
    Hello World
  </h1>
</div>