Merge pull request #3839 from matrix-org/travis/sourcemaps

Fix sourcemaps by refactoring the build system

.babelrc

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

.buildkite/pipeline.yaml

@@ -1,13 +1,60 @@
 steps:
-  - label: ":eslint: Lint"
+  - label: ":eslint: JS Lint"
     command:
       - "echo '--- Install js-sdk'"
       - "./scripts/ci/install-deps.sh"
-      - "yarn lintwithexclusions"
+      - "yarn lint:js"
-      - "yarn stylelint"
     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:

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     parserOptions: {
         ecmaFeatures: {
             jsx: true,
+            legacyDecorators: true,
         }
     },
     rules: {

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

__mocks__/browser-request.js

@@ -0,0 +1,16 @@
+const en = require("../src/i18n/strings/en_EN");
+
+module.exports = jest.fn((opts, cb) => {
+    if (opts.url.endsWith("languages.json")) {
+        cb(undefined, {status: 200}, JSON.stringify({
+            "en": {
+                "fileName": "en_EN.json",
+                "label": "English",
+            },
+        }));
+    } else if (opts.url.endsWith("en_EN.json")) {
+        cb(undefined, {status: 200}, JSON.stringify(en));
+    } else {
+        cb(undefined, {status: 404}, "");
+    }
+});

__mocks__/imageMock.js

@@ -0,0 +1 @@
+module.exports = "image-file-stub";

__mocks__/languages.json

@@ -0,0 +1,10 @@
+{
+  "en": {
+    "fileName": "en_EN.json",
+    "label": "English"
+  },
+  "en-us": {
+    "fileName": "en_US.json",
+    "label": "English (US)"
+  }
+}

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"
+    ]
+};

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.

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

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,
-    });
-};

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",
+    "lib",
-    ".eslintrc.js",
+    "res",
+    "src",
+    "scripts",
+    "git-revision.txt",
+    "docs",
+    "header",
     "CHANGELOG.md",
     "CONTRIBUTING.rst",
     "LICENSE",
     "README.md",
-    "code_style.md",
+    "package.json"
-    "git-revision.txt",
-    "header",
-    "jenkins.sh",
-    "karma.conf.js",
-    "lib",
-    "package.json",
-    "release.sh",
-    "scripts",
-    "src",
-    "test",
-    "res"
   ],
   "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",
+    "reskindex": "node scripts/reskindex.js -h header",
-    "build:watch": "babel src -w --skip-initial-build -d lib --source-maps --copy-files",
+    "reskindex:watch": "node scripts/reskindex.js -h header -w",
-    "start": "yarn start:init && yarn start:all",
+    "rethemendex": "res/css/rethemendex.sh",
-    "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'",
     "clean": "rimraf lib",
-    "prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt",
+    "build": "yarn clean && git rev-parse HEAD > git-revision.txt && yarn build:compile && yarn build:types",
-    "test": "karma start --single-run=true --browsers VectorChromeHeadless",
+    "build:compile": "yarn reskindex && babel -d lib --verbose --extensions \".ts,.js\" src",
-    "test-multi": "karma start",
+    "build:types": "tsc --emitDeclarationOnly",
-    "e2etests": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
+    "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",
@@ -112,20 +106,24 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
+    "@babel/cli": "^7.7.5",
-    "babel-core": "^6.26.3",
+    "@babel/core": "^7.7.5",
-    "babel-eslint": "^10.0.1",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "babel-loader": "^7.1.5",
+    "@babel/plugin-proposal-decorators": "^7.7.4",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
-    "babel-plugin-transform-builtin-extend": "^1.1.2",
+    "@babel/plugin-proposal-numeric-separator": "^7.7.4",
-    "babel-plugin-transform-class-properties": "^6.24.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@babel/plugin-transform-flow-comments": "^7.7.4",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "@babel/plugin-transform-runtime": "^7.7.6",
-    "babel-polyfill": "^6.26.0",
+    "@babel/preset-env": "^7.7.6",
-    "babel-preset-es2015": "^6.24.1",
+    "@babel/preset-flow": "^7.7.4",
-    "babel-preset-es2016": "^6.24.1",
+    "@babel/preset-react": "^7.7.4",
-    "babel-preset-es2017": "^6.24.1",
+    "@babel/preset-typescript": "^7.7.4",
-    "babel-preset-react": "^6.24.1",
+    "@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 +136,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",
+    "jest": "^24.9.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",
     "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).+$"
