Added support for render tag completion for inline snippets

Author: shoplando

.changeset/flat-geckos-breathe.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme-language-server-common': minor
+---
+
+Added completion support for inline snippets in the render tag

.changeset/weak-weeks-fetch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme-check-common': minor
+---
+
+Disable the `Undefined Object` theme check for the new `snippet` tag

packages/theme-check-common/src/checks/undefined-object/index.spec.ts

@@ -459,4 +459,18 @@ describe('Module: UndefinedObject', () => {
     assert(offenses.length == 0);
     expect(offenses).to.be.empty;
   });
+
+  it('should not report an offense for inline snippet names in snippet and render tags', async () => {
+    const sourceCode = `
+      {% snippet my_inline_snippet %}
+        {% echo 'hello' %}
+      {% endsnippet %}
+
+      {% render my_inline_snippet %}
+    `;
+
+    const offenses = await runLiquidCheck(UndefinedObject, sourceCode);
+
+    expect(offenses).toHaveLength(0);
+  });
 });

packages/theme-check-common/src/checks/undefined-object/index.ts

@@ -142,6 +142,10 @@ export const UndefinedObject: LiquidCheckDefinition = {
         const parent = last(ancestors);
         if (isLiquidTag(parent) && isLiquidTagCapture(parent)) return;
 
+        if (parent?.type === NodeTypes.RenderMarkup && parent.snippet === node) return;
+
+        if (isLiquidTag(parent) && parent.name === 'snippet' && parent.markup === node) return;
+
         variables.push(node);
       },
 

packages/theme-language-server-common/src/completions/providers/RenderSnippetCompletionProvider.spec.ts

@@ -33,4 +33,22 @@ describe('Module: RenderSnippetCompletionProvider', async () => {
       }),
     ]);
   });
+
+  it('should complete inline snippets', async () => {
+    const template = `{% snippet my-inline-snippet %}
+  {% echo 'hello' %}
+{% endsnippet %}
+
+{% render m`;
+
+    await expect(provider).to.complete(template, ['my-inline-snippet']);
+    await expect(provider).to.complete(template, [
+      expect.objectContaining({
+        documentation: {
+          kind: 'markdown',
+          value: `Inline snippet (defined in this file)`,
+        },
+      }),
+    ]);
+  });
 });

packages/theme-language-server-common/src/completions/providers/RenderSnippetCompletionProvider.ts

@@ -1,7 +1,8 @@
-import { NodeTypes } from '@shopify/liquid-html-parser';
+import { LiquidHtmlNode, LiquidTag, NodeTypes } from '@shopify/liquid-html-parser';
 import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
 import { LiquidCompletionParams } from '../params';
 import { Provider } from './common';
+import { SourceCodeType, visit } from '@shopify/theme-check-common';
 
 export type GetSnippetNamesForURI = (uri: string) => Promise<string[]>;
 
@@ -14,29 +15,59 @@ export class RenderSnippetCompletionProvider implements Provider {
     const { node, ancestors } = params.completionContext;
     const parentNode = ancestors.at(-1);
 
-    if (
-      !node ||
-      !parentNode ||
-      node.type !== NodeTypes.String ||
-      parentNode.type !== NodeTypes.RenderMarkup
-    ) {
+    if (!node || !parentNode || parentNode.type !== NodeTypes.RenderMarkup) {
       return [];
     }
 
-    const options = await this.getSnippetNamesForURI(params.textDocument.uri);
-    const partial = node.value;
-
-    return options
-      .filter((option) => option.startsWith(partial))
-      .map(
-        (option: string): CompletionItem => ({
-          label: option,
-          kind: CompletionItemKind.Snippet,
-          documentation: {
-            kind: 'markdown',
-            value: `snippets/${option}.liquid`,
-          },
-        }),
-      );
+    let partial = '';
+    if (node.type === NodeTypes.String) {
+      partial = node.value;
+      const fileSnippets = await this.getSnippetNamesForURI(params.textDocument.uri);
+      const fileCompletionItems = fileSnippets
+        .filter((option) => option.startsWith(partial))
+        .map(
+          (option: string): CompletionItem => ({
+            label: option,
+            kind: CompletionItemKind.Snippet,
+            documentation: {
+              kind: 'markdown',
+              value: `snippets/${option}.liquid`,
+            },
+          }),
+        );
+      return fileCompletionItems;
+    } else if (node.type === NodeTypes.VariableLookup) {
+      partial = node.name || '';
+      const inlineSnippets = getInlineSnippetsNames(params.completionContext.partialAst);
+      const inlineCompletionItems = inlineSnippets
+        .filter((option) => option.startsWith(partial))
+        .map(
+          (option: string): CompletionItem => ({
+            label: option,
+            kind: CompletionItemKind.Snippet,
+            documentation: {
+              kind: 'markdown',
+              value: `Inline snippet (defined in this file)`,
+            },
+          }),
+        );
+      return inlineCompletionItems;
+    } else {
+      return [];
+    }
   }
 }
+
+function getInlineSnippetsNames(ast: LiquidHtmlNode): string[] {
+  if (ast instanceof Error) return [];
+
+  const inlineSnippetNames = visit<SourceCodeType.LiquidHtml, string>(ast, {
+    LiquidTag(node: LiquidTag) {
+      if (node.name === 'snippet' && typeof node.markup !== 'string' && node.markup.name) {
+        return node.markup.name;
+      }
+    },
+  });
+
+  return inlineSnippetNames.filter((name): name is string => !!name);
+}