@platformos/platformos-check-common 0.0.7 → 0.0.9

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

@@ -1,96 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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 },
-    });
-  });
-});

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

@@ -1,78 +0,0 @@
-import { parseJSON } from '../../json';
-import {
-  ConfigTarget,
-  LiquidCheckDefinition,
-  SchemaProp,
-  Severity,
-  SourceCodeType,
-} from '../../types';
-import { isError } from '../../utils';
-import { doesFileExceedThreshold, doesFileExist } from '../../utils/file-utils';
-
-const schema = {
-  thresholdInBytes: SchemaProp.number(100000),
-};
-
-export const AssetSizeAppBlockCSS: LiquidCheckDefinition<typeof schema> = {
-  meta: {
-    code: 'AssetSizeAppBlockCSS',
-    name: 'Asset Size App Block CSS',
-    docs: {
-      description:
-        'This check is aimed at preventing large CSS bundles from being included via Theme App Extensions.',
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-css',
-      recommended: true,
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.ERROR,
-    schema,
-    targets: [ConfigTarget.ThemeAppExtension],
-  },
-
-  create(context) {
-    if (!context.fileSize) {
-      return {};
-    }
-
-    return {
-      async LiquidRawTag(node) {
-        if (node.name !== 'schema') return;
-        const schema = parseJSON(node.body.value);
-        if (isError(schema)) return;
-        const stylesheet = schema.stylesheet;
-        if (!stylesheet) return;
-
-        const relativePath = `assets/${stylesheet}`;
-        const thresholdInBytes = context.settings.thresholdInBytes;
-
-        const startIndex = node.body.position.start + node.body.value.indexOf(stylesheet);
-        const endIndex = startIndex + stylesheet.length;
-
-        const fileExists = await doesFileExist(context, relativePath);
-
-        if (!fileExists) {
-          context.report({
-            message: `'${stylesheet}' does not exist.`,
-            startIndex: startIndex,
-            endIndex: endIndex,
-          });
-          return;
-        }
-
-        const [fileExceedsThreshold, fileSize] = await doesFileExceedThreshold(
-          context,
-          relativePath,
-          thresholdInBytes,
-        );
-
-        if (fileExceedsThreshold) {
-          context.report({
-            message: `The file size for '${stylesheet}' (${fileSize} B) exceeds the configured threshold (${thresholdInBytes} B)`,
-            startIndex: startIndex,
-            endIndex: endIndex,
-          });
-        }
-      },
-    };
-  },
-};

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

@@ -1,66 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { AssetSizeAppBlockJavaScript } from '.';
-import { check, MockTheme } from '../../test';
-
-describe('Module: AssetSizeAppBlockJavaScript', () => {
-  const extensionFiles: MockTheme = {
-    'assets/app.js': 'console.log("Hello, world!");',
-    'blocks/app.liquid': `
-      {% schema %}
-      {
-        "javascript": "app.js"
-      }
-      {% endschema %}
-    `,
-  };
-
-  it('should not report any offenses if JavaScript is smaller than threshold', async () => {
-    const offenses = await check(extensionFiles, [AssetSizeAppBlockJavaScript]);
-
-    expect(offenses).toHaveLength(0);
-  });
-
-  it('should report an offense if JavaScript is larger than threshold', async () => {
-    const offenses = await check(
-      extensionFiles,
-      [AssetSizeAppBlockJavaScript],
-      {},
-      {
-        AssetSizeAppBlockJavaScript: {
-          enabled: true,
-          thresholdInBytes: 1,
-        },
-      },
-    );
-
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0]).toMatchObject({
-      message: `The file size for 'app.js' (29 B) exceeds the configured threshold (1 B)`,
-      uri: 'file:///blocks/app.liquid',
-      start: { index: 51 },
-      end: { index: 57 },
-    });
-  });
-
-  it('should report an offense if the JavaScript file does not exist', async () => {
-    const extensionFiles: MockTheme = {
-      'blocks/app.liquid': `
-        {% schema %}
-        {
-          "javascript": "nonexistent.js"
-        }
-        {% endschema %}
-      `,
-    };
-
-    const offenses = await check(extensionFiles, [AssetSizeAppBlockJavaScript]);
-
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0]).toMatchObject({
-      message: `'nonexistent.js' does not exist.`,
-      uri: 'file:///blocks/app.liquid',
-      start: { index: 57 },
-      end: { index: 71 },
-    });
-  });
-});

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

@@ -1,78 +0,0 @@
-import { parseJSON } from '../../json';
-import {
-  ConfigTarget,
-  LiquidCheckDefinition,
-  SchemaProp,
-  Severity,
-  SourceCodeType,
-} from '../../types';
-import { isError } from '../../utils';
-import { doesFileExist, doesFileExceedThreshold } from '../../utils/file-utils';
-
-const schema = {
-  thresholdInBytes: SchemaProp.number(10000),
-};
-
-export const AssetSizeAppBlockJavaScript: LiquidCheckDefinition<typeof schema> = {
-  meta: {
-    code: 'AssetSizeAppBlockJavaScript',
-    name: 'Asset Size App Block JavaScript',
-    docs: {
-      description:
-        'This check is aimed at preventing large JavaScript bundles from being included via Theme App Extensions.',
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/asset-size-app-block-javascript',
-      recommended: true,
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.ERROR,
-    schema,
-    targets: [ConfigTarget.ThemeAppExtension],
-  },
-
-  create(context) {
-    if (!context.fileSize) {
-      return {};
-    }
-
-    return {
-      async LiquidRawTag(node) {
-        if (node.name !== 'schema') return;
-        const schema = parseJSON(node.body.value);
-        if (isError(schema)) return;
-        const javascript = schema.javascript;
-        if (!javascript) return;
-
-        const relativePath = `assets/${javascript}`;
-        const thresholdInBytes = context.settings.thresholdInBytes;
-
-        const startIndex = node.body.position.start + node.body.value.indexOf(javascript);
-        const endIndex = startIndex + javascript.length;
-
-        const fileExists = await doesFileExist(context, relativePath);
-
-        if (!fileExists) {
-          context.report({
-            message: `'${javascript}' does not exist.`,
-            startIndex: startIndex,
-            endIndex: endIndex,
-          });
-          return;
-        }
-
-        const [fileExceedsThreshold, fileSize] = await doesFileExceedThreshold(
-          context,
-          relativePath,
-          thresholdInBytes,
-        );
-
-        if (fileExceedsThreshold) {
-          context.report({
-            message: `The file size for '${javascript}' (${fileSize} B) exceeds the configured threshold (${thresholdInBytes} B)`,
-            startIndex: startIndex,
-            endIndex: endIndex,
-          });
-        }
-      },
-    };
-  },
-};