+    ]
   }
 }

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;
 }

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] {

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 {

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 {

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 {

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;

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

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', '');

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 {MatrixClientPeg} from './MatrixClientPeg';
-import sdk from './index';
+import * as sdk from './index';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 import IdentityAuthClient from './IdentityAuthClient';

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;

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 = {
+export function avatarUrlForMember(member, width, height, resizeMethod) {
-    avatarUrlForMember: function(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) {
+export function avatarUrlForUser(user, width, height, resizeMethod) {
-        const url = ContentRepo.getHttpUriForMxc(
+    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;
-    },
+}
-};

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;

src/ContentMessages.js

@@ -19,8 +19,8 @@ limitations under the License.
 
 import extend from './extend';
 import dis from './dispatcher';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
-import sdk from './index';
+import * as sdk from './index';
 import { _t } from './languageHandler';
 import Modal from './Modal';
 import RoomViewStore from './stores/RoomViewStore';

src/CrossSigningManager.js

@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import Modal from './Modal';
-import sdk from './index';
+import * as sdk from './index';
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
-import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+import { deriveKey } from 'matrix-js-sdk/src/crypto/key_passphrase';
-import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto/recoverykey';
+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

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 {
     }
 }
 
-
+export function newEntity(jsx, matchFn) {
-module.exports = {
-    newEntity: function(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);
     });
-    },
+}
-};

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";

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";
 

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';

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 {

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);
     }
-    },
+}
-};
 

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 {

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";

src/MatrixClientPeg.js

@@ -19,15 +19,15 @@ limitations under the License.
 
 import {MatrixClient, MemoryStore} from 'matrix-js-sdk';
 
-import utils from 'matrix-js-sdk/lib/utils';
+import * as utils from 'matrix-js-sdk/src/utils';
-import EventTimeline from 'matrix-js-sdk/lib/models/event-timeline';
+import {EventTimeline} from 'matrix-js-sdk/src/models/event-timeline';
-import EventTimelineSet from 'matrix-js-sdk/lib/models/event-timeline-set';
+import {EventTimelineSet} from 'matrix-js-sdk/src/models/event-timeline-set';
-import sdk from './index';
+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;
@@ -245,6 +245,7 @@ class MatrixClientPeg {
 }
 
 if (!global.mxMatrixClientPeg) {
-    global.mxMatrixClientPeg = new MatrixClientPeg();
+    global.mxMatrixClientPeg = new _MatrixClientPeg();
 }
-export default global.mxMatrixClientPeg;
+
+export const MatrixClientPeg = global.mxMatrixClientPeg;

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";

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;

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;
-};
+}

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;

src/PlatformPeg.js

@@ -47,4 +47,4 @@ class PlatformPeg {
 if (!global.mxPlatformPeg) {
     global.mxPlatformPeg = new PlatformPeg();
 }
-module.exports = global.mxPlatformPeg;
+export default global.mxPlatformPeg;

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();

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

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 = {
+export default class Resend {
-    resendUnsentEvents: function(room) {
+    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);
-    },
+    }
-};
+}

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';

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,
-};

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 {MatrixClientPeg} from './MatrixClientPeg';
-import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
+import {PushProcessor} from 'matrix-js-sdk/src/pushprocessor';
 
 export const ALL_MESSAGES_LOUD = 'all_messages_loud';
 export const ALL_MESSAGES = 'all_messages';

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,

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');
+import {MatrixClientPeg} from "./MatrixClientPeg";
-
+import request from "browser-request";
-const SdkConfig = require('./SdkConfig');
-const MatrixClientPeg = require('./MatrixClientPeg');
 
 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";

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;
-    },
+}
-};

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 {
+export default class SdkConfig {
-    static get() {
+    private static instance: ConfigOptions;
-        return global.mxReactSdkConfig || {};
+
+    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;

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;

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;
 

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';

src/Terms.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 import classNames from 'classnames';
 
-import MatrixClientPeg from './MatrixClientPeg';
+import {MatrixClientPeg} from './MatrixClientPeg';
-import sdk from './';
+import * as sdk from './';
 import Modal from './Modal';
 
 export class TermsNotSignedError extends Error {}

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 = {
+export function textForEvent(ev) {
-    textForEvent: function(ev) {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     if (handler) return handler(ev);
     return '';
-    },
+}
-};

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 haveTileForEvent(ev);
-        return EventTile.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;
-    },
+}
-};

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;
+// TODO: Document this.
-
+export const slot = 'conference';
-module.exports.slot = 'conference';

