dev-tooltip 1.0.0

package/README.md

@@ -0,0 +1,23 @@
+# dev-tooltip
+
+Dev-only tooltips for frontend apps using `debug_*` attributes.  
+All debug attributes are automatically **removed from production builds**.
+
+Built for **Vite + React**, with zero runtime cost in production.
+
+---
+
+## ✨ Features
+
+- ✅ Dev-only tooltips (no production leakage)
+- ✅ Build-time removal of `debug_*` attributes
+- ✅ No manual runtime imports needed
+- ✅ One-line Vite setup
+- ✅ Zero impact on production bundle
+
+---
+
+## 📦 Installation
+
+```bash
+npm install dev-tooltip

package/dev-tooltip-build.js

@@ -0,0 +1,16 @@
+// dev-tooltip-build.js
+export function devTooltipBuild(prefix = "debug_") {
+  return {
+    name: "dev-tooltip-build",
+    enforce: "pre",
+    transform(code, id) {
+      if (!/\.(jsx|tsx)$/.test(id)) return code;
+
+      const isProd = process.env.MODE === "production" || process.env.NODE_ENV === "production";
+      if (!isProd) return code;
+
+      const regex = new RegExp(`\\s${prefix}[a-zA-Z0-9_-]+=(?:"[^"]*"|'[^']*')`, "g");
+      return code.replace(regex, "");
+    },
+  };
+}

package/dev-tooltip-dev.js

@@ -0,0 +1,54 @@
+// dev-tooltip-dev.js
+export function devTooltipDev(prefix = "debug_") {
+  return {
+    name: "dev-tooltip-dev",
+    apply: "serve", // only runs in dev mode
+    transformIndexHtml() {
+      return {
+        tags: [
+          {
+            tag: "script",
+            injectTo: "body",
+            children: `
+              document.addEventListener("mouseover", (e) => {
+                const el = e.target.closest("[${prefix}title]");
+                if (!el) return;
+
+                const tooltip = document.createElement("div");
+                tooltip.textContent = el.getAttribute("${prefix}title");
+                tooltip.style.cssText = \`
+                  position: fixed;
+                  background: black;
+                  color: white;
+                  padding: 6px 10px;
+                  font-size: 12px;
+                  border-radius: 4px;
+                  z-index: 9999;
+                  pointer-events: none;
+                \`;
+
+                document.body.appendChild(tooltip);
+
+                const move = (ev) => {
+                  tooltip.style.left = ev.clientX + 10 + "px";
+                  tooltip.style.top = ev.clientY + 10 + "px";
+                };
+
+                document.addEventListener("mousemove", move);
+
+                el.addEventListener(
+                  "mouseleave",
+                  () => {
+                    tooltip.remove();
+                    document.removeEventListener("mousemove", move);
+                  },
+                  { once: true }
+                );
+              });
+            `,
+          },
+        ],
+      };
+    },
+  };
+}

package/index.js

@@ -0,0 +1,12 @@
+import { devTooltipDev } from "./dev-tooltip-dev.js";
+import { devTooltipBuild } from "./dev-tooltip-build.js";
+
+export function devTooltip(options = {}) {
+    const prefix = options.prefix ?? "debug_";
+    return [
+        devTooltipDev(prefix),
+        devTooltipBuild(prefix)
+    ];
+}
+
+export default devTooltip;

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "dev-tooltip",
+  "version": "1.0.0",
+  "description": "Dev-only tooltips using debug_* attributes, stripped from production builds",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "dev-tooltip-dev.js",
+    "dev-tooltip-build.js"
+  ],
+  "keywords": [
+    "vite",
+    "debug",
+    "tooltip",
+    "react",
+    "devtools"
+  ],
+  "author": "Abhishek Kumar",
+  "license": "MIT"
+}