@platformos/platformos-language-server-common 0.0.2

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

@@ -0,0 +1,239 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { InsertTextFormat, type TextEdit } from 'vscode-languageserver';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { CURSOR } from '../params';
+
+describe('Module: ObjectCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [
+          {
+            parameters: [
+              {
+                description: '',
+                name: 'crop',
+                positional: false,
+                required: false,
+                types: ['string'],
+              },
+              {
+                description: '',
+                name: 'weight',
+                positional: false,
+                required: false,
+                types: ['string'],
+              },
+              {
+                description: '',
+                name: 'width',
+                positional: false,
+                required: false,
+                types: ['number'],
+              },
+            ],
+            name: 'image_url',
+          },
+        ],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+  });
+
+  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', 'weight', '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'])),
+      );
+    });
+  });
+
+  describe('when the user has already typed out the parameter name', () => {
+    describe('and the cursor is in the middle of the parameter', () => {
+      it('changes the range depending on the completion item', async () => {
+        //                               char 24 ⌄         ⌄ char 34
+        const context = `{{ product | image_url: w█idth: 100, height: 200 | image_tag }}`;
+        //                                            ⌃ char 29
+
+        const weightTextEdit: TextEdit = {
+          newText: "weight: '$1'",
+          range: {
+            end: { line: 0, character: 34 },
+            start: { line: 0, character: 24 },
+          },
+        };
+
+        const widthTextEdit: TextEdit = {
+          newText: 'width',
+          range: {
+            end: { line: 0, character: 29 },
+            start: { line: 0, character: 24 },
+          },
+        };
+
+        await expect(provider).to.complete(context, [
+          expect.objectContaining({
+            label: 'weight',
+            insertTextFormat: InsertTextFormat.Snippet,
+            textEdit: expect.objectContaining(weightTextEdit),
+          }),
+          expect.objectContaining({
+            label: 'width',
+            insertTextFormat: InsertTextFormat.PlainText,
+            textEdit: expect.objectContaining(widthTextEdit),
+          }),
+        ]);
+
+        const textDocument = TextDocument.create('', 'liquid', 0, context.replace(CURSOR, ''));
+
+        expect(TextDocument.applyEdits(textDocument, [weightTextEdit])).toBe(
+          "{{ product | image_url: weight: '$1', height: 200 | image_tag }}",
+        );
+
+        expect(TextDocument.applyEdits(textDocument, [widthTextEdit])).toBe(
+          '{{ product | image_url: width: 100, height: 200 | image_tag }}',
+        );
+      });
+    });
+
+    describe('and the cursor is at the beginning of the parameter', () => {
+      it('offers a full list of completion items', async () => {
+        const context = `{{ product | image_url: █crop: 'center' }}`;
+
+        await expect(provider).to.complete(context, ['crop', 'weight', 'width']);
+      });
+
+      it('does not replace the existing text', async () => {
+        //                               char 24 ⌄
+        const context = `{{ product | image_url: █crop: 'center' }}`;
+
+        const textEdit: TextEdit = {
+          newText: 'width: ',
+          range: {
+            end: { line: 0, character: 24 },
+            start: { line: 0, character: 24 },
+          },
+        };
+
+        await expect(provider).to.complete(
+          context,
+          expect.arrayContaining([
+            expect.objectContaining({
+              label: 'width',
+              insertTextFormat: InsertTextFormat.PlainText,
+              textEdit,
+            }),
+          ]),
+        );
+
+        const textDocument = TextDocument.create('', 'liquid', 0, context.replace(CURSOR, ''));
+
+        expect(TextDocument.applyEdits(textDocument, [textEdit])).toBe(
+          "{{ product | image_url: width: crop: 'center' }}",
+        );
+      });
+    });
+
+    describe('and the cursor is at the end of the parameter', () => {
+      it('restricts the range to only the name of the parameter', async () => {
+        //                               char 24 ⌄   ⌄ char 28
+        const context = `{{ product | image_url: crop█: 'center' }}`;
+
+        const textEdit: TextEdit = {
+          newText: 'crop',
+          range: {
+            end: { line: 0, character: 28 },
+            start: { line: 0, character: 24 },
+          },
+        };
+
+        await expect(provider).to.complete(context, [
+          expect.objectContaining({
+            label: 'crop',
+            insertTextFormat: InsertTextFormat.PlainText,
+            textEdit,
+          }),
+        ]);
+
+        const textDocument = TextDocument.create('', 'liquid', 0, context.replace(CURSOR, ''));
+
+        expect(TextDocument.applyEdits(textDocument, [textEdit])).toBe(
+          "{{ product | image_url: crop: 'center' }}",
+        );
+      });
+    });
+  });
+
+  describe('when the parameter is a string type', () => {
+    it('includes quotes in the insertText', async () => {
+      const context = `{{ product | image_url: cr█`;
+
+      await expect(provider).to.complete(context, [
+        expect.objectContaining({
+          label: 'crop',
+          insertTextFormat: InsertTextFormat.Snippet,
+          textEdit: expect.objectContaining({
+            newText: "crop: '$1'",
+          }),
+        }),
+      ]);
+    });
+  });
+
+  describe('when the parameter is not a string type', () => {
+    it('does not include a tab stop position', async () => {
+      const context = `{{ product | image_url: wid█`;
+
+      await expect(provider).to.complete(context, [
+        expect.objectContaining({
+          label: 'width',
+          insertTextFormat: InsertTextFormat.PlainText,
+          textEdit: expect.objectContaining({
+            newText: 'width: ',
+          }),
+        }),
+      ]);
+    });
+  });
+
+  describe('when the cursor is inside of a quotes', () => {
+    it('does not return any completion options', async () => {
+      const context = `{{ product | image_url: width: 100, crop: '█'`;
+
+      await expect(provider).to.complete(context, []);
+    });
+  });
+});

