matrix-art

commit d82b2dd62bdb8dca2116814bf19175df17128393
parent c4c8a102a3a165180e2779d89097cfdefbb7836a
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon, 18 Apr 2022 23:46:30 +0200

Load client later

Diffstat:
M
src/app.tsx
 | 
67
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
M
src/main.tsx
 | 
55
++-----------------------------------------------------

2 files changed, 66 insertions(+), 56 deletions(-)
diff --git a/src/app.tsx b/src/app.tsx
@@ -3,10 +3,72 @@ import { lazy, PureComponent, Suspense } from 'preact/compat';
 import { Home } from './pages/Home';
 import { Client } from './context';
 import { Header } from './components/header';
+import { MatrixClient } from './matrix/client';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+import OlmLegacy from '@matrix-org/olm/olm_legacy.js?url';
+import Olm from '@matrix-org/olm';
 
 const Join = lazy(() => import("./pages/Join"));
 
-export class App extends PureComponent {
+type State = {
+  client?: MatrixClient;
+};
+
+export class App extends PureComponent<any, State> {
+  constructor() {
+    super();
+    this.state = {
+      client: undefined
+    };
+  }
+
+  loadOlm(): Promise<void> {
+    /* Load Olm. We try the WebAssembly version first, and then the legacy */
+    return Olm.init({
+      locateFile: () => olmWasmPath,
+    }).then(() => {
+      console.log("Using WebAssembly Olm");
+    }).catch((e) => {
+      console.log("Failed to load Olm: trying legacy version", e);
+      return new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = OlmLegacy; // XXX: This should be cache-busted too
+        s.onload = resolve;
+        s.onerror = reject;
+        document.body.appendChild(s);
+      }).then(() => {
+        // Init window.Olm, ie. the one just loaded by the script tag,
+        // not 'Olm' which is still the failed wasm version.
+        return window.Olm.init();
+      }).then(() => {
+        console.log("Using legacy Olm");
+      }).catch((e) => {
+        console.log("Both WebAssembly and asm.js Olm failed!", e);
+      });
+    });
+  };
+
+  async loadMatrixClient() {
+    let client = await MatrixClient.new();
+    // @ts-ignore its fine...
+    this.setState({ client });
+    console.log("Client loaded");
+    await this.state.client?.start();
+    console.log("Client started");
+  }
+
+  async componentDidMount() {
+    try {
+      await this.loadOlm();
+      console.log("Olm loaded");
+    } catch {
+      console.log("Olm not loaded");
+    }
+    await this.loadMatrixClient();
+  }
 
   render() {
     return (
@@ -23,8 +85,7 @@ export class App extends PureComponent {
       }>
 
         <Client.Provider value={
-          // @ts-ignore its fine... 
-          window.client
+          this.state.client
         }>
           <Router>
             <Home path={`${import.meta.env.BASE_URL}/`} />
diff --git a/src/main.tsx b/src/main.tsx
@@ -2,12 +2,6 @@ import { render } from 'preact';
 import { App } from './app';
 import './index.css';
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
-import OlmLegacy from '@matrix-org/olm/olm_legacy.js?url';
-import Olm from '@matrix-org/olm';
-import { MatrixClient } from './matrix/client';
 
 if (import.meta.env.DEV) {
     // Must use require here as import statements are only allowed
@@ -16,49 +10,4 @@ if (import.meta.env.DEV) {
     import("preact/debug");
 }
 
-function loadOlm(): Promise<void> {
-    /* Load Olm. We try the WebAssembly version first, and then the legacy */
-    return Olm.init({
-        locateFile: () => olmWasmPath,
-    }).then(() => {
-        console.log("Using WebAssembly Olm");
-    }).catch((e) => {
-        console.log("Failed to load Olm: trying legacy version", e);
-        return new Promise((resolve, reject) => {
-            const s = document.createElement('script');
-            s.src = OlmLegacy; // XXX: This should be cache-busted too
-            s.onload = resolve;
-            s.onerror = reject;
-            document.body.appendChild(s);
-        }).then(() => {
-            // Init window.Olm, ie. the one just loaded by the script tag,
-            // not 'Olm' which is still the failed wasm version.
-            return window.Olm.init();
-        }).then(() => {
-            console.log("Using legacy Olm");
-        }).catch((e) => {
-            console.log("Both WebAssembly and asm.js Olm failed!", e);
-        });
-    });
-};
-
-function load() {
-    MatrixClient.new().then((client) => {
-        // @ts-ignore its fine...
-        window.client = client;
-        console.log("Client loaded");
-        client.start().then(() => {
-            console.log("Client started");
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            render(<App />, document.querySelector('#app')!);
-        });
-    });
-}
-
-loadOlm().then((): void => {
-    console.log("Olm loaded");
-    load();
-}).catch(() => {
-    console.log("Olm not loaded");
-    load();
-});
-\ No newline at end of file
+render(<App />, document.querySelector('#app')!);
+\ No newline at end of file