@platformos/platformos-check-common 0.0.2

package/src/JSONValidator.ts

@@ -0,0 +1,82 @@
+import { LanguageService, TextDocument, getLanguageService } from 'vscode-json-languageservice';
+import { Config, Dependencies, IsValidSchema, SchemaDefinition, ValidateJSON } from './types';
+import { indexBy } from './utils';
+
+export class JSONValidator {
+  private service: LanguageService;
+  private schemas: Record<string, SchemaDefinition>;
+
+  static async create(
+    jsonValidationSet: Dependencies['jsonValidationSet'],
+    config: Config,
+  ): Promise<JSONValidator | undefined> {
+    if (!jsonValidationSet) return;
+    return new JSONValidator(await jsonValidationSet.schemas(config.context));
+  }
+
+  constructor(schemas: SchemaDefinition[]) {
+    this.schemas = indexBy((x) => x.uri, schemas);
+    this.service = getLanguageService({
+      schemaRequestService: this.getSchemaForURI.bind(this),
+      workspaceContext: {
+        resolveRelativePath: (relativePath, resource) => {
+          const url = new URL(relativePath, resource);
+          return url.toString();
+        },
+      },
+    });
+    this.service.configure({
+      schemas: schemas.map((schemaDefinition) => ({
+        uri: schemaDefinition.uri,
+        fileMatch: schemaDefinition.fileMatch,
+      })),
+    });
+  }
+
+  /**
+   * Will return an array of diagnostics for the given source code and JSON string.
+   *
+   * It's up to the caller to determine where in the file those should be.
+   * (presumably by doing some offset logic)
+   */
+  public validate: ValidateJSON = async (uri: string, jsonString: string) => {
+    const jsonTextDocument = TextDocument.create(uri, 'json', 0, jsonString);
+    const diagnostics = await this.getOffsetDiagnostics(jsonTextDocument);
+    return diagnostics.map((diagnostic) => ({
+      message: diagnostic.message,
+      startIndex: jsonTextDocument.offsetAt(diagnostic.range.start),
+      endIndex: jsonTextDocument.offsetAt(diagnostic.range.end),
+    }));
+  };
+
+  public isValid: IsValidSchema = async (uri: string, jsonString: string) => {
+    return isValid(this.service, uri, jsonString);
+  };
+
+  private async getOffsetDiagnostics(jsonTextDocument: TextDocument) {
+    const jsonDocument = this.service.parseJSONDocument(jsonTextDocument);
+    return this.service.doValidation(jsonTextDocument, jsonDocument, {
+      schemaValidation: 'error',
+      trailingCommas: 'ignore',
+      comments: 'ignore',
+    });
+  }
+
+  private async getSchemaForURI(uri: string): Promise<string> {
+    const schema = this.schemas[uri]?.schema;
+    if (!schema) return `No schema for '${uri}' found`;
+    return schema;
+  }
+}
+
+/** We'll reuse this in the language server */
+export async function isValid(service: LanguageService, uri: string, jsonString: string) {
+  const jsonTextDocument = TextDocument.create(uri, 'json', 0, jsonString);
+  const jsonDocument = service.parseJSONDocument(jsonTextDocument);
+  const diagnostics = await service.doValidation(jsonTextDocument, jsonDocument, {
+    schemaValidation: 'error',
+    trailingCommas: 'ignore',
+    comments: 'ignore',
+  });
+  return diagnostics.every((diagnostic) => diagnostic.severity !== 1);
+}

