@platformos/platformos-check-common 0.0.2

package/src/checks/liquid-html-syntax-error/checks/MultipleAssignValues.ts

@@ -0,0 +1,86 @@
+import { LiquidTag } from '@platformos/liquid-html-parser';
+import { Problem, SourceCodeType } from '../../..';
+import { getValuesInMarkup, INVALID_SYNTAX_MESSAGE } from './utils';
+
+export function detectMultipleAssignValues(
+  node: LiquidTag,
+): Problem<SourceCodeType.LiquidHtml> | undefined {
+  // Using a regex to match the markup like we do in Shopify/liquid
+  // https://github.com/Shopify/liquid/blob/9bb7fbf123e6e2bd61e00189b1c83159f375d3f3/lib/liquid/tags/assign.rb#L21
+  //
+  // We've broken it up into four groups:
+  // 1. The variable name
+  // 2. The assignment operator
+  // 3. The value section
+  // 4. The filter section (non-captured)
+  const ASSIGN_MARKUP_REGEX = /([^=]+)(=\s*)([^|]+)(?:\s*\|\s*.*)?$/m;
+
+  if (node.name !== 'assign') {
+    return;
+  }
+
+  const markup = node.markup;
+
+  if (typeof markup !== 'string') {
+    return;
+  }
+
+  const match = markup.match(ASSIGN_MARKUP_REGEX);
+  if (!match) {
+    return;
+  }
+
+  // If we have a markup 'foo    =    "123" something | upcase: 123', we have the following groups
+  const [
+    // 'foo    =    "123" something | upcase: 123'
+    _fullMatch,
+    // 'foo    '
+    assignmentVariable,
+    // '=    '
+    assignmentOperator,
+    // '"123" something'
+    assignmentValue,
+  ] = match;
+
+  const firstAssignmentValue = getValuesInMarkup(assignmentValue).at(0)?.value;
+
+  if (!firstAssignmentValue) {
+    return;
+  }
+
+  const removalIndices = (source: string, startingIndex: number) => {
+    const offset = source.indexOf(markup, startingIndex);
+
+    return {
+      startIndex:
+        offset +
+        assignmentVariable.length +
+        assignmentOperator.length +
+        firstAssignmentValue.length,
+      endIndex:
+        offset +
+        assignmentVariable.length +
+        assignmentOperator.length +
+        assignmentValue.trimEnd().length,
+    };
+  };
+
+  const { startIndex, endIndex } = removalIndices(node.source, node.position.start);
+
+  if (endIndex <= startIndex) {
+    return;
+  }
+
+  if (endIndex <= startIndex) {
+    return;
+  }
+
+  return {
+    message: INVALID_SYNTAX_MESSAGE,
+    startIndex,
+    endIndex,
+    fix: (corrector) => {
+      corrector.replace(startIndex, endIndex, '');
+    },
+  };
+}

package/src/checks/liquid-html-syntax-error/checks/utils.spec.ts