package/src/completions/providers/FilterNamedParameterCompletionProvider.ts

@@ -0,0 +1,121 @@
+import { LiquidVariableLookup, NodeTypes } from '@platformos/liquid-html-parser';
+import { ThemeDocset } from '@platformos/platformos-check-common';
+import {
+  CompletionItem,
+  CompletionItemKind,
+  InsertTextFormat,
+  TextEdit,
+} from 'vscode-languageserver';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider, createCompletionItem } from './common';
+import { AugmentedLiquidSourceCode } from '../../documents';
+
+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 filteredOptions = foundFilter.parameters.filter(
+      (p) => !p.positional && p.name.startsWith(partial),
+    );
+
+    return filteredOptions.map(({ description, name, types }) => {
+      const { textEdit, format } = this.textEdit(node, params.document, name, types[0]);
+
+      return createCompletionItem(
+        {
+          name,
+          description,
+        },
+        {
+          kind: CompletionItemKind.TypeParameter,
+          insertTextFormat: format,
+          // We want to force these options to appear first in the list given
+          // the context that they are being requested in.
+          sortText: `1${name}`,
+          textEdit,
+        },
+        'filter',
+        Array.isArray(types) ? types[0] : 'unknown',
+      );
+    });
+  }
+
+  textEdit(
+    node: LiquidVariableLookup,
+    document: AugmentedLiquidSourceCode,
+    name: string,
+    type: string,
+  ): {
+    textEdit: TextEdit;
+    format: InsertTextFormat;
+  } {
+    const remainingText = document.source.slice(node.position.end);
+
+    // Match all the way up to the termination of the parameter which could be
+    // another parameter (`,`), filter (`|`), or the end of a liquid statement.
+    const match = remainingText.match(/^(.*?)\s*(?=,|\||-?\}\}|-?\%\})|^(.*)$/);
+    const offset = match ? match[0].length : remainingText.length;
+    const existingParameterOffset = remainingText.match(/[^a-zA-Z]/)?.index ?? remainingText.length;
+
+    let start = document.textDocument.positionAt(node.position.start);
+    let end = document.textDocument.positionAt(node.position.end + offset);
+    let newText = type === 'string' ? `${name}: '$1'` : `${name}: `;
+    let format = type === 'string' ? InsertTextFormat.Snippet : InsertTextFormat.PlainText;
+
+    // If the cursor is inside the parameter 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 parameter.
+    // e.g. `{{ product | image_url: cr█op: 'center' }}` and we're offering `crop`
+    if (node.name + remainingText.slice(0, existingParameterOffset) == name) {
+      newText = name;
+      format = InsertTextFormat.PlainText;
+      end = document.textDocument.positionAt(node.position.end + existingParameterOffset);
+    }
+
+    // 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 | image_url: █ }}`
+    if (node.name === '█') {
+      end = start;
+    }
+
+    return {
+      textEdit: TextEdit.replace(
+        {
+          start,
+          end,
+        },
+        newText,
+      ),
+      format,
+    };
+  }
+}

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