package/src/checks/app-block-missing-schema/index.spec.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { runLiquidCheck } from '../../test';
+import { AppBlockMissingSchema } from './index';
+
+describe('AppBlockMissingSchema', () => {
+  it('should report an error when schema tag is missing on a theme app extension (blocks only)', async () => {
+    const sourceCode = `
+      <footer class="footer">
+        {% for block in section.blocks %}
+          {% case block.type %}
+            {% when 'link' %}
+              <div class="link" {{ block.shopify_attributes }}>
+                {{ block.settings.linktext | link_to: block.settings.linkurl }}
+              </div>
+
+            {% when 'custom-text' %}
+              <div class="text" {{ block.shopify_attributes }}>
+                {{ block.settings.custom-text-field }}
+              </div>
+          {% endcase %}
+        {% endfor %}
+      </footer>
+    `;
+
+    const offenses = await runLiquidCheck(
+      AppBlockMissingSchema,
+      sourceCode,
+      'blocks/footer.liquid',
+    );
+    expect(offenses).to.have.lengthOf(1);
+  });
+
+  it('should not report an error when schema tag is missing on a snippet in a theme app extension )', async () => {
+    const sourceCode = `
+      <footer class="footer">
+        {% for block in section.blocks %}
+          {% case block.type %}
+            {% when 'link' %}
+              <div class="link" {{ block.shopify_attributes }}>
+                {{ block.settings.linktext | link_to: block.settings.linkurl }}
+              </div>
+
+            {% when 'custom-text' %}
+              <div class="text" {{ block.shopify_attributes }}>
+                {{ block.settings.custom-text-field }}
+              </div>
+          {% endcase %}
+        {% endfor %}
+      </footer>
+    `;
+
+    const offenses = await runLiquidCheck(
+      AppBlockMissingSchema,
+      sourceCode,
+      'app/views/partials/footer.liquid',
+    );
+    expect(offenses).to.have.lengthOf(0);
+  });
+
+  it('should not report when the schema is present on a theme app extension', async () => {
+    const sourceCode = `
+<footer class="footer">
+  {% for block in section.blocks %}
+    {% case block.type %}
+      {% when 'link' %}
+        <div class="link" {{ block.shopify_attributes }}>
+          {{ block.settings.linktext | link_to: block.settings.linkurl }}
+        </div>
+
+      {% when 'custom-text' %}
+        <div class="text" {{ block.shopify_attributes }}>
+          {{ block.settings.custom-text-field }}
+        </div>
+    {% endcase %}
+  {% endfor %}
+</footer>
+
+{% schema %}
+{
+  "name": "Footer",
+  "max_blocks": 8,
+  "blocks": [
+    {
+      "type": "link",
+      "name": "Link",
+      "settings": [
+        {
+          "id": "linkurl",
+          "type": "url",
+          "label": "URL link"
+        },
+        {
+          "id": "linktext",
+          "type": "text",
+          "label": "Link text"
+        }
+      ]
+    },
+    {
+      "type": "custom-text",
+      "name": "Custom Text",
+      "settings": [
+        {
+          "id": "custom-text-field",
+          "type": "textarea",
+          "label": "Text"
+        }
+      ]
+    }
+  ]
+}
+{% endschema %}`;
+
+    const offenses = await runLiquidCheck(
+      AppBlockMissingSchema,
+      sourceCode,
+      'blocks/footer.liquid',
+    );
+    expect(offenses).to.have.lengthOf(0);
+  });
+});

package/src/checks/app-block-missing-schema/index.ts

