v1.5.8

Fix webpack config (by stealing Dave's config)

.babelrc

@@ -1,20 +0,0 @@
-{
-    "presets": [
-        "react",
-        "es2015",
-        "es2016"
-    ],
-    "plugins": [
-        [
-            "transform-builtin-extend",
-            {
-                "globals": ["Error"]
-            }
-        ],
-        "transform-class-properties",
-        "transform-object-rest-spread",
-        "transform-runtime",
-        "add-module-exports",
-        "syntax-dynamic-import"
-    ]
-}

.buildkite/pipeline.yaml

@@ -1,36 +1,56 @@
 steps:
-  - label: ":eslint: Lint"
+  - label: ":eslint: JS Lint"
     command:
       - "yarn install"
-      - "yarn lint"
+      - "yarn lint:js"
     plugins:
       - docker#v3.0.1:
-          image: "node:10"
+          image: "node:12"
 
-  - label: ":karma: Tests"
+# This layer doesn't have a TypeScript linter. This comment is to remind TravisR to fix that.
+#  - label: ":eslint: TS Lint"
+#    command:
+#      - "echo '--- Install js-sdk'"
+#      - "./scripts/ci/install-deps.sh"
+#      - "yarn lint:ts"
+#    plugins:
+#      - docker#v3.0.1:
+#          image: "node:12"
+
+  - label: ":eslint: Types Lint"
+    command:
+      - "yarn install"
+      - "yarn lint:types"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:12"
+
+  - label: "🛠 Build"
+    command:
+      - "echo '--- Fetching Dependencies'"
+      - "./scripts/fetch-develop.deps.sh --depth 1"
+      - "yarn install"
+      - "echo '+++ Building Project'"
+      - "yarn build"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:12"
+
+  - label: ":jest: Tests"
     agents:
       # We use a medium sized instance instead of the normal small ones because
       # webpack loves to gorge itself on resources.
       queue: "medium"
     command:
-      # Install chrome
-      - "echo '--- Installing Chrome'"
-      - "wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -"
-      - "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
-      - "apt-get update"
-      - "apt-get install -y google-chrome-stable"
-      # Run tests
       - "echo '--- Fetching Dependencies'"
       - "./scripts/fetch-develop.deps.sh --depth 1"
       - "yarn install"
+      - "yarn build:genfiles"  # We have to build the app to make sure the autogenned files are present
       - "echo '+++ Running Tests'"
       - "yarn test"
-    env:
-      CHROME_BIN: "/usr/bin/google-chrome-stable"
     plugins:
       - docker#v3.0.1:
           image: "node:10"
-          propagate-environment: true
 
   - label: ":hammer: Package"
     command:
@@ -54,4 +74,4 @@ steps:
       - "yarn diff-i18n"
     plugins:
       - docker#v3.0.1:
-          image: "node:10"
+          image: "node:10"

.stylelintrc.js

@@ -0,0 +1,26 @@
+// Copied from react-sdk
+// TODO: Only keep one copy of this for synchronization purposes
+module.exports = {
+    "extends": "stylelint-config-standard",
+    "plugins": [
+        "stylelint-scss",
+    ],
+    "rules": {
+        "indentation": 4,
+        "comment-empty-line-before": null,
+        "declaration-empty-line-before": null,
+        "length-zero-no-unit": null,
+        "rule-empty-line-before": null,
+        "color-hex-length": null,
+        "max-empty-lines": null,
+        "number-no-trailing-zeros": null,
+        "number-leading-zero": null,
+        "selector-list-comma-newline-after": null,
+        "at-rule-no-unknown": null,
+        "no-descending-specificity": null,
+        "scss/at-rule-no-unknown": [true, {
+            // https://github.com/vector-im/riot-web/issues/10544
+            "ignoreAtRules": ["define-mixin"],
+        }],
+    }
+};

CHANGELOG.md

@@ -1,3 +1,76 @@
+Changes in [1.5.8](https://github.com/vector-im/riot-web/releases/tag/v1.5.8) (2020-01-27)
+==========================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v1.5.8-rc.2...v1.5.8)
+
+ * Fixes for alias display and copy / paste on composer
+
+Changes in [1.5.8-rc.2](https://github.com/vector-im/riot-web/releases/tag/v1.5.8-rc.2) (2020-01-22)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v1.5.8-rc.1...v1.5.8-rc.2)
+
+ * Fix incorrect version of react-sdk
+
+Changes in [1.5.8-rc.1](https://github.com/vector-im/riot-web/releases/tag/v1.5.8-rc.1) (2020-01-22)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v1.5.7...v1.5.8-rc.1)
+
+This version contains an upgrade to the cryptography database
+version. Once users run this version, their session's indexeddb
+store will be upgraded and older version of Riot will no longer
+be able to read it. Users will have to log out and log in if
+the version of Riot is downgraded back to a previous version.
+
+ * Fix webpack config (by stealing Dave's config)
+   [\#11994](https://github.com/vector-im/riot-web/pull/11994)
+ * Fix webpack to babel js-sdk & react-sdk but no other deps
+   [\#11947](https://github.com/vector-im/riot-web/pull/11947)
+ * Update from Weblate
+   [\#11934](https://github.com/vector-im/riot-web/pull/11934)
+ * Fix rageshake post-sourcemaps
+   [\#11926](https://github.com/vector-im/riot-web/pull/11926)
+ * Fix yarn start concurrent commands
+   [\#11895](https://github.com/vector-im/riot-web/pull/11895)
+ * Run the react-sdk reskindexer for developers
+   [\#11894](https://github.com/vector-im/riot-web/pull/11894)
+ * Update labs documentation for feature_ftue_dms given new scope
+   [\#11893](https://github.com/vector-im/riot-web/pull/11893)
+ * Fix indentation on webpack config and make sourcemapped files legible
+   [\#11892](https://github.com/vector-im/riot-web/pull/11892)
+ * Remove spinner check
+   [\#11891](https://github.com/vector-im/riot-web/pull/11891)
+ * Don't minifiy builds of develop through CI packaging
+   [\#11867](https://github.com/vector-im/riot-web/pull/11867)
+ * Use Jest for tests
+   [\#11869](https://github.com/vector-im/riot-web/pull/11869)
+ * Support application/wasm in Docker image
+   [\#11858](https://github.com/vector-im/riot-web/pull/11858)
+ * Fix sourcemaps by refactoring the build system
+   [\#11843](https://github.com/vector-im/riot-web/pull/11843)
+ * Disable event indexing on develop
+   [\#11850](https://github.com/vector-im/riot-web/pull/11850)
+ * Updated blog url
+   [\#11792](https://github.com/vector-im/riot-web/pull/11792)
+ * Enable and document presence in room list feature flag
+   [\#11829](https://github.com/vector-im/riot-web/pull/11829)
+ * Add stub service worker so users can install on desktop with Chrome
+   [\#11774](https://github.com/vector-im/riot-web/pull/11774)
+ * Update from Weblate
+   [\#11826](https://github.com/vector-im/riot-web/pull/11826)
+ * Sourcemaps: develop -> feature branch
+   [\#11802](https://github.com/vector-im/riot-web/pull/11802)
+ * Update build scripts for new process
+   [\#11801](https://github.com/vector-im/riot-web/pull/11801)
+ * Make the webpack config work for us
+   [\#11712](https://github.com/vector-im/riot-web/pull/11712)
+ * Updates URL for Electron Command Line Switches
+   [\#11810](https://github.com/vector-im/riot-web/pull/11810)
+ * Import from src/ for the react-sdk and js-sdk
+   [\#11714](https://github.com/vector-im/riot-web/pull/11714)
+ * Convert components to ES6 exports
+   [\#11713](https://github.com/vector-im/riot-web/pull/11713)
+ * Remove now-retired package.json property
+   [\#11660](https://github.com/vector-im/riot-web/pull/11660)
+
 Changes in [1.5.7](https://github.com/vector-im/riot-web/releases/tag/v1.5.7) (2020-01-13)
 ==========================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v1.5.7-rc.2...v1.5.7)

Dockerfile

@@ -30,5 +30,8 @@ FROM nginx:alpine
 
 COPY --from=builder /src/webapp /app
 
+# Insert wasm type into Nginx mime.types file so they load correctly.
+RUN sed -i '3i\ \ \ \ application/wasm wasm\;' /etc/nginx/mime.types
+
 RUN rm -rf /usr/share/nginx/html \
  && ln -s /app /usr/share/nginx/html

babel.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  "sourceMaps": true,
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "browsers": [
+          "last 2 versions"
+        ]
+      }
+    }],
+    "@babel/preset-typescript",
+    "@babel/preset-flow",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", {"legacy": true}],
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-transform-flow-comments",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-runtime"
+  ]
+};

docs/labs.md

@@ -82,12 +82,11 @@ that downloads, stores, and indexes room messages for E2E encrypted rooms.
 The existing search will transparently work for encrypted rooms just like it
 does for non-encrypted.
 
-## New DM invite dialog (`feature_ftue_dms`)
+## New invite dialog (`feature_ftue_dms`)
 
-An improved dialog for inviting users. Once finished, this will replace both the
-DM creation dialog and the 'invite user' dialog. This is a work in progress and
-as such not all functionality may be present until the feature replaces today's
-UX.
+An improved dialog for inviting users. This replaces both the DM creation dialog 
+and the 'invite user' dialog, using your recent DMs as a suggestion for who to chat
+with.
 
 ## Bridge info tab (`feature_bridge_state`)
 

electron_app/package.json

@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "src/electron-main.js",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "dependencies": {

electron_app/src/electron-main.js

@@ -63,7 +63,7 @@ if (argv["help"]) {
     console.log("  --hidden:             Start the application hidden in the system tray.");
     console.log("  --help:               Displays this help message.");
     console.log("And more such as --proxy, see:" +
-        "https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md");
+        "https://electronjs.org/docs/api/chrome-command-line-switches#supported-chrome-command-line-switches");
     app.exit();
 }
 

karma.conf.js

@@ -1,178 +0,0 @@
-// karma.conf.js - the config file for karma, which runs our tests.
-
-var path = require('path');
-var webpack = require('webpack');
-var webpack_config = require('./webpack.config');
-
-/*
- * We use webpack to build our tests. It's a pain to have to wait for webpack
- * to build everything; however it's the easiest way to load our dependencies
- * from node_modules.
- *
- * If you run karma in multi-run mode (with `yarn test-multi`), it will watch
- * the tests for changes, and webpack will rebuild using a cache. This is much quicker
- * than a clean rebuild.
- */
-
-// the name of the test file. By default, a special file which runs all tests.
-var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
-
-process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
-process.env.Q_DEBUG = 1;
-
-/* the webpack config is based on the real one, to (a) try to simulate the
- * deployed environment as closely as possible, and (b) to avoid a shedload of
- * cut-and-paste.
- */
-
-// find out if we're shipping olm, and where it is, if so.
-const olm_entry = webpack_config.entry['olm'];
-
-// remove the default entries - karma provides its own (via the 'files' and
-// 'preprocessors' config below)
-delete webpack_config['entry'];
-
-// make sure we're flagged as development to avoid wasting time optimising
-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')],
-});
-
-// disable parsing for sinon, because it
-// tries to do voodoo with 'require' which upsets
-// webpack (https://github.com/webpack/webpack/issues/304)
-webpack_config.module.noParse.push(/sinon\/pkg\/sinon\.js$/);
-
-// ?
-webpack_config.resolve.alias['sinon'] = 'sinon/pkg/sinon.js';
-
-webpack_config.resolve.modules = [
-    path.resolve('./test'),
-    "node_modules"
-];
-
-webpack_config.devtool = 'inline-source-map';
-
-module.exports = function (config) {
-    const myconfig = {
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            'node_modules/babel-polyfill/browser.js',
-            testFile,
-
-            // make the images available via our httpd. They will be avaliable
-            // below http://localhost:[PORT]/base/. See also `proxies` which
-            // defines alternative URLs for them.
-            //
-            // This isn't required by any of the tests, but it stops karma
-            // logging warnings when it serves a 404 for them.
-            {
-                pattern: 'node_modules/matrix-react-sdk/res/img/*',
-                watched: false, included: false, served: true, nocache: false,
-            },
-            {
-                pattern: 'res/**',
-                watched: false, included: false, served: true, nocache: false,
-            },
-        ],
-
-        proxies: {
-            // redirect img links to the karma server. See above.
-            "/img/": "/base/node_modules/matrix-react-sdk/res/img/",
-            "/themes/": "/base/res/themes/",
-            "/welcome.html": "/base/res/welcome.html",
-            "/welcome/": "/base/res/welcome/",
-        },
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors:
-        // https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            '{src,test}/**/*.js': ['webpack', 'sourcemap'],
-        },
-
-        // test results reporter to use
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['logcapture', 'spec', 'summary'],
-
-        specReporter: {
-            suppressErrorSummary: false, // do print error summary
-            suppressFailed: false, // do print information about failed tests
-            suppressPassed: false, // do print information about passed tests
-            showSpecTiming: true, // print the time elapsed for each spec
-        },
-
-        client: {
-            captureLogs: true,
-        },
-
-        // web server port
-        port: 9876,
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR ||
-        // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
-
-        // enable / disable watching file and executing tests whenever any file
-        // changes
-        autoWatch: true,
-
-        // start these browsers
-        // available browser launchers:
-        // https://npmjs.org/browse/keyword/karma-launcher
-        browsers: [
-            'Chrome',
-            //'PhantomJS',
-            //'ChromeHeadless'
-        ],
-
-        customLaunchers: {
-            'VectorChromeHeadless': {
-                base: 'Chrome',
-                flags: [
-                    '--no-sandbox',
-                    // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
-                    '--headless',
-                    '--disable-gpu',
-                    // Without a remote debugging port, Google Chrome exits immediately.
-                    '--remote-debugging-port=9222',
-                ],
-            }
-        },
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        // singleRun: false,
-
-        // Concurrency level
-        // how many browser should be started simultaneous
-        concurrency: Infinity,
-
-        webpack: webpack_config,
-
-        webpackMiddleware: {
-            stats: {
-                // don't fill the console up with a mahoosive list of modules
-                chunks: false,
-            },
-        },
-    };
-
-    // include the olm loader if we have it.
-    if (olm_entry) {
-        myconfig.files.unshift(olm_entry);
-    }
-
-    config.set(myconfig);
-};

package.json

@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron_app/src/electron-main.js",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "repository": {
@@ -11,69 +11,62 @@
   },
   "license": "Apache-2.0",
   "files": [
-    "AUTHORS.rst",
-    "CONTRIBUTING.rst",
-    "deploy",
-    "docs",
-    "karma.conf.js",
     "lib",
-    "release.sh",
-    "scripts",
+    "res",
     "src",
-    "test",
-    "webpack.config.js"
+    "webpack.config.js",
+    "scripts",
+    "docs",
+    "release.sh",
+    "deploy",
+    "CHANGELOG.md",
+    "CONTRIBUTING.rst",
+    "LICENSE",
+    "README.md",
+    "AUTHORS.rst",
+    "package.json"
   ],
   "style": "bundle.css",
-  "matrix-react-parent": "matrix-react-sdk",
   "scripts": {
-    "reskindex": "reskindex -h src/header",
-    "reskindex:watch": "reskindex -h src/header -w",
     "i18n": "matrix-gen-i18n",
     "prunei18n": "matrix-prune-i18n",
     "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
-    "postinstall": "node scripts/yarn-sub.js matrix-js-sdk install && node scripts/yarn-sub.js matrix-react-sdk install",
+    "reskindex": "reskindex -h src/header",
+    "reskindex:watch": "reskindex -h src/header -w",
+    "reskindex:watch-react": "node scripts/yarn-sub.js matrix-react-sdk reskindex:watch",
+    "clean": "rimraf lib webapp electron_app/dist",
+    "build": "yarn clean && yarn build:genfiles && yarn build:compile && yarn build:types && yarn build:bundle",
     "build:res": "node scripts/copy-res.js",
+    "build:genfiles": "yarn reskindex && yarn build:res",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:compile": "yarn reskindex && babel --source-maps -d lib src",
+    "build:compile": "babel -d lib --verbose --extensions \".ts,.js\" src",
     "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 && electron-builder -wml --ia32 --x64",
+    "build:electron": "yarn build && yarn install:electron && electron-builder -wml --ia32 --x64",
     "build:electron:linux": "yarn build && electron-builder -l --x64",
     "build:electron:macos": "yarn build && electron-builder -m --x64",
     "build:electron:windows": "yarn build && electron-builder -w --ia32 --x64",
-    "build:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk build",
-    "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",
-    "dist": "scripts/package.sh",
+    "build:types": "tsc --emitDeclarationOnly",
     "install:electron": "electron-builder install-app-deps",
-    "electron": "yarn install:electron && electron .",
+    "dist": "scripts/package.sh",
+    "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,riot-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js\"",
     "start:res": "node scripts/copy-res.js -w",
     "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development",
-    "start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress --mode production",
-    "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": "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/",
-    "lintall": "eslint src/ test/",
-    "clean": "rimraf lib webapp electron_app/dist",
-    "prepare": "yarn clean && yarn build:compile",
-    "test": "karma start --single-run=true --autoWatch=false --browsers VectorChromeHeadless",
-    "test-multi": "karma start"
+    "electron": "yarn build && yarn install:electron && electron .",
+    "lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",
+    "lint:js": "eslint src",
+    "lint:ts": "echo 'We don't actually have a typescript linter at this layer because tslint is being removed from our stack. Presumably your TS is fine.'",
+    "lint:types": "tsc --noEmit",
+    "lint:style": "stylelint 'res/css/**/*.scss'",
+    "test": "jest"
   },
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
-    "babel-runtime": "^6.26.0",
     "browser-request": "^0.3.3",
     "favico.js": "^0.3.10",
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
     "gfm.css": "^1.1.2",
     "highlight.js": "^9.13.1",
-    "matrix-js-sdk": "3.0.0",
-    "matrix-react-sdk": "1.7.6",
+    "matrix-js-sdk": "4.0.0",
+    "matrix-react-sdk": "2.0.0",
     "modernizr": "^3.6.0",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
     "postcss-easings": "^2.0.0",
@@ -85,27 +78,34 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
-    "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-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-builtin-extend": "^1.1.2",
-    "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",
+    "@babel/cli": "^7.7.5",
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-decorators": "^7.7.4",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
+    "@babel/plugin-proposal-numeric-separator": "^7.7.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "@babel/plugin-transform-flow-comments": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.7.6",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-flow": "^7.7.4",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
+    "@babel/register": "^7.7.4",
+    "@babel/runtime": "^7.7.6",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4",
+    "autoprefixer": "^9.7.3",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "canvas": "^2.6.1",
+    "chokidar": "^3.3.1",
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",
-    "cross-env": "^4.0.0",
-    "css-loader": "^2.1.0",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.3.2",
     "electron-builder": "^21.2.0",
     "electron-builder-squirrel-windows": "^21.2.0",
     "electron-devtools-installer": "^2.2.4",
@@ -117,45 +117,42 @@
     "eslint-plugin-jest": "^23.0.4",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-hooks": "^2.2.0",
-    "expect": "^1.16.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^3.0.1",
+    "fake-indexeddb": "^3.0.0",
+    "file-loader": "^5.0.2",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^24.9.0",
+    "jest-environment-jsdom-fourteen": "^1.0.1",
     "json-loader": "^0.5.3",
-    "karma": "^3.1.2",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-cli": "^1.0.1",
-    "karma-logcapture-reporter": "0.0.1",
-    "karma-mocha": "^1.3.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.31",
-    "karma-summary-reporter": "^1.5.1",
-    "karma-webpack": "4.0.0-beta.0",
     "loader-utils": "^1.2.3",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
+    "mini-css-extract-plugin": "^0.8.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
-    "mocha": "^5.2.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-extend": "^1.0.5",
-    "postcss-import": "^11.1.0",
-    "postcss-loader": "^2.1.6",
-    "postcss-mixins": "^6.2.0",
-    "postcss-nested": "^3.0.0",
-    "postcss-scss": "^1.0.6",
-    "postcss-simple-vars": "^4.1.0",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-mixins": "^6.2.3",
+    "postcss-nested": "^4.2.1",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-scss": "^2.0.0",
+    "postcss-simple-vars": "^5.0.2",
     "postcss-strip-inline-comments": "^0.1.5",
     "rimraf": "^2.4.3",
     "shell-escape": "^0.2.0",
-    "source-map-loader": "^0.2.4",
-    "webpack": "^4.23.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.11"
+    "stylelint": "^12.0.1",
+    "terser-webpack-plugin": "^2.3.0",
+    "typescript": "^3.7.3",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   },
   "build": {
     "appId": "im.riot.app",
-    "electronVersion": "7.1.7",
+    "electronVersion": "7.1.9",
     "files": [
       "node_modules/**",
       "src/**"
@@ -194,5 +191,25 @@
       "app": "electron_app"
     },
     "afterSign": "scripts/electron_afterSign.js"
+  },
+  "jest": {
+    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "testMatch": [
+      "<rootDir>/test/**/*-test.js"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
+    ],
+    "moduleNameMapper": {
+      "\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
+      "\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",
+      "^browser-request$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/browser-request.js",
+      "^react$": "<rootDir>/node_modules/react",
+      "^react-dom$": "<rootDir>/node_modules/react-dom"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!matrix-js-sdk).+$",
+      "/node_modules/(?!matrix-react-sdk).+$"
+    ]
   }
 }

postcss.config.js

@@ -1,14 +0,0 @@
-module.exports = {
-    plugins: [
-        require("postcss-import")(),
-        require("autoprefixer")(),
-        require("postcss-simple-vars")(),
-        require("postcss-extend")(),
-        require("postcss-nested")(),
-        require("postcss-mixins")(),
-        require("postcss-easings")(),
-        require("postcss-strip-inline-comments")(),
-    ],
-    "parser": "postcss-scss",
-    "local-plugins": true,
-};

res/sw.js

@@ -0,0 +1 @@
+self.addEventListener('fetch',() => {});

riot.im/develop/config.json

@@ -21,7 +21,7 @@
         "feature_mjolnir": "labs",
         "feature_dm_verification": "labs",
         "feature_cross_signing": "labs",
-        "feature_event_indexing": "labs",
+        "feature_event_indexing": "disable",
         "feature_ftue_dms": "labs",
         "feature_bridge_state": "labs",
         "feature_presence_in_room_list": "labs"

scripts/ci_package.sh

@@ -14,4 +14,4 @@ JSSDK_SHA=$(cd node_modules/matrix-js-sdk; git rev-parse --short=12 HEAD)
 
 VECTOR_SHA=$(git rev-parse --short=12 HEAD) # use the ACTUAL SHA rather than assume develop
 
-DIST_VERSION=$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA scripts/package.sh -d
+CI_PACKAGE=true DIST_VERSION=$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA scripts/package.sh -d

scripts/copy-res.js

@@ -58,6 +58,7 @@ const INCLUDE_LANGS = [
 // "dest/b/...".
 const COPY_LIST = [
     ["res/manifest.json", "webapp"],
+    ["res/sw.js", "webapp"],
     ["res/welcome.html", "webapp"],
     ["res/welcome/**", "webapp/welcome"],
     ["res/themes/**", "webapp/themes"],

scripts/fetch-develop.deps.sh

@@ -78,6 +78,7 @@ dodep matrix-org matrix-js-sdk
 pushd matrix-js-sdk
 yarn link
 yarn install
+yarn build
 popd
 
 yarn link matrix-js-sdk
@@ -95,6 +96,7 @@ pushd matrix-react-sdk
 yarn link
 yarn link matrix-js-sdk
 yarn install
+yarn build
 popd
 
 yarn link matrix-react-sdk

scripts/package.sh

@@ -2,11 +2,6 @@
 
 set -e
 
-dev=""
-if [ "$1" = '-d' ]; then
-    dev=":dev"
-fi
-
 if [ -n "$DIST_VERSION" ]; then
     version=$DIST_VERSION
 else
@@ -14,7 +9,7 @@ else
 fi
 
 yarn clean
-yarn build$dev
+yarn build
 
 # include the sample config in the tarball. Arguably this should be done by
 # `yarn build`, but it's just too painful.

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

@@ -16,14 +16,13 @@ limitations under the License.
 */
 
 import React from 'react';
-import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
+import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
 
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
-
-module.exports = () => {
+const VectorAuthFooter = () => {
     const brandingConfig = SdkConfig.get().branding;
     let links = [
-        {"text": "blog", "url": "https://medium.com/@RiotChat"},
+        {"text": "blog", "url": "https://blog.riot.im"},
         {"text": "twitter", "url": "https://twitter.com/@RiotChat"},
         {"text": "github", "url": "https://github.com/vector-im/riot-web"},
     ];
@@ -48,4 +47,7 @@ module.exports = () => {
         </div>
     );
 };
-module.exports.replaces = 'AuthFooter';
+
+VectorAuthFooter.replaces = 'AuthFooter';
+
+export default 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 * as 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

@@ -16,13 +16,13 @@ limitations under the License.
 */
 
 import React from "react";
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import { _t } from 'matrix-react-sdk/src/languageHandler';
 
 /**
  * This is identical to `CustomServerDialog` except for replacing "this app"
  * with "Riot".
  */
-module.exports = ({onFinished}) => {
+const VectorCustomServerDialog = ({onFinished}) => {
     return (
         <div className="mx_ErrorDialog">
             <div className="mx_Dialog_title">
@@ -44,4 +44,7 @@ module.exports = ({onFinished}) => {
         </div>
     );
 };
-module.exports.replaces = 'CustomServerDialog';
+
+VectorCustomServerDialog.replaces = 'CustomServerDialog';
+
+export default VectorCustomServerDialog;

src/i18n/strings/lt.json

@@ -12,7 +12,7 @@
     "Sign In": "Prisijungti",
     "Create Account": "Sukurti paskyrą",
     "Need help?": "Reikia pagalbos?",
-    "Explore rooms": "Peržiūrėti kambarius",
+    "Explore rooms": "Žvalgyti kambarius",
     "Room Directory": "Kambarių katalogas",
     "Your Riot configuration contains invalid JSON. Please correct the problem and reload the page.": "Jūsų Riot konfigūracijoje yra klaidingas JSON. Prašome pataisyti problemą ir iš naujo užkrauti puslapį.",
     "The message from the parser is: %(message)s": "Analizatoriaus žinutė yra: %(message)s",

src/i18n/strings/tr.json

@@ -8,9 +8,9 @@
     "You need to be using HTTPS to place a screen-sharing call.": "Ekran paylaşımlı arama yapmak için HTTPS kullanıyor olmalısınız.",
     "Welcome to Riot.im": "Riot.im'e hoş geldiniz",
     "Decentralised, encrypted chat & collaboration powered by [matrix]": "Merkezsiz, şifreli sohbet & işbirliği ile Matrix tarafından desteklenmektedir",
-    "Chat with Riot Bot": "Riot Bot ile sohbet et",
+    "Chat with Riot Bot": "Riot Bot ile Sohbet Et",
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.": "Özel sunucu seçenekleri kullanıp farklı bir anamakine URL'si belirleyerek diğer Matrix sunucularına giriş yapabilirsin. Bu Riot'u varolan bir Matrix hesabı ile farklı anamakine de kullanmanı sağlar.",
-    "Sign In": "Giriş yap",
+    "Sign In": "Giriş Yap",
     "Create Account": "Kayıt Ol",
     "Need help?": "Yardıma mı ihtiyacın var?",
     "Explore rooms": "Odaları keşfet",

src/vector/index.html

@@ -41,6 +41,11 @@
         window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
     </script>
     <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('sw.js');
+      }
+    </script>
     <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <img src="<%= require('matrix-react-sdk/res/img/e2e/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <img src="<%= require('matrix-react-sdk/res/img/feather-customised/warning-triangle.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>

src/vector/index.js

@@ -35,15 +35,15 @@ global.React = React;
 
 import './modernizr';
 import ReactDOM from 'react-dom';
-import sdk from 'matrix-react-sdk';
-import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import * as sdk from 'matrix-react-sdk';
+import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 sdk.loadSkin(require('../component-index'));
-import VectorConferenceHandler from 'matrix-react-sdk/lib/VectorConferenceHandler';
-import * as languageHandler from 'matrix-react-sdk/lib/languageHandler';
-import {_t, _td, newTranslatableError} from 'matrix-react-sdk/lib/languageHandler';
-import AutoDiscoveryUtils from 'matrix-react-sdk/lib/utils/AutoDiscoveryUtils';
-import {AutoDiscovery} from "matrix-js-sdk/lib/autodiscovery";
-import * as Lifecycle from "matrix-react-sdk/lib/Lifecycle";
+import * as VectorConferenceHandler from 'matrix-react-sdk/src/VectorConferenceHandler';
+import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
+import {_t, _td, newTranslatableError} from 'matrix-react-sdk/src/languageHandler';
+import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils';
+import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
+import * as Lifecycle from "matrix-react-sdk/src/Lifecycle";
 
 import url from 'url';
 
@@ -52,14 +52,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 SdkConfig from "matrix-react-sdk/lib/SdkConfig";
-import {setTheme} from "matrix-react-sdk/lib/theme";
+import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
+import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
+import SdkConfig from "matrix-react-sdk/src/SdkConfig";
+import {setTheme} from "matrix-react-sdk/src/theme";
 
 import Olm from 'olm';
 
-import CallHandler from 'matrix-react-sdk/lib/CallHandler';
+import CallHandler from 'matrix-react-sdk/src/CallHandler';
 
 let lastLocationHashSet = null;
 

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

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

src/vector/platform/VectorBasePlatform.js

@@ -19,9 +19,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 {getVectorConfig} from "../getconfig";
 
 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 url from 'url';
 import UAParser from 'ua-parser-js';

src/vector/rageshakesetup.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,8 +26,9 @@ 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 * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
+import SdkConfig from "matrix-react-sdk/src/SdkConfig";
+import sendBugReport from "matrix-react-sdk/src/rageshake/submit-rageshake";
 
 function initRageshake() {
     rageshake.init().then(() => {
@@ -54,15 +56,13 @@ global.mxSendRageshake = function(text, withLogs) {
         console.error("Cannot send a rageshake without a message - please tell us what went wrong");
         return;
     }
-    require(['matrix-react-sdk/lib/rageshake/submit-rageshake'], (s) => {
-        s(SdkConfig.get().bug_report_endpoint_url, {
-            userText: text,
-            sendLogs: withLogs,
-            progressCallback: console.log.bind(console),
-        }).then(() => {
-            console.log("Bug report sent!");
-        }, (err) => {
-            console.error(err);
-        });
+    sendBugReport(SdkConfig.get().bug_report_endpoint_url, {
+        userText: text,
+        sendLogs: withLogs,
+        progressCallback: console.log.bind(console),
+    }).then(() => {
+        console.log("Bug report sent!");
+    }, (err) => {
+        console.error(err);
     });
 };

src/vector/url_utils.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import qs from 'querystring';
+import * as qs from 'querystring';
 
 // We want to support some name / value pairs in the fragment
 // so we're re-using query string like format

test/all-tests.js

@@ -1,13 +0,0 @@
-// all-tests.js
-//
-// Our master test file: uses the webpack require API to find our test files
-// and run them
-
-// ideally these unit tests could be run under nodejs rather than in a browser
-// via karma, but having two separate test frameworks in the same project
-// seems confusing
-const unit_tests = require.context('./unit-tests', true, /\.js$/);
-unit_tests.keys().forEach(unit_tests);
-
-const app_tests = require.context('./app-tests', true, /\.jsx?$/);
-app_tests.keys().forEach(app_tests);

test/app-tests/joining-test.js

@@ -16,30 +16,28 @@ 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';
+import * as sdk from "matrix-react-sdk";
+import * as jssdk from "matrix-js-sdk";
+import "../skin-sdk";
+import "../jest-mocks";
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactTestUtils from "react-dom/test-utils";
+import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
+import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
+import {sleep} from "../test-utils";
+import * as test_utils from "../test-utils";
+import MockHttpBackend from "matrix-mock-request";
+import "fake-indexeddb/auto";
 
-require('skin-sdk');
 
-const jssdk = require('matrix-js-sdk');
-
-const sdk = require('matrix-react-sdk');
 const MatrixChat = sdk.getComponent('structures.MatrixChat');
 const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
 const RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
 const RoomView = sdk.getComponent('structures.RoomView');
 
-const React = require('react');
-const ReactDOM = require('react-dom');
-const ReactTestUtils = require('react-dom/test-utils');
-const expect = require('expect');
-import {makeType} from "matrix-react-sdk/lib/utils/TypeUtils";
-import {ValidatedServerConfig} from "matrix-react-sdk/lib/utils/AutoDiscoveryUtils";
-import {sleep} from "../test-utils";
-
-const test_utils = require('../test-utils');
-const MockHttpBackend = require('matrix-mock-request');
-
 const HS_URL='http://localhost';
 const IS_URL='http://localhost';
 const USER_ID='@me:localhost';

test/app-tests/loading-test.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2020 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,46 +17,32 @@ 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';
-
+import '../skin-sdk';
+import "../jest-mocks";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
-import expect from 'expect';
 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 * as jssdk from 'matrix-js-sdk';
+import * as sdk from 'matrix-react-sdk';
+import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
+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';
 import {parseQs, parseQsFromFragment} from '../../src/vector/url_utils';
-import {makeType} from "matrix-react-sdk/lib/utils/TypeUtils";
-import {ValidatedServerConfig} from "matrix-react-sdk/lib/utils/AutoDiscoveryUtils";
+import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
+import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
 import {sleep} from "../test-utils";
+import "fake-indexeddb/auto";
+import {cleanLocalstorage} from "../test-utils";
+import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 
 const DEFAULT_HS_URL='http://my_server';
 const DEFAULT_IS_URL='http://my_is';
 
-expect.extend({
-    toStartWith(prefix) {
-        expect.assert(
-            this.actual.startsWith(prefix),
-            'expected %s to start with %s',
-            this.actual, prefix,
-        );
-        return this;
-    }
-});
-
 describe('loading:', function() {
     let parentDiv;
     let httpBackend;
@@ -70,7 +57,6 @@ describe('loading:', function() {
     let tokenLoginCompletePromise;
 
     beforeEach(function() {
-        test_utils.beforeEach(this);
         httpBackend = new MockHttpBackend();
         jssdk.request(httpBackend.requestFn);
         parentDiv = document.createElement('div');
@@ -81,10 +67,6 @@ describe('loading:', function() {
 
         windowLocation = null;
         matrixChat = null;
-
-        languageHandler.setMissingEntryGenerator(function(key) {
-            return key.split('|', 2)[1];
-        });
     });
 
     afterEach(async function() {
@@ -98,14 +80,12 @@ describe('loading:', function() {
         // unmounting should have cleared the MatrixClientPeg
         expect(MatrixClientPeg.get()).toBe(null);
 
-        // chrome seems to take *ages* to delete the indexeddbs.
-        this.timeout(10000);
-
         // clear the indexeddbs so we can start from a clean slate next time.
         await Promise.all([
             test_utils.deleteIndexedDB('matrix-js-sdk:crypto'),
             test_utils.deleteIndexedDB('matrix-js-sdk:riot-web-sync'),
         ]);
+        cleanLocalstorage();
         console.log(`${Date.now()}: loading: afterEach complete`);
     });
 
@@ -323,7 +303,7 @@ describe('loading:', function() {
             localStorage.setItem("mx_last_room_id", "!last_room:id");
 
             // Create a crypto store as well to satisfy storage consistency checks
-            const cryptoStore = new jssdk.IndexedDBCryptoStore(
+            const cryptoStore = new IndexedDBCryptoStore(
                 indexedDB,
                 "matrix-js-sdk:crypto",
             );
@@ -481,7 +461,7 @@ describe('loading:', function() {
                 assertAtLoadingSpinner(matrixChat);
 
                 httpBackend.when('POST', '/register').check(function(req) {
-                    expect(req.path).toStartWith(DEFAULT_HS_URL);
+                    expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
                     expect(req.queryParams.kind).toEqual('guest');
                 }).respond(200, {
                     user_id: "@guest:localhost",
@@ -494,7 +474,7 @@ describe('loading:', function() {
             }).then(() => {
                 return expectAndAwaitSync({isGuest: true});
             }).then((req) => {
-                expect(req.path).toStartWith(DEFAULT_HS_URL);
+                expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
 
                 // once the sync completes, we should have a welcome page
                 httpBackend.verifyNoOutstandingExpectation();
@@ -682,10 +662,6 @@ describe('loading:', function() {
             // Wait for another trip around the event loop for the UI to update
             return sleep(1);
         }).then(() => {
-            // we expect a spinner
-            ReactTestUtils.findRenderedComponentWithType(
-                matrixChat, sdk.getComponent('elements.Spinner'));
-
             httpBackend.when('GET', '/pushrules').respond(200, {});
             httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
             return expectAndAwaitSync().catch((e) => {

test/jest-mocks.js

@@ -0,0 +1,14 @@
+// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});

test/skin-sdk.js

@@ -4,5 +4,6 @@
  * Skins the react-sdk with the vector components
  */
 
-const sdk = require('matrix-react-sdk');
-sdk.loadSkin(require('../src/component-index'));
+import * as sdk from "matrix-react-sdk";
+import * as skin from "../src/component-index";
+sdk.loadSkin(skin);

test/test-utils.js

@@ -1,30 +1,7 @@
-"use strict";
-
-/**
- * Perform common actions before each test case, e.g. printing the test case
- * name to stdout.
- * @param {Mocha.Context} context  The test context
- */
-export function beforeEach(context) {
-    const desc = context.currentTest.fullTitle();
-    console.log();
-    console.log(desc);
-    console.log(new Array(1 + desc.length).join("="));
-
-    // some tests store things in localstorage. Improve independence of tests
-    // by making sure that they don't inherit any old state.
+export function cleanLocalstorage() {
     window.localStorage.clear();
 }
 
-/**
- * returns true if the current environment supports webrtc
- */
-export function browserSupportsWebRTC() {
-    const n = global.window.navigator;
-    return n.getUserMedia || n.webkitGetUserMedia ||
-        n.mozGetUserMedia;
-}
-
 export function deleteIndexedDB(dbName) {
     return new Promise((resolve, reject) => {
         if (!window.indexedDB) {

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es2016",
+    "noImplicitAny": false,
+    "sourceMap": false,
+    "outDir": "./lib",
+    "declaration": true,
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "./src/**/*.ts"
+  ]
+}

webpack.config.js

@@ -1,213 +1,354 @@
 const path = require('path');
-const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const webpack = require("webpack");
 
 let og_image_url = process.env.RIOT_OG_IMAGE_URL;
 if (!og_image_url) og_image_url = 'https://riot.im/app/themes/riot/img/logos/riot-im-logo-black-text.png';
 
-module.exports = {
-    entry: {
-        // Load babel-polyfill first to avoid issues where some imports (namely react)
-        // are potentially loaded before babel-polyfill.
-        "bundle": ["babel-polyfill", "./src/vector/index.js"],
-        "indexeddb-worker": "./src/vector/indexeddb-worker.js",
+module.exports = (env, argv) => {
+    if (process.env.CI_PACKAGE) {
+        // Don't run minification for CI builds (this is only set for runs on develop)
+        argv.mode = "development";
+    }
 
-        "mobileguide": "./src/vector/mobile_guide/index.js",
+    const development = {};
+    if (argv.mode !== "production") {
+        // This makes the sourcemaps human readable for developers. We use eval-source-map
+        // because the plain source-map devtool ruins the alignment.
+        development['devtool'] = 'eval-source-map';
+    }
 
-        // CSS themes
-        "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
-        "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
-        "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
-        "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
-    },
-    module: {
-        rules: [
-            { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
-            { test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
-            {
-                test: /\.wasm$/,
-                loader: "file-loader",
-                type: "javascript/auto", // https://github.com/webpack/webpack/issues/6725
-                options: {
-                    name: '[name].[hash:7].[ext]',
-                    outputPath: '.',
+    // Resolve the directories for the react-sdk and js-sdk for later use. We resolve these early so we
+    // don't have to call them over and over. We also resolve to the package.json instead of the src
+    // directory so we don't have to rely on a index.js or similar file existing.
+    const reactSdkSrcDir = path.resolve(require.resolve("matrix-react-sdk/package.json"), '..', 'src');
+    const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), '..', 'src');
+
+    return {
+        ...development,
+
+        entry: {
+            "bundle": "./src/vector/index.js",
+            "indexeddb-worker": "./src/vector/indexeddb-worker.js",
+            "mobileguide": "./src/vector/mobile_guide/index.js",
+
+            // CSS themes
+            "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
+            "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
+            "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
+            "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
+        },
+
+        optimization: {
+            // Put all of our CSS into one useful place - this is needed for MiniCssExtractPlugin.
+            // Previously we used a different extraction plugin that did this magic for us, but
+            // now we need to consider that the CSS needs to be bundled up together.
+            splitChunks: {
+                cacheGroups: {
+                    styles: {
+                        name: 'styles',
+                        test: /\.css$/,
+                        enforce: true,
+                        // Do not add `chunks: 'all'` here because you'll break the app entry point.
+                    },
                 },
             },
-            {
-                test: /\.scss$/,
-                // 1. postcss-loader turns the SCSS into normal CSS.
-                // 2. css-loader turns the CSS into a JS module whose default
-                //    export is a string containing the CSS, while also adding
-                //    the images and fonts from CSS as Webpack inputs.
-                // 3. ExtractTextPlugin turns that string into a separate asset.
-                use: ExtractTextPlugin.extract({
+
+            // This fixes duplicate files showing up in chrome with sourcemaps enabled.
+            // See https://github.com/webpack/webpack/issues/7128 for more info.
+            namedModules: false,
+
+            // Minification is normally enabled by default for webpack in production mode, but
+            // we use a CSS optimizer too and need to manage it ourselves.
+            minimize: argv.mode === 'production',
+            minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [],
+        },
+
+        resolve: {
+            // We define an alternative import path so we can safely use src/ across the react-sdk
+            // and js-sdk. We already import from src/ where possible to ensure our source maps are
+            // extremely accurate (and because we're capable of compiling the layers manually rather
+            // than relying on partially-mangled output from babel), though we do need to fix the
+            // package level import (stuff like `import {Thing} from "matrix-js-sdk"` for example).
+            // We can't use the aliasing down below to point at src/ because that'll fail to resolve
+            // the package.json for the dependency. Instead, we rely on the package.json of each
+            // layer to have our custom alternate fields to load things in the right order. These are
+            // the defaults of webpack prepended with `matrix_src_`.
+            mainFields: ['matrix_src_browser', 'matrix_src_main', 'browser', 'main'],
+            aliasFields: ['matrix_src_browser', 'browser'],
+
+            // We need to specify that TS can be resolved without an extension
+            extensions: ['.js', '.json', '.ts'],
+            alias: {
+                // alias any requires to the react module to the one in our path,
+                // otherwise we tend to get the react source included twice when
+                // using `npm link` / `yarn link`.
+                "react": path.resolve(__dirname, 'node_modules/react'),
+                "react-dom": path.resolve(__dirname, 'node_modules/react-dom'),
+
+                // same goes for js-sdk - we don't need two copies.
+                "matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'),
+
+                // Define a variable so the i18n stuff can load
+                "$webapp": path.resolve(__dirname, 'webapp'),
+            },
+        },
+
+        module: {
+            noParse: [
+                // for cross platform compatibility use [\\\/] as the path separator
+                // this ensures that the regex trips on both Windows and *nix
+
+                // don't parse the languages within highlight.js. They cause stack
+                // overflows (https://github.com/webpack/webpack/issues/1721), and
+                // there is no need for webpack to parse them - they can just be
+                // included as-is.
+                /highlight\.js[\\\/]lib[\\\/]languages/,
+
+                // olm takes ages for webpack to process, and it's already heavily
+                // optimised, so there is little to gain by us uglifying it.
+                /olm[\\\/](javascript[\\\/])?olm\.js$/,
+            ],
+            rules: [
+                {
+                    test: /\.(ts|js)x?$/,
+                    include: (f) => {
+                        // our own source needs babel-ing
+                        if (f.startsWith(path.resolve(__dirname, 'src'))) return true;
+
+                        // we use the original source files of react-sdk and js-sdk, so we need to
+                        // run them through babel. Because the path tested is the resolved, absolute
+                        // path, these could be anywhere thanks to yarn link. We must also not
+                        // include node modules inside these modules, so we add 'src'.
+                        if (f.startsWith(reactSdkSrcDir)) return true;
+                        if (f.startsWith(jsSdkSrcDir)) return true;
+
+                        // but we can't run all of our dependencies through babel (many of them still
+                        // use module.exports which breaks if babel injects an 'include' for its
+                        // polyfills: probably fixable but babeling all our dependencies is probably
+                        // not necessary anyway). So, for anything else, don't babel.
+                        return false;
+                    },
+                    loader: 'babel-loader',
+                    options: {
+                        cacheDirectory: true
+                    }
+                },
+                {
+                    test: /\.css$/,
                     use: [
-                        "css-loader",
+                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: true,
+                            }
+                        },
                         {
                             loader: 'postcss-loader',
+                            ident: 'postcss',
                             options: {
-                                config: {
-                                    path: './postcss.config.js',
+                                sourceMap: true,
+                                plugins: () => [
+                                    // Note that we use significantly fewer plugins on the plain
+                                    // CSS parser. If we start to parse plain CSS, we end with all
+                                    // kinds of nasty problems (like stylesheets not loading).
+                                    //
+                                    // You might have noticed that we're also sending regular CSS
+                                    // through PostCSS. This looks weird, and in fact is probably
+                                    // not what you'd expect, however in order for our CSS build
+                                    // to work nicely we have to do this. Because down the line
+                                    // our SCSS stylesheets reference plain CSS we have to load
+                                    // the plain CSS through PostCSS so it can find it safely. This
+                                    // also acts like a babel-for-css by transpiling our (S)CSS
+                                    // down/up to the right browser support (prefixes, etc).
+                                    // Further, if we don't do this then PostCSS assumes that our
+                                    // plain CSS is SCSS and it really doesn't like that, even
+                                    // though plain CSS should be compatible. The chunking options
+                                    // at the top of this webpack config help group the SCSS and
+                                    // plain CSS together for the bundler.
+
+                                    require("postcss-simple-vars")(),
+                                    require("postcss-strip-inline-comments")(),
+
+                                    // It's important that this plugin is last otherwise we end
+                                    // up with broken CSS.
+                                    require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}),
+                                ],
+                                parser: "postcss-scss",
+                                "local-plugins": true,
+                            },
+                        },
+                    ]
+                },
+                {
+                    test: /\.scss$/,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: true,
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            ident: 'postcss',
+                            options: {
+                                sourceMap: true,
+                                plugins: () => [
+                                    // Note that we use slightly different plugins for SCSS.
+
+                                    require('postcss-import')(),
+                                    require("postcss-simple-vars")(),
+                                    require("postcss-extend")(),
+                                    require("postcss-nested")(),
+                                    require("postcss-mixins")(),
+                                    require("postcss-easings")(),
+                                    require("postcss-strip-inline-comments")(),
+
+                                    // It's important that this plugin is last otherwise we end
+                                    // up with broken CSS.
+                                    require('postcss-preset-env')({stage: 3, browsers: 'last 2 versions'}),
+                                ],
+                                parser: "postcss-scss",
+                                "local-plugins": true,
+                            },
+                        },
+                    ]
+                },
+                {
+                    test: /\.wasm$/,
+                    loader: "file-loader",
+                    type: "javascript/auto", // https://github.com/webpack/webpack/issues/6725
+                    options: {
+                        name: '[name].[hash:7].[ext]',
+                        outputPath: '.',
+                    },
+                },
+                {
+                    // cache-bust languages.json file placed in
+                    // riot-web/webapp/i18n during build by copy-res.js
+                    test: /\.*languages.json$/,
+                    type: "javascript/auto",
+                    loader: 'file-loader',
+                    options: {
+                        name: 'i18n/[name].[hash:7].[ext]',
+                    },
+                },
+                {
+                    test: /\.(gif|png|svg|ttf|woff|woff2|xml|ico)$/,
+                    // Use a content-based hash in the name so that we can set a long cache
+                    // lifetime for assets while still delivering changes quickly.
+                    oneOf: [
+                        {
+                            // Assets referenced in CSS files
+                            issuer: /\.(scss|css)$/,
+                            loader: 'file-loader',
+                            options: {
+                                esModule: false,
+                                name: '[name].[hash:7].[ext]',
+                                outputPath: getImgOutputPath,
+                                publicPath: function(url, resourcePath) {
+                                    // CSS image usages end up in the `bundles/[hash]` output
+                                    // directory, so we adjust the final path to navigate up
+                                    // twice.
+                                    const outputPath = getImgOutputPath(url, resourcePath);
+                                    return toPublicPath(path.join("../..", outputPath));
+                                },
+                            },
+                        },
+                        {
+                            // Assets referenced in HTML and JS files
+                            loader: 'file-loader',
+                            options: {
+                                esModule: false,
+                                name: '[name].[hash:7].[ext]',
+                                outputPath: getImgOutputPath,
+                                publicPath: function(url, resourcePath) {
+                                    const outputPath = getImgOutputPath(url, resourcePath);
+                                    return toPublicPath(outputPath);
                                 },
                             },
                         },
                     ],
-                }),
-            },
-            {
-                // this works similarly to the scss case, without postcss.
-                test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: "css-loader",
-                }),
-            },
-            {
-                // cache-bust languages.json file placed in
-                // riot-web/webapp/i18n during build by copy-res.js
-                test: /\.*languages.json$/,
-                type: "javascript/auto",
-                loader: 'file-loader',
-                options: {
-                    name: 'i18n/[name].[hash:7].[ext]',
                 },
-            },
-            {
-                test: /\.(gif|png|svg|ttf|woff|woff2|xml|ico)$/,
-                // Use a content-based hash in the name so that we can set a long cache
-                // lifetime for assets while still delivering changes quickly.
-                oneOf: [
-                    {
-                        // Assets referenced in CSS files
-                        issuer: /\.(scss|css)$/,
-                        loader: 'file-loader',
-                        options: {
-                            name: '[name].[hash:7].[ext]',
-                            outputPath: getImgOutputPath,
-                            publicPath: function(url, resourcePath) {
-                                // CSS image usages end up in the `bundles/[hash]` output
-                                // directory, so we adjust the final path to navigate up
-                                // twice.
-                                const outputPath = getImgOutputPath(url, resourcePath);
-                                return toPublicPath(path.join("../..", outputPath));
-                            },
-                        },
-                    },
-                    {
-                        // Assets referenced in HTML and JS files
-                        loader: 'file-loader',
-                        options: {
-                            name: '[name].[hash:7].[ext]',
-                            outputPath: getImgOutputPath,
-                            publicPath: function(url, resourcePath) {
-                                const outputPath = getImgOutputPath(url, resourcePath);
-                                return toPublicPath(outputPath);
-                            },
-                        },
-                    },
-                ],
-            },
+            ]
+        },
+
+        plugins: [
+            new webpack.DefinePlugin({
+                'process.env': {
+                    NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+                },
+            }),
+
+            // This exports our CSS using the splitChunks and loaders above.
+            new MiniCssExtractPlugin({
+                filename: 'bundles/[hash]/[name].css',
+                ignoreOrder: false, // Enable to remove warnings about conflicting order
+            }),
+
+            // This is the app's main entry point.
+            new HtmlWebpackPlugin({
+                template: './src/vector/index.html',
+
+                // we inject the links ourselves via the template, because
+                // HtmlWebpackPlugin will screw up our formatting like the names
+                // of the themes and which chunks we actually care about.
+                inject: false,
+                excludeChunks: ['mobileguide'],
+                minify: argv.mode === 'production',
+                vars: {
+                    og_image_url: og_image_url,
+                },
+            }),
+
+            // This is the mobile guide's entry point (separate for faster mobile loading)
+            new HtmlWebpackPlugin({
+                template: './src/vector/mobile_guide/index.html',
+                filename: 'mobile_guide/index.html',
+                minify: argv.mode === 'production',
+                chunks: ['mobileguide'],
+            }),
         ],
-        noParse: [
-            // for cross platform compatibility use [\\\/] as the path separator
-            // this ensures that the regex trips on both Windows and *nix
 
-            // don't parse the languages within highlight.js. They cause stack
-            // overflows (https://github.com/webpack/webpack/issues/1721), and
-            // there is no need for webpack to parse them - they can just be
-            // included as-is.
-            /highlight\.js[\\\/]lib[\\\/]languages/,
+        output: {
+            path: path.join(__dirname, "webapp"),
 
-            // olm takes ages for webpack to process, and it's already heavily
-            // optimised, so there is little to gain by us uglifying it.
-            /olm[\\\/](javascript[\\\/])?olm\.js$/,
-        ],
-    },
-    output: {
-        path: path.join(__dirname, "webapp"),
-
-        // The generated JS (and CSS, from the ExtractTextPlugin) are put in a
-        // unique subdirectory for the build. There will only be one such
-        // 'bundle' directory in the generated tarball; however, hosting
-        // servers can collect 'bundles' from multiple versions into one
-        // directory and symlink it into place - this allows users who loaded
-        // an older version of the application to continue to access webpack
-        // chunks even after the app is redeployed.
-        filename: "bundles/[hash]/[name].js",
-        chunkFilename: "bundles/[hash]/[name].js",
-        devtoolModuleFilenameTemplate: function(info) {
-            // Reading input source maps gives only relative paths here for
-            // everything. Until I figure out how to fix this, this is a
-            // workaround.
-            // We use the relative resource path with any '../'s on the front
-            // removed which gives a tree with matrix-react-sdk and vector
-            // trees smashed together, but this fixes everything being under
-            // various levels of '.' and '..'
-            // Also, sometimes the resource path is absolute.
-            return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
+            // The generated JS (and CSS, from the extraction plugin) are put in a
+            // unique subdirectory for the build. There will only be one such
+            // 'bundle' directory in the generated tarball; however, hosting
+            // servers can collect 'bundles' from multiple versions into one
+            // directory and symlink it into place - this allows users who loaded
+            // an older version of the application to continue to access webpack
+            // chunks even after the app is redeployed.
+            filename: "bundles/[hash]/[name].js",
+            chunkFilename: "bundles/[hash]/[name].js",
         },
-    },
-    resolve: {
-        alias: {
-            // alias any requires to the react module to the one in our path,
-            // otherwise we tend to get the react source included twice when
-            // using `npm link` / `yarn link`.
-            "react": path.resolve('./node_modules/react'),
-            "react-dom": path.resolve('./node_modules/react-dom'),
 
-            // same goes for js-sdk
-            "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
+        // configuration for the webpack-dev-server
+        devServer: {
+            // serve unwebpacked assets from webapp.
+            contentBase: './webapp',
 
-            "$webapp": path.resolve('./webapp'),
-        },
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+            stats: {
+                // don't fill the console up with a mahoosive list of modules
+                chunks: false,
             },
-        }),
-        new ExtractTextPlugin("bundles/[hash]/[name].css", {
-            allChunks: true,
-        }),
 
-        new HtmlWebpackPlugin({
-            template: './src/vector/index.html',
-
-            // we inject the links ourselves via the template, because
-            // HtmlWebpackPlugin wants to put the script tags either at the
-            // bottom of <head> or the bottom of <body>, and I'm a bit scared
-            // about moving them.
-            inject: false,
-            excludeChunks: ['mobileguide'],
-            vars: {
-                og_image_url: og_image_url,
-            },
-        }),
-        new HtmlWebpackPlugin({
-            template: './src/vector/mobile_guide/index.html',
-            filename: 'mobile_guide/index.html',
-            chunks: ['mobileguide'],
-        }),
-    ],
-    devtool: 'source-map',
-
-    // configuration for the webpack-dev-server
-    devServer: {
-        // serve unwebpacked assets from webapp.
-        contentBase: './webapp',
-
-        stats: {
-            // don't fill the console up with a mahoosive list of modules
-            chunks: false,
+            // hot module replacement doesn't work (I think we'd need react-hot-reload?)
+            // so webpack-dev-server reloads the page on every update which is quite
+            // tedious in Riot since that can take a while.
+            hot: false,
+            inline: false,
         },
-
-        // hot mdule replacement doesn't work (I think we'd need react-hot-reload?)
-        // so webpack-dev-server reloads the page on every update which is quite
-        // tedious in Riot since that can take a while.
-        hot: false,
-        inline: false,
-    },
+    };
 };
 
 /**