td-ai-tools 1.2.8 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-ai-tools",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Install agent skills and packs into your project",
   "type": "module",
   "scripts": {

package/skills/shopify-lint/theme-check-theory/README.md

@@ -33,9 +33,11 @@ Rendered storefront copy should come from a section setting, translation key,
 metafield, or metaobject. The check reports text nodes, direct quoted output
 with `{{ }}` or `{% echo %}`, quoted `default` filter fallbacks, hard-coded
 `alt`, `title`, `placeholder`, and ARIA text attributes, and labels in the
-`value` attribute of button-like inputs. It ignores technical attributes such
-as classes and IDs, Liquid logic strings, comments, punctuation-only fragments,
-and text made entirely of HTML character references.
+`value` attribute of button-like inputs. Text inside inline SVG elements and
+string literals passed as named `render` or `include` arguments are also
+checked. It ignores technical attributes such as classes and IDs, Liquid logic
+strings, comments, punctuation-only fragments, and text made entirely of HTML
+character references.
 
 Content inside `{% stylesheet %}`, `{% javascript %}`, and `{% schema %}` is
 ignored. A quoted translation key passed through `t` or `translate` is also

package/skills/shopify-lint/theme-check-theory/src/checks/hardcoded-text.test.ts

@@ -74,6 +74,48 @@ describe('HardcodedText', () => {
     expect(offenses).toHaveLength(2);
   });
 
+  it('reports hard-coded text inside inline SVG elements', async () => {
+    const source = `
+      <svg aria-hidden="true">
+        <title>Search icon</title>
+        <desc>Opens the search dialog</desc>
+        <text x="10" y="20">Search</text>
+        <path d="M10 10 H 90 V 90 H 10 Z" />
+      </svg>
+    `;
+
+    const offenses = await runLiquidCheck(HardcodedText, source);
+
+    expect(offenses).toHaveLength(3);
+    expect(
+      offenses.map(({ start, end }) =>
+        source.slice(start.index, end.index),
+      ),
+    ).toEqual([
+      'Search icon',
+      'Opens the search dialog',
+      'Search',
+    ]);
+  });
+
+  it('reports string literals passed as render and include arguments', async () => {
+    const source = `
+      {% render 'button', label: 'Add to cart' %}
+      {% include 'icon', accessible_name: "Search icon" %}
+      {% render 'button', label: section.settings.button_label %}
+      {% render 'icon' %}
+    `;
+
+    const offenses = await runLiquidCheck(HardcodedText, source);
+
+    expect(offenses).toHaveLength(2);
+    expect(
+      offenses.map(({ start, end }) =>
+        source.slice(start.index, end.index),
+      ),
+    ).toEqual(["'Add to cart'", '"Search icon"']);
+  });
+
   it('reports hard-coded default filter fallbacks', async () => {
     const source = `
       {{ product.title | default: 'Free shipping on all orders' }}

package/skills/shopify-lint/theme-check-theory/src/checks/hardcoded-text.ts

@@ -1,5 +1,6 @@
 import {
   NodeTypes,
+  toLiquidHtmlAST,
 } from '@shopify/liquid-html-parser';
 import type {
   AttributeNode,
@@ -8,12 +9,14 @@ import type {
   LiquidRawTag,
   LiquidString,
   LiquidVariable,
+  RawMarkup,
   TextNode,
 } from '@shopify/liquid-html-parser';
 import {
   LiquidCheckDefinition,
   Severity,
   SourceCodeType,
+  visit,
 } from '@shopify/theme-check-common';
 
 const EXEMPT_RAW_TAGS = new Set([
@@ -111,6 +114,14 @@ function rawTagAncestor(
   return undefined;
 }
 
+function isInlineSvgMarkup(ancestors: LiquidHtmlNode[]): boolean {
+  const parent = ancestors.at(-1);
+  return (
+    parent?.type === NodeTypes.HtmlRawNode &&
+    parent.name.toLowerCase() === 'svg'
+  );
+}
+
 function hasMeaningfulText(value: string): boolean {
   return /[\p{L}\p{N}]/u.test(
     value.replace(HTML_CHARACTER_REFERENCE, ''),
@@ -189,44 +200,80 @@ export const HardcodedText: LiquidCheckDefinition = {
       }
     }
 
-    return {
-      async TextNode(node, ancestors) {
-        if (!hasMeaningfulText(node.value)) return;
+    function reportTextNode(
+      node: TextNode,
+      ancestors: LiquidHtmlNode[],
+      positionOffset = 0,
+    ) {
+      if (!hasMeaningfulText(node.value)) return;
+
+      const rawTag = rawTagAncestor(ancestors);
+      if (rawTag) {
+        if (EXEMPT_RAW_TAGS.has(rawTag.name.toLowerCase())) return;
+        report(
+          positionOffset + node.position.start,
+          positionOffset + node.position.end,
+        );
+        return;
+      }
 
-        const rawTag = rawTagAncestor(ancestors);
-        if (rawTag) {
-          if (EXEMPT_RAW_TAGS.has(rawTag.name.toLowerCase())) return;
-          report(node.position.start, node.position.end);
-          return;
+      const parent = ancestors.at(-1);
+      if (!parent || isHtmlElementName(node, parent)) return;
+
+      if (isValuedAttribute(parent)) {
+        if (!parent.value.some((part) => part === node)) return;
+
+        const attributeName = staticAttributeName(parent);
+        if (
+          (attributeName && TEXT_ATTRIBUTES.has(attributeName)) ||
+          (attributeName === 'value' &&
+            isInputButtonValue(ancestors))
+        ) {
+          report(
+            positionOffset + node.position.start,
+            positionOffset + node.position.end,
+          );
         }
+        return;
+      }
 
-        const parent = ancestors.at(-1);
-        if (!parent || isHtmlElementName(node, parent)) return;
+      if (parent.type === NodeTypes.RawMarkup) return;
 
-        if (isValuedAttribute(parent)) {
-          if (!parent.value.some((part) => part === node)) return;
+      if (
+        parent.type === NodeTypes.Document ||
+        parent.type === NodeTypes.HtmlElement ||
+        parent.type === NodeTypes.LiquidBranch ||
+        parent.type === NodeTypes.LiquidTag
+      ) {
+        report(
+          positionOffset + node.position.start,
+          positionOffset + node.position.end,
+        );
+      }
+    }
 
-          const attributeName = staticAttributeName(parent);
-          if (
-            (attributeName && TEXT_ATTRIBUTES.has(attributeName)) ||
-            (attributeName === 'value' &&
-              isInputButtonValue(ancestors))
-          ) {
-            report(node.position.start, node.position.end);
-          }
-          return;
-        }
+    function reportInlineSvgText(node: RawMarkup) {
+      let fragment;
+      try {
+        fragment = toLiquidHtmlAST(node.value);
+      } catch {
+        return;
+      }
 
-        if (parent.type === NodeTypes.RawMarkup) return;
+      visit<SourceCodeType.LiquidHtml, void>(fragment, {
+        TextNode(textNode, ancestors) {
+          reportTextNode(
+            textNode,
+            ancestors,
+            node.position.start,
+          );
+        },
+      });
+    }
 
-        if (
-          parent.type === NodeTypes.Document ||
-          parent.type === NodeTypes.HtmlElement ||
-          parent.type === NodeTypes.LiquidBranch ||
-          parent.type === NodeTypes.LiquidTag
-        ) {
-          report(node.position.start, node.position.end);
-        }
+    return {
+      async TextNode(node, ancestors) {
+        reportTextNode(node, ancestors);
       },
 
       async LiquidVariableOutput(node) {
@@ -238,6 +285,31 @@ export const HardcodedText: LiquidCheckDefinition = {
         if (node.name !== 'echo' || typeof node.markup === 'string') return;
         reportLiteralOutput(node.markup);
       },
+
+      async RawMarkup(node, ancestors) {
+        if (!isInlineSvgMarkup(ancestors)) return;
+
+        const rawTag = rawTagAncestor(ancestors);
+        if (
+          rawTag &&
+          EXEMPT_RAW_TAGS.has(rawTag.name.toLowerCase())
+        ) {
+          return;
+        }
+
+        reportInlineSvgText(node);
+      },
+
+      async RenderMarkup(node) {
+        for (const argument of node.args) {
+          if (
+            argument.type === NodeTypes.NamedArgument &&
+            argument.value.type === NodeTypes.String
+          ) {
+            reportString(argument.value);
+          }
+        }
+      },
     };
   },
 };