esm-imports-analyzer 0.1.5 → 0.1.7

package/README.md

@@ -2,7 +2,7 @@
 
 A CLI tool that captures all ESM imports during a Node.js application's execution and generates a self-contained HTML report with an interactive dependency graph and timing data.
 
-![ESM Imports Analyzer](screenshot.png)
+[![Live demo](screenshot.png)](https://alcuadrado.github.io/esm-imports-analyzer/)
 
 [Live demo](https://alcuadrado.github.io/esm-imports-analyzer/)
 
@@ -50,9 +50,9 @@ npx esm-imports-analyzer -o report.html -- node app.js
 The generated report is a single HTML file with:
 
 - **Dependency graph** — interactive visualization of all module imports, grouped by package
+- **Scalable to large graphs** — all packages start collapsed, showing only inter-package edges. Expand individual packages to reveal their modules and folder hierarchy, keeping the visible graph as simple or detailed as you need
 - **Import time** — wall-clock time to fully import each module (resolve + load + parse + dependencies + top-level execution)
-- **Circular dependency detection** — found via Tarjan's strongly connected components algorithm
-- **Package grouping** — modules grouped by `package.json` boundaries with collapsible folder hierarchy
+- **Circular dependency detection** — easily spot and copy circular import chains
 - **Slowest modules table** — sortable by import time or recursive import count
 - **Search** — highlight matching modules across the graph
 

package/dist/report/generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../src/report/generator.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AA6B9C,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CA2BzE"}
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../src/report/generator.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AA6B9C,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,CAgCzE"}

package/dist/report/generator.js

@@ -37,8 +37,12 @@ export function generateReport(data, outputPath) {
     const tableJS = readFileContent(join(uiDir, 'table.js'));
     const cyclesPanelJS = readFileContent(join(uiDir, 'cycles-panel.js'));
     const filtersJS = readFileContent(join(uiDir, 'filters.js'));
+    // Read version from package.json
+    const pkg = JSON.parse(readFileContent(join(projectRoot, 'package.json')));
+    const version = pkg.version || '0.0.0';
     // Assemble HTML
     let html = template;
+    html = templateReplace(html, '{{VERSION}}', version);
     html = templateReplace(html, '{{STYLES}}', styles);
     html = templateReplace(html, '{{DATA}}', JSON.stringify(data));
     html = templateReplace(html, '{{GRAPH_JS}}', graphJS);

package/dist/report/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../src/report/generator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,SAAS,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAE1D,SAAS,eAAe;IACtB,IAAI,GAAG,GAAG,SAAS,CAAC;IACpB,OAAO,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,IAAI,CAAC;YACH,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;YACjD,OAAO,GAAG,CAAC;QACb,CAAC;QAAC,MAAM,CAAC;YACP,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,eAAe,CAAC,QAAgB;IACvC,OAAO,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACzC,CAAC;AAED,0EAA0E;AAC1E,oEAAoE;AACpE,SAAS,eAAe,CAAC,IAAY,EAAE,WAAmB,EAAE,KAAa;IACvE,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE/C,MAAM,UAAU,cAAc,CAAC,IAAgB,EAAE,UAAkB;IACjE,MAAM,WAAW,GAAG,eAAe,EAAE,CAAC;IAEtC,MAAM,SAAS,GAAG,WAAW;QAC3B,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC;QACrC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAEvC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAEpC,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IACzD,MAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7D,gBAAgB;IAChB,IAAI,IAAI,GAAG,QAAQ,CAAC;IACpB,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IACnD,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/D,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;IACtD,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;IACtD,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,qBAAqB,EAAE,aAAa,CAAC,CAAC;IACnE,IAAI,GAAG,eAAe,CAAC,IAAI,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE1D,aAAa,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AAClC,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../src/report/generator.ts"],"names":[],"mappings":"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"}

package/dist/report/template.html

@@ -9,8 +9,14 @@
   </style>
 </head>
 <body>
+  <div class="mobile-banner">
+    <div class="mobile-banner-icon">&#128421;</div>
+    <div class="mobile-banner-title">ESM Imports Analyzer</div>
+    <div class="mobile-banner-message">This report is optimized for a desktop browser. Please open it on a device with a larger screen.</div>
+  </div>
+
   <div class="header">
-    <h1>ESM Imports Analyzer</h1>
+    <h1>ESM Imports Analyzer <span class="header-version">v{{VERSION}}</span></h1>
     <div class="header-meta">
       <span id="meta-command"></span> &middot;
       <span id="meta-modules"></span> modules

package/dist/report/ui/styles.css

@@ -50,6 +50,13 @@ body {
   color: var(--text-primary);
 }
 
+.header-version {
+  font-size: 14px;
+  font-weight: 400;
+  padding-left: 5px;
+  color: var(--text-secondary);
+}
+
 .header-meta {
   font-size: 12px;
   color: var(--text-secondary);
@@ -529,3 +536,45 @@ body {
 .sort-arrow {
   font-size: 10px;
 }
+
+/* Mobile banner */
+.mobile-banner {
+  display: none;
+}
+
+@media (max-width: 950px) {
+  .mobile-banner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    inset: 0;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    z-index: 9999;
+    padding: 32px;
+    text-align: center;
+    gap: 16px;
+  }
+
+  .mobile-banner-icon {
+    font-size: 48px;
+  }
+
+  .mobile-banner-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .mobile-banner-message {
+    font-size: 14px;
+    color: var(--text-secondary);
+    max-width: 300px;
+    line-height: 1.5;
+  }
+
+  body > *:not(.mobile-banner) {
+    display: none !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esm-imports-analyzer",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "A tool to generate an HTML visualization of the imports of an ESM Node.js application. It executes the application, tracks the imports during runtime, and creates the visualization after the execution is complete.",
   "keywords": [
     "node",
@@ -31,6 +31,7 @@
     "prepublishOnly": "npm run typecheck && npm run build"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@types/node": "^25.5.0",
     "typescript": "^6.0.2"
   }