Support webpack --watch mode

bregenspan · May 12, 2017 · 279bb26 · 279bb26
1 parent bfaf8ef
commit 279bb26
Show file tree

Hide file tree

Showing 12 changed files with 279 additions and 210 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,17 @@
+// Babel config for Node
+// Compiles sources, gulpfile and tests
 {
   "presets": [
-    ["es2015"],
-    "stage-2"
+    ["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": ["transform-react-jsx"]
+  "plugins": [
+    ["transform-object-rest-spread", { "useBuiltIns": true }],
+    "transform-class-properties"
+  ]
 }
diff --git a/.eslintignore b/.eslintignore
@@ -8,4 +8,7 @@ client/vendor
 # Test fixtures
 test/bundles
 
+# Test results
+test/output
+
 samples
diff --git a/client/components/CheckboxList.jsx b/client/components/CheckboxList.jsx
@@ -17,6 +17,24 @@ export default class CheckboxList extends Component {
     };
   }
 
+  componentWillReceiveProps(newProps) {
+    if (newProps.items !== this.props.items) {
+      if (this.isAllChecked()) {
+        // Preserving `all checked` state
+        this.setState({ checkedItems: newProps.items });
+        this.informAboutChange(newProps.items);
+      } else {
+        // Filtering out checked items if new items don't contain them
+        const checkedItems = this.state.checkedItems.filter(item => newProps.items.includes(item));
+
+        if (checkedItems.length !== this.state.checkedItems.length) {
+          this.setState({ checkedItems });
+          this.informAboutChange(checkedItems);
+        }
+      }
+    }
+  }
+
   render() {
     const { label, items } = this.props;
 

diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx
@@ -22,22 +22,13 @@ export default class ModulesTreemap extends Component {
 
   constructor(props) {
     super(props);
-    this.treemap = null;
-    this.hasParsedSizes = (typeof props.data[0].parsedSize === 'number');
-    this.sizeSwitchItems = this.hasParsedSizes ? SIZE_SWITCH_ITEMS : SIZE_SWITCH_ITEMS.slice(0, 1);
-    let activeSizeItem = this.sizeSwitchItems.find(item => item.prop === `${props.defaultSizes}Size`);
-    if (!activeSizeItem) activeSizeItem = this.sizeSwitchItems[0];
-
-    this.chunkItems = [...props.data]
-      .sort((chunk1, chunk2) => compareStrings(chunk1.label, chunk2.label))
-      .map(chunk => ({ label: chunk.label }));
+    this.setData(props.data, true);
+  }
 
-    this.state = {
-      data: props.data,
-      showTooltip: false,
-      tooltipContent: null,
-      activeSizeItem
-    };
+  componentWillReceiveProps(newProps) {
+    if (newProps.data !== this.props.data) {
+      this.setData(newProps.data);
+    }
   }
 
   render() {
@@ -52,10 +43,10 @@ export default class ModulesTreemap extends Component {
               activeItem={activeSizeItem}
               onSwitch={this.handleSizeSwitch}/>
           </div>
-          {this.chunkItems.length > 1 &&
+          {this.state.chunkItems.length > 1 &&
             <div className={s.sidebarGroup}>
               <CheckboxList label="Show chunks"
-                items={this.chunkItems}
+                items={this.state.chunkItems}
                 onChange={this.handleVisibleChunksChange}/>
             </div>
           }
@@ -115,6 +106,26 @@ export default class ModulesTreemap extends Component {
     }
   };
 
+  setData(data, initial) {
+    const hasParsedSizes = (typeof data[0].parsedSize === 'number');
+    this.sizeSwitchItems = hasParsedSizes ? SIZE_SWITCH_ITEMS : SIZE_SWITCH_ITEMS.slice(0, 1);
+    const activeSizeItemProp = initial ? `${this.props.defaultSizes}Size` : this.state.activeSizeItem.prop;
+    let activeSizeItem = this.sizeSwitchItems.find(item => item.prop === activeSizeItemProp);
+    if (!activeSizeItem) activeSizeItem = this.sizeSwitchItems[0];
+
+    const chunkItems = [...data]
+      .sort((chunk1, chunk2) => compareStrings(chunk1.label, chunk2.label))
+      .map(chunk => ({ label: chunk.label }));
+
+    this.setState({
+      data,
+      showTooltip: false,
+      tooltipContent: null,
+      activeSizeItem,
+      chunkItems
+    });
+  }
+
   getTooltipContent(module) {
     if (!module) return null;
 

diff --git a/client/viewer.jsx b/client/viewer.jsx
@@ -5,9 +5,35 @@ import ModulesTreemap from './components/ModulesTreemap';
 /* eslint no-unused-vars: "off" */
 import styles from './viewer.css';
 
-window.addEventListener('load', () => {
-  render(
-    <ModulesTreemap data={window.chartData} defaultSizes={window.defaultSizes}/>,
-    document.getElementById('app')
+// Initializing WebSocket for live treemap updates
+let ws;
+try {
+  ws = new WebSocket(`ws://${location.host}`);
+} catch (err) {
+  console.warn(
+    "Your browser doesn't support WebSockets so you'll have to reload page manually to see updates in the treemap"
   );
+}
+
+window.addEventListener('load', () => {
+  renderApp(window.chartData);
+
+  if (ws) {
+    ws.addEventListener('message', event => {
+      const msg = JSON.parse(event.data);
+
+      if (msg.event === 'chartDataUpdated') {
+        renderApp(msg.data);
+      }
+    });
+  }
 }, false);
+
+let app;
+function renderApp(chartData, initialRender) {
+  app = render(
+    <ModulesTreemap data={chartData} defaultSizes={window.defaultSizes}/>,
+    document.getElementById('app'),
+    app
+  );
+}
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -1,5 +1,3 @@
-require('babel-polyfill');
-
 const { resolve, relative } = require('path');
 
 const gulp = require('gulp');

diff --git a/package.json b/package.json
@@ -23,8 +23,8 @@
     "build": "gulp build",
     "npm-publish": "npm run lint && npm run build && npm test && npm publish",
     "lint": "eslint --ext js,jsx .",
-    "test": "mocha --compilers js:babel-core/register -r babel-polyfill",
-    "test-dev": "mocha --watch --compilers js:babel-core/register -r babel-polyfill"
+    "test": "mocha --compilers js:babel-core/register",
+    "test-dev": "mocha --watch --compilers js:babel-core/register"
   },
   "files": [
     "public",
@@ -42,17 +42,17 @@
     "gzip-size": "^3.0.0",
     "lodash": "^4.17.4",
     "mkdirp": "^0.5.1",
-    "opener": "^1.4.3"
+    "opener": "^1.4.3",
+    "ws": "^2.3.1"
   },
   "devDependencies": {
     "babel-core": "6.24.1",
     "babel-eslint": "7.2.3",
     "babel-loader": "7.0.0",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-object-rest-spread": "6.23.0",
     "babel-plugin-transform-react-jsx": "6.24.1",
-    "babel-plugin-transform-runtime": "6.23.0",
-    "babel-polyfill": "6.23.0",
-    "babel-preset-es2015": "6.24.1",
-    "babel-preset-stage-2": "6.24.1",
+    "babel-preset-env": "1.4.0",
     "chai": "3.5.0",
     "chai-subset": "1.5.0",
     "classnames": "2.2.5",

diff --git a/src/BundleAnalyzerPlugin.js b/src/BundleAnalyzerPlugin.js
@@ -25,6 +25,7 @@ class BundleAnalyzerPlugin {
       ...opts
     };
 
+    this.server = null;
     this.logger = new Logger(this.opts.logLevel);
   }
 
@@ -79,15 +80,19 @@ class BundleAnalyzerPlugin {
     );
   }
 
-  startAnalyzerServer(stats) {
-    viewer.startServer(stats, {
-      openBrowser: this.opts.openAnalyzer,
-      host: this.opts.analyzerHost,
-      port: this.opts.analyzerPort,
-      bundleDir: this.compiler.outputPath,
-      logger: this.logger,
-      defaultSizes: this.opts.defaultSizes
-    });
+  async startAnalyzerServer(stats) {
+    if (this.server) {
+      (await this.server).updateChartData(stats);
+    } else {
+      this.server = viewer.startServer(stats, {
+        openBrowser: this.opts.openAnalyzer,
+        host: this.opts.analyzerHost,
+        port: this.opts.analyzerPort,
+        bundleDir: this.compiler.outputPath,
+        logger: this.logger,
+        defaultSizes: this.opts.defaultSizes
+      });
+    }
   }
 
   generateStaticReport(stats) {

diff --git a/src/viewer.js b/src/viewer.js
@@ -1,6 +1,8 @@
 const path = require('path');
 const fs = require('fs');
+const http = require('http');
 
+const WebSocket = require('ws');
 const _ = require('lodash');
 const express = require('express');
 const ejs = require('ejs');
@@ -20,7 +22,7 @@ module.exports = {
   start: startServer
 };
 
-function startServer(bundleStats, opts) {
+async function startServer(bundleStats, opts) {
   const {
     port = 8888,
     host = '127.0.0.1',
@@ -30,7 +32,7 @@ function startServer(bundleStats, opts) {
     defaultSizes = 'parsed'
   } = opts || {};
 
-  const chartData = getChartData(logger, bundleStats, bundleDir);
+  let chartData = getChartData(logger, bundleStats, bundleDir);
 
   if (!chartData) return;
 
@@ -46,23 +48,54 @@ function startServer(bundleStats, opts) {
   app.use('/', (req, res) => {
     res.render('viewer', {
       mode: 'server',
-      chartData: JSON.stringify(chartData),
+      get chartData() { return JSON.stringify(chartData) },
       defaultSizes: JSON.stringify(defaultSizes)
     });
   });
 
-  return app.listen(port, host, () => {
-    const url = `http://${host}:${port}`;
+  const server = http.createServer(app);
 
-    logger.info(
-      `${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` +
-      `Use ${bold('Ctrl+C')} to close it`
-    );
+  await new Promise(resolve => {
+    server.listen(port, host, () => {
+      resolve();
 
-    if (openBrowser) {
-      opener(url);
-    }
+      const url = `http://${host}:${port}`;
+
+      logger.info(
+        `${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` +
+        `Use ${bold('Ctrl+C')} to close it`
+      );
+
+      if (openBrowser) {
+        opener(url);
+      }
+    });
   });
+
+  const wss = new WebSocket.Server({ server });
+
+  return {
+    ws: wss,
+    http: server,
+    updateChartData
+  };
+
+  function updateChartData(bundleStats) {
+    const newChartData = getChartData(logger, bundleStats, bundleDir);
+
+    if (!newChartData) return;
+
+    chartData = newChartData;
+
+    wss.clients.forEach(client => {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(JSON.stringify({
+          event: 'chartDataUpdated',
+          data: newChartData
+        }));
+      }
+    });
+  }
 }
 
 function generateReport(bundleStats, opts) {

diff --git a/test/.gitignore b/test/.gitignore
@@ -1 +1,4 @@
 output
+
+# Sandbox config
+webpack.config.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,11 +2,10 @@ const webpack = require('webpack');
 const BundleAnalyzePlugin = require('./lib/BundleAnalyzerPlugin');
 
 module.exports = opts => {
-  opts = {
+  opts = Object.assign({
     env: 'dev',
-    analyze: false,
-    ...opts
-  };
+    analyze: false
+  }, opts);
 
   return {
     context: __dirname,
@@ -29,15 +28,25 @@ module.exports = opts => {
     watch: (opts.env === 'dev'),
 
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.jsx?$/,
           exclude: /(node_modules|client\/vendor)/,
-          loader: 'babel-loader'
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['env', { targets: { uglify: true } }]
+            ],
+            plugins: [
+              'transform-class-properties',
+              'transform-react-jsx',
+              ['transform-object-rest-spread', { useBuiltIns: true }]
+            ]
+          }
         },
         {
           test: /\.css$/,
-          loaders: [
+          use: [
             'style-loader',
             {
               loader: 'css-loader',