@rspnseapp/dev-inspector 0.1.0 → 0.2.0

package/dist/webpack.d.ts

@@ -0,0 +1,59 @@
+import { Compiler } from 'webpack';
+
+interface BreadcrumbItem {
+    label: string;
+    index: number;
+}
+interface InspectedElement {
+    selector: string;
+    tagName: string;
+    classList: string[];
+    id: string | null;
+    computedStyles: Record<string, string>;
+}
+interface StyleEntry {
+    type: 'inline' | 'external';
+    index?: number;
+    href?: string;
+    css: string | null;
+    error?: string;
+}
+interface RspnseInspectorOptions {
+    /**
+     * Enable/disable the inspector. Defaults to true in development.
+     */
+    enabled?: boolean;
+    /**
+     * Trusted origins that can communicate with the inspector.
+     * Defaults to ['https://rspnse.net', 'http://localhost']
+     */
+    trustedOrigins?: string[];
+}
+
+/**
+ * Webpack plugin that injects the Rspnse inspector script into dev server pages.
+ * This enables inspect functionality from rspnse.net without a browser extension.
+ *
+ * @example
+ * ```ts
+ * // webpack.config.js (ESM)
+ * import { RspnseInspectorPlugin } from '@rspnseapp/dev-inspector/webpack';
+ *
+ * export default {
+ *   plugins: [new RspnseInspectorPlugin()]
+ * }
+ * ```
+ */
+declare class RspnseInspectorPlugin {
+    private options;
+    private inspectorScript;
+    constructor(options?: RspnseInspectorOptions);
+    private getInspectorScript;
+    apply(compiler: Compiler): void;
+}
+/**
+ * Factory function for creating the plugin (alternative to class instantiation)
+ */
+declare function rspnseInspector(options?: RspnseInspectorOptions): RspnseInspectorPlugin;
+
+export { type BreadcrumbItem, type InspectedElement, type RspnseInspectorOptions, RspnseInspectorPlugin, type StyleEntry, rspnseInspector };

package/dist/webpack.js

@@ -0,0 +1,105 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/webpack-plugin.ts
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+var PLUGIN_NAME = "RspnseInspectorPlugin";
+var INSPECTOR_PATH = "/__rspnse-inspector__/inspector.js";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var RspnseInspectorPlugin = class {
+  constructor(options = {}) {
+    this.inspectorScript = null;
+    this.options = {
+      enabled: true,
+      ...options
+    };
+  }
+  getInspectorScript() {
+    if (this.inspectorScript) return this.inspectorScript;
+    try {
+      const scriptPath = resolve(__dirname, "index.inspector.js");
+      this.inspectorScript = readFileSync(scriptPath, "utf-8");
+    } catch {
+      console.warn(
+        `[${PLUGIN_NAME}] Could not load inspector script from ${__dirname}.`
+      );
+      this.inspectorScript = "// Inspector script not found";
+    }
+    return this.inspectorScript;
+  }
+  apply(compiler) {
+    if (!this.options.enabled) return;
+    if (compiler.options.mode !== "development") return;
+    const { trustedOrigins } = this.options;
+    compiler.hooks.afterEnvironment.tap(PLUGIN_NAME, () => {
+      const devServer = compiler.options.devServer;
+      if (!devServer) return;
+      const originalSetupMiddlewares = devServer.setupMiddlewares;
+      devServer.setupMiddlewares = (middlewares, devServerInstance) => {
+        middlewares.unshift({
+          name: PLUGIN_NAME,
+          path: INSPECTOR_PATH,
+          middleware: (_req, res) => {
+            res.setHeader("Content-Type", "application/javascript");
+            res.setHeader("Cache-Control", "no-cache");
+            let script = this.getInspectorScript();
+            if (trustedOrigins && trustedOrigins.length > 0) {
+              const originsArray = JSON.stringify(trustedOrigins);
+              script = `window.__RSPNSE_TRUSTED_ORIGINS__ = ${originsArray};
+${script}`;
+            }
+            res.end(script);
+          }
+        });
+        if (originalSetupMiddlewares) {
+          return originalSetupMiddlewares(middlewares, devServerInstance);
+        }
+        return middlewares;
+      };
+    });
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          // Run after HTML has been generated
+          stage: 1e3
+        },
+        (assets) => {
+          const scriptTag = `<script src="${INSPECTOR_PATH}" defer></script>`;
+          for (const name of Object.keys(assets)) {
+            if (name.endsWith(".html")) {
+              const asset = assets[name];
+              let html = asset.source().toString();
+              if (html.includes(INSPECTOR_PATH)) continue;
+              if (html.includes("</head>")) {
+                html = html.replace("</head>", `${scriptTag}
+</head>`);
+              } else if (html.includes("<body")) {
+                html = html.replace(/<body([^>]*)>/, `<body$1>
+${scriptTag}`);
+              } else {
+                html = scriptTag + "\n" + html;
+              }
+              const webpack = __require("webpack");
+              compilation.updateAsset(name, new webpack.sources.RawSource(html));
+            }
+          }
+        }
+      );
+    });
+  }
+};
+function rspnseInspector(options = {}) {
+  return new RspnseInspectorPlugin(options);
+}
+export {
+  RspnseInspectorPlugin,
+  rspnseInspector
+};
+//# sourceMappingURL=webpack.js.map

