Merge master to version-3 branch

Fixes merge-conflicts caused by

* Changes to CHANGELOG.md in 8185d5f
* New version number in package.json
* Removal of client/utils.js completely in
  #110

So all in all, not too bad merge conflicts :)

CHANGELOG.md

@@ -17,6 +17,13 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
  * Removed undocumented `require('webpack-bundle-analyzer').start` accessor. If you try to
  use the `start` function now, it will raise an error.
 
+## 2.9.0
+ * **New Feature**
+ * Show chunk sizes in sidebar (closes #91)
+
+ * **Bug Fix**
+ * Properly parse webpack bundles that use arrow functions as module wrappers (#108, @regiontog)
+
 ## 2.8.3
  * **Bug Fix**
  * Correctly advertise port when using a random one (#89, @yannickcr)

README.md

@@ -110,6 +110,14 @@ as Uglify, then this value will reflect the minified size of your code.
 
 This is the size of running the file(s) through gzip compression.
 
+## Troubleshooting
+
+### I can't see all the dependencies in a chunk
+
+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 analyzing your bundle without `ModuleConcatenationPlugin`. See [issue #115](https://github.com/th0r/webpack-bundle-analyzer/issues/115) for more discussion.
+
 ## Contributing
 
 Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on contributing :tada:

packages/plugin/src/parseUtils.js

@@ -144,7 +144,7 @@ function isArgumentArrayConcatContainingChunks(arg) {
 function isModuleWrapper(node) {
  return (
  // It's an anonymous function expression that wraps module
- (node.type === 'FunctionExpression' && !node.id) ||
+ ((node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && !node.id) ||
  // If `DedupePlugin` is used it can be an ID of duplicated module...
  isModuleId(node) ||
  // or an array of shape [<module_id>, ...args]

packages/reporter-treemap/client/components/CheckboxList.jsx

@@ -4,12 +4,12 @@ import { h, Component } from 'preact';
 import CheckboxListItem from './CheckboxListItem';
 import s from './CheckboxList.css';
 
-const ALL_ITEM = {
- label: 'All'
-};
+const ALL_ITEM = Symbol('ALL_ITEM');
 
 export default class CheckboxList extends Component {
 
+ static ALL_ITEM = ALL_ITEM;
+
  constructor(props) {
  super(props);
  this.state = {
@@ -36,7 +36,7 @@ export default class CheckboxList extends Component {
  }
 
  render() {
- const { label, items } = this.props;
+ const { label, items, renderLabel } = this.props;
 
  return (
  <div className={s.container}>
@@ -46,12 +46,16 @@ export default class CheckboxList extends Component {
  <div>
  <CheckboxListItem item={ALL_ITEM}
  checked={this.isAllChecked()}
- onChange={this.handleToggleAllCheck}/>
+ onChange={this.handleToggleAllCheck}>
+ {renderLabel}
+ </CheckboxListItem>
  {items.map(item =>
  <CheckboxListItem key={item.label}
  item={item}
  checked={this.isItemChecked(item)}
- onChange={this.handleItemCheck}/>
+ onChange={this.handleItemCheck}>
+ {renderLabel}
+ </CheckboxListItem>
  )}
  </div>
  </div>

packages/reporter-treemap/client/components/CheckboxListItem.jsx

@@ -1,24 +1,40 @@
 /** @jsx h */
 import { h, Component } from 'preact';
 
+import CheckboxList from './CheckboxList';
+
 import s from './CheckboxList.css';
 
 export default class CheckboxListItem extends Component {
 
  render() {
- const { item, checked } = this.props;
+ const { checked } = this.props;
 
  return (
  <label className={s.item}>
- <input className={s.checkbox} type="checkbox" checked={checked}
+ <input className={s.checkbox}
+ type="checkbox"
+ checked={checked}
  onChange={this.handleChange}/>
- <span className={s.itemText}>
- {item.label}
- </span>
+ {this.renderLabel()}
  </label>
  );
  }
 
+ renderLabel() {
+ const { children, item } = this.props;
+
+ if (children && children.length) {
+ return children[0](item, s.itemText);
+ }
+
+ return (
+ <span className={s.itemText}>
+ {item === CheckboxList.ALL_ITEM ? 'All' : item.label}
+ </span>
+ );
+ }
+
  handleChange = () => {
  this.props.onChange(this.props.item);
  }

packages/reporter-treemap/client/components/ModulesTreemap.jsx

@@ -10,8 +10,6 @@ import CheckboxList from './CheckboxList';
 
 import s from './ModulesTreemap.css';
 
-import { compareStrings } from '../utils';
-
 const SIZE_SWITCH_ITEMS = [
  { label: 'Stat', prop: 'statSize' },
  { label: 'Parsed', prop: 'parsedSize' },
@@ -47,6 +45,8 @@ export default class ModulesTreemap extends Component {
  <div className={s.sidebarGroup}>
  <CheckboxList label="Show chunks"
  items={this.state.chunkItems}
+ checkedItems={this.visibleChunkItems}
+ renderLabel={this.renderChunkItemLabel}
  onChange={this.handleVisibleChunksChange}/>
  </div>
  }
@@ -77,6 +77,16 @@ export default class ModulesTreemap extends Component {
  null;
  }
 
+ renderChunkItemLabel = (item, labelClass) => {
+ const isAllItem = (item === CheckboxList.ALL_ITEM);
+ const label = isAllItem ? 'All' : item.label;
+ const size = isAllItem ? this.totalChunksSize : item[this.state.activeSizeItem.prop];
+
+ return (
+ <span className={labelClass}>{label} (<strong>{filesize(size)}</strong>)</span>
+ );
+ };
+
  handleSizeSwitch = sizeSwitchItem => {
  this.setState({ activeSizeItem: sizeSwitchItem });
  };
@@ -103,6 +113,11 @@ export default class ModulesTreemap extends Component {
  }
  };
 
+ get totalChunksSize() {
+ const sizeProp = this.state.activeSizeItem.prop;
+ return this.props.data.reduce((totalSize, chunk) => totalSize + chunk[sizeProp], 0);
+ }
+
  setData(data, initial) {
  const hasParsedSizes = (typeof data[0].parsedSize === 'number');
  this.sizeSwitchItems = hasParsedSizes ? SIZE_SWITCH_ITEMS : SIZE_SWITCH_ITEMS.slice(0, 1);
@@ -111,8 +126,7 @@ export default class ModulesTreemap extends Component {
  if (!activeSizeItem) activeSizeItem = this.sizeSwitchItems[0];
 
  const chunkItems = [...data]
- .sort((chunk1, chunk2) => compareStrings(chunk1.label, chunk2.label))
- .map(chunk => ({ label: chunk.label }));
+ .sort((chunk1, chunk2) => chunk2[activeSizeItem.prop] - chunk1[activeSizeItem.prop]);
 
  if (initial) {
  this.visibleChunkItems = chunkItems;

packages/reporter-treemap/client/components/Sidebar.jsx

@@ -11,20 +11,23 @@ export default class Sidebar extends Component {
  };
 
  state = {
- visible: true
+ visible: true,
+ renderContent: true
  };
 
  componentDidMount() {
  this.hideTimeoutId = setTimeout(() => this.toggleVisibility(false), 1500);
+ this.hideContentTimeout = null;
  }
 
  componentWillUnmount() {
- clearInterval(this.hideTimeoutId);
+ clearTimeout(this.hideTimeoutId);
+ clearTimeout(this.hideContentTimeout);
  }
 
  render() {
  const { position, children } = this.props;
- const { visible } = this.state;
+ const { visible, renderContent } = this.state;
 
  const className = cls({
  [s.container]: true,
@@ -36,7 +39,7 @@ export default class Sidebar extends Component {
  <div className={className}
  onMouseEnter={this.handleMouseEnter}
  onMouseLeave={this.handleMouseLeave}>
- {children}
+ {renderContent ? children : null}
  </div>
  );
  }
@@ -49,7 +52,19 @@ export default class Sidebar extends Component {
  handleMouseLeave = () => this.toggleVisibility(false);
 
  toggleVisibility(flag) {
+ clearTimeout(this.hideContentTimeout);
+
  this.setState({ visible: flag });
+
+ if (flag) {
+ this.setState({ renderContent: true });
+ } else {
+ // Waiting for the CSS animation to finish and hiding content
+ this.hideContentTimeout = setTimeout(
+ () => this.setState({ renderContent: false }),
+ 500
+ );
+ }
  }
 
 }

test/bundles/validBundleWithArrowFunction.js

@@ -0,0 +1,3 @@
+webpackJsonp([0],[(t,e,r)=>{
+ console.log("Hello world!");
+}]);

test/bundles/validBundleWithArrowFunction.modules.json

@@ -0,0 +1,5 @@
+{
+ "modules": {
+ "0": "(t,e,r)=>{\n console.log(\"Hello world!\");\n}"
+ }
+}