Nuke the node_modules

Author: Sumit189

README.md

@@ -0,0 +1,60 @@
+<p align="center">
+  <img src="assets/logo.png" alt="nuke_modules logo" width="140" />
+</p>
+
+# nuke_modules
+
+Scan, visualize, and safely delete heavy `node_modules` across your projects. Installable PWA that works offline.
+
+## Highlights
+
+- Fast scan with live size totals (pretty bytes)
+- One-click select all, multi-select, and bulk delete
+- Prepare projects for `pnpm` (sets `packageManager`, writes `.npmrc`, removes `package-lock.json`)
+- Command palette (⌘/Ctrl + K) and search focus (/)
+- Installable as a Progressive Web App (PWA) and usable offline
+
+## Getting started
+### Use the app
+
+1) Click “Pick root” and choose the top-level folder that contains your projects.
+
+2) Click “Scan” to discover `node_modules` folders and their sizes.
+
+3) Select items and choose “Delete” or “Prepare pnpm”.
+
+## PWA install (Add to Home Screen)
+
+- On Chrome/Edge/Brave desktop: open the omnibox install icon or use the three-dot menu → Install nuke_modules.
+- On Android Chrome: visit the site, open the menu → Add to Home screen.
+- The app caches core assets and continues to work offline after first load.
+
+## Keyboard shortcuts
+
+- `/` Focus search
+- `⌘/Ctrl + K` Open command palette
+- `Esc` Close command palette
+
+## How it works (permissions & safety)
+
+- Uses the File System Access API to read sizes and delete folders you select.
+- You explicitly grant access by picking a root folder; nothing outside that root is touched.
+- Deletion only occurs for checked `node_modules` and is permission-gated by the browser.
+
+## Browser support
+
+- Best in Chromium-based browsers (Chrome, Edge, Brave) where the File System Access API is fully available.
+- Other browsers may load the UI but won’t support scanning/deleting without the API.
+
+## Development notes
+
+- This project is static: `index.html`, `styles.css`, `app.js`, plus a `manifest.webmanifest` and `sw.js` for PWA.
+- Service worker strategy: cache app shell on install; network-first for HTML, cache-first for static assets.
+
+## Troubleshooting
+
+- “Folder selection failed”: ensure you didn’t cancel the picker and that your browser allows file system access.
+- “Some deletions failed”: you may lack permissions for certain subfolders; re-run with elevated access or check OS-level permissions.
+- If updates don’t appear after deploying, refresh with “Empty cache and hard reload” to update the service worker.
+
+

app.js

