redev-vite-plugin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 abhishek4544
+
+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,71 @@
+# redev-vite-plugin
+
+Vite plugin for [Redev](../README.md). Injects `data-redev-*` attributes into every DOM-level JSX element at dev-server time so the browser overlay can identify which source file and component was clicked.
+
+## What it does
+
+- Parses every `.jsx` / `.tsx` file in your project with Babel
+- Adds four attributes to every lowercase JSX element (`<div>`, `<button>`, `<h1>`, etc.):
+  - `data-redev-file` — path relative to the Vite project root
+  - `data-redev-line` — 1-indexed line number in the source file
+  - `data-redev-column` — 0-indexed column
+  - `data-redev-component` — name of the enclosing React component (function or class)
+- Injects `<script src=".../redev/overlay.js">` into `index.html`
+- Only runs during `vite dev` — production builds are untouched
+
+## Install
+
+```bash
+npm install -D redev-vite-plugin
+```
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import redev from 'redev-vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    redev({ backendUrl: 'http://localhost:5050' }),
+    react(),
+  ],
+});
+```
+
+`redev()` must run **before** `@vitejs/plugin-react` — `enforce: 'pre'` is set on the plugin, so Vite orders it correctly, but if you have other pre-plugins, keep Redev first.
+
+## Options
+
+| Option | Default | What it does |
+|---|---|---|
+| `backendUrl` | `http://localhost:5050` | Where the Redev backend serves the overlay script. |
+| `enabled` | `true` | Set false to disable the plugin without removing it from the config. |
+| `include` | `null` | (Reserved for future use — currently transforms all `.jsx`/`.tsx`.) |
+| `exclude` | `['**/node_modules/**']` | (Reserved for future use — `node_modules` is always skipped.) |
+
+## What gets skipped
+
+- Uppercase JSX elements (`<Button>`, `<MyComponent>`) — attributes go on the DOM element these render, not on the component tag itself.
+- Fragments (`<>...</>` and `<React.Fragment>`).
+- Files in `node_modules`.
+- Elements that already have `data-redev-file` (idempotent).
+- Non-JSX files.
+
+## Verifying it works
+
+Start Vite, open the browser dev tools, and inspect any element. You should see:
+
+```html
+<button
+  class="btn"
+  data-redev-file="src/components/Button.tsx"
+  data-redev-line="42"
+  data-redev-column="4"
+  data-redev-component="Button"
+>
+```
+
+If the attributes are missing, check that the plugin appears before `react()` in your config and that the file being inspected is a `.tsx`/`.jsx` file (not compiled JS from a library).

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "redev-vite-plugin",
+  "version": "0.1.0",
+  "description": "Vite plugin that injects data-redev-* attributes so DOM clicks map back to source files. Powers redev-cli.",
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "redev",
+    "developer-tools",
+    "click-to-edit",
+    "react",
+    "jsx"
+  ],
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "author": "abhishek4544",
+  "license": "MIT",
+  "homepage": "https://github.com/abhishek4544/Redev#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abhishek4544/Redev.git",
+    "directory": "plugin"
+  },
+  "bugs": {
+    "url": "https://github.com/abhishek4544/Redev/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/generator": "^7.24.0",
+    "@babel/types": "^7.24.0"
+  }
+}

package/src/html-injector.js

@@ -0,0 +1,11 @@
+export function buildOverlayTag(backendUrl) {
+  return `<script src="${backendUrl}/redev/overlay.js" async></script>`;
+}
+
+export function injectOverlayIntoHtml(html, backendUrl) {
+  const tag = buildOverlayTag(backendUrl);
+  if (html.includes('/redev/overlay.js')) return html;
+  if (html.includes('</head>')) return html.replace('</head>', `  ${tag}\n</head>`);
+  if (html.includes('</body>')) return html.replace('</body>', `  ${tag}\n</body>`);
+  return html + `\n${tag}\n`;
+}

package/src/index.js