@@ -0,0 +1,46 @@
+import { ConfigTarget, LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+
+export const AppBlockMissingSchema: LiquidCheckDefinition = {
+  meta: {
+    code: 'AppBlockMissingSchema',
+    name: 'Missing schema definitions in theme app extensions app blocks should be avoided',
+    docs: {
+      description: 'Report missing schema definitions in theme app extensions app blocks',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/app-block-missing-schema',
+    },
+    severity: Severity.ERROR,
+    type: SourceCodeType.LiquidHtml,
+    schema: {},
+    targets: [ConfigTarget.ThemeAppExtension],
+  },
+
+  create(context) {
+    let foundSchema = false;
+    const relativePath = context.toRelativePath(context.file.uri);
+
+    /**
+     * Theme app extension blocks are the only types of files that can have a
+     * schema defined in them.
+     */
+    if (!relativePath.startsWith('blocks/')) {
+      return {};
+    }
+
+    return {
+      async LiquidRawTag(node) {
+        if (node.name == 'schema') foundSchema = true;
+      },
+
+      async onCodePathEnd() {
+        if (!foundSchema) {
+          context.report({
+            message: `The schema does not exist`,
+            startIndex: 0,
+            endIndex: 0,
+          });
+        }
+      },
+    };
+  },
+};

package/src/checks/app-block-valid-tags/index.spec.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect } from 'vitest';
+import { runLiquidCheck } from '../../test';
+import { ForbiddenTag, AppBlockValidTags } from './index';
+
+const blocksFilePath = 'blocks/app.liquid';
+
+describe('Module: AppBlockValidTags', () => {
+  it('should report an offense when the forbidden tag is used in blocks directory liquid file', async () => {
+    const tags = ['include', 'layout', 'section', 'sections'];
+    for (const tag of tags) {
+      const sourceCode = `
+        {% ${tag} 'test' %}
+        {% schema %}
+        { }
+        {% endschema %}
+      `;
+
+      const offenses = await runLiquidCheck(AppBlockValidTags, sourceCode, blocksFilePath);
+
+      const expectedStart = {
+        index: 9,
+        line: 1,
+        character: 8,
+      };
+      const tagEndOffset = 13;
+      const endOffset = tag.length + tagEndOffset;
+
+      const expectedEnd = {
+        index: expectedStart.index + endOffset,
+        line: expectedStart.line,
+        character: expectedStart.character + endOffset,
+      };
+
+      expect(offenses).to.have.length(1);
+      expect(offenses).to.containOffense({
+        check: AppBlockValidTags.meta.code,
+        message: `Theme app extension blocks cannot contain '${tag}' tags`,
+        uri: 'file:///blocks/app.liquid',
+        severity: 0,
+        start: expectedStart,
+        end: expectedEnd,
+      });
+    }
+  });
+
+  it('should report an offense when the forbidden tag is used with an end tag in blocks directory liquid file', async () => {
+    const tags = ['javascript', 'stylesheet'];
+    for (const tag of tags) {
+      const sourceCode = `
+        {% ${tag} %}
+        {% end${tag} %}
+        {% schema %}
+        { }
+        {% endschema %}
+      `;
+
+      const offenses = await runLiquidCheck(AppBlockValidTags, sourceCode, blocksFilePath);
+
+      const expectedStart = {
+        index: 9,
+        line: 1,
+        character: 8,
+      };
+      const expectedEnd = {
+        index: expectedStart.index + tag.length + 34,
+        line: 2,
+        character: expectedStart.character + tag.length + 9,
+      };
+
+      expect(offenses).to.have.length(1);
+      expect(offenses).to.containOffense({
+        check: AppBlockValidTags.meta.code,
+        message: `Theme app extension blocks cannot contain '${tag}' tags`,
+        uri: 'file:///blocks/app.liquid',
+        severity: 0,
+        start: expectedStart,
+        end: expectedEnd,
+      });
+    }
+  });
+
+  it('should contain specifically the following forbidden tags', async () => {
+    const actualTagValues = Object.values(ForbiddenTag);
+    const expectedTagValues = [
+      'javascript',
+      'stylesheet',
+      'include',
+      'layout',
+      'section',
+      'sections',
+    ];
+
+    expectedTagValues.forEach((tag) => expect(actualTagValues).toContain(tag));
+    expect(actualTagValues.length).toBe(expectedTagValues.length);
+  });
+});

package/src/checks/app-block-valid-tags/index.ts

