PoC: Split treemap UI from webpack analyzer code

.eslintignore

@@ -1,9 +1,9 @@
 # Generated code
 lib
-public
+reporter-treemap/public
 
 # Vendor code
-client/vendor
+reporter-treemap/client/vendor
 
 # Test fixtures
 test/bundles

gulpfile.babel.js

@@ -8,6 +8,7 @@ const { white, cyan } = gutil.colors;
 
 const NODE_SRC = ['src/**/*.js'];
 const NODE_DEST = resolve('lib');
+const VIEWER_DEST = resolve('reporter-treemap', 'public');
 
 const cli = require('commander')
   .usage('<task> [options]')
@@ -57,7 +58,7 @@ gulp.task('build', ['scripts.viewer', 'scripts.node']);
 
 gulp.task('scripts.viewer', ['scripts.node', 'clean.scripts.viewer'], () => {
   const webpack = require('webpack');
-  const config = require('./webpack.config')({
+  const config = require('./reporter-treemap/webpack.config')({
     env: cli.env,
     analyze: cli.analyze
   });
@@ -82,7 +83,7 @@ gulp.task('scripts.viewer', ['scripts.node', 'clean.scripts.viewer'], () => {
 
 gulp.task('clean.scripts.viewer', () => {
   const del = require('del');
-  return del('public');
+  return del(VIEWER_DEST);
 });
 
 gulp.task('scripts.node', ['clean.scripts.node'], () =>

client/.eslintrc.json → reporter-treemap/client/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../.eslintrc.json",
+  "extends": "../../.eslintrc.json",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

src/viewer/generateReport.js → reporter-treemap/generateReport.js

@@ -8,7 +8,7 @@ const { bold } = require('chalk');
 
 module.exports = generateReport;
 
-const projectRoot = path.resolve(__dirname, '..', '..');
+const projectRoot = __dirname;
 
 function generateReport(chartData, opts) {
   if (!chartData) {

src/viewer/startServer.js → reporter-treemap/startServer.js

@@ -1,9 +1,8 @@
-const path = require('path');
 const express = require('express');
 const opener = require('opener');
 const { bold } = require('chalk');
 
-const projectRoot = path.resolve(__dirname, '..', '..');
+const projectRoot = __dirname;
 
 module.exports = startServer;
 

webpack.config.js → reporter-treemap/webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
-const BundleAnalyzePlugin = require('./lib/BundleAnalyzerPlugin');
+const { resolve } = require('path');
+const BundleAnalyzePlugin = require('../lib/BundleAnalyzerPlugin');
 
 module.exports = opts => {
   opts = {
@@ -12,7 +13,7 @@ module.exports = opts => {
     context: __dirname,
     entry: './client/viewer',
     output: {
-      path: 'public',
+      path: resolve(__dirname, 'public'),
       filename: 'viewer.js',
       publicPath: '/'
     },

src/BundleAnalyzerPlugin.js

@@ -5,7 +5,6 @@ const { bold } = require('chalk');
 
 const getChartData = require('./chartData');
 const Logger = require('./Logger');
-const viewer = require('./viewer');
 
 class BundleAnalyzerPlugin {
 
@@ -19,6 +18,7 @@ class BundleAnalyzerPlugin {
       statsFilename: 'stats.json',
       statsOptions: null,
       logLevel: 'info',
+      reporter: require('../reporter-treemap'),
       // deprecated
       startAnalyzer: true,
       ...opts
@@ -79,13 +79,14 @@ class BundleAnalyzerPlugin {
   }
 
   startAnalyzerServer(stats) {
+    const reporter = this.opts.reporter;
     const bundleDir = this.compiler.outputPath;
     const logger = this.logger;
     const chartData = getChartData({ logger, bundleStats: stats, bundleDir });
 
     if (!chartData) return;
 
-    viewer.startServer(chartData, {
+    reporter.startServer(chartData, {
       openBrowser: this.opts.openAnalyzer,
       port: this.opts.analyzerPort,
       bundleDir,
@@ -94,13 +95,14 @@ class BundleAnalyzerPlugin {
   }
 
   generateStaticReport(stats) {
+    const reporter = this.opts.reporter;
     const bundleDir = this.compiler.outputPath;
     const logger = this.logger;
     const chartData = getChartData({ logger, bundleStats: stats, bundleDir });
 
     if (!chartData) return;
 
-    viewer.generateReport(chartData, {
+    reporter.generateReport(chartData, {
       openBrowser: this.opts.openAnalyzer,
       reportFilename: this.opts.reportFilename,
       bundleDir,

src/bin/analyzer.js

@@ -8,7 +8,6 @@ const commander = require('commander');
 const { magenta } = require('chalk');
 
 const getChartData = require('../chartData');
-const viewer = require('../viewer');
 const Logger = require('../Logger');
 
 const program = commander
@@ -38,6 +37,12 @@ const program = commander
     Number,
     8888
   )
+  .option(
+    '-R, --reporter <node package>',
+    'Reporter package that will be used to generate the report.' +
+    br('Default is the built-in `reporter-treemap`.'),
+    require.resolve('../../reporter-treemap')
+  )
   .option(
     '-r, --report <file>',
     'Path to bundle report file that will be generated in `static` mode.' +
@@ -54,6 +59,7 @@ let {
   mode,
   port,
   report: reportFilename,
+  reporter: reporterModulePath,
   open: openBrowser,
   args: [bundleStatsFile, bundleDir]
 } = program;
@@ -74,6 +80,15 @@ try {
   process.exit(1);
 }
 
+let viewer;
+try {
+  viewer = require(reporterModulePath);
+} catch (err) {
+  console.error(`Couldn't resolve reporter for path "${reporterModulePath}".`);
+  console.error('Reporters should either be installed in node_modules or provided as an absolute path.');
+  process.exit(1);
+}
+
 const logger = new Logger();
 const chartData = getChartData({ logger, bundleStats, bundleDir });
 
@@ -84,13 +99,23 @@ if (!chartData) {
 }
 
 if (mode === 'server') {
+  if (typeof viewer.startServer !== 'function') {
+    console.error(`The given reporter "${reporterModulePath}" does not expose .startServer() ` +
+                  'function and so can\'t be used for server mode reporting.');
+    process.exit(1);
+  }
   viewer.startServer(chartData, {
     openBrowser,
     port,
     bundleDir,
     logger
   });
 } else {
+  if (typeof viewer.generateReport !== 'function') {
+    console.error(`The given reporter "${reporterModulePath}" does not expose .generateReport() ` +
+                  'function and so can\'t be used for static mode reporting.');
+    process.exit(1);
+  }
   viewer.generateReport(chartData, {
     openBrowser,
     reportFilename: resolve(reportFilename),

src/index.js

@@ -1,4 +1,4 @@
-const { startServer } = require('./viewer');
+const { startServer } = require('../reporter-treemap');
 
 module.exports = {
   // Deprecated