esm-imports-analyzer 0.1.5 → 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 +1 -0
- package/dist/report/template.html +6 -0
- package/dist/report/ui/styles.css +42 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -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
|
|
@@ -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">
|
|
@@ -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",
|