rollup-plugin-visualizer - npm Package Compare versions

Comparing version 5.6.0 to 5.7.0

dist/plugin/compress.js

 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
@@ -6,0 +10,0 @@ if (k2 === undefined) k2 = k;

dist/plugin/index.d.ts

@@ -5,14 +5,62 @@ import { Plugin, OutputOptions } from "rollup";
 export interface PluginVisualizerOptions {
+    /**
+     * The path to the template file to use. Or just a name of a file.
+     *
+     * @default "stats.html"
+     */
+    filename?: string;
+    /**
+     * If plugin should emit json file with visualizer data. It can be used with plugin CLI
+     *
+     * @default false
+     */
     json?: boolean;
-    filename?: string;
+    /**
+     * HTML <title> value in generated file. Ignored when `json` is true.
+     *
+     * @default "Rollup Visualizer"
+     */
     title?: string;
+    /**
+     * If plugin should open browser with generated file. Ignored when `json` is true.
+     *
+     * @default false
+     */
     open?: boolean;
     openOptions?: opn.Options;
+    /**
+     * Which diagram to generate. 'sunburst' or 'treemap' can help find big dependencies or if they are repeated.
+     * 'network' can answer you why something was included
+     *
+     * @default 'treemap'
+     */
     template?: TemplateType;
+    /**
+     * If plugin should also calculate sizes of gzipped files.
+     *
+     * @default false
+     */
     gzipSize?: boolean;
+    /**
+     * If plugin should also calculate sizes of brotlied files.
+     *
+     * @default false
+     */
     brotliSize?: boolean;
+    /**
+     * If plugin should use sourcemap to calculate sizes of modules. By idea it will present more accurate results.
+     * `gzipSize` and `brotliSize` does not make much sense with this option.
+     *
+     * @default false
+     */
     sourcemap?: boolean;
+    /**
+     * Absolute path where project is located. It is used to cut prefix from file's paths.
+     *
+     * @default process.cwd()
+     */
     projectRoot?: string | RegExp;
+    emitFile?: boolean;
 }
 export declare const visualizer: (opts?: PluginVisualizerOptions | ((outputOptions: OutputOptions) => PluginVisualizerOptions)) => Plugin;
 export default visualizer;

dist/plugin/index.js

@@ -32,4 +32,4 @@ "use strict";
             const projectRoot = (_e = opts.projectRoot) !== null && _e !== void 0 ? _e : process.cwd();
-            const gzipSize = !!opts.gzipSize;
-            const brotliSize = !!opts.brotliSize;
+            const gzipSize = !!opts.gzipSize && !opts.sourcemap;
+            const brotliSize = !!opts.brotliSize && !opts.sourcemap;
             const gzipSizeGetter = gzipSize
@@ -120,7 +120,16 @@ ? (0, compress_1.createGzipSizeGetter)(typeof opts.gzipSize === "object" ? opts.gzipSize : {})
                 });
-            await fs_1.promises.mkdir(path_1.default.dirname(filename), { recursive: true });
-            await fs_1.promises.writeFile(filename, fileContent);
-            if (open) {
-                await (0, open_1.default)(filename, openOptions);
+            if (opts.emitFile) {
+                this.emitFile({
+                    type: "asset",
+                    fileName: filename,
+                    source: fileContent,
+                });
             }
+            else {
+                await fs_1.promises.mkdir(path_1.default.dirname(filename), { recursive: true });
+                await fs_1.promises.writeFile(filename, fileContent);
+                if (open) {
+                    await (0, open_1.default)(filename, openOptions);
+                }
+            }
         },
@@ -127,0 +136,0 @@ };

