fix(hugo): bundle hugo correctly when running local component browser

CloudCannon · Feb 22, 2022 · 089dcf3 · 089dcf3
1 parent 70cbab9
commit 089dcf3
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 11 deletions.
diff --git a/javascript-modules/browser/cli.js b/javascript-modules/browser/cli.js
@@ -7,7 +7,8 @@ const program = new Command();
 
 async function run() {
     program.requiredOption("-b, --bookshop <paths...>", "Paths to bookshops (space seperated)");
-    program.requiredOption("-o, --output <filename>", "Output JS to given filename");
+    program.option("-o, --output <filename>", "Output JS to given filename");
+    program.option("-p, --port <number>", "Host bookshop browser server on a local port");
     program.option("--exclude <tags...>", "Component tags to exclude (space seperated)");
     program.option("--only-engines <engines...>", "Only load the specified engines");
     program.parse(process.argv);

diff --git a/javascript-modules/browser/main.js b/javascript-modules/browser/main.js
@@ -11,7 +11,7 @@ import BrowserServer from "./lib/build/browserServer.js";
 
 export const runner = async (options) => {
     const bookshopDirs = options.bookshop.map(d => path.join(process.cwd(), d));
-    const outputFile = path.join(process.cwd(), options.output);
+    const outputFile = options.output ? path.join(process.cwd(), options.output) : null;
     const port = options.port ?? null;
     let server = null;
     const watch = outputFile ? null : {
@@ -53,7 +53,8 @@ export const runner = async (options) => {
         },
         exclude: JSON.stringify(options.exclude || []),
         onlyEngines: options.onlyEngines,
-        bookshopDirs: bookshopDirs
+        bookshopDirs: bookshopDirs,
+        hosted: !!outputFile,
     }
 
     const output = await Builder(builderOptions);

diff --git a/javascript-modules/browser/package.json b/javascript-modules/browser/package.json
@@ -11,7 +11,7 @@
     "manual-test-watch": "node main.js -b .test/fixtures -p 7923"
   },
   "bin": {
-    "bookshop-browser": "main.js"
+    "bookshop-browser": "cli.js"
   },
   "files": [
     "**/*.js",
@@ -52,4 +52,4 @@
   "engines": {
     "node": ">=14.16"
   }
-}
+}
diff --git a/javascript-modules/builder/main.js b/javascript-modules/builder/main.js
@@ -39,7 +39,7 @@ export default async (options) => {
             ...esbuildOptions.loader,
             ...(engine?.buildLoaders || {})
         };
-        engine?.esbuildConfigFn?.(esbuildOptions);
+        engine?.esbuildConfigFn?.(esbuildOptions, options);
     });
 
     return await esbuild.build({

diff --git a/javascript-modules/engines/hugo-engine/lib/builder.js b/javascript-modules/engines/hugo-engine/lib/builder.js
@@ -6,11 +6,11 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export const extensions = [".hugo.html"];
 
-export const esbuildConfigFn = (esbuildConfig) => {
+export const esbuildConfigFn = (esbuildConfig, options) => {
     esbuildConfig.loader = {
         ...esbuildConfig.loader,
         ".hugo.html": "text",
-        ".wasm": "file"
+        ".wasm": options?.hosted ? "file" : "binary"
     };
 
     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
@@ -31,10 +31,15 @@ export class Engine {
     }
 
     async initializeHugo() {
-        if (window.CloudCannon?.isMocked) {
-            await this.initializeLocalHugo();
+        // 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 {
-            await this.initializeRemoteHugo();
+            if (window.CloudCannon?.isMocked) {
+                await this.initializeLocalHugo();
+            } else {
+                await this.initializeRemoteHugo();
+            }
         }
 
         // TODO: Tidy
@@ -75,6 +80,13 @@ export class Engine {
         go.run(result.instance);
     }
 
+    async initializeInlineHugo() {
+        const go = new Go();
+        const buffer = hugoWasm.buffer;
+        const result = await WebAssembly.instantiate(buffer, go.importObject);
+        go.run(result.instance);
+    }
+
     getShared(name) {
         const key = `shared/hugo/${name}.hugo.html`
         return this.files?.[key];