Add completion provider for filter parameters

.changeset/smooth-toys-jump.md

@@ -0,0 +1,12 @@
+---
+'@shopify/theme-language-server-common': patch
+---
+
+Add completions support for filter parameters
+
+The following liquid statement will now offer completion suggestions for filter
+parameters:
+
+```liquid
+{{ product | image_url: width: 100, c█ }}
+```

packages/theme-language-server-common/src/completions/CompletionsProvider.ts

@@ -16,6 +16,7 @@ import {
   Provider,
   RenderSnippetCompletionProvider,
   TranslationCompletionProvider,
+  FilterNamedParameterCompletionProvider,
 } from './providers';
 import { GetSnippetNamesForURI } from './providers/RenderSnippetCompletionProvider';
 
@@ -57,6 +58,7 @@ export class CompletionsProvider {
       new FilterCompletionProvider(typeSystem),
       new TranslationCompletionProvider(documentManager, getTranslationsForURI),
       new RenderSnippetCompletionProvider(getSnippetNamesForURI),
+      new FilterNamedParameterCompletionProvider(themeDocset),
     ];
   }
 

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

@@ -0,0 +1,63 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+
+describe('Module: ObjectCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        filters: async () => [
+          {
+            parameters: [
+              {
+                description: '',
+                name: 'crop',
+                required: false,
+                types: ['string'],
+              },
+              {
+                description: '',
+                name: 'width',
+                required: false,
+                types: ['number'],
+              },
+            ],
+            name: 'image_url',
+          },
+        ],
+        objects: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+    });
+  });
+
+  it('should complete filter parameter lookups', async () => {
+    const contexts = [
+      `{{ product | image_url: █`,
+      `{{ product | image_url: width: 100, █`,
+      `{{ product | image_url: 1, string, width: 100, █`,
+      `{{ product | image_url: width: 100 | image_url: █`,
+    ];
+    await Promise.all(
+      contexts.map((context) => expect(provider, context).to.complete(context, ['crop', 'width'])),
+    );
+  });
+
+  describe('when the user has already begun typing a filter parameter', () => {
+    it('should filter options based on the text', async () => {
+      const contexts = [
+        `{{ product | image_url: c█`,
+        `{{ product | image_url: width: 100, c█`,
+        `{{ product | image_url: 1, string, width: 100, c█`,
+        `{{ product | image_url: width: 100 | image_url: c█`,
+      ];
+      await Promise.all(
+        contexts.map((context) => expect(provider, context).to.complete(context, ['crop'])),
+      );
+    });
+  });
+});

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

@@ -0,0 +1,57 @@
+import { NodeTypes } from '@shopify/liquid-html-parser';
+import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider, createCompletionItem } from './common';
+import { ThemeDocset } from '@shopify/theme-check-common';
+
+export class FilterNamedParameterCompletionProvider implements Provider {
+  constructor(private readonly themeDocset: ThemeDocset) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node } = params.completionContext;
+    if (!node || node.type !== NodeTypes.VariableLookup) {
+      return [];
+    }
+
+    if (!node.name || node.lookups.length > 0) {
+      // We only do top level in this one.
+      return [];
+    }
+
+    const partial = node.name.replace(CURSOR, '');
+    const currentContext = params.completionContext.ancestors.at(-1);
+
+    if (!currentContext || currentContext?.type !== NodeTypes.LiquidFilter) {
+      return [];
+    }
+
+    const filters = await this.themeDocset.filters();
+    const foundFilter = filters.find((f) => f.name === currentContext.name);
+
+    if (!foundFilter?.parameters) {
+      return [];
+    }
+
+    const options = foundFilter.parameters
+      .filter((p) => p.name.startsWith(partial))
+      .map((parameter) => {
+        return {
+          entry: {
+            ...parameter,
+          },
+          types: parameter.types,
+        };
+      });
+
+    return options.map(({ entry, types }) =>
+      createCompletionItem(
+        entry,
+        { kind: CompletionItemKind.TypeParameter },
+        'filter',
+        Array.isArray(types) ? types[0] : 'unknown',
+      ),
+    );
+  }
+}

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

@@ -160,4 +160,9 @@ describe('Module: ObjectCompletionProvider', async () => {
   it('should not complete anything if there is nothing to complete', async () => {
     await expect(provider).to.complete('{% assign x = "█" %}', []);
   });
+
+  it('should not complete filter params', async () => {
+    const context = '{{ product | image_url: █';
+    await expect(provider, context).to.complete(context, []);
+  });
 });

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

@@ -20,6 +20,13 @@ export class ObjectCompletionProvider implements Provider {
       return [];
     }
 
+    const currentContext = params.completionContext.ancestors.at(-1);
+    // We don't want to show generic variable completions when we're inside a
+    // filter. This case will be handled by FilterNamedParameterCompletionProvider.
+    if (currentContext?.type === NodeTypes.LiquidFilter) {
+      return [];
+    }
+
     const partial = node.name.replace(CURSOR, '');
     const options = await this.typeSystem.availableVariables(
       partialAst,

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

@@ -1,10 +1,11 @@
-export { HtmlTagCompletionProvider } from './HtmlTagCompletionProvider';
+export { Provider } from './common/Provider';
+export { FilterCompletionProvider } from './FilterCompletionProvider';
+export { FilterNamedParameterCompletionProvider } from './FilterNamedParameterCompletionProvider';
 export { HtmlAttributeCompletionProvider } from './HtmlAttributeCompletionProvider';
 export { HtmlAttributeValueCompletionProvider } from './HtmlAttributeValueCompletionProvider';
-export { FilterCompletionProvider } from './FilterCompletionProvider';
+export { HtmlTagCompletionProvider } from './HtmlTagCompletionProvider';
 export { LiquidTagsCompletionProvider } from './LiquidTagsCompletionProvider';
 export { ObjectAttributeCompletionProvider } from './ObjectAttributeCompletionProvider';
 export { ObjectCompletionProvider } from './ObjectCompletionProvider';
-export { TranslationCompletionProvider } from './TranslationCompletionProvider';
 export { RenderSnippetCompletionProvider } from './RenderSnippetCompletionProvider';
-export { Provider } from './common/Provider';
+export { TranslationCompletionProvider } from './TranslationCompletionProvider';