@platformos/platformos-check-common 0.0.7 → 0.0.8

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,
-          });
-        }
-      },
-    };
-  },
-};

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

@@ -1,166 +0,0 @@
-import { vi, expect, describe, it, afterEach } from 'vitest';
-import { AssetSizeCSS } from '.';
-import { check, MockTheme } from '../../test';
-import { SchemaProp } from '../../types';
-import { hasRemoteAssetSizeExceededThreshold } from '../../utils/file-utils';
-
-vi.mock('../../utils/file-utils', async (importOriginal) => {
-  const actual: any = await importOriginal();
-  return {
-    ...actual,
-    hasRemoteAssetSizeExceededThreshold: vi.fn(),
-  };
-});
-
-describe('Module: AssetSizeCSS', () => {
-  const extensionFiles: MockTheme = {
-    'assets/theme.css': '* { color: green !important; }',
-    'templates/index.liquid': `
-      <html>
-        <head>
-          <link href="{{ 'theme.css' | asset_url }}" rel="stylesheet">
-        </head>
-      </html>
-    `,
-  };
-
-  const httpTest: MockTheme = {
-    'templates/index.liquid': `
-      <html>
-        <head>
-          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
-        </head>
-      </html>
-    `,
-  };
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should not report any offenses if CSS is smaller than threshold', async () => {
-    const offenses = await check(extensionFiles, [AssetSizeCSS]);
-
-    expect(offenses).toHaveLength(0);
-  });
-
-  it('should report an offense if CSS is larger than threshold', async () => {
-    const offenses = await check(
-      extensionFiles,
-      [AssetSizeCSS],
-      {},
-      {
-        AssetSizeCSS: {
-          enabled: true,
-          thresholdInBytes: 1,
-        },
-      },
-    );
-
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0]).toMatchObject({
-      message: 'The CSS file size exceeds the threshold of 1 bytes',
-      uri: 'file:///templates/index.liquid',
-      start: { index: 51 },
-      end: { index: 80 },
-    });
-  });
-
-  it('should report a warning when the CSS file size exceeds the threshold', async () => {
-    vi.mocked(hasRemoteAssetSizeExceededThreshold).mockReturnValue(Promise.resolve(true));
-    const offenses = await check(
-      httpTest,
-      [AssetSizeCSS],
-      {},
-      {
-        AssetSizeCSS: {
-          enabled: true,
-          thresholdInBytes: 1,
-        },
-      },
-    );
-
-    expect(offenses).toHaveLength(1);
-    expect(offenses[0]).toMatchObject({
-      message: 'The CSS file size exceeds the threshold of 1 bytes',
-      uri: 'file:///templates/index.liquid',
-      start: { index: 51 },
-      end: { index: 122 },
-    });
-  });
-
-  it('should not report any offenses if CSS is smaller than threshold 2', async () => {
-    vi.mocked(hasRemoteAssetSizeExceededThreshold).mockResolvedValue(false);
-    const extensionFiles: MockTheme = {
-      'assets/theme.css': 'console.log("hello world");',
-      'templates/index.liquid': `
-        <html>
-          <head>
-            {{ 'theme.css' | asset_url | stylesheet_tag }}
-            {{ "https://example.com" | stylesheet_tag }}
-          </head>
-        </html>
-      `,
-    };
-
-    const offenses = await check(extensionFiles, [AssetSizeCSS]);
-
-    expect(offenses).toHaveLength(0);
-  });
-
-  it('should report an offense if CSS is larger than threshold 2', async () => {
-    vi.mocked(hasRemoteAssetSizeExceededThreshold).mockResolvedValue(true);
-    const extensionFiles: MockTheme = {
-      'assets/theme.css': 'console.log("hello world");',
-      'templates/index.liquid': `
-        <html>
-          <head>
-            {{ 'theme.css' | asset_url | stylesheet_tag }}
-            {{ "https://example.com" | stylesheet_tag }}
-          </head>
-        </html>
-      `,
-    };
-
-    const offenses = await check(
-      extensionFiles,
-      [AssetSizeCSS],
-      {},
-      {
-        AssetSizeCSS: {
-          enabled: true,
-          thresholdInBytes: 2,
-        },
-      },
-    );
-
-    expect(offenses).toHaveLength(2);
-    expect(offenses[0]).toMatchObject({
-      message: 'The CSS file size exceeds the threshold of 2 bytes',
-      uri: 'file:///templates/index.liquid',
-      start: { index: 48 },
-      end: { index: 89 },
-    });
-    expect(offenses[1]).toMatchObject({
-      message: 'The CSS file size exceeds the threshold of 2 bytes',
-      uri: 'file:///templates/index.liquid',
-      start: { index: 107 },
-      end: { index: 128 },
-    });
-  });
-
-  it('should not report any offenses if there is no stylesheet', async () => {
-    const extensionFiles: MockTheme = {
-      'templates/index.liquid': `
-        <html>
-          <head>
-          </head>
-        </html>
-      `,
-    };
-
-    const offenses = await check(extensionFiles, [AssetSizeCSS]);
-
-    expect(offenses).toHaveLength(0);
-  });
-});

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

