@cadamsdev/vite-plugin-wc-devtools 0.0.1

package/README.md

@@ -0,0 +1,79 @@
+# Vite Web Component Dev Tools Plugin
+
+A Vite plugin that provides developer tools for inspecting and debugging web components in your application.
+
+## Installation
+
+```bash
+npm install vite-plugin --save-dev
+```
+
+## Usage
+
+Add the plugin to your Vite configuration:
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite';
+import { webComponentDevTools } from 'vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    webComponentDevTools({
+      position: 'bottom-right'
+    })
+  ]
+});
+```
+
+### Options
+
+- **`enabled`** (boolean, default: `true`): Enable or disable the dev tools.
+- **`position`** (string, default: `'bottom-right'`): Position of the dev tools button. Options: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`.
+- **`queryParam`** (string, optional): Query parameter name to check for enabling dev tools. If specified, the dev tools button will only show when this query param is present in the URL (e.g., `?debug`).
+- **`includeInProduction`** (boolean, default: `false`): Include the dev tools in production builds. By default, dev tools are only included in development mode.
+
+### Example with Options
+
+```javascript
+webComponentDevTools({
+  enabled: true,
+  position: 'top-right',
+  queryParam: 'debug',
+  includeInProduction: false
+})
+```
+
+### Production Usage
+
+By default, the dev tools are only included in development builds. If you want to include them in production builds (e.g., for staging environments or internal testing), set `includeInProduction: true`:
+
+```javascript
+webComponentDevTools({
+  includeInProduction: true,
+  queryParam: 'devtools' // Recommended: use with queryParam to hide by default
+})
+```
+
+**Note:** When using in production, it's recommended to combine `includeInProduction` with `queryParam` to ensure the dev tools are only visible when explicitly requested via a URL parameter.
+
+## Features
+
+- 🔍 Inspect web component properties and attributes
+- 🎨 View and edit CSS custom properties
+- 📊 Monitor component lifecycle events
+- ♿ Check accessibility compliance
+- 🔄 Track component renders and performance
+- 🌳 Visualize component hierarchy
+
+## Requirements
+
+- Vite 4.x or higher
+
+## How It Works
+
+The plugin automatically injects the dev tools client script into your HTML during the build process when in development mode. The dev tools will appear as a floating button in your browser that you can click to open the inspection panel.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import { Plugin } from "vite";
+
+//#region src/index.d.ts
+interface WebComponentDevToolsOptions {
+  /**
+   * Enable the dev tools (default: true in dev mode only)
+   */
+  enabled?: boolean;
+  /**
+   * Position of the dev tools button (default: 'bottom-right')
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  /**
+   * Query parameter name to check for enabling dev tools
+   * If specified, the dev tools button will only show when this query param is present
+   * Example: queryParam: 'debug' will show dev tools when ?debug is in the URL
+   */
+  queryParam?: string;
+  /**
+   * Include the dev tools in production builds (default: false)
+   * By default, dev tools are only included in development mode
+   */
+  includeInProduction?: boolean;
+}
+declare function webComponentDevTools(options?: WebComponentDevToolsOptions): Plugin;
+//#endregion
+export { WebComponentDevToolsOptions, webComponentDevTools as default, webComponentDevTools };

package/dist/index.mjs

@@ -0,0 +1,43 @@
+import { createRequire } from "node:module";
+import { readFileSync } from "node:fs";
+
+//#region src/index.ts
+const require = createRequire(import.meta.url);
+function webComponentDevTools(options = {}) {
+	const { enabled = true, position = "bottom-right", queryParam, includeInProduction = false } = options;
+	let isDev = false;
+	let clientScript = null;
+	return {
+		name: "vite-plugin",
+		configResolved(config) {
+			isDev = config.mode === "development";
+			if (enabled && (isDev || includeInProduction)) try {
+				clientScript = readFileSync(require.resolve("client/client"), "utf-8");
+			} catch (error) {
+				console.error("[vite-plugin] Failed to load client script:", error);
+			}
+		},
+		transformIndexHtml(html) {
+			if (!enabled || !isDev && !includeInProduction || !clientScript) return html;
+			return {
+				html,
+				tags: [{
+					tag: "script",
+					attrs: { type: "module" },
+					children: `
+        window.__WC_DEVTOOLS_CONFIG__ = ${JSON.stringify({
+						position,
+						queryParam
+					})};
+        ${clientScript}
+      `,
+					injectTo: "body"
+				}]
+			};
+		}
+	};
+}
+var src_default = webComponentDevTools;
+
+//#endregion
+export { src_default as default, webComponentDevTools };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@cadamsdev/vite-plugin-wc-devtools",
+  "version": "0.0.1",
+  "description": "A Vite plugin that provides developer tools for inspecting web components",
+  "keywords": [
+    "custom-elements",
+    "dev-tools",
+    "plugin",
+    "vite",
+    "web-components"
+  ],
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch"
+  },
+  "dependencies": {
+    "@cadamsdev/wc-devtools-client": "0.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.1.0",
+    "tsdown": "^0.20.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.0"
+  },
+  "peerDependencies": {
+    "vite": "^4.0.0 || ^5.0.0"
+  }
+}