rollup-plugin-visualizer - npm Package Compare versions

Comparing version 3.3.2 to 4.0.0

bin/cli.js

 #!/usr/bin/env node
 "use strict";
 
-const fs = require("fs");
+const fs = require("fs").promises;
 const path = require("path");
-const { promisify } = require("util");
 
-const mkdirp = require("mkdirp");
-
-const mkdir = promisify(mkdirp);
-const writeFile = promisify(fs.writeFile);
-const readFile = promisify(fs.readFile);
-
 const buildStats = require("../plugin/build-stats");
@@ -21,6 +14,3 @@ const TEMPLATE = require("../plugin/template-types");
   .strict()
-  .option("extra-style-path", {
-    describe: "Extra override css file path",
-    string: true
-  })
+
   .option("filename", {
@@ -50,9 +40,3 @@ describe: "Output file name",
 
-const runForPluginJson = async (
-  { title, template, extraStylePath, filename },
-  files
-) => {
-  if (extraStylePath) {
-    warn("`--extra-style-path` will be removed in next major version");
-  }
+const runForPluginJson = async ({ title, template, filename }, files) => {
   if (files.length === 0) {
@@ -64,3 +48,3 @@ throw new Error("Empty file list");
     files.map(async file => {
-      const textContent = await readFile(file, { encoding: "utf-8" });
+      const textContent = await fs.readFile(file, { encoding: "utf-8" });
       const jsonContent = JSON.parse(textContent);
@@ -99,12 +83,11 @@ return [file, jsonContent];
 
-  const fileContent = await buildStats(
+  const fileContent = await buildStats({
     title,
     data,
     template,
-    extraStylePath,
-    {}
-  );
+    chartParameters: {}
+  });
 
-  await mkdir(path.dirname(filename));
-  await writeFile(filename, fileContent);
+  await fs.mkdir(path.dirname(filename), { recursive: true });
+  await fs.writeFile(filename, fileContent);
 };
@@ -111,0 +94,0 @@

CHANGELOG.md

 # Changelog
 
+## 4.0.0
+
+* use `preact` and `htm` for rendering
+* replace `mkdirp` with plain `fs` and use `fs.promises`
+* **Breaking change** remove `extraStylePath` and `styleOverridePath`
+* **Breaking change** drop node 8
+* **Breaking change** drop circlepacking diagram
+* add `gzip` output and `brotli` if supported by node version
+* use `WebCola` with constraints for network diagram instead of `d3-force`
+
+## 3.3.2
+
+* Fix #63
+
 ## 3.3.1
@@ -4,0 +18,0 @@

package.json

 {
   "name": "rollup-plugin-visualizer",
-  "version": "3.3.2",
+  "version": "4.0.0",
   "main": "plugin/index.js",
@@ -29,5 +29,4 @@ "author": "Denis Bardadym <[e-mail]>",
   "dependencies": {
-    "mkdirp": "^0.5.1",
     "nanoid": "^2.1.6",
-    "open": "^6.0.0",
+    "open": "^7.0.3",
     "pupa": "^2.0.0",
@@ -41,25 +40,26 @@ "source-map": "^0.7.3",
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "bytes": "^3.1.0",
     "d3-array": "^2.2.0",
     "d3-color": "^1.4.0",
-    "d3-force": "^2.0.1",
     "d3-hierarchy": "^1.1.8",
     "d3-scale": "^3.0.0",
     "d3-scale-chromatic": "^1.5.0",
-    "d3-selection": "^2.0.0-rc.2",
     "d3-shape": "^1.3.4",
     "del-cli": "^3.0.0",
     "eslint": "^6.0.1",
+    "htm": "^3.0.3",
     "postcss-url": "^8.0.0",
-    "prettier": "^1.16.4",
-    "rollup": "^1.15.6",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-node-resolve": "^5.0.3",
+    "preact": "^10.3.3",
+    "prettier": "^2.0.1",
+    "rollup": "^2.0.6",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-terser": "^5.1.2",
-    "sass": "^1.22.7"
+    "sass": "^1.22.7",
+    "webcola": "^3.4.0"
   },
   "engines": {
-    "node": ">=8.10"
+    "node": ">=10"
   }
 }

plugin/build-stats.js

 "use strict";
 
-const fs = require("fs");
+const fs = require("fs").promises;
 const path = require("path");
 const pupa = require("pupa");
-const readFile = require("util").promisify(fs.readFile);
 
-module.exports = async function buildHtml(
+module.exports = async function buildHtml({
   title,
-  nodesData,
-  graphType,
-  styleOverridePath,
-  chartParameters
-) {
-  const [template, script, style, styleOverride] = await Promise.all([
-    readFile(path.join(__dirname, "stats.template"), "utf-8"),
-    readFile(path.join(__dirname, "..", "lib", `script-${graphType}.js`), "utf8"),
-    readFile(path.join(__dirname, "..", "lib", `script-${graphType}.css`), "utf8"),
-    styleOverridePath ? readFile(styleOverridePath, "utf8") : Promise.resolve("")
+  data,
+  template,
+  chartParameters,
+}) {
+  const [templateString, script, style] = await Promise.all([
+    fs.readFile(path.join(__dirname, "stats.template"), "utf-8"),
+    fs.readFile(
+      path.join(__dirname, "..", "lib", `script-${template}.js`),
+      "utf8"
+    ),
+    fs.readFile(
+      path.join(__dirname, "..", "lib", `script-${template}.css`),
+      "utf8"
+    ),
   ]);
 
-  return pupa(template, {
+  return pupa(templateString, {
     title,
     style,
     script,
-    styleOverride,
-    nodesData: JSON.stringify(nodesData),
-    chartParameters: JSON.stringify(chartParameters)
+    nodesData: JSON.stringify(data),
+    chartParameters: JSON.stringify(chartParameters),
   });
 };

plugin/compress.js

@@ -7,11 +7,23 @@ "use strict";
 const gzip = promisify(zlib.gzip);
+const brotliCompress = promisify(zlib.brotliCompress || (() => {}));
 
-const gzipOptions = options => ({ level: 9, ...options });
+const gzipOptions = (options) => ({ level: 9, ...options });
+const brotliOptions = zlib.brotliCompress
+  ? (options, buffer) => ({
+      params: {
+        [zlib.constants.BROTLI_PARAM_MODE]: zlib.constants.BROTLI_MODE_TEXT,
+        [zlib.constants.BROTLI_PARAM_QUALITY]:
+          zlib.constants.BROTLI_MAX_QUALITY,
+        [zlib.constants.BROTLI_PARAM_SIZE_HINT]: buffer.length,
+      },
+      ...options,
+    })
+  : () => ({});
 
-const createGzipCompressor = options => buffer =>
+const createGzipCompressor = (options) => (buffer) =>
   gzip(buffer, gzipOptions(options || {}));
 
-const createGzipSizeGetter = options => {
+const createGzipSizeGetter = (options) => {
   const compress = createGzipCompressor(options);
-  return async code => {
+  return async (code) => {
     const data = await compress(Buffer.from(code, "utf-8"));
@@ -22,2 +34,15 @@ return data.length;
 
-module.exports = { createGzipSizeGetter };
+const createBrotliCompressor = (options) => (buffer) =>
+  brotliCompress(buffer, brotliOptions(options || {}, buffer));
+
+const createBrotliSizeGetter = zlib.brotliCompress
+  ? (options) => {
+      const compress = createBrotliCompressor(options);
+      return async (code) => {
+        const data = await compress(Buffer.from(code, "utf-8"));
+        return data.length;
+      };
+    }
+  : () => () => Promise.resolve(undefined);
+
+module.exports = { createGzipSizeGetter, createBrotliSizeGetter };

plugin/data.js

@@ -10,3 +10,3 @@ "use strict";
     name: "root",
-    children: []
+    children: [],
   };
@@ -36,3 +36,3 @@
 // if root children have only on child we can flatten this
-const flattenTree = root => {
+const flattenTree = (root) => {
   let newRoot = root;
@@ -69,7 +69,7 @@ const pluginChildren = [];
 
-  let child = tree.children.find(c => c.name === p[0]);
+  let child = tree.children.find((c) => c.name === p[0]);
   if (child == null) {
     child = {
       name: p[0],
-      children: []
+      children: [],
     };
@@ -87,3 +87,3 @@ tree.children.push(child);
 
-const mergeTrees = trees => {
+const mergeTrees = (trees) => {
   if (trees.length === 1) {
@@ -94,3 +94,3 @@ return trees[0];
     name: "root",
-    children: trees
+    children: trees,
   };
@@ -120,3 +120,8 @@
     const info = getModuleInfo(moduleId);
-    const { importedIds, isEntry, isExternal } = info;
+    const {
+      importedIds,
+      isEntry,
+      isExternal,
+      dynamicallyImportedIds = [],
+    } = info;
 
@@ -135,2 +140,7 @@ if (isEntry) {
     }
+    for (const importedId of dynamicallyImportedIds) {
+      const importedUid = mapper.getUid(importedId);
+      links.push({ source: moduleUid, target: importedUid, dynamic: true });
+      moduleIds.push(importedId);
+    }
   }
@@ -137,0 +147,0 @@ };

plugin/index.js

 "use strict";
 
-const fs = require("fs");
+const fs = require("fs").promises;
 const path = require("path");
-const { promisify } = require("util");
 
-const mkdirp = require("mkdirp");
-
-const mkdir = promisify(mkdirp);
-const writeFile = promisify(fs.writeFile);
-
 const opn = require("open");
@@ -22,13 +16,16 @@
   addLinks,
-  removeCommonPrefix
+  removeCommonPrefix,
 } = require("./data");
 const getSourcemapModules = require("./sourcemap");
-const warn = require("./warn");
-const { createGzipSizeGetter } = require("./compress");
 
+const { createGzipSizeGetter, createBrotliSizeGetter } = require("./compress");
+
+const pkg = require("../package.json");
+
 const WARN_SOURCEMAP_DISABLED =
   "rollup output configuration missing sourcemap = true. You should add output.sourcemap = true or disable sourcemap in this plugin";
-const WARN_SOURCEMAP_MISSING = id => `${id} missing source map`;
 
-module.exports = function(opts) {
+const WARN_SOURCEMAP_MISSING = (id) => `${id} missing source map`;
+
+module.exports = function (opts) {
   opts = opts || {};
@@ -47,17 +44,17 @@ const json = !!opts.json;
 
-  let extraStylePath = opts.extraStylePath;
-  if ("styleOverridePath" in opts) {
-    warn(
-      "`styleOverridePath` was renamed to `extraStylePath`, but will be removed in next major version"
-    );
-    extraStylePath = opts.styleOverridePath;
-  }
-
   const chartParameters = opts.chartParameters || {};
 
   const gzipSize = !!opts.gzipSize;
+  const brotliSize = !!opts.brotliSize;
   const additionalFilesInfo = new Map();
   const gzipSizeGetter = gzipSize
-    ? createGzipSizeGetter(typeof opts.gzipSize === "object" ? gzipSize : {})
+    ? createGzipSizeGetter(
+        typeof opts.gzipSize === "object" ? opts.gzipSize : {}
+      )
     : null;
+  const brotliSizeGetter = brotliSize
+    ? createBrotliSizeGetter(
+        typeof opts.brotliSize === "object" ? opts.brotliSize : {}
+      )
+    : null;
 
@@ -72,2 +69,5 @@ return {
       }
+      if (brotliSize) {
+        info.brotliLength = await brotliSizeGetter(code);
+      }
       additionalFilesInfo.set(id, info);
@@ -126,5 +126,14 @@ return null;
         if (nodes[uid]) {
+          const newInfo = additionalFilesInfo.get(id) || {};
+          if (nodes[uid].renderedLength === 0) {
+            if (gzipSize) {
+              newInfo.gzipLength = 0;
+            }
+            if (brotliSize) {
+              newInfo.brotliLength = 0;
+            }
+          }
           nodes[uid] = {
             ...nodes[uid],
-            ...(additionalFilesInfo.get(id) || {})
+            ...newInfo,
           };
@@ -148,16 +157,29 @@ } else {
 
-      const data = { version: JSON_VERSION, tree, nodes, links };
+      const data = {
+        version: JSON_VERSION,
+        tree,
+        nodes,
+        links,
+        env: {
+          rollup: this.meta.rollupVersion,
+          [pkg.name]: pkg.version,
+        },
+        options: {
+          gzip: gzipSize,
+          brotli: brotliSize,
+          sourcemap: opts.sourcemap,
+        },
+      };
 
       const fileContent = json
         ? JSON.stringify(data, null, 2)
-        : await buildStats(
+        : await buildStats({
             title,
             data,
             template,
-            extraStylePath,
-            chartParameters
-          );
+            chartParameters,
+          });
 
-      await mkdir(path.dirname(filename));
-      await writeFile(filename, fileContent);
+      await fs.mkdir(path.dirname(filename), { recursive: true });
+      await fs.writeFile(filename, fileContent);
 
@@ -167,4 +189,4 @@ if (open) {
       }
-    }
+    },
   };
 };

plugin/sourcemap.js

@@ -16,3 +16,3 @@ "use strict";
       line,
-      column
+      column,
     });
@@ -37,3 +37,3 @@ const id =
 const getSourcemapModules = (id, { map, code }, dir) => {
-  return SourceMapConsumer.with(map, null, map => {
+  return SourceMapConsumer.with(map, null, (map) => {
     return getBytesPerFileUsingSourceMap(id, code, map, dir);
@@ -40,0 +40,0 @@ });

plugin/template-types.js

 "use strict";
 
-module.exports = ["sunburst", "treemap", "circlepacking", "network"];
+module.exports = ["sunburst", "treemap", "network"];

README.md

@@ -41,10 +41,8 @@ # Rollup Plugin Visualizer
 
-`sourcemap` (boolean, default `false`) - Use sourcemaps to calculate sizes (e.g. after UglifyJs or Terser) 
+`sourcemap` (boolean, default `false`) - Use sourcemaps to calculate sizes (e.g. after UglifyJs or Terser)
 
 `open` (boolean, default `false`) - Open generated file in default user agent
 
-`template` (string, default `treemap`) - Which digram type to use: `sunburst`, `treemap`, `circlepacking`, `network` (very early stage, feedback welcomed)
+`template` (string, default `treemap`) - Which digram type to use: `sunburst`, `treemap`, `network` (very early stage, feedback welcomed)
 
-~~`extraStylePath` (string, default `undefined`) - Link your own css file to override or enhance the current templates~~ **deprecated**
-
 `chartParameters.width` (number, default `undefined`) - Set svg viewBox width to this number
@@ -56,2 +54,6 @@
 
+`gzipSize` (boolean, default `false`) - Collect gzip size from source code and display it at chart
+
+`brotliSize` (boolean, default `false`) - Collect brolti size from source code and display it at chart. Only if current node version supports it
+
 ## CLI
@@ -70,2 +72,3 @@
 For development if you need to build plugin, just exec:
+
 ```js
@@ -80,7 +83,8 @@ yarn run build
 This statistical information can contain:
-* size of files included in bundle
-* size of files included in source map
-* file's path
-* files hierarchy (fs tree for your files)
 
+- size of files included in bundle
+- size of files included in source map
+- file's path
+- files hierarchy (fs tree for your files)
+
 ## Upgrades
@@ -87,0 +91,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1269580

increased by9.97%

Dependency count

6

decreased by-14.29%

Lines of code

14118

increased by15.85%

Number of lines in readme file

93

increased by4.49%

Worsened metrics

Dev dependency count

20

increased by5.26%

Dependency changes

• + Addedis-docker@2.2.1(transitive)

• + Addedis-wsl@2.2.0(transitive)

• + Addedopen@7.4.2(transitive)

• - Removedmkdirp@^0.5.1

• - Removedis-wsl@1.1.0(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedopen@6.4.0(transitive)

• Updatedopen@^7.0.3