Merge pull request #507 from outline/jori/webpack-upgrade

Webpack 3 + dynamic Editor loading

.babelrc

@@ -7,7 +7,8 @@
     "transform-es2015-destructuring",
     "transform-object-rest-spread",
     "transform-regenerator",
-    "transform-class-properties"
+    "transform-class-properties",
+    "syntax-dynamic-import"
   ],
   "env": {
     "development": {

.eslintrc

@@ -43,7 +43,11 @@
     ]
   },
   "settings": {
-    "import/resolver": "webpack",
+    "import/resolver": {
+      "node": {
+        "paths": ["app", "."]
+      }
+    },
     "flowtype": {
       "onlyFilesWithFlowAnnotation": false
     }

.gitignore

@@ -2,5 +2,6 @@ dist
 node_modules/*
 .env
 npm-debug.log
+stats.json
 .DS_Store
 fakes3/*

app/components/Editor/components/Toolbar/Toolbar.js

@@ -6,7 +6,6 @@ import { Portal } from 'react-portal';
 import { Editor, findDOMNode } from 'slate-react';
 import { Node, Value } from 'slate';
 import styled from 'styled-components';
-import _ from 'lodash';
 import FormattingToolbar from './components/FormattingToolbar';
 import LinkToolbar from './components/LinkToolbar';
 

app/components/ErrorBoundary/ErrorBoundary.js

@@ -32,7 +32,12 @@ class ErrorBoundary extends Component {
       return (
         <CenteredContent>
           <PageTitle title="Something went wrong" />
-          <h1>🛸 Something unexpected happened</h1>
+          <h1>
+            <span role="img" aria-label="Space ship">
+              🛸
+            </span>{' '}
+            Something unexpected happened
+          </h1>
           <p>
             An unrecoverable error occurred{window.Bugsnag ||
               (true && ' and our engineers have been notified')}. Please try{' '}

app/components/Sidebar/components/Collections.js

@@ -166,6 +166,7 @@ const DocumentLink = observer(
     activeDocumentRef,
     prefetchDocument,
     depth,
+    history,
   }: DocumentLinkProps) => {
     const isActiveDocument =
       activeDocument && activeDocument.id === document.id;

app/models/Collection.js

@@ -1,7 +1,6 @@
 // @flow
 import { extendObservable, action, computed, runInAction } from 'mobx';
 import invariant from 'invariant';
-import _ from 'lodash';
 
 import BaseModel from 'models/BaseModel';
 import { client } from 'utils/ApiClient';

app/scenes/Document/Document.js

@@ -26,7 +26,6 @@ import CollectionsStore from 'stores/CollectionsStore';
 import DocumentMenu from 'menus/DocumentMenu';
 import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
-import Editor from 'components/Editor';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -56,6 +55,7 @@ class DocumentScene extends Component {
   props: Props;
   savedTimeout: number;
 
+  @observable editorComponent;
   @observable editCache: ?string;
   @observable newDocument: ?Document;
   @observable isLoading = false;
@@ -65,6 +65,7 @@ class DocumentScene extends Component {
 
   componentDidMount() {
     this.loadDocument(this.props);
+    this.loadEditor();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -128,6 +129,11 @@ class DocumentScene extends Component {
     }
   };
 
+  loadEditor = async () => {
+    const EditorImport = await import('components/Editor');
+    this.editorComponent = EditorImport.default;
+  };
+
   get isEditing() {
     return (
       this.props.match.path === matchDocumentEdit || this.props.newDocument
@@ -208,6 +214,7 @@ class DocumentScene extends Component {
   }
 
   render() {
+    const Editor = this.editorComponent;
     const isNew = this.props.newDocument;
     const isMoving = this.props.match.path === matchDocumentMove;
     const document = this.document;
@@ -225,7 +232,7 @@ class DocumentScene extends Component {
           {isMoving && document && <DocumentMove document={document} />}
           {titleText && <PageTitle title={titleText} />}
           {(this.isLoading || this.isSaving) && <LoadingIndicator />}
-          {!document ? (
+          {!document || !Editor ? (
             <CenteredContent>
               <LoadingState />
             </CenteredContent>

app/scenes/Document/components/DocumentMove/components/PathToDocument.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import invariant from 'invariant';
-import _ from 'lodash';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
+    "build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json > stats.json",
     "build": "npm run clean && npm run build:webpack",
     "start": "NODE_ENV=production node index.js",
     "dev": "NODE_ENV=development nodemon --watch server index.js",
@@ -64,10 +64,11 @@
     "@tommoor/slate-drop-or-paste-images": "^0.8.1",
     "aws-sdk": "^2.135.0",
     "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "6.2.5",
+    "babel-eslint": "^8.1.2",
+    "babel-loader": "^7.1.2",
     "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-styled-components": "^1.1.7",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
@@ -89,18 +90,17 @@
     "debug": "2.2.0",
     "dotenv": "^4.0.0",
     "emoji-regex": "^6.5.1",
-    "eslint": "^3.19.0",
-    "eslint-config-react-app": "^0.6.2",
-    "eslint-import-resolver-webpack": "^0.3.1",
-    "eslint-plugin-flowtype": "^2.32.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-prettier": "^2.0.1",
-    "eslint-plugin-react": "^6.10.3",
-    "exports-loader": "0.6.3",
-    "extract-text-webpack-plugin": "1.0.1",
+    "eslint": "^4.14.0",
+    "eslint-config-react-app": "^2.0.1",
+    "eslint-plugin-flowtype": "^2.40.1",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-prettier": "^2.4.0",
+    "eslint-plugin-react": "^7.5.1",
+    "exports-loader": "^0.6.4",
+    "extract-text-webpack-plugin": "^3.0.2",
     "fbemitter": "^2.1.1",
-    "file-loader": "0.9.0",
+    "file-loader": "^1.1.6",
     "flow-typed": "^2.1.2",
     "fs-extra": "^4.0.2",
     "history": "3.0.0",
@@ -128,7 +128,6 @@
     "koa-static": "^4.0.1",
     "localforage": "^1.5.0",
     "lodash": "^4.17.4",
-    "lodash.orderby": "4.4.0",
     "mobx": "^3.1.9",
     "mobx-react": "^4.1.8",
     "mobx-react-devtools": "^4.2.11",
@@ -182,10 +181,10 @@
     "styled-components-breakpoint": "^1.0.1",
     "styled-components-grid": "^1.0.0-preview.15",
     "styled-normalize": "^2.2.1",
-    "url-loader": "0.5.7",
+    "url-loader": "^0.6.2",
     "uuid": "2.0.2",
     "validator": "5.2.0",
-    "webpack": "1.13.2"
+    "webpack": "3.10.0"
   },
   "devDependencies": {
     "babel-jest": "22",

webpack.config.dev.js

@@ -16,12 +16,8 @@ const developmentWebpackConfig = Object.assign(commonWebpackConfig, {
   ],
 });
 
-developmentWebpackConfig.plugins.push(
-  new webpack.optimize.OccurenceOrderPlugin()
-);
-developmentWebpackConfig.plugins.push(new ExtractTextPlugin('styles.css'));
+developmentWebpackConfig.plugins.push(new ExtractTextPlugin({ filename: 'styles.css' }));
 developmentWebpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-developmentWebpackConfig.plugins.push(new webpack.NoErrorsPlugin());
 developmentWebpackConfig.plugins.push(
   new HtmlWebpackPlugin({
     title: 'Outline',

webpack.config.js

@@ -27,10 +27,10 @@ module.exports = {
     publicPath: '/static/',
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
-        loader: 'babel',
+        loader: 'babel-loader',
         include: [
           path.join(__dirname, 'app'),
           path.join(__dirname, 'shared'),
@@ -45,7 +45,10 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader'
+        }),
       },
       { test: /\.md/, loader: 'raw-loader' },
     ],
@@ -53,14 +56,19 @@ module.exports = {
     noParse: [new RegExp('node_modules/localforage/dist/localforage.js')],
   },
   resolve: {
-    root: path.resolve(__dirname, 'app'),
-    extensions: ['', '.js', '.json'],
-    alias: { shared: path.resolve(__dirname, 'shared') }
+    modules: [
+      path.resolve(__dirname, 'app'),
+      'node_modules'
+    ],
+    mainFields: ["browser",  "main"],
+    alias: {
+      shared: path.resolve(__dirname, 'shared'),
+    }
   },
   plugins: [
     definePlugin,
     new webpack.ProvidePlugin({
-      fetch: 'imports?this=>global!exports?global.fetch!isomorphic-fetch',
+      fetch: 'imports-loader?this=>global!exports-loader?global.fetch!isomorphic-fetch',
     }),
     new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
     new webpack.IgnorePlugin(/unicode\/category\/So/),

webpack.config.prod.js

@@ -15,6 +15,7 @@ productionWebpackConfig = Object.assign(commonWebpackConfig, {
     filename: 'bundle.[hash].js',
     publicPath: '/static/',
   },
+  stats: "normal"
 });
 productionWebpackConfig.plugins.push(
   new HtmlWebpackPlugin({
@@ -22,16 +23,11 @@ productionWebpackConfig.plugins.push(
   })
 );
 productionWebpackConfig.plugins.push(
-  new ExtractTextPlugin('styles.[hash].css')
-);
-productionWebpackConfig.plugins.push(
-  new webpack.optimize.OccurenceOrderPlugin()
+  new ExtractTextPlugin({ filename: 'styles.[hash].css' })
 );
 productionWebpackConfig.plugins.push(
   new webpack.optimize.UglifyJsPlugin({
-    compress: {
-      warnings: false,
-    },
+    sourceMap: true,
   })
 );
 productionWebpackConfig.plugins.push(