src/Velociraptor.js

@@ -1,7 +1,7 @@
-const React = require('react');
+import React from "react";
-const ReactDom = require('react-dom');
+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.

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)

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 = {
+export function usersTypingApartFromMeAndIgnored(room) {
-    usersTypingApartFromMeAndIgnored: function(room) {
+    return usersTyping(
-        return this.usersTyping(
         room, [MatrixClientPeg.get().credentials.userId].concat(MatrixClientPeg.get().getIgnoredUsers()),
     );
-    },
+}
 
-    usersTypingApartFromMe: function(room) {
+export function usersTypingApartFromMe(room) {
-        return this.usersTyping(
+    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});
     }
-    },
+}
-};

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";

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 = {};
 

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";
+import React from "react";
-
-const React = require("react");
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-const sdk = require('../../../index');
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const MatrixClientPeg = require("../../../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: {

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;

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) {

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';

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 {

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 * as sdk from "../../../../index";
-import MatrixClientPeg from '../../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import dis from "../../../../dispatcher";
 import { _t } from "../../../../languageHandler";
 import Modal from "../../../../Modal";

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";

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 * as sdk from '../../../../index';
-import MatrixClientPeg from '../../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import { scorePassword } from '../../../../utils/PasswordScorer';
 import FileSaver from 'file-saver';
 import { _t } from '../../../../languageHandler';

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

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 [];

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();

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();

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

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,

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

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';

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";
 

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 * as sdk from '../../index';
-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
 import { _t } from '../../languageHandler';
 
 /*
@@ -126,4 +127,4 @@ const FilePanel = createReactClass({
     },
 });
 
-module.exports = FilePanel;
+export default FilePanel;

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 {MatrixClientPeg} from '../../MatrixClientPeg';
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
 import { getHostingLink } from '../../utils/HostingLink';
 import { sanitizedHtmlNode } from '../../HtmlUtils';

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';
+import {InteractiveAuth} from "matrix-js-sdk";
-const InteractiveAuth = Matrix.InteractiveAuth;
-
 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',

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;

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';

src/components/structures/MatrixChat.js

@@ -20,7 +20,7 @@ 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";
 
 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';
@@ -29,7 +29,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 +38,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";
@@ -65,7 +65,7 @@ import { defer } from "../../utils/promise";
 import KeyVerificationStateObserver from '../../utils/KeyVerificationStateObserver';
 
 /** 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,

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 (!haveTileForEvent(mxEv)) {
-        if (!EventTile.haveTileForEvent(mxEv)) {
             return false; // no tile = no show
         }
 

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';

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');
+import {MatrixClientPeg} from "../../MatrixClientPeg";
-const MatrixClientPeg = require("../../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;

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';

src/components/structures/RoomDirectory.js

@@ -18,19 +18,16 @@ limitations under the License.
 
 import React from 'react';
 import createReactClass from 'create-react-class';
-
+import {MatrixClientPeg} from "../../MatrixClientPeg";
-const MatrixClientPeg = require('../../MatrixClientPeg');
+import * as sdk from "../../index";
-const ContentRepo = require("matrix-js-sdk").ContentRepo;
+import dis from "../../dispatcher";
-const Modal = require('../../Modal');
+import Modal from "../../Modal";
-const sdk = require('../../index');
-const dis = require('../../dispatcher');
-
 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",
                             );

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 * as sdk from '../../index';
-import MatrixClientPeg from '../../MatrixClientPeg';
+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: {

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';

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;

src/components/structures/ScrollPanel.js

@@ -84,7 +84,7 @@ if (DEBUG_SCROLL) {
  * offset as normal.
  */
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'ScrollPanel',
 
     propTypes: {

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: {

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,

src/components/structures/TagPanel.js

@@ -20,7 +20,7 @@ import TagOrderStore from '../../stores/TagOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
 
-import sdk from '../../index';
+import * as sdk from '../../index';
 import dis from '../../dispatcher';
 import { _t } from '../../languageHandler';
 

src/components/structures/TagPanelButtons.js

@@ -0,0 +1,59 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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.
+*/
+
+import React from 'react';
+import createReactClass from 'create-react-class';
+import * as sdk from '../../index';
+import dis from '../../dispatcher';
+import Modal from '../../Modal';
+import { _t } from '../../languageHandler';
+
+const TagPanelButtons = createReactClass({
+    displayName: 'TagPanelButtons',
+
+
+    componentDidMount: function() {
+        this._dispatcherRef = dis.register(this._onAction);
+    },
+
+    componentWillUnmount() {
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+            this._dispatcherRef = null;
+        }
+    },
+
+    _onAction(payload) {
+        if (payload.action === "show_redesign_feedback_dialog") {
+            const RedesignFeedbackDialog =
+                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+            Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+        }
+    },
+
+    render() {
+        const GroupsButton = sdk.getComponent('elements.GroupsButton');
+        const ActionButton = sdk.getComponent("elements.ActionButton");
+
+        return (<div className="mx_TagPanelButtons">
+            <GroupsButton />
+            <ActionButton
+                className="mx_TagPanelButtons_report" action="show_redesign_feedback_dialog"
+                label={_t("Report bugs & give feedback")} tooltip={true} />
+        </div>);
+    },
+});
+export default TagPanelButtons;

src/components/structures/TimelinePanel.js

@@ -18,26 +18,24 @@ limitations under the License.
 */
 
 import SettingsStore from "../../settings/SettingsStore";
-
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
-
+import {EventTimeline} from "matrix-js-sdk";
-const Matrix = require("matrix-js-sdk");
+import * as Matrix from "matrix-js-sdk";
-const EventTimeline = Matrix.EventTimeline;
-
-const sdk = require('../../index');
 import { _t } from '../../languageHandler';
-const MatrixClientPeg = require("../../MatrixClientPeg");
+import {MatrixClientPeg} from "../../MatrixClientPeg";
-const dis = require("../../dispatcher");
+import * as ObjectUtils from "../../ObjectUtils";
-const ObjectUtils = require('../../ObjectUtils');
+import UserActivity from "../../UserActivity";
-const Modal = require("../../Modal");
+import Modal from "../../Modal";
-const UserActivity = require("../../UserActivity");
+import dis from "../../dispatcher";
+import * as sdk from "../../index";
 import { Key } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';
 import EditorStateTransfer from '../../utils/EditorStateTransfer';
+import {haveTileForEvent} from "../views/rooms/EventTile";
 
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
@@ -1138,8 +1136,6 @@ const TimelinePanel = createReactClass({
         const messagePanel = this._messagePanel.current;
         if (messagePanel === undefined) return null;
 
-        const EventTile = sdk.getComponent('rooms.EventTile');
-
         const wrapperRect = ReactDOM.findDOMNode(messagePanel).getBoundingClientRect();
         const myUserId = MatrixClientPeg.get().credentials.userId;
 
@@ -1181,7 +1177,7 @@ const TimelinePanel = createReactClass({
 
             const shouldIgnore = !!ev.status || // local echo
                 (ignoreOwn && ev.sender && ev.sender.userId == myUserId);   // own message
-            const isWithoutTile = !EventTile.haveTileForEvent(ev) || shouldHideEvent(ev);
+            const isWithoutTile = !haveTileForEvent(ev) || shouldHideEvent(ev);
 
             if (isWithoutTile || !node) {
                 // don't start counting if the event should be ignored,
@@ -1346,4 +1342,4 @@ const TimelinePanel = createReactClass({
     },
 });
 
-module.exports = TimelinePanel;
+export default TimelinePanel;

src/components/structures/TopLeftMenuButton.js

@@ -19,8 +19,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {TopLeftMenu} from '../views/context_menus/TopLeftMenu';
 import BaseAvatar from '../views/avatars/BaseAvatar';
-import MatrixClientPeg from '../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../MatrixClientPeg';
-import Avatar from '../../Avatar';
+import * as Avatar from '../../Avatar';
 import { _t } from '../../languageHandler';
 import dis from "../../dispatcher";
 import {ContextMenu, ContextMenuButton} from "./ContextMenu";