@@ -0,0 +1,82 @@
+import { expect, describe, it } from 'vitest';
+import {
+  doesFragmentContainUnsupportedParentheses,
+  fragmentKeyValuePair,
+  getFragmentsInMarkup,
+  getValuesInMarkup,
+} from './utils';
+
+describe('getValuesInMarkup', () => {
+  it('should return the values in the markup (one value)', () => {
+    const markup = '"123"';
+    const values = getValuesInMarkup(markup);
+    expect(values).toContainEqual({ value: '"123"', index: 0 });
+  });
+
+  it('should return the values in the markup (multiple values)', () => {
+    const markup = '"123" 555 text';
+    const values = getValuesInMarkup(markup);
+    expect(values).toContainEqual({ value: '"123"', index: 0 });
+    expect(values).toContainEqual({ value: '555', index: 6 });
+    expect(values).toContainEqual({ value: 'text', index: 10 });
+  });
+
+  it('should return nothing when no values in the markup', () => {
+    const markup = '';
+    const values = getValuesInMarkup(markup);
+    expect(values).to.have.length(0);
+  });
+
+  it('should return nothing when only spaces in the markup', () => {
+    const markup = '     ';
+    const values = getValuesInMarkup(markup);
+    expect(values).to.have.length(0);
+  });
+});
+
+describe('getFragmentsInMarkup', () => {
+  Object.entries({
+    space: ' ',
+    comma: ', ',
+  }).forEach(([name, separator]) => {
+    it(`should return all fragments in markup separated by ${name}`, () => {
+      const markup = `reversed${separator}limit: 10${separator}offset: 1${separator}something`;
+      const values = getFragmentsInMarkup(markup);
+      expect(values).toContainEqual(expect.objectContaining({ value: 'reversed' }));
+      expect(values).toContainEqual(expect.objectContaining({ value: 'limit: 10' }));
+      expect(values).toContainEqual(expect.objectContaining({ value: 'offset: 1' }));
+      expect(values).toContainEqual(expect.objectContaining({ value: 'something' }));
+    });
+  });
+
+  it('should capture all the ranges in the markup', () => {
+    const markup = `(1..10) ( 1..10 ) ( 1 .. 10 ) ( 1 ... 10 )`;
+    const values = getFragmentsInMarkup(markup);
+    expect(values).toContainEqual(expect.objectContaining({ value: '(1..10)' }));
+    expect(values).toContainEqual(expect.objectContaining({ value: '( 1..10 )' }));
+    expect(values).toContainEqual(expect.objectContaining({ value: '( 1 .. 10 )' }));
+    expect(values).toContainEqual(expect.objectContaining({ value: '( 1 ... 10 )' }));
+  });
+});
+
+describe('fragmentKeyValuePair', () => {
+  it('should return the key and value of the key-value pair', () => {
+    const fragment = 'key: value';
+    const keyValuePair = fragmentKeyValuePair(fragment);
+    expect(keyValuePair).to.deep.equal({ key: 'key', value: 'value' });
+  });
+});
+
+describe('doesFragmentContainUnsupportedParentheses', () => {
+  it('should return true when the fragment contains parentheses and isnt a range', () => {
+    const fragment = '(this and that)';
+    const result = doesFragmentContainUnsupportedParentheses(fragment);
+    expect(result).to.be.true;
+  });
+
+  it('should return false when the fragment contains parentheses and is a range', () => {
+    const fragment = '(1..2)';
+    const result = doesFragmentContainUnsupportedParentheses(fragment);
+    expect(result).to.be.false;
+  });
+});

package/src/checks/liquid-html-syntax-error/checks/utils.ts

