easy-dep-graph 1.0.0 → 1.1.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 danisss9
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 danisss9
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,87 +1,130 @@
-# Easy Dep Graph
-
-Easily see the dependency graph of your npm project!
-
-## Table of Contents
-
-- [Easy Dep Graph](#easy-dep-graph)
-  - [Table of Contents](#table-of-contents)
-  - [Install](#install)
-  - [Use](#use)
-  - [Arguments](#arguments)
-    - [Packages](#packages)
-    - [Package Dependents](#package-dependents)
-    - [Port](#port)
-    - [No Open](#no-open)
-  - [Changelog](#changelog)
-  - [FAQs](#faqs)
-
-## Install
-
-```cmd
-npm install -g easy-dep-graph
-```
-
-## Use
-
-Run the following command on the folder where you package.json is:
-
-```cmd
-npx easy-dep-graph
-```
-
-## Arguments
-
-### Packages
-
-A list of packages to show on the graph separated by ','. (By default it shows all packages)
-
-Command: `--packages <packages names>` 
-
-Example:
-```cmd
-npx easy-dep-graph --packages open,mustache,fastify
-```
-
-### Package Dependents
-
-This option will only show on graph the packages that depend on the submited package.
-
-Command: `--package-dependents <package name>` 
-
-Example:
-```cmd
-npx easy-dep-graph --package-dependents is-docker
-```
-
-### Port
-
-The port number to be used when serving the dependency graph. (Default is 8080)
-
-Command: `--port <port number>` 
-
-Example:
-```cmd
-npx easy-dep-graph --port 8000
-```
-
-### No Open
-
-Flag to not open the browser after the depedency graph is done.
-
-Command: `--no-open` 
-
-Example:
-```cmd
-npx easy-dep-graph --no-open
-```
-
-## Changelog
-
-**Version 1.0:**
-
-- published library
-
-## FAQs
-
-No FAQs for now. (⌐■_■)
+# Easy Dep Graph
+
+Easily see the dependency graph of your npm project!
+
+## Table of Contents
+
+- [Easy Dep Graph](#easy-dep-graph)
+  - [Table of Contents](#table-of-contents)
+  - [Install](#install)
+  - [Use](#use)
+  - [Arguments](#arguments)
+    - [Peer Dependencies](#peer-dependencies)
+    - [Packages](#packages)
+    - [Package Dependents](#package-dependents)
+    - [Port](#port)
+    - [No Open](#no-open)
+    - [No Force Layout](#no-force-layout)
+  - [Changelog](#changelog)
+  - [FAQs](#faqs)
+
+## Install
+
+```cmd
+npm install -g easy-dep-graph
+```
+
+## Use
+
+Run the following command on the folder where you package.json is:
+
+```cmd
+npx easy-dep-graph
+```
+
+## Arguments
+
+### Peer Dependencies
+
+Display a comprehensive view of all peer dependencies required by your project's packages. This includes:
+
+- Package names and required versions
+- Which packages require each peer dependency
+- Automatic conflict detection when multiple incompatible versions are required
+- Installation status (showing which peer dependencies are already installed)
+- One-click installation for missing peer dependencies
+
+Command: `--peer-dependencies`
+
+Example:
+
+```cmd
+npx easy-dep-graph --peer-dependencies
+```
+
+### Packages
+
+A list of packages to show on the graph separated by ','. (By default it shows all packages)
+
+Command: `--packages <packages names>`
+
+Example:
+
+```cmd
+npx easy-dep-graph --packages open,mustache,fastify
+```
+
+### Package Dependents
+
+This option will only show on graph the packages that depend on the submited package.
+
+Command: `--package-dependents <package name>`
+
+Example:
+
+```cmd
+npx easy-dep-graph --package-dependents is-docker
+```
+
+### Port
+
+The port number to be used when serving the dependency graph. (Default is 8080)
+
+Command: `--port <port number>`
+
+Example:
+
+```cmd
+npx easy-dep-graph --port 8000
+```
+
+### No Open
+
+Flag to not open the browser after the depedency graph is done.
+
+Command: `--no-open`
+
+Example:
+
+```cmd
+npx easy-dep-graph --no-open
+```
+
+### No Force Layout
+
+Flag to skip applying the force-directed layout algorithm to the dependency graph. When this flag is used, the graph will display nodes in their initial random positions without automatic layout optimization. This can be useful for very large graphs where the layout calculation might take too long, or when you want to manually arrange nodes.
+
+Command: `--no-force-layout`
+
+Example:
+
+```cmd
+npx easy-dep-graph --no-force-layout
+```
+
+## Changelog
+
+**Version 1.1:**
+
+- Added `--peer-dependencies` flag to display all peer dependencies in your project
+- Interactive peer dependency viewer with one-click installation
+- Automatic version conflict detection for peer dependencies
+- Replaced vis-network with sigma.js for dependency view
+
+**Version 1.0:**
+
+- published library
+
+## FAQs
+
+No FAQs for now. (⌐■_■)

package/bin/index.js

@@ -3,116 +3,724 @@ import shell from "shelljs";
 import mustache from "mustache";
 import fastify from "fastify";
 import open from "open";
+import fs from "node:fs";
+import path from "node:path";
 let flatDeps;
 void (async function main() {
-    // List of packages user wants to see the dependencies
-    const packagesArgIndex = process.argv.findIndex((a) => a.toLowerCase() === "--packages");
-    const packagesFilter = packagesArgIndex !== -1 ? process.argv[packagesArgIndex + 1] : undefined;
-    // Only get the dependents of a specific package
-    const packageArgIndex = process.argv.findIndex((a) => a.toLowerCase() === "--package-dependents");
-    const packageName = packageArgIndex !== -1 ? process.argv[packageArgIndex + 1] : undefined;
-    // Get port number
-    const portArgIndex = process.argv.findIndex((a) => a.toLowerCase() === "--port");
-    const port = portArgIndex !== -1 ? +process.argv[portArgIndex + 1] : 8080;
-    // Get if should not open browser
-    const shouldOpenBrowser = process.argv.findIndex((a) => a.toLowerCase() === "--no-open") === -1;
-    // Run npm list command
-    const result = shell.exec(`npm list --json ${packageName ?? "--all"}`, {
-        windowsHide: true,
-        silent: true,
-    });
-    // Parse the result to a JSON object
-    const packageInfo = JSON.parse(result.stdout);
-    console.log(`Generating dependency graph for: "${packageInfo.name}"...`);
-    // Filter dependencies if needed
-    if (packagesFilter != null) {
-        const packagesFilterList = packagesFilter.split(",").map((d) => d.trim());
-        for (const key of Object.keys(packageInfo.dependencies)) {
-            if (!packagesFilterList.includes(key)) {
-                delete packageInfo.dependencies[key];
-            }
-        }
+  // Check if peer dependencies mode
+  const peerDependenciesMode =
+    process.argv.findIndex((a) => a.toLowerCase() === "--peer-dependencies") !==
+    -1;
+  // List of packages user wants to see the dependencies
+  const packagesArgIndex = process.argv.findIndex(
+    (a) => a.toLowerCase() === "--packages",
+  );
+  const packagesFilter =
+    packagesArgIndex !== -1 ? process.argv[packagesArgIndex + 1] : undefined;
+  // Only get the dependents of a specific package
+  const packageArgIndex = process.argv.findIndex(
+    (a) => a.toLowerCase() === "--package-dependents",
+  );
+  const packageName =
+    packageArgIndex !== -1 ? process.argv[packageArgIndex + 1] : undefined;
+  // Get port number
+  const portArgIndex = process.argv.findIndex(
+    (a) => a.toLowerCase() === "--port",
+  );
+  const port = portArgIndex !== -1 ? +process.argv[portArgIndex + 1] : 8080;
+  // Get if should not open browser
+  const shouldOpenBrowser =
+    process.argv.findIndex((a) => a.toLowerCase() === "--no-open") === -1;
+  // Get if should not apply force layout
+  const shouldApplyForceLayout =
+    process.argv.findIndex((a) => a.toLowerCase() === "--no-force-layout") ===
+    -1;
+  if (peerDependenciesMode) {
+    await runPeerDependenciesMode(port, shouldOpenBrowser);
+    return;
+  }
+  // Run npm list command
+  const result = shell.exec(`npm list --json ${packageName ?? "--all"}`, {
+    windowsHide: true,
+    silent: true,
+  });
+  // Parse the result to a JSON object
+  const packageInfo = JSON.parse(result.stdout);
+  console.log(`Generating dependency graph for: "${packageInfo.name}"...`);
+  // Filter dependencies if needed
+  if (packagesFilter != null) {
+    const packagesFilterList = packagesFilter.split(",").map((d) => d.trim());
+    for (const key of Object.keys(packageInfo.dependencies)) {
+      if (!packagesFilterList.includes(key)) {
+        delete packageInfo.dependencies[key];
+      }
     }
-    // Flat the dependencies from npm list
-    flatDeps = {};
-    flatDepsRecursive(packageInfo.dependencies);
-    // Turn deps into nodes and edges
-    const data = {
-        name: packageInfo.name,
-        nodes: JSON.stringify(Object.entries(flatDeps).map((dep) => ({
-            id: dep[0],
-            label: `${dep[0]} V${dep[1].version}`,
-            color: { border: dep[1].isRoot ? "green" : "blue" },
-        }))),
-        edges: JSON.stringify(Object.entries(flatDeps)
-            .filter((dep) => !!dep[1].dependencies.length)
-            .flatMap((dep) => dep[1].dependencies.map((d) => ({
-            from: dep[0],
-            to: d,
-            arrows: "to",
-        })))),
-    };
-    // Render the UI using mustache
-    const html = mustache.render(getTemplate(), data);
-    // Initialize server to serve graph
-    const app = fastify({
-        logger: false,
-    });
-    app.get("/", (_req, resp) => resp.type("text/html").send(html));
-    // Run the server
-    app.listen({ port }, (err, address) => {
-        if (err)
-            throw err;
-        console.log(`Done! Visit "${address}" to see dependecy graph.`);
-        if (shouldOpenBrowser)
-            open(address);
-    });
+  }
+  // Flat the dependencies from npm list
+  flatDeps = {};
+  flatDepsRecursive(packageInfo.dependencies);
+  // Turn deps into nodes and edges
+  const nodeEntries = Object.entries(flatDeps);
+  const nodeCount = nodeEntries.length;
+  const data = {
+    name: packageInfo.name,
+    applyForceLayout: shouldApplyForceLayout,
+    nodes: JSON.stringify(
+      nodeEntries.map((dep, index) => {
+        return {
+          key: dep[0],
+          label: `${dep[0]} V${dep[1].version}`,
+          x: Math.random() * 100 - 50,
+          y: Math.random() * 100 - 50,
+          size: 10,
+          color: dep[1].isRoot ? "#22c55e" : "#3b82f6",
+        };
+      }),
+    ),
+    edges: JSON.stringify(
+      Object.entries(flatDeps)
+        .filter((dep) => !!dep[1].dependencies.length)
+        .flatMap((dep) =>
+          dep[1].dependencies.map((d) => ({
+            source: dep[0],
+            target: d,
+          })),
+        ),
+    ),
+  };
+  // Render the UI using mustache
+  const html = mustache.render(getTemplate(), data);
+  // Initialize server to serve graph
+  const app = fastify({
+    logger: false,
+  });
+  app.get("/", (_req, resp) => resp.type("text/html").send(html));
+  // Run the server
+  app.listen({ port }, (err, address) => {
+    if (err) throw err;
+    console.log(`Done! Visit "${address}" to see dependecy graph.`);
+    if (shouldOpenBrowser) open(address);
+  });
 })();
 function flatDepsRecursive(deps, parentDepName) {
-    if (deps == null)
-        return;
-    for (const dep of Object.entries(deps)) {
-        const depName = dep[0];
-        const depInfo = dep[1];
-        const isRoot = parentDepName == null;
-        if (!isRoot) {
-            const parentDep = flatDeps[parentDepName];
-            parentDep.dependencies.push(depName);
-        }
-        if (flatDeps[depName] == null) {
-            flatDeps[depName] = {
-                version: depInfo.version,
-                isRoot,
-                dependencies: [],
+  if (deps == null) return;
+  for (const dep of Object.entries(deps)) {
+    const depName = dep[0];
+    const depInfo = dep[1];
+    const isRoot = parentDepName == null;
+    if (!isRoot) {
+      const parentDep = flatDeps[parentDepName];
+      parentDep.dependencies.push(depName);
+    }
+    if (flatDeps[depName] == null) {
+      flatDeps[depName] = {
+        version: depInfo.version,
+        isRoot,
+        dependencies: [],
+      };
+    }
+    flatDepsRecursive(depInfo.dependencies, depName);
+  }
+}
+async function runPeerDependenciesMode(port, shouldOpenBrowser) {
+  console.log("Analyzing peer dependencies...");
+  // Get the current project's package.json
+  const packageJsonPath = path.join(process.cwd(), "package.json");
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+  const installedPackages = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+  };
+  // Run npm list to get all dependencies
+  const result = shell.exec("npm list --json --all", {
+    windowsHide: true,
+    silent: true,
+  });
+  const packageInfo = JSON.parse(result.stdout);
+  // Collect all package names from the dependency tree
+  const allPackageNames = new Set();
+  collectAllPackageNames(packageInfo.dependencies, allPackageNames);
+  // Collect all peer dependencies by reading package.json files
+  const peerDeps = collectPeerDependenciesFromNodeModules(allPackageNames);
+  // Resolve versions
+  const peerDepsList = Object.entries(peerDeps).map(([name, info]) => {
+    const resolvedVersion = resolveVersion(info.versions);
+    const isInstalled = installedPackages[name] !== undefined;
+    return {
+      name,
+      version: resolvedVersion.version,
+      isConflict: resolvedVersion.isConflict,
+      requiredBy: info.requiredBy,
+      isInstalled,
+    };
+  });
+  // Sort by name
+  peerDepsList.sort((a, b) => a.name.localeCompare(b.name));
+  const data = {
+    projectName: packageJson.name,
+    peerDeps: peerDepsList,
+  };
+  // Render the UI using mustache
+  const html = mustache.render(getPeerDepsTemplate(), data);
+  // Initialize server to serve graph
+  const app = fastify({
+    logger: false,
+  });
+  app.get("/", (_req, resp) => resp.type("text/html").send(html));
+  app.post("/install", async (req, resp) => {
+    const { package: pkg, version } = req.body;
+    console.log(`Installing ${pkg}@${version}...`);
+    const installResult = shell.exec(`npm install ${pkg}@${version}`, {
+      windowsHide: true,
+      silent: true,
+    });
+    if (installResult.code === 0) {
+      console.log(`Successfully installed ${pkg}@${version}`);
+      return {
+        success: true,
+        message: `Successfully installed ${pkg}@${version}`,
+      };
+    } else {
+      console.error(`Failed to install ${pkg}@${version}`);
+      return {
+        success: false,
+        message: installResult.stderr || "Installation failed",
+      };
+    }
+  });
+  // Run the server
+  app.listen({ port }, (err, address) => {
+    if (err) throw err;
+    console.log(`Done! Visit "${address}" to see peer dependencies.`);
+    if (shouldOpenBrowser) open(address);
+  });
+}
+function collectAllPackageNames(deps, packageNames) {
+  if (deps == null) return;
+  for (const [depName, depInfo] of Object.entries(deps)) {
+    packageNames.add(depName);
+    if (depInfo.dependencies) {
+      collectAllPackageNames(depInfo.dependencies, packageNames);
+    }
+  }
+}
+function collectPeerDependenciesFromNodeModules(packageNames) {
+  const peerDeps = {};
+  const nodeModulesPath = path.join(process.cwd(), "node_modules");
+  for (const packageName of packageNames) {
+    try {
+      const pkgJsonPath = path.join(
+        nodeModulesPath,
+        packageName,
+        "package.json",
+      );
+      if (!fs.existsSync(pkgJsonPath)) {
+        continue;
+      }
+      const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
+      if (pkgJson.peerDependencies) {
+        for (const [peerDepName, peerDepVersion] of Object.entries(
+          pkgJson.peerDependencies,
+        )) {
+          if (!peerDeps[peerDepName]) {
+            peerDeps[peerDepName] = {
+              versions: [],
+              requiredBy: [],
             };
+          }
+          const versionStr = peerDepVersion;
+          if (!peerDeps[peerDepName].versions.includes(versionStr)) {
+            peerDeps[peerDepName].versions.push(versionStr);
+          }
+          if (!peerDeps[peerDepName].requiredBy.includes(packageName)) {
+            peerDeps[peerDepName].requiredBy.push(packageName);
+          }
         }
-        flatDepsRecursive(depInfo.dependencies, depName);
+      }
+    } catch (error) {
+      // Skip packages that can't be read
+      console.warn(`Warning: Could not read package.json for ${packageName}`);
     }
+  }
+  return peerDeps;
+}
+function collectPeerDependencies(deps, peerDeps = {}, parentName) {
+  if (deps == null) return peerDeps;
+  for (const [depName, depInfo] of Object.entries(deps)) {
+    // Check if this dependency has peer dependencies
+    if (depInfo.peerDependencies) {
+      for (const [peerDepName, peerDepVersion] of Object.entries(
+        depInfo.peerDependencies,
+      )) {
+        if (!peerDeps[peerDepName]) {
+          peerDeps[peerDepName] = {
+            versions: [],
+            requiredBy: [],
+          };
+        }
+        if (!peerDeps[peerDepName].versions.includes(peerDepVersion)) {
+          peerDeps[peerDepName].versions.push(peerDepVersion);
+        }
+        if (!peerDeps[peerDepName].requiredBy.includes(depName)) {
+          peerDeps[peerDepName].requiredBy.push(depName);
+        }
+      }
+    }
+    // Recursively check nested dependencies
+    if (depInfo.dependencies) {
+      collectPeerDependencies(depInfo.dependencies, peerDeps, depName);
+    }
+  }
+  return peerDeps;
+}
+function resolveVersion(versions) {
+  if (versions.length === 0) {
+    return { version: "*", isConflict: false };
+  }
+  if (versions.length === 1) {
+    return { version: versions[0], isConflict: false };
+  }
+  // Try to find a compatible version
+  // For simplicity, if all versions are the same, use that
+  const uniqueVersions = [...new Set(versions)];
+  if (uniqueVersions.length === 1) {
+    return { version: uniqueVersions[0], isConflict: false };
+  }
+  // Check if all are compatible (simple heuristic: same major version for ^)
+  const allCompatible = uniqueVersions.every((v) => {
+    const baseVersion = uniqueVersions[0];
+    // If both start with ^, check major version
+    if (v.startsWith("^") && baseVersion.startsWith("^")) {
+      const vMajor = v.substring(1).split(".")[0];
+      const baseMajor = baseVersion.substring(1).split(".")[0];
+      return vMajor === baseMajor;
+    }
+    // If both are exact versions, they must match
+    return v === baseVersion;
+  });
+  if (allCompatible && uniqueVersions[0].startsWith("^")) {
+    // Return the highest version requirement
+    const sorted = [...uniqueVersions].sort((a, b) => {
+      const aVer = a.substring(1);
+      const bVer = b.substring(1);
+      return bVer.localeCompare(aVer, undefined, { numeric: true });
+    });
+    return { version: sorted[0], isConflict: false };
+  }
+  // Conflict detected
+  return { version: uniqueVersions.join(" | "), isConflict: true };
+}
+function getPeerDepsTemplate() {
+  return `
+<html>
+  <head>
+    <title>{{projectName}} - Peer Dependencies</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        padding: 2rem;
+      }
+      
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      
+      h1 {
+        color: white;
+        margin-bottom: 2rem;
+        font-size: 2.5rem;
+        text-align: center;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+      }
+      
+      .peer-deps-list {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+        overflow: hidden;
+      }
+      
+      .peer-dep-item {
+        padding: 1.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        transition: background-color 0.2s;
+      }
+      
+      .peer-dep-item:last-child {
+        border-bottom: none;
+      }
+      
+      .peer-dep-item:hover {
+        background-color: #f9fafb;
+      }
+      
+      .peer-dep-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+      }
+      
+      .peer-dep-name {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #1f2937;
+      }
+      
+      .peer-dep-version {
+        font-family: 'Courier New', monospace;
+        padding: 0.25rem 0.75rem;
+        background: #f3f4f6;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        color: #4b5563;
+      }
+      
+      .peer-dep-version.conflict {
+        background: #fee2e2;
+        color: #dc2626;
+        font-weight: 600;
+      }
+      
+      .peer-dep-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
+      
+      .required-by {
+        flex: 1;
+        min-width: 200px;
+      }
+      
+      .required-by-label {
+        font-size: 0.75rem;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: 0.25rem;
+      }
+      
+      .required-by-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+      
+      .required-by-tag {
+        display: inline-block;
+        padding: 0.25rem 0.5rem;
+        background: #dbeafe;
+        color: #1e40af;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-weight: 500;
+      }
+      
+      .install-btn {
+        padding: 0.5rem 1.5rem;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
+      }
+      
+      .install-btn:hover {
+        background: #2563eb;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
+      }
+      
+      .install-btn:active {
+        transform: translateY(0);
+      }
+      
+      .install-btn:disabled {
+        background: #9ca3af;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+      }
+      
+      .installed-badge {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        background: #d1fae5;
+        color: #065f46;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 600;
+      }
+      
+      .checkmark {
+        color: #10b981;
+        font-size: 1.25rem;
+      }
+      
+      .message {
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        border-radius: 4px;
+        font-size: 0.875rem;
+        display: none;
+      }
+      
+      .message.success {
+        background: #d1fae5;
+        color: #065f46;
+        display: block;
+      }
+      
+      .message.error {
+        background: #fee2e2;
+        color: #dc2626;
+        display: block;
+      }
+
+      .no-deps {
+        padding: 3rem;
+        text-align: center;
+        color: #6b7280;
+        font-size: 1.125rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Peer Dependencies for {{projectName}}</h1>
+      <div class="peer-deps-list">
+        {{#peerDeps}}
+        <div class="peer-dep-item">
+          <div class="peer-dep-header">
+            <span class="peer-dep-name">{{name}}</span>
+            <span class="peer-dep-version {{#isConflict}}conflict{{/isConflict}}">
+              {{#isConflict}}Conflict: {{/isConflict}}{{version}}
+            </span>
+          </div>
+          <div class="peer-dep-info">
+            <div class="required-by">
+              <div class="required-by-label">Required by:</div>
+              <div class="required-by-list">
+                {{#requiredBy}}
+                <span class="required-by-tag">{{.}}</span>
+                {{/requiredBy}}
+              </div>
+            </div>
+            <div class="action-container">
+              {{#isInstalled}}
+              <div class="installed-badge">
+                <span class="checkmark">✓</span>
+                Installed
+              </div>
+              {{/isInstalled}}
+              {{^isInstalled}}
+              <button class="install-btn" onclick="installPackage('{{name}}', '{{version}}', this)">
+                npm install
+              </button>
+              <div class="message" id="msg-{{name}}"></div>
+              {{/isInstalled}}
+            </div>
+          </div>
+        </div>
+        {{/peerDeps}}
+        {{^peerDeps}}
+        <div class="no-deps">
+          No peer dependencies found!
+        </div>
+        {{/peerDeps}}
+      </div>
+    </div>
+    
+    <script>
+      async function installPackage(packageName, version, button) {
+        const messageEl = document.getElementById('msg-' + packageName);
+        
+        button.disabled = true;
+        button.textContent = 'Installing...';
+        messageEl.className = 'message';
+        messageEl.textContent = '';
+        
+        try {
+          const response = await fetch('/install', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              package: packageName,
+              version: version
+            })
+          });
+          
+          const result = await response.json();
+          
+          if (result.success) {
+            messageEl.className = 'message success';
+            messageEl.textContent = result.message;
+            button.style.display = 'none';
+            
+            // Optionally reload after a delay
+            setTimeout(() => {
+              location.reload();
+            }, 2000);
+          } else {
+            messageEl.className = 'message error';
+            messageEl.textContent = result.message;
+            button.disabled = false;
+            button.textContent = 'npm install';
+          }
+        } catch (error) {
+          messageEl.className = 'message error';
+          messageEl.textContent = 'Failed to install package: ' + error.message;
+          button.disabled = false;
+          button.textContent = 'npm install';
+        }
+      }
+    </script>
+  </body>
+</html>
+`;
 }
 function getTemplate() {
-    return `
-<html>
-  <head>
-    <title>{{name}}'s Dependency Graph</title>
-    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
-    <script type="text/javascript">
-        function renderGraph() {
-            var nodes = new vis.DataSet({{{nodes}}});
-            var edges = new vis.DataSet({{{edges}}});
-            var container = document.getElementById("dep-graph");
-            var data = { nodes: nodes, edges: edges };
-            var options = { };
-            var network = new vis.Network(container, data, options);
-        }
-    </script>
-    <style>
-        body { margin: 0; padding: 0; }
-        #dep-graph { width: 100vw; height: 100vh; }
-    </style>
-  </head>
-  <body onload="renderGraph()">
-    <div id="dep-graph"></div>
-  </body>
-</html>
+  return `
+<html>
+  <head>
+    <title>{{name}}'s Dependency Graph</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js"></script>
+    <script type="text/javascript">
+        function applyForceLayout(graph, iterations) {
+            var nodes = graph.nodes();
+            var edges = graph.edges();
+            
+            // Physics constants
+            var repulsionStrength = 100;
+            var attractionStrength = 0.01;
+            var damping = 0.5;
+            
+            for (var iter = 0; iter < iterations; iter++) {
+                var forces = {};
+                
+                // Initialize forces
+                nodes.forEach(function(nodeId) {
+                    forces[nodeId] = { x: 0, y: 0 };
+                });
+                
+                // Repulsive forces between all nodes
+                for (var i = 0; i < nodes.length; i++) {
+                    for (var j = i + 1; j < nodes.length; j++) {
+                        var node1 = nodes[i];
+                        var node2 = nodes[j];
+                        var attrs1 = graph.getNodeAttributes(node1);
+                        var attrs2 = graph.getNodeAttributes(node2);
+                        
+                        var dx = attrs2.x - attrs1.x;
+                        var dy = attrs2.y - attrs1.y;
+                        var distance = Math.sqrt(dx * dx + dy * dy) || 0.1;
+                        var force = repulsionStrength / (distance * distance);
+                        
+                        var fx = (dx / distance) * force;
+                        var fy = (dy / distance) * force;
+                        
+                        forces[node1].x -= fx;
+                        forces[node1].y -= fy;
+                        forces[node2].x += fx;
+                        forces[node2].y += fy;
+                    }
+                }
+                
+                // Attractive forces along edges
+                edges.forEach(function(edgeId) {
+                    var edge = graph.extremities(edgeId);
+                    var source = edge.source || edge[0];
+                    var target = edge.target || edge[1];
+                    var attrs1 = graph.getNodeAttributes(source);
+                    var attrs2 = graph.getNodeAttributes(target);
+                    
+                    var dx = attrs2.x - attrs1.x;
+                    var dy = attrs2.y - attrs1.y;
+                    var distance = Math.sqrt(dx * dx + dy * dy) || 0.1;
+                    
+                    var fx = dx * attractionStrength;
+                    var fy = dy * attractionStrength;
+                    
+                    forces[source].x += fx;
+                    forces[source].y += fy;
+                    forces[target].x -= fx;
+                    forces[target].y -= fy;
+                });
+                
+                // Apply forces with damping
+                nodes.forEach(function(nodeId) {
+                    var attrs = graph.getNodeAttributes(nodeId);
+                    attrs.x += forces[nodeId].x * damping;
+                    attrs.y += forces[nodeId].y * damping;
+                });
+            }
+        }
+    
+        function renderGraph() {
+            var nodes = {{{nodes}}};
+            var edges = {{{edges}}};
+            
+            var graph = new graphology.Graph();
+            
+            nodes.forEach(function(node) {
+                graph.addNode(node.key, {
+                    label: node.label,
+                    x: node.x,
+                    y: node.y,
+                    size: node.size,
+                    color: node.color
+                });
+            });
+            
+            edges.forEach(function(edge, index) {
+                graph.mergeEdge(edge.source, edge.target, {
+                    size: 2,
+                    color: '#94a3b8'
+                });
+            });
+            
+            // Apply custom force-directed layout
+            {{#applyForceLayout}}
+            applyForceLayout(graph, 100);
+            {{/applyForceLayout}}
+            
+            var container = document.getElementById("dep-graph");
+            var renderer = new Sigma(graph, container, {
+                renderEdgeLabels: false,
+                defaultNodeColor: '#3b82f6',
+                defaultEdgeColor: '#94a3b8'
+            });
+        }
+    </script>
+    <style>
+        body { margin: 0; padding: 0; }
+        #dep-graph { width: 100vw; height: 100vh; background: #f8fafc; }
+    </style>
+  </head>
+  <body onload="renderGraph()">
+    <div id="dep-graph"></div>
+  </body>
+</html>
 `;
 }

package/package.json

@@ -1,62 +1,65 @@
-{
-  "name": "easy-dep-graph",
-  "version": "1.0.0",
-  "description": "Easily see the dependency graph of your npm project",
-  "homepage": "https://github.com/danisss9/easy-dep-graph#readme",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/danisss9/easy-dep-graph.git"
-  },
-  "bugs": {
-    "url": "https://github.com/danisss9/easy-dep-graph/issues"
-  },
-  "bin": {
-    "easy-dep-graph": "bin/index.js"
-  },
-  "type": "module",
-  "license": "MIT",
-  "keywords": [
-    "node",
-    "nodejs",
-    "npm",
-    "npx",
-    "list",
-    "la",
-    "la",
-    "easy",
-    "dep",
-    "circular",
-    "dependencies",
-    "dependency",
-    "dependent",
-    "graph",
-    "visual",
-    "browser",
-    "angular",
-    "ng",
-    "react",
-    "vue",
-    "svelte",
-    "javascript",
-    "typescript",
-    "js",
-    "ts"
-  ],
-  "scripts": {
-    "release": "npm run compile:lib && npm run publish:lib",
-    "compile:lib": "tsc --project ./src/tsconfig.json",
-    "publish:lib": "npm publish --access public"
-  },
-  "dependencies": {
-    "fastify": "^4.25.2",
-    "mustache": "^4.2.0",
-    "open": "^10.0.3",
-    "shelljs": "^0.8.5"
-  },
-  "devDependencies": {
-    "@types/mustache": "^4.2.5",
-    "@types/node": "^20.11.5",
-    "@types/shelljs": "^0.8.15",
-    "typescript": "^5.3.3"
-  }
-}
+{
+  "name": "easy-dep-graph",
+  "version": "1.1.1",
+  "description": "Easily see the dependency graph of your npm project",
+  "homepage": "https://github.com/danisss9/easy-dep-graph#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/danisss9/easy-dep-graph.git"
+  },
+  "bugs": {
+    "url": "https://github.com/danisss9/easy-dep-graph/issues"
+  },
+  "bin": {
+    "easy-dep-graph": "bin/index.js"
+  },
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "node",
+    "nodejs",
+    "npm",
+    "npx",
+    "list",
+    "la",
+    "la",
+    "easy",
+    "dep",
+    "circular",
+    "dependencies",
+    "dependency",
+    "dependent",
+    "peerDeps",
+    "peerDependencies",
+    "graph",
+    "visual",
+    "browser",
+    "angular",
+    "ng",
+    "react",
+    "vue",
+    "svelte",
+    "javascript",
+    "typescript",
+    "js",
+    "ts"
+  ],
+  "scripts": {
+    "start": "node ./bin/index.js",
+    "release": "npm run compile:lib && npm run publish:lib",
+    "compile:lib": "tsc --project ./src/tsconfig.json",
+    "publish:lib": "npm publish --access public"
+  },
+  "dependencies": {
+    "fastify": "^5.7.4",
+    "mustache": "^4.2.0",
+    "open": "^11.0.0",
+    "shelljs": "^0.10.0"
+  },
+  "devDependencies": {
+    "@types/mustache": "^4.2.6",
+    "@types/node": "^25.2.1",
+    "@types/shelljs": "^0.10.0",
+    "typescript": "^5.9.3"
+  }
+}