introduced snippet tag in ohm

.changeset/dull-jobs-tap.md

@@ -0,0 +1,6 @@
+---
+'@shopify/prettier-plugin-liquid': minor
+'@shopify/liquid-html-parser': minor
+---
+
+Added parsing support for the `snippet` tag by updating the ohm rules

packages/liquid-html-parser/grammar/liquid-html.ohm

@@ -78,6 +78,7 @@ Liquid <: Helpers {
     | liquidTagOpenIf
     | liquidTagOpenPaginate
     | liquidTagOpenUnless
+    | liquidTagOpenSnippet
 
   liquidTagOpen =
     | liquidTagOpenStrict
@@ -105,6 +106,7 @@ Liquid <: Helpers {
   liquidTagIncrement = liquidTagRule<"increment", variableSegmentAsLookupMarkup>
   liquidTagDecrement = liquidTagRule<"decrement", variableSegmentAsLookupMarkup>
   liquidTagOpenCapture = liquidTagOpenRule<"capture", variableSegmentAsLookupMarkup>
+  liquidTagOpenSnippet = liquidTagOpenRule<"snippet", variableSegmentAsLookupMarkup>
   variableSegmentAsLookupMarkup = variableSegmentAsLookup space*
 
   liquidTagSection = liquidTagRule<"section", liquidTagSectionMarkup>
@@ -322,6 +324,7 @@ Liquid <: Helpers {
     | "if"
     | "unless"
     | "tablerow"
+    | "snippet"
     ) endOfIdentifier
 
   delimTag = "-%}" | "%}"

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

@@ -794,6 +794,17 @@ describe('Unit: Stage 1 (CST)', () => {
         });
       });
 