@@ -0,0 +1,150 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { HtmlData } from '../../docset';
+import { sortByName } from './common';
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+
+const globalAttributeNames = [...HtmlData.globalAttributes].sort(sortByName).map((x) => x.name);
+const aTag = HtmlData.tags.find((x) => x.name === 'a')!;
+const aTagAttributeNames = aTag.attributes.map((x) => x.name);
+
+describe('Module: HtmlAttributeCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+  });
+
+  it('should complete unknown tag attributes with global attribute', async () => {
+    await expect(provider).to.complete('<unknown █', globalAttributeNames);
+  });
+
+  it("should complete known tags attribute with global attribute names + the tag's attributes", async () => {
+    const expected = [...aTagAttributeNames, ...globalAttributeNames].sort();
+    await expect(provider).to.complete('<a █', expected);
+  });
+
+  it('should complete correctly inside if branches as well!', async () => {
+    const expected = [...aTagAttributeNames, ...globalAttributeNames].sort();
+    await expect(provider).to.complete('<a {% if cond %}█', expected);
+  });
+
+  it('should replace the existing attribute partial with the full attribute tag', async () => {
+    const attributePartial = 'titl';
+    const source = `<text ${attributePartial}█>`;
+    const sourceWithoutCursor = source.replace('█', '');
+
+    await expect(provider).to.complete(source, [
+      expect.objectContaining({
+        label: 'title',
+        textEdit: {
+          newText: 'title="$1"$0',
+          range: {
+            start: { line: 0, character: sourceWithoutCursor.indexOf(attributePartial) },
+            end: {
+              line: 0,
+              character: sourceWithoutCursor.indexOf(attributePartial) + attributePartial.length,
+            },
+          },
+        },
+      }),
+    ]);
+  });
+
+  it('should replace the existing attribute partial with the full attribute tag when cursor is in the middle of attribute partial', async () => {
+    const attributePartial = 'titl';
+    const source = '<text ti█tl>';
+    const sourceWithoutCursor = source.replace('█', '');
+
+    await expect(provider).to.complete(source, [
+      expect.objectContaining({
+        label: 'title',
+        textEdit: {
+          newText: 'title="$1"$0',
+          range: {
+            start: { line: 0, character: sourceWithoutCursor.indexOf(attributePartial) },
+            end: {
+              line: 0,
+              character: sourceWithoutCursor.indexOf(attributePartial) + attributePartial.length,
+            },
+          },
+        },
+      }),
+    ]);
+  });
+
+  it('should replace the existing attribute partial with the full attribute tag without value', async () => {
+    const attributePartial = 'disab';
+    const source = `<button ${attributePartial}█>`;
+    const sourceWithoutCursor = source.replace('█', '');
+
+    await expect(provider).to.complete(source, [
+      expect.objectContaining({
+        label: 'disabled',
+        textEdit: {
+          newText: 'disabled',
+          range: {
+            start: { line: 0, character: sourceWithoutCursor.indexOf(attributePartial) },
+            end: {
+              line: 0,
+              character: sourceWithoutCursor.indexOf(attributePartial) + attributePartial.length,
+            },
+          },
+        },
+      }),
+    ]);
+  });
+
+  it('should not replace any character if auto-complete is triggered with no attribute partial', async () => {
+    await expect(provider).to.complete(
+      '<a █>',
+      [...aTagAttributeNames, ...globalAttributeNames].sort().map((attr) => {
+        return expect.objectContaining({
+          textEdit: {
+            newText: expect.stringContaining(attr),
+            range: {
+              start: { line: 0, character: 3 },
+              end: { line: 0, character: 3 },
+            },
+          },
+        });
+      }),
+    );
+  });
+
+  it('should not replace attribute tags containing liquid code', async () => {
+    const attributePartial = 'data--';
+    const source = '<a d█ata--{{ echo "coolstuff" }}>';
+    const sourceWithoutCursor = source.replace('█', '');
+
+    await expect(provider).to.complete(
+      source,
+      ['dir', 'download', 'draggable', 'dropzone'].map((attr) => {
+        return expect.objectContaining({
+          textEdit: {
+            newText: expect.stringContaining(attr),
+            range: {
+              start: { line: 0, character: sourceWithoutCursor.indexOf(attributePartial) },
+              end: {
+                line: 0,
+                character: sourceWithoutCursor.indexOf(attributePartial) + attributePartial.length,
+              },
+            },
+          },
+        });
+      }),
+    );
+  });
+});

package/src/completions/providers/HtmlAttributeCompletionProvider.ts

