@amaster.ai/vite-plugins 1.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Amaster Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,183 @@
+# @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
+
+```bash
+pnpm add -D @amaster.ai/vite-plugins
+```
+
+## Usage
+
+```typescript
+// 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:
+
+```json
+{"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:**
+
+```typescript
+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:**
+
+```javascript
+// 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:**
+
+```tsx
+// 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:**
+
+```typescript
+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:**
+
+```typescript
+routesExposePlugin({
+  routesFilePath: "src/app/routes.tsx",
+})
+```
+
+**Access routes in browser:**
+
+```javascript
+console.log(window.__APP_ROUTES__);
+```
+
+## Development Mode Only
+
+All plugins are automatically disabled in production builds. They only run when:
+
+```bash
+vite dev       # Development server
+vite serve     # Development server
+```
+
+## TypeScript Support
+
+Full TypeScript support with proper types:
+
+```typescript
+import type { Plugin } from "vite";
+import { componentIdPlugin } from "@amaster.ai/vite-plugins";
+
+const plugin: Plugin = componentIdPlugin();
+```
+
+## License
+
+MIT