Field: make id optional, generate one if not provided

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/@types/global.d.ts

@@ -14,9 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import {ReactElement} from "react";
+
 interface Window {
     Olm: {
         init: () => Promise<void>;
     };
     mxSendRageshake: (text: string, withLogs?: boolean) => void;
+    matrixChat: ReactElement;
 }

src/vector/app.js

@@ -38,10 +38,9 @@ import {parseQs, parseQsFromFragment} from './url_utils';
 
 import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
-import {setTheme} from "matrix-react-sdk/src/theme";
 
 import CallHandler from 'matrix-react-sdk/src/CallHandler';
-import {loadConfig, preparePlatform, loadLanguage, loadOlm} from "./init";
+import {loadConfig, preparePlatform, loadLanguage, loadOlm, loadTheme} from "./init";
 
 let lastLocationHashSet = null;
 
@@ -186,8 +185,13 @@ export async function loadApp() {
     preparePlatform();
     const platform = PlatformPeg.get();
 
-    // Load the config from the platform
-    const configError = await loadConfig();
+    let configError;
+    try {
+        // Load the config from the platform
+        await loadConfig();
+    } catch (e) {
+        configError = e;
+    }
 
     // Load language after loading config.json so that settingsDefaults.language can be applied
     await loadLanguage();
@@ -213,7 +217,7 @@ export async function loadApp() {
     }
 
     // as quickly as we possibly can, set a default theme...
-    await setTheme();
+    await loadTheme();
 
     // Now that we've loaded the theme (CSS), display the config syntax error if needed.
     if (configError && configError.err && configError.err instanceof SyntaxError) {
@@ -256,7 +260,8 @@ export async function loadApp() {
         platform.startUpdater();
 
         // Don't bother loading the app until the config is verified
-        verifyServerConfig().then((newConfig) => {
+        try {
+            const newConfig = await verifyServerConfig();
             const MatrixChat = sdk.getComponent('structures.MatrixChat');
             window.matrixChat = ReactDOM.render(
                 <MatrixChat
@@ -273,7 +278,7 @@ export async function loadApp() {
                 />,
                 document.getElementById('matrixchat'),
             );
-        }).catch(err => {
+        } catch (err) {
             console.error(err);
 
             let errorMessage = err.translatedMessage
@@ -286,7 +291,7 @@ export async function loadApp() {
                 <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />,
                 document.getElementById('matrixchat'),
             );
-        });
+        }
     } else {
         console.error("Browser is missing required features.");
         // take to a different landing page to AWOOOOOGA at the user

src/vector/index.js

@@ -24,8 +24,7 @@ limitations under the License.
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
 
-// These are things that can run before the skin loads - be careful not to reference the react-sdk though.
-import './rageshakesetup';
+
 import './modernizr';
 
 // load service worker if available on this platform
@@ -33,15 +32,28 @@ if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('sw.js');
 }
 
-// Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
-// the SDK until we have to in imports.
-console.log("Loading skin...");
-import * as sdk from 'matrix-react-sdk';
-import * as skin from "../component-index";
-sdk.loadSkin(skin);
-console.log("Skin loaded!");
+async function start() {
+    const { initRageshake, loadSkin } = await import(
+        /* webpackChunkName: "init" */
+        /* webpackPreload: true */
+        "./init");
 
-// Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
-// run on the components. We use `require` here to make sure webpack doesn't optimize this into an async
-// import and thus running before the skin can load.
-require("./app").loadApp();
+    // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
+    await initRageshake();
+
+    // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
+    // the SDK until we have to in imports.
+    await loadSkin();
+
+    // Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
+    // run on the components. We use `require` here to make sure webpack doesn't optimize this into an async
+    // import and thus running before the skin can load.
+    const { loadApp } = await import(
+        /* webpackChunkName: "app" */
+        /* webpackPreload: true */
+        "./app");
+
+    loadApp();
+}
+
+start();

src/vector/init.ts

@@ -19,14 +19,17 @@ limitations under the License.
 
 // @ts-ignore
 import olmWasmPath from "olm/olm.wasm";
-import Olm from 'olm';
+import Olm from "olm";
 
-import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
+import * as languageHandler from "matrix-react-sdk/src/languageHandler";
 import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
+import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
+import SdkConfig from "matrix-react-sdk/src/SdkConfig";
+import {setTheme} from "matrix-react-sdk/src/theme";
+import * as sdk from "matrix-react-sdk";
+
 import ElectronPlatform from "./platform/ElectronPlatform";
 import WebPlatform from "./platform/WebPlatform";
-import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
-import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 
 
 export function preparePlatform() {
@@ -40,21 +43,8 @@ export function preparePlatform() {
     }
 }
 
-export async function loadConfig(): Promise<Error | void> {
-    const platform = PlatformPeg.get();
-
-    let configJson;
-    try {
-        configJson = await platform.getConfig();
-    } catch (e) {
-        return e;
-    } finally {
-        // XXX: We call this twice, once here and once in MatrixChat as a prop. We call it here to ensure
-        // granular settings are loaded correctly and to avoid duplicating the override logic for the theme.
-        //
-        // Note: this isn't called twice for some wrappers, like the Jitsi wrapper.
-        SdkConfig.put(configJson || {});
-    }
+export async function loadConfig() {
+    SdkConfig.put(await PlatformPeg.get().getConfig());
 }
 
 export function loadOlm(): Promise<void> {
@@ -112,3 +102,28 @@ export async function loadLanguage() {
         console.error("Unable to set language", e);
     }
 }
+
+export async function loadSkin() {
+    // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
+    // the SDK until we have to in imports.
+    console.log("Loading skin...");
+    // import the skin async so that it doesn't execute potentially unsupported code
+    const skin = await import(
+        /* webpackChunkName: "riot-web-component-index" */
+        /* webpackPreload: true */
+        // @ts-ignore - this file gets generated so fails lint
+        "../component-index");
+    await sdk.loadSkin(skin);
+    console.log("Skin loaded!");
+}
+
+export async function loadTheme() {
+    // as quickly as we possibly can, set a default theme...
+    await setTheme();
+}
+
+import rageshakeProm from "./rageshakesetup";
+
+export async function initRageshake() {
+    return rageshakeProm;
+}

src/vector/rageshakesetup.ts

@@ -31,7 +31,8 @@ import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 import sendBugReport from "matrix-react-sdk/src/rageshake/submit-rageshake";
 
 function initRageshake() {
-    rageshake.init().then(() => {
+    const prom = rageshake.init();
+    prom.then(() => {
         console.log("Initialised rageshake.");
         console.log("To fix line numbers in Chrome: " +
             "Meatball menu → Settings → Blackboxing → Add /rageshake\\.js$");
@@ -46,9 +47,10 @@ function initRageshake() {
     }, (err) => {
         console.error("Failed to initialise rageshake: " + err);
     });
+    return prom;
 }
 
-initRageshake();
+export default initRageshake();
 
 window.mxSendRageshake = function(text: string, withLogs?: boolean) {
     if (withLogs === undefined) withLogs = true;