@platformos/platformos-language-server-common 0.0.2

package/src/completions/providers/FilterCompletionProvider.spec.ts

@@ -0,0 +1,377 @@
+import {
+  FilterEntry,
+  MetafieldDefinitionMap,
+  ObjectEntry,
+} from '@platformos/platformos-check-common';
+import { InsertTextFormat, type TextEdit } from 'vscode-languageserver';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { describe, beforeEach, it, expect } from 'vitest';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { CURSOR } from '../params';
+
+const filters: FilterEntry[] = [
+  {
+    name: 'upcase',
+    syntax: 'string | upcase',
+    return_type: [{ type: 'string', name: '' }],
+  },
+  {
+    name: 'downcase',
+    syntax: 'string | downcase',
+    return_type: [{ type: 'string', name: '' }],
+  },
+  {
+    name: 'split',
+    syntax: 'string | split: string',
+    return_type: [{ type: 'array', array_value: 'string' }],
+  },
+  {
+    name: 'first',
+    syntax: 'array | first',
+    return_type: [{ type: 'untyped', name: '' }],
+  },
+  {
+    name: 'map',
+    syntax: 'array | map: string',
+    return_type: [{ type: 'array', array_value: 'string' }],
+  },
+  {
+    name: 'where',
+    syntax: 'array | where: string, string',
+    return_type: [{ type: 'array', array_value: 'string' }],
+  },
+  {
+    name: 'metafield_tag',
+    syntax: 'metafield | metafield_tag',
+    return_type: [{ type: 'string', name: '' }],
+  },
+  {
+    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',
+    /* syntax: undefined */
+  },
+];
+
+const objects: ObjectEntry[] = [
+  {
+    name: 'string',
+    return_type: [{ type: 'string', name: '' }],
+  },
+  {
+    name: 'number',
+    return_type: [{ type: 'number', name: '' }],
+  },
+  {
+    name: 'array',
+    return_type: [{ type: 'array', array_value: 'string' }],
+  },
+  {
+    name: 'metafield',
+    return_type: [],
+  },
+  {
+    name: 'product',
+    return_type: [],
+  },
+];
+
+const anyFilters = filtersNamesOfInputType('variable').concat(
+  filters.filter((entry) => !entry.syntax).map((x) => x.name),
+);
+const stringFilters = filtersNamesOfInputType('string');
+const metafieldFilters = filtersNamesOfInputType('metafield');
+const arrayFilters = filtersNamesOfInputType('array');
+const allFilters = filters.map((x) => x.name).sort();
+
+describe('Module: FilterCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => filters,
+        objects: async () => objects,
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+  });
+
+  it('completes with all the filters when no specific filters exist for that type', async () => {
+    await expect(provider).to.complete('{{ product | █ }}', allFilters);
+  });
+
+  it('completes with all the filters when the type is unknown', async () => {
+    await expect(provider).to.complete('{{ undefined | █ }}', allFilters);
+  });
+
+  it('should complete string types with string filters', async () => {
+    await expect(provider).to.complete('{{ string | █ }}', stringFilters.concat(anyFilters));
+  });
+
+  it('should complete array types with array filters', async () => {
+    await expect(provider).to.complete('{{ array | █ }}', arrayFilters.concat(anyFilters));
+  });
+
+  it('should complete named types with named-type filters', async () => {
+    await expect(provider).to.complete('{{ metafield | █ }}', metafieldFilters.concat(anyFilters));
+  });
+
+  it('should infer type in filter chains', async () => {
+    await expect(provider).to.complete(
+      '{{ metafield | metafield_tag | █ }}',
+      stringFilters.concat(anyFilters),
+    );
+    await expect(provider).to.complete(
+      '{{ string | split: "" | █ }}',
+      arrayFilters.concat(anyFilters),
+    );
+    await expect(provider).to.complete('{{ array | first | █ }}', allFilters);
+  });
+
+  it('should append the any filters after the filters of the specific type', async () => {
+    // As in, the anyFilters are at the _end_ and not shown at the top.
+    await expect(provider).to.complete('{{ string | █ }}', stringFilters.concat(anyFilters));
+  });
+
+  it('handles assignment the same way as output', async () => {
+    //                                     char 31 ⌄ ⌄ char 33
+    const liquid = '{% assign imageUrl = product | de█ %}';
+
+    const textEdit: TextEdit = {
+      newText: 'default',
+      range: {
+        end: { line: 0, character: 33 },
+        start: { line: 0, character: 31 },
+      },
+    };
+
+    await expect(provider).to.complete(liquid, [
+      expect.objectContaining({
+        label: 'default',
+        insertTextFormat: InsertTextFormat.PlainText,
+        textEdit,
+      }),
+    ]);
+
+    const textDocument = TextDocument.create('', 'liquid', 0, liquid.replace(CURSOR, ''));
+
+    expect(TextDocument.applyEdits(textDocument, [textEdit])).toBe(
+      '{% assign imageUrl = product | default %}',
+    );
+  });
+
+  describe('when there are no required parameters', () => {
+    it('should not include parameters in the insertText of the completion', async () => {
+      //                  char 12 ⌄   ⌄ char 16
+      const liquid = '{{ string | defa█ }}';
+
+      const textEdit: TextEdit = {
+        newText: 'default',
+        range: {
+          end: { line: 0, character: 16 },
+          start: { line: 0, character: 12 },
+        },
+      };
+
+      await expect(provider).to.complete(liquid, [
+        expect.objectContaining({
+          label: 'default',
+          insertTextFormat: InsertTextFormat.PlainText,
+          textEdit,
+        }),
+      ]);
+
+      const textDocument = TextDocument.create('', 'liquid', 0, liquid.replace(CURSOR, ''));
+
+      expect(TextDocument.applyEdits(textDocument, [textEdit])).toBe('{{ string | default }}');
+    });
+  });
+
+  describe('when there are required positional parameters', () => {
+    it('should include parameters in the insertText of the completion', async () => {
+      //                  char 12 ⌄  ⌄ char 15
+      const liquid = '{{ string | hig█ }}';
+
+      const textEdit: TextEdit = {
+        newText: "highlight: '${1:highlighted_term}'",
+        range: {
+          end: { line: 0, character: 15 },
+          start: { line: 0, character: 12 },
+        },
+      };
+
+      await expect(provider).to.complete(liquid, [
+        expect.objectContaining({
+          label: 'highlight',
+          insertTextFormat: InsertTextFormat.Snippet,
+          textEdit,
+        }),
+      ]);
+
+      const textDocument = TextDocument.create('', 'liquid', 0, liquid.replace(CURSOR, ''));
+
+      expect(TextDocument.applyEdits(textDocument, [textEdit])).toBe(
+        "{{ string | highlight: '${1:highlighted_term}' }}",
+      );
+    });
+  });
+
+  describe('when there are required named parameters', () => {
+    it('should include parameters in the insertText of the completion', async () => {
+      //                  char 12 ⌄  ⌄ char 15
+      const liquid = '{{ string | pre█ }}';
+
+      const textEdit: TextEdit = {
+        newText: "preload_tag: as: '$1'",
+        range: {
+          end: { line: 0, character: 15 },
+          start: { line: 0, character: 12 },
+        },
+      };
+
+      await expect(provider).to.complete(liquid, [
+        expect.objectContaining({
+          label: 'preload_tag',
+          insertTextFormat: InsertTextFormat.Snippet,
+          textEdit,
+        }),
+      ]);
+
+      const textDocument = TextDocument.create('', 'liquid', 0, liquid.replace(CURSOR, ''));
+
+      expect(TextDocument.applyEdits(textDocument, [textEdit])).toBe(
+        "{{ string | preload_tag: as: '$1' }}",
+      );
+    });
+  });
+
+  describe('when the cursor is in the middle of the filter', () => {
+    describe('and the filter can only be completed to the same name', () => {
+      it('sets the range to only the existing name', async () => {
+        //                  char 12 ⌄          ⌄ char 23
+        const liquid = '{{ string | prel█oad_tag: as: "p" }}';
+
+        const textEdit: TextEdit = {
+          newText: 'preload_tag',
+          range: {
+            end: { line: 0, character: 23 },
+            start: { line: 0, character: 12 },
+          },
+        };
+
+        await expect(provider).to.complete(liquid, [
+          expect.objectContaining({
+            label: 'preload_tag',
+            insertTextFormat: InsertTextFormat.PlainText,
+            textEdit,
+          }),
+        ]);
+
+        const textDocument = TextDocument.create('', 'liquid', 0, liquid.replace(CURSOR, ''));
+
+        expect(TextDocument.applyEdits(textDocument, [textEdit])).toBe(
+          '{{ string | preload_tag: as: "p" }}',
+        );
+      });
+    });
+
+    describe('and the filter to be replaced has parameters', () => {
+      it('sets the range to include the parameters if replacing with a different filter', async () => {
+        //                  char 12 ⌄            ⌄ char 25
+        const liquid = '{{ string | d█efault: true }}';
+        //                                 ⌃ char 19
+
+        const downcaseTextEdit: TextEdit = {
+          newText: 'downcase',
+          range: {
+            end: { line: 0, character: 25 },
+            start: { line: 0, character: 12 },
+          },
+        };
+
+        const defaultTextEdit: TextEdit = {
+          newText: 'default',
+          range: {
+            end: { line: 0, character: 19 },
+            start: { line: 0, character: 12 },
+          },
+        };
+
+        await expect(provider).to.complete(liquid, [
+          expect.objectContaining({
+            label: 'downcase',
+            insertTextFormat: InsertTextFormat.PlainText,
+            textEdit: downcaseTextEdit,
+          }),
+          expect.objectContaining({
+            label: 'default',
+            insertTextFormat: InsertTextFormat.PlainText,
+            textEdit: defaultTextEdit,
+          }),
+        ]);
+
+        const textDocument = TextDocument.create('', 'liquid', 0, liquid.replace(CURSOR, ''));
+
+        expect(TextDocument.applyEdits(textDocument, [downcaseTextEdit])).toBe(
+          '{{ string | downcase }}',
+        );
+
+        expect(TextDocument.applyEdits(textDocument, [defaultTextEdit])).toBe(
+          '{{ string | default: true }}',
+        );
+      });
+    });
+  });
+});
+
+function filtersNamesOfInputType(inputType: string): string[] {
+  return filters
+    .filter((x) => x.syntax?.startsWith(inputType))
+    .map((x) => x.name)
+    .sort();
+}

