Cache-bust olm.wasm

In the same way as we now do images/fonts
This commit is contained in:
David Baker 2019-01-28 14:09:28 +00:00
parent 68fd1f0fad
commit 03de7f9901
3 changed files with 16 additions and 8 deletions

View file

@ -58,10 +58,6 @@ const COPY_LIST = [
["node_modules/matrix-react-sdk/res/media/**", "webapp/media"], ["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"], ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
["node_modules/emojione/assets/png/*", "webapp/emojione/png/"], ["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 }], ["node_modules/olm/olm_legacy.js", "webapp", { directwatch: 1 }],
["./config.json", "webapp", { directwatch: 1 }], ["./config.json", "webapp", { directwatch: 1 }],
]; ];

View file

@ -24,6 +24,8 @@ require('gfm.css/gfm.css');
require('highlight.js/styles/github.css'); require('highlight.js/styles/github.css');
require('draft-js/dist/Draft.css'); require('draft-js/dist/Draft.css');
import olmWasmPath from 'olm/olm.wasm';
import './rageshakesetup'; import './rageshakesetup';
import React from 'react'; 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 * 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, * 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 * ie. in the bundle directory, but as far as I can tell this is
* can tell this is completely impossible with webpack. * completely impossible with webpack. We do, however, use a hashed
* filename to avoid caching issues.
*/ */
return Olm.init({ return Olm.init({
locateFile: () => 'olm.wasm', locateFile: () => olmWasmPath,
}).then(() => { }).then(() => {
console.log("Using WebAssembly Olm"); console.log("Using WebAssembly Olm");
}).catch((e) => { }).catch((e) => {
console.log("Failed to load Olm: trying legacy version"); console.log("Failed to load Olm: trying legacy version");
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const s = document.createElement('script'); 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.onload = resolve;
s.onerror = reject; s.onerror = reject;
document.body.appendChild(s); document.body.appendChild(s);

View file

@ -25,6 +25,15 @@ module.exports = {
rules: [ rules: [
{ enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, }, { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
{ test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') }, { 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$/, test: /\.scss$/,
// 1. postcss-loader turns the SCSS into normal CSS. // 1. postcss-loader turns the SCSS into normal CSS.