@amaster.ai/vite-plugins

Collection of Vite plugins for React application development.

Features

• 📝 Browser Logs Plugin - Collect console logs and network requests to file
• 🔧 Component ID Plugin - Add unique IDs to HTML elements for debugging
• 🌉 Editor Bridge Plugin - Connect development UI with editor tools
• 🛣️ Routes Expose Plugin - Expose React Router routes in development

Installation

pnpm add -D @amaster.ai/vite-plugins

Usage

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import {
  browserLogsPlugin,
  componentIdPlugin,
  editorBridgePlugin,
  routesExposePlugin,
} from "@amaster.ai/vite-plugins";

export default defineConfig({
  plugins: [
    react(),
    browserLogsPlugin(),      // Collect browser logs
    componentIdPlugin(),
    editorBridgePlugin(),
    routesExposePlugin(),
  ],
});

Plugins

browserLogsPlugin()

Collects console logs, network requests, and errors from the browser and writes them to a file.

Features:

• ✅ Intercepts console.log/info/warn/error/debug
• ✅ Captures fetch and XMLHttpRequest
• ✅ Records global errors and unhandled rejections
• ✅ Filters out Vite internal requests and SSE
• ✅ Writes to browser.log in project root
• ✅ Only runs in development mode

Output:

All logs are written to browser.log in your project root:

{"type":"console","timestamp":"2026-01-17T10:30:45.123Z","level":"log","message":"User logged in","stack":[...]}
{"type":"request","timestamp":"2026-01-17T10:30:46.456Z","method":"GET","url":"/api/users","status":200,...}
{"type":"error","timestamp":"2026-01-17T10:30:47.789Z","level":"error","message":"Uncaught Error: ..."}

Example:

browserLogsPlugin()

Log Format:

• Console logs: { type: 'console', level, message, stack }
• Network requests: { type: 'request', method, url, status, duration, requestBody, responseBody }
• Errors: { type: 'error', message, stack }

Programmatic Access:

// In browser console

// Get queue status
window.__getBrowserLogsStatus__();
// => { queueLength: 0, isWriting: false }

// Flush logs manually
await window.__flushBrowserLogs__();

componentIdPlugin()

Adds unique data-node-component-id attributes to HTML elements in JSX.

Features:

• ✅ Only runs in development mode
• ✅ Only affects native HTML tags (not custom components)
• ✅ Generates stable IDs based on file path and position
• ✅ IDs persist through hot reloads

Example output:

// Input
<div>
  <button>Click me</button>
</div>

// Output (development only)
<div data-node-component-id="a1b2c3d4e5f6">
  <button data-node-component-id="f6e5d4c3b2a1">Click me</button>
</div>

editorBridgePlugin(options?)

Injects bridge script for editor integration.

Options:

• bridgeScriptPath - Path to bridge script (default: /scripts/bridge.js)

Features:

• ✅ Injects click handler for custom navigation
• ✅ Loads bridge.js in development mode
• ✅ Prevents unwanted navigation in editor mode

Example:

editorBridgePlugin({
  bridgeScriptPath: "/custom/bridge.js",
})

routesExposePlugin(options?)

Exposes React Router routes to window.__APP_ROUTES__ in development.

Options:

• routesFilePath - Path to routes file (default: src/routes.tsx)

Features:

• ✅ Only runs in development mode
• ✅ Automatically detects routes export
• ✅ Accessible via browser DevTools

Example:

routesExposePlugin({
  routesFilePath: "src/app/routes.tsx",
})

Access routes in browser:

console.log(window.__APP_ROUTES__);

Development Mode Only

All plugins are automatically disabled in production builds. They only run when:

vite dev       # Development server
vite serve     # Development server

TypeScript Support

Full TypeScript support with proper types:

import type { Plugin } from "vite";
import { componentIdPlugin } from "@amaster.ai/vite-plugins";

const plugin: Plugin = componentIdPlugin();

License

MIT