Merge branch 'develop' into travis/ftue/user-lists/5.3-go-button

2024-11-16 13:14:58 +08:00 · 2020-01-16 13:36:59 -07:00 · 2020-01-16 13:36:59 -07:00 · 372861c9df
commit 372861c9df
parent 8b6a5d37aa cf426b5cf3
475 changed files with 4911 additions and 4391 deletions
--- a/.babelrc
+++ b/.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"
-    ]
-}
--- a/.buildkite/pipeline.yaml
+++ b/.buildkite/pipeline.yaml
@ -1,13 +1,60 @@
 steps:
-  - label: ":eslint: Lint"
+  - label: ":eslint: JS Lint"
    command:
      - "echo '--- Install js-sdk'"
      - "./scripts/ci/install-deps.sh"
-      - "yarn lintwithexclusions"
-      - "yarn stylelint"
+      - "yarn lint:js"
    plugins:
      - docker#v3.0.1:
-          image: "node:10"
+          image: "node:12"
+
+  - 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:
+      - "echo '--- Install js-sdk'"
+      - "./scripts/ci/install-deps.sh"
+      - "yarn lint:types"
+    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:
+      - "echo '--- Install js-sdk'"
+      # TODO: Remove hacky chmod for BuildKite
+      - "chmod +x ./scripts/ci/*.sh"
+      - "chmod +x ./scripts/*"
+      - "echo '--- Installing Dependencies'"
+      - "./scripts/ci/install-deps.sh"
+      - "echo '--- Running initial build steps'"
+      - "yarn build"
+      - "echo '+++ Running Tests'"
+      - "yarn test"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:12"
+
+  - label: "🛠 Build"
+    command:
+      - "echo '--- Install js-sdk'"
+      - "./scripts/ci/install-deps.sh"
+      - "echo '+++ Building Project'"
+      - "yarn build"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:12"

  - label: ":chains: End-to-End Tests"
    agents:
@ -21,39 +68,15 @@ steps:
      - "chmod +x ./scripts/*"
      - "echo '--- Install js-sdk'"
      - "./scripts/ci/install-deps.sh"
+      - "echo '--- Running initial build steps'"
+      - "yarn build"
+      - "echo '+++ Running Tests'"
      - "./scripts/ci/end-to-end-tests.sh"
    plugins:
      - docker#v3.0.1:
          image: "matrixdotorg/riotweb-ci-e2etests-env:latest"
          propagate-environment: true

-  - label: ":karma: 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
-      # TODO: Remove hacky chmod for BuildKite
-      - "chmod +x ./scripts/ci/*.sh"
-      - "chmod +x ./scripts/*"
-      - "echo '--- Installing Dependencies'"
-      - "./scripts/ci/install-deps.sh"
-      - "echo '+++ Running Tests'"
-      - "./scripts/ci/unit-tests.sh"
-    env:
-      CHROME_BIN: "/usr/bin/google-chrome-stable"
-    plugins:
-      - docker#v3.0.1:
-          image: "node:10"
-          propagate-environment: true
-
  - label: "🔧 Riot Tests"
    agents:
      # We use a medium sized instance instead of the normal small ones because
@ -66,12 +89,13 @@ steps:
      - "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
      # TODO: Remove hacky chmod for BuildKite
      - "chmod +x ./scripts/ci/*.sh"
      - "chmod +x ./scripts/*"
      - "echo '--- Installing Dependencies'"
      - "./scripts/ci/install-deps.sh"
+      - "echo '--- Running initial build steps'"
+      - "yarn build"
      - "echo '+++ Running Tests'"
      - "./scripts/ci/riot-unit-tests.sh"
    env:
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -5,7 +5,10 @@ const path = require('path');
 // but only if they come from a module that starts with eslint-config-
 // So we load the filename directly (and it could be in node_modules/
 // or or ../node_modules/ etc)
-const matrixJsSdkPath = path.dirname(require.resolve('matrix-js-sdk'));
+//
+// We add a `..` to the end because the js-sdk lives out of lib/, but the eslint
+// config is at the project root.
+const matrixJsSdkPath = path.join(path.dirname(require.resolve('matrix-js-sdk')), '..');

 module.exports = {
    parser: "babel-eslint",
@ -25,6 +28,7 @@ module.exports = {
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
+            legacyDecorators: true,
        }
    },
    rules: {
--- a/README.md
+++ b/README.md
@ -67,6 +67,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:

  * After creating a new component you must run `yarn reskindex` to regenerate
    the `component-index.js` for the SDK (used in future for skinning)
+    <!-- TODO: Remove this once this approach to skinning is replaced -->

  * The view's CSS file MUST have the same name (e.g. view/rooms/MessageTile.css).
    CSS for matrix-react-sdk currently resides in
--- a/mocks/browser-request.js
+++ b/mocks/browser-request.js
@ -0,0 +1,17 @@
+const en = require("../src/i18n/strings/en_EN");
+
+module.exports = jest.fn((opts, cb) => {
+    const url = opts.url || opts.uri;
+    if (url && url.endsWith("languages.json")) {
+        cb(undefined, {status: 200}, JSON.stringify({
+            "en": {
+                "fileName": "en_EN.json",
+                "label": "English",
+            },
+        }));
+    } else if (url && url.endsWith("en_EN.json")) {
+        cb(undefined, {status: 200}, JSON.stringify(en));
+    } else {
+        cb(true, {status: 404}, "");
+    }
+});
--- a/mocks/imageMock.js
+++ b/mocks/imageMock.js
@ -0,0 +1 @@
+module.exports = "image-file-stub";
--- a/mocks/languages.json
+++ b/mocks/languages.json
@ -0,0 +1,10 @@
+{
+  "en": {
+    "fileName": "en_EN.json",
+    "label": "English"
+  },
+  "en-us": {
+    "fileName": "en_US.json",
+    "label": "English (US)"
+  }
+}
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,26 @@
+module.exports = {
+    "sourceMaps": "inline",
+    "presets": [
+        ["@babel/preset-env", {
+            "targets": {
+                "browsers": [
+                    "last 2 versions"
+                ]
+            },
+            "modules": "commonjs"
+        }],
+        "@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"
+    ]
+};
--- a/docs/skinning.md
+++ b/docs/skinning.md
@ -0,0 +1,71 @@
+# Skinning
+
+The react-sdk can be skinned to replace presentation components, CSS, or
+other relevant parts of the SDK. Typically consumers will replace entire
+components and get the ability for custom CSS as a result.
+
+This doc isn't exhaustive on how skinning works, though it should cover
+some of the more complicated parts such as component replacement.
+
+## Loading a skin
+
+1. Generate a `component-index.js` (preferably using the tools that the react-sdk
+exposes). This can typically be done with a npm script like `"reskindex -h src/header"`.
+2. In your app's entry point, add something like this code:
+   ```javascript
+   import {loadSkin} from "matrix-react-sdk";
+   loadSkin(import("component-index").components);
+   // The rest of your imports go under this.
+   ```
+3. Import the remainder of the SDK and bootstrap your app.
+
+It is extremely important that you **do not** import anything else from the
+SDK prior to loading your skin as otherwise the skin might not work. Loading
+the skin should be one of the first things your app does, if not the very
+first thing.
+
+Additionally, **do not** provide `loadSkin` with the react-sdk components
+themselves otherwise the app might explode. The SDK is already aware of its
+components and doesn't need to be told.
+
+## Replacing components
+
+Components that replace the react-sdk ones MUST have a `replaces` static
+key on the component's class to describe which component it overrides. For
+example, if your `VectorAuthPage` component is meant to replace the react-sdk
+`AuthPage` component then you'd add `static replaces = 'views.auth.AuthPage';`
+to the `VectorAuthPage` class.
+
+Other than that, the skin just needs to be loaded normally as mentioned above.
+Consumers of the SDK likely will not be interested in the rest of this section.
+
+### SDK developer notes
+
+Components in the react-sdk MUST be decorated with the `@replaceableComponent`
+function. For components that can't use the decorator, they must use a
+variation that provides similar functionality. The decorator gives consumers
+an opportunity to load skinned components by abusing import ordering and 
+behaviour.
+
+Decorators are executed at import time which is why we can abuse the import
+ordering behaviour: importing `loadSkin` doesn't trigger any components to
+be imported, allowing the consumer to specify a skin. When the consumer does
+import a component (for example, `MatrixChat`), it starts to pull in all the
+components via `import` statements. When the components get pulled in the
+decorator checks with the skinned components to see if it should be replacing
+the component being imported. The decorator then effectively replaces the
+components when needed by specifying the skinned component as an override for
+the SDK's component, which should in theory override critical functions like
+`render()` and lifecycle event handlers. 
+
+The decorator also means that older usage of `getComponent()` is no longer
+required because components should be replaced by the decorator. Eventually
+the react-sdk should only have one usage of `getComponent()`: the decorator.
+
+The decorator assumes that if `getComponent()` returns null that there is
+no skinned version of the component and continues on using the SDK's component.
+In previous versions of the SDK, the function would throw an error instead
+because it also expected the skin to list the SDK's components as well, however
+that is no longer possible due to the above.
+
+In short, components should always be `import`ed.
--- a/jenkins.sh
+++ b/jenkins.sh
@ -1,39 +0,0 @@
-#!/bin/bash
-
-set -e
-
-export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
-nvm use 10
-
-set -x
-
-scripts/fetchdep.sh matrix-org matrix-js-sdk
-
-pushd matrix-js-sdk
-yarn link
-yarn install
-popd
-
-yarn link matrix-js-sdk
-
-# install the other dependencies
-yarn install
-
-# run the mocha tests
-yarn test --no-colors
-
-# run eslint
-yarn lintall -f checkstyle -o eslint.xml || true
-
-# re-run the linter, excluding any files known to have errors or warnings.
-yarn lintwithexclusions
-
-# lint styles
-yarn stylelint
-
-# delete the old tarball, if it exists
-rm -f matrix-react-sdk-*.tgz
-
-# build our tarball
-yarn pack
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,228 +0,0 @@
-// karma.conf.js - the config file for karma, which runs our tests.
-
-var path = require('path');
-var fs = require('fs');
-
-/*
- * 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.
-//
-// TODO: this could be a pattern, and karma would run each file, with a
-// separate webpack bundle for each file. But then we get a separate instance
-// of the sdk, and each of the dependencies, for each test file, and everything
-// gets very confused. Can we persuade webpack to put all of the dependencies
-// in a 'common' bundle?
-//
-var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
-
-
-process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
-
-function fileExists(name) {
-    try {
-        fs.statSync(name);
-        return true;
-    } catch (e) {
-        return false;
-    }
-}
-
-// try find the gemini-scrollbar css in an version-agnostic way
-var gsCss = 'node_modules/gemini-scrollbar/gemini-scrollbar.css';
-if (!fileExists(gsCss)) {
-    gsCss = 'node_modules/react-gemini-scrollbar/'+gsCss;
-}
-
-
-module.exports = function (config) {
-    config.set({
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            testFile,
-            gsCss,
-
-            // some images to reduce noise from the tests
-            {pattern: 'test/img/*', watched: false, included: false,
-             served: true, nocache: false},
-            // translation files
-            {pattern: 'src/i18n/strings/*', watcheed: false, included: false, served: true},
-            {pattern: 'test/i18n/*', watched: false, included: false, served: true},
-        ],
-
-        proxies: {
-            // redirect img links to the karma server
-            "/img/": "/base/test/img/",
-            // special languages.json file for the tests
-            "/i18n/languages.json": "/base/test/i18n/languages.json",
-            // and redirect i18n requests
-            "/i18n/": "/base/src/i18n/strings/",
-        },
-
-        // list of files to exclude
-        //
-        // This doesn't work. It turns out that it's webpack which does the
-        // watching of the /test directory (karma only watches `testFile`
-        // itself). Webpack watches the directory so that it can spot
-        // new tests, which is fair enough; unfortunately it triggers a rebuild
-        // every time a lockfile is created in that directory, and there
-        // doesn't seem to be any way to tell webpack to ignore particular
-        // files in a watched directory.
-        //
-        // exclude: [
-        //     '**/.#*'
-        // ],
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors:
-        // https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            'test/**/*.js': ['webpack', 'sourcemap']
-        },
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress'
-        // 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
-        //
-        // This is strictly for logs that would be generated by the browser itself and we
-        // don't want to log about missing images, which are emitted on LOG_WARN.
-        logLevel: config.LOG_ERROR,
-
-        // 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: {
-            module: {
-                rules: [
-                    {
-                        test: /\.js$/, loader: "babel-loader",
-                        include: [path.resolve('./src'),
-                                  path.resolve('./test'),
-                                 ]
-                    },
-                    {
-                        test: /\.(gif|png|svg|ttf|woff2)$/,
-                        loader: 'file-loader',
-                    },
-                ],
-                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$/,
-
-                    // also disable parsing for sinon, because it
-                    // tries to do voodoo with 'require' which upsets
-                    // webpack (https://github.com/webpack/webpack/issues/304)
-                    /sinon[\\\/]pkg[\\\/]sinon\.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'),
-
-                    'matrix-react-sdk': path.resolve('test/skinned-sdk.js'),
-                    'sinon': 'sinon/pkg/sinon.js',
-                },
-                modules: [
-                    path.resolve('./test'),
-                    "node_modules"
-                ],
-            },
-            devtool: 'inline-source-map',
-            externals: {
-                // Don't try to bundle electron: leave it as a commonjs dependency
-                // (the 'commonjs' here means it will output a 'require')
-                "electron": "commonjs electron",
-            },
-            // make sure we're flagged as development to avoid wasting time optimising
-            mode: 'development',
-        },
-
-        webpackMiddleware: {
-            stats: {
-                // don't fill the console up with a mahoosive list of modules
-                chunks: false,
-            },
-        },
-
-        browserNoActivityTimeout: 15000,
-    });
-};
--- a/package.json
+++ b/package.json
@ -8,57 +8,51 @@
    "url": "https://github.com/matrix-org/matrix-react-sdk"
  },
  "license": "Apache-2.0",
