Version 3

.babelrc

@@ -2,16 +2,12 @@
 // 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"
-      ]
+    ["@babel/preset-env", {
+      "targets": {"node": 6}
     }]
   ],
   "plugins": [
-    ["transform-object-rest-spread", { "useBuiltIns": true }],
-    "transform-class-properties"
+    ["@babel/plugin-proposal-class-properties", {"loose": true}],
+    "@babel/plugin-transform-runtime"
   ]
 }

.eslintrc.json

@@ -1,7 +1,4 @@
 {
   "root": true,
-  "extends": "th0r",
-  "rules": {
-    "object-curly-spacing": ["error", "always"]
-  }
+  "extends": "th0r"
 }

.github/ISSUE_TEMPLATE.md

@@ -25,6 +25,6 @@ new BundleAnalyzerPlugin({
   generateStatsFile: true,
   // Excludes module sources from stats file so there won't be any sensitive data
   statsOptions: { source: false }
-})`
+})
 ```
 `stats.json` will be created in Webpack bundle output directory.

.gitignore

@@ -1,5 +1,5 @@
-lib
-public
-samples
+/lib
+/public
+/samples
 node_modules
 npm-debug.log

.travis.yml

@@ -4,12 +4,10 @@ branches:
   only:
     - master
 node_js:
-  - "4"
   - "6"
   - "8"
   - "node"
 cache:
-  - yarn: true
   - directories:
     - node_modules
 addons:

CONTRIBUTING.md

@@ -4,24 +4,18 @@ To contribute to `webpack-bundle-analyzer`, fork the repository and clone it to
 
 ## Setup packages
 
-Then install [`yarn`](https://yarnpkg.com/):
+Next, install this package's dependencies:
 
 ```sh
-npm install --global yarn
-```
-
-Next, install this package's dependencies with `yarn`:
-
-```sh
-yarn install
+npm i
 ```
 
 ## Develop with your own project
 
 Run the following to build this library and watch its source files for changes:
 
 ```sh
-yarn run start
+npm run start
 ```
 
 You will now have a fully functioning local build of this library ready to be used. **Leave the `start` script running**, and continue with a new Terminal/shell window.
@@ -73,11 +67,11 @@ After these steps, you should be able to create a new Pull Request for this repo
 It would be really great if the changes you did could be tested somehow. Our tests live inside the `test` directory, and they can be run with the following command:
 
 ```sh
-yarn run test-dev
+npm run test-dev
 ```
 
 Now whenever you change some files, the tests will be rerun immediately. If you don't want that, and want to run tests as a one-off operation, you can use:
 
 ```sh
-yarn run test
+npm test
 ```

client/.eslintrc.json

@@ -2,5 +2,14 @@
   "extends": [
     "th0r-react",
     "../.eslintrc.json"
-  ]
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  },
+  "rules": {
+    "react/jsx-key": "off",
+    "react/jsx-no-bind": "off"
+  }
 }

client/components/Button.css

@@ -0,0 +1,26 @@
+.button {
+  background: #fff;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+  font: var(--main-font);
+  outline: none;
+  padding: 5px 7px;
+  transition: background .3s ease;
+  white-space: nowrap;
+}
+
+.button:focus,
+.button:hover {
+  background: #ffefd7;
+}
+
+.button.active {
+  background: #ffa500;
+  color: #000;
+}
+
+.button[disabled] {
+  cursor: default;
+}

client/components/Button.jsx

@@ -0,0 +1,41 @@
+/** @jsx h */
+import {h} from 'preact';
+import cls from 'classnames';
+import s from './Button.css';
+import PureComponent from '../lib/PureComponent';
+
+export default class Button extends PureComponent {
+  render({active, toggle, className, children, ...props}) {
+    const classes = cls(className, {
+      [s.button]: true,
+      [s.active]: active,
+      [s.toggle]: toggle
+    });
+
+    return (
+      <button {...props}
+        ref={this.saveRef}
+        type="button"
+        className={classes}
+        disabled={this.disabled}
+        onClick={this.handleClick}>
+        {children}
+      </button>
+    );
+  }
+
+  get disabled() {
+    const {props} = this;
+    return (
+      props.disabled ||
+      (props.active && !props.toggle)
+    );
+  }
+
+  handleClick = (event) => {
+    this.elem.blur();
+    this.props.onClick(event);
+  }
+
+  saveRef = elem => this.elem = elem;
+}

