@platformos/platformos-check-common 0.0.2

package/src/checks/graphql-variables/index.ts

@@ -0,0 +1,113 @@
+import { LiquidCheckDefinition, Severity, SourceCodeType } from '../../types';
+import { DocumentsLocator } from '@platformos/platformos-common';
+import { URI } from 'vscode-uri';
+import { LiquidNamedArgument, Position } from '@platformos/liquid-html-parser';
+import { OperationDefinitionNode, parse, TypeNode } from 'graphql/language';
+
+type ExtractedVariable = {
+  name: string;
+  required: boolean;
+};
+
+function isNonNullType(type: TypeNode): boolean {
+  return type.kind === 'NonNullType';
+}
+
+export function extractVariables(content: string): ExtractedVariable[] | undefined {
+  try {
+    const ast = parse(content);
+    const variables: ExtractedVariable[] = [];
+
+    for (const definition of ast.definitions) {
+      if (definition.kind === 'OperationDefinition') {
+        const operation = definition as OperationDefinitionNode;
+
+        if (operation.variableDefinitions) {
+          for (const variableDef of operation.variableDefinitions) {
+            const hasDefault = variableDef.defaultValue != null;
+            variables.push({
+              name: variableDef.variable.name.value,
+              required: isNonNullType(variableDef.type) && !hasDefault,
+            });
+          }
+        }
+      }
+    }
+
+    return variables;
+  } catch {
+    return undefined;
+  }
+}
+
+export const GraphQLVariablesCheck: LiquidCheckDefinition = {
+  meta: {
+    code: 'GraphQLVariablesCheck',
+    name: 'GraphQL Variables Check',
+    docs: {
+      description:
+        'Ensures that parameters referenced in the document exist in the GraphQL query or mutation.',
+      recommended: true,
+      url: undefined,
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    const locator = new DocumentsLocator(context.fs);
+
+    const validate = async (
+      targetFile: string,
+      args: LiquidNamedArgument[],
+      position: Position,
+    ) => {
+      const locatedFile = await locator.locate(
+        URI.parse(context.config.rootUri),
+        'graphql',
+        targetFile,
+      );
+
+      if (!locatedFile) {
+        return;
+      }
+      let params = extractVariables(await context.fs.readFile(locatedFile));
+
+      if (!params) {
+        return;
+      }
+      args
+        .filter((arg) => !params.find((param) => param.name == arg.name))
+        .forEach((arg) => {
+          context.report({
+            message: `Unknown parameter ${arg.name} passed to GraphQL call`,
+            startIndex: arg.position.start,
+            endIndex: arg.position.end,
+          });
+        });
+
+      params
+        .filter((param) => param.required && !args.find((arg) => arg.name === param.name))
+        .forEach((param) => {
+          context.report({
+            message: `Required parameter ${param.name} must be passed to GraphQL call`,
+            startIndex: position.start,
+            endIndex: position.end,
+          });
+        });
+    };
+
+    return {
+      async GraphQLMarkup(node) {
+        const targetFile = 'value' in node.graphql ? node.graphql.value : node.graphql.name;
+        if (!targetFile) {
+          return;
+        }
+
+        await validate(targetFile, node.args, node.position);
+      },
+    };
+  },
+};

package/src/checks/hardcoded-routes/index.spec.ts

@@ -0,0 +1,58 @@
+import { expect, describe, it } from 'vitest';
+import { HardcodedRoutes } from './index';
+import { runLiquidCheck, highlightedOffenses } from '../../test';
+
+describe('Module: HardcodedRoutes', () => {
+  it('should report offenses for hardcoded routes', async () => {
+    const sourceCode = `
+      <a href="/"></a>
+      <form action="/search"></form>
+      <a href="/account/login"></a>
+      <a href="/collections/{{ collection.handle }}"></a>
+      <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0"></a>
+      <li>{{ 'Socks' | link_to: '/collections/socks' }}</li>
+      <li>{{ 'Home' | link_to: '/' }}</li>
+      <li>{{ 'Cart (' | append: cart.item_count | append: ')' | link_to: '/cart' }}</li>
+    `;
+
+    const offenses = await runLiquidCheck(HardcodedRoutes, sourceCode);
+    expect(offenses).to.have.length(8);
+
+    const errorMessages = offenses.map((offense) => offense.message);
+    expect(errorMessages).to.deep.equal([
+      'Use routes object {{ routes.root_url }} instead of hardcoding /',
+      'Use routes object {{ routes.search_url }} instead of hardcoding /search',
+      'Use routes object {{ routes.account_login_url }} instead of hardcoding /account/login',
+      'Use routes object {{ routes.collections_url }} instead of hardcoding /collections',
+      'Use routes object {{ routes.cart_change_url }} instead of hardcoding /cart/change',
+      'Use routes object {{ routes.collections_url }} instead of hardcoding /collections',
+      'Use routes object {{ routes.root_url }} instead of hardcoding /',
+      'Use routes object {{ routes.cart_url }} instead of hardcoding /cart',
+    ]);
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.deep.equal([
+      '/',
+      '/search',
+      '/account/login',
+      '/collections',
+      '/cart/change',
+      '/collections',
+      '/',
+      '/cart',
+    ]);
+  });
+
+  it('should not report offenses for route objects', async () => {
+    const sourceCode = `
+      <form action="{{ routes.search_url }}"></form>
+      <a href="/{{ blog.url }}"></a>  
+      <a href="/admin"></a>
+      <a href="#MainContent"></a>
+      <li>{{ 'About' | link_to: '/pages/about' }}</li>
+    `;
+
+    const offenses = await runLiquidCheck(HardcodedRoutes, sourceCode);
+    expect(offenses).to.have.length(0);
+  });
+});

package/src/checks/hardcoded-routes/index.ts

@@ -0,0 +1,100 @@
+import { NodeTypes } from '@platformos/liquid-html-parser';
+import { Severity, SourceCodeType, LiquidCheckDefinition } from '../../types';
+import { isAttr, isNodeOfType, isValuedHtmlAttribute, ValuedHtmlAttribute } from '../utils';
+
+const ROUTES: Record<string, string> = {
+  '/': 'root_url',
+  '/account': 'account_url',
+  '/account/addresses': 'account_addresses_url',
+  '/account/login': 'account_login_url',
+  '/account/logout': 'account_logout_url',
+  '/account/recover': 'account_recover_url',
+  '/account/register': 'account_register_url',
+  '/cart': 'cart_url',
+  '/cart/add': 'cart_add_url',
+  '/cart/change': 'cart_change_url',
+  '/cart/clear': 'cart_clear_url',
+  '/cart/update': 'cart_update_url',
+  '/collections': 'collections_url',
+  '/collections/all': 'all_products_collection_url',
+  '/customer_authentication/login': 'storefront_login_url',
+  '/recommendations/products': 'product_recommendations_url',
+  '/search': 'search_url',
+  '/search/suggest': 'predictive_search_url',
+};
+
+const HARDCODED_ROUTES = Object.keys(ROUTES).reverse();
+
+export const HardcodedRoutes: LiquidCheckDefinition = {
+  meta: {
+    code: 'HardcodedRoutes',
+    name: 'Hardcoded Routes',
+    docs: {
+      description: 'This check encourages using the routes object instead of hardcoding URLs.',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/hardcoded-routes',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.WARNING,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    return {
+      async HtmlElement(node) {
+        // checks for hardcoded routes in href and action attributes
+        const attrWithHardcodedRoute: ValuedHtmlAttribute | undefined = node.attributes
+          .filter(isValuedHtmlAttribute)
+          .find((attr) => (isAttr(attr, 'action') || isAttr(attr, 'href')) && hardcodedRoute(attr));
+
+        if (attrWithHardcodedRoute) {
+          const attr = attrWithHardcodedRoute;
+          const route = hardcodedRoute(attr)!;
+          const routeURL = ROUTES[route];
+          const startIndex = attr.attributePosition.start;
+          const endIndex = startIndex + route.length;
+
+          context.report({
+            message: `Use routes object {{ routes.${routeURL} }} instead of hardcoding ${route}`,
+            startIndex,
+            endIndex,
+          });
+        }
+      },
+
+      async LiquidFilter(node) {
+        // checks for hardcoded routes in link_to values {{ 'Cart' | link_to: '/cart' }}
+        if (node.name !== 'link_to') return;
+
+        const linkToArg = node.args[0];
+        const linkToValue = linkToArg.type === 'String' ? linkToArg.value : '';
+        const route = HARDCODED_ROUTES.find((route) =>
+          route === '/' ? route === linkToValue : linkToValue.startsWith(route),
+        );
+
+        if (route) {
+          const routeURL = ROUTES[route];
+          // we add 1 to the start index to exclude the quotes
+          const startIndex = linkToArg.position.start + 1;
+
+          context.report({
+            message: `Use routes object {{ routes.${routeURL} }} instead of hardcoding ${route}`,
+            startIndex,
+            endIndex: startIndex + route.length,
+          });
+        }
+      },
+    };
+  },
+};
+
+function hardcodedRoute(attr: ValuedHtmlAttribute): string | undefined {
+  if (!isNodeOfType(NodeTypes.TextNode, attr.value[0])) return;
+
+  const value = attr.value[0].value;
+
+  return HARDCODED_ROUTES.find((route) =>
+    route === '/' ? route === value && attr.value.length === 1 : value.startsWith(route),
+  );
+}

package/src/checks/img-width-and-height/index.spec.ts

@@ -0,0 +1,79 @@
+import { expect, describe, it } from 'vitest';
+import { highlightedOffenses, runLiquidCheck } from '../../test';
+import { ImgWidthAndHeight } from './index';
+
+describe('Module: ImgWidthAndHeight', () => {
+  it('should report missing attributes on multiple img tags with mixed attributes', async () => {
+    const sourceCode = `
+      <img src="example1.jpg" width="100" height="100">
+      <img src="example2.jpg" width="100">
+      <img src="example3.jpg" height="100">
+      <img src="example4.jpg">
+    `;
+
+    const offenses = await runLiquidCheck(ImgWidthAndHeight, sourceCode);
+    expect(offenses).to.have.lengthOf(3);
+    expect(offenses[0].message).to.equal('Missing height attribute on img tag');
+    expect(offenses[1].message).to.equal('Missing width attribute on img tag');
+    expect(offenses[2].message).to.equal('Missing width and height attributes on img tag');
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql([
+      '<img src="example2.jpg" width="100">',
+      '<img src="example3.jpg" height="100">',
+      '<img src="example4.jpg">',
+    ]);
+  });
+
+  it('should report missing width and height attributes on img tags', async () => {
+    const sourceCode = `
+      <a-{{ product.id }} href="example.com">content</a-{{ product.id }}>
+      <input type="submit">
+      <img src="example.jpg">
+    `;
+
+    const offenses = await runLiquidCheck(ImgWidthAndHeight, sourceCode);
+    expect(offenses).to.have.lengthOf(1);
+    expect(offenses[0].message).to.equal('Missing width and height attributes on img tag');
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql(['<img src="example.jpg">']);
+  });
+
+  it('should report missing height attribute on img tags', async () => {
+    const sourceCode = `
+      <input type="submit">
+      <img src="example.jpg" width="100">
+    `;
+
+    const offenses = await runLiquidCheck(ImgWidthAndHeight, sourceCode);
+    expect(offenses).to.have.lengthOf(1);
+    expect(offenses[0].message).to.equal('Missing height attribute on img tag');
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql(['<img src="example.jpg" width="100">']);
+  });
+
+  it('should report missing width attribute on img tags', async () => {
+    const sourceCode = `
+      <input type="submit">
+      <img src="example.jpg" height="100">
+    `;
+
+    const offenses = await runLiquidCheck(ImgWidthAndHeight, sourceCode);
+    expect(offenses).to.have.lengthOf(1);
+    expect(offenses[0].message).to.equal('Missing width attribute on img tag');
+
+    const highlights = highlightedOffenses({ 'file.liquid': sourceCode }, offenses);
+    expect(highlights).to.eql(['<img src="example.jpg" height="100">']);
+  });
+
+  it('should not report missing attributes on img tags if they are not missing', async () => {
+    const sourceCode = `
+      <img src="example.jpg" width="100" height="100">
+    `;
+
+    const offenses = await runLiquidCheck(ImgWidthAndHeight, sourceCode);
+    expect(offenses).to.be.empty;
+  });
+});

package/src/checks/img-width-and-height/index.ts

@@ -0,0 +1,52 @@
+import { Severity, SourceCodeType, LiquidCheckDefinition } from '../../types';
+import { isAttr, isValuedHtmlAttribute, ValuedHtmlAttribute } from '../utils';
+
+export const ImgWidthAndHeight: LiquidCheckDefinition = {
+  meta: {
+    code: 'ImgWidthAndHeight',
+    name: 'Width and height attributes on image tags',
+    docs: {
+      description:
+        'This check is aimed at eliminating content layout shift in themes by enforcing the use of the width and height attributes on img tags.',
+      recommended: true,
+      url: 'https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/img-width-and-height',
+    },
+    type: SourceCodeType.LiquidHtml,
+    severity: Severity.ERROR,
+    schema: {},
+    targets: [],
+  },
+
+  create(context) {
+    return {
+      async HtmlVoidElement(node) {
+        if (node.name === 'img') {
+          const widthAttr = node.attributes.find(
+            (attr) => isValuedHtmlAttribute(attr) && isAttr(attr, 'width'),
+          ) as ValuedHtmlAttribute | undefined;
+
+          const heightAttr = node.attributes.find(
+            (attr) => isValuedHtmlAttribute(attr) && isAttr(attr, 'height'),
+          ) as ValuedHtmlAttribute | undefined;
+
+          let missingAttributes = [];
+          if (!widthAttr) {
+            missingAttributes.push('width');
+          }
+          if (!heightAttr) {
+            missingAttributes.push('height');
+          }
+
+          if (missingAttributes.length > 0) {
+            const attributeWord = missingAttributes.length === 1 ? 'attribute' : 'attributes';
+            context.report({
+              message: `Missing ${missingAttributes.join(' and ')} ${attributeWord} on img tag`,
+              startIndex: node.position.start,
+              endIndex: node.position.end,
+            });
+          }
+        }
+      },
+    };
+  },
+};

package/src/checks/index.ts

@@ -0,0 +1,160 @@
+import {
+  ConfigTarget,
+  GraphQLCheckDefinition,
+  JSONCheckDefinition,
+  LiquidCheckDefinition,
+} from '../types';
+
+import { AppBlockValidTags } from './app-block-valid-tags';
+import { AssetPreload } from './asset-preload';
+import { AssetSizeAppBlockCSS } from './asset-size-app-block-css';
+import { AssetSizeAppBlockJavaScript } from './asset-size-app-block-javascript';
+import { AssetSizeCSS } from './asset-size-css';
+import { AssetSizeJavaScript } from './asset-size-javascript';
+import { BlockIdUsage } from './block-id-usage';
+import { CdnPreconnect } from './cdn-preconnect';
+import { ContentForHeaderModification } from './content-for-header-modification';
+import { DeprecateBgsizes } from './deprecate-bgsizes';
+import { DeprecateLazysizes } from './deprecate-lazysizes';
+import { DeprecatedFilter } from './deprecated-filter';
+import { DeprecatedFontsOnSectionsAndBlocks } from './deprecated-fonts-on-sections-and-blocks';
+import { DeprecatedFontsOnSettingsSchema } from './deprecated-fonts-on-settings-schema';
+import { DeprecatedTag } from './deprecated-tag';
+import { DuplicateRenderPartialArguments } from './duplicate-render-partial-arguments';
+import { DuplicateContentForArguments } from './duplicate-content-for-arguments';
+import { EmptyBlockContent } from './empty-block-content';
+import { HardcodedRoutes } from './hardcoded-routes';
+import { ImgWidthAndHeight } from './img-width-and-height';
+import { JSONMissingBlock } from './json-missing-block';
+import { JSONSyntaxError } from './json-syntax-error';
+import { LiquidFreeSettings } from './liquid-free-settings';
+import { LiquidHTMLSyntaxError } from './liquid-html-syntax-error';
+import { MatchingTranslations } from './matching-translations';
+import { MissingAsset } from './missing-asset';
+import { MissingContentForArguments } from './missing-content-for-arguments';
+import { MissingTemplate } from './missing-template';
+import { OrphanedPartial } from './orphaned-partial';
+import { PaginationSize } from './pagination-size';
+import { ParserBlockingScript } from './parser-blocking-script';
+import { SchemaPresetsBlockOrder } from './schema-presets-block-order';
+import { SchemaPresetsStaticBlocks } from './schema-presets-static-blocks';
+import { RemoteAsset } from './remote-asset';
+import { ReservedDocParamNames } from './reserved-doc-param-names';
+import { StaticStylesheetAndJavascriptTags } from './static-stylesheet-and-javascript-tags';
+import { TranslationKeyExists } from './translation-key-exists';
+import { UnclosedHTMLElement } from './unclosed-html-element';
+import { UndefinedObject } from './undefined-object';
+import { UniqueDocParamNames } from './unique-doc-param-names';
+import { UniqueStaticBlockId } from './unique-static-block-id';
+import { UnknownFilter } from './unknown-filter';
+import { UnrecognizedContentForArguments } from './unrecognized-content-for-arguments';
+import { UnrecognizedRenderPartialArguments } from './unrecognized-render-partial-arguments';
+import { UnusedAssign } from './unused-assign';
+import { UnusedDocParam } from './unused-doc-param';
+import { ValidContentForArguments } from './valid-content-for-arguments';
+import { ValidContentForArgumentTypes } from './valid-content-for-argument-types';
+import { ValidBlockTarget } from './valid-block-target';
+import { ValidHTMLTranslation } from './valid-html-translation';
+import { ValidJSON } from './valid-json';
+import { ValidDocParamTypes } from './valid-doc-param-types';
+import { ValidLocalBlocks } from './valid-local-blocks';
+import { ValidRenderPartialArgumentTypes } from './valid-render-partial-argument-types';
+import { ValidSchema } from './valid-schema';
+import { ValidSchemaName } from './valid-schema-name';
+import { ValidSettingsKey } from './valid-settings-key';
+import { ValidStaticBlockType } from './valid-static-block-type';
+import { ValidVisibleIf, ValidVisibleIfSettingsSchema } from './valid-visible-if';
+import { VariableName } from './variable-name';
+import { AppBlockMissingSchema } from './app-block-missing-schema';
+import { UniqueSettingIds } from './unique-settings-id';
+import { MetadataParamsCheck } from './metadata-params';
+import { GraphQLVariablesCheck } from './graphql-variables';
+import { GraphQLCheck } from './graphql';
+import { UnknownProperty } from './unknown-property';
+import { InvalidHashAssignTarget } from './invalid-hash-assign-target';
+
+export const allChecks: (LiquidCheckDefinition | JSONCheckDefinition | GraphQLCheckDefinition)[] = [
+  AppBlockValidTags,
+  AssetPreload,
+  AssetSizeAppBlockCSS,
+  AssetSizeAppBlockJavaScript,
+  AssetSizeCSS,
+  AssetSizeJavaScript,
+  BlockIdUsage,
+  CdnPreconnect,
+  ContentForHeaderModification,
+  DeprecateBgsizes,
+  DeprecateLazysizes,
+  DeprecatedFilter,
+  DeprecatedFontsOnSectionsAndBlocks,
+  DeprecatedFontsOnSettingsSchema,
+  DeprecatedTag,
+  DuplicateContentForArguments,
+  DuplicateRenderPartialArguments,
+  EmptyBlockContent,
+  HardcodedRoutes,
+  ImgWidthAndHeight,
+  JSONMissingBlock,
+  JSONSyntaxError,
+  LiquidFreeSettings,
+  LiquidHTMLSyntaxError,
+  MatchingTranslations,
+  MissingAsset,
+  MissingContentForArguments,
+  MissingTemplate,
+  AppBlockMissingSchema,
+  OrphanedPartial,
+  PaginationSize,
+  ParserBlockingScript,
+  SchemaPresetsBlockOrder,
+  SchemaPresetsStaticBlocks,
+  RemoteAsset,
+  ReservedDocParamNames,
+  StaticStylesheetAndJavascriptTags,
+  TranslationKeyExists,
+  UnclosedHTMLElement,
+  UndefinedObject,
+  UniqueDocParamNames,
+  UniqueSettingIds,
+  UniqueStaticBlockId,
+  UnknownFilter,
+  UnrecognizedContentForArguments,
+  UnrecognizedRenderPartialArguments,
+  UnusedAssign,
+  UnusedDocParam,
+  ValidBlockTarget,
+  ValidHTMLTranslation,
+  ValidContentForArguments,
+  ValidContentForArgumentTypes,
+  ValidJSON,
+  ValidDocParamTypes,
+  ValidLocalBlocks,
+  ValidRenderPartialArgumentTypes,
+  ValidSchema,
+  ValidSettingsKey,
+  ValidStaticBlockType,
+  ValidVisibleIf,
+  ValidVisibleIfSettingsSchema,
+  VariableName,
+  ValidSchemaName,
+  MetadataParamsCheck,
+  GraphQLVariablesCheck,
+  GraphQLCheck,
+  UnknownProperty,
+  InvalidHashAssignTarget,
+];
+
+/**
+ * The recommended checks is populated by all checks with the following conditions:
+ * - meta.docs.recommended: true
+ * - Either no meta.targets list exist or if it does exist then Recommended is a target
+ */
+export const recommended = allChecks.filter((check) => {
+  const isRecommended = check.meta.docs.recommended;
+  const isValidTarget =
+    !check.meta.targets ||
+    !check.meta.targets.length ||
+    check.meta.targets.includes(ConfigTarget.Recommended);
+
+  return isRecommended && isValidTarget;
+});