Remove Bookshop CDN dependency and use a site-local gzipped WASM file

CloudCannon · Nov 29, 2022 · 17a40f5 · 17a40f5
1 parent cf33c35
commit 17a40f5
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 34 deletions.
diff --git a/.github/workflows/integration-test.yml b/.github/workflows/integration-test.yml
@@ -52,5 +52,8 @@ jobs:
         env:
           GOOS: js
           GOARCH: wasm
+      - name: Gzip Hugo wasm module
+        run: gzip --keep hugo_renderer.wasm
+        working-directory: ${{ env.cwd }}/engines/hugo-engine/hugo-renderer
       - run: yarn run itest
         working-directory: ${{ env.cwd }}/integration-tests
diff --git a/.gitignore b/.gitignore
@@ -25,4 +25,5 @@ coverage
 javascript-modules/integration-tests/support/starters/jekyll/*.lock
 javascript-modules/integration-tests/.bookshop-tmp-test-dir/*
 hugo_renderer.wasm
+hugo_renderer.wasm.gz
 .env
diff --git a/javascript-modules/engines/hugo-engine/hugo-renderer/build.sh b/javascript-modules/engines/hugo-engine/hugo-renderer/build.sh
@@ -23,6 +23,9 @@ if [ ! -f $OUTPUTFILENAME ]; then
 fi
 echo "Done. Repo Hugo WASM available at hugo_renderer.wasm"
 
+gzip --keep $OUTPUTFILENAME
+echo "Repo Hugo WASM also available at hugo_renderer.wasm.gz"
+
 # If we're just in a test run we don't want to touch the CDN repo
 if [[ -z "${PUBLISH_BOOKSHOP_CDN}" ]]; then
     echo "Not publishing to CDN."

diff --git a/javascript-modules/engines/hugo-engine/lib/builder.js b/javascript-modules/engines/hugo-engine/lib/builder.js
@@ -10,7 +10,8 @@ export const esbuildConfigFn = (esbuildConfig, options) => {
     esbuildConfig.loader = {
         ...esbuildConfig.loader,
         ".hugo.html": "text",
-        ".wasm": options?.hosted ? "file" : "binary"
+        ".wasm": options?.hosted ? "file" : "binary",
+        ".wasm.gz": "file"
     };
 
     const wasm_exec_banner = fs.readFileSync(path.join(__dirname, "../hugo-renderer/wasm_exec.js"));

diff --git a/javascript-modules/engines/hugo-engine/lib/engine.js b/javascript-modules/engines/hugo-engine/lib/engine.js
@@ -1,4 +1,5 @@
 import hugoWasm from "../hugo-renderer/hugo_renderer.wasm";
+import compressedHugoWasm from "../hugo-renderer/hugo_renderer.wasm.gz";
 import { gunzipSync } from 'fflate';
 import translateTextTemplate from './translateTextTemplate.js';
 import { IdentifierParser } from './hugoIdentifierParser.js';
@@ -32,16 +33,11 @@ export class Engine {
     }
 
     async initializeHugo() {
-        const useLocalHugo = window.CloudCannon?.isMocked || /localhost|127\.0\.0\.1/i.test(window.location.host);
         // When this script is run locally, the hugo wasm is loaded as binary rather than output as a file.
         if (hugoWasm?.constructor === Uint8Array) {
             await this.initializeInlineHugo();
         } else {
-            if (useLocalHugo) {
-                await this.initializeLocalHugo();
-            } else {
-                await this.initializeRemoteCompressedHugo();
-            }
+            await this.initializeLocalCompressedHugo();
         }
 
         // TODO: Tidy
@@ -55,38 +51,20 @@ export class Engine {
         const success = window.loadHugoBookshopPartials(JSON.stringify(mappedFiles));
     }
 
-    async initializeRemoteCompressedHugo() {
+    async initializeLocalCompressedHugo() {
         try {
             const go = new Go();
-            const remoteWasmOrigin = `https://cdn.bookshop.build/hugo/hugo_renderer_${version}.wasm.gz`;
-            const remoteResponse = await fetch(remoteWasmOrigin);
-            const remoteBuffer = await remoteResponse.arrayBuffer();
-            const renderer = gunzipSync(new Uint8Array(remoteBuffer));
+            const compressedWasmOrigin = this.origin.replace(/\/[^\.\/]+\.(min\.)?js/, compressedHugoWasm.replace(/^\./, ''));
+            const compressedResponse = await fetch(compressedWasmOrigin);
+            const compressedBuffer = await compressedResponse.arrayBuffer();
+            const renderer = gunzipSync(new Uint8Array(compressedBuffer));
 
             // Check the magic word at the start of the buffer as a way to verify the CDN download worked.
             const isWasm = ([...renderer.slice(0, 4)]).map(g => g.toString(16).padStart(2, '0')).join('') === "0061736d";
             if (!isWasm) throw "Not WASM";
 
-            const remoteResult = await WebAssembly.instantiate(renderer, go.importObject);
-            go.run(remoteResult.instance);
-        } catch (e) {
-            await this.initializeRemoteHugo();
-        }
-    }
-
-    async initializeRemoteHugo() {
-        try {
-            const go = new Go();
-            const remoteWasmOrigin = `https://cdn.bookshop.build/hugo/hugo_renderer_${version}.wasm`;
-            const remoteResponse = await fetch(remoteWasmOrigin);
-            const remoteBuffer = await remoteResponse.arrayBuffer();
-
-            // Check the magic word at the start of the buffer as a way to verify the CDN download worked.
-            const isWasm = ([...new Uint8Array(remoteBuffer, 0, 4)]).map(g => g.toString(16).padStart(2, '0')).join('') === "0061736d";
-            if (!isWasm) throw "Not WASM";
-
-            const remoteResult = await WebAssembly.instantiate(remoteBuffer, go.importObject);
-            go.run(remoteResult.instance);
+            const compressedResult = await WebAssembly.instantiate(renderer, go.importObject);
+            go.run(compressedResult.instance);
         } catch (e) {
             await this.initializeLocalHugo();
         }

diff --git a/javascript-modules/engines/hugo-engine/package.json b/javascript-modules/engines/hugo-engine/package.json
@@ -14,7 +14,8 @@
     "*.js",
     "lib/*.js",
     "!**/*.test.js",
-    "hugo-renderer/hugo_renderer.wasm"
+    "hugo-renderer/hugo_renderer.wasm",
+    "hugo-renderer/hugo_renderer.wasm.gz"
   ],
   "scripts": {
     "test": "nyc ava -v"
@@ -37,4 +38,4 @@
   "engines": {
     "node": ">=14.16"
   }
-}
+}