package/src/completions/providers/FilterCompletionProvider.ts

@@ -0,0 +1,225 @@
+import { LiquidFilter, NodeTypes } from '@platformos/liquid-html-parser';
+import { FilterEntry, Parameter } from '@platformos/platformos-check-common';
+import {
+  CompletionItem,
+  CompletionItemKind,
+  InsertTextFormat,
+  TextEdit,
+} from 'vscode-languageserver';
+import { PseudoType, TypeSystem, isArrayType, isShapeType, isUnionType } from '../../TypeSystem';
+import { memoize } from '../../utils';
+import { AugmentedLiquidSourceCode } from '../../documents';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider, createCompletionItem, sortByName } from './common';
+
+export class FilterCompletionProvider implements Provider {
+  constructor(private readonly typeSystem: TypeSystem) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { partialAst, node, ancestors } = params.completionContext;
+    if (!node || node.type !== NodeTypes.LiquidFilter) {
+      return [];
+    }
+
+    if (node.args.length > 0) {
+      // We only do name completion
+      return [];
+    }
+
+    // We'll fake a LiquidVariable
+    let parentVariable = ancestors.at(-1);
+    if (
+      !parentVariable ||
+      parentVariable.type !== NodeTypes.LiquidVariable ||
+      parentVariable.filters.at(-1) !== node
+    ) {
+      return []; // something went wrong...
+    }
+
+    // We'll infer the type of the variable up to the last filter (excluding this one)
+    parentVariable = { ...parentVariable }; // soft clone
+    parentVariable.filters = parentVariable.filters.slice(0, -1); // remove last one
+    const inputType = await this.typeSystem.inferType(
+      parentVariable,
+      partialAst,
+      params.textDocument.uri,
+    );
+    const partial = node.name.replace(CURSOR, '');
+    const normalizedType = isArrayType(inputType)
+      ? 'array'
+      : isShapeType(inputType)
+      ? inputType.shape.kind === 'array'
+        ? 'array'
+        : 'untyped'
+      : isUnionType(inputType)
+      ? 'untyped'
+      : inputType;
+    const options = await this.options(normalizedType);
+
+    return options
+      .filter(({ name }) => name.startsWith(partial))
+      .map((entry) => {
+        const { textEdit, format } = this.textEdit(node, params.document, entry);
+
+        return createCompletionItem(
+          entry,
+          {
+            kind: CompletionItemKind.Function,
+            insertTextFormat: format,
+            textEdit,
+          },
+          'filter',
+        );
+      });
+  }
+
+  textEdit(
+    node: LiquidFilter,
+    document: AugmentedLiquidSourceCode,
+    entry: MaybeDeprioritisedFilterEntry,
+  ): {
+    textEdit: TextEdit;
+    format: InsertTextFormat;
+  } {
+    const remainingText = document.source.slice(node.position.end);
+
+    // Match all the way up to the termination of the filter which could be
+    // another filter (`|`), or the end of a liquid statement.
+    const matchEndOfFilter = remainingText.match(/^(.*?)\s*(?=\||-?\}\}|-?\%\})|^(.*)$/);
+    const endOffset = matchEndOfFilter ? matchEndOfFilter[1].length : remainingText.length;
+
+    // The start position for a LiquidFilter node includes the `|`. We need to
+    // ignore the pipe and any spaces for our starting position.
+    const pipeRegex = new RegExp(`(\\s*\\|\\s*)(?:${node.name}(?:\\}|\\%)\\})`);
+    const matchFilterPipe = node.source.match(pipeRegex);
+    const startOffet = matchFilterPipe ? matchFilterPipe[1].length : 0;
+
+    let start = document.textDocument.positionAt(node.position.start + startOffet);
+    let end = document.textDocument.positionAt(node.position.end + endOffset);
+
+    const { insertText, insertStyle } = appendRequiredParemeters(entry);
+
+    let newText = insertText;
+    let format = insertStyle;
+
+    // If the cursor is inside the filter or at the end and it's the same
+    // value as the one we're offering a completion for then we want to restrict
+    // the insert to just the name of the filter.
+    // e.g. `{{ product | imag█e_url: crop: 'center' }}` and we're offering `imag█e_url`
+    const existingFilterOffset = remainingText.match(/[^a-zA-Z_]/)?.index ?? remainingText.length;
+    if (node.name + remainingText.slice(0, existingFilterOffset) === entry.name) {
+      newText = entry.name;
+      format = InsertTextFormat.PlainText;
+      end = document.textDocument.positionAt(node.position.end + existingFilterOffset);
+    }
+
+    // If the cursor is at the beginning of the string we can consider all
+    // options and should not replace any text.
+    // e.g. `{{ product | █image_url: crop: 'center' }}`
+    // e.g. `{{ product | █ }}`
+    if (node.name === CURSOR) {
+      end = start;
+    }
+
+    return {
+      textEdit: TextEdit.replace(
+        {
+          start,
+          end,
+        },
+        newText,
+      ),
+      format,
+    };
+  }
+
+  options: (inputType: PseudoType) => Promise<MaybeDeprioritisedFilterEntry[]> = memoize(
+    async (inputType) => {
+      const filterEntries = await this.typeSystem.filterEntries();
+
+      const options = filterEntries
+        .filter(
+          (entry) =>
+            entry.syntax?.startsWith(inputType) ||
+            (inputType !== 'variable' && entry.syntax?.startsWith('untyped')),
+        )
+        .sort(sortByName);
+
+      // Case we take "anything" as argument
+      if (inputType === 'variable') {
+        const entriesWithoutSyntax = filterEntries.filter((entry) => !entry.syntax);
+        return options.concat(entriesWithoutSyntax).sort(sortByName);
+      }
+
+      // Case there doesn't exist filter entries for that type
+      if (options.length === 0) {
+        return filterEntries.sort(sortByName);
+      }
+
+      const untypedOptions = await this.options('variable');
+
+      // We show 'array' options before 'untyped' options because they feel
+      // like better options.
+      return [...options, ...untypedOptions.map(deprioritized)];
+    },
+    (inputType) => inputType,
+  );
+}
+
+type MaybeDeprioritisedFilterEntry = FilterEntry & { deprioritized?: boolean };
+
+function deprioritized(entry: FilterEntry): MaybeDeprioritisedFilterEntry {
+  return { ...entry, deprioritized: true };
+}
+
+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}`;
+}