[FEATURE] Support detailed logging of render function when live editing Hugo site

[markdumay]

One of CloudCannon's distinct features it its support for live editing. However, configuring bookshop components that are compatible with live editing can sometimes be quite tricky. Although CloudCannon does give some visual feedback when the site configuration is incorrect (e.g. a partial is malfunctioning or an extra file cannot be found), not all required debugging information is available. In several cases, the live editing just results in a blank page (usually after a timeout) without providing any feedback.

To improve the development experience, it would be great to have access to more detailed debugging information. The current build pipeline generates a file bookshop-live.js when building a Hugo site. This JavaScript includes a function render() that invokes the Hugo wasm. It appears the array window.hugo_wasm_logging contains detailed information about the live page build. However, currently this information is discarded entirely.

It would be great to somehow expose the build information contained in window.hugo_wasm_logging. As a workaround, I usually set a breakpoint using Chrome dev tools on the line that clears window.hugo_wasm_logging (see the code snippet below). However, this is quite tedious and error prone.

async render(target, name, props, globals, logger) {

  […]

  while (buildError && render_attempts < 5) {
    if (this.componentQuack(buildError, window.hugo_wasm_logging) === null) {
    break;
  }
  window.hugo_wasm_logging = []; // set a breakpoint on this line to view detailed build logs
  buildError = window.buildHugo();
  render_attempts += 1;
  }

  […]
}

[bglw]

Shipped in v3.11.0 🙂

If there's any error Bookshop will re-log that content to the browser console.