react-scanner-ui 0.0.8 → 0.0.9

package/dist/server/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAmE7D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,wBAAsB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAgE7D"}

package/dist/server/index.js

@@ -32,14 +32,10 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.startServer = startServer;
 const http_1 = require("http");
 const path_1 = require("path");
-const polka_1 = __importDefault(require("polka"));
 const scannerConfig_1 = require("../utils/scannerConfig");
 /**
  * Get the path to the UI directory.
@@ -57,14 +53,6 @@ function getUiRoot() {
  * (similar approach to Storybook's builder-vite)
  */
 async function startServer(port) {
-    const server = (0, http_1.createServer)();
-    const app = (0, polka_1.default)({ server });
-    // API endpoint to get scan data (served before Vite middleware)
-    app.get("/api/scan-data", (_req, res) => {
-        res.setHeader("Content-Type", "application/json");
-        const result = (0, scannerConfig_1.getScanData)();
-        res.end(JSON.stringify(result));
-    });
     // Dynamically import Vite to create dev server in middleware mode
     const { createServer: createViteServer } = await Promise.resolve().then(() => __importStar(require("vite")));
     const uiRoot = getUiRoot();
@@ -73,14 +61,23 @@ async function startServer(port) {
         configFile: (0, path_1.resolve)(uiRoot, "vite.config.ts"),
         server: {
             middlewareMode: true,
-            hmr: {
-                server,
-            },
         },
         appType: "spa",
     });
