v1.7.21

CHANGELOG.md

@@ -1,3 +1,29 @@
+Changes in [1.7.21](https://github.com/vector-im/element-web/releases/tag/v1.7.21) (2021-02-16)
+===============================================================================================
+[Full Changelog](https://github.com/vector-im/element-web/compare/v1.7.21-rc.1...v1.7.21)
+
+ * Upgrade to React SDK 3.14.0 and JS SDK 9.7.0
+
+Changes in [1.7.21-rc.1](https://github.com/vector-im/element-web/releases/tag/v1.7.21-rc.1) (2021-02-10)
+=========================================================================================================
+[Full Changelog](https://github.com/vector-im/element-web/compare/v1.7.20...v1.7.21-rc.1)
+
+ * Upgrade to React SDK 3.14.0-rc.1 and JS SDK 9.7.0-rc.1
+ * Translations update from Weblate
+   [\#16427](https://github.com/vector-im/element-web/pull/16427)
+ * Add RegExp dotAll feature test
+   [\#16408](https://github.com/vector-im/element-web/pull/16408)
+ * Fix Electron type merging
+   [\#16405](https://github.com/vector-im/element-web/pull/16405)
+ * README: remove Jenkins reference
+   [\#16381](https://github.com/vector-im/element-web/pull/16381)
+ * Enable PostCSS Calc in webpack builds
+   [\#16307](https://github.com/vector-im/element-web/pull/16307)
+ * Add configuration security best practices to the README.
+   [\#16367](https://github.com/vector-im/element-web/pull/16367)
+ * Upgrade matrix-widget-api
+   [\#16347](https://github.com/vector-im/element-web/pull/16347)
+
 Changes in [1.7.20](https://github.com/vector-im/element-web/releases/tag/v1.7.20) (2021-02-04)
 ===============================================================================================
 [Full Changelog](https://github.com/vector-im/element-web/compare/v1.7.19...v1.7.20)

element.io/develop/config.json

@@ -18,6 +18,10 @@
         "siteId": 1,
         "policyUrl": "https://element.io/cookie-policy"
     },
+    "countly": {
+        "url": "https://try.count.ly",
+        "appKey": "8abf1ee15646bc884556b82e5053857904264b66"
+    },
     "roomDirectory": {
         "servers": [
             "matrix.org",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-web",
-  "version": "1.7.20",
+  "version": "1.7.21",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "repository": {
@@ -58,15 +58,16 @@
     "highlight.js": "^10.5.0",
     "jsrsasign": "^10.1.5",
     "katex": "^0.12.0",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#develop",
+    "matrix-js-sdk": "9.7.0",
+    "matrix-react-sdk": "3.14.0",
     "matrix-widget-api": "^0.1.0-beta.13",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "sanitize-html": "github:apostrophecms/sanitize-html#3c7f93f2058f696f5359e3e58d464161647226db",
-    "ua-parser-js": "^0.7.23"
+    "ua-parser-js": "^0.7.23",
+    "url": "^0.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

src/vector/app.tsx

@@ -23,6 +23,7 @@ import React from 'react';
 // this incidentally means we can forget our React imports in JSX files without penalty.
 window.React = React;
 
+import url from 'url';
 import * as sdk from 'matrix-react-sdk';
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 import {_td, newTranslatableError} from 'matrix-react-sdk/src/languageHandler';
@@ -119,12 +120,11 @@ function onTokenLoginCompleted() {
     // if we did a token login, we're now left with the token, hs and is
     // url as query params in the url; a little nasty but let's redirect to
     // clear them.
-    const url = new URL(window.location.href);
-
-    url.searchParams.delete("loginToken");
-
-    console.log(`Redirecting to ${url.href} to drop loginToken from queryparams`);
-    window.history.replaceState(null, "", url.href);
+    const parsedUrl = url.parse(window.location.href);
+    parsedUrl.search = "";
+    const formatted = url.format(parsedUrl);
+    console.log(`Redirecting to ${formatted} to drop loginToken from queryparams`);
+    window.history.replaceState(null, "", formatted);
 }
 
 export async function loadApp(fragParams: {}) {

src/vector/index.ts

@@ -28,7 +28,16 @@ require('katex/dist/katex.css');
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
 import {parseQsFromFragment} from "./url_utils";
 import './modernizr';
-import {settled} from "./promise_utils";
+
+async function settled(...promises: Array<Promise<any>>) {
+    for (const prom of promises) {
+        try {
+            await prom;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+}
 
 function checkBrowserFeatures() {
     if (!window.Modernizr) {

src/vector/platform/WebPlatform.ts

@@ -26,6 +26,7 @@ import {hideToast as hideUpdateToast, showToast as showUpdateToast} from "matrix
 import {Action} from "matrix-react-sdk/src/dispatcher/actions";
 import { CheckUpdatesPayload } from 'matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload';
 
+import url from 'url';
 import UAParser from 'ua-parser-js';
 
 const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
@@ -183,13 +184,17 @@ export default class WebPlatform extends VectorBasePlatform {
 
     getDefaultDeviceDisplayName(): string {
         // strip query-string and fragment from uri
-        const url = new URL(window.location.href);
+        const u = url.parse(window.location.href);
+        u.protocol = "";
+        u.search = "";
+        u.hash = "";
+        // Remove trailing slash if present
+        u.pathname = u.pathname.replace(/\/$/, "");
 
-        // `appName` in the format `develop.element.io/abc/xyz`
-        const appName = [
-            url.host,
-            url.pathname.replace(/\/$/, ""), // Remove trailing slash if present
-        ].join("");
+        let appName = u.format();
+        // Remove leading slashes if present
+        appName = appName.replace(/^\/\//, "");
+        // `appName` is now in the format `develop.element.io`.
 
         const ua = new UAParser();
         const browserName = ua.getBrowser().name || "unknown browser";

src/vector/promise_utils.ts

@@ -1,25 +0,0 @@
-/*
-Copyright 2021 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.
-*/
-
-export async function settled(...promises: Array<Promise<any>>) {
-    for (const prom of promises) {
-        try {
-            await prom;
-        } catch (e) {
-            console.error(e);
-        }
-    }
-}

src/vector/thin_widget/app.tsx

@@ -1,45 +0,0 @@
-/*
-Copyright 2021 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 AppTile from "matrix-react-sdk/src/components/views/elements/AppTile";
-import { IWidget } from "matrix-widget-api";
-import MatrixClientContext from "matrix-react-sdk/src/contexts/MatrixClientContext";
-import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
-
-// add React and ReactPerf to the global namespace, to make them easier to access via the console
-// this incidentally means we can forget our React imports in JSX files without penalty.
-window.React = React;
-
-export interface IStartOpts {
-    widgetId: string;
-    roomId?: string;
-}
-
-export async function loadApp(widget: IWidget) {
-    return (
-        <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
-            <div id="mx_ThinWrapper_container">
-                <AppTile
-                    app={widget}
-                    fullWidth={true}
-                    userId={MatrixClientPeg.get().getUserId()}
-                    userWidget={false}
-                />
-            </div>
-        </MatrixClientContext.Provider>
-    );
-}

src/vector/thin_widget/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Thin Widget</title>
-    <meta name="theme-color" content="#ffffff">
-</head>
-<body>
-<noscript>Sorry, this requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
-<section id="matrixchat" style="height: 100%; overflow: auto;" class="notranslate"></section>
-</body>
-</html>

src/vector/thin_widget/index.scss

@@ -1,58 +0,0 @@
-/*
-Copyright 2021 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.
-*/
-
-// TODO: Match the user's theme: https://github.com/vector-im/element-web/issues/12794
-
-@font-face {
-    font-family: 'Nunito';
-    font-style: normal;
-    font-weight: 400;
-    src: url('~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
-}
-
-$dark-fg: #edf3ff;
-$dark-bg: #363c43;
-$light-fg: #2e2f32;
-$light-bg: #fff;
-body {
-    font-family: Nunito, Arial, Helvetica, sans-serif;
-    background-color: $dark-bg;
-    color: $dark-fg;
-}
-
-body.theme-light {
-    background-color: $light-bg;
-    color: $light-fg;
-}
-
-body, html {
-    padding: 0;
-    margin: 0;
-}
-
-#mx_ThinWrapper_container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-
-    .mx_AppTileFullWidth {
-        width: unset !important;
-        height: calc(100% - 10px); // 5px top + bottom borders on the AppTile
-        margin: 0;
-    }
-}

src/vector/thin_widget/index.ts

@@ -1,105 +0,0 @@
-/*
-Copyright 2021 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.
-*/
-
-// We have to trick webpack into loading our CSS for us.
-require("./index.scss");
-import * as qs from 'querystring';
-import { settled } from "../promise_utils";
-import ReactDOM from 'react-dom';
-import { StopGapWidgetDriver, WidgetRenderMode } from "matrix-react-sdk/src/stores/widgets/StopGapWidgetDriver";
-import WidgetUtils from "matrix-react-sdk/src/utils/WidgetUtils";
-import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
-
-// The widget's options are encoded into the fragment to avoid leaking info to the server. The widget
-// spec on the other hand requires the widgetId and parentUrl to show up in the regular query string.
-const widgetQuery = qs.parse(window.location.hash.substring(2));
-const qsParam = (name: string, optional = false): string => {
-    if (!optional && (!widgetQuery[name] || typeof (widgetQuery[name]) !== 'string')) {
-        throw new Error(`Expected singular ${name} in query string`);
-    }
-    return widgetQuery[name] as string;
-};
-
-const accessToken = qsParam("accessToken");
-const homeserverUrl = qsParam("hsUrl");
-const roomId = qsParam("roomId", true);
-const widgetId = qsParam("widgetId"); // state_key or account data key
-
-// TODO: clear href so people don't accidentally copy/paste it
-//window.location.hash = '';
-
-(async function() {
-    const {
-        rageshakePromise,
-        preparePlatform,
-        loadSkin,
-        loadOlm, // to handle timelines
-        loadLanguage,
-        loadTheme,
-        showError,
-        _t,
-    } = await import(
-        /* webpackChunkName: "thin-wrapper-init" */
-        /* webpackPreload: true */
-        "../init");
-
-    try {
-        // give rageshake a chance to load/fail, we don't actually assert rageshake loads, we allow it to fail if no IDB
-        console.log("Waiting for rageshake...");
-        await settled(rageshakePromise);
-
-        console.log("Running startup...");
-        StopGapWidgetDriver.RENDER_MODE = WidgetRenderMode.ThinWrapper;
-        await loadSkin();
-        await loadOlm();
-        preparePlatform();
-        await MatrixClientPeg.shim(homeserverUrl, accessToken);
-        await loadTheme();
-        await loadLanguage();
-
-        console.log("Locating widget...");
-        const stateEvent = await MatrixClientPeg.get()._http.authedRequest(
-            undefined, "GET",
-            `/rooms/${encodeURIComponent(roomId)}/state/im.vector.modular.widgets/${encodeURIComponent(widgetId)}`,
-            undefined, undefined, {},
-        );
-        if (!stateEvent?.url) {
-            throw new Error("Invalid widget");
-        }
-        const app = WidgetUtils.makeAppConfig(
-            widgetId,
-            stateEvent,
-            MatrixClientPeg.get().getUserId(), // assume we are the sender
-            roomId,
-            widgetId);
-
-        // Now we can start our custom code
-        console.log("Loading app...");
-        const module = await import(
-            /* webpackChunkName: "thin-wrapper-app" */
-            /* webpackPreload: true */
-            "./app");
-        window.matrixChat = ReactDOM.render(await module.loadApp(app),
-            document.getElementById('matrixchat'));
-    } catch (err) {
-        console.error(err);
-        // Like the compatibility page, AWOOOOOGA at the user
-        // This uses the default brand since the app config is unavailable.
-        await showError(_t("Your Element is misconfigured"), [
-            err.translatedMessage || _t("Unexpected error preparing the app. See console for details."),
-        ]);
-    }
-})();

webpack.config.js

@@ -31,15 +31,6 @@ module.exports = (env, argv) => {
     const reactSdkSrcDir = path.resolve(require.resolve("matrix-react-sdk/package.json"), '..', 'src');
     const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), '..', 'src');
 
-    const themeBundles = {
-        "theme-legacy": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss",
-        "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss",
-        "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
-        "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
-        "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
-        "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
-    };
-
     return {
         ...development,
 
@@ -49,10 +40,14 @@ module.exports = (env, argv) => {
             "mobileguide": "./src/vector/mobile_guide/index.js",
             "jitsi": "./src/vector/jitsi/index.ts",
             "usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.js",
-            "thinwidget": "./src/vector/thin_widget/index.ts",
 
             // CSS themes
-            ...themeBundles,
+            "theme-legacy": "./node_modules/matrix-react-sdk/res/themes/legacy-light/css/legacy-light.scss",
+            "theme-legacy-dark": "./node_modules/matrix-react-sdk/res/themes/legacy-dark/css/legacy-dark.scss",
+            "theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
+            "theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
+            "theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
+            "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
         },
 
         optimization: {
@@ -318,7 +313,7 @@ module.exports = (env, argv) => {
                 // HtmlWebpackPlugin will screw up our formatting like the names
                 // of the themes and which chunks we actually care about.
                 inject: false,
-                excludeChunks: ['mobileguide', 'usercontent', 'jitsi', 'thinwidget'],
+                excludeChunks: ['mobileguide', 'usercontent', 'jitsi'],
                 minify: argv.mode === 'production',
                 vars: {
                     og_image_url: og_image_url,
@@ -333,14 +328,6 @@ module.exports = (env, argv) => {
                 chunks: ['jitsi'],
             }),
 
-            // This is a small thin wrapper for widgets (popout; isolated stack)
-            new HtmlWebpackPlugin({
-                template: './src/vector/thin_widget/index.html',
-                filename: 'thin_widget.html',
-                minify: argv.mode === 'production',
-                chunks: ['thinwidget', ...Object.keys(themeBundles)],
-            }),
-
             // This is the mobile guide's entry point (separate for faster mobile loading)
             new HtmlWebpackPlugin({
                 template: './src/vector/mobile_guide/index.html',

yarn.lock

@@ -7511,9 +7511,10 @@ mathml-tag-names@^2.1.3:
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
   integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
-  version "9.6.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6ad3fb16b3813c717943f6bc8bca5a55fe325477"
+matrix-js-sdk@9.7.0:
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-9.7.0.tgz#fbd03c188546f9733b28ea1752476b22ca63d2f2"
+  integrity sha512-cVBHhQVGk2WWQ2kv0Ov8CTcgZVJhMuZBejXZnKqp6qEgSpmb4xQRxewbxjF53ixO7uRUzGFtAlDiW4BeHZnN/g==
   dependencies:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
@@ -7533,9 +7534,10 @@ matrix-mock-request@^1.2.3:
     bluebird "^3.5.0"
     expect "^1.20.2"
 
-"matrix-react-sdk@github:matrix-org/matrix-react-sdk#develop":
-  version "3.13.1"
-  resolved "https://codeload.github.com/matrix-org/matrix-react-sdk/tar.gz/e9740f5a693861fb993bf9b85560d6c25784bca9"
+matrix-react-sdk@3.14.0:
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/matrix-react-sdk/-/matrix-react-sdk-3.14.0.tgz#86cd273e7828da2f9b9d3bcf6a5d1e7046e37788"
+  integrity sha512-W/MTmkESvnsOi6K4VwP6sfSXY9HxdINtPP3Jvlr9EO1PxahYs9BxxQ90gguij6I38dwM9/miChBG9uAO7mL9+A==
   dependencies:
     "@babel/runtime" "^7.12.5"
     await-lock "^2.1.0"
@@ -7563,7 +7565,7 @@ matrix-mock-request@^1.2.3:
     katex "^0.12.0"
     linkifyjs "^2.1.9"
     lodash "^4.17.20"
-    matrix-js-sdk "github:matrix-org/matrix-js-sdk#develop"
+    matrix-js-sdk "9.7.0"
     matrix-widget-api "^0.1.0-beta.13"
     minimist "^1.2.5"
     pako "^2.0.3"