@@ -0,0 +1,288 @@
+const appHeader = document.getElementById('appHeader');
+const cardHead = document.getElementById('cardHead');
+const tbody = document.getElementById('tbody');
+const pickRootBtn = document.getElementById('pickRoot');
+const scanBtn = document.getElementById('scanBtn');
+const scanLabel = document.getElementById('scanLabel');
+const scanSpin = document.getElementById('scanSpin');
+const deleteBtn = document.getElementById('deleteBtn');
+const prepPnpmBtn = document.getElementById('prepPnpmBtn');
+const selectAll = document.getElementById('selectAll');
+const summary = document.getElementById('summary');
+const selectionHint = document.getElementById('selectionHint');
+const toasts = document.getElementById('toasts');
+const topLoader = document.getElementById('topLoader');
+const searchInput = document.getElementById('searchInput');
+const cmdk = document.getElementById('cmdk');
+const cmdkBtn = document.getElementById('cmdkBtn');
+const cmdkInput = document.getElementById('cmdkInput');
+const cmdkList = document.getElementById('cmdkList');
+
+let rootHandle = null;
+let items = [];
+let scanning = false;
+let query = '';
+
+function measureHeader() {
+  const h = appHeader.getBoundingClientRect().height + 16; // include top gap
+  document.documentElement.style.setProperty('--header-h', h + 'px');
+  const ch = cardHead.getBoundingClientRect().height;
+  document.documentElement.style.setProperty('--card-head-h', ch + 'px');
+}
+window.addEventListener('load', measureHeader);
+window.addEventListener('resize', measureHeader);
+
+function showToast(msg, type = 'info') {
+  const el = document.createElement('div'); el.className = `toast ${type}`; el.textContent = msg; toasts.appendChild(el);
+  setTimeout(() => { el.style.opacity = '0'; el.style.transform = 'translateY(6px)'; }, 2200);
+  setTimeout(() => { el.remove(); }, 2600);
+}
+
+function prettyBytes(bytes) { const units = ['B','KB','MB','GB','TB']; let i = 0; let n = bytes; while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; } return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${units[i]}`; }
+
+async function estimateDirSize(handle) { let total = 0; const stack = [handle]; while (stack.length) { const h = stack.pop(); for await (const entry of h.values()) { if (entry.kind === 'file') { try { const f = await entry.getFile(); total += f.size; } catch {} } else if (entry.kind === 'directory') { stack.push(entry); } } } return total; }
+
+async function* walk(handle, pathParts = []) {
+  const skipDeepDirs = new Set(['.git', '.hg', '.cache', '.next', '.turbo', 'dist', 'build', 'out', 'coverage', 'target']);
+  for await (const entry of handle.values()) {
+    const currentParts = pathParts.concat([entry.name]);
+    if (entry.kind === 'directory') {
+      // Always yield node_modules but do not descend into it here
+      if (entry.name === 'node_modules') {
+        yield { pathParts: currentParts, handle: entry, isDir: true };
+        continue;
+      }
+      // Skip descending into common heavy directories
+      if (skipDeepDirs.has(entry.name)) {
+        continue;
+      }
+      yield { pathParts: currentParts, handle: entry, isDir: true };
+      yield* walk(entry, currentParts);
+    } else {
+      yield { pathParts: currentParts, handle: entry, isDir: false };
+    }
+  }
+}
+
+function partsToPath(parts) { return '/' + parts.join('/'); }
+
+async function scanForNodeModules() {
+  if (!rootHandle) return [];
+  const seen = new Set();
+  const candidates = [];
+  for await (const node of walk(rootHandle)) {
+    if (node.isDir && node.pathParts[node.pathParts.length - 1] === 'node_modules') {
+      const projectParts = node.pathParts.slice(0, -1);
+      const projectKey = partsToPath(projectParts);
+      if (projectKey.includes('/node_modules/')) continue;
+      if (seen.has(projectKey)) continue; seen.add(projectKey);
+      candidates.push({ projectPath: projectKey, nodeModulesPath: partsToPath(node.pathParts), handle: node.handle });
+    }
+  }
+  const results = [];
+  let index = 0;
+  const concurrency = Math.min(6, candidates.length || 1);
+  async function worker() {
+    while (index < candidates.length) {
+      const i = index++; const c = candidates[i];
+      const size = await estimateDirSize(c.handle);
+      if (size > 0) {
+        results.push({ projectPath: c.projectPath, nodeModulesPath: c.nodeModulesPath, handle: c.handle, sizeBytes: size, sizePretty: prettyBytes(size), selected: false });
+      }
+    }
+  }
+  await Promise.all(Array.from({ length: concurrency }, () => worker()));
+  return results.sort((a, b) => b.sizeBytes - a.sizeBytes);
+}
+
+function getVisibleItems() { if (!query) return items.map((x, i) => ({ ...x, index: i })); const q = query.toLowerCase(); return items.map((x, i) => ({ ...x, index: i })).filter(x => x.projectPath.toLowerCase().includes(q) || x.nodeModulesPath.toLowerCase().includes(q)); }
+
+function updateSelectionHint() { const count = items.filter(x => x.selected).length; selectionHint.textContent = count ? `${count} selected` : ''; }
+
+function renderSkeletonRows(n = 10) { tbody.innerHTML = ''; for (let i = 0; i < n; i++) { const tr = document.createElement('tr'); tr.className = 'skeleton-row'; tr.innerHTML = `
+      <td></td>
+      <td>
+        <div class="skeleton" style="width: 46%; margin-bottom:6px"></div>
+        <div class="skeleton" style="width: 70%;"></div>
+      </td>
+      <td>
+        <div class="skeleton" style="width: 60%; margin-bottom:6px"></div>
+        <div class="skeleton" style="width: 84%;"></div>
+      </td>
+      <td>
+        <div class="skeleton" style="width: 36%; margin-left:auto"></div>
+      </td>
+    `; tbody.appendChild(tr); } }
+
+function render() {
+  tbody.innerHTML = '';
+  let totalBytes = 0;
+  const visible = getVisibleItems();
+  if (visible.length === 0 && !scanning) {
+    const tr = document.createElement('tr');
+    const td = document.createElement('td');
+    td.colSpan = 4;
+    td.className = 'empty-cell';
+    td.innerHTML = `
+      <div class="empty">
+        <div class="icon">🔍</div>
+        <div class="title">No results</div>
+        <div class="sub">Click Scan to find node_modules in the selected root.</div>
+      </div>
+    `;
+    tr.appendChild(td);
+    tbody.appendChild(tr);
+  } else {
+    for (const it of visible) {
+      totalBytes += it.sizeBytes || 0;
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td><input type="checkbox" data-idx="${it.index}" ${items[it.index].selected ? 'checked' : ''}></td>
+        <td><code>${it.projectPath}</code></td>
+        <td><code>${it.nodeModulesPath}</code></td>
+        <td><span class="size-badge">${it.sizePretty}</span></td>
+      `;
+      tbody.appendChild(tr);
+    }
+  }
+  const anySelected = items.some(x => x.selected);
+  deleteBtn.disabled = !anySelected;
+  prepPnpmBtn.disabled = !anySelected;
+  updateSelectionHint();
+  const suffix = query ? ` • filtered` : '';
+  summary.textContent = visible.length ? `${visible.length} results • ${prettyBytes(totalBytes)}${suffix}` : 'Ready';
+}
+
+tbody.addEventListener('change', (e) => { const t = e.target; if (t && t.matches('input[type=checkbox][data-idx]')) { const i = Number(t.getAttribute('data-idx')); items[i].selected = t.checked; render(); } });
+
+selectAll.addEventListener('change', () => { const v = selectAll.checked; items.forEach(it => it.selected = v); render(); });
+
+function startTopLoader() { topLoader.style.transform = 'scaleX(.2)'; setTimeout(() => { topLoader.style.transform = 'scaleX(.6)'; }, 200); }
+function endTopLoader() { topLoader.style.transform = 'scaleX(1)'; setTimeout(() => { topLoader.style.transform = 'scaleX(0)'; }, 350); }
+
+function setScanLoading(isLoading) {
+  if (isLoading) {
+    scanning = true;
+    scanBtn.classList.add('loading');
+    scanBtn.setAttribute('aria-busy', 'true');
+    scanSpin.style.display = 'inline-block';
+    scanLabel.textContent = 'Scanning…';
+  } else {
+    scanning = false;
+    scanBtn.classList.remove('loading');
+    scanBtn.setAttribute('aria-busy', 'false');
+    scanSpin.style.display = 'none';
+    scanLabel.textContent = 'Scan';
+  }
+}
+
+pickRootBtn.addEventListener('click', async () => { try { rootHandle = await window.showDirectoryPicker({ mode: 'readwrite' }); summary.textContent = 'Root selected'; showToast('Root folder selected', 'success'); measureHeader(); } catch (e) { if (e?.name !== 'AbortError') showToast('Folder selection failed', 'error'); } });
+
+searchInput.addEventListener('input', () => { query = searchInput.value.trim(); render(); });
+
+scanBtn.addEventListener('click', async () => {
+  if (!rootHandle) { showToast('Please pick a root folder first', 'error'); pickRootBtn.focus(); return; }
+  if (scanning) return;
+  setScanLoading(true);
+  deleteBtn.disabled = true; prepPnpmBtn.disabled = true; selectAll.checked = false;
+  renderSkeletonRows(10); summary.textContent = 'Scanning…'; startTopLoader();
+  try { items = await scanForNodeModules(); render(); showToast('Scan complete', 'success'); }
+  catch (e) { showToast('Scan failed', 'error'); }
+  finally { setScanLoading(false); endTopLoader(); }
+});
+
+deleteBtn.addEventListener('click', async () => {
+  const targets = items.filter(x => x.selected);
+  if (!targets.length) return;
+  if (!confirm(`Delete ${targets.length} node_modules directories?`)) return;
+  deleteBtn.disabled = true;
+  try {
+    const failed = [];
+    for (const t of targets) {
+      const ok = await deleteNodeModulesByProjectPath(t.projectPath);
+      if (!ok) failed.push(t.projectPath);
+    }
+    items = items.filter(x => !x.selected);
+    render();
+    if (failed.length) showToast(`Some deletions failed (${failed.length}). Check permissions.`, 'error');
+    else showToast('Deleted selected node_modules', 'success');
+  } catch (e) { showToast('Delete failed', 'error'); }
+  finally { deleteBtn.disabled = false; }
+});
+
+async function getProjectDirHandleByPathLike(pathStr) { const rel = pathStr.replace(/^\//, ''); const parts = rel.split('/').filter(Boolean); let dir = rootHandle; for (const part of parts) { dir = await dir.getDirectoryHandle(part, { create: false }); } return dir; }
+async function readJsonFile(fileHandle) { const file = await fileHandle.getFile(); const text = await file.text(); try { return JSON.parse(text); } catch { return null; } }
+async function writeTextFile(dirHandle, name, text) { const fh = await dirHandle.getFileHandle(name, { create: true }); const w = await fh.createWritable(); await w.write(text); await w.close(); }
+
+// Deletion helpers
+async function removeDirContents(dirHandle) {
+  for await (const entry of dirHandle.values()) {
+    if (entry.kind === 'directory') {
+      // Try recursive remove first
+      try { await dirHandle.removeEntry(entry.name, { recursive: true }); continue; } catch {}
+      // Manual descend
+      const sub = await dirHandle.getDirectoryHandle(entry.name);
+      await removeDirContents(sub);
+      try { await dirHandle.removeEntry(entry.name); } catch {}
+    } else {
+      try { await dirHandle.removeEntry(entry.name); } catch {}
+    }
+  }
+}
+async function deleteNodeModulesByProjectPath(projectPath) {
+  try {
+    const projectDir = await getProjectDirHandleByPathLike(projectPath);
+    // Fast path
+    try { await projectDir.removeEntry('node_modules', { recursive: true }); return true; } catch {}
+    // Fallback: clear and remove
+    const nm = await projectDir.getDirectoryHandle('node_modules', { create: false });
+    await removeDirContents(nm);
+    try { await projectDir.removeEntry('node_modules'); } catch {}
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+prepPnpmBtn.addEventListener('click', async () => {
+  const targets = items.filter(x => x.selected);
+  if (!targets.length) return;
+  prepPnpmBtn.disabled = true;
+  try {
+    for (const t of targets) {
+      const projectDir = await getProjectDirHandleByPathLike(t.projectPath);
+      try { await projectDir.removeEntry('package-lock.json'); } catch {}
+      try { await writeTextFile(projectDir, '.npmrc', 'shamefully-hoist=false\n'); } catch {}
+      try { const pkgHandle = await projectDir.getFileHandle('package.json'); const pkg = await readJsonFile(pkgHandle); if (pkg) { const desired = pkg.packageManager?.startsWith('pnpm@') ? pkg.packageManager : 'pnpm@9'; if (pkg.packageManager !== desired) { pkg.packageManager = desired; await writeTextFile(projectDir, 'package.json', JSON.stringify(pkg, null, 2) + '\n'); } } } catch {}
+    }
+    showToast('Projects prepared for pnpm. Run pnpm import/install.', 'success');
+  } catch (e) { showToast('Prepare failed', 'error'); }
+  finally { prepPnpmBtn.disabled = false; }
+});
+
+function openCmdk() { cmdk.classList.add('open'); cmdkInput.value = ''; renderCmdk(''); setTimeout(() => cmdkInput.focus(), 0); }
+function closeCmdk() { cmdk.classList.remove('open'); }
+cmdkBtn.addEventListener('click', openCmdk);
+cmdk.addEventListener('click', (e) => { if (e.target === cmdk) closeCmdk(); });
+
+const commands = [
+  { id: 'pick', label: 'Pick root folder', run: () => pickRootBtn.click() },
+  { id: 'scan', label: 'Scan for node_modules', run: () => scanBtn.click() },
+  { id: 'delete', label: 'Delete selected node_modules', run: () => deleteBtn.click() },
+  { id: 'prep', label: 'Prepare selected projects for pnpm', run: () => prepPnpmBtn.click() },
+  { id: 'focus-search', label: 'Focus search', run: () => { searchInput.focus(); } },
+];
+
+function renderCmdk(q) { cmdkList.innerHTML = ''; const ql = q.trim().toLowerCase(); const list = !ql ? commands : commands.filter(c => c.label.toLowerCase().includes(ql)); list.forEach((c, i) => { const el = document.createElement('div'); el.className = 'cmdk-item'; el.tabIndex = 0; el.textContent = c.label; el.dataset.index = String(i); el.addEventListener('click', () => { c.run(); closeCmdk(); }); el.addEventListener('keydown', (e) => { if (e.key === 'Enter') { c.run(); closeCmdk(); } }); cmdkList.appendChild(el); }); }
+cmdkInput.addEventListener('input', () => renderCmdk(cmdkInput.value));
+
+document.addEventListener('keydown', (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); openCmdk(); return; } if (e.key === '/' && document.activeElement !== searchInput && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') { e.preventDefault(); searchInput.focus(); return; } if (e.key === 'Escape' && cmdk.classList.contains('open')) { closeCmdk(); return; } });
+
+
+
+// PWA service worker registration
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('./sw.js').catch(() => {});
+  });
+}