package/dist/webpack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/webpack-plugin.ts"],"sourcesContent":["import type { Compiler } from 'webpack';\nimport { readFileSync } from 'fs';\nimport { resolve, dirname } from 'path';\nimport { fileURLToPath } from 'url';\nimport type { RspnseInspectorOptions } from './types';\n\nconst PLUGIN_NAME = 'RspnseInspectorPlugin';\nconst INSPECTOR_PATH = '/__rspnse-inspector__/inspector.js';\n\n// Get the directory of this module (ESM)\nconst __dirname = dirname(fileURLToPath(import.meta.url));\n\n/**\n * Webpack plugin that injects the Rspnse inspector script into dev server pages.\n * This enables inspect functionality from rspnse.net without a browser extension.\n *\n * @example\n * ```ts\n * // webpack.config.js (ESM)\n * import { RspnseInspectorPlugin } from '@rspnseapp/dev-inspector/webpack';\n *\n * export default {\n *   plugins: [new RspnseInspectorPlugin()]\n * }\n * ```\n */\nexport class RspnseInspectorPlugin {\n  private options: Required<Pick<RspnseInspectorOptions, 'enabled'>> &\n    RspnseInspectorOptions;\n  private inspectorScript: string | null = null;\n\n  constructor(options: RspnseInspectorOptions = {}) {\n    this.options = {\n      enabled: true,\n      ...options,\n    };\n  }\n\n  private getInspectorScript(): string {\n    if (this.inspectorScript) return this.inspectorScript;\n\n    try {\n      // Load the bundled inspector script from dist\n      const scriptPath = resolve(__dirname, 'index.inspector.js');\n      this.inspectorScript = readFileSync(scriptPath, 'utf-8');\n    } catch {\n      console.warn(\n        `[${PLUGIN_NAME}] Could not load inspector script from ${__dirname}.`\n      );\n      this.inspectorScript = '// Inspector script not found';\n    }\n\n    return this.inspectorScript;\n  }\n\n  apply(compiler: Compiler): void {\n    if (!this.options.enabled) return;\n\n    // Only apply in development mode\n    if (compiler.options.mode !== 'development') return;\n\n    const { trustedOrigins } = this.options;\n\n    // Add middleware to serve the inspector script via devServer\n    compiler.hooks.afterEnvironment.tap(PLUGIN_NAME, () => {\n      const devServer = compiler.options.devServer as\n        | {\n            setupMiddlewares?: (\n              middlewares: Array<{\n                name: string;\n                path: string;\n                middleware: (\n                  req: unknown,\n                  res: { setHeader: (k: string, v: string) => void; end: (s: string) => void }\n                ) => void;\n              }>,\n              devServer: unknown\n            ) => unknown[];\n          }\n        | undefined;\n\n      if (!devServer) return;\n\n      // Store original setupMiddlewares if it exists\n      const originalSetupMiddlewares = devServer.setupMiddlewares;\n\n      devServer.setupMiddlewares = (middlewares, devServerInstance) => {\n        // Add our middleware first\n        middlewares.unshift({\n          name: PLUGIN_NAME,\n          path: INSPECTOR_PATH,\n          middleware: (_req, res) => {\n            res.setHeader('Content-Type', 'application/javascript');\n            res.setHeader('Cache-Control', 'no-cache');\n\n            let script = this.getInspectorScript();\n\n            // If custom trusted origins are provided, inject them\n            if (trustedOrigins && trustedOrigins.length > 0) {\n              const originsArray = JSON.stringify(trustedOrigins);\n              script = `window.__RSPNSE_TRUSTED_ORIGINS__ = ${originsArray};\\n${script}`;\n            }\n\n            res.end(script);\n          },\n        });\n\n        // Call original setupMiddlewares if it exists\n        if (originalSetupMiddlewares) {\n          return originalSetupMiddlewares(middlewares, devServerInstance) as typeof middlewares;\n        }\n\n        return middlewares;\n      };\n    });\n\n    // Inject script tag into HTML assets\n    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {\n      compilation.hooks.processAssets.tap(\n        {\n          name: PLUGIN_NAME,\n          // Run after HTML has been generated\n          stage: 1000,\n        },\n        (assets) => {\n          const scriptTag = `<script src=\"${INSPECTOR_PATH}\" defer></script>`;\n\n          for (const name of Object.keys(assets)) {\n            if (name.endsWith('.html')) {\n              const asset = assets[name];\n              let html = asset.source().toString();\n\n              // Don't inject twice\n              if (html.includes(INSPECTOR_PATH)) continue;\n\n              if (html.includes('</head>')) {\n                html = html.replace('</head>', `${scriptTag}\\n</head>`);\n              } else if (html.includes('<body')) {\n                html = html.replace(/<body([^>]*)>/, `<body$1>\\n${scriptTag}`);\n              } else {\n                html = scriptTag + '\\n' + html;\n              }\n\n              // Update the asset - use webpack's sources API\n              // eslint-disable-next-line @typescript-eslint/no-require-imports\n              const webpack = require('webpack') as typeof import('webpack');\n              compilation.updateAsset(name, new webpack.sources.RawSource(html));\n            }\n          }\n        }\n      );\n    });\n  }\n}\n\n/**\n * Factory function for creating the plugin (alternative to class instantiation)\n */\nexport function rspnseInspector(\n  options: RspnseInspectorOptions = {}\n): RspnseInspectorPlugin {\n  return new RspnseInspectorPlugin(options);\n}\n"],"mappings":";;;;;;;;AACA,SAAS,oBAAoB;AAC7B,SAAS,SAAS,eAAe;AACjC,SAAS,qBAAqB;AAG9B,IAAM,cAAc;AACpB,IAAM,iBAAiB;AAGvB,IAAM,YAAY,QAAQ,cAAc,YAAY,GAAG,CAAC;AAgBjD,IAAM,wBAAN,MAA4B;AAAA,EAKjC,YAAY,UAAkC,CAAC,GAAG;AAFlD,SAAQ,kBAAiC;AAGvC,SAAK,UAAU;AAAA,MACb,SAAS;AAAA,MACT,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EAEQ,qBAA6B;AACnC,QAAI,KAAK,gBAAiB,QAAO,KAAK;AAEtC,QAAI;AAEF,YAAM,aAAa,QAAQ,WAAW,oBAAoB;AAC1D,WAAK,kBAAkB,aAAa,YAAY,OAAO;AAAA,IACzD,QAAQ;AACN,cAAQ;AAAA,QACN,IAAI,WAAW,0CAA0C,SAAS;AAAA,MACpE;AACA,WAAK,kBAAkB;AAAA,IACzB;AAEA,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,UAA0B;AAC9B,QAAI,CAAC,KAAK,QAAQ,QAAS;AAG3B,QAAI,SAAS,QAAQ,SAAS,cAAe;AAE7C,UAAM,EAAE,eAAe,IAAI,KAAK;AAGhC,aAAS,MAAM,iBAAiB,IAAI,aAAa,MAAM;AACrD,YAAM,YAAY,SAAS,QAAQ;AAgBnC,UAAI,CAAC,UAAW;AAGhB,YAAM,2BAA2B,UAAU;AAE3C,gBAAU,mBAAmB,CAAC,aAAa,sBAAsB;AAE/D,oBAAY,QAAQ;AAAA,UAClB,MAAM;AAAA,UACN,MAAM;AAAA,UACN,YAAY,CAAC,MAAM,QAAQ;AACzB,gBAAI,UAAU,gBAAgB,wBAAwB;AACtD,gBAAI,UAAU,iBAAiB,UAAU;AAEzC,gBAAI,SAAS,KAAK,mBAAmB;AAGrC,gBAAI,kBAAkB,eAAe,SAAS,GAAG;AAC/C,oBAAM,eAAe,KAAK,UAAU,cAAc;AAClD,uBAAS,uCAAuC,YAAY;AAAA,EAAM,MAAM;AAAA,YAC1E;AAEA,gBAAI,IAAI,MAAM;AAAA,UAChB;AAAA,QACF,CAAC;AAGD,YAAI,0BAA0B;AAC5B,iBAAO,yBAAyB,aAAa,iBAAiB;AAAA,QAChE;AAEA,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAGD,aAAS,MAAM,YAAY,IAAI,aAAa,CAAC,gBAAgB;AAC3D,kBAAY,MAAM,cAAc;AAAA,QAC9B;AAAA,UACE,MAAM;AAAA;AAAA,UAEN,OAAO;AAAA,QACT;AAAA,QACA,CAAC,WAAW;AACV,gBAAM,YAAY,gBAAgB,cAAc;AAEhD,qBAAW,QAAQ,OAAO,KAAK,MAAM,GAAG;AACtC,gBAAI,KAAK,SAAS,OAAO,GAAG;AAC1B,oBAAM,QAAQ,OAAO,IAAI;AACzB,kBAAI,OAAO,MAAM,OAAO,EAAE,SAAS;AAGnC,kBAAI,KAAK,SAAS,cAAc,EAAG;AAEnC,kBAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,uBAAO,KAAK,QAAQ,WAAW,GAAG,SAAS;AAAA,QAAW;AAAA,cACxD,WAAW,KAAK,SAAS,OAAO,GAAG;AACjC,uBAAO,KAAK,QAAQ,iBAAiB;AAAA,EAAa,SAAS,EAAE;AAAA,cAC/D,OAAO;AACL,uBAAO,YAAY,OAAO;AAAA,cAC5B;AAIA,oBAAM,UAAU,UAAQ,SAAS;AACjC,0BAAY,YAAY,MAAM,IAAI,QAAQ,QAAQ,UAAU,IAAI,CAAC;AAAA,YACnE;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAKO,SAAS,gBACd,UAAkC,CAAC,GACZ;AACvB,SAAO,IAAI,sBAAsB,OAAO;AAC1C;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rspnseapp/dev-inspector",
-  "version": "0.1.0",
-  "description": "Dev server plugin for Rspnse inspect functionality",
+  "version": "0.2.0",
+  "description": "Dev server plugins for Rspnse inspect functionality (Vite & Webpack)",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,6 +10,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "import": "./dist/webpack.js"
     }
   },
   "files": [
@@ -24,6 +28,7 @@
   },
   "keywords": [
     "vite-plugin",
+    "webpack-plugin",
     "rspnse",
     "responsive",
     "inspect",
@@ -38,16 +43,22 @@
     "directory": "packages/dev-inspector"
   },
   "peerDependencies": {
-    "vite": ">=4.0.0"
+    "vite": ">=4.0.0",
+    "webpack": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "vite": {
       "optional": true
+    },
+    "webpack": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@types/webpack": "^5.28.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "webpack": "^5.0.0"
   }
 }