Merge pull request #70 from vector-im/bwindels/loadolm

Load olm at application bootstrap

index.html

@@ -18,7 +18,11 @@
         </script>
 		<script id="main" type="module">
 			import {main} from "./src/main.js";
-			main(document.body);
+			main(document.body, {
+                wasm: "lib/olm/olm.wasm",
+                legacyBundle: "lib/olm/olm_legacy.js",
+                wasmBundle: "lib/olm/olm.js",
+            });
 		</script>
         <script id="service-worker" type="disabled">
             if('serviceWorker' in navigator) {

scripts/build.mjs

@@ -58,6 +58,12 @@ program.parse(process.argv);
 const {debug, noOffline} = program;
 const offline = !noOffline;
 
+const olmFiles = {
+    wasm: "olm-4289088762.wasm",
+    legacyBundle: "olm_legacy-3232457086.js",
+    wasmBundle: "olm-1421970081.js",
+};
+
 async function build() {
     // only used for CSS for now, using legacy for all targets for now
     const legacy = true;
@@ -73,6 +79,8 @@ async function build() {
     // clear target dir
     await removeDirIfExists(targetDir);
     await createDirs(targetDir, themes);
+    // copy assets
+    await copyFolder(path.join(projectDir, "lib/olm/"), targetDir, );
     // also creates the directories where the theme css bundles are placed in,
     // so do it first
     const themeAssets = await copyThemeAssets(themes, legacy);
@@ -154,9 +162,9 @@ async function buildHtml(doc, version, assetPaths, manifestPath) {
         theme.attr("href", assetPaths.cssThemeBundle(themeName));
     });
     doc("script#main").replaceWith(
-        `<script type="module">import {main} from "./${assetPaths.jsBundle()}"; main(document.body);</script>` +
+        `<script type="module">import {main} from "./${assetPaths.jsBundle()}"; main(document.body, ${JSON.stringify(olmFiles)});</script>` +
         `<script type="text/javascript" nomodule src="${assetPaths.jsLegacyBundle()}"></script>` +
-        `<script type="text/javascript" nomodule>${PROJECT_ID}Bundle.main(document.body);</script>`);
+        `<script type="text/javascript" nomodule>${PROJECT_ID}Bundle.main(document.body, ${JSON.stringify(olmFiles)});</script>`);
     removeOrEnableScript(doc("script#service-worker"), offline);
 
     const versionScript = doc("script#version");
@@ -338,7 +346,7 @@ async function copyFolder(srcRoot, dstRoot, filter) {
         if (dirEnt.isDirectory()) {
             await fs.mkdir(dstPath);
             Object.assign(assetPaths, await copyFolder(srcPath, dstPath, filter));
-        } else if (dirEnt.isFile() && filter(srcPath)) {
+        } else if ((dirEnt.isFile() || dirEnt.isSymbolicLink()) && (!filter || filter(srcPath))) {
             const content = await fs.readFile(srcPath);
             const hashedDstPath = resource(dstPath, content);
             await fs.writeFile(hashedDstPath, content);

src/main.js

@@ -26,10 +26,39 @@ import {BrawlView} from "./ui/web/BrawlView.js";
 import {Clock} from "./ui/web/dom/Clock.js";
 import {OnlineStatus} from "./ui/web/dom/OnlineStatus.js";
 
+function addScript(src) {
+    return new Promise(function (resolve, reject) {
+        var s = document.createElement("script");
+        s.setAttribute("src", src );
+        s.onload=resolve;
+        s.onerror=reject;
+        document.body.appendChild(s);
+    });
+}
+
+async function loadOlm(olmPaths) {
+    // make crypto.getRandomValues available without
+    // a prefix on IE11, needed by olm to work
+    if (window.msCrypto && !window.crypto) {
+        window.crypto = window.msCrypto;
+    }
+    if (olmPaths) {
+        if (window.WebAssembly) {
+            await addScript(olmPaths.wasmBundle);
+            await window.Olm.init({locateFile: () => olmPaths.wasm});
+        } else {
+            await addScript(olmPaths.legacyBundle);
+            await window.Olm.init();
+        }
+        return window.Olm;
+    }
+    return null;
+}
+
 // Don't use a default export here, as we use multiple entries during legacy build,
 // which does not support default exports,
 // see https://github.com/rollup/plugins/tree/master/packages/multi-entry
-export async function main(container) {
+export async function main(container, olmPaths) {
     try {
         // to replay:
         // const fetchLog = await (await fetch("/fetchlogs/constrainterror.json")).json();
@@ -59,6 +88,7 @@ export async function main(container) {
                     sessionInfoStorage,
                     request,
                     clock,
+                    olmPromise: loadOlm(olmPaths),
                 });
             },
             sessionInfoStorage,

src/matrix/Session.js

@@ -21,7 +21,7 @@ import {User} from "./User.js";
 
 export class Session {
     // sessionInfo contains deviceId, userId and homeServer
-    constructor({storage, hsApi, sessionInfo}) {
+    constructor({storage, hsApi, sessionInfo, olm}) {
         this._storage = storage;
         this._hsApi = hsApi;
         this._session = null;
@@ -30,6 +30,7 @@ export class Session {
         this._sendScheduler = new SendScheduler({hsApi, backoff: new RateLimitingBackoff()});
         this._roomUpdateCallback = (room, params) => this._rooms.update(room.id, params);
         this._user = new User(sessionInfo.userId);
+        this._olm = olm;
     }
 
     async load() {

src/matrix/SessionContainer.js

@@ -41,7 +41,7 @@ export const LoginFailure = createEnum(
 );
 
 export class SessionContainer {
-    constructor({clock, random, onlineStatus, request, storageFactory, sessionInfoStorage}) {
+    constructor({clock, random, onlineStatus, request, storageFactory, sessionInfoStorage, olmPromise}) {
         this._random = random;
         this._clock = clock;
         this._onlineStatus = onlineStatus;
@@ -57,6 +57,7 @@ export class SessionContainer {
         this._sync = null;
         this._sessionId = null;
         this._storage = null;
+        this._olmPromise = olmPromise;
     }
 
     createNewSessionId() {
@@ -149,7 +150,8 @@ export class SessionContainer {
             userId: sessionInfo.userId,
             homeServer: sessionInfo.homeServer,
         };
-        this._session = new Session({storage: this._storage, sessionInfo: filteredSessionInfo, hsApi});
+        const olm = await this._olmPromise;
+        this._session = new Session({storage: this._storage, sessionInfo: filteredSessionInfo, hsApi, olm});
         await this._session.load();
         
         this._sync = new Sync({hsApi, storage: this._storage, session: this._session});