+      it('should parse snippet arguments as a singular liquid variable lookup', () => {
+        const expression = `var`;
+        const type = 'VariableLookup';
+        for (const { toCST, expectPath } of testCases) {
+          cst = toCST(`{% snippet ${expression} -%}`);
+          expectPath(cst, '0.type').to.equal('LiquidTagOpen');
+          expectPath(cst, '0.name').to.equal('snippet');
+          expectPath(cst, '0.markup.type').to.equal(type);
+        }
+      });
+
       it('should parse when arguments as an array of liquid expressions', () => {
         [
           { expression: `"string"`, args: [{ type: 'String' }] },

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

@@ -237,6 +237,7 @@ export type ConcreteLiquidTagOpen = ConcreteLiquidTagOpenBaseCase | ConcreteLiqu
 export type ConcreteLiquidTagOpenNamed =
   | ConcreteLiquidTagOpenCase
   | ConcreteLiquidTagOpenCapture
+  | ConcreteLiquidTagOpenSnippet
   | ConcreteLiquidTagOpenIf
   | ConcreteLiquidTagOpenUnless
   | ConcreteLiquidTagOpenForm
@@ -254,6 +255,8 @@ export interface ConcreteLiquidTagOpenBaseCase extends ConcreteLiquidTagOpenNode
 
 export interface ConcreteLiquidTagOpenCapture
   extends ConcreteLiquidTagOpenNode<NamedTags.capture, ConcreteLiquidVariableLookup> {}
+export interface ConcreteLiquidTagOpenSnippet
+  extends ConcreteLiquidTagOpenNode<NamedTags.snippet, ConcreteLiquidVariableLookup> {}
 
 export interface ConcreteLiquidTagOpenCase
   extends ConcreteLiquidTagOpenNode<NamedTags.case, ConcreteLiquidExpression> {}
@@ -746,6 +749,7 @@ function toCST<T>(
     },
 
     liquidTagOpenCapture: 0,
+    liquidTagOpenSnippet: 0,
     liquidTagOpenForm: 0,
     liquidTagOpenFormMarkup: 0,
     liquidTagOpenFor: 0,

packages/liquid-html-parser/src/stage-2-ast.spec.ts

@@ -637,6 +637,25 @@ describe('Unit: Stage 2 (AST)', () => {
         });
       });
 
+      it('should parse snippet blocks', () => {
+        for (const { toAST, expectPath, expectPosition } of testCases) {
+          ast = toAST(`{% snippet hello_snippet %}{% echo "Hello content" %}{% endsnippet %}`);
+          expectPath(ast, 'children.0').to.exist;
+          expectPath(ast, 'children.0.type').to.eql('LiquidTag');
+          expectPath(ast, 'children.0.name').to.eql('snippet');
+          expectPath(ast, 'children.0.markup.type').to.eql('VariableLookup');
+          expectPath(ast, 'children.0.markup.name').to.eql('hello_snippet');
+
+          expectPath(ast, 'children.0.children.0.type').to.eql('LiquidTag');
+          expectPath(ast, 'children.0.children.0.name').to.eql('echo');
+          expectPath(ast, 'children.0.children.0.markup.type').to.eql('LiquidVariable');
+          expectPath(ast, 'children.0.children.0.markup.expression.value').to.eql('Hello content');
+
+          expectPosition(ast, 'children.0');
+          expectPosition(ast, 'children.0.markup');
+        }
+      });
+
       describe('Case: content_for', () => {
         it('should parse content_for tags with no arguments', () => {
           for (const { toAST, expectPath, expectPosition } of testCases) {
@@ -1230,6 +1249,25 @@ describe('Unit: Stage 2 (AST)', () => {
       expectPosition(ast, 'children.0.body.nodes.2').toEqual('}');
       expectPosition(ast, 'children.0');
     });
+
+    it('should parse snippet blocks with HTML content', () => {
+      ast = toLiquidHtmlAST(
+        `{% snippet hello_snippet %}<div class="component"><p>Hello</p></div>{% endsnippet %}`,
+      );
+      expectPath(ast, 'children.0.type').to.eql('LiquidTag');
+      expectPath(ast, 'children.0.name').to.eql('snippet');
+      expectPath(ast, 'children.0.markup.type').to.eql('VariableLookup');
+      expectPath(ast, 'children.0.markup.name').to.eql('hello_snippet');
+      expectPath(ast, 'children.0.children.0.type').to.eql('HtmlElement');
+      expectPath(ast, 'children.0.children.0.name.0.value').to.eql('div');
+      expectPath(ast, 'children.0.children.0.attributes.0.name.0.value').to.eql('class');
+      expectPath(ast, 'children.0.children.0.attributes.0.value.0.value').to.eql('component');
+      expectPath(ast, 'children.0.children.0.children.0.type').to.eql('HtmlElement');
+      expectPath(ast, 'children.0.children.0.children.0.name.0.value').to.eql('p');
+      expectPath(ast, 'children.0.children.0.children.0.children.0.type').to.eql('TextNode');
+      expectPath(ast, 'children.0.children.0.children.0.children.0.value').to.eql('Hello');
+      expectPosition(ast, 'children.0');
+    });
   });
 
   describe('Unit: toLiquidAST(text)', () => {

packages/liquid-html-parser/src/stage-2-ast.ts

@@ -212,6 +212,7 @@ export type LiquidTagNamed =
   | LiquidTagRender
   | LiquidTagSection
   | LiquidTagSections
+  | LiquidTagSnippet
   | LiquidTagTablerow
   | LiquidTagUnless;
 
@@ -278,6 +279,9 @@ export interface LiquidTagDecrement
 /** https://shopify.dev/docs/api/liquid/tags#capture */
 export interface LiquidTagCapture extends LiquidTagNode<NamedTags.capture, LiquidVariableLookup> {}
 
+/** https://shopify.dev/docs/api/liquid/tags#snippet */
+export interface LiquidTagSnippet extends LiquidTagNode<NamedTags.snippet, LiquidVariableLookup> {}
+
 /** https://shopify.dev/docs/api/liquid/tags#cycle */
 export interface LiquidTagCycle extends LiquidTagNode<NamedTags.cycle, CycleMarkup> {}
 
@@ -1544,6 +1548,15 @@ function toNamedLiquidTag(
       };
     }
 
+    case NamedTags.snippet: {
+      return {
+        ...liquidTagBaseAttributes(node),
+        name: node.name,
+        markup: toExpression(node.markup) as LiquidVariableLookup,
+        children: [],
+      };
+    }
+
     case NamedTags.content_for: {
       return {
         ...liquidTagBaseAttributes(node),

packages/liquid-html-parser/src/types.ts

@@ -70,6 +70,7 @@ export enum NamedTags {
   layout = 'layout',
   liquid = 'liquid',
   paginate = 'paginate',
+  snippet = 'snippet',
   render = 'render',
   section = 'section',
   sections = 'sections',

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

@@ -189,6 +189,7 @@ function printNamedLiquidBlockStart(
     }
 
     case NamedTags.capture:
+    case NamedTags.snippet:
     case NamedTags.increment:
     case NamedTags.decrement:
     case NamedTags.layout:

packages/theme-check-common/src/checks/liquid-html-syntax-error/index.spec.ts

@@ -86,7 +86,7 @@ describe('Module: LiquidHTMLSyntaxError', () => {
     const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
     expect(offenses).to.have.length(1);
     expect(offenses[0].message).to.equal(
-      `SyntaxError: expected "#", a letter, "when", "sections", "section", "render", "liquid", "layout", "increment", "include", "elsif", "else", "echo", "decrement", "content_for", "cycle", "continue", "break", "assign", "tablerow", "unless", "if", "ifchanged", "for", "case", "capture", "paginate", "form", "end", "style", "stylesheet", "schema", "javascript", "raw", "comment", or "doc"`,
+      `SyntaxError: expected "#", a letter, "when", "sections", "section", "render", "liquid", "layout", "increment", "include", "elsif", "else", "echo", "decrement", "content_for", "cycle", "continue", "break", "assign", "snippet", "tablerow", "unless", "if", "ifchanged", "for", "case", "capture", "paginate", "form", "end", "style", "stylesheet", "schema", "javascript", "raw", "comment", or "doc"`,
     );
   });