@@ -0,0 +1,117 @@
+import {
+  CompletionItem,
+  CompletionItemKind,
+  InsertTextFormat,
+  Range,
+  TextEdit,
+} from 'vscode-languageserver';
+import { Attribute, HtmlData, renderHtmlEntry } from '../../docset';
+import { AugmentedSourceCode, DocumentManager } from '../../documents';
+import {
+  findLast,
+  getCompoundName,
+  isAttrEmpty,
+  isNamedHtmlElementNode,
+  isTextNode,
+} from '../../utils';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider, sortByName } from './common';
+import { LiquidHtmlNode } from '@platformos/liquid-html-parser';
+
+export class HtmlAttributeCompletionProvider implements Provider {
+  constructor(private readonly documentManager: DocumentManager) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const parentNode = findLast(ancestors, isAttrEmpty);
+    const grandParentNode = findLast(ancestors, isNamedHtmlElementNode);
+    const document = this.documentManager.get(params.textDocument.uri);
+
+    if (!node || !parentNode || !grandParentNode || !document) {
+      return [];
+    }
+
+    if (!isTextNode(node) || !isAttrEmpty(parentNode) || !isNamedHtmlElementNode(grandParentNode)) {
+      return [];
+    }
+
+    const grandParentNodeName = getCompoundName(grandParentNode);
+    const name = node.value;
+    const partial = name.replace(CURSOR, '');
+    const options = getOptions(partial, grandParentNodeName);
+
+    const attributeTagRange = this.attributeTagRange(node, document);
+    const hasExistingAttributeValue = this.hasExistingAttributeValue(attributeTagRange, document);
+    const hasLiquidTag = this.hasLiquidTag(attributeTagRange, document);
+
+    return options.sort(sortByName).map((tag) => {
+      return toCompletionItem(tag, attributeTagRange, hasExistingAttributeValue, hasLiquidTag);
+    });
+  }
+
+  hasExistingAttributeValue(attributeTagRange: Range, document: AugmentedSourceCode): boolean {
+    return /^\s*=/.test(
+      document.source.slice(document.textDocument.offsetAt(attributeTagRange.end)),
+    );
+  }
+
+  hasLiquidTag(attributeTagRange: Range, document: AugmentedSourceCode): boolean {
+    return /^(?:\{%|\{\{)/.test(
+      document.source.slice(document.textDocument.offsetAt(attributeTagRange.end)),
+    );
+  }
+
+  // Find the range of the attribute partial. If the attribute contains any liquid code, the range
+  // will end before the first character of the liquid block.
+  attributeTagRange(node: LiquidHtmlNode, document: AugmentedSourceCode): Range {
+    if (node.type === 'TextNode' && node.value === CURSOR) {
+      // If you try to auto-complete with no provided attribute tag,
+      // we will not try to override the subsequent character.
+      // E.g. <a href="" █>
+      return {
+        start: document.textDocument.positionAt(node.position.start),
+        end: document.textDocument.positionAt(node.position.start),
+      };
+    }
+
+    const sourcePartialPastCursor = document.source.slice(node.position.end);
+    const attributeEndOffset =
+      sourcePartialPastCursor.match(/[\s=]|\{%|\{\{|>/)?.index ?? sourcePartialPastCursor.length;
+
+    return {
+      start: document.textDocument.positionAt(node.position.start),
+      end: document.textDocument.positionAt(node.position.end + attributeEndOffset),
+    };
+  }
+}
+
+function getOptions(partial: string, parentNodeName: string): Attribute[] {
+  const tag = HtmlData.tags.find((tag) => tag.name === parentNodeName);
+  const parentAttributes = tag?.attributes ?? [];
+  return [...parentAttributes, ...HtmlData.globalAttributes].filter((x) =>
+    x.name.startsWith(partial),
+  );
+}
+
+function toCompletionItem(
+  tag: Attribute,
+  attributeTagRange: Range,
+  hasExistingAttributeValue: boolean,
+  hasLiquidTag: boolean,
+): CompletionItem {
+  const attributeWithValue = !tag.valueSet || tag.valueSet !== 'v';
+  const insertSnippet = attributeWithValue && !hasExistingAttributeValue && !hasLiquidTag;
+
+  return {
+    label: tag.name,
+    kind: CompletionItemKind.Value,
+    insertTextFormat: insertSnippet ? InsertTextFormat.Snippet : InsertTextFormat.PlainText,
+    textEdit: TextEdit.replace(attributeTagRange, insertSnippet ? `${tag.name}="$1"$0` : tag.name),
+    documentation: {
+      kind: 'markdown',
+      value: renderHtmlEntry(tag),
+    },
+  };
+}

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

@@ -0,0 +1,38 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+
+describe('Module: HtmlAttributeValueCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+  });
+
+  it('should complete known void element attribute values', async () => {
+    const expected = ['lazy', 'eager'].sort();
+    await expect(provider).to.complete('<img loading="█"', expected);
+  });
+
+  it('should complete known tag attribute values', async () => {
+    const expected = ['get', 'post', 'dialog'].sort();
+    await expect(provider).to.complete('<form method="█"', expected);
+  });
+
+  it('should filter results', async () => {
+    const expected = ['get'].sort();
+    await expect(provider).to.complete('<form method="g█"', expected);
+  });
+});