Upgrade to babel@7 and support TypeScript

See https://github.com/matrix-org/matrix-react-sdk/pull/3292

Like react-sdk#3292, this fixes the couple source files which mix imports and module exports (they can't be mixed anymore).

.babelrc

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

package.json

@@ -33,7 +33,7 @@
     "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
     "build:res": "node scripts/copy-res.js",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:compile": "yarn reskindex && babel --source-maps -d lib src",
+    "build:compile": "yarn reskindex && babel --source-maps -d lib src --extensions \".ts,.js\"",
     "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
     "build:bundle:dev": "webpack --progress --bail --mode development",
     "build:electron": "yarn clean && yarn build && yarn install:electron && build -wml --ia32 --x64",
@@ -86,22 +86,25 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
+    "@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-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
     "autoprefixer": "^6.6.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
     "babel-eslint": "^8.1.1",
-    "babel-loader": "^7.1.5",
+    "babel-loader": "^8.0.6",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "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-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
-    "babel-preset-es2017": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "chokidar": "^2.0.4",
     "concurrently": "^4.0.1",
@@ -148,6 +151,7 @@
     "react-addons-test-utils": "^15.6.0",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.2.4",
+    "typescript": "^3.5.3",
     "webpack": "^4.23.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.11"

src/components/views/auth/VectorAuthFooter.js

@@ -22,7 +22,7 @@ import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
 
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'VectorAuthFooter',
     statics: {
         replaces: 'AuthFooter',

src/components/views/auth/VectorCustomServerDialog.js

@@ -22,7 +22,7 @@ import { _t } from 'matrix-react-sdk/lib/languageHandler';
  * This is identical to `CustomServerDialog` except for replacing "this app"
  * with "Riot".
  */
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'VectorCustomServerDialog',
     statics: {
         replaces: 'CustomServerDialog',

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