From 03de7f99019eee4eec2b015ccbfafeba5ca79fbd Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 28 Jan 2019 14:09:28 +0000
Subject: [PATCH] Cache-bust olm.wasm

In the same way as we now do images/fonts
---
 scripts/copy-res.js |  4 ----
 src/vector/index.js | 11 +++++++----
 webpack.config.js   |  9 +++++++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/scripts/copy-res.js b/scripts/copy-res.js
index 077d4900..012cdf79 100755
--- a/scripts/copy-res.js
+++ b/scripts/copy-res.js
@@ -58,10 +58,6 @@ const COPY_LIST = [
     ["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
     ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
     ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
-    // XXX: This is tied quite heavily to the matching olm.js so it really should be
-    // in the bundle dir with the js to avoid caching issues giving us wasm that
-    // doesn't match our js, but I cannot find any way to get webpack to do this.
-    ["node_modules/olm/olm.wasm", "webapp", { directwatch: 1 }],
     ["node_modules/olm/olm_legacy.js", "webapp", { directwatch: 1 }],
     ["./config.json", "webapp", { directwatch: 1 }],
 ];
diff --git a/src/vector/index.js b/src/vector/index.js
index 4188a14b..af9ee7fd 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -24,6 +24,8 @@ require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
 require('draft-js/dist/Draft.css');
 
+import olmWasmPath from 'olm/olm.wasm';
+
 import './rageshakesetup';
 
 import React from 'react';
@@ -379,18 +381,19 @@ function loadOlm() {
      *
      * We also need to tell the Olm js to look for its wasm file at the same
      * level as index.html. It really should be in the same place as the js,
-     * ie. in the bundle directory, to avoid caching issues, but as far as I
-     * can tell this is completely impossible with webpack.
+     * ie. in the bundle directory, but as far as I can tell this is
+     * completely impossible with webpack. We do, however, use a hashed
+     * filename to avoid caching issues.
      */
     return Olm.init({
-        locateFile: () => 'olm.wasm',
+        locateFile: () => olmWasmPath,
     }).then(() => {
         console.log("Using WebAssembly Olm");
     }).catch((e) => {
         console.log("Failed to load Olm: trying legacy version");
         return new Promise((resolve, reject) => {
             const s = document.createElement('script');
-            s.src = 'olm_legacy.js';
+            s.src = 'olm_legacy.js'; // XXX: This should be cache-busted too
             s.onload = resolve;
             s.onerror = reject;
             document.body.appendChild(s);
diff --git a/webpack.config.js b/webpack.config.js
index 08d83574..6d8081c2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,6 +25,15 @@ module.exports = {
         rules: [
             { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
             { test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
+            {
+                test: /\.wasm$/,
+                loader: "file-loader",
+                type: "javascript/auto", // https://github.com/webpack/webpack/issues/6725
+                options: {
+                    name: '[name].[hash:7].[ext]',
+                    outputPath: '.',
+                },
+            },
             {
                 test: /\.scss$/,
                 // 1. postcss-loader turns the SCSS into normal CSS.