@@ -1,160 +0,0 @@
-import {
-  LiquidHtmlNode,
-  LiquidString,
-  LiquidVariable,
-  LiquidVariableOutput,
-  NodeTypes,
-  TextNode,
-} from '@platformos/liquid-html-parser';
-import { LiquidCheckDefinition, SchemaProp, Severity, SourceCodeType } from '../../types';
-import { last } from '../../utils';
-import {
-  hasRemoteAssetSizeExceededThreshold,
-  hasLocalAssetSizeExceededThreshold,
-} from '../../utils/file-utils';
-import {
-  ValuedHtmlAttribute,
-  isAttr,
-  isNodeOfType,
-  isValuedHtmlAttribute,
-  valueIncludes,
-} from '../utils';
-
-const schema = {
-  thresholdInBytes: SchemaProp.number(100000),
-};
-
-function isTextNode(node: LiquidHtmlNode): node is TextNode {
-  return node.type === NodeTypes.TextNode;
-}
-
-function isLiquidVariableOutput(node: LiquidHtmlNode): node is LiquidVariableOutput {
-  return node.type === NodeTypes.LiquidVariableOutput;
-}
-
-function isLiquidVariable(node: LiquidHtmlNode | string): node is LiquidVariable {
-  return typeof node !== 'string' && node.type === NodeTypes.LiquidVariable;
-}
-
-function isString(node: LiquidHtmlNode): node is LiquidString {
-  return node.type === NodeTypes.String;
-}
-
-export const AssetSizeCSS: LiquidCheckDefinition<typeof schema> = {
-  meta: {
-    code: 'AssetSizeCSS',
-    aliases: ['AssetSizeCSSStylesheetTag'],
-    name: 'Prevent Large CSS bundles',
-    docs: {
-      description: 'This check is aimed at preventing large CSS bundles for speed.',
-      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/asset-size-css',
-      recommended: false,
-    },
-    type: SourceCodeType.LiquidHtml,
-    severity: Severity.ERROR,
-    schema,
-    targets: [],
-  },
-
-  create(context) {
-    if (!context.fileSize) {
-      return {};
-    }
-
-    const thresholdInBytes = context.settings.thresholdInBytes;
-
-    async function checkRemoteAssetSize(url: string, position: { start: number; end: number }) {
-      if (await hasRemoteAssetSizeExceededThreshold(url, thresholdInBytes)) {
-        context.report({
-          message: `The CSS file size exceeds the threshold of ${thresholdInBytes} bytes`,
-          startIndex: position.start,
-          endIndex: position.end,
-        });
-      }
-    }
-
-    async function checkThemeAssetSize(srcValue: string, position: { start: number; end: number }) {
-      if (
-        await hasLocalAssetSizeExceededThreshold(context, `assets/${srcValue}`, thresholdInBytes)
-      ) {
-        context.report({
-          message: `The CSS file size exceeds the threshold of ${thresholdInBytes} bytes`,
-          startIndex: position.start,
-          endIndex: position.end,
-        });
-      }
-    }
-
-    return {
-      async HtmlVoidElement(node) {
-        if (node.name !== 'link') return;
-
-        const relIsStylesheet = node.attributes
-          .filter(isValuedHtmlAttribute)
-          .find((attr) => isAttr(attr, 'rel') && valueIncludes(attr, 'stylesheet'));
-        if (!relIsStylesheet) return;
-
-        const href: ValuedHtmlAttribute | undefined = node.attributes
-          .filter(isValuedHtmlAttribute)
-          .find((attr) => isAttr(attr, 'href'));
-        if (!href) return;
-        if (href.value.length !== 1) return;
-
-        /* This ensures that the link entered is a text and not anything else like http//..{}
-           This also checks if the value starts with 'http://', 'https://' or '//' to ensure its a valid link. */
-        if (isTextNode(href.value[0]) && /(https?:)?\/\//.test(href.value[0].value)) {
-          const url = href.value[0].value;
-          await checkRemoteAssetSize(url, href.attributePosition);
-        }
-
-        /* This code checks if we have a link with a liquid variable
-        and that its a string with one filter, `asset_url`. This is done to ensure our .css link is
-        entered with a 'asset_url' to produce valid output. */
-        if (
-          isLiquidVariableOutput(href.value[0]) &&
-          isLiquidVariable(href.value[0].markup) &&
-          isString(href.value[0].markup.expression) &&
-          href.value[0].markup.filters.length === 1 &&
-          href.value[0].markup.filters[0].name === 'asset_url'
-        ) {
-          const assetName = href.value[0].markup.expression.value;
-          await checkThemeAssetSize(assetName, href.attributePosition);
-        }
-      },
-
-      async LiquidFilter(node, ancestors) {
-        if (node.name !== 'stylesheet_tag') return;
-
-        const liquidVariableParent = last(ancestors);
-
-        if (!liquidVariableParent || !isNodeOfType(NodeTypes.LiquidVariable, liquidVariableParent))
-          return;
-
-        if (liquidVariableParent.expression.type !== NodeTypes.String) return;
-
-        /* This code ensures we have a liquid variable with 1 expression, 1 filter, and that it is a valid http link.
-           This is done to ensure a valid http link is entered with 1 filter being the `stylesheet_tag` for valid output. */
-        if (
-          liquidVariableParent.expression.value[0].length == 1 &&
-          liquidVariableParent.filters.length == 1 &&
-          /(https?:)?\/\//.test(liquidVariableParent.expression.value)
-        ) {
-          const url = liquidVariableParent.expression.value;
-          await checkRemoteAssetSize(url, liquidVariableParent.expression.position);
-        }
-
-        /* This code ensures we have a liquid variable with 1 expression, 2 filters being asset_url and stylesheet_tag
-           This is done to ensure a .css file has the 'asset_url' and 'stylesheet_tag' to produce the appropriate output. */
-        if (
-          liquidVariableParent.expression.value[0].length == 1 &&
-          liquidVariableParent.filters.length == 2 &&
-          liquidVariableParent.filters[0].name === 'asset_url' &&
-          liquidVariableParent.filters[1].name === 'stylesheet_tag'
-        ) {
-          const css = liquidVariableParent.expression.value;
-          await checkThemeAssetSize(css, liquidVariableParent.position);
-        }
-      },
-    };
-  },
-};