fix: represent non-prod dependencies

README.md

@@ -43,7 +43,7 @@ Options:
       --help             Show help                                     [boolean]
   -o, --output           The name of the output directory, relative to the
                          application path       [string] [default: ".sinkchart"]
-  -d, --dev              Include dev dependencies     [boolean] [default: false]
+  -d, --include-dev      Include dev dependencies     [boolean] [default: false]
   -v, --show-versions    Show package versions        [boolean] [default: false]
   -t, --type             Visualization type[string] [choices: "tree", "treemap"]
   -p, --path             The application path    [string] [default: current dir]

src/charts/tree.js

@@ -1,6 +1,12 @@
 const D3Node = require('d3-node');
 const addTooltips = require('./tooltip');
-const {getModuleName, addSandwormLogo, getAncestors, addVulnerabilities} = require('./utils');
+const {
+  getModuleName,
+  addSandwormLogo,
+  getAncestors,
+  addVulnerabilities,
+  processGraph,
+} = require('./utils');
 
 const d3n = new D3Node();
 const {d3} = d3n;
@@ -17,21 +23,10 @@ const buildTree = (
     width = 1000,
     vulnerabilities = {},
     maxDepth = Infinity,
+    includeDev = false,
   } = {},
 ) => {
-  const processData = (node, depth) => {
-    const dependencies =
-      depth >= maxDepth
-        ? []
-        : Object.values(node.dependencies || {}).map((n) => processData(n, depth + 1));
-
-    return {
-      ...node,
-      children: dependencies,
-    };
-  };
-
-  const root = d3.hierarchy(processData(data, 0));
+  const root = d3.hierarchy(processGraph(data, {maxDepth, includeDev}));
 
   // Construct an ordinal color scale
   const color = d3.scaleOrdinal(

src/charts/treemap.js

@@ -8,31 +8,12 @@ const {
   humanFileSize,
   addSandwormLogo,
   addVulnerabilities,
+  processGraph,
 } = require('./utils');
 
 const d3n = new D3Node();
 const {d3} = d3n;
 
-const processData = (node) => {
-  const dependencies = Object.values(node.dependencies || {}).map(processData);
-
-  return {
-    ...node,
-    size: dependencies.length > 0 ? 0 : node.size,
-    children:
-      dependencies.length > 0
-        ? [
-            ...dependencies,
-            {
-              ...node,
-              dependencies: undefined,
-              children: [],
-            },
-          ]
-        : [],
-  };
-};
-
 // Modified from the original source below
 // Copyright 2021 Observable, Inc.
 // Released under the ISC license.
@@ -44,6 +25,7 @@ function buildTreemap(
     width = 1000, // outer width, in pixels
     vulnerabilities = {},
     maxDepth = Infinity,
+    includeDev = false,
   } = {},
 ) {
   const moduleCallCounts = [];
@@ -57,7 +39,25 @@ function buildTreemap(
     return currentCallCount;
   };
 
-  const root = d3.hierarchy(processData(data));
+  const root = d3.hierarchy(
+    processGraph(data, {
+      maxDepth,
+      includeDev,
+      postprocess: (node) => {
+        if (node.children.length > 0) {
+          // eslint-disable-next-line no-param-reassign
+          node.size = 0;
+          node.children.push({
+            ...node,
+            dependencies: undefined,
+            children: [],
+          });
+        }
+
+        return node;
+      },
+    }),
+  );
 
   const color = d3.scaleSequential([0, root.height], d3.interpolateBrBG);
   const nodeColor = (d) => {

src/charts/utils.js

@@ -83,6 +83,29 @@ const addVulnerabilities = (node, vulnerabilities) =>
     .attr('url', (d) => d.url)
     .attr('via', (d) => (typeof d === 'string' ? d : undefined));
 
+const aggregateDependencies = (node, includeDev = false) => [
+  ...Object.values(node.dependencies || {}),
+  ...Object.values(node.optionalDependencies || {}),
+  ...Object.values(node.peerDependencies || {}),
+  ...Object.values(node.bundledDependencies || {}),
+  ...(includeDev ? Object.values(node.devDependencies || {}) : []),
+];
+
+const processGraph = (node, options = {}, depth = 0, history = []) => {
+  const {maxDepth = Infinity, includeDev = false, postprocess = (n) => n} = options;
+  const dependencies =
+    depth >= maxDepth
+      ? []
+      : aggregateDependencies(node, includeDev)
+          .filter((n) => !history.includes(n))
+          .map((n) => processGraph(n, options, depth + 1, [...history, node]));
+
+  return postprocess({
+    ...node,
+    children: dependencies,
+  });
+};
+
 module.exports = {
   getModuleName,
   getUid,
@@ -91,4 +114,6 @@ module.exports = {
   groupByDepth,
   addSandwormLogo,
   addVulnerabilities,
+  aggregateDependencies,
+  processGraph,
 };

src/cli.js

@@ -69,7 +69,7 @@ require('yargs')
           type: 'string',
         })
         .option('d', {
-          alias: 'dev',
+          alias: 'include-dev',
           demandOption: false,
           default: false,
           describe: 'Include dev dependencies',

src/index.js

@@ -18,7 +18,6 @@ const getChartsSVG = async ({
     onProgress({type: 'start', stage: 'sizes'});
     packageTree = await getPackageSizes({
       appPath,
-      includeDev,
       onProgress: ({name, version}) =>
         onProgress({type: 'update', stage: 'sizes', message: `${name}@${version}`}),
     });
@@ -40,6 +39,7 @@ const getChartsSVG = async ({
     width,
     maxDepth,
     vulnerabilities,
+    includeDev,
     onProgress: (message) => onProgress({type: 'update', stage: 'chart', message}),
   };
 

src/package.js

@@ -28,8 +28,8 @@ const getFolderSize = (folderPath) =>
     }
   });
 
-const getPackageSizes = async ({appPath, includeDev = false, onProgress = () => {}}) => {
-  const packageTree = (await graph(appPath, includeDev)).root;
+const getPackageSizes = async ({appPath, onProgress = () => {}}) => {
+  const packageTree = (await graph(appPath)).root;
   const decorateWithSize = async (modules = {}, path = []) =>
     Object.values(modules).reduce(async (acc, module) => {
       await acc;