client/components/Checkbox.css

@@ -0,0 +1,15 @@
+.label {
+  cursor: pointer;
+  display: block;
+}
+
+.checkbox {
+  cursor: pointer;
+}
+
+.itemText {
+  margin-left: 3px;
+  position: relative;
+  top: -2px;
+  vertical-align: middle;
+}

client/components/Checkbox.jsx

@@ -0,0 +1,29 @@
+/** @jsx h */
+import {h, Component} from 'preact';
+import cls from 'classnames';
+
+import s from './Checkbox.css';
+
+export default class Checkbox extends Component {
+
+  render() {
+    const {checked, className, children} = this.props;
+
+    return (
+      <label className={cls(s.label, className)}>
+        <input className={s.checkbox}
+          type="checkbox"
+          checked={checked}
+          onChange={this.handleChange}/>
+        <span className={s.itemText}>
+          {children}
+        </span>
+      </label>
+    );
+  }
+
+  handleChange = () => {
+    this.props.onChange(!this.props.checked);
+  }
+
+}

client/components/CheckboxList.css

@@ -1,5 +1,5 @@
 .container {
-  font: normal 10px Verdana;
+  font: var(--main-font);
   white-space: nowrap;
 }
 
@@ -8,20 +8,3 @@
   font-weight: bold;
   margin-bottom: 7px;
 }
-
-.checkbox {
-  cursor: pointer;
-}
-
-.item {
-  cursor: pointer;
-  display: block;
-  margin-bottom: 3px;
-}
-
-.itemText {
-  margin-left: 3px;
-  position: relative;
-  top: -2px;
-  vertical-align: middle;
-}

client/components/CheckboxList.jsx

@@ -1,12 +1,13 @@
 /** @jsx h */
-import { h, Component } from 'preact';
+import {h} from 'preact';
 
 import CheckboxListItem from './CheckboxListItem';
 import s from './CheckboxList.css';
+import PureComponent from '../lib/PureComponent';
 
 const ALL_ITEM = Symbol('ALL_ITEM');
 
-export default class CheckboxList extends Component {
+export default class CheckboxList extends PureComponent {
 
   static ALL_ITEM = ALL_ITEM;
 
@@ -21,22 +22,22 @@ export default class CheckboxList extends Component {
     if (newProps.items !== this.props.items) {
       if (this.isAllChecked()) {
         // Preserving `all checked` state
-        this.setState({ checkedItems: newProps.items });
+        this.setState({checkedItems: newProps.items});
         this.informAboutChange(newProps.items);
       } else if (this.state.checkedItems.length) {
         // Checking only items that are in the new `items` array
         const checkedItems = newProps.items.filter(item =>
           this.state.checkedItems.find(checkedItem => checkedItem.label === item.label)
         );
 
-        this.setState({ checkedItems });
+        this.setState({checkedItems});
         this.informAboutChange(checkedItems);
       }
     }
   }
 
   render() {
-    const { label, items, renderLabel } = this.props;
+    const {label, items, renderLabel} = this.props;
 
     return (
       <div className={s.container}>
@@ -64,7 +65,7 @@ export default class CheckboxList extends Component {
 
   handleToggleAllCheck = () => {
     const checkedItems = this.isAllChecked() ? [] : this.props.items;
-    this.setState({ checkedItems });
+    this.setState({checkedItems});
     this.informAboutChange(checkedItems);
   };
 
@@ -77,7 +78,7 @@ export default class CheckboxList extends Component {
       checkedItems = [...this.state.checkedItems, item];
     }
 
-    this.setState({ checkedItems });
+    this.setState({checkedItems});
     this.informAboutChange(checkedItems);
   };
 

client/components/CheckboxListItem.jsx

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

client/components/Icon.css

@@ -0,0 +1,4 @@
+.icon {
+  background: no-repeat center/contain;
+  display: inline-block;
+}