@@ -0,0 +1,54 @@
+import { LiquidRawTag, LiquidTag } from '@platformos/liquid-html-parser';
+import { ConfigTarget, LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+
+export enum ForbiddenTag {
+  JavaScript = 'javascript',
+  StyleSheet = 'stylesheet',
+  Include = 'include',
+  Layout = 'layout',
+  Section = 'section',
+  Sections = 'sections',
+}
+
+const isForbiddenTag = (value: string): value is ForbiddenTag => {
+  return Object.values(ForbiddenTag).includes(value as ForbiddenTag);
+};
+
+const buildErrorMessage = (tag: ForbiddenTag) =>
+  `Theme app extension blocks cannot contain '${tag}' tags`;
+
+export const AppBlockValidTags: LiquidCheckDefinition = {
+  meta: {
+    code: 'AppBlockValidTags',
+    name: 'App Block Valid Tags',
+    docs: {
+      description:
+        'Identifies forbidden Liquid tags in theme app extension app block and app embed block code.',
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/app-block-valid-tags',
+      recommended: false,
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [ConfigTarget.ThemeAppExtension],
+  },
+
+  create(context) {
+    const handleForbiddenTags = async (node: LiquidTag | LiquidRawTag) => {
+      if (isForbiddenTag(node.name)) {
+        // When a forbidden tag is used to define a block section
+        // with an end tag, highlight the whole section
+        const endIndex = node.blockEndPosition ? node.blockEndPosition.end : node.position.end;
+        const startIndex = node.blockStartPosition.start;
+        const message = buildErrorMessage(node.name);
+
+        return context.report({ message, startIndex, endIndex });
+      }
+    };
+
+    return {
+      LiquidRawTag: handleForbiddenTags,
+      LiquidTag: handleForbiddenTags,
+    };
+  },
+};

package/src/checks/asset-preload/index.spec.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest';
+import { runLiquidCheck, highlightedOffenses } from '../../test';
+import { AssetPreload } from './index';
+
+describe('Module: AssetPreload', () => {
+  it('no offense with link element', async () => {
+    const sourceCode = `
+      <link href="a.css" rel="stylesheet">
+      <link href="b.com" rel="preconnect">
+    `;
+
+    const offenses = await runLiquidCheck(AssetPreload, sourceCode);
+    expect(offenses).to.have.lengthOf(0);
+  });
+
+  it('reports stylesheet preloading', async () => {
+    const sourceCode = `
+      <link href="a.css" rel="preload" as="style">
+    `;
+
+    const offenses = await runLiquidCheck(AssetPreload, sourceCode);
+    expect(offenses).to.have.lengthOf(1);
+    expect(offenses[0].message).to.equal(
+      'For better performance, prefer using the preload argument of the stylesheet_tag filter',
+    );
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql([`<link href="a.css" rel="preload" as="style">`]);
+  });
+
+  it('reports image preloading', async () => {
+    const sourceCode = `
+      <link href="a.png" rel="preload" as="image">
+    `;
+
+    const offenses = await runLiquidCheck(AssetPreload, sourceCode);
+    expect(offenses).to.have.lengthOf(1);
+    expect(offenses[0].message).to.equal(
+      'For better performance, prefer using the preload argument of the image_tag filter',
+    );
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql([`<link href="a.png" rel="preload" as="image">`]);
+  });
+
+  it('reports general preloading', async () => {
+    const sourceCode = `
+      <link href="a.js" rel="preload" as="script">
+    `;
+
+    const offenses = await runLiquidCheck(AssetPreload, sourceCode);
+    expect(offenses).to.have.lengthOf(1);
+    expect(offenses[0].message).to.equal(
+      'For better performance, prefer using the preload_tag filter',
+    );
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql([`<link href="a.js" rel="preload" as="script">`]);
+  });
+
+  it('should report offenses for manual preloading of assets', async () => {
+    const sourceCode = `
+      <link href="{{ 'script.js' | asset_url }}" rel="preload" as="script">
+      <link href="{{ 'style.css' | asset_url }}" rel="preload" as="style">
+      <link href="{{ 'image.png' | asset_url }}" rel="preload" as="image">
+    `;
+
+    const offenses = await runLiquidCheck(AssetPreload, sourceCode);
+    expect(offenses).to.have.lengthOf(3);
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql([
+      `<link href="{{ 'script.js' | asset_url }}" rel="preload" as="script">`,
+      `<link href="{{ 'style.css' | asset_url }}" rel="preload" as="style">`,
+      `<link href="{{ 'image.png' | asset_url }}" rel="preload" as="image">`,
+    ]);
+  });
+});

package/src/checks/asset-preload/index.ts

@@ -0,0 +1,65 @@
+import { NodeTypes, TextNode } from '@platformos/liquid-html-parser';
+import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+import { ValuedHtmlAttribute, isAttr, isNodeOfType, isValuedHtmlAttribute } from '../utils';
+
+function isPreload(attr: ValuedHtmlAttribute): boolean {
+  return (
+    isAttr(attr, 'rel') &&
+    attr.value.some((node) => node.type === NodeTypes.TextNode && node.value === 'preload')
+  );
+}
+
+export const AssetPreload: LiquidCheckDefinition = {
+  meta: {
+    code: 'AssetPreload',
+    name: 'Prevent Manual Preloading of Assets',
+    docs: {
+      description:
+        'This check is aimed at discouraging the manual preloading of assets and encourages the use of appropriate Shopify filters.',
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/asset-preload',
+      recommended: true,
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.WARNING,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    return {
+      async HtmlVoidElement(node) {
+        const preloadLinkAttr = node.attributes.find(
+          (attr) => isValuedHtmlAttribute(attr) && isPreload(attr),
+        ) as ValuedHtmlAttribute | undefined;
+
+        if (node.name === 'link' && preloadLinkAttr) {
+          const asAttr: ValuedHtmlAttribute | undefined = node.attributes
+            .filter(isValuedHtmlAttribute)
+            .find((attr) => isAttr(attr, 'as'));
+
+          const assetType = asAttr?.value.find((node): node is TextNode =>
+            isNodeOfType(NodeTypes.TextNode, node),
+          )?.value;
+
+          let message = '';
+
+          if (assetType === 'style') {
+            message =
+              'For better performance, prefer using the preload argument of the stylesheet_tag filter';
+          } else if (assetType === 'image') {
+            message =
+              'For better performance, prefer using the preload argument of the image_tag filter';
+          } else {
+            message = 'For better performance, prefer using the preload_tag filter';
+          }
+
+          context.report({
+            message,
+            startIndex: node.position.start,
+            endIndex: node.position.end,
+          });
+        }
+      },
+    };
+  },
+};

package/src/checks/asset-size-app-block-css/index.spec.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+import { AssetSizeAppBlockCSS } from '.';
+import { check, MockTheme } from '../../test';
+
+describe('Module: AssetSizeAppBlockCSS', () => {
+  const extensionFiles: MockTheme = {
+    'assets/app.css': '* { color: green } ',
+    'blocks/app.liquid': `
+      {% schema %}
+      {
+        "stylesheet": "app.css"
+      }
+      {% endschema %}
+    `,
+  };
+
+  it('should not report any offenses if CSS is smaller than threshold', async () => {
+    const offenses = await check(extensionFiles, [AssetSizeAppBlockCSS]);
+
+    expect(offenses).toHaveLength(0);
+  });
+
+  it('should report an offense if CSS is larger than threshold', async () => {
+    const offenses = await check(
+      extensionFiles,
+      [AssetSizeAppBlockCSS],
+      {},
+      {
+        AssetSizeAppBlockCSS: {
+          enabled: true,
+          thresholdInBytes: 1,
+        },
+      },
+    );
+
+    expect(offenses).toHaveLength(1);
+    expect(offenses[0]).toMatchObject({
+      message: `The file size for 'app.css' (19 B) exceeds the configured threshold (1 B)`,
+      uri: 'file:///blocks/app.liquid',
+      start: { index: 51 },
+      end: { index: 58 },
+    });
+  });
+
+  it('should report an offense if the CSS file does not exist', async () => {
+    const extensionFiles: MockTheme = {
+      'blocks/app.liquid': `
+        {% schema %}
+        {
+          "stylesheet": "nonexistent.css"
+        }
+        {% endschema %}
+      `,
+    };
+
+    const offenses = await check(extensionFiles, [AssetSizeAppBlockCSS]);
+
+    expect(offenses).toHaveLength(1);
+    expect(offenses[0]).toMatchObject({
+      message: `'nonexistent.css' does not exist.`,
+      uri: 'file:///blocks/app.liquid',
+      start: { index: 57 },
+      end: { index: 72 },
+    });
+  });
+
+  it('should reports offense if the CSS file does not exist and the asset has a trailing comma', async () => {
+    const extensionFiles: MockTheme = {
+      'blocks/app.liquid': `
+        {% schema %}
+        {
+          "stylesheet": "nonexistent.css",
+        }
+        {% endschema %}
+      `,
+    };
+
+    const offenses = await check(extensionFiles, [AssetSizeAppBlockCSS]);
+
+    expect(offenses).toHaveLength(1);
+    expect(offenses[0]).toMatchObject({
+      message: `'nonexistent.css' does not exist.`,
+      uri: 'file:///blocks/app.liquid',
+      start: { index: 57 },
+      end: { index: 72 },
+    });
+  });
+});