From 0d8cc82c63b07504502f3627dbd7495d77fbd5f7 Mon Sep 17 00:00:00 2001
From: Liam Bigelow <liam@cloudcannon.com>
Date: Wed, 23 Mar 2022 17:32:31 +1300
Subject: [PATCH] fix(hugo): fixes some hugo bookshop component browser init
 errors

---
 hugo/v2/core/bookshop_component_browser.html  |   2 +-
 .../browser/lib/app/svelte/browser.svelte     | 144 ++++++++++--------
 .../browser/lib/app/svelte/lib/library.svelte |  75 +++++----
 .../engines/hugo-engine/lib/engine.js         |   6 +-
 .../hugo_bookshop_browser_granules.feature    |   4 +-
 .../integration-tests/support/steps.js        |  24 ++-
 6 files changed, 150 insertions(+), 105 deletions(-)

diff --git a/hugo/v2/core/bookshop_component_browser.html b/hugo/v2/core/bookshop_component_browser.html
index 974e5b92..ad9427df 100644
--- a/hugo/v2/core/bookshop_component_browser.html
+++ b/hugo/v2/core/bookshop_component_browser.html
@@ -30,6 +30,6 @@
     <script class="cms-no-rewrite" src="/_bookshop/bookshop-browser.js?cb={{ now.UnixMilli }}"></script>
 {{- end -}}
 <script>
-    window.bookshopBrowser = new window.BookshopBrowser({globals: []}); 
+    window.bookshopBrowser = new window.BookshopBrowser({globals: []});
     window.bookshopBrowser.render();
 </script>
\ No newline at end of file
diff --git a/javascript-modules/browser/lib/app/svelte/browser.svelte b/javascript-modules/browser/lib/app/svelte/browser.svelte
index 280bc6b8..293a62fd 100644
--- a/javascript-modules/browser/lib/app/svelte/browser.svelte
+++ b/javascript-modules/browser/lib/app/svelte/browser.svelte
@@ -1,49 +1,49 @@
 <script>
-    import {onMount} from 'svelte';
-    import {hydrateComponents, updateUrl, loadYaml} from './lib/helpers.js';
-    import {iconSvg} from './lib/icons.js';
-    import Library from './lib/library.svelte';
-    import InfoPane from './lib/info-pane.svelte';
-    import Editor from './lib/code-editor/editor.svelte';
-    
+    import { onMount } from "svelte";
+    import { hydrateComponents, updateUrl, loadYaml } from "./lib/helpers.js";
+    import { iconSvg } from "./lib/icons.js";
+    import Library from "./lib/library.svelte";
+    import InfoPane from "./lib/info-pane.svelte";
+    import Editor from "./lib/code-editor/editor.svelte";
+
     export let engines = [];
     export let components = {};
     export let globalData = {};
     export let exclude = [];
-    
-    let renderTarget, renderMap = {};
+
+    let renderTarget,
+        renderMap = {};
 
     let editProps = true;
-    
-    let baseYaml = '# Nothing';     // What is currently on disk
-    let editedYaml = '# Nothing';   // Edited in the browser
+
+    let baseYaml = "# Nothing"; // What is currently on disk
+    let editedYaml = "# Nothing"; // Edited in the browser
     let yamlError = false;
-    
+
     let selectingComponent = false;
     let selectedComponent = "nothing";
     let previousComponent = "nothing";
     let framework = "none";
     let previousFramework = "none";
     let activeEngine = {};
-    
+
     let hydratedComponents = null;
     $: {
         activeEngine?.destroy?.(renderTarget);
         hydratedComponents = hydrateComponents(components, engines, exclude);
-        console.log(`Components Updated.`);
     }
