[DO NOT MERGE] Optimize Webpack Performance and bundle size

.babelrc

@@ -1,4 +1,17 @@
 {
-  "presets": ["react", "es2015", "es2016"],
-  "plugins": ["transform-class-properties", "transform-object-rest-spread", "transform-async-to-bluebird", "transform-runtime", "add-module-exports"]
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-runtime",
+    "add-module-exports",
+    ["@babel/plugin-transform-async-to-generator", {
+      "module": "bluebird",
+      "method": "coroutine"
+    }]
+  ]
 }

karma.conf.js

@@ -1,6 +1,7 @@
 // karma.conf.js - the config file for karma, which runs our tests.
 
 var path = require('path');
+var fs = require('fs');
 var webpack = require('webpack');
 var webpack_config = require('./webpack.config');
 
@@ -38,7 +39,7 @@ webpack_config.mode = 'development';
 // add ./test as a search path for js
 webpack_config.module.rules.unshift({
     test: /\.js$/, use: "babel-loader",
-    include: [path.resolve('./src'), path.resolve('./test')],
+    include: [path.resolve('./src'), fs.realpathSync(__dirname + '/node_modules/matrix-react-sdk/src'), fs.realpathSync(__dirname + '/node_modules/matrix-js-sdk/src'), path.resolve('./test')],
 });
 
 // disable parsing for sinon, because it