@@ -0,0 +1,66 @@
+export const INVALID_SYNTAX_MESSAGE = 'Syntax is not supported';
+
+export function getValuesInMarkup(markup: string) {
+  return [...markup.matchAll(new RegExp(VALUE_PATTERN, 'g'))].map((match) => ({
+    value: match[0],
+    index: match.index,
+  }));
+}
+
+const DOUBLE_QUOTED_STRING = `"[^"]*"`;
+const SINGLE_QUOTED_STRING = `'[^']*'`;
+// Lax parser does NOT complain about leading/trailing spaces inside ranges (e.g. `(1 .. 10 )`) and
+// within the parenthesis (e.g. `( 1 .. 10 )`), but fails to render the liquid when using the gem.
+// Strict parser does NOT complain, but still renders it.
+// To avoid any issues, we will remove extra spaces.
+const RANGE_MARKUP_COMPONENT_REGEX = `\\s*(-?\\d+(?:\\.\\d+)?|\\w+(?:\\.\\w+)*)\\s*`;
+const RANGE_MARKUP_REGEX = `\\(\\s*${RANGE_MARKUP_COMPONENT_REGEX}(\\.{2,})\\s*${RANGE_MARKUP_COMPONENT_REGEX}\\s*\\)`;
+const REGULAR_TOKEN = `[^\\s,]+`; // tokens separated by commas or spaces
+
+// Quoted strings pattern (combination of double and single quoted)
+const QUOTED_STRING = `(${DOUBLE_QUOTED_STRING}|${SINGLE_QUOTED_STRING})`;
+
+// Value pattern for key-value pairs (can be quoted, parenthesized, or regular token)
+const VALUE_PATTERN = `(${QUOTED_STRING}|${RANGE_MARKUP_REGEX}|${REGULAR_TOKEN})`;
+
+// Key-value pair pattern
+const KEY_VALUE_PAIR = `(\\S+):\\s*${VALUE_PATTERN}`;
+
+const MARKUP_FRAGMENTS_PATTERN = new RegExp(
+  `${QUOTED_STRING}|${RANGE_MARKUP_REGEX}|${KEY_VALUE_PAIR}|${REGULAR_TOKEN}`,
+  'g',
+);
+
+export function getFragmentsInMarkup(markup: string) {
+  return [...markup.matchAll(MARKUP_FRAGMENTS_PATTERN)].map((match) => ({
+    value: match[0],
+    index: match.index,
+  }));
+}
+
+export function getRangeMatch(markup: string) {
+  return markup.match(RANGE_MARKUP_REGEX);
+}
+
+export function doesFragmentContainUnsupportedParentheses(fragment: string) {
+  if (getRangeMatch(fragment)) {
+    return false;
+  }
+
+  return fragment.includes('(') || fragment.includes(')');
+}
+
+export function fragmentKeyValuePair(fragment: string) {
+  const match = fragment.match(new RegExp(KEY_VALUE_PAIR));
+
+  if (!match) {
+    return;
+  }
+
+  const [, key, value] = match;
+
+  return {
+    key,
+    value,
+  };
+}

package/src/checks/liquid-html-syntax-error/index.spec.ts