-    // Use Vite's connect instance as middleware
-    app.use(vite.middlewares);
+    // Create HTTP server with manual routing
+    const server = (0, http_1.createServer)((req, res) => {
+        const url = req.url || "";
+        // Handle API routes FIRST - before Vite middleware
+        if (url === "/api/scan-data" || url.startsWith("/api/scan-data?")) {
+            res.setHeader("Content-Type", "application/json");
+            res.setHeader("Cache-Control", "no-cache");
+            const result = (0, scannerConfig_1.getScanData)();
+            res.end(JSON.stringify(result));
+            return;
+        }
+        // Pass everything else to Vite
+        vite.middlewares(req, res);
+    });
     // Handle server errors
     server.on("error", (err) => {
         console.error("Server error:", err);
@@ -96,13 +93,13 @@ async function startServer(port) {
     };
     process.on("SIGINT", shutdown);
     process.on("SIGTERM", shutdown);
-    return new Promise((resolve, reject) => {
+    return new Promise((resolvePromise, reject) => {
         server.on("error", reject);
-        app.listen({ port, host: "127.0.0.1" }, () => {
+        server.listen(port, "127.0.0.1", () => {
             console.log(`\n🚀 React Scanner UI is running at http://localhost:${port}\n`);
             console.log("   ➜  Hot Module Replacement enabled");
             console.log("   ➜  Press Ctrl+C to stop the server.\n");
-            resolve();
+            resolvePromise();
         });
     });
 }

package/dist/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,kCAmEC;AA9FD,+BAIc;AACd,+BAAwC;AAExC,kDAA0B;AAC1B,0DAAqD;AAErD;;;GAGG;AACH,SAAS,SAAS;IAChB,qDAAqD;IACrD,kCAAkC;IAClC,MAAM,UAAU,GAAG,SAAS,CAAC;IAE7B,8EAA8E;IAC9E,OAAO,IAAA,cAAO,EAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACzC,CAAC;AAED;;;GAGG;AACI,KAAK,UAAU,WAAW,CAAC,IAAY;IAC5C,MAAM,MAAM,GAAG,IAAA,mBAAgB,GAAE,CAAC;IAClC,MAAM,GAAG,GAAG,IAAA,eAAK,EAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE9B,gEAAgE;IAChE,GAAG,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,IAAqB,EAAE,GAAmB,EAAE,EAAE;QACvE,GAAG,CAAC,SAAS,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;QAClD,MAAM,MAAM,GAAG,IAAA,2BAAW,GAAE,CAAC;QAC7B,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,kEAAkE;IAClE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,wDAAa,MAAM,GAAC,CAAC;IAEhE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,IAAI,GAAG,MAAM,gBAAgB,CAAC;QAClC,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,IAAA,cAAO,EAAC,MAAM,EAAE,gBAAgB,CAAC;QAC7C,MAAM,EAAE;YACN,cAAc,EAAE,IAAI;YACpB,GAAG,EAAE;gBACH,MAAM;aACP;SACF;QACD,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,4CAA4C;IAC5C,GAAG,CAAC,GAAG,CACL,IAAI,CAAC,WAII,CACV,CAAC;IAEF,uBAAuB;IACvB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,GAA0B,EAAE,EAAE;QAChD,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC,CAAC;IAEH,2BAA2B;IAC3B,MAAM,QAAQ,GAAG,KAAK,IAAI,EAAE;QAC1B,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IAEhC,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAE3B,GAAG,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE;YAC3C,OAAO,CAAC,GAAG,CACT,wDAAwD,IAAI,IAAI,CACjE,CAAC;YACF,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;YACpD,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;YACxD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/config.js

@@ -4,9 +4,9 @@ exports.createReactScannerConfig = createReactScannerConfig;
 const fs_1 = require("fs");
 const path_1 = require("path");
 function createReactScannerConfig() {
-    const configPath = (0, path_1.join)(process.cwd(), 'react-scanner.config.js');
+    const configPath = (0, path_1.join)(process.cwd(), "react-scanner.config.js");
     if ((0, fs_1.existsSync)(configPath)) {
-        console.log('react-scanner.config.js already exists.');
+        console.log("react-scanner.config.js already exists.");
         return;
     }
     const configContent = `module.exports = {
@@ -14,16 +14,16 @@ function createReactScannerConfig() {
   includeSubComponents: true,
   importedFrom: 'PLACEHOLDER_FOR_IMPORTED_FROM',
   processors: [
-    ['raw-report', { outputDir: './.scans' }],
+    ['count-components-and-props', { outputTo: './.react-scanner-ui/scan-report.json' }],
   ],
 };
 `;
     try {
         (0, fs_1.writeFileSync)(configPath, configContent);
-        console.log('Created react-scanner.config.js');
+        console.log("Created react-scanner.config.js");
     }
     catch (error) {
-        console.error('Failed to create react-scanner.config.js', error);
+        console.error("Failed to create react-scanner.config.js", error);
     }
 }
 //# sourceMappingURL=config.js.map

package/dist/utils/index.d.ts

@@ -2,5 +2,5 @@ export { isReactScannerInstalled, checkPeerDependency, promptInstallReactScanner
 export { createReactScannerConfig } from "./config";
 export { getServerPort, isPortAvailable } from "./port";
 export type { PortOptions } from "./port";
-export { readScannerConfig, getOutputDir, getLatestScanFile, readScanData, getScanData, } from "./scannerConfig";
+export { readScannerConfig, readScanData, getScanData } from "./scannerConfig";
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/utils/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getScanData = exports.readScanData = exports.getLatestScanFile = exports.getOutputDir = exports.readScannerConfig = exports.isPortAvailable = exports.getServerPort = exports.createReactScannerConfig = exports.installReactScanner = exports.promptInstallReactScanner = exports.checkPeerDependency = exports.isReactScannerInstalled = void 0;
+exports.getScanData = exports.readScanData = exports.readScannerConfig = exports.isPortAvailable = exports.getServerPort = exports.createReactScannerConfig = exports.installReactScanner = exports.promptInstallReactScanner = exports.checkPeerDependency = exports.isReactScannerInstalled = void 0;
 var dependencies_1 = require("./dependencies");
 Object.defineProperty(exports, "isReactScannerInstalled", { enumerable: true, get: function () { return dependencies_1.isReactScannerInstalled; } });
 Object.defineProperty(exports, "checkPeerDependency", { enumerable: true, get: function () { return dependencies_1.checkPeerDependency; } });
@@ -13,8 +13,6 @@ Object.defineProperty(exports, "getServerPort", { enumerable: true, get: functio
 Object.defineProperty(exports, "isPortAvailable", { enumerable: true, get: function () { return port_1.isPortAvailable; } });
 var scannerConfig_1 = require("./scannerConfig");
 Object.defineProperty(exports, "readScannerConfig", { enumerable: true, get: function () { return scannerConfig_1.readScannerConfig; } });
-Object.defineProperty(exports, "getOutputDir", { enumerable: true, get: function () { return scannerConfig_1.getOutputDir; } });
-Object.defineProperty(exports, "getLatestScanFile", { enumerable: true, get: function () { return scannerConfig_1.getLatestScanFile; } });
 Object.defineProperty(exports, "readScanData", { enumerable: true, get: function () { return scannerConfig_1.readScanData; } });
 Object.defineProperty(exports, "getScanData", { enumerable: true, get: function () { return scannerConfig_1.getScanData; } });
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,+CAKwB;AAJtB,uHAAA,uBAAuB,OAAA;AACvB,mHAAA,mBAAmB,OAAA;AACnB,yHAAA,yBAAyB,OAAA;AACzB,mHAAA,mBAAmB,OAAA;AAErB,mCAAoD;AAA3C,kHAAA,wBAAwB,OAAA;AACjC,+BAAwD;AAA/C,qGAAA,aAAa,OAAA;AAAE,uGAAA,eAAe,OAAA;AAEvC,iDAMyB;AALvB,kHAAA,iBAAiB,OAAA;AACjB,6GAAA,YAAY,OAAA;AACZ,kHAAA,iBAAiB,OAAA;AACjB,6GAAA,YAAY,OAAA;AACZ,4GAAA,WAAW,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,+CAKwB;AAJtB,uHAAA,uBAAuB,OAAA;AACvB,mHAAA,mBAAmB,OAAA;AACnB,yHAAA,yBAAyB,OAAA;AACzB,mHAAA,mBAAmB,OAAA;AAErB,mCAAoD;AAA3C,kHAAA,wBAAwB,OAAA;AACjC,+BAAwD;AAA/C,qGAAA,aAAa,OAAA;AAAE,uGAAA,eAAe,OAAA;AAEvC,iDAA+E;AAAtE,kHAAA,iBAAiB,OAAA;AAAE,6GAAA,YAAY,OAAA;AAAE,4GAAA,WAAW,OAAA"}

package/dist/utils/scannerConfig.d.ts

@@ -3,7 +3,7 @@ export interface ScannerConfig {
     includeSubComponents?: boolean;
     importedFrom?: string;
     processors?: Array<[string, {
-        outputDir?: string;
+        outputTo?: string;
     }]>;
 }
 export interface ScanData {
@@ -17,13 +17,9 @@ export interface ScanData {
  */
 export declare function readScannerConfig(): ScannerConfig | null;
 /**
- * Get the output directory from the scanner config
+ * Get the output file path from the scanner config
  */
-export declare function getOutputDir(config: ScannerConfig): string | null;
-/**
- * Get the latest scan file from the output directory
- */
-export declare function getLatestScanFile(outputDir: string): string | null;
+export declare function getOutputFile(config: ScannerConfig): string | null;
 /**
  * Read and parse the scan data from a JSON file
  */

package/dist/utils/scannerConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scannerConfig.d.ts","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,aAAa,EAAE,MAAM,GAAG;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,aAAa,GAAG,IAAI,CAiBxD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAYjE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA8BlE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAQ9D;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI;IAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAsB7E"}
+{"version":3,"file":"scannerConfig.d.ts","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,aAAa,EAAE,MAAM,GAAG;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,aAAa,GAAG,IAAI,CAmBxD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAgBlE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAgB9D;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI;IAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAqB7E"}

package/dist/utils/scannerConfig.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.readScannerConfig = readScannerConfig;
-exports.getOutputDir = getOutputDir;
-exports.getLatestScanFile = getLatestScanFile;
+exports.getOutputFile = getOutputFile;
 exports.readScanData = readScanData;
 exports.getScanData = getScanData;
 const fs_1 = require("fs");
@@ -11,9 +10,9 @@ const path_1 = require("path");
  * Read and parse the react-scanner.config.js file
  */
 function readScannerConfig() {
-    const configPath = (0, path_1.join)(process.cwd(), 'react-scanner.config.js');
+    const configPath = (0, path_1.join)(process.cwd(), "react-scanner.config.js");
     if (!(0, fs_1.existsSync)(configPath)) {
-        console.error('react-scanner.config.js not found. Run `react-scanner-ui init` first.');
+        console.error("react-scanner.config.js not found. Run `react-scanner-ui init` first.");
         return null;
     }
     try {
@@ -23,65 +22,42 @@ function readScannerConfig() {
         return config;
     }
     catch (error) {
-        console.error('Failed to read react-scanner.config.js:', error);
+        console.error("Failed to read react-scanner.config.js:", error);
         return null;
     }
 }
 /**
- * Get the output directory from the scanner config
+ * Get the output file path from the scanner config
  */
-function getOutputDir(config) {
+function getOutputFile(config) {
     if (!config.processors || !Array.isArray(config.processors)) {
         return null;
     }
     for (const processor of config.processors) {
-        if (Array.isArray(processor) && processor[0] === 'raw-report' && processor[1]?.outputDir) {
-            return processor[1].outputDir;
+        if (Array.isArray(processor) &&
+            processor[0] === "count-components-and-props" &&
+            processor[1]?.outputTo) {
+            return processor[1].outputTo;
         }
     }
     return null;
 }
-/**
- * Get the latest scan file from the output directory
- */
-function getLatestScanFile(outputDir) {
-    const absoluteOutputDir = (0, path_1.resolve)(process.cwd(), outputDir);
-    if (!(0, fs_1.existsSync)(absoluteOutputDir)) {
-        console.error(`Scan output directory not found: ${absoluteOutputDir}`);
-        console.error('Run react-scanner first to generate scan data.');
-        return null;
-    }
-    try {
-        const files = (0, fs_1.readdirSync)(absoluteOutputDir)
-            .filter((file) => file.endsWith('.json'))
-            .map((file) => ({
-            name: file,
-            path: (0, path_1.join)(absoluteOutputDir, file),
-            mtime: (0, fs_1.statSync)((0, path_1.join)(absoluteOutputDir, file)).mtime,
-        }))
-            .sort((a, b) => b.mtime.getTime() - a.mtime.getTime());
-        if (files.length === 0) {
-            console.error('No scan files found in output directory.');
-            console.error('Run react-scanner first to generate scan data.');
-            return null;
-        }
-        return files[0].path;
-    }
-    catch (error) {
-        console.error('Failed to read scan output directory:', error);
-        return null;
-    }
-}
 /**
  * Read and parse the scan data from a JSON file
  */
 function readScanData(filePath) {
+    const absolutePath = (0, path_1.resolve)(process.cwd(), filePath);
+    if (!(0, fs_1.existsSync)(absolutePath)) {
+        console.error(`Scan data file not found: ${absolutePath}`);
+        console.error("Run react-scanner first to generate scan data.");
+        return null;
+    }
     try {
-        const content = (0, fs_1.readFileSync)(filePath, 'utf-8');
+        const content = (0, fs_1.readFileSync)(absolutePath, "utf-8");
         return JSON.parse(content);
     }
     catch (error) {
-        console.error('Failed to read scan data:', error);
+        console.error("Failed to read scan data:", error);
         return null;
     }
 }
@@ -91,19 +67,18 @@ function readScanData(filePath) {
 function getScanData() {
     const config = readScannerConfig();
     if (!config) {
-        return { data: null, error: 'Could not read react-scanner.config.js' };
-    }
-    const outputDir = getOutputDir(config);
-    if (!outputDir) {
-        return { data: null, error: 'Could not find output directory in config. Make sure you have a raw-report processor configured.' };
+        return { data: null, error: "Could not read react-scanner.config.js" };
     }
-    const scanFile = getLatestScanFile(outputDir);
+    const scanFile = getOutputFile(config);
     if (!scanFile) {
-        return { data: null, error: 'No scan data found. Run react-scanner first.' };
+        return {
+            data: null,
+            error: "Could not find output file in config. Make sure you have a count-components-and-props processor configured with outputTo.",
+        };
     }
     const data = readScanData(scanFile);
     if (!data) {
-        return { data: null, error: 'Failed to parse scan data.' };
+        return { data: null, error: "Failed to parse scan data." };
     }
     return { data, error: null };
 }

package/dist/utils/scannerConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"scannerConfig.js","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scannerConfig.js","sourceRoot":"","sources":["../../src/utils/scannerConfig.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scanner-ui",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "dist/index.js",
   "bin": {
     "react-scanner-ui": "dist/index.js"
@@ -27,7 +27,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "commander": "^14.0.2",
     "detect-port": "^1.6.1",
-    "polka": "^0.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vite": "^5.4.19"

package/ui/components/ComponentTable.css

@@ -1,61 +1,149 @@
 .component-table {
-  width: 100%;
-  border-collapse: collapse;
-  background-color: var(--color-bg-card);
-  box-shadow: var(--shadow-sm);
-  border-radius: var(--radius-md);
-  overflow: hidden;
+    width: 100%;
+    border-collapse: collapse;
+    background-color: var(--color-bg-card);
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--radius-md);
+    overflow: hidden;
 }
 
 .component-table th,
 .component-table td {
-  padding: 12px 16px;
-  text-align: left;
-  border-bottom: 1px solid var(--color-border);
+    padding: 12px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
 }
 
 .component-table th {
-  background-color: var(--color-bg-header);
-  font-weight: 600;
-  color: var(--color-text);
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.15s ease;
+    background-color: var(--color-bg-header);
+    font-weight: 600;
+    color: var(--color-text);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.15s ease;
 }
 
 .component-table th:hover {
-  background-color: #e9ecef;
+    background-color: #e9ecef;
 }
 
 .component-table th .sort-indicator {
-  margin-left: 5px;
-  color: var(--color-text-muted);
-  font-size: 0.75em;
+    margin-left: 5px;
+    color: var(--color-text-muted);
+    font-size: 0.75em;
 }
 
 .component-table tbody tr:last-child td {
-  border-bottom: none;
+    border-bottom: none;
 }
 
 .component-table tbody tr:hover td {
-  background-color: var(--color-bg-hover);
+    background-color: var(--color-bg-hover);
 }
 
 .component-table .count {
-  font-family: var(--font-mono);
-  font-weight: 500;
+    font-family: var(--font-mono);
+    font-weight: 500;
 }
 
 .component-table .total-row {
-  font-weight: 600;
-  background-color: var(--color-bg-total);
+    font-weight: 600;
+    background-color: var(--color-bg-total);
 }
 
 .component-table .total-row td {
-  border-top: 2px solid var(--color-border-strong);
-  border-bottom: none;
+    border-top: 2px solid var(--color-border-strong);
+    border-bottom: none;
 }
 
 .component-table .total-row:hover td {
-  background-color: var(--color-bg-total);
+    background-color: var(--color-bg-total);
+}
+
+/* Expandable rows */
+.clickable-row {
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.clickable-row.has-props:hover td {
+    background-color: var(--color-bg-hover);
+}
+
+.clickable-row.expanded td {
+    background-color: var(--color-bg-hover);
+    border-bottom: none;
+}
+
+.expand-icon {
+    display: inline-block;
+    width: 16px;
+    margin-right: 8px;
+    font-size: 0.7em;
+    color: var(--color-text-muted);
+    transition: transform 0.2s ease;
+}
+
+.expand-icon.expanded {
+    transform: rotate(90deg);
+}
+
+/* Props row */
+.props-row td {
+    padding: 8px 16px 16px 16px;
+    background-color: var(--color-bg-hover);
+}
+
+.props-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.props-label {
+    font-size: 0.85em;
+    font-weight: 600;
+    color: var(--color-text-muted);
+    padding-top: 4px;
+}
+
+.props-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.prop-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background-color: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+    border-radius: 16px;
+    font-size: 0.85em;
+    color: var(--color-text);
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease;
+}
+
+.prop-chip:hover {
+    background-color: var(--color-bg-header);
+    border-color: var(--color-border-strong);
+}
+
+.prop-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background-color: var(--color-primary, #4a90d9);
+    color: white;
+    border-radius: 10px;
+    font-size: 0.8em;
+    font-weight: 600;
+    font-family: var(--font-mono);
 }

package/ui/components/ComponentTable.tsx

@@ -19,6 +19,7 @@ export function ComponentTable({ data }: ComponentTableProps) {
     key: "count",
     direction: "desc",
   });
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
 
   const handleSort = (key: SortKey) => {
     setSortConfig((prev) => ({
@@ -32,10 +33,23 @@ export function ComponentTable({ data }: ComponentTableProps) {
     return sortConfig.direction === "asc" ? "▲" : "▼";
   };
 
+  const toggleRow = (name: string) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  };
+
   // Transform data into array and sort
   const components = Object.entries(data).map(([name, info]) => ({
     name,
-    count: info.instances || 0,
+    count: info.instances,
+    props: info.props || {},
   }));
 
   components.sort((a, b) => {
@@ -63,7 +77,7 @@ export function ComponentTable({ data }: ComponentTableProps) {
               <span className="sort-indicator">{getSortIndicator("name")}</span>
             </th>
             <th onClick={() => handleSort("count")}>
-              Count
+              Usage Count
               <span className="sort-indicator">
                 {getSortIndicator("count")}
               </span>
@@ -71,12 +85,50 @@ export function ComponentTable({ data }: ComponentTableProps) {
           </tr>
         </thead>
         <tbody>
-          {components.map((component) => (
-            <tr key={component.name}>
-              <td className="component-name">{component.name}</td>
-              <td className="count">{component.count}</td>
-            </tr>
-          ))}
+          {components.map((component) => {
+            const isExpanded = expandedRows.has(component.name);
+            const hasProps = Object.keys(component.props).length > 0;
+            const sortedProps = Object.entries(component.props).sort(
+              ([, a], [, b]) => b - a,
+            );
+
+            return (
+              <>
+                <tr
+                  key={component.name}
+                  onClick={() => toggleRow(component.name)}
+                  className={`clickable-row ${isExpanded ? "expanded" : ""} ${hasProps ? "has-props" : ""}`}
+                >
+                  <td className="component-name">
+                    <span
+                      className={`expand-icon ${isExpanded ? "expanded" : ""}`}
+                    >
+                      {hasProps ? "▶" : ""}
+                    </span>
+                    {component.name}
+                  </td>
+                  <td className="count">{component.count}</td>
+                </tr>
+                {isExpanded && hasProps && (
+                  <tr key={`${component.name}-props`} className="props-row">
+                    <td colSpan={2}>
+                      <div className="props-container">
+                        <span className="props-label">Props:</span>
+                        <div className="props-chips">
+                          {sortedProps.map(([propName, propCount]) => (
+                            <span key={propName} className="prop-chip">
+                              {propName}
+                              <span className="prop-count">{propCount}</span>
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </>
+            );
+          })}
           <tr className="total-row">
             <td>Total</td>
             <td className="count">{totalCount}</td>