fix(hugo): correctly handle nested component paths in live editing

Components can now correctly reference other components that have
a nested path, such as `generic/button`

Author: bglw

javascript-modules/engines/hugo-engine/hugo-renderer/tpl/bookshop_library/bookshop_components.go

@@ -5,6 +5,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"html/template"
+	"strings"
 
 	"hugo-renderer/deps"
 	"hugo-renderer/tpl/internal"
@@ -76,31 +77,37 @@ func RetrieveBookshopPartial(bookshop_key string) (*template.Template, bool) {
 	return nil, false
 }
 
+func bookshopKey(full_key string) string {
+	split := strings.Split(full_key, "/")
+	base := split[len(split)-1]
+	return fmt.Sprintf("components/%s/%s.hugo.html", full_key, base)
+}
+
 // UnwrapBookshopPartial takes the dict or slice that the {{ partial "bookshop" ... }}
 // was given, and pulls out the component / partial name that should be rendered.
 // TODO(bookshop): Ideally our templating support gets better,
 // and we can call the production bookshop module partials.
 func UnwrapBookshopComponent(context interface{}) (string, interface{}) {
 	if componentData, ok := context.(map[string]interface{}); ok {
 		if component, ok := componentData["_bookshop_name"]; ok {
-			key := fmt.Sprintf("components/%s/%s.hugo.html", component.(string), component.(string))
+			key := bookshopKey(component.(string))
 			return key, context
 		}
 		return "err_no_bookshop_name_key", context
 	}
 	if componentData, ok := context.([]interface{}); ok {
 		if component, ok := componentData[0].(string); ok {
-			key := fmt.Sprintf("components/%s/%s.hugo.html", component, component)
+			key := bookshopKey(component)
 			return key, componentData[1]
 		}
 		return "err_slice_zero_not_string", context
 	}
 	if componentData, ok := context.([]string); ok {
-		key := fmt.Sprintf("components/%s/%s.hugo.html", componentData[0], componentData[0])
+		key := bookshopKey(componentData[0])
 		return key, componentData[1]
 	}
 	if componentName, ok := context.(string); ok {
-		key := fmt.Sprintf("components/%s/%s.hugo.html", componentName, componentName)
+		key := bookshopKey(componentName)
 		return key, nil
 	}
 	return "err_not_map_slice_or_string", context

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

@@ -285,4 +285,26 @@ Feature: Eleventy Bookshop CloudCannon Live Editing Selective Re-rendering
     And 🌐 I have loaded my site in CloudCannon
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
-    *    🌐 The selector h1 should contain "Hello :)"
+    *    🌐 The selector h1 should contain "Hello :)"
+
+  Scenario: Bookshop live renders a nested component path
+    Given a component-lib/components/outer/outer.eleventy.liquid file containing:
+      """
+      <div> {% bookshop "generic/button" %} </div>
+      """
+    Given a component-lib/components/generic/button/button.eleventy.liquid file containing:
+      """
+      <button>Button!</button>
+      """
+    Given [front_matter]: "layout: layouts/default.liquid"
+    And a site/index.html file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      {% bookshop "outer" %}
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector button should contain "Button!"

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

@@ -402,4 +402,34 @@ Feature: Hugo Bookshop CloudCannon Live Editing Selective Re-rendering
     And 🌐 I have loaded my site in CloudCannon
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
-    *    🌐 The selector h1 should contain "Hello :)"
+    *    🌐 The selector h1 should contain "Hello :)"
+
+  Scenario: Bookshop live renders a nested component path
+    Given a component-lib/components/outer/outer.hugo.html file containing:
+      """
+      <div> {{ partial "bookshop" "generic/button" }} </div>
+      """
+    Given a component-lib/components/generic/button/button.hugo.html file containing:
+      """
+      <button>Button!</button>
+      """
+    Given [front_matter]: "empty: true"
+    And a site/content/_index.md file containing:
+      """
+      ---
+      ---
+      """
+    And a site/layouts/index.html file containing:
+      """
+      <html>
+      <body>
+      {{ partial "bookshop_bindings" "" }}
+      {{ partial "bookshop" "outer" }}
+      </body>
+      </html>
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector button should contain "Button!"
+

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

@@ -281,4 +281,26 @@ Feature: Jekyll Bookshop CloudCannon Live Editing Selective Re-rendering
     And 🌐 I have loaded my site in CloudCannon
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
-    *    🌐 The selector h1 should contain "Hello :)"
+    *    🌐 The selector h1 should contain "Hello :)"
+
+  Scenario: Bookshop live renders a nested component path
+    Given a component-lib/components/outer/outer.jekyll.html file containing:
+      """
+      <div> {% bookshop generic/button %} </div>
+      """
+    Given a component-lib/components/generic/button/button.jekyll.html file containing:
+      """
+      <button>Button!</button>
+      """
+    Given [front_matter]: "layout: default"
+    And a site/index.html file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      {% bookshop outer %}
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector button should contain "Button!"