Version 3: Split reporting UI from dependency graph size calculation

.eslintignore

@@ -1,15 +1,18 @@
+# node_modules in sub-packages
+packages/*/node_modules
+
 # Generated code
-lib
-public
+packages/*/lib
+packages/reporter-treemap/public
 
 # Vendor code
-client/vendor
+packages/reporter-treemap/client/vendor
 
 # Test fixtures
-test/bundles
-test/webpack.config.js
+packages/*/test/bundles
+packages/*/test/webpack.config.js
 
 # Test results
-test/output
+packages/*/test/output
 
 samples

.gitignore

@@ -1,5 +1,12 @@
-lib
-public
+# node_modules in sub-packages
+packages/*/node_modules
+
+# Generated code
+packages/*/lib
+packages/reporter-treemap/public
+
 samples
+
 node_modules
 npm-debug.log
+lerna-debug.log

.travis.yml

@@ -3,6 +3,7 @@ sudo: false
 branches:
   only:
     - master
+    - version-3
 node_js:
   - "4"
   - "6"
@@ -12,13 +13,18 @@ cache:
   - yarn: true
   - directories:
     - node_modules
+    - packages/bundle-parser/node_modules
+    - packages/reporter-treemap/node_modules
+    - packages/plugin/node_modules
 addons:
   apt:
     packages:
       # Required by Electron
       # https://github.com/juliangruber/electron-stream#travis
       - xvfb
 before_script:
+  # Install packages in subdirectories
+  - npm run bootstrap
   # Required by Electron
   - export DISPLAY=':99.0'
   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &

CHANGELOG.md

@@ -14,6 +14,11 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+ * **Internal**
+   * Moved internal, treemap reporter related code around (@valscion at [#81](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/81)).
+   * Removed undocumented `require('webpack-bundle-analyzer').start` accessor. If you try to
+     use the `start` function now, it will raise an error.
+
 ## 2.10.0
 
  * **Bug Fix**

CONTRIBUTING.md

@@ -4,7 +4,7 @@ To contribute to `webpack-bundle-analyzer`, fork the repository and clone it to
 
 ## Setup packages
 
-Then install [`yarn`](https://yarnpkg.com/):
+Install [`yarn`](https://yarnpkg.com/):
 
 ```sh
 npm install --global yarn
@@ -16,6 +16,12 @@ Next, install this package's dependencies with `yarn`:
 yarn install
 ```
 
+Bootstrap the Lerna project (installs all node_modules in monorepo packages)
+
+```sh
+npm run bootstrap
+```
+
 ## Develop with your own project
 
 Run the following to build this library and watch its source files for changes:

lerna.json

@@ -0,0 +1,6 @@
+{
+  "lerna": "2.0.0",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "version": "3.0.0-alpha.2"
+}

package.json

@@ -1,90 +1,23 @@
 {
-  "name": "webpack-bundle-analyzer",
-  "version": "2.10.0",
-  "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap",
-  "author": "Yury Grunin <[email protected]>",
-  "license": "MIT",
-  "homepage": "https://github.com/webpack-contrib/webpack-bundle-analyzer",
-  "changelog": "https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/CHANGELOG.md",
-  "bugs": {
-    "url": "https://github.com/webpack-contrib/webpack-bundle-analyzer/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/webpack-contrib/webpack-bundle-analyzer.git"
-  },
-  "main": "lib/index.js",
-  "bin": "lib/bin/analyzer.js",
-  "engines": {
-    "node": ">= 4"
-  },
-  "scripts": {
-    "start": "gulp watch",
-    "build": "gulp build",
-    "npm-publish": "npm run lint && npm run build && npm test && npm publish",
-    "lint": "eslint --ext js,jsx .",
-    "test": "mocha --exit --require babel-core/register",
-    "test-dev": "mocha --watch --require babel-core/register"
-  },
-  "files": [
-    "public",
-    "lib",
-    "src",
-    "views"
+  "private": true,
+  "workspaces": [
+    "packages/*"
   ],
-  "dependencies": {
-    "acorn": "^5.3.0",
-    "bfj-node4": "^5.2.0",
-    "chalk": "^2.3.0",
-    "commander": "^2.13.0",
-    "ejs": "^2.5.7",
-    "express": "^4.16.2",
-    "filesize": "^3.5.11",
-    "gzip-size": "^4.1.0",
-    "lodash": "^4.17.4",
-    "mkdirp": "^0.5.1",
-    "opener": "^1.4.3",
-    "ws": "^4.0.0"
+  "scripts": {
+    "bootstrap": "lerna bootstrap",
+    "build": "lerna run build --stream",
+    "dev": "lerna run start --parallel",
+    "npm-publish": "npm run lint && npm run build && npm test && lerna publish",
+    "test": "lerna run test --stream",
+    "test-dev": "lerna run test-dev --parallel",
+    "lint": "eslint --ext js,jsx ."
   },
   "devDependencies": {
-    "babel-core": "6.26.0",
     "babel-eslint": "8.2.1",
-    "babel-loader": "7.1.2",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-plugin-transform-react-jsx": "6.24.1",
-    "babel-preset-env": "1.6.1",
-    "chai": "4.1.2",
-    "chai-subset": "1.6.0",
-    "classnames": "2.2.5",
-    "css-loader": "0.28.9",
-    "del": "3.0.0",
     "eslint": "4.16.0",
     "eslint-config-th0r": "1.0.0",
     "eslint-config-th0r-react": "1.0.0",
     "eslint-plugin-react": "7.6.1",
-    "exports-loader": "0.6.4",
-    "gulp": "4.0.0",
-    "gulp-babel": "7.0.1",
-    "mocha": "5.0.0",
-    "nightmare": "2.10.0",
-    "preact": "8.2.7",
-    "sinon": "4.2.2",
-    "stream-combiner2": "1.1.1",
-    "style-loader": "0.20.1",
-    "webpack": "3.10.0",
-    "webpack-dev-server": "2.11.1"
-  },
-  "keywords": [
-    "webpack",
-    "bundle",
-    "analyzer",
-    "modules",
-    "size",
-    "interactive",
-    "chart",
-    "treemap",
-    "zoomable",
-    "zoom"
-  ]
+    "lerna": "2.2.0"
+  }
 }

packages/bundle-parser/.babelrc

@@ -0,0 +1,14 @@
+// Babel config for Node
+// Compiles sources, gulpfile and tests
+{
+  "presets": [
+    ["env", {
+      "targets": { "node": 4 },
+      "exclude": [
+        // Node 4 supports all the generator features that we use so there is no need in Regenerator
+        "transform-regenerator"
+      ]
+    }]
+  ],
+  "plugins": []
+}

packages/bundle-parser/README.md

@@ -0,0 +1,168 @@
+<div align="center">
+  <a href="https://github.com/webpack/webpack">
+    <img width="200" height="200"
+      src="https://webpack.js.org/assets/icon-square-big.svg">
+  </a>
+  <h1>@webpack-bundle-analyzer/bundle-parser</h1>
+  <p>Calculates module sizes from webpack output files.</p>
+</div>
+
+<h2 align="center">Install</h2>
+
+```bash
+npm install --save @webpack-bundle-analyzer/bundle-parser
+```
+
+<h2 align="center">Usage</h2>
+
+```js
+const parseBundle = require('@webpack-bundle-analyzer/bundle-parser');
+const Logger = require('@webpack-bundle-analyzer/logger');
+
+const fs = require('fs');
+const webpackStats = JSON.parse(
+  fs.readFileSync('webpack/output/path/stats.json', 'utf8')
+);
+
+const moduleSizeData = parseBundle(
+  webpackStats,
+  'webpack/output/path',
+  { logger: new Logger('info') }
+);
+
+console.log(JSON.stringify(moduleSizeData, null, 2));
+```
+
+Example output:
+
+```json
+[
+  {
+    "label": "bundle.js",
+    "statSize": 141,
+    "parsedSize": 445,
+    "gzipSize": 178,
+    "groups": [
+      {
+        "label": "my-app",
+        "path": "./my-app",
+        "statSize": 141,
+        "parsedSize": 332,
+        "gzipSize": 119,
+        "groups": [
+          {
+            "label": "src",
+            "path": "./my-app/src",
+            "statSize": 141,
+            "parsedSize": 332,
+            "gzipSize": 119,
+            "groups": [
+              {
+                "id": 0,
+                "label": "index.js",
+                "path": "./my-app/src/index.js",
+                "statSize": 54,
+                "parsedSize": 131,
+                "gzipSize": 93
+              },
+              {
+                "id": 1,
+                "label": "a.js",
+                "path": "./my-app/src/a.js",
+                "statSize": 29,
+                "parsedSize": 67,
+                "gzipSize": 73
+              },
+              {
+                "id": 2,
+                "label": "b.js",
+                "path": "./my-app/src/b.js",
+                "statSize": 29,
+                "parsedSize": 67,
+                "gzipSize": 73
+              },
+              {
+                "id": 3,
+                "label": "a-clone.js",
+                "path": "./my-app/src/a-clone.js",
+                "statSize": 29,
+                "parsedSize": 67,
+                "gzipSize": 73
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
+```
+
+
+<h2 align="center">Options</h2>
+
+```js
+parseBundle(
+  bundleStats: object,
+  bundleDir: string,
+  options: {
+    logger: Logger
+  }
+);
+```
+
+|Name|Type|Description|
+|:--:|:--:|:----------|
+|**`bundleStats`**|`{Object}`|webpack compilation information as a JSON object. This is the output of [`stats.toJson()`](https://webpack.js.org/api/node/#stats-tojson-options-) webpack Node.js API.|
+|**`bundleDir`**|`{String}`|Path to directory containing webpack output files, i.e. the value of [`output.path` webpack config](https://webpack.js.org/configuration/output/#output-path).|
+|**`options.logger`**|`{Logger}`|An instance of a special `Logger` class also used in `webpack-bundle-analyzer`.|
+
+
+
+<h2 align="center" id="size-definitions">Size definitions</h2>
+
+Data contains three sizes for each module if bundle parsing has succeeded, or only `statSize` if bundle parsing has failed for some reason.
+
+### `statSize`
+
+The "input" size of modules, before any transformations like minification.
+
+### `parsedSize`
+
+The "output" size of modules. If you're using a webpack plugin such as Uglify, then this value will reflect the minified size of your code.
+
+### `gzipSize`
+
+Size approximation of running the parsed modules through gzip compression.
+
+Gzip sizes of folders are calculated by concatenating the parsed sources of all modules inside a folder and running [`gzip-size`](https://github.com/sindresorhus/gzip-size) over it.
+
+
+<h2 align="center">Troubleshooting</h2>
+
+### Some inner modules are missing from the data
+
+This is a known caveat when `webpack.optimize.ModuleConcatenationPlugin` is used. The way `ModuleConcatenationPlugin` works is that it merges multiple modules into a single one, and so that resulting module doesn't have edges anymore.
+
+If you are interested to drill down to exact dependencies, try parsing output without `ModuleConcatenationPlugin` applied. See [issue #115](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/115) for more discussion.
+
+<h2 align="center">Maintainers</h2>
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <img width="150" height="150"
+        src="https://avatars3.githubusercontent.com/u/302213?v=4&s=150">
+        </br>
+        <a href="https://github.com/th0r">Yuriy Grunin</a>
+      </td>
+      <td align="center">
+        <img width="150" height="150"
+        src="https://avatars3.githubusercontent.com/u/482561?v=4&s=150">
+        </br>
+        <a href="https://github.com/valscion">Vesa Laakso</a>
+      </td>
+    </tr>
+  <tbody>
+</table>