Add required parameters to filter completions

Shopify · Nov 13, 2024 · 8850fca · 8850fca
1 parent 1c43664
commit 8850fca
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 2 deletions.
diff --git a/...s/theme-language-server-common/src/completions/providers/FilterCompletionProvider.spec.ts b/...s/theme-language-server-common/src/completions/providers/FilterCompletionProvider.spec.ts
@@ -43,6 +43,41 @@ const filters: FilterEntry[] = [
     name: 'default',
     syntax: 'variable | default: variable',
     return_type: [{ type: 'untyped', name: '' }],
+    parameters: [
+      {
+        description: 'Whether to use false values instead of the default.',
+        name: 'allow_false',
+        positional: true,
+        required: false,
+        types: ['boolean'],
+      },
+    ],
+  },
+  {
+    syntax: 'string | highlight: string',
+    name: 'highlight',
+    parameters: [
+      {
+        description: 'The string that you want to highlight.',
+        name: 'highlighted_term',
+        positional: true,
+        required: true,
+        types: ['string'],
+      },
+    ],
+  },
+  {
+    syntax: 'string | preload_tag: as: string',
+    name: 'preload_tag',
+    parameters: [
+      {
+        description: 'The type of element or resource to preload.',
+        name: 'as',
+        positional: false,
+        required: true,
+        types: ['string'],
+      },
+    ],
   },
   {
     name: 'missing_syntax',
@@ -133,6 +168,42 @@ describe('Module: FilterCompletionProvider', async () => {
     // As in, the anyFilters are at the _end_ and not shown at the top.
     await expect(provider).to.complete('{{ string | █ }}', stringFilters.concat(anyFilters));
   });
+
+  describe('when there are no required parameters', () => {
+    it('should not include parameters in the insertText of the completion', async () => {
+      await expect(provider).to.complete('{{ string | defa█ }}', [
+        expect.objectContaining({
+          label: 'default',
+          insertText: 'default',
+          insertTextFormat: 1,
+        }),
+      ]);
+    });
+  });
+
+  describe('when there are required positional parameters', () => {
+    it('should include parameters in the insertText of the completion', async () => {
+      await expect(provider).to.complete('{{ string | h█ }}', [
+        expect.objectContaining({
+          label: 'highlight',
+          insertText: "highlight: '${1:highlighted_term}'",
+          insertTextFormat: 2,
+        }),
+      ]);
+    });
+  });
+
+  describe('when there are required named parameters', () => {
+    it('should include parameters in the insertText of the completion', async () => {
+      await expect(provider).to.complete('{{ string | pre█ }}', [
+        expect.objectContaining({
+          label: 'preload_tag',
+          insertText: "preload_tag: as: '$1'",
+          insertTextFormat: 2,
+        }),
+      ]);
+    });
+  });
 });
 
 function filtersNamesOfInputType(inputType: string): string[] {

diff --git a/packages/theme-language-server-common/src/completions/providers/FilterCompletionProvider.ts b/packages/theme-language-server-common/src/completions/providers/FilterCompletionProvider.ts
@@ -1,6 +1,6 @@
 import { NodeTypes } from '@shopify/liquid-html-parser';
-import { FilterEntry } from '@shopify/theme-check-common';
-import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
+import { FilterEntry, Parameter } from '@shopify/theme-check-common';
+import { CompletionItem, CompletionItemKind, InsertTextFormat } from 'vscode-languageserver';
 import { PseudoType, TypeSystem, isArrayType } from '../../TypeSystem';
 import { memoize } from '../../utils';
 import { CURSOR, LiquidCompletionParams } from '../params';
@@ -85,11 +85,65 @@ function completionItems(options: MaybeDeprioritisedFilterEntry[], partial: stri
 }
 
 function toPropertyCompletionItem(entry: MaybeDeprioritisedFilterEntry) {
+  const { insertText, insertStyle } = appendRequiredParemeters(entry);
+
   return createCompletionItem(
     entry,
     {
       kind: CompletionItemKind.Function,
+      insertText,
+      insertTextFormat: insertStyle,
     },
     'filter',
   );
 }
+
+function appendRequiredParemeters(entry: MaybeDeprioritisedFilterEntry): {
+  insertText: string;
+  insertStyle: InsertTextFormat;
+} {
+  let insertText = entry.name;
+  let insertStyle: InsertTextFormat = InsertTextFormat.PlainText;
+
+  if (!entry?.parameters?.length) {
+    return { insertText, insertStyle };
+  }
+
+  const requiredPositionalParams = entry.parameters
+    .filter((p) => p.required && p.positional)
+    .map(formatParameter);
+  const requiredNamedParams = entry.parameters
+    .filter((p) => p.required && !p.positional)
+    .map(formatParameter);
+
+  if (requiredPositionalParams.length) {
+    insertText += `: ${requiredPositionalParams.join(', ')}`;
+    insertStyle = InsertTextFormat.Snippet;
+  }
+
+  if (requiredNamedParams.length) {
+    insertText += `: ${requiredNamedParams.join(', ')}`;
+    insertStyle = InsertTextFormat.Snippet;
+  }
+
+  return {
+    insertText,
+    insertStyle,
+  };
+}
+
+function formatParameter(parameter: Parameter, index: number) {
+  let cursorLocation = '';
+
+  if (parameter.positional) {
+    cursorLocation = `$\{${index + 1}:${parameter.name}\}`;
+  } else {
+    cursorLocation = `$${index + 1}`;
+  }
+
+  if (parameter.types[0] === 'string') {
+    cursorLocation = `'${cursorLocation}'`;
+  }
+
+  return parameter.positional ? cursorLocation : `${parameter.name}: ${cursorLocation}`;
+}