Add padding for liquid doc content (#802)

Author: aswamy

.changeset/hungry-socks-report.md

@@ -0,0 +1,5 @@
+---
+'@shopify/prettier-plugin-liquid': patch
+---
+
+Add padding for liquid doc content

.changeset/yellow-kids-bake.md

@@ -0,0 +1,5 @@
+---
+'@shopify/liquid-html-parser': patch
+---
+
+[internal] Fix typo in liquid doc parser

packages/liquid-html-parser/src/stage-1-cst.ts

@@ -1369,19 +1369,19 @@ function toLiquidDocAST(source: string, matchingSource: string, offset: number)
   /**
    * Reusable text node type
    */
-  const textNode = {
+  const textNode = () => ({
     type: ConcreteNodeTypes.TextNode,
     value: function () {
       return (this as any).sourceString;
     },
     locStart,
     locEnd,
     source,
-  };
+  });
 
   const LiquidDocMappings: Mapping = {
     Node: 0,
-    TextNode: textNode,
+    TextNode: textNode(),
     paramNode: {
       type: ConcreteNodeTypes.LiquidDocParamNode,
       name: 'param',
@@ -1400,9 +1400,9 @@ function toLiquidDocAST(source: string, matchingSource: string, offset: number)
       source,
       content: 2,
     },
-    descriptionContent: textNode,
+    descriptionContent: textNode(),
     paramType: 2,
-    paramTypeContent: textNode,
+    paramTypeContent: textNode(),
     paramName: {
       type: ConcreteNodeTypes.LiquidDocParamNameNode,
       content: 0,
@@ -1419,7 +1419,7 @@ function toLiquidDocAST(source: string, matchingSource: string, offset: number)
       source,
       required: false,
     },
-    paramDescription: textNode,
+    paramDescription: textNode(),
     exampleNode: {
       type: ConcreteNodeTypes.LiquidDocExampleNode,
       name: 'example',
@@ -1428,9 +1428,9 @@ function toLiquidDocAST(source: string, matchingSource: string, offset: number)
       source,
       content: 2,
     },
-    exampleContent: textNode,
-    textValue: textNode,
-    fallbackNode: textNode,
+    exampleContent: textNode(),
+    textValue: textNode(),
+    fallbackNode: textNode(),
   };
 
   return toAST(res, LiquidDocMappings);

packages/prettier-plugin-liquid/src/printer/print/liquid.ts

@@ -504,8 +504,22 @@ export function printLiquidDoc(
   print: LiquidPrinter,
   _args: LiquidPrinterArgs,
 ) {
-  const body = path.map((p: any) => print(p), 'nodes');
-  return [indent([hardline, join(hardline, body)]), hardline];
+  const nodes = path.map((p: any) => print(p), 'nodes') as string[][];
+
+  if (nodes.length === 0) return [];
+
+  const lines = [nodes[0]] as (string[] | doc.builders.Concat)[];
+
+  for (let i = 1; i < nodes.length; i++) {
+    lines.push(hardline);
+    // If the tag name is different from the previous one, add an extra line break
+    if (nodes[i - 1][0] !== nodes[i][0]) {
+      lines.push(hardline);
+    }
+    lines.push(nodes[i]);
+  }
+
+  return [indent([hardline, lines]), hardline];
 }
 
 export function printLiquidDocParam(

packages/prettier-plugin-liquid/src/test/liquid-doc/fixed.liquid

@@ -77,6 +77,7 @@ It should remove empty lines at the end of the example content
 It should respect example content with param and description
 {% doc %}
   @param paramName - param with description
+
   @example
   This is a valid example
 {% enddoc %}
@@ -102,7 +103,24 @@ It should add a space between a description tag and content
 It should handle param, example, and description nodes
 {% doc %}
   @param {String} paramName - param with description
+
   @example
   This is a valid example
+
   @description This is a description
 {% enddoc %}
+
+It should add padding between dissimilar nodes
+{% doc %}
+  @param {String} param1 - param with description
+  @param {String} param2 - param with description
+
+  @example
+  This is a valid example
+  @example
+  This is another valid example
+
+  @description This is a description
+
+  @param {String} param3 - param with description
+{% enddoc %}

packages/prettier-plugin-liquid/src/test/liquid-doc/index.liquid

@@ -107,3 +107,14 @@ It should handle param, example, and description nodes
   @description This is a description
 {% enddoc %}
 
+It should add padding between dissimilar nodes
+{% doc %}
+  @param {String} param1 - param with description
+  @param {String} param2 - param with description
+  @example
+  This is a valid example
+  @example
+  This is another valid example
+  @description This is a description
+  @param {String} param3 - param with description
+{% enddoc %}