-    
+
     const refreshComponent = async (component, framework) => {
         componentDetail = hydratedComponents?.[component];
         if (!componentDetail) return;
-        
+
         availableFrameworks = componentDetail.frameworks || [];
         if (!availableFrameworks.includes(framework)) {
-            framework = selectedFramework = availableFrameworks[0] || 'none';
+            framework = selectedFramework = availableFrameworks[0] || "none";
         }
-        
+
         updateUrl(component, framework);
-        
+
         const newComponentSelected = previousComponent !== component;
         const newFrameworkSelected = previousFramework !== framework;
         const newComponentConfig = baseYaml !== componentDetail.yaml;
@@ -53,44 +53,57 @@
 
         if (newComponentSelected || newFrameworkSelected) {
             destroyPreviousComponent();
-            renderTarget.innerHTML = ''; // Clean up in case destroy() didn't
+            renderTarget.innerHTML = ""; // Clean up in case destroy() didn't
             renderMap = {};
         }
-        
+
         previousComponent = component;
         previousFramework = framework;
-    }
+    };
     $: if (hydratedComponents) refreshComponent(selectedComponent, framework);
 
     const destroyPreviousComponent = () => {
-        const previousEngine = engines.filter(e => e.key === previousFramework)[0];
+        const previousEngine = engines.filter(
+            (e) => e.key === previousFramework
+        )[0];
         if (previousEngine) {
             previousEngine.destroy?.(renderTarget, previousComponent);
         }
-    }
+    };
 
     const buildComponentLadder = () => {
-        Object.entries(hydratedComponents).filter(([key]) => key !== 'all_bookshop').forEach(([key, component]) => {
-            const sectionLabel = `<div data-bookshop-browser-section>${iconSvg(component.identity.icon)} ${component.identity.label}</div>`;
-            renderTarget.insertAdjacentHTML('beforeend', sectionLabel);
-
-            const el = document.createElement('div');
-            renderMap[key] = el;
-            renderTarget.appendChild(el);
-        });
-    }
+        Object.entries(hydratedComponents)
+            .filter(([key]) => key !== "all_bookshop")
+            .forEach(([key, component]) => {
+                const sectionLabel = `<div data-bookshop-browser-section>${iconSvg(
+                    component.identity.icon
+                )} ${component.identity.label}</div>`;
+                renderTarget.insertAdjacentHTML("beforeend", sectionLabel);
+
+                const el = document.createElement("div");
+                renderMap[key] = el;
+                renderTarget.appendChild(el);
+            });
+    };
 
     const renderAllComponents = async (engine) => {
         if (!renderTarget.innerHTML) buildComponentLadder();
-        const componentPromises = Object.entries(hydratedComponents).filter(([key]) => key !== 'all_bookshop').map(([key, component]) => {
-            return engine.render(renderMap[key], key, component.props, globalData);
-        });
+        const componentPromises = Object.entries(hydratedComponents)
+            .filter(([key]) => key !== "all_bookshop")
+            .map(([key, component]) => {
+                return engine.render(
+                    renderMap[key],
+                    key,
+                    component.props,
+                    globalData
+                );
+            });
         await Promise.all(componentPromises);
-    }
+    };
 
     const render = async (component, yamlProps, framework) => {
-        if (framework === 'none') return;
-        const engine = engines.filter(e => e.key === framework)[0];
+        if (framework === "none") return;
+        const engine = engines.filter((e) => e.key === framework)[0];
         if (!engine) {
             console.warn(`Engine ${framework} not found.`);
             return;
@@ -100,23 +113,24 @@
             return await renderAllComponents(engine);
         }
 
-        let {props, err} = loadYaml(yamlProps);
+        let { props, err } = loadYaml(yamlProps);
         yamlError = err;
         if (yamlError) return;
 
         activeEngine = engine;
         await engine.render(renderTarget, component, props, globalData);
-    }
+        window.bookshopComponentHasRendered = true;
+    };
     $: if (hydratedComponents) render(selectedComponent, editedYaml, framework);
 
     const updateCode = (event) => {
         editedYaml = event.detail.code;
-    }
+    };
 
     onMount(() => {
         let curUrl = new URL(window.location);
         if (curUrl.hash) {
-            let urlComponent = curUrl.hash.replace(/^#/, '');
+            let urlComponent = curUrl.hash.replace(/^#/, "");
             let [c, f] = urlComponent.split(":");
             selectedComponent = c;
             framework = f;
@@ -125,28 +139,32 @@
 </script>
 
 <div class="bookshop-browser-menus">
-    <Library components={hydratedComponents}
-        bind:selectedComponent={selectedComponent}
-        bind:selectingComponent={selectingComponent}
-        bind:framework={framework} />
-    
-    <InfoPane component={hydratedComponents[selectedComponent]}
-        bind:selectingComponent={selectingComponent}
-        bind:framework={framework}
-        bind:editProps={editProps} />
-    
+    <Library
+        components={hydratedComponents}
+        bind:selectedComponent
+        bind:selectingComponent
+        bind:framework
+    />
+
+    <InfoPane
+        component={hydratedComponents[selectedComponent]}
+        bind:selectingComponent
+        bind:framework
+        bind:editProps
+    />
+
     {#if editProps && hydratedComponents[selectedComponent]?.props}
-    <Editor code={baseYaml} error={yamlError} on:newcode={updateCode} />
+        <Editor code={baseYaml} error={yamlError} on:newcode={updateCode} />
     {/if}
 </div>
 
-<div class="bookshop-browser" bind:this={renderTarget}></div>
+<div class="bookshop-browser" bind:this={renderTarget} />
 
 <style>
     .bookshop-browser-menus {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
-        Helvetica, Arial, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+            Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+            "Segoe UI Symbol";
         font-size: 12px;
         display: flex;
         position: relative;
@@ -167,9 +185,9 @@
     :global([data-bookshop-browser-section]) {
         display: flex;
         align-items: center;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
-        Helvetica, Arial, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+            Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+            "Segoe UI Symbol";
         font-size: 12px;
         width: 100%;
         padding: 12px 0 4px;
@@ -183,5 +201,3 @@
         border-bottom: solid 1px #aaa;
     }
 </style>
-
-    
\ No newline at end of file
diff --git a/javascript-modules/browser/lib/app/svelte/lib/library.svelte b/javascript-modules/browser/lib/app/svelte/lib/library.svelte
index dc3411d1..67c353db 100644
--- a/javascript-modules/browser/lib/app/svelte/lib/library.svelte
+++ b/javascript-modules/browser/lib/app/svelte/lib/library.svelte
@@ -1,16 +1,18 @@
 <script>
-    import {iconSvg} from './icons.js';
+    import { iconSvg } from "./icons.js";
 
     export let components = {};
     export let selectedComponent = "";
     export let selectingComponent = true;
     export let framework = "none";
 
-    let list, input, searchTerm = "";
+    let list,
+        input,
+        searchTerm = "";
 
     const init = () => {
         input.focus();
-    }
+    };
 
     $: if (selectingComponent && list) init();
 
@@ -20,45 +22,58 @@
             framework = components[c]?.frameworks?.[0] ?? "none";
         }
         blurry();
-    }
+    };
 
     const blurry = (e) => {
         searchTerm = "";
         if (e?.relatedTarget?.dataset?.blur !== "list-child") {
             selectingComponent = false;
         }
-    }
+    };
 
-    const filter = (list, term) => list.filter(([k, c]) => {
-        console.log(term);
-        if (!term) return true;
-        let searchKey = (k + c?.identity?.label).toLowerCase();
-        return searchKey.includes(term.toLowerCase());
-    });
+    const filter = (list, term) =>
+        list.filter(([k, c]) => {
+            if (!term) return true;
+            let searchKey = (k + c?.identity?.label).toLowerCase();
+            return searchKey.includes(term.toLowerCase());
+        });
 </script>
 
-<div class="component-list"
-     class:show={selectingComponent}
-     on:blur={blurry}
-     bind:this={list}
-     tabindex="-1">
-    <p class="title animate bookshop-icon-string">{@html iconSvg("folder_open")} Components</p>
+<div
+    class="component-list"
+    class:show={selectingComponent}
+    on:blur={blurry}
+    bind:this={list}
+    tabindex="-1"
+>
+    <p class="title animate bookshop-icon-string">
+        {@html iconSvg("folder_open")} Components
+    </p>
     <button class="animate close">{@html iconSvg("close")}</button>
     <div class="search animate">
-        <input data-blur="list-child" on:blur={blurry} bind:this={input} type="text" bind:value={searchTerm} placeholder="Search">
+        <input
+            data-blur="list-child"
+            on:blur={blurry}
+            bind:this={input}
+            type="text"
+            bind:value={searchTerm}
+            placeholder="Search"
+        />
     </div>
     <ul>
-    {#each filter(Object.entries(components), searchTerm) as [key, component], i}
-        <li class="animate" style="transition-delay: {i/70}s;">
-            <button class="component bookshop-icon-string"
-                data-blur="list-child" 
-                on:mousedown={set(key)}
-                on:blur={blurry}>
-                {@html iconSvg(component?.identity?.icon)}
-                {component?.identity?.label}
-            </button>
-        </li>
-    {/each}
+        {#each filter(Object.entries(components), searchTerm) as [key, component], i}
+            <li class="animate" style="transition-delay: {i / 70}s;">
+                <button
+                    class="component bookshop-icon-string"
+                    data-blur="list-child"
+                    on:mousedown={set(key)}
+                    on:blur={blurry}
+                >
+                    {@html iconSvg(component?.identity?.icon)}
+                    {component?.identity?.label}
+                </button>
+            </li>
+        {/each}
     </ul>
 </div>
 
@@ -67,7 +82,7 @@
         position: absolute;
         z-index: 999999999;
         background-color: #fff;
-        border-right: solid 2px #AAA;
+        border-right: solid 2px #aaa;
         width: 300px;
         min-width: 300px;
         max-height: 100vh;
diff --git a/javascript-modules/engines/hugo-engine/lib/engine.js b/javascript-modules/engines/hugo-engine/lib/engine.js
index af689b5a..c840d11d 100644
--- a/javascript-modules/engines/hugo-engine/lib/engine.js
+++ b/javascript-modules/engines/hugo-engine/lib/engine.js
@@ -31,11 +31,12 @@ 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 (window.CloudCannon?.isMocked) {
+            if (useLocalHugo) {
                 await this.initializeLocalHugo();
             } else {
                 await this.initializeRemoteHugo();
@@ -73,7 +74,7 @@ export class Engine {
 
     async initializeLocalHugo() {
         const go = new Go();
-        const wasmOrigin = this.origin.replace(/\/[^\.\/]+\.js$/, hugoWasm.replace(/^\./, ''));
+        const wasmOrigin = this.origin.replace(/\/[^\.\/]+\.js/, hugoWasm.replace(/^\./, ''));
         const response = await fetch(wasmOrigin);
         const buffer = await response.arrayBuffer();
         const result = await WebAssembly.instantiate(buffer, go.importObject);
@@ -121,6 +122,7 @@ export class Engine {
 
     async render(target, name, props, globals, cloudcannonInfo, meta) {
         while (!window.renderHugo) await sleep(10);
+        await sleep(2000);
         window.loadHugoBookshopData(JSON.stringify(cloudcannonInfo));
 
         let source = this.getComponent(name);
diff --git a/javascript-modules/integration-tests/features/hugo/component_browser/hugo_bookshop_browser_granules.feature b/javascript-modules/integration-tests/features/hugo/component_browser/hugo_bookshop_browser_granules.feature
index d93baa6d..696d197f 100644
--- a/javascript-modules/integration-tests/features/hugo/component_browser/hugo_bookshop_browser_granules.feature
+++ b/javascript-modules/integration-tests/features/hugo/component_browser/hugo_bookshop_browser_granules.feature
@@ -71,10 +71,10 @@ Feature: Hugo Bookshop Component Browser Granular Steps
   @web
   Scenario: Bookshop component browser renders a component
     When 🌐 I load my site
+    And 🌐 "typeof window.BookshopBrowser !== 'undefined'" evaluates
     And 🌐 "window.bookshopBrowser?.hasRendered === true" evaluates
-    And 🌐 "window.bookshopBrowser.hasRendered = true" evaluates
     And 🌐 I trigger a mousedown on li:nth-of-type(2)>button
-    And 🌐 "window.bookshopBrowser.hasRendered === true" evaluates
+    And 🌐 "window.bookshopComponentHasRendered === true" evaluates
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
     *    🌐 The selector h1 should contain "Hello There, World"
diff --git a/javascript-modules/integration-tests/support/steps.js b/javascript-modules/integration-tests/support/steps.js
index 0c52cbd7..cc9f2b02 100644
--- a/javascript-modules/integration-tests/support/steps.js
+++ b/javascript-modules/integration-tests/support/steps.js
@@ -212,6 +212,10 @@ const p_retry = async (fn, wait, attempts) => {
 
 const loadPage = async (url, world) => {
   await ensurePage(world);
+  world.page
+    .on('console', message => world.trackPuppeteerLog(`${message.type().toUpperCase()}: ${message.text()}`))
+    .on('pageerror', ({ message }) => world.trackPuppeteerError(message))
+    .on('requestfailed', request => world.trackPuppeteerError(`${request.failure().errorText} ${request.url()}`));
   await p_retry(
     () => world.page.goto(world.replacePort(url), {
       waitUntil: 'networkidle0',
@@ -219,10 +223,6 @@ const loadPage = async (url, world) => {
     500, // ms between attempts
     20 // attempts
   );
-  world.page
-    .on('console', message => world.trackPuppeteerLog(`${message.type().toUpperCase()}: ${message.text()}`))
-    .on('pageerror', ({ message }) => world.trackPuppeteerError(message))
-    .on('requestfailed', request => world.trackPuppeteerError(`${request.failure().errorText} ${request.url()}`));
 }
 
 const readyCloudCannon = async (data, world) => {
@@ -240,6 +240,14 @@ const readyCloudCannon = async (data, world) => {
   await p_sleep(50);
 }
 
+// This flag is used in some tests to determine whether to load a remote file
+const readyEmptyCloudCannon = async (world) => {
+  if (!world.page) throw Error("No page open");
+  const script = `window.CloudCannon = { isMocked : true };`;
+  await world.page.addScriptTag({ content: script });
+  await p_sleep(50);
+}
+
 /* * * * * * * * * *
  *                 *
  * PUPPETEER STEPS *
@@ -282,7 +290,8 @@ When(/^🌐 "(.+)" evaluates$/i, { timeout: 5 * 1000 }, async function (statemen
   try {
     await this.page.waitForFunction(statement, { timeout: 4 * 1000 });
   } catch (e) {
-    this.trackPuppeteerError(`${statement} didn't evaluate within 4s`);
+    this.trackPuppeteerError(`${statement} failed:\n${e.toString()}`);
+    assert.deepEqual(this.puppeteerErrors(), []);
   }
 });
 
@@ -341,7 +350,8 @@ Then(/^🌐 "(.+)" should evaluate$/i, { timeout: 5 * 1000 }, async function (st
   try {
     await this.page.waitForFunction(statement, { timeout: 4 * 1000 });
   } catch (e) {
-    throw Error(`${statement} didn't evaluate within 4s`)
+    this.trackPuppeteerError(`${statement} failed:\n${e.toString()}`);
+    assert.deepEqual(this.puppeteerErrors(), []);
   }
 });
 
@@ -417,6 +427,8 @@ Given(/^🌐 I (?:have loaded|load) my site( in CloudCannon)?$/i, { timeout: 60
       this.trackPuppeteerError(e.toString());
       this.trackPuppeteerError(`Bookshop didn't do an initial render within 4s`);
     }
+  } else {
+    await readyEmptyCloudCannon(this);
   }
 
   assert.deepEqual(this.puppeteerErrors(), []);