fix: bookshop tags can now be broken up onto multiple lines in all ssgs

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

@@ -34,7 +34,7 @@ const rewriteTag = function (token, src, liveMarkup) {
         let componentName;
         token.name = 'include';
         raw = raw.replace(
-            /bookshop_include ('|")?(\S+)/,
+            /bookshop_include[\r\n\s]+('|")?(\S+)/,
             (_, quote, component) => {
                 componentName = component.replace(/('|")$/, '');
                 return `include ${quote || ''}_bookshop_include_${component}`
@@ -54,7 +54,7 @@ const rewriteTag = function (token, src, liveMarkup) {
         let componentName;
         token.name = 'include';
         raw = raw.replace(
-            /bookshop ('|")?(\S+)/,
+            /bookshop[\r\n\s]+('|")?(\S+)/,
             (_, quote, component) => {
                 componentName = component.replace(/('|")$/, '');
                 return `include ${quote || ''}_bookshop_${component}`

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

@@ -1,7 +1,7 @@
 const TOKENS = {
   DELIM: /"|'|`/,
   ESCAPE: /\\/,
-  SPACE: /\s/,
+  SPACE: /\s|\r|\n/,
   INSCOPE: /\(/,
   OUTSCOPE: /\)/,
   SCOPE: /\./,

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

@@ -88,4 +88,23 @@ test(`Converts a dot index into a JS object property`, async t => {
     ident = `(index . 1234)`;
     output = (new IdentifierParser(ident)).build();
     t.deepEqual(output, `1234`);
+});
+
+test(`Multiline dicts and slices`, async t => {
+    const ident = `(dict 
+"contents" 
+(slice 1 "2" 
+    (dict 
+        "a" .Params.b)
+) "len" (
+    len
+    .some_array
+))`;
+    const output = (new IdentifierParser(ident)).build();
+    t.deepEqual(output, {
+        "contents": ["1", `"2"`, {
+            "a": "Params.b"
+        }],
+        "len": `(\n    len\n    .some_array\n)`
+    });
 });

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

@@ -24,7 +24,7 @@ const rewriteTag = function (token, src, liveMarkup) {
         let componentName;
         token.name = 'include';
         raw = raw.replace(
-            /bookshop_include (\S+)/,
+            /bookshop_include[\r\n\s]+(\S+)/,
             (_, component) => {
                 componentName = component
                 return `include _bookshop_include_${component}`
@@ -42,7 +42,7 @@ const rewriteTag = function (token, src, liveMarkup) {
         let componentName;
         token.name = 'include';
         raw = raw.replace(
-            /bookshop (\S+)/,
+            /bookshop[\r\n\s]+(\S+)/,
             (_, component) => {
                 componentName = component;
                 return `include _bookshop_${component}`
@@ -59,7 +59,7 @@ const rewriteTag = function (token, src, liveMarkup) {
     // {% include some-file.html prop=value %} --> {% include "some-file.html" prop: value %}
     if (token.name && token.name.match(/^include/)) {
         raw = raw.replace(/=/g, ': ');
-        raw = raw.replace(/\%\s+?include\s([^"'][^\s]+)/gi, '% include "$1"');
+        raw = raw.replace(/\%[\r\n\s]+?include[\r\n\s]+([^"'][^\s]+)/gi, '% include "$1"');
     }
 
     return [

javascript-modules/generator-plugins/eleventy/eleventy-bookshop/lib/eleventy-one-bookshop.js

@@ -29,7 +29,7 @@ const contextHunt = (ctx, hash, index) => {
 module.exports = (tagType, locations, baseLocation) => (liquidEngine) => {
     return {
         parse: function (tagToken, remainingTokens) {
-            const [, component, args] = tagToken.args.match(/^['"]?([^\s'"]+)['"]?\s(.*)$/);
+            const [, component, args] = tagToken.args.match(/^['"]?([^\s'"]+)['"]?[\r\n\s]+([\s\S]*)$/);
             this.component = component;
             this.args = args;
         },

javascript-modules/generator-plugins/eleventy/eleventy-bookshop/lib/eleventy-zero-bookshop.js

@@ -26,7 +26,7 @@ const contextHunt = (ctx, hash, index) => {
 module.exports = (tagType, locations, baseLocation) => (liquidEngine) => {
     return {
         parse: function (tagToken, remainingTokens) {
-            const [, component, args] = tagToken.args.match(/^['"]?([^\s'"]+)['"]?\s(.*)$/);
+            const [, component, args] = tagToken.args.match(/^['"]?([^\s'"]+)['"]?[\r\n\s]+([\s\S]*)$/);
             this.component = component;
             this.args = args;
         },

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

@@ -227,4 +227,44 @@ Feature: Eleventy Bookshop CloudCannon Live Editing Selective Re-rendering
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
     *    🌐 The selector span should contain "New Tag"
-    *    🌐 The selector .page>*:nth-child(3) should contain "Block Three"
+    *    🌐 The selector .page>*:nth-child(3) should contain "Block Three"
+
+  Scenario: Bookshop live renders a multiline component tag
+    Given a component-lib/components/outer/outer.eleventy.liquid file containing:
+      """
+      <div> 
+        {% 
+          bookshop 
+          "single" 
+          title:
+          contents.title
+        %}
+      </div>
+      """
+    Given [front_matter]:
+      """
+      layout: layouts/default.liquid
+      contents:
+        title: My title
+      """
+    And a site/index.html file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      {% 
+        bookshop 
+        "outer" 
+        contents:
+        contents 
+      %}
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    When 🌐 CloudCannon pushes new yaml:
+      """
+      contents:
+        title: Your title
+      """
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector h1 should contain "Your title"

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

@@ -312,4 +312,65 @@ Feature: Hugo Bookshop CloudCannon Live Editing Selective Re-rendering
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
     *    🌐 The selector span should contain "New Tag"
-    *    🌐 The selector .page>*:nth-child(3) should contain "Block Three"
+    *    🌐 The selector .page>*:nth-child(3) should contain "Block Three"
+
+  Scenario: Bookshop live renders a multiline component tag
+    Given a component-lib/components/outer/outer.hugo.html file containing:
+      """
+      <div> 
+        {{ partial 
+          "bookshop" 
+          (
+            slice 
+            "single" 
+            (
+              dict 
+              "title" 
+              .contents.title
+            )
+          ) 
+        }}
+      </div>
+      """
+    Given [front_matter]:
+      """
+      contents:
+        title: My title
+      """
+    And a site/content/_index.md file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      """
+    And a site/layouts/index.html file containing:
+      """
+      <html>
+      <body>
+      {{ partial 
+        "bookshop_bindings" 
+        `(dict "contents" .Params.contents )`
+      }}
+      {{ partial 
+        "bookshop" 
+        (
+          slice 
+          "outer" 
+          (
+            dict 
+            "contents" .Params.contents
+          )
+        )
+      }}
+      </body>
+      </html>
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    When 🌐 CloudCannon pushes new yaml:
+      """
+      contents:
+        title: Your title
+      """
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector h1 should contain "Your title"

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

@@ -221,4 +221,42 @@ Feature: Jekyll Bookshop CloudCannon Live Editing Selective Re-rendering
     Then 🌐 There should be no errors
     *    🌐 There should be no logs
     *    🌐 The selector span should contain "New Tag"
-    *    🌐 The selector .page>*:nth-child(3) should contain "Block Three"
+    *    🌐 The selector .page>*:nth-child(3) should contain "Block Three"
+
+  Scenario: Bookshop live renders a multiline component tag
+    Given a component-lib/components/outer/outer.jekyll.html file containing:
+      """
+      <div> 
+        {% 
+          bookshop 
+          single 
+          title=include.contents.title
+        %} 
+      </div>
+      """
+    Given [front_matter]:
+      """
+      layout: default
+      contents:
+        title: My title
+      """
+    And a site/index.html file containing:
+      """
+      ---
+      [front_matter]
+      ---
+      {% 
+        bookshop 
+        outer 
+        contents=page.contents
+      %}
+      """
+    And 🌐 I have loaded my site in CloudCannon
+    When 🌐 CloudCannon pushes new yaml:
+      """
+      contents:
+        title: Your title
+      """
+    Then 🌐 There should be no errors
+    *    🌐 There should be no logs
+    *    🌐 The selector h1 should contain "Your title"

javascript-modules/live/lib/app/live.js

@@ -48,7 +48,7 @@ export const getLive = (engines) => class BookshopLive {
         try {
             await this.engines[0].render(dom, componentName, scope, { ...this.globalData });
         } catch (e) {
-            console.warn(`Error rendering bookshop component ${componentName}`, e);
+            console.warn(`Error rendering bookshop component ${componentName}`, e.toString());
             console.warn(`This is expected in certain cases, and may not be an issue, especially when deleting or re-ordering components.`)
         }
     }

javascript-modules/live/lib/app/parsers/comment-parser.js

@@ -1,6 +1,6 @@
 const TOKENS = {
   ESCAPE: /\\/,
-  SPACE: /\s/,
+  SPACE: /\s|\r|\n/,
   INSCOPE: /\(/,
   OUTSCOPE: /\)/,
   END: /END/,

javascript-modules/live/lib/app/parsers/comment-parser.test.js

@@ -36,3 +36,13 @@ test(`Handles EOS as boolean`, async t => {
     });
 });
 
+test(`Handles multiline comments`, async t => {
+    const comment = `name(test)
+                     another_name(inner 
+                                        text)`;
+    const output = (new CommentParser(comment)).build();
+    t.deepEqual(output, {
+        name: "test",
+        another_name: "inner \n                                        text"
+    });
+});

javascript-modules/live/lib/app/parsers/params-parser.js

@@ -2,7 +2,7 @@ const TOKENS = {
   ASSIGN: /:|=/,
   DELIM: /"|'|`/,
   ESCAPE: /\\/,
-  SPACE: /\s/,
+  SPACE: /\s|\r|\n/,
   INSCOPE: /\(/,
   OUTSCOPE: /\)/,
   INDEX: /\[/,

javascript-modules/live/lib/app/parsers/params-parser.test.js

@@ -110,4 +110,24 @@ test(`Ranges`, async t => {
     t.deepEqual(output, [
         ["t", `(min..max)[0]`]
     ]);
+});
+
+test(`Multiline Hugo dict`, async t => {
+    const params = `bind: (dict 
+"a" (slice 
+        1 
+        2 
+        3
+    )
+)`;
+    const output = (new ParamsParser(params)).build();
+    t.deepEqual(output, [
+        ["bind", `(dict 
+"a" (slice 
+        1 
+        2 
+        3
+    )
+)`]
+    ]);
 });