@@ -0,0 +1,129 @@
+import { expect, describe, it, vi } from 'vitest';
+import { highlightedOffenses, runLiquidCheck } from '../../test';
+import { Offense } from '../../types';
+import { LiquidHTMLSyntaxError } from './index';
+
+describe('Module: LiquidHTMLSyntaxError', () => {
+  it('should report unclosed Liquid tags', async () => {
+    const sourceCode = `
+      {% capture some_variable %}
+        Hello, world!
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      `Attempting to end parsing before LiquidTag 'capture' was closed`,
+    );
+  });
+
+  it('should report unclosed HTML tags', async () => {
+    const sourceCode = `
+      <a href="abc">
+        Hello, world!
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      `Attempting to end parsing before HtmlElement 'a' was closed`,
+    );
+  });
+
+  it('should report closing the wrong node (html/html)', async () => {
+    const sourceCode = `
+      <a href="abc">
+        Hello, world!
+      </b>
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      `Attempting to close HtmlElement 'b' before HtmlElement 'a' was closed`,
+    );
+  });
+
+  it('should report closing the wrong node (html/liquid)', async () => {
+    const sourceCode = `
+      <a href="abc">
+        Hello, world!
+      {% endif %}
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      `Attempting to close LiquidTag 'if' before HtmlElement 'a' was closed`,
+    );
+  });
+
+  it('should report unexpected tokens (1)', async () => {
+    const sourceCode = `
+      {% if cond }}
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(`SyntaxError: expected "%}"`);
+  });
+
+  it('should report unexpected tokens (2)', async () => {
+    const sourceCode = `
+      <a href="abc" "></a>
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(`SyntaxError: expected ">", not """`);
+  });
+
+  it('should report unexpected tokens (3)', async () => {
+    const sourceCode = `
+      <a href="abc" {%></a>
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.have.length(1);
+    expect(offenses[0].message).to.equal(
+      `SyntaxError: expected "#", a letter, "yield", "theme_render_rc", "spam_protection", "sign_in", "session", "rollback", "return", "response_status", "response_headers", "redirect_to", "print", "log", "include_form", "export", "context", "catch", "background", "when", "sections", "section", "graphql", "function", "render", "liquid", "layout", "increment", "include", "elsif", "else", "echo", "decrement", "content_for", "cycle", "continue", "break", "hash_assign", "assign", "try", "transaction", "parse_json", "cache", "tablerow", "unless", "if", "ifchanged", "for", "case", "capture", "paginate", "form", "end", "style", "stylesheet", "schema", "javascript", "raw", "comment", or "doc"`,
+    );
+  });
+
+  it('should not report syntax error in valid Liquid code', async () => {
+    const sourceCode = `
+      {% if some_variable %}
+        Hello, world!
+      {% endif %}
+      {% schema %}
+      {
+        "settings": [{ "visible_if": "{{ foo.bar == true }}" }]
+      }
+      {% endschema %}
+    `;
+
+    const offenses = await runLiquidCheck(LiquidHTMLSyntaxError, sourceCode);
+    expect(offenses).to.be.empty;
+  });
+
+  it('should highligh the error', async () => {
+    let offenses: Offense[];
+    let highlights: string[];
+    let source: string;
+
+    source = `<div><a></b></div>`;
+    offenses = await runLiquidCheck(LiquidHTMLSyntaxError, source);
+    highlights = highlightedOffenses({ 'file.liquid': source }, offenses);
+    expect(highlights).to.include('<a></b>');
+
+    source = `<div><a>{% endif %}</div>`;
+    offenses = await runLiquidCheck(LiquidHTMLSyntaxError, source);
+    highlights = highlightedOffenses({ 'file.liquid': source }, offenses);
+    expect(highlights).to.include('<a>{% endif %}');
+
+    source = `<a href=abc ">`;
+    offenses = await runLiquidCheck(LiquidHTMLSyntaxError, source);
+    highlights = highlightedOffenses({ 'file.liquid': source }, offenses);
+    expect(highlights).to.include('"');
+  });
+});

package/src/checks/liquid-html-syntax-error/index.ts