-  "main": "lib/index.js",
  "files": [
-    ".babelrc",
-    ".eslintrc.js",
+    "lib",
+    "res",
+    "src",
+    "scripts",
+    "git-revision.txt",
+    "docs",
+    "header",
    "CHANGELOG.md",
    "CONTRIBUTING.rst",
    "LICENSE",
    "README.md",
-    "code_style.md",
-    "git-revision.txt",
-    "header",
-    "jenkins.sh",
-    "karma.conf.js",
-    "lib",
-    "package.json",
-    "release.sh",
-    "scripts",
-    "src",
-    "test",
-    "res"
+    "package.json"
  ],
  "bin": {
    "reskindex": "scripts/reskindex.js",
    "matrix-gen-i18n": "scripts/gen-i18n.js",
    "matrix-prune-i18n": "scripts/prune-i18n.js"
  },
+  "main": "./lib/index.js",
+  "typings": "./lib/index.d.ts",
+  "matrix_src_main": "./src/index.js",
  "scripts": {
-    "reskindex": "node scripts/reskindex.js -h header",
-    "reskindex:watch": "node scripts/reskindex.js -h header -w",
-    "rethemendex": "res/css/rethemendex.sh",
    "i18n": "matrix-gen-i18n",
    "prunei18n": "matrix-prune-i18n",
    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
-    "build": "yarn reskindex && yarn start:init",
-    "build:watch": "babel src -w --skip-initial-build -d lib --source-maps --copy-files",
-    "start": "yarn start:init && yarn start:all",
-    "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn build:watch\" \"yarn reskindex:watch\"",
-    "start:init": "babel src -d lib --source-maps --copy-files",
-    "lint": "eslint src/",
-    "lintall": "eslint src/ test/",
-    "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
-    "stylelint": "stylelint 'res/css/**/*.scss'",
+    "reskindex": "node scripts/reskindex.js -h header",
+    "reskindex:watch": "node scripts/reskindex.js -h header -w",
+    "rethemendex": "res/css/rethemendex.sh",
    "clean": "rimraf lib",
-    "prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt",
-    "test": "karma start --single-run=true --browsers VectorChromeHeadless",
-    "test-multi": "karma start",
-    "e2etests": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
+    "build": "yarn clean && git rev-parse HEAD > git-revision.txt && yarn build:compile && yarn build:types",
+    "build:compile": "yarn reskindex && babel -d lib --verbose --extensions \".ts,.js\" src",
+    "build:types": "tsc --emitDeclarationOnly",
+    "start": "echo THIS IS FOR LEGACY PURPOSES ONLY. && yarn start:all",
+    "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn start:build\" \"yarn reskindex:watch\"",
+    "start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
+    "lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",
+    "lint:js": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
+    "lint:ts": "tslint --project ./tsconfig.json -t stylish",
+    "lint:types": "tsc --noEmit",
+    "lint:style": "stylelint 'res/css/**/*.scss'",
+    "test": "jest",
+    "test:e2e": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
  },
  "dependencies": {
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-runtime": "^6.26.0",
    "blueimp-canvas-to-blob": "^3.5.0",
    "browser-encrypt-attachment": "^0.3.0",
    "browser-request": "^0.3.3",
@ -82,7 +76,6 @@
    "glob-to-regexp": "^0.4.1",
    "highlight.js": "^9.15.8",
    "html-entities": "^1.2.1",
-    "humanize": "^0.0.9",
    "is-ip": "^2.0.0",
    "isomorphic-fetch": "^2.2.1",
    "linkifyjs": "^2.1.6",
@ -112,20 +105,24 @@
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "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-polyfill": "^6.26.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/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-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",
+    "@peculiar/webcrypto": "^1.0.22",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
    "chokidar": "^2.1.2",
    "concurrently": "^4.0.1",
    "enzyme": "^3.10.0",
@ -138,32 +135,35 @@
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-react-hooks": "^2.0.1",
    "estree-walker": "^0.5.0",
-    "expect": "^24.1.0",
    "file-loader": "^3.0.1",
    "flow-parser": "^0.57.3",
-    "jest-mock": "^23.2.0",
-    "karma": "^4.0.1",
-    "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",
+    "jest": "^24.9.0",
    "matrix-mock-request": "^1.2.3",
    "matrix-react-test-utils": "^0.2.2",
-    "mocha": "^5.0.5",
    "react-test-renderer": "^16.9.0",
    "require-json": "0.0.1",
    "rimraf": "^2.4.3",
-    "sinon": "^5.0.7",
    "source-map-loader": "^0.2.3",
    "stylelint": "^9.10.1",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.9.0",
+    "tslint": "^5.20.1",
+    "typescript": "^3.7.3",
    "walk": "^2.3.9",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1"
+  },
+  "jest": {
+    "testMatch": [
+      "<rootDir>/test/**/*-test.js"
+    ],
+    "setupTestFrameworkScriptFile": "<rootDir>/test/setupTests.js",
+    "moduleNameMapper": {
+      "\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
+      "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!matrix-js-sdk).+$"
+    ]
  }
 }
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -28,6 +28,7 @@
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_ViewSource.scss";
+@import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss";
@import "./views/auth/_AuthBody.scss";
@import "./views/auth/_AuthButtons.scss";
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@ -0,0 +1,51 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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.
+*/
+
+.mx_CompleteSecurity_header {
+    display: flex;
+    align-items: center;
+}
+
+.mx_CompleteSecurity_headerIcon {
+    width: 24px;
+    height: 24px;
+    margin: 0 4px;
+    position: relative;
+}
+
+.mx_CompleteSecurity_heroIcon {
+    width: 128px;
+    height: 128px;
+    position: relative;
+    margin: 0 auto;
+}
+
+.mx_CompleteSecurity_body {
+    font-size: 15px;
+}
+
+.mx_CompleteSecurity_actionRow {
+    display: flex;
+    justify-content: flex-end;
+
+    .mx_AccessibleButton {
+        margin-inline-start: 18px;
+
+        &.warning {
+            color: $warning-color;
+        }
+    }
+}
--- a/res/css/views/context_menus/_StatusMessageContextMenu.scss
+++ b/res/css/views/context_menus/_StatusMessageContextMenu.scss
@ -61,5 +61,5 @@ input.mx_StatusMessageContextMenu_message {
 }

 .mx_StatusMessageContextMenu_actionContainer .mx_Spinner {
-    justify-content: start;
+    justify-content: flex-start;
 }
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.scss
@ -30,7 +30,7 @@ limitations under the License.

    > div {
        display: flex;
-        align-items: start;
+        align-items: flex-start;
        margin: 5px 0;

        input[type=checkbox] {
--- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@ -32,7 +32,7 @@ limitations under the License.

 .mx_CreateKeyBackupDialog_passPhraseContainer {
    display: flex;
-    align-items: start;
+    align-items: flex-start;
 }

 .mx_CreateKeyBackupDialog_passPhraseHelp {
--- a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
+++ b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
@ -33,7 +33,7 @@ limitations under the License.

 .mx_CreateSecretStorageDialog_passPhraseContainer {
    display: flex;
-    align-items: start;
+    align-items: flex-start;
 }

 .mx_CreateSecretStorageDialog_passPhraseHelp {
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@ -17,7 +17,7 @@ limitations under the License.
 .mx_MemberDeviceInfo {
    display: flex;
    padding-bottom: 10px;
-    align-items: start;
+    align-items: flex-start;
 }

 .mx_MemberDeviceInfo_icon {
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@ -101,7 +101,7 @@ limitations under the License.
    display: flex;
    flex-direction: column;
    min-height: 60px;
-    justify-content: start;
+    justify-content: flex-start;
    align-items: flex-start;
    font-size: 14px;
    margin-right: 6px;
--- a/scripts/ci/install-deps.sh
+++ b/scripts/ci/install-deps.sh
@ -7,6 +7,7 @@ scripts/fetchdep.sh matrix-org matrix-js-sdk
 pushd matrix-js-sdk
 yarn link
 yarn install
+yarn build
 popd

 yarn link matrix-js-sdk
--- a/scripts/ci/unit-tests.sh
+++ b/scripts/ci/unit-tests.sh
@ -1,10 +0,0 @@
-#!/bin/bash
-#
-# script which is run by the CI build (after `yarn test`).
-#
-# clones riot-web develop and runs the tests against our version of react-sdk.
-
-set -ev
-
-scripts/ci/build.sh
-yarn test
--- a/scripts/reskindex.js
+++ b/scripts/reskindex.js
@ -19,7 +19,6 @@ function reskindex() {
    prevFiles = files;

    var header = args.h || args.header;
-    var packageJson = JSON.parse(fs.readFileSync('./package.json'));

    var strm = fs.createWriteStream(componentIndexTmp);

@ -34,19 +33,7 @@ function reskindex() {
    strm.write(" * so you'd just be trying to swim upstream like a salmon.\n");
    strm.write(" * You are not a salmon.\n");
    strm.write(" */\n\n");
-
-    if (packageJson['matrix-react-parent']) {
-        const parentIndex = packageJson['matrix-react-parent'] +
-              '/lib/component-index';
-        strm.write(
-`let components = require('${parentIndex}').components;
-if (!components) {
-    throw new Error("'${parentIndex}' didn't export components");
-}
-`);
-    } else {
    strm.write("let components = {};\n");
-    }

    for (var i = 0; i < files.length; ++i) {
        var file = files[i].replace('.js', '');
--- a/src/AddThreepid.js
+++ b/src/AddThreepid.js
@ -16,8 +16,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import MatrixClientPeg from './MatrixClientPeg';
-import sdk from './index';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import * as sdk from './index';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 import IdentityAuthClient from './IdentityAuthClient';
--- a/src/Analytics.js
+++ b/src/Analytics.js
@ -18,7 +18,7 @@ import { getCurrentLanguage, _t, _td } from './languageHandler';
 import PlatformPeg from './PlatformPeg';
 import SdkConfig from './SdkConfig';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';

 const hashRegex = /#\/(groups?|room|user|settings|register|login|forgot_password|home|directory)/;
 const hashVarRegex = /#\/(group|room|user)\/.*$/;
@ -306,4 +306,4 @@ class Analytics {
 if (!global.mxAnalytics) {
    global.mxAnalytics = new Analytics();
 }
-module.exports = global.mxAnalytics;
+export default global.mxAnalytics;
--- a/src/Avatar.js
+++ b/src/Avatar.js
@ -15,12 +15,11 @@ limitations under the License.
 */

 'use strict';
-import {ContentRepo} from 'matrix-js-sdk';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import DMRoomMap from './utils/DMRoomMap';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";

-module.exports = {
-    avatarUrlForMember: function(member, width, height, resizeMethod) {
+export function avatarUrlForMember(member, width, height, resizeMethod) {
    let url;
    if (member && member.getAvatarUrl) {
        url = member.getAvatarUrl(
@ -36,13 +35,13 @@ module.exports = {
        // member can be null here currently since on invites, the JS SDK
        // does not have enough info to build a RoomMember object for
        // the inviter.
-            url = this.defaultAvatarUrlForString(member ? member.userId : '');
+        url = defaultAvatarUrlForString(member ? member.userId : '');
    }
    return url;
-    },
+}

-    avatarUrlForUser: function(user, width, height, resizeMethod) {
-        const url = ContentRepo.getHttpUriForMxc(
+export function avatarUrlForUser(user, width, height, resizeMethod) {
+    const url = getHttpUriForMxc(
        MatrixClientPeg.get().getHomeserverUrl(), user.avatarUrl,
        Math.floor(width * window.devicePixelRatio),
        Math.floor(height * window.devicePixelRatio),
@ -52,16 +51,16 @@ module.exports = {
        return null;
    }
    return url;
-    },
+}

-    defaultAvatarUrlForString: function(s) {
+export function defaultAvatarUrlForString(s) {
    const images = ['03b381', '368bd6', 'ac3ba8'];
    let total = 0;
    for (let i = 0; i < s.length; ++i) {
        total += s.charCodeAt(i);
    }
    return require('../res/img/' + images[total % images.length] + '.png');
-    },
+}

 /**
 * returns the first (non-sigil) character of 'name',
@ -69,7 +68,7 @@ module.exports = {
 * @param {string} name
 * @return {string} the first letter
 */
-    getInitialLetter(name) {
+export function getInitialLetter(name) {
    if (!name) {
        // XXX: We should find out what causes the name to sometimes be falsy.
        console.trace("`name` argument to `getInitialLetter` not supplied");
@ -100,9 +99,9 @@ module.exports = {

    const firstChar = name.substring(idx, idx+chars);
    return firstChar.toUpperCase();
-    },
+}

-    avatarUrlForRoom(room, width, height, resizeMethod) {
+export function avatarUrlForRoom(room, width, height, resizeMethod) {
    const explicitRoomAvatar = room.getAvatarUrl(
        MatrixClientPeg.get().getHomeserverUrl(),
        width,
@ -133,5 +132,4 @@ module.exports = {
        );
    }
    return null;
-    },
-};
+}
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@ -53,10 +53,10 @@ limitations under the License.
 * }
 */

-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import Matrix from 'matrix-js-sdk';
 import dis from './dispatcher';
@ -302,7 +302,7 @@ function _onAction(payload) {
    switch (payload.action) {
        case 'place_call':
            {
-                if (module.exports.getAnyActiveCall()) {
+                if (callHandler.getAnyActiveCall()) {
                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                    Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
                        title: _t('Existing Call'),
@ -355,7 +355,7 @@ function _onAction(payload) {
            break;
        case 'incoming_call':
            {
-                if (module.exports.getAnyActiveCall()) {
+                if (callHandler.getAnyActiveCall()) {
                    // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
                    // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
                    // in future we could signal a "local busy" as a warning to the caller.
@ -523,7 +523,7 @@ if (!global.mxCallHandler) {

 const callHandler = {
    getCallForRoom: function(roomId) {
-        let call = module.exports.getCall(roomId);
+        let call = callHandler.getCall(roomId);
        if (call) return call;

        if (ConferenceHandler) {
@ -583,4 +583,4 @@ if (global.mxCallHandler === undefined) {
    global.mxCallHandler = callHandler;
 }

-module.exports = global.mxCallHandler;
+export default global.mxCallHandler;
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@ -19,8 +19,8 @@ limitations under the License.

 import extend from './extend';
 import dis from './dispatcher';
-import MatrixClientPeg from './MatrixClientPeg';
-import sdk from './index';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
 import RoomViewStore from './stores/RoomViewStore';
--- a/src/CrossSigningManager.js
+++ b/src/CrossSigningManager.js
@ -15,10 +15,10 @@ limitations under the License.
 */

 import Modal from './Modal';
-import sdk from './index';
-import MatrixClientPeg from './MatrixClientPeg';
-import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
-import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto/recoverykey';
+import * as sdk from './index';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import { deriveKey } from 'matrix-js-sdk/src/crypto/key_passphrase';
+import { decodeRecoveryKey } from 'matrix-js-sdk/src/crypto/recoverykey';
 import { _t } from './languageHandler';

 // This stores the secret storage private keys in memory for the JS SDK. This is
--- a/src/Entities.js
+++ b/src/Entities.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import sdk from './index';
+import * as sdk from './index';

 function isMatch(query, name, uid) {
    query = query.toLowerCase();
@ -105,26 +105,24 @@ class UserEntity extends Entity {
    }
 }

-
-module.exports = {
-    newEntity: function(jsx, matchFn) {
+export function newEntity(jsx, matchFn) {
    const entity = new Entity();
    entity.getJsx = function() {
        return jsx;
    };
    entity.matches = matchFn;
    return entity;
-    },
+}

 /**
 * @param {RoomMember[]} members
 * @return {Entity[]}
 */
-    fromRoomMembers: function(members) {
+export function fromRoomMembers(members) {
    return members.map(function(m) {
        return new MemberEntity(m);
    });
-    },
+}

 /**
 * @param {User[]} users
@ -132,9 +130,8 @@ module.exports = {
 * @param {Function} inviteFn Called with the user ID.
 * @return {Entity[]}
 */
-    fromUsers: function(users, showInviteButton, inviteFn) {
+export function fromUsers(users, showInviteButton, inviteFn) {
    return users.map(function(u) {
        return new UserEntity(u, showInviteButton, inviteFn);
    });
-    },
-};
+}
--- a/src/FromWidgetPostMessageApi.js
+++ b/src/FromWidgetPostMessageApi.js
@ -20,7 +20,7 @@ import URL from 'url';
 import dis from './dispatcher';
 import WidgetMessagingEndpoint from './WidgetMessagingEndpoint';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import RoomViewStore from "./stores/RoomViewStore";
 import {IntegrationManagers} from "./integrations/IntegrationManagers";
 import SettingsStore from "./settings/SettingsStore";
--- a/src/GroupAddressPicker.js
+++ b/src/GroupAddressPicker.js
@ -16,10 +16,10 @@ limitations under the License.

 import React from 'react';
 import Modal from './Modal';
-import sdk from './';
+import * as sdk from './';
 import MultiInviter from './utils/MultiInviter';
 import { _t } from './languageHandler';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import GroupStore from './stores/GroupStore';
 import {allSettled} from "./utils/promise";

--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@ -29,7 +29,7 @@ import linkifyMatrix from './linkify-matrix';
 import _linkifyElement from 'linkifyjs/element';
 import _linkifyString from 'linkifyjs/string';
 import classNames from 'classnames';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import url from 'url';

 import EMOJIBASE_REGEX from 'emojibase-regex';
--- a/src/IdentityAuthClient.js
+++ b/src/IdentityAuthClient.js
@ -16,9 +16,9 @@ limitations under the License.

 import { createClient, SERVICE_TYPES } from 'matrix-js-sdk';

-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
 import {
--- a/src/ImageUtils.js
+++ b/src/ImageUtils.js
@ -16,8 +16,6 @@ limitations under the License.

 'use strict';

-module.exports = {
-
 /**
 * Returns the actual height that an image of dimensions (fullWidth, fullHeight)
 * will occupy if resized to fit inside a thumbnail bounding box of size
@ -32,7 +30,7 @@ module.exports = {
 * consume in the timeline, when performing scroll offset calcuations
 * (e.g. scroll locking)
 */
-    thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
+export function thumbHeight(fullWidth, fullHeight, thumbWidth, thumbHeight) {
    if (!fullWidth || !fullHeight) {
        // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
        // log this because it's spammy
@ -51,6 +49,5 @@ module.exports = {
        // height is the dominant dimension so scaling will be fixed on that
        return Math.floor(heightMulti * fullHeight);
    }
-    },
-};
+}

--- a/src/KeyRequestHandler.js
+++ b/src/KeyRequestHandler.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import sdk from './index';
+import * as sdk from './index';
 import Modal from './Modal';

 export default class KeyRequestHandler {
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@ -18,7 +18,7 @@ limitations under the License.

 import Matrix from 'matrix-js-sdk';

-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import EventIndexPeg from './indexing/EventIndexPeg';
 import createMatrixClient from './utils/createMatrixClient';
 import Analytics from './Analytics';
@ -28,7 +28,7 @@ import Presence from './Presence';
 import dis from './dispatcher';
 import DMRoomMap from './utils/DMRoomMap';
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
 import ActiveWidgetStore from './stores/ActiveWidgetStore';
 import PlatformPeg from "./PlatformPeg";
 import { sendLoginRequest } from "./Login";
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd.
 Copyright 2017, 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 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.
@ -19,15 +19,15 @@ limitations under the License.

 import {MatrixClient, MemoryStore} from 'matrix-js-sdk';

-import utils from 'matrix-js-sdk/lib/utils';
-import EventTimeline from 'matrix-js-sdk/lib/models/event-timeline';
-import EventTimelineSet from 'matrix-js-sdk/lib/models/event-timeline-set';
-import sdk from './index';
+import * as utils from 'matrix-js-sdk/src/utils';
+import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
+import {EventTimelineSet} from 'matrix-js-sdk/src/models/event-timeline-set';
+import * as sdk from './index';
 import createMatrixClient from './utils/createMatrixClient';
 import SettingsStore from './settings/SettingsStore';
 import MatrixActionCreators from './actions/MatrixActionCreators';
 import Modal from './Modal';
-import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
+import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientBackedSettingsHandler";
 import * as StorageManager from './utils/StorageManager';
 import IdentityAuthClient from './IdentityAuthClient';
@ -48,7 +48,7 @@ interface MatrixClientCreds {
 * This module provides a singleton instance of this class so the 'current'
 * Matrix Client object is available easily.
 */
-class MatrixClientPeg {
+class _MatrixClientPeg {
    constructor() {
        this.matrixClient = null;
        this._justRegisteredUserId = null;
@ -223,9 +223,10 @@ class MatrixClientPeg {
        };

        opts.cryptoCallbacks = {};
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        // These are always installed regardless of the labs flag so that
+        // cross-signing features can toggle on without reloading and also be
+        // accessed immediately after login.
        Object.assign(opts.cryptoCallbacks, crossSigningCallbacks);
-        }

        this.matrixClient = createMatrixClient(opts);

@ -245,6 +246,7 @@ class MatrixClientPeg {
 }

 if (!global.mxMatrixClientPeg) {
-    global.mxMatrixClientPeg = new MatrixClientPeg();
+    global.mxMatrixClientPeg = new _MatrixClientPeg();
 }
-export default global.mxMatrixClientPeg;
+
+export const MatrixClientPeg = global.mxMatrixClientPeg;
--- a/src/Modal.js
+++ b/src/Modal.js
@ -20,7 +20,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import Analytics from './Analytics';
-import sdk from './index';
+import * as sdk from './index';
 import dis from './dispatcher';
 import { _t } from './languageHandler';
 import {defer} from "./utils/promise";
--- a/src/Notifier.js
+++ b/src/Notifier.js
@ -16,13 +16,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import PlatformPeg from './PlatformPeg';
-import TextForEvent from './TextForEvent';
+import * as TextForEvent from './TextForEvent';
 import Analytics from './Analytics';
-import Avatar from './Avatar';
+import * as Avatar from './Avatar';
 import dis from './dispatcher';
-import sdk from './index';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
 import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
@ -364,4 +364,4 @@ if (!global.mxNotifier) {
    global.mxNotifier = Notifier;
 }

-module.exports = global.mxNotifier;
+export default global.mxNotifier;
--- a/src/ObjectUtils.js
+++ b/src/ObjectUtils.js
@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 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.
@ -22,7 +23,7 @@ limitations under the License.
 * @return {Object[]} An array of objects with the form:
 * { key: $KEY, val: $VALUE, place: "add|del" }
 */
-module.exports.getKeyValueArrayDiffs = function(before, after) {
+export function getKeyValueArrayDiffs(before, after) {
    const results = [];
    const delta = {};
    Object.keys(before).forEach(function(beforeKey) {
@ -76,7 +77,7 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
    });

    return results;
-};
+}

 /**
 * Shallow-compare two objects for equality: each key and value must be identical
@ -84,7 +85,7 @@ module.exports.getKeyValueArrayDiffs = function(before, after) {
 * @param {Object} objB Second object to compare against the first
 * @return {boolean} whether the two objects have same key=values
 */
-module.exports.shallowEqual = function(objA, objB) {
+export function shallowEqual(objA, objB) {
    if (objA === objB) {
        return true;
    }
@ -109,4 +110,4 @@ module.exports.shallowEqual = function(objA, objB) {
    }

    return true;
-};
+}
--- a/src/PasswordReset.js
+++ b/src/PasswordReset.js
@ -25,7 +25,7 @@ import { _t } from './languageHandler';
 * the client owns the given email address, which is then passed to the password
 * API on the homeserver in question with the new password.
 */
-class PasswordReset {
+export default class PasswordReset {
    /**
     * Configure the endpoints for password resetting.
     * @param {string} homeserverUrl The URL to the HS which has the account to reset.
@ -101,4 +101,3 @@ class PasswordReset {
    }
 }

-module.exports = PasswordReset;
--- a/src/PlatformPeg.js
+++ b/src/PlatformPeg.js
@ -47,4 +47,4 @@ class PlatformPeg {
 if (!global.mxPlatformPeg) {
    global.mxPlatformPeg = new PlatformPeg();
 }
-module.exports = global.mxPlatformPeg;
+export default global.mxPlatformPeg;
--- a/src/Presence.js
+++ b/src/Presence.js
@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2019 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.
@ -15,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import dis from "./dispatcher";
 import Timer from './utils/Timer';

@ -104,4 +105,4 @@ class Presence {
    }
 }

-module.exports = new Presence();
+export default new Presence();
--- a/src/Registration.js
+++ b/src/Registration.js
@ -21,10 +21,10 @@ limitations under the License.
 */

 import dis from './dispatcher';
-import sdk from './index';
+import * as sdk from './index';
 import Modal from './Modal';
 import { _t } from './languageHandler';
-// import MatrixClientPeg from './MatrixClientPeg';
+// import {MatrixClientPeg} from './MatrixClientPeg';

 // Regex for what a "safe" or "Matrix-looking" localpart would be.
 // TODO: Update as needed for https://github.com/matrix-org/matrix-doc/issues/1514
--- a/src/Resend.js
+++ b/src/Resend.js
@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
@ -14,26 +15,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import dis from './dispatcher';
 import { EventStatus } from 'matrix-js-sdk';

-module.exports = {
-    resendUnsentEvents: function(room) {
+export default class Resend {
+    static resendUnsentEvents(room) {
        room.getPendingEvents().filter(function(ev) {
            return ev.status === EventStatus.NOT_SENT;
        }).forEach(function(event) {
-            module.exports.resend(event);
+            Resend.resend(event);
        });
-    },
-    cancelUnsentEvents: function(room) {
+    }
+
+    static cancelUnsentEvents(room) {
        room.getPendingEvents().filter(function(ev) {
            return ev.status === EventStatus.NOT_SENT;
        }).forEach(function(event) {
-            module.exports.removeFromQueue(event);
+            Resend.removeFromQueue(event);
        });
-    },
-    resend: function(event) {
+    }
+
+    static resend(event) {
        const room = MatrixClientPeg.get().getRoom(event.getRoomId());
        MatrixClientPeg.get().resendEvent(event, room).then(function(res) {
            dis.dispatch({
@ -50,8 +53,9 @@ module.exports = {
                event: event,
            });
        });
-    },
-    removeFromQueue: function(event) {
+    }
+
+    static removeFromQueue(event) {
        MatrixClientPeg.get().cancelPendingEvent(event);
-    },
-};
+    }
+}
--- a/src/RoomInvite.js
+++ b/src/RoomInvite.js
@ -16,12 +16,12 @@ limitations under the License.
 */

 import React from 'react';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import MultiInviter from './utils/MultiInviter';
 import Modal from './Modal';
 import { getAddressType } from './UserAddress';
 import createRoom from './createRoom';
-import sdk from './';
+import * as sdk from './';
 import dis from './dispatcher';
 import DMRoomMap from './utils/DMRoomMap';
 import { _t } from './languageHandler';
--- a/src/RoomListSorter.js
+++ b/src/RoomListSorter.js
@ -24,12 +24,8 @@ function tsOfNewestEvent(room) {
    }
 }

-function mostRecentActivityFirst(roomList) {
+export function mostRecentActivityFirst(roomList) {
    return roomList.sort(function(a, b) {
        return tsOfNewestEvent(b) - tsOfNewestEvent(a);
    });
 }
-
-module.exports = {
-    mostRecentActivityFirst,
-};
--- a/src/RoomNotifs.js
+++ b/src/RoomNotifs.js
@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import MatrixClientPeg from './MatrixClientPeg';
-import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import {PushProcessor} from 'matrix-js-sdk/src/pushprocessor';

 export const ALL_MESSAGES_LOUD = 'all_messages_loud';
 export const ALL_MESSAGES = 'all_messages';
--- a/src/Rooms.js
+++ b/src/Rooms.js
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';

 /**
 * Given a room object, return the alias we should use for it,
--- a/src/ScalarAuthClient.js
+++ b/src/ScalarAuthClient.js
@ -18,12 +18,11 @@ limitations under the License.
 import url from 'url';
 import SettingsStore from "./settings/SettingsStore";
 import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
-const request = require('browser-request');
-
-const SdkConfig = require('./SdkConfig');
-const MatrixClientPeg = require('./MatrixClientPeg');
+import {MatrixClientPeg} from "./MatrixClientPeg";
+import request from "browser-request";

 import * as Matrix from 'matrix-js-sdk';
+import SdkConfig from "./SdkConfig";

 // The version of the integration manager API we're intending to work with
 const imApiVersion = "1.1";
--- a/src/ScalarMessaging.js
+++ b/src/ScalarMessaging.js
@ -232,7 +232,7 @@ Example:
 }
 */

-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import { MatrixEvent } from 'matrix-js-sdk';
 import dis from './dispatcher';
 import WidgetUtils from './utils/WidgetUtils';
@ -658,15 +658,15 @@ const onMessage = function(event) {

 let listenerCount = 0;
 let openManagerUrl = null;
-module.exports = {
-    startListening: function() {
+
+export function startListening() {
    if (listenerCount === 0) {
        window.addEventListener("message", onMessage, false);
    }
    listenerCount += 1;
-    },
+}

-    stopListening: function() {
+export function stopListening() {
    listenerCount -= 1;
    if (listenerCount === 0) {
        window.removeEventListener("message", onMessage);
@ -679,9 +679,8 @@ module.exports = {
        );
        console.error(e);
    }
-    },
+}

-    setOpenManagerUrl: function(url) {
+export function setOpenManagerUrl(url) {
    openManagerUrl = url;
-    },
-};
+}
--- a/src/SdkConfig.ts
+++ b/src/SdkConfig.ts
@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 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.
@ -14,7 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export const DEFAULTS = {
+export interface ConfigOptions {
+    [key: string]: any;
+}
+
+export const DEFAULTS: ConfigOptions = {
    // URL to a page we show in an iframe to configure integrations
    integrations_ui_url: "https://scalar.vector.im/",
    // Base URL to the REST interface of the integrations server
@ -23,30 +28,37 @@ export const DEFAULTS = {
    bug_report_endpoint_url: null,
 };

-class SdkConfig {
-    static get() {
-        return global.mxReactSdkConfig || {};
+export default class SdkConfig {
+    private static instance: ConfigOptions;
+
+    private static setInstance(i: ConfigOptions) {
+        SdkConfig.instance = i;
+
+        // For debugging purposes
+        (<any>window).mxReactSdkConfig = i;
    }

-    static put(cfg) {
+    static get() {
+        return SdkConfig.instance || {};
+    }
+
+    static put(cfg: ConfigOptions) {
        const defaultKeys = Object.keys(DEFAULTS);
        for (let i = 0; i < defaultKeys.length; ++i) {
            if (cfg[defaultKeys[i]] === undefined) {
                cfg[defaultKeys[i]] = DEFAULTS[defaultKeys[i]];
            }
        }
-        global.mxReactSdkConfig = cfg;
+        SdkConfig.setInstance(cfg);
    }

    static unset() {
-        global.mxReactSdkConfig = undefined;
+        SdkConfig.setInstance({});
    }

-    static add(cfg) {
+    static add(cfg: ConfigOptions) {
        const liveConfig = SdkConfig.get();
        const newConfig = Object.assign({}, liveConfig, cfg);
        SdkConfig.put(newConfig);
    }
 }
-
-module.exports = SdkConfig;
--- a/src/Searching.js
+++ b/src/Searching.js
@ -15,7 +15,7 @@ limitations under the License.
 */

 import EventIndexPeg from "./indexing/EventIndexPeg";
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";

 function serverSideSearch(term, roomId = undefined) {
    let filter;
--- a/src/Skinner.js
+++ b/src/Skinner.js
@ -28,21 +28,37 @@ class Skinner {
                " b) A component has called getComponent at the root level",
            );
        }
-        let comp = this.components[name];
+
+        const doLookup = (components) => {
+            if (!components) return null;
+            let comp = components[name];
            // XXX: Temporarily also try 'views.' as we're currently
            // leaving the 'views.' off views.
            if (!comp) {
-            comp = this.components['views.'+name];
+                comp = components['views.' + name];
+            }
+            return comp;
+        };
+
+        // Check the skin first
+        let comp = doLookup(this.components);
+
+        // If that failed, check against our own components
+        if (!comp) {
+            // Lazily load our own components because they might end up calling .getComponent()
+            comp = doLookup(require("./component-index").components);
        }

+        // Just return nothing instead of erroring - the consumer should be smart enough to
+        // handle this at this point.
        if (!comp) {
-            throw new Error("No such component: "+name);
+            return null;
        }

        // components have to be functions.
        const validType = typeof comp === 'function';
        if (!validType) {
-            throw new Error(`Not a valid component: ${name}.`);
+            throw new Error(`Not a valid component: ${name} (type = ${typeof(comp)}).`);
        }
        return comp;
    }
@ -90,5 +106,5 @@ class Skinner {
 if (global.mxSkinner === undefined) {
    global.mxSkinner = new Skinner();
 }
-module.exports = global.mxSkinner;
+export default global.mxSkinner;

--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@ -18,9 +18,9 @@ limitations under the License.


 import React from 'react';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import dis from './dispatcher';
-import sdk from './index';
+import * as sdk from './index';
 import {_t, _td} from './languageHandler';
 import Modal from './Modal';
 import MultiInviter from './utils/MultiInviter';
--- a/src/Terms.js
+++ b/src/Terms.js
@ -16,8 +16,8 @@ limitations under the License.

 import classNames from 'classnames';

-import MatrixClientPeg from './MatrixClientPeg';
-import sdk from './';
+import {MatrixClientPeg} from './MatrixClientPeg';
+import * as sdk from './';
 import Modal from './Modal';

 export class TermsNotSignedError extends Error {}
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@ -13,7 +13,7 @@ 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.
 */
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
 import CallHandler from './CallHandler';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
@ -620,10 +620,8 @@ for (const evType of ALL_RULE_TYPES) {
    stateHandlers[evType] = textForMjolnirEvent;
 }

-module.exports = {
-    textForEvent: function(ev) {
+export function textForEvent(ev) {
    const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
    if (handler) return handler(ev);
    return '';
-    },
-};
+}
--- a/src/Tinter.js
+++ b/src/Tinter.js
@ -143,10 +143,14 @@ class Tinter {
     * over time then the best bet is to register a single callback for the
     * entire set.
     *
+     * To ensure the tintable work happens at least once, it is also called as
+     * part of registration.
+     *
     * @param {Function} tintable Function to call when the tint changes.
     */
    registerTintable(tintable) {
        this.tintables.push(tintable);
+        tintable();
    }

    getKeyRgb() {
--- a/src/Unread.js
+++ b/src/Unread.js
@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-const MatrixClientPeg = require('./MatrixClientPeg');
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import shouldHideEvent from './shouldHideEvent';
-const sdk = require('./index');
+import * as sdk from "./index";
+import {haveTileForEvent} from "./components/views/rooms/EventTile";

-module.exports = {
 /**
 * Returns true iff this event arriving in a room should affect the room's
 * count of unread messages
 */
-    eventTriggersUnreadCount: function(ev) {
+export function eventTriggersUnreadCount(ev) {
    if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) {
        return false;
    } else if (ev.getType() == 'm.room.member') {
@ -39,11 +39,10 @@ module.exports = {
    } else if (ev.getType() == 'm.room.server_acl') {
        return false;
    }
-        const EventTile = sdk.getComponent('rooms.EventTile');
-        return EventTile.haveTileForEvent(ev);
-    },
+    return haveTileForEvent(ev);
+}

-    doesRoomHaveUnreadMessages: function(room) {
+export function doesRoomHaveUnreadMessages(room) {
    const myUserId = MatrixClientPeg.get().credentials.userId;

    // get the most recent read receipt sent by our account.
@ -78,7 +77,7 @@ module.exports = {
            // that counts and we can stop looking because the user's read
            // this and everything before.
            return false;
-            } else if (!shouldHideEvent(ev) && this.eventTriggersUnreadCount(ev)) {
+        } else if (!shouldHideEvent(ev) && eventTriggersUnreadCount(ev)) {
            // We've found a message that counts before we hit
            // the user's read receipt, so this room is definitely unread.
            return true;
@ -89,5 +88,4 @@ module.exports = {
    // unread on the theory that false positives are better than false
    // negatives here.
    return true;
-    },
-};
+}
--- a/src/VectorConferenceHandler.js
+++ b/src/VectorConferenceHandler.js
@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
@ -14,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {createNewMatrixCall, Room} from "matrix-js-sdk";
+import {createNewMatrixCall as jsCreateNewMatrixCall, Room} from "matrix-js-sdk";
 import CallHandler from './CallHandler';
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";

 // FIXME: this is Riot (Vector) specific code, but will be removed shortly when
 // we switch over to jitsi entirely for video conferencing.
@ -28,10 +29,10 @@ import MatrixClientPeg from "./MatrixClientPeg";
 const USER_PREFIX = "fs_";
 const DOMAIN = "matrix.org";

-function ConferenceCall(matrixClient, groupChatRoomId) {
+export function ConferenceCall(matrixClient, groupChatRoomId) {
    this.client = matrixClient;
    this.groupRoomId = groupChatRoomId;
-    this.confUserId = module.exports.getConferenceUserIdForRoom(this.groupRoomId);
+    this.confUserId = getConferenceUserIdForRoom(this.groupRoomId);
 }

 ConferenceCall.prototype.setup = function() {
@ -42,7 +43,7 @@ ConferenceCall.prototype.setup = function() {
        // return a call for *this* room to be placed. We also tack on
        // confUserId to speed up lookups (else we'd need to loop every room
        // looking for a 1:1 room with this conf user ID!)
-        const call = createNewMatrixCall(self.client, room.roomId);
+        const call = jsCreateNewMatrixCall(self.client, room.roomId);
        call.confUserId = self.confUserId;
        call.groupRoomId = self.groupRoomId;
        return call;
@ -90,7 +91,7 @@ ConferenceCall.prototype._getConferenceUserRoom = function() {
 * @param {string} userId The user ID to check.
 * @return {boolean} True if it is a conference bot.
 */
-module.exports.isConferenceUser = function(userId) {
+export function isConferenceUser(userId) {
    if (userId.indexOf("@" + USER_PREFIX) !== 0) {
        return false;
    }
@ -101,26 +102,26 @@ module.exports.isConferenceUser = function(userId) {
        return /^!.+:.+/.test(decoded);
    }
    return false;
-};
+}

-module.exports.getConferenceUserIdForRoom = function(roomId) {
+export function getConferenceUserIdForRoom(roomId) {
    // abuse browserify's core node Buffer support (strip padding ='s)
    const base64RoomId = new Buffer(roomId).toString("base64").replace(/=/g, "");
    return "@" + USER_PREFIX + base64RoomId + ":" + DOMAIN;
-};
+}

-module.exports.createNewMatrixCall = function(client, roomId) {
+export function createNewMatrixCall(client, roomId) {
    const confCall = new ConferenceCall(
        client, roomId,
    );
    return confCall.setup();
-};
+}

-module.exports.getConferenceCallForRoom = function(roomId) {
+export function getConferenceCallForRoom(roomId) {
    // search for a conference 1:1 call for this group chat room ID
    const activeCall = CallHandler.getAnyActiveCall();
    if (activeCall && activeCall.confUserId) {
-        const thisRoomConfUserId = module.exports.getConferenceUserIdForRoom(
+        const thisRoomConfUserId = getConferenceUserIdForRoom(
            roomId,
        );
        if (thisRoomConfUserId === activeCall.confUserId) {
@ -128,8 +129,7 @@ module.exports.getConferenceCallForRoom = function(roomId) {
        }
    }
    return null;
-};
+}

-module.exports.ConferenceCall = ConferenceCall;
-
-module.exports.slot = 'conference';
+// TODO: Document this.
+export const slot = 'conference';
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@ -1,7 +1,7 @@
-const React = require('react');
-const ReactDom = require('react-dom');
+import React from "react";
+import ReactDom from "react-dom";
+import Velocity from "velocity-animate";
 import PropTypes from 'prop-types';
-const Velocity = require('velocity-animate');

 /**
 * The Velociraptor contains components and animates transitions with velocity.
--- a/src/VelocityBounce.js
+++ b/src/VelocityBounce.js
@ -1,4 +1,4 @@
-const Velocity = require('velocity-animate');
+import Velocity from "velocity-animate";

 // courtesy of https://github.com/julianshapiro/velocity/issues/283
 // We only use easeOutBounce (easeInBounce is just sort of nonsensical)
--- a/src/WhoIsTyping.js
+++ b/src/WhoIsTyping.js
@ -14,21 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import { _t } from './languageHandler';

-module.exports = {
-    usersTypingApartFromMeAndIgnored: function(room) {
-        return this.usersTyping(
+export function usersTypingApartFromMeAndIgnored(room) {
+    return usersTyping(
        room, [MatrixClientPeg.get().credentials.userId].concat(MatrixClientPeg.get().getIgnoredUsers()),
    );
-    },
+}

-    usersTypingApartFromMe: function(room) {
-        return this.usersTyping(
+export function usersTypingApartFromMe(room) {
+    return usersTyping(
        room, [MatrixClientPeg.get().credentials.userId],
    );
-    },
+}

 /**
 * Given a Room object and, optionally, a list of userID strings
@ -37,7 +36,7 @@ module.exports = {
 * @param {string[]} exclude: list of user mxids to exclude.
 * @returns {string[]} list of user objects who are typing.
 */
-    usersTyping: function(room, exclude) {
+export function usersTyping(room, exclude) {
    const whoIsTyping = [];

    if (exclude === undefined) {
@ -56,9 +55,9 @@ module.exports = {
    }

    return whoIsTyping;
-    },
+}

-    whoIsTypingString: function(whoIsTyping, limit) {
+export function whoIsTypingString(whoIsTyping, limit) {
    let othersCount = 0;
    if (whoIsTyping.length > limit) {
        othersCount = whoIsTyping.length - limit + 1;
@ -80,5 +79,4 @@ module.exports = {
        const lastPerson = names.pop();
        return _t('%(names)s and %(lastPerson)s are typing …', {names: names.join(', '), lastPerson: lastPerson});
    }
-    },
-};
+}
--- a/src/WidgetMessaging.js
+++ b/src/WidgetMessaging.js
@ -23,7 +23,7 @@ limitations under the License.
 import FromWidgetPostMessageApi from './FromWidgetPostMessageApi';
 import ToWidgetPostMessageApi from './ToWidgetPostMessageApi';
 import Modal from "./Modal";
-import MatrixClientPeg from "./MatrixClientPeg";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 import SettingsStore from "./settings/SettingsStore";
 import WidgetOpenIDPermissionsDialog from "./components/views/dialogs/WidgetOpenIDPermissionsDialog";
 import WidgetUtils from "./utils/WidgetUtils";
--- a/src/actions/RoomListActions.js
+++ b/src/actions/RoomListActions.js
@ -16,11 +16,10 @@ limitations under the License.

 import { asyncAction } from './actionCreators';
 import RoomListStore from '../stores/RoomListStore';
-
 import Modal from '../Modal';
 import * as Rooms from '../Rooms';
 import { _t } from '../languageHandler';
-import sdk from '../index';
+import * as sdk from '../index';

 const RoomListActions = {};

--- a/src/async-components/views/dialogs/EncryptedEventDialog.js
+++ b/src/async-components/views/dialogs/EncryptedEventDialog.js
@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import {Key} from "../../../Keyboard";
-
-const React = require("react");
+import React from "react";
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-const sdk = require('../../../index');
-const MatrixClientPeg = require("../../../MatrixClientPeg");
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import {Key} from "../../../Keyboard";
+import * as sdk from "../../../index";

 // XXX: This component is not cross-signing aware.
 // https://github.com/vector-im/riot-web/issues/11752 tracks either updating this
 // component or taking it out to pasture.
-module.exports = createReactClass({
+export default createReactClass({
    displayName: 'EncryptedEventDialog',

    propTypes: {
--- a/src/async-components/views/dialogs/ExportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/ExportE2eKeysDialog.js
@ -22,7 +22,7 @@ import { _t } from '../../../languageHandler';

 import { MatrixClient } from 'matrix-js-sdk';
 import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
-import sdk from '../../../index';
+import * as sdk from '../../../index';

 const PHASE_EDIT = 1;
 const PHASE_EXPORTING = 2;
--- a/src/async-components/views/dialogs/ImportE2eKeysDialog.js
+++ b/src/async-components/views/dialogs/ImportE2eKeysDialog.js
@ -20,7 +20,7 @@ import createReactClass from 'create-react-class';

 import { MatrixClient } from 'matrix-js-sdk';
 import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';

 function readFileAsArrayBuffer(file) {
--- a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@ -17,10 +17,9 @@ limitations under the License.

 import React from 'react';
 import FileSaver from 'file-saver';
+import * as sdk from '../../../../index';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
-
-import sdk from '../../../../index';
-import MatrixClientPeg from '../../../../MatrixClientPeg';
 import { scorePassword } from '../../../../utils/PasswordScorer';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../CrossSigningManager';
--- a/src/async-components/views/dialogs/keybackup/IgnoreRecoveryReminderDialog.js
+++ b/src/async-components/views/dialogs/keybackup/IgnoreRecoveryReminderDialog.js
@ -16,7 +16,7 @@ limitations under the License.

 import React from "react";
 import PropTypes from "prop-types";
-import sdk from "../../../../index";
+import * as sdk from "../../../../index";
 import { _t } from "../../../../languageHandler";

 export default class IgnoreRecoveryReminderDialog extends React.PureComponent {
--- a/src/async-components/views/dialogs/keybackup/NewRecoveryMethodDialog.js
+++ b/src/async-components/views/dialogs/keybackup/NewRecoveryMethodDialog.js
@ -17,8 +17,8 @@ limitations under the License.

 import React from "react";
 import PropTypes from "prop-types";
-import sdk from "../../../../index";
-import MatrixClientPeg from '../../../../MatrixClientPeg';
+import * as sdk from "../../../../index";
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import dis from "../../../../dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
--- a/src/async-components/views/dialogs/keybackup/RecoveryMethodRemovedDialog.js
+++ b/src/async-components/views/dialogs/keybackup/RecoveryMethodRemovedDialog.js
@ -17,7 +17,7 @@ limitations under the License.

 import React from "react";
 import PropTypes from "prop-types";
-import sdk from "../../../../index";
+import * as sdk from "../../../../index";
 import dis from "../../../../dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";
--- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
@ -16,8 +16,8 @@ limitations under the License.
 */

 import React from 'react';
-import sdk from '../../../../index';
-import MatrixClientPeg from '../../../../MatrixClientPeg';
+import * as sdk from '../../../../index';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import { scorePassword } from '../../../../utils/PasswordScorer';
 import FileSaver from 'file-saver';
 import { _t } from '../../../../languageHandler';
@ -313,7 +313,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
            <p>{_t(
                "Secret Storage will be set up using your existing key backup details. " +
                "Your secret storage passphrase and recovery key will be the same as " +
-                " they were for your key backup",
+                "they were for your key backup.",
            )}</p>
            <DialogButtons primaryButton={_t('Next')}
                onPrimaryButtonClick={this._onMigrateNextClick}
--- a/src/autocomplete/CommunityProvider.js
+++ b/src/autocomplete/CommunityProvider.js
@ -18,10 +18,10 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
-import sdk from '../index';
+import * as sdk from '../index';
 import _sortBy from 'lodash/sortBy';
 import {makeGroupPermalink} from "../utils/permalinks/Permalinks";
 import type {Completion, SelectionRange} from "./Autocompleter";
@ -46,7 +46,7 @@ export default class CommunityProvider extends AutocompleteProvider {
        });
    }

-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
        const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');

        // Disable autocompletions when composing commands because of various issues
--- a/src/autocomplete/DuckDuckGoProvider.js
+++ b/src/autocomplete/DuckDuckGoProvider.js
@ -37,7 +37,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
    }

-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false) {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false) {
        const {command, range} = this.getCurrentCommand(query, selection);
        if (!query || !command) {
            return [];
--- a/src/autocomplete/NotifProvider.js
+++ b/src/autocomplete/NotifProvider.js
@ -17,9 +17,9 @@ limitations under the License.
 import React from 'react';
 import AutocompleteProvider from './AutocompleteProvider';
 import { _t } from '../languageHandler';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import {PillCompletion} from './Components';
-import sdk from '../index';
+import * as sdk from '../index';
 import type {Completion, SelectionRange} from "./Autocompleter";

 const AT_ROOM_REGEX = /@\S*/g;
@ -30,7 +30,7 @@ export default class NotifProvider extends AutocompleteProvider {
        this.room = room;
    }

-    async getCompletions(query: string, selection: SelectionRange, force?:boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force:boolean = false): Array<Completion> {
        const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');

        const client = MatrixClientPeg.get();
--- a/src/autocomplete/RoomProvider.js
+++ b/src/autocomplete/RoomProvider.js
@ -20,11 +20,11 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';
 import QueryMatcher from './QueryMatcher';
 import {PillCompletion} from './Components';
 import {getDisplayAliasForRoom} from '../Rooms';
-import sdk from '../index';
+import * as sdk from '../index';
 import _sortBy from 'lodash/sortBy';
 import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
 import type {Completion, SelectionRange} from "./Autocompleter";
@ -48,7 +48,7 @@ export default class RoomProvider extends AutocompleteProvider {
        });
    }

-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
        const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');

        const client = MatrixClientPeg.get();
--- a/src/autocomplete/UserProvider.js
+++ b/src/autocomplete/UserProvider.js
@ -22,10 +22,10 @@ import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import {PillCompletion} from './Components';
-import sdk from '../index';
+import * as sdk from '../index';
 import QueryMatcher from './QueryMatcher';
 import _sortBy from 'lodash/sortBy';
-import MatrixClientPeg from '../MatrixClientPeg';
+import {MatrixClientPeg} from '../MatrixClientPeg';

 import type {MatrixEvent, Room, RoomMember, RoomState} from 'matrix-js-sdk';
 import {makeUserPermalink} from "../utils/permalinks/Permalinks";
@ -91,7 +91,7 @@ export default class UserProvider extends AutocompleteProvider {
        this.users = null;
    }

-    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+    async getCompletions(query: string, selection: SelectionRange, force: boolean = false): Array<Completion> {
        const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');

        // lazy-load user list into matcher
--- a/src/components/structures/CompatibilityPage.js
+++ b/src/components/structures/CompatibilityPage.js
@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2019 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.
@ -20,7 +21,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';

-module.exports = createReactClass({
+export default createReactClass({
    displayName: 'CompatibilityPage',
    propTypes: {
        onAccept: PropTypes.func,
--- a/src/components/structures/ContextMenu.js
+++ b/src/components/structures/ContextMenu.js
@ -21,7 +21,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {Key} from "../../Keyboard";
-import sdk from "../../index";
+import * as sdk from "../../index";
 import AccessibleButton from "../views/elements/AccessibleButton";

 // Shamelessly ripped off Modal.js.  There's probably a better way
--- a/src/components/structures/CustomRoomTagPanel.js
+++ b/src/components/structures/CustomRoomTagPanel.js
@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import CustomRoomTagStore from '../../stores/CustomRoomTagStore';
 import AutoHideScrollbar from './AutoHideScrollbar';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
 import classNames from 'classnames';
 import * as FormattingUtils from '../../utils/FormattingUtils';
--- a/src/components/structures/EmbeddedPage.js
+++ b/src/components/structures/EmbeddedPage.js
@ -23,9 +23,9 @@ import PropTypes from 'prop-types';
 import request from 'browser-request';
 import { _t } from '../../languageHandler';
 import sanitizeHtml from 'sanitize-html';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import classnames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";

--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 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.
@ -19,8 +20,8 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';

 import Matrix from 'matrix-js-sdk';
-import sdk from '../../index';
-import MatrixClientPeg from '../../MatrixClientPeg';
+import * as sdk from '../../index';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import { _t } from '../../languageHandler';

 /*
@ -126,4 +127,4 @@ const FilePanel = createReactClass({
    },
 });

-module.exports = FilePanel;
+export default FilePanel;
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@ -19,8 +19,8 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from '../../MatrixClientPeg';
-import sdk from '../../index';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
 import { getHostingLink } from '../../utils/HostingLink';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
--- a/src/components/structures/InteractiveAuth.js
+++ b/src/components/structures/InteractiveAuth.js
@ -15,16 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import Matrix from 'matrix-js-sdk';
-const InteractiveAuth = Matrix.InteractiveAuth;
-
+import {InteractiveAuth} from "matrix-js-sdk";
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';

 import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';

-import sdk from '../../index';
+import * as sdk from '../../index';

 export default createReactClass({
    displayName: 'InteractiveAuth',
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@ -20,9 +20,9 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Key } from '../../Keyboard';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
-import VectorConferenceHandler from '../../VectorConferenceHandler';
+import * as VectorConferenceHandler from '../../VectorConferenceHandler';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import Analytics from "../../Analytics";
@ -301,4 +301,4 @@ const LeftPanel = createReactClass({
    },
 });

-module.exports = LeftPanel;
+export default LeftPanel;
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@ -26,10 +26,10 @@ import { Key, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
 import sessionStore from '../../stores/SessionStore';
-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore from "../../stores/RoomListStore";
 import { getHomePageUrl } from '../../utils/pages';
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017-2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 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.
@ -20,7 +20,8 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import Matrix from "matrix-js-sdk";
+import * as Matrix from "matrix-js-sdk";
+import { isCryptoAvailable } from 'matrix-js-sdk/src/crypto';

 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';
@ -29,7 +30,7 @@ import 'what-input';

 import Analytics from "../../Analytics";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
-import MatrixClientPeg from "../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../MatrixClientPeg";
 import PlatformPeg from "../../PlatformPeg";
 import SdkConfig from "../../SdkConfig";
 import * as RoomListSorter from "../../RoomListSorter";
@ -38,7 +39,7 @@ import Notifier from '../../Notifier';

 import Modal from "../../Modal";
 import Tinter from "../../Tinter";
-import sdk from '../../index';
+import * as sdk from '../../index';
 import { showStartChatInviteDialog, showRoomInviteDialog } from '../../RoomInvite';
 import * as Rooms from '../../Rooms';
 import linkifyMatrix from "../../linkify-matrix";
@ -63,9 +64,10 @@ import { ThemeWatcher } from "../../theme";
 import { storeRoomAliasInCache } from '../../RoomAliasCache';
 import { defer } from "../../utils/promise";
 import KeyVerificationStateObserver from '../../utils/KeyVerificationStateObserver';
+import ToastStore from "../../stores/ToastStore";

 /** constants for MatrixChat.state.view */
-const VIEWS = {
+export const VIEWS = {
    // a special initial state which is only used at startup, while we are
    // trying to re-animate a matrix client or register as a guest.
    LOADING: 0,
@ -79,18 +81,14 @@ const VIEWS = {
    // we are showing the registration view
    REGISTER: 3,

-    // completeing the registration flow
+    // completing the registration flow
    POST_REGISTRATION: 4,

    // showing the 'forgot password' view
    FORGOT_PASSWORD: 5,

-    // we have valid matrix credentials (either via an explicit login, via the
-    // initial re-animation/guest registration, or via a registration), and are
-    // now setting up a matrixclient to talk to it. This isn't an instant
-    // process because we need to clear out indexeddb. While it is going on we
-    // show a big spinner.
-    LOGGING_IN: 6,
+    // showing flow to trust this new device with cross-signing
+    COMPLETE_SECURITY: 6,

    // we are logged in with an active matrix client.
    LOGGED_IN: 7,
@ -656,16 +654,12 @@ export default createReactClass({
                });
                break;
            }
-            case 'on_logging_in':
-                // We are now logging in, so set the state to reflect that
-                // NB. This does not touch 'ready' since if our dispatches
-                // are delayed, the sync could already have completed
-                this.setStateForNewView({
-                    view: VIEWS.LOGGING_IN,
-                });
-                break;
            case 'on_logged_in':
-                if (!Lifecycle.isSoftLogout()) {
+                if (
+                    !Lifecycle.isSoftLogout() &&
+                    this.state.view !== VIEWS.LOGIN &&
+                    this.state.view !== VIEWS.COMPLETE_SECURITY
+                ) {
                    this._onLoggedIn();
                }
                break;
@ -1169,7 +1163,7 @@ export default createReactClass({
            if (this.props.config.welcomeUserId && getCurrentLanguage().startsWith("en")) {
                const welcomeUserRoom = await this._startWelcomeUserChat();
                if (welcomeUserRoom === null) {
-                    // We didn't rediret to the welcome user room, so show
+                    // We didn't redirect to the welcome user room, so show
                    // the homepage.
                    dis.dispatch({action: 'view_home_page'});
                }
@ -1465,15 +1459,12 @@ export default createReactClass({
                }

                if (!requestObserver || requestObserver.pending) {
-                    dis.dispatch({
-                        action: "show_toast",
-                        toast: {
-                            key: request.event.getId(),
+                    ToastStore.sharedInstance().addOrReplaceToast({
+                        key: 'verifreq_' + request.event.getId(),
                        title: _t("Verification Request"),
                        icon: "verification",
                        props: {request, requestObserver},
                        component: sdk.getComponent("toasts.VerificationRequestToast"),
-                        },
                    });
                }
            });
@ -1573,6 +1564,10 @@ export default createReactClass({
            dis.dispatch({
                action: 'view_my_groups',
            });
+        } else if (screen === 'complete_security') {
+            dis.dispatch({
+                action: 'start_complete_security',
+            });
        } else if (screen == 'post_registration') {
            dis.dispatch({
                action: 'start_post_registration',
@ -1822,21 +1817,69 @@ export default createReactClass({
        this._loggedInView = ref;
    },

+    async onUserCompletedLoginFlow(credentials) {
+        // Wait for the client to be logged in (but not started)
+        // which is enough to ask the server about account data.
+        const loggedIn = new Promise(resolve => {
+            const actionHandlerRef = dis.register(payload => {
+                if (payload.action !== "on_logged_in") {
+                    return;
+                }
+                dis.unregister(actionHandlerRef);
+                resolve();
+            });
+        });
+
+        // Create and start the client in the background
+        Lifecycle.setLoggedIn(credentials);
+        await loggedIn;
+
+        const cli = MatrixClientPeg.get();
+        // We're checking `isCryptoAvailable` here instead of `isCryptoEnabled`
+        // because the client hasn't been started yet.
+        if (!isCryptoAvailable()) {
+            this._onLoggedIn();
+        }
+
+        // Test for the master cross-signing key in SSSS as a quick proxy for
+        // whether cross-signing has been set up on the account.
+        let masterKeyInStorage = false;
+        try {
+            masterKeyInStorage = !!await cli.getAccountDataFromServer("m.cross_signing.master");
+        } catch (e) {
+            if (e.errcode !== "M_NOT_FOUND") throw e;
+        }
+
+        if (masterKeyInStorage) {
+            this.setStateForNewView({ view: VIEWS.COMPLETE_SECURITY });
+        } else {
+            this._onLoggedIn();
+        }
+    },
+
+    onCompleteSecurityFinished() {
+        this._onLoggedIn();
+    },
+
    render: function() {
        // console.log(`Rendering MatrixChat with view ${this.state.view}`);

        let view;

-        if (
-            this.state.view === VIEWS.LOADING ||
-            this.state.view === VIEWS.LOGGING_IN
-        ) {
+        if (this.state.view === VIEWS.LOADING) {
            const Spinner = sdk.getComponent('elements.Spinner');
            view = (
                <div className="mx_MatrixChat_splash">
                    <Spinner />
                </div>
            );
+        } else if (this.state.view === VIEWS.COMPLETE_SECURITY) {
+            const CompleteSecurity = sdk.getComponent('structures.auth.CompleteSecurity');
+            view = (
+                <CompleteSecurity
+                    onFinished={this.onCompleteSecurityFinished}
+                />
+            );
        } else if (this.state.view === VIEWS.POST_REGISTRATION) {
            // needs to be before normal PageTypes as you are logged in technically
            const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
@ -1921,7 +1964,7 @@ export default createReactClass({
            const Login = sdk.getComponent('structures.auth.Login');
            view = (
                <Login
-                    onLoggedIn={Lifecycle.setLoggedIn}
+                    onLoggedIn={this.onUserCompletedLoginFlow}
                    onRegisterClick={this.onRegisterClick}
                    fallbackHsUrl={this.getFallbackHsUrl()}
                    defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@ -22,11 +22,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
-import sdk from '../../index';
+import * as sdk from '../../index';

-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
+import {haveTileForEvent} from "../views/rooms/EventTile";

 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@ -318,8 +319,7 @@ export default class MessagePanel extends React.Component {
            return true;
        }

-        const EventTile = sdk.getComponent('rooms.EventTile');
-        if (!EventTile.haveTileForEvent(mxEv)) {
+        if (!haveTileForEvent(mxEv)) {
            return false; // no tile = no show
        }

--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@ -17,7 +17,7 @@ limitations under the License.

 import React from 'react';
 import createReactClass from 'create-react-class';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import { _t } from '../../languageHandler';
 import dis from '../../dispatcher';
 import AccessibleButton from '../views/elements/AccessibleButton';
--- a/src/components/structures/NotificationPanel.js
+++ b/src/components/structures/NotificationPanel.js
@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2019 New Vector Ltd
+Copyright 2019 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.
@ -18,8 +19,8 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../languageHandler';
-const sdk = require('../../index');
-const MatrixClientPeg = require("../../MatrixClientPeg");
+import {MatrixClientPeg} from "../../MatrixClientPeg";
+import * as sdk from "../../index";

 /*
 * Component which shows the global notification list using a TimelinePanel
@ -60,4 +61,4 @@ const NotificationPanel = createReactClass({
    },
 });

-module.exports = NotificationPanel;
+export default NotificationPanel;
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@ -21,7 +21,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
 import RateLimitedFunc from '../../ratelimitedfunc';
 import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@ -18,19 +18,16 @@ limitations under the License.

 import React from 'react';
 import createReactClass from 'create-react-class';
-
-const MatrixClientPeg = require('../../MatrixClientPeg');
-const ContentRepo = require("matrix-js-sdk").ContentRepo;
-const Modal = require('../../Modal');
-const sdk = require('../../index');
-const dis = require('../../dispatcher');
-
+import {MatrixClientPeg} from "../../MatrixClientPeg";
+import * as sdk from "../../index";
+import dis from "../../dispatcher";
+import Modal from "../../Modal";
 import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';
 import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
 import Analytics from '../../Analytics';
-import MatrixClientContext from "../../contexts/MatrixClientContext";
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";

 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 160;
@ -39,7 +36,7 @@ function track(action) {
    Analytics.trackEvent('RoomDirectory', action);
 }

-module.exports = createReactClass({
+export default createReactClass({
    displayName: 'RoomDirectory',

    propTypes: {
@ -457,7 +454,7 @@ module.exports = createReactClass({
            topic = `${topic.substring(0, MAX_TOPIC_LENGTH)}...`;
        }
        topic = linkifyAndSanitizeHtml(topic);
-        const avatarUrl = ContentRepo.getHttpUriForMxc(
+        const avatarUrl = getHttpUriForMxc(
                                MatrixClientPeg.get().getHomeserverUrl(),
                                room.avatar_url, 32, 32, "crop",
                            );
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2019 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.
@ -20,8 +21,8 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import Matrix from 'matrix-js-sdk';
 import { _t, _td } from '../../languageHandler';
-import sdk from '../../index';
-import MatrixClientPeg from '../../MatrixClientPeg';
+import * as sdk from '../../index';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import Resend from '../../Resend';
 import * as cryptodevices from '../../cryptodevices';
 import dis from '../../dispatcher';
@ -38,7 +39,7 @@ function getUnsentMessages(room) {
    });
 }

-module.exports = createReactClass({
+export default createReactClass({
    displayName: 'RoomStatusBar',

    propTypes: {
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@ -19,9 +19,9 @@ limitations under the License.

 import React, {createRef} from 'react';
 import classNames from 'classnames';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
-import Unread from '../../Unread';
+import * as Unread from '../../Unread';
 import * as RoomNotifs from '../../RoomNotifs';
 import * as FormattingUtils from '../../utils/FormattingUtils';
 import IndicatorScrollbar from './IndicatorScrollbar';
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@ -30,15 +30,15 @@ import classNames from 'classnames';
 import { _t } from '../../languageHandler';
 import {RoomPermalinkCreator} from '../../utils/permalinks/Permalinks';

-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import ContentMessages from '../../ContentMessages';
 import Modal from '../../Modal';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import CallHandler from '../../CallHandler';
 import dis from '../../dispatcher';
 import Tinter from '../../Tinter';
 import rate_limited_func from '../../ratelimitedfunc';
-import ObjectUtils from '../../ObjectUtils';
+import * as ObjectUtils from '../../ObjectUtils';
 import * as Rooms from '../../Rooms';
 import eventSearch from '../../Searching';

@ -53,6 +53,7 @@ import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
 import WidgetUtils from '../../utils/WidgetUtils';
 import AccessibleButton from "../views/elements/AccessibleButton";
 import RightPanelStore from "../../stores/RightPanelStore";
+import {haveTileForEvent} from "../views/rooms/EventTile";
 import RoomContext from "../../contexts/RoomContext";

 const DEBUG = false;
@ -65,7 +66,7 @@ if (DEBUG) {
    debuglog = console.log.bind(console);
 }

-module.exports = createReactClass({
+export default createReactClass({
    displayName: 'RoomView',
    propTypes: {
        ConferenceHandler: PropTypes.any,
@ -885,7 +886,7 @@ module.exports = createReactClass({

    // rate limited because a power level change will emit an event for every
    // member in the room.
-    _updateRoomMembers: new rate_limited_func(function(dueToMember) {
+    _updateRoomMembers: rate_limited_func(function(dueToMember) {
        // a member state changed in this room
        // refresh the conf call notification state
        this._updateConfCallNotification();
@ -1243,7 +1244,7 @@ module.exports = createReactClass({
            const roomId = mxEv.getRoomId();
            const room = cli.getRoom(roomId);

-            if (!EventTile.haveTileForEvent(mxEv)) {
+            if (!haveTileForEvent(mxEv)) {
                // XXX: can this ever happen? It will make the result count
                // not match the displayed count.
                continue;
@ -1991,5 +1992,3 @@ module.exports = createReactClass({
        );
    },
 });
-
-module.exports.RoomContext = RoomContext;
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@ -84,7 +84,7 @@ if (DEBUG_SCROLL) {
 * offset as normal.
 */

-module.exports = createReactClass({
+export default createReactClass({
    displayName: 'ScrollPanel',

    propTypes: {
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@ -24,7 +24,7 @@ import { throttle } from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import classNames from 'classnames';

-module.exports = createReactClass({
+export default createReactClass({
    displayName: 'SearchBox',

    propTypes: {
--- a/src/components/structures/TabbedView.js
+++ b/src/components/structures/TabbedView.js
@ -19,7 +19,7 @@ limitations under the License.
 import * as React from "react";
 import {_t} from '../../languageHandler';
 import PropTypes from "prop-types";
-import sdk from "../../index";
+import * as sdk from "../../index";

 /**
 * Represents a tab for the TabbedView.
@ -38,7 +38,7 @@ export class Tab {
    }
 }

-export class TabbedView extends React.Component {
+export default class TabbedView extends React.Component {
    static propTypes = {
        // The tabs to show
        tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
--- a/Show More
+++ b/Show More