fix(hugo): iterating over a map now works correctly when live editing

bglw · bglw · commit 408573f6df15 · 2022-02-24T13:14:04.000+13:00
diff --git a/javascript-modules/engines/hugo-engine/lib/translateTextTemplate.js b/javascript-modules/engines/hugo-engine/lib/translateTextTemplate.js
@@ -54,7 +54,7 @@ const rewriteTag = function (token, src, endTags, liveMarkup) {
         let [, index_variable, iterator] = raw.match(TOKENS.INDEX_LOOP);
         const r = required_wrapper_hugo_func(iterator);
         outputToken.text = [`${outputToken.text}`,
-        `{{${r[0]} (printf \`<!--bookshop-live context(.: (index (${tidy(iterator)}) %d))-->\` ${index_variable})${r[1]} | safeHTML }}`
+        `{{${r[0]} (printf \`<!--bookshop-live context(.: (index (${tidy(iterator)}) %v))-->\` (jsonify ${index_variable}))${r[1]} | safeHTML }}`
         ].join('')
     } else if (liveMarkup && TOKENS.LOOP.test(raw)) {
         let [, iterator] = raw.match(TOKENS.LOOP);
diff --git a/javascript-modules/engines/hugo-engine/lib/translateTextTemplate.test.js b/javascript-modules/engines/hugo-engine/lib/translateTextTemplate.test.js
@@ -72,7 +72,7 @@ test("add live markup to loops with iterators", t => {
     const input = `{{range $loop_index, $element := .columns}}<p>{{$element}}</p>{{ end }}`;
     const expected = [`{{range $loop_index, $element := .columns}}`,
         `{{ \`<!--bookshop-live stack-->\` | safeHTML }}`,
-        `{{ (printf \`<!--bookshop-live context(.: (index (.columns) %d))-->\` $loop_index) | safeHTML }}`,
+        `{{ (printf \`<!--bookshop-live context(.: (index (.columns) %v))-->\` (jsonify $loop_index)) | safeHTML }}`,
         `<p>{{$element}}</p>`,
         `{{ \`<!--bookshop-live unstack-->\` | safeHTML }}`,
         `{{ end }}`
diff --git a/javascript-modules/integration-tests/features/hugo/live_editing/hugo_bookshop_live_edge_cases.feature b/javascript-modules/integration-tests/features/hugo/live_editing/hugo_bookshop_live_edge_cases.feature
@@ -75,4 +75,58 @@ Feature: Hugo Bookshop CloudCannon Live Editing Edge Cases
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
     *    🌐 The selector h2 should match '<h2 class="class-two" data-cms-bind="#heading"><!--bookshop-live name(text) params(.: (.))--><span data-cms-bind="#heading.copy">New heading.</span><!--bookshop-live end--></h2>'
+  
+  Scenario: Hugo Bookshop live renders a map iterator
+    Given a component-lib/components/page/page.hugo.html file containing:
+      """
+      {{ range . }}
+      <div>
+        {{ partial "bookshop" . }}
+        {{ range $key, $value := . }}
+          <span>{{ $key }}: {{ . }}</span>
+        {{ end }}
+      </div>
+      {{ end }}
+      """
+    Given a component-lib/components/text/text.hugo.html file containing:
+      """
+      <p>{{ markdownify .text }}</p>
+      """
+    Given [front_matter]:
+      """
+      components:
+        - _bookshop_name: text
+          text: Hello
+      """
+    And a site/content/_index.md file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      """
+    And a site/layouts/index.html file containing:
+      """
+      <html>
+      <body>
+      {{ partial "bookshop_bindings" `.Params.components` }}
+      {{ partial "bookshop" (slice "page" .Params.components) }}
+      </body>
+      </html>
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    When 🌐 CloudCannon pushes new yaml:
+      """
+      components:
+        - _bookshop_name: text
+          text: Hello
+        - _bookshop_name: text
+          text: Hooray
+      """
+    And  🌐 "window.bookshopLive?.renderCount === 2" evaluates
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector div:nth-of-type(1)>span:nth-of-type(1) should contain '_bookshop_name: text'
+    *    🌐 The selector div:nth-of-type(1)>span:nth-of-type(2) should contain 'text: Hello'
+    *    🌐 The selector div:nth-of-type(2)>span:nth-of-type(1) should contain '_bookshop_name: text'
+    *    🌐 The selector div:nth-of-type(2)>span:nth-of-type(2) should contain 'text: Hooray'
   