@@ -0,0 +1,152 @@
+import { Severity, SourceCodeType, LiquidCheckDefinition, Problem } from '../../types';
+import { getOffset, isError } from '../../utils';
+import { detectMultipleAssignValues } from './checks/MultipleAssignValues';
+import { detectInvalidBooleanExpressions } from './checks/InvalidBooleanExpressions';
+import { detectInvalidEchoValue } from './checks/InvalidEchoValue';
+import { detectInvalidConditionalNode } from './checks/InvalidConditionalNode';
+import { detectInvalidLoopRange } from './checks/InvalidLoopRange';
+import { detectInvalidLoopArguments } from './checks/InvalidLoopArguments';
+import { detectConditionalNodeUnsupportedParenthesis } from './checks/InvalidConditionalNodeParenthesis';
+import { detectInvalidFilterName } from './checks/InvalidFilterName';
+import { detectInvalidPipeSyntax } from './checks/InvalidPipeSyntax';
+import { isWithinRawTagThatDoesNotParseItsContents } from '../utils';
+
+type LineColPosition = {
+  line: number;
+  column: number;
+};
+
+function isParsingErrorWithLocation(
+  error: Error,
+): error is Error & { loc: { start: LineColPosition; end: LineColPosition } } {
+  return 'name' in error && error.name === 'LiquidHTMLParsingError' && 'loc' in error;
+}
+
+function cleanErrorMessage(message: string, highlight: string): string {
+  return message
+    .replace(/Line \d+, col \d+:\s+/, 'SyntaxError: ')
+    .replace(/(?!<expected ".+",) not .*/, ` not "${highlight}"`);
+}
+
+export const LiquidHTMLSyntaxError: LiquidCheckDefinition = {
+  meta: {
+    code: 'LiquidHTMLSyntaxError',
+    aliases: ['SyntaxError', 'HtmlParsingError'],
+    name: 'Prevent LiquidHTML Syntax Errors',
+    docs: {
+      description: 'This check exists to inform the user of Liquid HTML syntax errors.',
+      recommended: true,
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    const ast = context.file.ast;
+    const filtersPromise = context.themeDocset?.filters();
+    const tagsPromise = context.themeDocset?.tags();
+
+    if (!isError(ast)) {
+      return {
+        async BooleanExpression(node, ancestors) {
+          if (isWithinRawTagThatDoesNotParseItsContents(ancestors)) return;
+
+          const problem = detectInvalidBooleanExpressions(node, ancestors);
+
+          if (!problem) {
+            return;
+          }
+
+          context.report(problem);
+        },
+        async LiquidTag(node, ancestors) {
+          if (isWithinRawTagThatDoesNotParseItsContents(ancestors)) return;
+
+          const problems = [
+            detectMultipleAssignValues(node),
+            detectInvalidEchoValue(node),
+            detectInvalidLoopRange(node),
+            detectInvalidLoopArguments(node, await tagsPromise),
+          ].filter(Boolean) as Problem<SourceCodeType.LiquidHtml>[];
+
+          // Fixers for `detectConditionalNodeUnsupportedParenthesis` and `detectInvalidConditionalNode` consume
+          // the whole node markup, so we MUST not run both.
+          const conditionalNodeProblem =
+            detectConditionalNodeUnsupportedParenthesis(node) || detectInvalidConditionalNode(node);
+
+          if (conditionalNodeProblem) {
+            problems.push(conditionalNodeProblem);
+          }
+
+          problems.forEach(context.report);
+
+          const filterProblems = await detectInvalidFilterName(node, await filtersPromise);
+          if (filterProblems.length > 0) {
+            filterProblems.forEach((filterProblem) => context.report(filterProblem));
+          }
+
+          const pipeProblems = await detectInvalidPipeSyntax(node);
+          if (pipeProblems.length > 0) {
+            pipeProblems.forEach((pipeProblem) => context.report(pipeProblem));
+          }
+        },
+
+        async LiquidBranch(node, ancestors) {
+          if (isWithinRawTagThatDoesNotParseItsContents(ancestors)) return;
+
+          const problem = detectInvalidConditionalNode(node);
+
+          if (!problem) {
+            return;
+          }
+
+          context.report(problem);
+        },
+
+        async LiquidVariableOutput(node, ancestors) {
+          if (isWithinRawTagThatDoesNotParseItsContents(ancestors)) return;
+
+          const filterProblems = await detectInvalidFilterName(node, await filtersPromise);
+          if (filterProblems.length > 0) {
+            filterProblems.forEach((problem) => context.report(problem));
+          }
+
+          const pipeProblems = await detectInvalidPipeSyntax(node);
+          if (pipeProblems.length > 0) {
+            pipeProblems.forEach((pipeProblem) => context.report(pipeProblem));
+          }
+
+          const problem = detectInvalidEchoValue(node);
+          if (problem) {
+            context.report(problem);
+          }
+        },
+      };
+    }
+
+    return {
+      async onCodePathStart(file) {
+        if (isParsingErrorWithLocation(ast)) {
+          const { start, end } = ast.loc;
+          const startIndex = getOffset(file.source, start.line, start.column);
+          let endIndex = getOffset(file.source, end.line, end.column);
+          if (startIndex === endIndex) endIndex += 1;
+          const highlight = file.source.slice(startIndex, endIndex);
+          context.report({
+            message: cleanErrorMessage(ast.message, highlight),
+            startIndex,
+            endIndex: endIndex,
+          });
+        } else {
+          context.report({
+            message: ast.message,
+            startIndex: 0,
+            endIndex: file.source.length,
+          });
+        }
+      },
+    };
+  },
+};