chore(deps): Update dependencies

Author: danez

.babelrc.js

@@ -6,11 +6,18 @@ const modules = output == null ? false : output;
 
 const options = {
   presets: [['@babel/env', { loose: true, modules }], '@babel/react'],
-  plugins: ['@babel/proposal-object-rest-spread', ['@babel/proposal-class-properties', { loose: true }]],
+  plugins: [
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/proposal-object-rest-spread',
+    ['@babel/proposal-class-properties', { loose: true }],
+  ],
 };
 
 if (target === 'examples') {
-  options.plugins.push(['transform-react-remove-prop-types', { removeImport: true }]);
+  options.plugins.push([
+    'transform-react-remove-prop-types',
+    { removeImport: true },
+  ]);
 } else {
   options.plugins.push(['transform-react-remove-prop-types', { mode: 'wrap' }]);
 }

.eslintrc

@@ -8,10 +8,7 @@
   "plugins": ["prettier"],
   "rules": {
     "no-plusplus": "off",
-    "prettier/prettier": [
-      "error",
-      { "singleQuote": true, "printWidth": 100, "trailingComma": "all" }
-    ],
+    "prettier/prettier": "error",
     "react/require-default-props": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
     "react/forbid-prop-types": "off",

.gitignore

@@ -4,3 +4,4 @@ npm-debug.log
 lib/
 dist/
 esm/
+yarn-error.log

.prettierrc

@@ -0,0 +1,11 @@
+{
+    "arrowParens": "avoid",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false
+  }

examples/src/components/ExampleItem.js

@@ -1,15 +1,27 @@
 import React, { Component } from 'react';
 import T from 'prop-types';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; // eslint-disable-line
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 import classNames from 'classnames';
 
+let ReactLive;
+
 const scope = { Tabs, Tab, TabList, TabPanel };
 
 export default class ExampleItem extends Component {
   state = {
     editorOpen: false,
+    liveLoaded: false,
   };
+
+  constructor(props) {
+    super(props);
+
+    import('react-live').then(Live => {
+      ReactLive = Live;
+      this.setState({ liveLoaded: true });
+    });
+  }
+
   toggleCheckbox({ target: { name, checked } }) {
     this.setState({
       [name]: checked,
@@ -28,10 +40,34 @@ export default class ExampleItem extends Component {
     return <div className="hint">{this.props.hint}</div>;
   }
 
-  render() {
+  renderLiveEditor() {
+    if (!this.state.liveLoaded) return null;
+
     const { editorOpen } = this.state;
+    const editorClassNames = classNames('live-editor', {
+      'live-editor--visible': editorOpen,
+    });
 
-    const editorClassNames = classNames('live-editor', { 'live-editor--visible': editorOpen });
+    return (
+      <ReactLive.LiveProvider
+        mountStylesheet={false}
+        scope={scope}
+        code={this.props.code}
+        noInline
+      >
+        <ReactLive.LiveError />
+        <div className="live-preview">
+          <div className={editorClassNames}>
+            <ReactLive.LiveEditor ignoreTabKey />
+          </div>
+          <ReactLive.LivePreview />
+        </div>
+      </ReactLive.LiveProvider>
+    );
+  }
+
+  render() {
+    const { editorOpen } = this.state;
     const formId = `editorOpen${this.props.label.replace(' ', '_')}`;
 
     return (
@@ -50,15 +86,7 @@ export default class ExampleItem extends Component {
           </label>
         </h3>
         {this.renderHint()}
-        <LiveProvider mountStylesheet={false} scope={scope} code={this.props.code} noInline>
-          <LiveError />
-          <div className="live-preview">
-            <div className={editorClassNames}>
-              <LiveEditor ignoreTabKey />
-            </div>
-            <LivePreview />
-          </div>
-        </LiveProvider>
+        {this.renderLiveEditor()}
       </div>
     );
   }

examples/src/index.html

@@ -31,7 +31,7 @@ <h2 class="page-header__subtitle">An accessible and easy tab component for <a hr
 	</div>
 	<footer class="page-footer">
 		<div class="container">
-			<span>Copyright &copy; <a href="https://twitter.com/TschinderDaniel" target="_blank">Daniel Tschinder</a> 2017. MIT Licensed.</span>
+			<span>Copyright &copy; <a href="https://twitter.com/TschinderDaniel" target="_blank">Daniel Tschinder</a> 2017-2018. MIT Licensed.</span>
 		</div>
 	</footer>
 </body>

package.json

@@ -22,7 +22,7 @@
     "start": "webpack-dev-server --inline --content-base examples/",
     "website": "run-s website:clean website:build website:redirect",
     "website:clean": "rimraf examples/dist",
-    "website:build": "cross-env NODE_ENV=production webpack",
+    "website:build": "cross-env BABEL_TARGET=examples NODE_ENV=production webpack",
     "website:redirect": "cp -R examples/src/example examples/dist"
   },
   "repository": {
@@ -57,12 +57,13 @@
     "@babel/plugin-external-helpers": "^7.0.0-beta.40",
     "@babel/plugin-proposal-class-properties": "^7.0.0-beta.40",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.44",
     "@babel/preset-env": "^7.0.0-beta.40",
     "@babel/preset-react": "^7.0.0-beta.40",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^8.0.1",
     "babel-jest": "^22.2.2",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^8.0.0-0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.0",
     "conventional-github-releaser": "^2.0.0",
     "cross-env": "^5.0.0",
@@ -76,15 +77,15 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^7.0.1",
-    "extract-text-webpack-plugin": "^3.0.2",
     "hoist-non-react-statics": "^2.3.1",
     "html-loader": "^0.5.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "jest": "^22.3.0",
-    "less": "^2.7.3",
+    "less": "^3.0.1",
     "less-loader": "^4.0.5",
-    "lint-staged": "^6.0.0",
+    "lint-staged": "^7.0.4",
+    "mini-css-extract-plugin": "^0.4.0",
     "npm-run-all": "^4.1.1",
     "prettier": "^1.2.2",
     "react": "^16.0.0",
@@ -93,18 +94,19 @@
     "react-modal": "^3.0.0",
     "react-test-renderer": "^16.0.0",
     "rimraf": "^2.5.2",
-    "rollup": "^0.56.1",
+    "rollup": "^0.58.0",
     "rollup-plugin-babel": "^4.0.0-beta.1",
-    "rollup-plugin-commonjs": "^8.2.6",
+    "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-ignore": "^1.0.3",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^3.0.0",
     "standard-version": "^4.2.0",
     "style-loader": "^0.20.0",
     "uglifyjs-webpack-plugin": "^1.0.1",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.4"
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.0.14",
+    "webpack-dev-server": "^3.1.3"
   },
   "dependencies": {
     "classnames": "^2.2.0",
@@ -118,7 +120,7 @@
   },
   "lint-staged": {
     "src/**/*.js": [
-      "eslint --fix",
+      "yarn run eslint --fix",
       "git add"
     ]
   }

webpack.config.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 const sourceDirectory = path.resolve(__dirname, 'examples/src');
@@ -20,33 +20,29 @@ const plugins = [
       removeRedundantAttributes: !isDev,
     },
   }),
-  new ExtractTextPlugin('app-[contenthash:8].css'),
-  new webpack.optimize.ModuleConcatenationPlugin(),
+  new MiniCssExtractPlugin({
+    filename: "[name].css",
+    chunkFilename: "app-[id].css"
+  }),
 ];
 
 if (!isDev) {
   plugins.push(
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-            warnings: false,
-        },
-      },
-      sourceMap: false,
     })
-);
+  );
 }
 
 module.exports = {
+  mode: isDev ? 'development' : 'production',
   context: sourceDirectory,
   entry: {
     app: './app.js',
   },
   output: {
     path: targetDirectory,
+    chunkFilename: 'chunk-[chunkhash].js',
     filename: '[name]-[chunkhash].js',
     hashDigestLength: 8,
   },
@@ -67,17 +63,11 @@ module.exports = {
       },
       {
         test: /\.less$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: ['css-loader', 'less-loader'],
-        }),
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: ['css-loader'],
-        }),
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
       {
         test: /\.html$/,