added snippet tags in stage 1 and stage 2

Author: shoplando

.changeset/dull-jobs-tap.md

@@ -0,0 +1,6 @@
+---
+'@shopify/prettier-plugin-liquid': minor
+'@shopify/liquid-html-parser': minor
+---
+
+updated theme-tools ohm rules to accept snippet tag

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', () => {
+        [{ expression: `var`, type: 'VariableLookup' }].forEach(({ expression, type }) => {
+          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,31 @@ describe('Unit: Stage 2 (AST)', () => {
         });
       });
 
+      it('should parse snippet blocks', () => {
+        for (const { toAST, expectPath, expectPosition } of testCases) {
+          ast = toAST(`{% snippet hello_snippet %}<div>Hello content</div>{% 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');
+          
+          // toLiquidHtmlAST parses HTML, toLiquidAST treats it as text
+          if (toAST === toLiquidHtmlAST) {
+            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.children.0.type').to.eql('TextNode');
+            expectPath(ast, 'children.0.children.0.children.0.value').to.eql('Hello content');
+          } else {
+            expectPath(ast, 'children.0.children.0.type').to.eql('TextNode');
+            expectPath(ast, 'children.0.children.0.value').to.eql('<div>Hello content</div>');
+          }
+          
+          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 +1255,23 @@ 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,10 @@ export interface LiquidTagDecrement
 /** https://shopify.dev/docs/api/liquid/tags#capture */
 export interface LiquidTagCapture extends LiquidTagNode<NamedTags.capture, LiquidVariableLookup> {}
 
+// TODO: add actual docs link
+/** 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 +1549,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: