esm-imports-analyzer 0.1.0

package/dist/report/ui/table.js

@@ -0,0 +1,209 @@
+/* global document */
+
+function initTable(data, cy) {
+  var tableBody = document.getElementById('table-body');
+  var countInput = document.getElementById('slowest-count');
+
+  // Build URL -> ModuleNode index from the full tree
+  var nodeByURL = {};
+  function indexTree(nodes) {
+    for (var i = 0; i < nodes.length; i++) {
+      nodeByURL[nodes[i].resolvedURL] = nodes[i];
+      indexTree(nodes[i].children);
+    }
+  }
+  indexTree(data.tree);
+
+  // Build timing lookup (first occurrence per URL)
+  var timingByURL = {};
+  for (var i = 0; i < data.modules.length; i++) {
+    var m = data.modules[i];
+    if (!timingByURL[m.resolvedURL]) {
+      timingByURL[m.resolvedURL] = {
+        totalImportTime: m.totalImportTime || 0,
+      };
+    }
+  }
+
+  // Collect all unique modules that have tree nodes
+  var allModules = [];
+  var seen = {};
+  for (var i = 0; i < data.modules.length; i++) {
+    var url = data.modules[i].resolvedURL;
+    if (!seen[url] && nodeByURL[url]) {
+      seen[url] = true;
+      allModules.push(nodeByURL[url]);
+    }
+  }
+
+  function getMetric(node, column) {
+    var t = timingByURL[node.resolvedURL];
+    if (column === 'time') return t ? t.totalImportTime : node.totalTime;
+    if (column === 'imports') return countAllChildren(node);
+    return 0;
+  }
+
+  function buildRoots(count, sortColumn) {
+    var sorted = allModules.slice().sort(function (a, b) {
+      return getMetric(b, sortColumn) - getMetric(a, sortColumn);
+    });
+    return sorted.slice(0, count);
+  }
+
+  var currentSort = { column: 'time', direction: 'desc' };
+
+  function getDisplayPath(url) {
+    if (url.startsWith('file://')) return url.slice(7);
+    return url;
+  }
+
+  function countAllChildren(node) {
+    var count = node.children.length;
+    for (var i = 0; i < node.children.length; i++) {
+      count += countAllChildren(node.children[i]);
+    }
+    return count;
+  }
+
+  function renderRow(node, depth, parentElement) {
+    var row = document.createElement('div');
+    row.className = 'table-row';
+    row.dataset.url = node.resolvedURL;
+    row.dataset.depth = depth;
+
+    var hasChildren = node.children.length > 0;
+    var indent = depth * 20;
+    var childCount = countAllChildren(node);
+    var t = timingByURL[node.resolvedURL] || { totalImportTime: node.totalTime };
+    var timeDisplay = t.totalImportTime ? t.totalImportTime.toFixed(2) + ' ms' : '\u2014';
+
+    row.innerHTML =
+      '<div class="module-name" style="padding-left: ' + indent + 'px">' +
+        '<span class="chevron' + (hasChildren ? '' : ' empty') + '">' + (hasChildren ? '\u25B6' : '') + '</span>' +
+        '<span class="module-label" title="' + escapeAttr(node.resolvedURL) + '">' + escapeHtml(depth === 0 ? getDisplayPath(node.resolvedURL) : node.specifier) + '</span>' +
+      '</div>' +
+      '<div class="time-value">' + timeDisplay + '</div>' +
+      '<div class="imports-count">' + childCount + '</div>';
+
+    parentElement.appendChild(row);
+
+    // Click to zoom in graph
+    row.addEventListener('click', function (e) {
+      if (e.target.classList.contains('chevron')) return;
+      if (cy) {
+        focusOnNode(cy, node.resolvedURL);
+      }
+      // Highlight this row
+      var rows = document.querySelectorAll('.table-row');
+      for (var j = 0; j < rows.length; j++) {
+        rows[j].classList.remove('highlighted');
+      }
+      row.classList.add('highlighted');
+    });
+
+    // Expand/collapse children
+    if (hasChildren) {
+      var expanded = false;
+      var childContainer = document.createElement('div');
+      childContainer.className = 'child-container';
+      childContainer.style.display = 'none';
+      parentElement.appendChild(childContainer);
+
+      var chevron = row.querySelector('.chevron');
+      chevron.addEventListener('click', function () {
+        expanded = !expanded;
+        chevron.classList.toggle('expanded', expanded);
+        childContainer.style.display = expanded ? 'block' : 'none';
+
+        if (expanded && childContainer.children.length === 0) {
+          var sortedChildren = sortNodes(node.children, currentSort);
+          for (var k = 0; k < sortedChildren.length; k++) {
+            renderRow(sortedChildren[k], depth + 1, childContainer);
+          }
+        }
+      });
+    }
+  }
+
+  function sortNodes(nodes, sort) {
+    var sorted = nodes.slice();
+    sorted.sort(function (a, b) {
+      var cmp = 0;
+      if (sort.column === 'name') {
+        cmp = a.specifier.localeCompare(b.specifier);
+      } else {
+        cmp = getMetric(a, sort.column) - getMetric(b, sort.column);
+      }
+      return sort.direction === 'desc' ? -cmp : cmp;
+    });
+    return sorted;
+  }
+
+  function renderTable() {
+    tableBody.innerHTML = '';
+    var count = parseInt(countInput.value, 10) || 20;
+    var roots = sortNodes(buildRoots(count, currentSort.column), currentSort);
+    for (var i = 0; i < roots.length; i++) {
+      renderRow(roots[i], 0, tableBody);
+    }
+  }
+
+  // Count input change
+  countInput.addEventListener('input', function () {
+    renderTable();
+  });
+
+  // Column sorting
+  document.querySelectorAll('.table-header-row span[data-sort]').forEach(function (header) {
+    header.addEventListener('click', function () {
+      var col = header.dataset.sort;
+      if (currentSort.column === col) {
+        currentSort.direction = currentSort.direction === 'desc' ? 'asc' : 'desc';
+      } else {
+        currentSort.column = col;
+        currentSort.direction = 'desc';
+      }
+      // Update sort arrows
+      document.querySelectorAll('.sort-arrow').forEach(function (arrow) {
+        arrow.textContent = '';
+      });
+      var arrow = header.querySelector('.sort-arrow');
+      if (arrow) {
+        arrow.textContent = currentSort.direction === 'desc' ? ' \u25BC' : ' \u25B2';
+      }
+      renderTable();
+    });
+  });
+
+  renderTable();
+
+  function escapeHtml(str) {
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function escapeAttr(str) {
+    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  return {
+    filter: function (query) {
+      // Only filter top-level rows (depth 0), not expanded children
+      var rows = tableBody.querySelectorAll('.table-row[data-depth="0"]');
+      var lowerQuery = query.toLowerCase();
+      for (var i = 0; i < rows.length; i++) {
+        var url = (rows[i].dataset.url || '').toLowerCase();
+        var text = rows[i].textContent.toLowerCase();
+        var match = !query || url.indexOf(lowerQuery) !== -1 || text.indexOf(lowerQuery) !== -1;
+        // Hide/show the row and its sibling child-container
+        rows[i].style.display = match ? '' : 'none';
+        var next = rows[i].nextElementSibling;
+        if (next && next.classList.contains('child-container')) {
+          next.style.display = match ? next.style.display : 'none';
+        }
+      }
+    },
+    rerender: renderTable,
+  };
+}

package/dist/types.d.ts

@@ -0,0 +1,47 @@
+export interface ImportRecord {
+    specifier: string;
+    resolvedURL: string;
+    parentURL: string | null;
+    importStartTime: number;
+    totalImportTime?: number;
+}
+export interface ModuleNode {
+    resolvedURL: string;
+    specifier: string;
+    totalTime: number;
+    children: ModuleNode[];
+    parentURL: string | null;
+}
+export interface Cycle {
+    modules: string[];
+    length: number;
+}
+export interface FolderTreeNode {
+    id: string;
+    label: string;
+    type: 'folder' | 'file';
+    moduleURL?: string;
+    children: FolderTreeNode[];
+}
+export interface Group {
+    id: string;
+    label: string;
+    packageJsonPath: string;
+    modules: string[];
+    isNodeModules: boolean;
+    folderTree?: FolderTreeNode[];
+}
+export interface ReportData {
+    metadata: {
+        command: string;
+        timestamp: string;
+        nodeVersion: string;
+        totalModules: number;
+        totalTime: number;
+    };
+    modules: ImportRecord[];
+    tree: ModuleNode[];
+    groups: Group[];
+    cycles: Cycle[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "esm-imports-analyzer",
+  "version": "0.1.0",
+  "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",
+    "esm",
+    "imports",
+    "analyzer",
+    "optimization"
+  ],
+  "author": "Patricio Palladino <email@patriciopalladino.com>",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "esm-imports-analyzer": "dist/cli.js"
+  },
+  "types": "dist/cli.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "typescript": "^6.0.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "rm -rf dist && tsc && cp -r src/report/ui dist/report/ui && cp src/report/template.html dist/report/template.html",
+    "test": "node --test test/**/*.test.ts",
+    "test:unit": "node --test test/unit/**/*.test.ts",
+    "test:integration": "node --test test/integration/**/*.test.ts"
+  }
+}