@@ -0,0 +1,60 @@
+import path from 'path';
+import { transformJsx } from './jsx-transformer.js';
+import { injectOverlayIntoHtml } from './html-injector.js';
+
+const JSX_EXTENSIONS = new Set(['.jsx', '.tsx']);
+const DEFAULT_BACKEND = 'http://localhost:5050';
+
+export default function redevVitePlugin(userOptions = {}) {
+  const options = {
+    backendUrl: userOptions.backendUrl || DEFAULT_BACKEND,
+    include: userOptions.include || null,
+    exclude: userOptions.exclude || ['**/node_modules/**'],
+    enabled: userOptions.enabled !== false,
+  };
+
+  let projectRoot = process.cwd();
+
+  function shouldTransform(id) {
+    if (!options.enabled) return false;
+    const clean = id.split('?')[0];
+    const ext = path.extname(clean);
+    if (!JSX_EXTENSIONS.has(ext)) return false;
+    if (clean.includes('node_modules')) return false;
+    return true;
+  }
+
+  function toRelativePath(id) {
+    const clean = id.split('?')[0];
+    const rel = path.relative(projectRoot, clean);
+    return rel.split(path.sep).join('/');
+  }
+
+  return {
+    name: 'redev',
+    enforce: 'pre',
+    apply: 'serve',
+
+    configResolved(config) {
+      projectRoot = config.root;
+      if (options.enabled) {
+        console.log(`[redev] enabled — backend at ${options.backendUrl}`);
+      }
+    },
+
+    transform(code, id) {
+      if (!shouldTransform(id)) return null;
+      const relativePath = toRelativePath(id);
+      const result = transformJsx(code, relativePath);
+      if (!result) return null;
+      return result;
+    },
+
+    transformIndexHtml(html) {
+      if (!options.enabled) return html;
+      return injectOverlayIntoHtml(html, options.backendUrl);
+    },
+  };
+}
+
+export { redevVitePlugin };

package/src/jsx-transformer.js

@@ -0,0 +1,125 @@
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import _generate from '@babel/generator';
+import * as t from '@babel/types';
+
+const traverse = _traverse.default || _traverse;
+const generate = _generate.default || _generate;
+
+const PARSER_OPTIONS = {
+  sourceType: 'module',
+  plugins: [
+    'jsx',
+    'typescript',
+    'decorators-legacy',
+    'classProperties',
+    'objectRestSpread',
+    'asyncGenerators',
+    'topLevelAwait',
+    'importMeta',
+  ],
+};
+
+function isLowercaseElement(name) {
+  if (name.type !== 'JSXIdentifier') return false;
+  const first = name.name.charAt(0);
+  return first === first.toLowerCase() && first !== first.toUpperCase();
+}
+
+function elementDisplayName(name) {
+  if (name.type === 'JSXIdentifier') return name.name;
+  if (name.type === 'JSXMemberExpression') {
+    const parts = [];
+    let current = name;
+    while (current.type === 'JSXMemberExpression') {
+      parts.unshift(current.property.name);
+      current = current.object;
+    }
+    if (current.type === 'JSXIdentifier') parts.unshift(current.name);
+    return parts.join('.');
+  }
+  return 'unknown';
+}
+
+function findEnclosingComponent(path) {
+  let current = path.parentPath;
+  while (current) {
+    const node = current.node;
+    if (t.isFunctionDeclaration(node) && node.id) return node.id.name;
+    if (t.isClassDeclaration(node) && node.id) return node.id.name;
+    if (t.isVariableDeclarator(node) && t.isIdentifier(node.id)) {
+      const init = node.init;
+      if (
+        init &&
+        (t.isArrowFunctionExpression(init) ||
+          t.isFunctionExpression(init) ||
+          t.isCallExpression(init))
+      ) {
+        return node.id.name;
+      }
+    }
+    if (t.isFunctionExpression(node) && node.id) return node.id.name;
+    if (t.isExportDefaultDeclaration(node)) {
+      const decl = node.declaration;
+      if (t.isIdentifier(decl)) return decl.name;
+    }
+    current = current.parentPath;
+  }
+  return null;
+}
+
+function hasRedevAttr(attributes, name) {
+  return attributes.some(
+    (attr) =>
+      t.isJSXAttribute(attr) &&
+      t.isJSXIdentifier(attr.name) &&
+      attr.name.name === name,
+  );
+}
+
+function makeStringAttr(name, value) {
+  return t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(String(value)));
+}
+
+export function transformJsx(code, relativePath) {
+  let ast;
+  try {
+    ast = parse(code, PARSER_OPTIONS);
+  } catch {
+    return null;
+  }
+
+  let modified = false;
+
+  traverse(ast, {
+    JSXOpeningElement(path) {
+      const node = path.node;
+      const name = node.name;
+
+      if (!isLowercaseElement(name)) return;
+      if (hasRedevAttr(node.attributes, 'data-redev-file')) return;
+
+      const line = node.loc && node.loc.start ? node.loc.start.line : 0;
+      const column = node.loc && node.loc.start ? node.loc.start.column : 0;
+      const componentName = findEnclosingComponent(path) || elementDisplayName(name);
+
+      node.attributes.push(makeStringAttr('data-redev-file', relativePath));
+      node.attributes.push(makeStringAttr('data-redev-line', line));
+      node.attributes.push(makeStringAttr('data-redev-column', column));
+      node.attributes.push(makeStringAttr('data-redev-component', componentName));
+
+      modified = true;
+    },
+  });
+
+  if (!modified) return null;
+
+  const output = generate(ast, {
+    retainLines: true,
+    compact: false,
+    sourceMaps: true,
+    sourceFileName: relativePath,
+  }, code);
+
+  return { code: output.code, map: output.map };
+}