Merge pull request #148 from CloudCannon/fix/hugo-error-boundary

Fix/hugo error boundary

javascript-modules/engines/eleventy-engine/lib/engine.js

@@ -175,7 +175,7 @@ export class Engine {
                 this.files[component_key] = [
                     `<div style="padding: 10px; background-color: lightcoral; color: black; font-weight: bold;">`,
                     `Failed to render ${deepest_errored_component[1]}. <br/>`,
-                    `<pre style="margin-top: 10px; background-color: lightcoral; border: solid 1px black;">`,
+                    `<pre style="margin-top: 10px; background-color: lightcoral; border: solid 1px black; white-space: pre-line;">`,
                     `<code style="font-family: monospace; color: black;">${error_string.replace(/</, '&lt;')}</code></pre>`,
                     `</div>`
                 ].join('\n');

javascript-modules/engines/hugo-engine/lib/engine.js

@@ -217,7 +217,7 @@ export class Engine {
                     [deepest_errored_component]: [
                         `<div style="padding: 10px; background-color: lightcoral; color: black; font-weight: bold;">`,
                         `Failed to render ${deepest_errored_component}. <br/>`,
-                        `<pre style="margin-top: 10px; background-color: lightcoral; border: solid 1px black;">`,
+                        `<pre style="margin-top: 10px; background-color: lightcoral; border: solid 1px black; white-space: pre-line;">`,
                         `<code style="font-family: monospace; color: black;">${error_msg.replace(/</, '&lt;')}</code></pre>`,
                         `</div>`
                     ].join('\n')
@@ -227,7 +227,10 @@ export class Engine {
 
             const error_logs = log_messages.filter(log => log.startsWith("ERROR")).join("\n");
             const missing_regex = /Component "([^"]+)" does not exist/ig;
-            file_stack = [...error_logs.matchAll(missing_regex)].map(([, file]) => `layouts/partials/bookshop/components/${file}/${file}.hugo.html`);
+            file_stack = [...error_logs.matchAll(missing_regex)].map(([, file]) => {
+                let filename = file.split('/').pop();
+                return `layouts/partials/bookshop/components/${file}/${filename}.hugo.html`;
+            });
             if (file_stack.length) {
                 const deepest_errored_component = file_stack[file_stack.length-1];
                 window.writeHugoFiles(JSON.stringify({

javascript-modules/engines/jekyll-engine/lib/engine.js

@@ -181,7 +181,7 @@ export class Engine {
                 this.files[component_key] = [
                     `<div style="padding: 10px; background-color: lightcoral; color: black; font-weight: bold;">`,
                     `Failed to render ${deepest_errored_component[1]}. <br/>`,
-                    `<pre style="margin-top: 10px; background-color: lightcoral; border: solid 1px black;">`,
+                    `<pre style="margin-top: 10px; background-color: lightcoral; border: solid 1px black; white-space: pre-line;">`,
                     `<code style="font-family: monospace; color: black;">${error_string.replace(/</, '&lt;')}</code></pre>`,
                     `</div>`
                 ].join('\n');

javascript-modules/integration-tests/features/eleventy/live_editing/eleventy_bookshop_live_errors.feature

@@ -66,14 +66,14 @@ Feature: Eleventy Bookshop CloudCannon Live Editing Error Boundaries
     *    🌐 The selector h1:nth-of-type(2) should contain "Hello World 02"
 
   Scenario: Bookshop replaces non-existent components in an error boundary
-    # Note: No `bad.eleventy.liquid` component has been created.
+    # Note: No `really/bad` component has been created.
     Given 🌐 I have loaded my site in CloudCannon
     When 🌐 CloudCannon pushes new yaml:
       """
       components:
         - _bookshop_name: good
           text: Hello World 01
-        - _bookshop_name: bad
+        - _bookshop_name: really/bad
         - _bookshop_name: good
           text: Hello World 02
       """

javascript-modules/integration-tests/features/hugo/live_editing/hugo_bookshop_live_errors.feature

@@ -71,14 +71,14 @@ Feature: Hugo Bookshop CloudCannon Live Editing Error Boundaries
     *    🌐 The selector h1:nth-of-type(2) should contain "Hello World 02"
 
   Scenario: Bookshop replaces non-existent components in an error boundary
-    # Note: No `bad.hugo.html` component has been created.
+    # Note: No `really/bad` component has been created.
     Given 🌐 I have loaded my site in CloudCannon
     When 🌐 CloudCannon pushes new yaml:
       """
       components:
         - _bookshop_name: good
           text: Hello World 01
-        - _bookshop_name: bad
+        - _bookshop_name: really/bad
         - _bookshop_name: good
           text: Hello World 02
       """

javascript-modules/integration-tests/features/jekyll/live_editing/jekyll_bookshop_live_errors.feature

@@ -65,14 +65,14 @@ Feature: Jekyll Bookshop CloudCannon Live Editing Error Boundaries
     *    🌐 The selector h1:nth-of-type(2) should contain "Hello World 02"
 
   Scenario: Bookshop replaces non-existent components in an error boundary
-    # Note: No `bad.jekyll.html` component has been created.
+    # Note: No `really/bad` component has been created.
     Given 🌐 I have loaded my site in CloudCannon
     When 🌐 CloudCannon pushes new yaml:
       """
       components:
         - _bookshop_name: good
           text: Hello World 01
-        - _bookshop_name: bad
+        - _bookshop_name: really/bad
         - _bookshop_name: good
           text: Hello World 02
       """