packages/liquid-html-parser/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @shopify/liquid-html-parser
 
+## 2.2.0
+
+### Minor Changes
+
+- 8912fab8: Update Ohm grammar for ContentFor tag to extract arguments correctly
+  Update ValidContentForArguments check to report deprecated context. argument usage
+
 ## 2.1.2
 
 ### Minor Changes

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

@@ -37,6 +37,7 @@ Liquid <: Helpers {
   endOfIdentifier = endOfTagName | endOfVarName
 
   liquidNode =
+  	| liquidDoc
     | liquidBlockComment
     | liquidRawTag
     | liquidDrop
@@ -127,8 +128,13 @@ Liquid <: Helpers {
   liquidTagLiquidMarkup = tagMarkup
 
   liquidTagContentFor = liquidTagRule<"content_for", liquidTagContentForMarkup>
+
   liquidTagContentForMarkup =
-    contentForType (argumentSeparatorOptionalComma tagArguments) (space* ",")? space*
+    contentForType (argumentSeparatorOptionalComma contentForTagArgument) (space* ",")? space*
+
+  contentForTagArgument = listOf<contentForNamedArgument<delimTag>, argumentSeparatorOptionalComma>
+  contentForNamedArgument<delim> = (variableSegment ("." variableSegment)*) space* ":" space* (liquidExpression<delim>)
+
   contentForType = liquidString<delimTag>
 
   liquidTagInclude = liquidTagRule<"include", liquidTagRenderMarkup>
@@ -211,6 +217,15 @@ Liquid <: Helpers {
   commentBlockStart = "{%" "-"? space* ("comment"    endOfIdentifier) space* tagMarkup "-"? "%}"
   commentBlockEnd   = "{%" "-"? space* ("endcomment" endOfIdentifier) space* tagMarkup "-"? "%}"
 
+  liquidDoc = 
+    liquidDocStart
+      liquidDocBody
+    liquidDocEnd
+
+  liquidDocStart = "{%" "-"? space* ("doc" endOfIdentifier) space* tagMarkup "-"? "%}"
+  liquidDocEnd = "{%" "-"? space* ("enddoc" endOfIdentifier) space* tagMarkup "-"? "%}"
+  liquidDocBody = anyExceptStar<(liquidDocStart | liquidDocEnd)>
+
   // In order for the grammar to "fallback" to the base case, this
   // rule must pass if and only if we support what we parse. This
   // implies that—since we don't support filters yet—we have a
@@ -373,6 +388,10 @@ LiquidStatement <: Liquid {
   delimTag := liquidStatementEnd
 }
 
+LiquidDoc <: Helpers {
+  Node := (TextNode)*
+}
+
 LiquidHTML <: Liquid {
   Node := yamlFrontmatter? (HtmlNode | liquidNode | TextNode)*
   openControl += "<"

packages/liquid-html-parser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/liquid-html-parser",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Liquid HTML parser by Shopify",
   "author": "CP Clermont <cp.clermont@shopify.com>",
   "homepage": "https://github.com/Shopify/theme-tools/tree/main/packages/liquid-html-parser#readme",

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

@@ -3,6 +3,7 @@ import ohm from 'ohm-js';
 export const liquidHtmlGrammars = ohm.grammars(require('../grammar/liquid-html.ohm.js'));
 
 export const TextNodeGrammar = liquidHtmlGrammars['Helpers'];
+export const LiquidDocGrammar = liquidHtmlGrammars['LiquidDoc'];
 
 export interface LiquidGrammars {
   Liquid: ohm.Grammar;
@@ -52,4 +53,5 @@ export const TAGS_WITHOUT_MARKUP = [
   'continue',
   'comment',
   'raw',
+  'doc',
 ];

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

@@ -604,15 +604,19 @@ describe('Unit: Stage 1 (CST)', () => {
 
       it('should parse content_for "block", id: "my-id", type: "my-block"', () => {
         for (const { toCST, expectPath } of testCases) {
-          cst = toCST(`{% content_for "block", id: "block-id", type: "block-type" -%}`);
+          cst = toCST(
+            `{% content_for "block", closest.product: product, closest.metaobject.test: product, id: "block-id", type: "block-type" -%}`,
+          );
           expectPath(cst, '0.type').to.equal('LiquidTag');
           expectPath(cst, '0.name').to.equal('content_for');
           expectPath(cst, '0.markup.type').to.equal('ContentForMarkup');
           expectPath(cst, '0.markup.contentForType.type').to.equal('String');
           expectPath(cst, '0.markup.contentForType.value').to.equal('block');
           expectPath(cst, '0.markup.contentForType.single').to.equal(false);
-          expectPath(cst, '0.markup.args').to.have.lengthOf(2);
+          expectPath(cst, '0.markup.args').to.have.lengthOf(4);
           const namedArguments = [
+            { name: 'closest.product', valueType: 'VariableLookup' },
+            { name: 'closest.metaobject.test', valueType: 'VariableLookup' },
             { name: 'id', valueType: 'String' },
             { name: 'type', valueType: 'String' },
           ];
@@ -978,6 +982,34 @@ describe('Unit: Stage 1 (CST)', () => {
         }
       });
 
+      it('should parse doc tags', () => {
+        for (const { toCST, expectPath } of testCases) {
+          const testStr = `{% doc -%} Renders loading-spinner. {%- enddoc %}`;
+
+          cst = toCST(testStr);
+          expectPath(cst, '0.type').to.equal('LiquidRawTag');
+          expectPath(cst, '0.name').to.equal('doc');
+          expectPath(cst, '0.body').to.include('Renders loading-spinner');
+          expectPath(cst, '0.whitespaceStart').to.equal('');
+          expectPath(cst, '0.whitespaceEnd').to.equal('-');
+          expectPath(cst, '0.delimiterWhitespaceStart').to.equal('-');
+          expectPath(cst, '0.delimiterWhitespaceEnd').to.equal('');
+          expectPath(cst, '0.blockStartLocStart').to.equal(0);
+          expectPath(cst, '0.blockStartLocEnd').to.equal(0 + '{% doc -%}'.length);
+          expectPath(cst, '0.blockEndLocStart').to.equal(testStr.length - '{%- enddoc %}'.length);
+          expectPath(cst, '0.blockEndLocEnd').to.equal(testStr.length);
+          expectPath(cst, '0.children').to.deep.equal([
+            {
+              locEnd: 35,
+              locStart: 11,
+              source: '{% doc -%} Renders loading-spinner. {%- enddoc %}',
+              type: 'TextNode',
+              value: 'Renders loading-spinner.',
+            },
+          ]);
+        }
+      });
+
       it('should parse tag open / close', () => {
         BLOCKS.forEach((block: string) => {
           for (const { toCST, expectPath } of testCases) {

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

@@ -34,6 +34,7 @@ import { Parser } from 'prettier';
 import ohm, { Node } from 'ohm-js';
 import { toAST } from 'ohm-js/extras';
 import {
+  LiquidDocGrammar,
   LiquidGrammars,
   TextNodeGrammar,
   placeholderGrammars,
@@ -81,6 +82,7 @@ export enum ConcreteNodeTypes {
   RenderMarkup = 'RenderMarkup',
   PaginateMarkup = 'PaginateMarkup',
   RenderVariableExpression = 'RenderVariableExpression',
+  ContentForNamedArgument = 'ContentForNamedArgument',
 }
 
 export const LiquidLiteralValues = {
@@ -625,6 +627,30 @@ function toCST<T>(
       blockEndLocStart: (tokens: Node[]) => tokens[2].source.startIdx,
       blockEndLocEnd: (tokens: Node[]) => tokens[2].source.endIdx,
     },
+    liquidDoc: {
+      type: ConcreteNodeTypes.LiquidRawTag,
+      name: 'doc',
+      body: (tokens: Node[]) => tokens[1].sourceString,
+      children: (tokens: Node[]) => {
+        const contentNode = tokens[1];
+        return toLiquidDocAST(
+          source,
+          contentNode.sourceString,
+          offset + contentNode.source.startIdx,
+        );
+      },
+      whitespaceStart: (tokens: Node[]) => tokens[0].children[1].sourceString,
+      whitespaceEnd: (tokens: Node[]) => tokens[0].children[7].sourceString,
+      delimiterWhitespaceStart: (tokens: Node[]) => tokens[2].children[1].sourceString,
+      delimiterWhitespaceEnd: (tokens: Node[]) => tokens[2].children[7].sourceString,
+      locStart,
+      locEnd,
+      source,
+      blockStartLocStart: (tokens: Node[]) => tokens[0].source.startIdx,
+      blockStartLocEnd: (tokens: Node[]) => tokens[0].source.endIdx,
+      blockEndLocStart: (tokens: Node[]) => tokens[2].source.startIdx,
+      blockEndLocEnd: (tokens: Node[]) => tokens[2].source.endIdx,
+    },
     liquidInlineComment: {
       type: ConcreteNodeTypes.LiquidTag,
       name: 3,
@@ -873,6 +899,7 @@ function toCST<T>(
     },
     simpleArgument: 0,
     tagArguments: 0,
+    contentForTagArgument: 0,
     positionalArgument: 0,
     namedArgument: {
       type: ConcreteNodeTypes.NamedArgument,
@@ -883,6 +910,15 @@ function toCST<T>(
       source,
     },
 
+    contentForNamedArgument: {
+      type: ConcreteNodeTypes.NamedArgument,
+      name: (node) => node[0].sourceString + node[1].sourceString,
+      value: 6,
+      locStart,
+      locEnd,
+      source,
+    },
+
     liquidString: 0,
     liquidDoubleQuotedString: {
       type: ConcreteNodeTypes.String,
@@ -1251,3 +1287,35 @@ function toCST<T>(
 
   return toAST(res, selectedMappings) as T;
 }
+
+/**
+ * Builds an AST for LiquidDoc content.
+ *
+ * `toCST` includes mappings and logic that are not needed for LiquidDoc so we're separating this logic
+ */
+function toLiquidDocAST(source: string, matchingSource: string, offset: number) {
+  // When we switch parser, our locStart and locEnd functions must account
+  // for the offset of the {% doc %} markup
+  const locStart = (tokens: Node[]) => offset + tokens[0].source.startIdx;
+  const locEnd = (tokens: Node[]) => offset + tokens[tokens.length - 1].source.endIdx;
+
+  const res = LiquidDocGrammar.match(matchingSource, 'Node');
+  if (res.failed()) {
+    throw new LiquidHTMLCSTParsingError(res);
+  }
+
+  const LiquidDocMappings: Mapping = {
+    Node: 0,
+    TextNode: {
+      type: ConcreteNodeTypes.TextNode,
+      value: function () {
+        return (this as any).sourceString;
+      },
+      locStart,
+      locEnd,
+      source,
+    },
+  };
+
+  return toAST(res, LiquidDocMappings);
+}

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

@@ -1220,6 +1220,33 @@ describe('Unit: Stage 2 (AST)', () => {
       expectPath(ast, 'children.0.markup.1.children.0.children.1.markup.name').to.eql('var3');
     });
 
+    it(`should parse doc tags`, () => {
+      ast = toLiquidAST(`{% doc %}{% enddoc %}`);
+      expectPath(ast, 'children.0.type').to.eql('LiquidRawTag');
+      expectPath(ast, 'children.0.name').to.eql('doc');
+      expectPath(ast, 'children.0.markup').toEqual('');
+      expectPath(ast, 'children.0.body.value').to.eql('');
+      expectPath(ast, 'children.0.body.type').toEqual('RawMarkup');
+      expectPath(ast, 'children.0.body.nodes').toEqual([]);
+
+      ast = toLiquidAST(`{% doc -%} single line doc {%- enddoc %}`);
+      expectPath(ast, 'children.0.type').to.eql('LiquidRawTag');
+      expectPath(ast, 'children.0.name').to.eql('doc');
+      expectPath(ast, 'children.0.body.value').to.eql(' single line doc ');
+      expectPath(ast, 'children.0.body.nodes.0.type').toEqual('TextNode');
+
+      ast = toLiquidAST(`{% doc -%}
+        multi line doc
+        multi line doc
+        {%- enddoc %}`);
+      expectPath(ast, 'children.0.type').to.eql('LiquidRawTag');
+      expectPath(ast, 'children.0.name').to.eql('doc');
+      expectPath(ast, 'children.0.body.nodes.0.value').to.eql(
+        `multi line doc\n        multi line doc`,
+      );
+      expectPath(ast, 'children.0.body.nodes.0.type').toEqual('TextNode');
+    });
+
     it('should parse unclosed tables with assignments', () => {
       ast = toLiquidAST(`
         {%- liquid

packages/prettier-plugin-liquid/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @shopify/prettier-plugin-liquid
 
+## 1.6.3
+
+### Patch Changes
+
+- Patch bump because it depends on @shopify/liquid-html-parser
+- Updated dependencies [8912fab8]
+  - @shopify/liquid-html-parser@2.2.0
+
 ## 1.6.2
 
 ### Patch Changes

packages/prettier-plugin-liquid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/prettier-plugin-liquid",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Prettier Liquid/HTML plugin by Shopify",
   "author": "CP Clermont <cp.clermont@shopify.com>",
   "homepage": "https://github.com/Shopify/theme-tools/tree/main/packages/prettier-plugin-liquid#readme",
@@ -59,7 +59,7 @@
     "tsconfig-paths": "^3.14.1"
   },
   "dependencies": {
-    "@shopify/liquid-html-parser": "^2.1.2",
+    "@shopify/liquid-html-parser": "^2.2.0",
     "html-styles": "^1.0.0"
   }
 }

packages/theme-check-browser/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @shopify/theme-check-browser
 
+## 3.4.0
+
+### Patch Changes
+
+- Updated dependencies [8912fab8]
+- Updated dependencies [51ec6a7a]
+  - @shopify/theme-check-common@3.4.0
+
 ## 3.3.0
 
 ### Patch Changes

packages/theme-check-browser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/theme-check-browser",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@shopify/theme-check-common": "3.3.0"
+    "@shopify/theme-check-common": "3.4.0"
   }
 }

packages/theme-check-common/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @shopify/theme-check-common
 
+## 3.4.0
+
+### Minor Changes
+
+- 8912fab8: Update Ohm grammar for ContentFor tag to extract arguments correctly
+  Update ValidContentForArguments check to report deprecated context. argument usage
+- 51ec6a7a: Add case to `SchemaPresetBlockOrder` check
+
+### Patch Changes
+
+- Updated dependencies [8912fab8]
+  - @shopify/liquid-html-parser@2.2.0
+
 ## 3.3.0
 
 ### Minor Changes

packages/theme-check-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/theme-check-common",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,7 +26,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@shopify/liquid-html-parser": "2.1.2",
+    "@shopify/liquid-html-parser": "2.2.0",
     "cross-fetch": "^4.0.0",
     "json-to-ast": "^2.1.0",
     "jsonc-parser": "^3.2.0",

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", or "comment"`,
+      `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"`,
     );
   });