pnpm-viz 1.0.1

package/README.md

@@ -0,0 +1,86 @@
+# pnpm-viz
+
+**Visual companion for pnpm**
+
+`pnpm-viz` parses your `pnpm-lock.yaml` and `pnpm-workspace.yaml` to generate interactive dependency graphs, version conflict heatmaps, and workspace flow diagrams.
+
+## Features
+
+- **Interactive CLI**: View workspace structure and duplicate stats directly in your terminal.
+- **Heatmap Analysis**: Identify duplicate packages and potential version conflicts.
+- **Web Dashboard**: Explore your dependency graph interactively in the browser.
+- **Export**: Export your dependency graph to JSON for further analysis.
+
+## Installation
+
+```bash
+npm install -g pnpm-viz
+# OR run directly
+npx pnpm-viz
+```
+
+## Usage
+
+### CLI Overview
+
+Run in your project root:
+
+```bash
+pnpm-viz .
+```
+
+### Heatmap Mode
+
+View duplicate packages in the terminal:
+
+```bash
+pnpm-viz . --heatmap
+```
+
+### Web Dashboard
+
+Launch the interactive web visualization:
+
+```bash
+pnpm-viz serve
+```
+
+### Export Data
+
+Export the parsed graph to JSON:
+
+```bash
+pnpm-viz export . -o graph.json
+```
+
+## Development
+
+1.  Clone the repo.
+2.  Install dependencies: `npm install`
+3.  Build the project: `npm run build`
+4.  Run locally: `node dist/cli/index.js .`
+
+
+## Publishing
+
+To publish a new version to npm:
+
+1.  **Login to npm** (if not already logged in):
+    ```bash
+    npm login
+    ```
+
+2.  **Bump the version**:
+    ```bash
+    npm version patch # or minor, major
+    ```
+
+3.  **Publish**:
+    ```bash
+    npm publish
+    ```
+    (This will automatically run `npm run build` before publishing)
+
+## License
+
+MIT

package/dist/cli/app.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Text, Box, Newline } from 'ink';
+import BigText from 'ink-big-text';
+import { LockfileParser } from '../core/parser.js';
+import { GraphAnalyzer } from '../core/analysis.js';
+import path from 'path';
+const App = ({ path: projectPath, heatmap }) => {
+    const [graph, setGraph] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const loadGraph = async () => {
+            try {
+                const lockfilePath = path.join(path.resolve(projectPath), 'pnpm-lock.yaml');
+                const parser = new LockfileParser(lockfilePath);
+                const g = await parser.parse();
+                setGraph(g);
+            }
+            catch (err) {
+                setError(err.message);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        loadGraph();
+    }, [projectPath]);
+    if (loading) {
+        return _jsx(Text, { children: "Loading pnpm-lock.yaml..." });
+    }
+    if (error) {
+        return _jsxs(Text, { color: "red", children: ["Error: ", error] });
+    }
+    if (!graph)
+        return null;
+    const analyzer = new GraphAnalyzer(graph);
+    const duplicates = analyzer.getDuplicates();
+    const stats = analyzer.getStats();
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "cyan", children: [_jsx(BigText, { text: "pnpm-viz", font: "chrome", colors: ['green', 'cyan'] }), _jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: "cyan", bold: true, children: "Analyzed Project:" }), " ", path.resolve(projectPath)] }), _jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: "\u2714 Packages:" }), " ", stats.totalPackages] }), _jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: "\u2714 Dependencies:" }), " ", stats.totalDependencies] }), _jsxs(Text, { children: [_jsxs(Text, { color: stats.duplicateCount > 0 ? "yellow" : "green", bold: true, children: [stats.duplicateCount > 0 ? "⚠" : "✔", " Duplicates:"] }), " ", stats.duplicateCount] })] }), heatmap ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, underline: true, color: "yellow", backgroundColor: "black", children: " DUPLICATE PACKAGES HEATMAP " }), _jsx(Newline, {}), duplicates.length === 0 ? (_jsx(Text, { color: "green", children: "No duplicates found. Great job!" })) : (duplicates.slice(0, 10).map((dup, i) => (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", width: "80%", children: [_jsxs(Text, { bold: true, children: [i + 1, ". ", dup.name] }), _jsxs(Box, { children: [_jsxs(Text, { color: "red", children: [" ", dup.count, " versions "] }), _jsxs(Text, { dimColor: true, children: [" (", dup.versions.join(', '), ")"] })] })] }, dup.name)))), duplicates.length > 10 && _jsxs(Text, { dimColor: true, children: ["...and ", duplicates.length - 10, " more."] })] })) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, underline: true, color: "cyan", children: "WORKSPACE IMPORTERS" }), Object.values(graph.nodes).filter(n => n.path && !n.path.includes('node_modules') && n.id !== 'root').map(node => (_jsxs(Text, { children: [" \u2022 ", node.name] }, node.id))), _jsx(Newline, {}), _jsx(Text, { dimColor: true, children: "Run with --heatmap to see duplicates." }), _jsx(Text, { dimColor: true, children: "Run 'pnpm-viz serve' to view graph." })] }))] }));
+};
+export default App;

package/dist/cli/export.js

@@ -0,0 +1,16 @@
+import fs from 'fs';
+import path from 'path';
+import { LockfileParser } from '../core/parser.js';
+export async function exportGraph(projectPath, outputFile) {
+    try {
+        const lockfilePath = path.join(path.resolve(projectPath), 'pnpm-lock.yaml');
+        const parser = new LockfileParser(lockfilePath);
+        const graph = await parser.parse();
+        fs.writeFileSync(outputFile, JSON.stringify(graph, null, 2));
+        console.log(`Graph exported to ${outputFile}`);
+    }
+    catch (err) {
+        console.error('Export failed:', err.message);
+        process.exit(1);
+    }
+}

package/dist/cli/index.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from 'ink';
+import { Command } from 'commander';
+import App from './app.js';
+const program = new Command();
+program
+    .name('pnpm-viz')
+    .description('Visualize your pnpm dependencies')
+    .version('1.0.0')
+    .argument('[path]', 'Path to the project', '.')
+    .option('--heatmap', 'Show heatmap mode')
+    .action((path, options) => {
+    render(_jsx(App, { path: path, heatmap: options.heatmap }));
+});
+program
+    .command('serve')
+    .description('Launch the web dashboard')
+    .argument('[path]', 'Path to the project', '.')
+    .option('-p, --port <number>', 'Port to run on', '3000')
+    .action((path, options) => {
+    import('./server.js').then(module => {
+        module.startServer(path, parseInt(options.port));
+    });
+});
+program
+    .command('export')
+    .description('Export graph as JSON')
+    .argument('[path]', 'Path to the project', '.')
+    .option('-o, --output <file>', 'Output file path', 'graph.json')
+    .action((path, options) => {
+    import('./export.js').then(module => {
+        module.exportGraph(path, options.output);
+    });
+});
+program.parse();

package/dist/cli/server.js

@@ -0,0 +1,89 @@
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import open from 'open';
+import { LockfileParser } from '../core/parser.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// dist/cli/server.js -> dist/web
+const WEB_ROOT = path.resolve(__dirname, '../../dist/web');
+export async function startServer(projectPath, port = 3000) {
+    const server = http.createServer(async (req, res) => {
+        // API Endpoint
+        if (req.url === '/api/graph') {
+            try {
+                const lockfilePath = path.join(path.resolve(projectPath), 'pnpm-lock.yaml');
+                const parser = new LockfileParser(lockfilePath);
+                const graph = await parser.parse();
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify(graph));
+            }
+            catch (err) {
+                res.writeHead(500, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: err.message }));
+            }
+            return;
+        }
+        // Static File Serving
+        let filePath = path.join(WEB_ROOT, req.url === '/' ? 'index.html' : req.url || 'index.html');
+        // Security check to prevent directory traversal
+        if (!filePath.startsWith(WEB_ROOT)) {
+            res.writeHead(403);
+            res.end('Forbidden');
+            return;
+        }
+        const extname = path.extname(filePath);
+        let contentType = 'text/html';
+        switch (extname) {
+            case '.js':
+                contentType = 'text/javascript';
+                break;
+            case '.css':
+                contentType = 'text/css';
+                break;
+            case '.json':
+                contentType = 'application/json';
+                break;
+            case '.png':
+                contentType = 'image/png';
+                break;
+            case '.jpg':
+                contentType = 'image/jpg';
+                break;
+            case '.svg':
+                contentType = 'image/svg+xml';
+                break;
+        }
+        fs.readFile(filePath, (error, content) => {
+            if (error) {
+                if (error.code === 'ENOENT') {
+                    // SPA Fallback necessary? React Router? Not using router yet.
+                    // basic fallback
+                    fs.readFile(path.join(WEB_ROOT, 'index.html'), (err, content) => {
+                        if (err) {
+                            res.writeHead(404);
+                            res.end('Not Found');
+                        }
+                        else {
+                            res.writeHead(200, { 'Content-Type': 'text/html' });
+                            res.end(content, 'utf-8');
+                        }
+                    });
+                }
+                else {
+                    res.writeHead(500);
+                    res.end('Server Error: ' + error.code);
+                }
+            }
+            else {
+                res.writeHead(200, { 'Content-Type': contentType });
+                res.end(content, 'utf-8');
+            }
+        });
+    });
+    server.listen(port, () => {
+        console.log(`Server running at http://localhost:${port}/`);
+        open(`http://localhost:${port}/`);
+    });
+}