package.json

 {
   "name": "rollup-plugin-visualizer",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "main": "./dist/plugin/index.js",
@@ -35,6 +35,6 @@ "author": "Denis Bardadym <[e-mail]>",
   "dependencies": {
-    "nanoid": "^3.1.32",
+    "nanoid": "^3.3.4",
     "open": "^8.4.0",
     "source-map": "^0.7.3",
-    "yargs": "^17.3.1"
+    "yargs": "^17.5.1"
   },
@@ -45,41 +45,42 @@ "peerDependencies": {
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.2",
     "@types/bytes": "^3.1.1",
-    "@types/d3-array": "^3.0.2",
-    "@types/d3-color": "^3.0.2",
-    "@types/d3-hierarchy": "^3.0.2",
+    "@types/d3-array": "^3.0.3",
+    "@types/d3-color": "^3.1.0",
+    "@types/d3-force": "^3.0.3",
+    "@types/d3-hierarchy": "^3.1.0",
     "@types/d3-scale": "^4.0.2",
-    "@types/d3-shape": "^3.0.2",
-    "@types/yargs": "^17.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.9.1",
-    "bytes": "^3.1.1",
-    "d3-array": "^3.1.1",
-    "d3-color": "^3.0.1",
-    "d3-hierarchy": "^3.1.1",
+    "@types/d3-shape": "^3.1.0",
+    "@types/yargs": "^17.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
+    "bytes": "^3.1.2",
+    "d3-array": "^3.1.6",
+    "d3-color": "^3.1.0",
+    "d3-force": "^3.0.0",
+    "d3-hierarchy": "^3.1.2",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.1.0",
     "del-cli": "^4.0.1",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.14",
     "postcss-url": "^10.1.3",
-    "preact": "^10.6.4",
-    "prettier": "^2.5.1",
-    "rollup": "^2.64.0",
+    "preact": "^10.7.2",
+    "prettier": "^2.6.2",
+    "rollup": "^2.74.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.48.0",
-    "typescript": "^4.5.4",
-    "webcola": "^3.4.0"
+    "sass": "^1.52.1",
+    "typescript": "^4.6.4"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
@@ -86,0 +87,0 @@ "keywords": [

README.md

@@ -31,3 +31,3 @@ # Rollup Plugin Visualizer
 
-To upgrade plugin change import/require statement like it is shown in installation section.
+To upgrade plugin change import/require statement like it is shown in installation/usage sections.
 
@@ -38,12 +38,12 @@ ## Usage
 
-
 ```javascript
 // es
-import { visualizer } from 'rollup-plugin-visualizer';
+import { visualizer } from "rollup-plugin-visualizer";
 // or
 // cjs
-const { visualizer } = require('rollup-plugin-visualizer');
+const { visualizer } = require("rollup-plugin-visualizer");
 ```
 
-Usaget with rollup (rollup.config.js)
+Usage with rollup (rollup.config.js)
+
 ```js
@@ -53,13 +53,12 @@ module.exports = {
     // put it the last one
-    visualizer()
-  ]
-}
+    visualizer(),
+  ],
+};
 ```
 
 Usage with vite (vite.config.js)
+
 ```js
 module.exports = {
-  plugins: [
-    visualizer()
-  ],
+  plugins: [visualizer()],
 };
@@ -69,3 +68,6 @@ ```
 Usage with SvelteKit (svelte.config.js)
+
 ```js
+import path from "path";
+
 const config = {
@@ -75,6 +77,9 @@ kit: {
       plugins: [
-        visualizer(/* TODO add example there */)
-      ],
+        visualizer({
+          emitFile: true,
+          file: 'stats.html'
+        })
+      ]
     }
-  }
+  },
 };
@@ -85,2 +90,31 @@
 
+You will find 2/3 files in .svelte-kit/output dir named stats.html (see vite logs for file locations) . You can use this snippet as a starting point and change props/path.
+You can also generate 3 json files and combine them to one with cli util.
+
+## How to use generated files
+
+Blue color used to to mark project-own files. This could be: written by you files or generated by build tool files.
+
+Green color used to mark your dependencies.
+
+Internally it just checks if file id prefix is `node_modules`.
+
+All charts refresh layout on window resize.
+
+### Sunburst
+
+This circular hierarchical diagram can help you find huge peaces of code (aka that one huge thing). If you click on some arc it will increase its and all nested arcs size for better inspection.
+
+### Treemap
+
+This rectangular hierarchical diagram can help you find huge peaces. Just look on biggest reclangle. But also it can help you find modules included several times, they will have the same topology and relative size. If you click on reclangle it will increase in size for further inspection.
+
+### Network
+
+This digram should help you answer for the question 'why it is included?'. After force layout stabilize all nodes, you can move it back and forth by dragging with your mouse. Gray circles are treeshakened out files.
+
+In real life scenarious, sometimes you will see terribly connected diagrams. There is no 100% working solution for everyone, it is expected you topology will look 'terrible' and not hold on screen. To make it still visually ispectable, first remove all highly connected nodes that you see (typical examples: commonjsHelpers, tslib, react etc, basically if tooltip for the node is not hold on the screen - exclude this node), after layout stabilization you will see, your layout is not that terrible anymore and most of dependencies cluster together. Move layout to find peaces you looked for.
+
+When you click on node it will hightlight nodes that are listed in tooltip (the files that imports current node).
+
 ## Options
@@ -87,0 +121,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

12225

increased by4.9%

Number of lines in readme file

166

increased by25.76%

Worsened metrics

Total package byte prevSize

1606485

decreased by-10.94%

Dev dependency count

37

increased by2.78%

Number of package files

34

decreased by-2.86%

Dependency changes

• Updatednanoid@^3.3.4

• Updatedyargs@^17.5.1