easy-dep-graph 1.0.0

package/LICENSE

@@ -0,0 +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.

package/README.md

@@ -0,0 +1,87 @@
+# 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. (⌐■_■)

package/bin/index.js

@@ -0,0 +1,118 @@
+#! /usr/bin/env node
+import shell from "shelljs";
+import mustache from "mustache";
+import fastify from "fastify";
+import open from "open";
+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];
+            }
+        }
+    }
+    // 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);
+    });
+})();
+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: [],
+            };
+        }
+        flatDepsRecursive(depInfo.dependencies, depName);
+    }
+}
+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>
+`;
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "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"
+  }
+}