[WIP] Upgrade to babel@7 and support TypeScript

.babelrc

@@ -1,21 +1,23 @@
 {
     "presets": [
-        "react",
-        "es2015",
-        "es2016"
+        "@babel/preset-react",
+        ["@babel/preset-env", {
+            "targets": {"browsers":  ["last 2 versions"]},
+            "modules": "commonjs"
+        }],
+        "@babel/preset-typescript"
     ],
     "plugins": [
-        [
-            "transform-builtin-extend",
-            {
-                "globals": ["Error"]
-            }
-        ],
-        "transform-class-properties",
-        "transform-object-rest-spread",
-        "transform-async-to-bluebird",
-        "transform-runtime",
-        "add-module-exports",
-        "syntax-dynamic-import"
+        "babel-plugin-add-module-exports",
+        "@babel/plugin-proposal-numeric-separator",
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-transform-flow-comments",
+        ["@babel/plugin-transform-async-to-generator", {
+            "module": "bluebird",
+            "method": "coroutine"
+        }],
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-syntax-dynamic-import"
     ]
 }

karma.conf.js

@@ -41,6 +41,9 @@ if (!fileExists(gsCss)) {
     gsCss = 'node_modules/react-gemini-scrollbar/'+gsCss;
 }
 
+const preprocessors = {};
+preprocessors[testFile] = ['webpack', 'sourcemap'];
+
 
 module.exports = function (config) {
     config.set({
@@ -87,9 +90,7 @@ module.exports = function (config) {
         // preprocess matching files before serving them to the browser
         // available preprocessors:
         // https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            'test/**/*.js': ['webpack', 'sourcemap']
-        },
+        preprocessors: preprocessors,
 
         // test results reporter to use
         // possible values: 'dots', 'progress'
@@ -160,7 +161,7 @@ module.exports = function (config) {
             module: {
                 rules: [
                     {
-                        test: /\.js$/, loader: "babel-loader",
+                        test: /\.(js|ts)$/, loader: "babel-loader",
                         include: [path.resolve('./src'),
                                   path.resolve('./test'),
                                  ]
@@ -192,6 +193,7 @@ module.exports = function (config) {
                 ],
             },
             resolve: {
+                extensions: ['.js', '.ts', '.json'],
                 alias: {
                     // alias any requires to the react module to the one in our
                     // path, otherwise we tend to get the react source included

package.json

@@ -42,11 +42,12 @@
     "prunei18n": "matrix-prune-i18n",
     "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
     "build": "yarn reskindex && yarn start:init",
-    "build:watch": "babel src -w --skip-initial-build -d lib --source-maps --copy-files",
+    "build:ts": "tsc",
+    "build:watch": "babel src -w --skip-initial-build -d lib --verbose --source-maps --copy-files --extensions \".ts,.js\"",
     "emoji-data-strip": "node scripts/emoji-data-strip.js",
     "start": "yarn start:init && yarn start:all",
     "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn build:watch\" \"yarn reskindex:watch\"",
-    "start:init": "babel src -d lib --source-maps --copy-files",
+    "start:init": "babel src -d lib --verbose --source-maps --copy-files --extensions \".ts,.js\"",
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
     "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
@@ -57,7 +58,6 @@
     "test-multi": "karma start"
   },
   "dependencies": {
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-runtime": "^6.26.0",
     "bluebird": "^3.5.0",
     "blueimp-canvas-to-blob": "^3.5.0",
@@ -111,21 +111,22 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-flow-comments": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-async-to-bluebird": "^1.1.1",
-    "babel-plugin-transform-builtin-extend": "^1.1.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-add-module-exports": "^1.0.2",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
-    "babel-preset-es2017": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
     "chokidar": "^2.1.2",
     "concurrently": "^4.0.1",
     "eslint": "^5.12.0",
@@ -138,15 +139,15 @@
     "file-loader": "^3.0.1",
     "flow-parser": "^0.57.3",
     "jest-mock": "^23.2.0",
-    "karma": "^4.0.1",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-cli": "^1.0.1",
-    "karma-logcapture-reporter": "0.0.1",
+    "karma": "^4.2.0",
+    "karma-chrome-launcher": "^3.0.0",
+    "karma-cli": "^2.0.0",
+    "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",
+    "karma-spec-reporter": "^0.0.32",
+    "karma-summary-reporter": "^1.6.0",
+    "karma-webpack": "^4.0.2",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
     "mocha": "^5.0.5",
@@ -158,6 +159,7 @@
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-scss": "^3.9.0",
+    "typescript": "^3.5.3",
     "walk": "^2.3.9",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.1"

src/ScalarAuthClient.js

@@ -21,10 +21,10 @@ import SettingsStore from "./settings/SettingsStore";
 import { Service, startTermsFlow, TermsNotSignedError } from './Terms';
 const request = require('browser-request');
 
-const SdkConfig = require('./SdkConfig');
 const MatrixClientPeg = require('./MatrixClientPeg');
 
 import * 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/SdkConfig.js → 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 {
+    private static instance: ConfigOptions;
+
+    private static setInstance(i: ConfigOptions) {
+        SdkConfig.instance = i;
+
+        // For debugging purposes
+        (<any>window).mxReactSdkConfig = i;
+    }
+
     static get() {
-        return global.mxReactSdkConfig || {};
+        return SdkConfig.instance || {};
     }
 
-    static put(cfg) {
+    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;

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "noEmit": false,
+    "strict": false,
+    "isolatedModules": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "src/*.ts",
+    "src/**/*.ts"
+  ]
+}