esm-imports-analyzer 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/dist/report/template.html +6 -0
- package/dist/report/ui/graph.js +3 -2
- package/dist/report/ui/styles.css +42 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ The `--` separator is required. Everything after it is the command to analyze.
|
|
|
29
29
|
npx esm-imports-analyzer -- node --test test/run-all.js
|
|
30
30
|
|
|
31
31
|
# Analyze a CLI tool
|
|
32
|
-
npx esm-imports-analyzer -- node_modules/.bin/tool
|
|
32
|
+
npx esm-imports-analyzer -- node_modules/.bin/tool
|
|
33
33
|
|
|
34
34
|
# Custom output path
|
|
35
35
|
npx esm-imports-analyzer -o report.html -- node app.js
|
|
@@ -50,6 +50,7 @@ npx esm-imports-analyzer -o report.html -- node app.js
|
|
|
50
50
|
The generated report is a single HTML file with:
|
|
51
51
|
|
|
52
52
|
- **Dependency graph** — interactive visualization of all module imports, grouped by package
|
|
53
|
+
- **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
|
|
53
54
|
- **Import time** — wall-clock time to fully import each module (resolve + load + parse + dependencies + top-level execution)
|
|
54
55
|
- **Circular dependency detection** — found via Tarjan's strongly connected components algorithm
|
|
55
56
|
- **Package grouping** — modules grouped by `package.json` boundaries with collapsible folder hierarchy
|
|
@@ -66,7 +67,7 @@ The generated report is a single HTML file with:
|
|
|
66
67
|
| Double-click a folder | Expand it (show its children inside the package). |
|
|
67
68
|
| Double-click a module | Zoom into it. |
|
|
68
69
|
| Double-click empty space | Zoom to fit the entire graph. |
|
|
69
|
-
| Right-click any node | Context menu: expand importer/imported files, copy absolute path, copy full import chain from
|
|
70
|
+
| Right-click any node | Context menu: expand importer/imported files, copy absolute path, copy full import chain from roots seen during execution |
|
|
70
71
|
| Hover a module | Tooltip with full path and import time. |
|
|
71
72
|
|
|
72
73
|
### Other UI elements
|
|
@@ -9,6 +9,12 @@
|
|
|
9
9
|
</style>
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
|
12
|
+
<div class="mobile-banner">
|
|
13
|
+
<div class="mobile-banner-icon">🖥</div>
|
|
14
|
+
<div class="mobile-banner-title">ESM Imports Analyzer</div>
|
|
15
|
+
<div class="mobile-banner-message">This report is optimized for a desktop browser. Please open it on a device with a larger screen.</div>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
12
18
|
<div class="header">
|
|
13
19
|
<h1>ESM Imports Analyzer</h1>
|
|
14
20
|
<div class="header-meta">
|
package/dist/report/ui/graph.js
CHANGED
|
@@ -88,10 +88,11 @@ function runLayout(cy, callback) {
|
|
|
88
88
|
if (node.parent().length > 0 && expandedGroupIds.has(node.parent().id())) {
|
|
89
89
|
parentId = node.parent().id();
|
|
90
90
|
}
|
|
91
|
+
var bb = node.boundingBox({ includeLabels: true });
|
|
91
92
|
nodes.push({
|
|
92
93
|
id: node.id(),
|
|
93
|
-
width:
|
|
94
|
-
height:
|
|
94
|
+
width: bb.w || 60,
|
|
95
|
+
height: bb.h || 40,
|
|
95
96
|
parent: parentId,
|
|
96
97
|
});
|
|
97
98
|
});
|
|
@@ -529,3 +529,45 @@ body {
|
|
|
529
529
|
.sort-arrow {
|
|
530
530
|
font-size: 10px;
|
|
531
531
|
}
|
|
532
|
+
|
|
533
|
+
/* Mobile banner */
|
|
534
|
+
.mobile-banner {
|
|
535
|
+
display: none;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
@media (max-width: 950px) {
|
|
539
|
+
.mobile-banner {
|
|
540
|
+
display: flex;
|
|
541
|
+
flex-direction: column;
|
|
542
|
+
align-items: center;
|
|
543
|
+
justify-content: center;
|
|
544
|
+
position: fixed;
|
|
545
|
+
inset: 0;
|
|
546
|
+
background: var(--bg-primary);
|
|
547
|
+
color: var(--text-primary);
|
|
548
|
+
z-index: 9999;
|
|
549
|
+
padding: 32px;
|
|
550
|
+
text-align: center;
|
|
551
|
+
gap: 16px;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.mobile-banner-icon {
|
|
555
|
+
font-size: 48px;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.mobile-banner-title {
|
|
559
|
+
font-size: 18px;
|
|
560
|
+
font-weight: 600;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.mobile-banner-message {
|
|
564
|
+
font-size: 14px;
|
|
565
|
+
color: var(--text-secondary);
|
|
566
|
+
max-width: 300px;
|
|
567
|
+
line-height: 1.5;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
body > *:not(.mobile-banner) {
|
|
571
|
+
display: none !important;
|
|
572
|
+
}
|
|
573
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "esm-imports-analyzer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"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.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"node",
|