package/dist/core/analysis.js

@@ -0,0 +1,37 @@
+export class GraphAnalyzer {
+    constructor(graph) {
+        this.graph = graph;
+    }
+    getDuplicates() {
+        const packageMap = new Map();
+        Object.values(this.graph.nodes).forEach(node => {
+            if (node.id === 'root' || node.path === '.')
+                return;
+            const name = node.name;
+            const version = node.version;
+            if (!packageMap.has(name)) {
+                packageMap.set(name, new Set());
+            }
+            packageMap.get(name)?.add(version);
+        });
+        const duplicates = [];
+        packageMap.forEach((versions, name) => {
+            if (versions.size > 1) {
+                duplicates.push({
+                    name,
+                    versions: Array.from(versions),
+                    count: versions.size
+                });
+            }
+        });
+        // Sort by count descending
+        return duplicates.sort((a, b) => b.count - a.count);
+    }
+    getStats() {
+        return {
+            totalPackages: Object.keys(this.graph.nodes).length,
+            totalDependencies: this.graph.edges.length,
+            duplicateCount: this.getDuplicates().length
+        };
+    }
+}

package/dist/core/parser.js

@@ -0,0 +1,157 @@
+import fs from 'fs';
+import yaml from 'js-yaml';
+import path from 'path';
+export class LockfileParser {
+    constructor(lockfilePath) {
+        this.lockfilePath = lockfilePath;
+    }
+    async parse() {
+        const content = fs.readFileSync(this.lockfilePath, 'utf8');
+        const lockfile = yaml.load(content);
+        const graph = {
+            nodes: {},
+            edges: [],
+            root: 'root',
+        };
+        // Handle root dependencies (monorepo root or single package)
+        // Note: This is a simplified parser. Real pnpm lockfiles are complex.
+        // We strictly follow pnpm v6+ lockfile structure (lockfileVersion 5.4, 6.0, 9.0 etc)
+        // Add logic to traverse 'importers' (workspaces) or root 'dependencies'
+        // Check for workspace file
+        const workspacePath = path.join(path.dirname(this.lockfilePath), 'pnpm-workspace.yaml');
+        let workspacePackages = [];
+        if (fs.existsSync(workspacePath)) {
+            try {
+                const workspaceContent = fs.readFileSync(workspacePath, 'utf8');
+                const workspace = yaml.load(workspaceContent);
+                if (workspace && Array.isArray(workspace.packages)) {
+                    workspacePackages = workspace.packages;
+                }
+            }
+            catch (e) {
+                // ignore invalid workspace file
+            }
+        }
+        if (lockfile.importers) {
+            // It's a workspace
+            for (const [importerPath, importer] of Object.entries(lockfile.importers)) {
+                const nodeId = importerPath === '.' ? 'root' : importerPath;
+                // Try to find package.json for better name
+                let packageName = path.basename(importerPath === '.' ? process.cwd() : importerPath);
+                const packageJsonPath = path.join(path.dirname(this.lockfilePath), importerPath, 'package.json');
+                if (fs.existsSync(packageJsonPath)) {
+                    try {
+                        const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+                        if (pkg.name)
+                            packageName = pkg.name;
+                    }
+                    catch (e) { /* ignore */ }
+                }
+                const node = {
+                    id: nodeId,
+                    name: packageName,
+                    version: '0.0.0',
+                    path: importerPath,
+                    dependencies: [],
+                };
+                graph.nodes[nodeId] = node;
+                if (importer.dependencies) {
+                    this.processDeps(importer.dependencies, nodeId, graph, 'prod');
+                }
+                if (importer.devDependencies) {
+                    this.processDeps(importer.devDependencies, nodeId, graph, 'dev');
+                }
+            }
+        }
+        else {
+            // Single package
+            let packageName = 'root';
+            const packageJsonPath = path.join(path.dirname(this.lockfilePath), 'package.json');
+            if (fs.existsSync(packageJsonPath)) {
+                try {
+                    const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+                    if (pkg.name)
+                        packageName = pkg.name;
+                }
+                catch (e) { /* ignore */ }
+            }
+            const node = {
+                id: 'root',
+                name: packageName,
+                version: '0.0.0',
+                path: '.',
+                dependencies: [],
+            };
+            graph.nodes['root'] = node;
+            if (lockfile.dependencies) {
+                this.processDeps(lockfile.dependencies, 'root', graph, 'prod');
+            }
+            if (lockfile.packages) {
+                // in some lockfile versions, root deps are just in packages but referenced from '.' entry in importers
+                // if strictly checking 'dependencies' on root object fails, might be lockfile v6 style where root is in importers['.']
+            }
+        }
+        // Parse 'packages' section (the store)
+        if (lockfile.packages) {
+            for (const [pkgPath, pkg] of Object.entries(lockfile.packages)) {
+                const nodeId = pkgPath;
+                const node = {
+                    id: nodeId,
+                    name: this.extractName(pkgPath),
+                    version: this.extractVersion(pkgPath),
+                    path: pkgPath,
+                    dependencies: [],
+                    isDev: pkg.dev
+                };
+                graph.nodes[nodeId] = node;
+                if (pkg.dependencies) {
+                    this.processDeps(pkg.dependencies, nodeId, graph, 'prod');
+                }
+                if (pkg.peerDependencies) {
+                    this.processDeps(pkg.peerDependencies, nodeId, graph, 'peer');
+                }
+            }
+        }
+        return graph;
+    }
+    processDeps(deps, parentId, graph, type) {
+        for (const [name, ref] of Object.entries(deps)) {
+            // logic to resolve ref to a package path in 'packages'
+            // pnpm refs can be: '1.2.3', '/foo/1.2.3', 'link:../foo'
+            let targetId = ref;
+            if (ref.startsWith('link:')) {
+                // Local workspace link
+                // For now, simple resolution
+                targetId = ref.replace('link:', '');
+                // In monorepos, this might need normalization to match importer keys
+            }
+            else if (ref.includes('(')) {
+                // peer dep resolution, skip logic for now or clean
+                targetId = ref.split('(')[0];
+            }
+            // Trying to map simplified ref to package ID if possible
+            // In pnpm lockfile v6, keys in 'packages' are often just the resolution string (e.g. /@types/node@18.0.0)
+            // We need to match this. 
+            // For now, create an edge. Whether the node exists or not will be checked by visualization
+            graph.edges.push({ source: parentId, target: targetId, type });
+            // Add dep to node (redundant but useful)
+            if (graph.nodes[parentId]) {
+                graph.nodes[parentId].dependencies.push(targetId);
+            }
+        }
+    }
+    extractName(pkgPath) {
+        // Very naive extraction, pnpm paths vary wildly
+        // /@babel/core/7.1.0 -> @babel/core
+        // /foo@1.0.0 -> foo
+        const parts = pkgPath.split('/');
+        if (parts[1]?.startsWith('@')) {
+            return `${parts[1]}/${parts[2].split('@')[0]}`;
+        }
+        return parts[1]?.split('@')[0] || pkgPath;
+    }
+    extractVersion(pkgPath) {
+        const parts = pkgPath.split('@');
+        return parts[parts.length - 1] || '0.0.0';
+    }
+}

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};