@@ -64,7 +65,7 @@ module.exports = function (config) {
 
         // list of files / patterns to load in the browser
         files: [
-            'node_modules/babel-polyfill/browser.js',
+            'node_modules/@babel/polyfill/browser.js',
             testFile,
 
             // make the images available via our httpd. They will be avaliable
@@ -95,7 +96,7 @@ module.exports = function (config) {
         // available preprocessors:
         // https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
-            '{src,test}/**/*.js': ['webpack', 'sourcemap'],
+            '{src,test,node_modules/matrix-react-sdk/src}/**/*.js': ['webpack', 'sourcemap'],
         },
 
         // test results reporter to use

package.json

@@ -25,6 +25,7 @@
   ],
   "style": "bundle.css",
   "matrix-react-parent": "matrix-react-sdk",
+  "matrix-react-build-type": "webpack",
   "scripts": {
     "reskindex": "reskindex -h src/header",
     "reskindex:watch": "reskindex -h src/header -w",
@@ -36,7 +37,7 @@
     "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
     "build:bundle:dev": "webpack --progress --bail --mode development",
     "build:electron": "yarn clean && yarn build && yarn install:electron && build -wml --ia32 --x64",
-    "build:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk build",
+    "build:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk reskindex",
     "build:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:init",
     "build": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle",
     "build:dev": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle:dev",
@@ -48,8 +49,8 @@
     "start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress",
     "start:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:watch",
     "start:js-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-js-sdk start:watch",
-    "start:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk start:all",
-    "start:react-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-react-sdk start:all",
+    "start:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk reskindex:watch",
+    "start:react-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-react-sdk reskindex:watch",
     "start": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk\" \"yarn start:react-sdk\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js\"",
     "start:prod": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk:prod\" \"yarn start:react-sdk:prod\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js:prod\"",
     "lint": "eslint src/",
@@ -60,8 +61,8 @@
     "test-multi": "karma start"
   },
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
-    "babel-runtime": "^6.26.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
     "bluebird": "^3.5.2",
     "browser-request": "^0.3.3",
     "draft-js": "^0.11.0-alpha",
@@ -82,21 +83,29 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/helper-module-imports": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.2.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^6.6.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.1.1",
-    "babel-loader": "^7.1.5",
+    "babel-eslint": "^9.0.0",
+    "babel-loader": "^8.0.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-async-to-bluebird": "^1.1.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
-    "babel-preset-es2017": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
     "chokidar": "^2.0.4",
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",

src/components/structures/VectorEmbeddedPage.js

@@ -18,9 +18,9 @@ limitations under the License.
 
 'use strict';
 
-import EmbeddedPage from 'matrix-react-sdk/lib/components/structures/EmbeddedPage';
+import EmbeddedPage from 'matrix-react-sdk/src/components/structures/EmbeddedPage';
 import sanitizeHtml from 'sanitize-html';
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
 
 export default class VectorEmbeddedPage extends EmbeddedPage {
     static replaces = 'EmbeddedPage';

src/components/views/auth/VectorAuthFooter.js

@@ -17,8 +17,8 @@ limitations under the License.
 
 'use strict';
 
-const React = require('react');
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import React from 'react';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
 
 module.exports = React.createClass({
     displayName: 'VectorAuthFooter',

src/components/views/auth/VectorAuthHeaderLogo.js

@@ -19,7 +19,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
+import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 
 export default class VectorAuthHeaderLogo extends React.PureComponent {
     static replaces = 'AuthHeaderLogo'

src/components/views/auth/VectorAuthPage.js

@@ -17,8 +17,8 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import sdk from 'matrix-react-sdk/lib/index';
-import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
+import sdk from 'matrix-react-sdk/src/index';
+import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 
 export default class VectorAuthPage extends React.PureComponent {
     static replaces = 'AuthPage'

src/components/views/auth/VectorCustomServerDialog.js

@@ -14,9 +14,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-
-const React = require("react");
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import React from 'react';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
 
 /**
  * This is identical to `CustomServerDialog` except for replacing "this app"

src/vector/index.js

@@ -39,12 +39,12 @@ if (process.env.NODE_ENV !== 'production') {
 import './modernizr';
 import ReactDOM from 'react-dom';
 import sdk from 'matrix-react-sdk';
-import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 sdk.loadSkin(require('../component-index'));
-import VectorConferenceHandler from 'matrix-react-sdk/lib/VectorConferenceHandler';
+import VectorConferenceHandler from 'matrix-react-sdk/src/VectorConferenceHandler';
 import Promise from 'bluebird';
 import request from 'browser-request';
-import * as languageHandler from 'matrix-react-sdk/lib/languageHandler';
+import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
 
 import url from 'url';
 
@@ -53,14 +53,14 @@ import {parseQs, parseQsFromFragment} from './url_utils';
 import ElectronPlatform from './platform/ElectronPlatform';
 import WebPlatform from './platform/WebPlatform';
 
-import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
-import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
-import Tinter from 'matrix-react-sdk/lib/Tinter';
-import SdkConfig from "matrix-react-sdk/lib/SdkConfig";
+import MatrixClientPeg from 'matrix-react-sdk/src/MatrixClientPeg';
+import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
+import Tinter from 'matrix-react-sdk/src/Tinter';
+import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 
 import Olm from 'olm';
 
-import CallHandler from 'matrix-react-sdk/lib/CallHandler';
+import CallHandler from 'matrix-react-sdk/src/CallHandler';
 
 import {getVectorConfig} from './getconfig';
 

src/vector/indexeddb-worker.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {IndexedDBStoreWorker} from 'matrix-js-sdk/lib/indexeddb-worker.js';
+import {IndexedDBStoreWorker} from 'matrix-js-sdk/src/indexeddb-worker.js';
 
 const remoteWorker = new IndexedDBStoreWorker(postMessage);
 

src/vector/platform/ElectronPlatform.js

@@ -19,10 +19,10 @@ limitations under the License.
 */
 
 import VectorBasePlatform, {updateCheckStatusEnum} from './VectorBasePlatform';
-import dis from 'matrix-react-sdk/lib/dispatcher';
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import dis from 'matrix-react-sdk/src/dispatcher';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
 import Promise from 'bluebird';
-import rageshake from 'matrix-react-sdk/lib/rageshake/rageshake';
+import rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
 
 const ipcRenderer = window.ipcRenderer;
 

src/vector/platform/VectorBasePlatform.js

@@ -18,9 +18,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import BasePlatform from 'matrix-react-sdk/lib/BasePlatform';
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import dis from 'matrix-react-sdk/lib/dispatcher';
+import BasePlatform from 'matrix-react-sdk/src/BasePlatform';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
+import dis from 'matrix-react-sdk/src/dispatcher';
 
 import Favico from 'favico.js';
 

src/vector/platform/WebPlatform.js

@@ -19,8 +19,8 @@ limitations under the License.
 
 import VectorBasePlatform, {updateCheckStatusEnum} from './VectorBasePlatform';
 import request from 'browser-request';
-import dis from 'matrix-react-sdk/lib/dispatcher.js';
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import dis from 'matrix-react-sdk/src/dispatcher.js';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
 import Promise from 'bluebird';
 
 import url from 'url';

src/vector/rageshakesetup.js

@@ -25,8 +25,8 @@ limitations under the License.
  * from the rageshake.)
  */
 
-import rageshake from "matrix-react-sdk/lib/rageshake/rageshake";
-import SdkConfig from "matrix-react-sdk/lib/SdkConfig";
+import rageshake from "matrix-react-sdk/src/rageshake/rageshake";
+import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 
 function initRageshake() {
     rageshake.init().then(() => {
@@ -50,7 +50,7 @@ initRageshake();
 
 global.mxSendRageshake = function(text, withLogs) {
     if (withLogs === undefined) withLogs = true;
-    require(['matrix-react-sdk/lib/rageshake/submit-rageshake'], (s) => {
+    require(['matrix-react-sdk/src/rageshake/submit-rageshake'], (s) => {
         s(SdkConfig.get().bug_report_endpoint_url, {
             userText: text,
             sendLogs: withLogs,

test/app-tests/joining.js

@@ -16,17 +16,17 @@ limitations under the License.
 
 /* joining.js: tests for the various paths when joining a room */
 
-import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 import WebPlatform from '../../src/vector/platform/WebPlatform';
 
 require('skin-sdk');
 
 const jssdk = require('matrix-js-sdk');
 
 const sdk = require('matrix-react-sdk');
-const peg = require('matrix-react-sdk/lib/MatrixClientPeg');
-const dis = require('matrix-react-sdk/lib/dispatcher');
-const PageTypes = require('matrix-react-sdk/lib/PageTypes');
+const peg = require('matrix-react-sdk/src/MatrixClientPeg');
+const dis = require('matrix-react-sdk/src/dispatcher');
+const PageTypes = require('matrix-react-sdk/src/PageTypes');
 const MatrixChat = sdk.getComponent('structures.MatrixChat');
 const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
 const RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');

test/app-tests/loading.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 /* loading.js: test the myriad paths we have for loading the application */
 
-import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 import WebPlatform from '../../src/vector/platform/WebPlatform';
 
 import 'skin-sdk';
@@ -31,10 +31,10 @@ import MatrixReactTestUtils from 'matrix-react-test-utils';
 import jssdk from 'matrix-js-sdk';
 
 import sdk from 'matrix-react-sdk';
-import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
-import * as languageHandler from 'matrix-react-sdk/lib/languageHandler';
-import {VIEWS} from 'matrix-react-sdk/lib/components/structures/MatrixChat';
-import dis from 'matrix-react-sdk/lib/dispatcher';
+import MatrixClientPeg from 'matrix-react-sdk/src/MatrixClientPeg';
+import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
+import {VIEWS} from 'matrix-react-sdk/src/components/structures/MatrixChat';
+import dis from 'matrix-react-sdk/src/dispatcher';
 
 import * as test_utils from '../test-utils';
 import MockHttpBackend from 'matrix-mock-request';