@platformos/platformos-language-server-common 0.0.2

package/src/completions/providers/HtmlAttributeValueCompletionProvider.ts

@@ -0,0 +1,65 @@
+import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
+import { Attribute, HtmlData, Tag, Value, renderHtmlEntry } from '../../docset';
+import {
+  findLast,
+  getCompoundName,
+  isAttrEmpty,
+  isHtmlAttribute,
+  isNamedHtmlElementNode,
+  isTextNode,
+} from '../../utils';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider, sortByName } from './common';
+
+export class HtmlAttributeValueCompletionProvider implements Provider {
+  constructor() {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const attributeNode = findLast(ancestors, isHtmlAttribute);
+    const tagNode = findLast(ancestors, isNamedHtmlElementNode);
+
+    if (
+      !node ||
+      !attributeNode ||
+      !tagNode ||
+      !isTextNode(node) ||
+      !isHtmlAttribute(attributeNode) ||
+      !isNamedHtmlElementNode(tagNode) ||
+      isAttrEmpty(attributeNode) ||
+      !attributeNode.value.includes(node)
+    ) {
+      return [];
+    }
+
+    const tagName = getCompoundName(tagNode);
+    const attrName = getCompoundName(attributeNode);
+    const name = node.value;
+    const partial = name.replace(CURSOR, '');
+    const tagEntry = HtmlData.tags.find((tag) => tag.name === tagName);
+    const attribute =
+      HtmlData.globalAttributes.find((attr) => attr.name === attrName) ??
+      tagEntry?.attributes.find((attr) => attr.name === attrName);
+    const valueSetName = attribute?.valueSet;
+    const valueSetEntry = HtmlData.valueSets.find((valueSet) => valueSet.name === valueSetName);
+    const options = (valueSetEntry?.values ?? []).filter((value) => value.name.startsWith(partial));
+    return options
+      .sort(sortByName)
+      .map((option) =>
+        toCompletionItem(option, attribute && 'references' in attribute ? attribute : tagEntry),
+      );
+  }
+}
+
+function toCompletionItem(value: Value, parentEntry?: Attribute | Tag): CompletionItem {
+  return {
+    label: value.name,
+    kind: CompletionItemKind.Value,
+    documentation: {
+      kind: 'markdown',
+      value: renderHtmlEntry(value, parentEntry),
+    },
+  };
+}

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

@@ -0,0 +1,57 @@
+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 allTagNames = [...HtmlData.tags].sort(sortByName).map((x) => x.name);
+
+describe('Module: HtmlTagCompletionProvider', 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 html tag open names', async () => {
+    await expect(provider).to.complete('<█', allTagNames);
+    await expect(provider).to.complete(
+      '<h█',
+      allTagNames.filter((x) => x.startsWith('h')),
+    );
+  });
+
+  it('should complete void elements with only the void element', async () => {
+    await expect(provider).to.complete(
+      '<img█',
+      allTagNames.filter((x) => x === 'img'),
+    );
+  });
+
+  it('should complete html tag open names with parent name', async () => {
+    await expect(provider).to.complete('<a><', ['/a'].concat(allTagNames));
+  });
+
+  it('should complete html tag close with the appropriate dangling parent name', async () => {
+    await expect(provider).to.complete('</█', []);
+    await expect(provider).to.complete('<h1></h█', ['h1']);
+    await expect(provider).to.complete('<h></h█', []); // nothing to complete since closed exactly
+  });
+
+  it('should not complete compound html tag names', async () => {
+    await expect(provider).to.complete('<{{ thing }}█', []);
+    await expect(provider).to.complete('<{{ thing }}h█', []);
+  });
+});

package/src/completions/providers/HtmlTagCompletionProvider.ts

@@ -0,0 +1,119 @@
+import {
+  HtmlDanglingMarkerClose,
+  HtmlElement,
+  NodeTypes,
+  TextNode,
+} from '@platformos/liquid-html-parser';
+import { LiquidHtmlNode } from '@platformos/platformos-check-common';
+import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
+import { HtmlData, Tag, renderHtmlEntry } from '../../docset';
+import { isTextNode } from '../../utils';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider, sortByName } from './common';
+
+type CompletableParentNode = (HtmlElement | HtmlDanglingMarkerClose) & { name: [TextNode] };
+
+export class HtmlTagCompletionProvider implements Provider {
+  constructor() {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+    const grandParentNode = ancestors.at(-2);
+
+    if (node && node.type === NodeTypes.HtmlVoidElement) {
+      const options = HtmlData.tags.filter((tag) => tag.name === node.name);
+      return options.map(toCompletionItem);
+    }
+
+    if (!node || !parentNode || !isTextNode(node) || !canComplete(node, parentNode)) {
+      return [];
+    }
+
+    const name = node.value;
+    const partial = name.replace(CURSOR, '');
+    const options = getOptions(partial, parentNode, grandParentNode);
+    return options.sort(sortByName).map(toCompletionItem);
+  }
+}
+
+function canComplete(
+  node: TextNode,
+  parentNode: LiquidHtmlNode,
+): parentNode is CompletableParentNode {
+  return (
+    isElementOrDanglingClose(parentNode) &&
+    parentNode.name.includes(node) &&
+    parentNode.name.length === 1
+  );
+}
+
+function getOptions(
+  partial: string,
+  parentNode: CompletableParentNode,
+  grandParentNode: LiquidHtmlNode | undefined,
+): Tag[] {
+  if (parentNode.type === NodeTypes.HtmlDanglingMarkerClose) {
+    return grandParentCloseOption(grandParentNode);
+  }
+
+  const grandParentName = getGrandParentName(grandParentNode);
+  return HtmlData.tags
+    .filter((tag) => tag.name.startsWith(partial))
+    .concat(
+      grandParentName && partial === ''
+        ? {
+            name: '/' + grandParentName,
+            description: '',
+            attributes: [],
+            references: [],
+          }
+        : [],
+    );
+}
+
+function toCompletionItem(tag: Tag): CompletionItem {
+  return {
+    label: tag.name,
+    kind: CompletionItemKind.Property,
+    documentation: {
+      kind: 'markdown',
+      value: renderHtmlEntry(tag),
+    },
+  };
+}
+
+function grandParentCloseOption(grandParentNode: LiquidHtmlNode | undefined): Tag[] {
+  const grandParentName = getGrandParentName(grandParentNode);
+  if (grandParentName) {
+    return [
+      HtmlData.tags.find((tag) => tag.name === grandParentName) ?? {
+        name: grandParentName,
+        description: '',
+        attributes: [],
+        references: [],
+      },
+    ];
+  } else {
+    return [];
+  }
+}
+
+function getGrandParentName(grandParentNode: LiquidHtmlNode | undefined): string | undefined {
+  if (
+    grandParentNode &&
+    grandParentNode.type === NodeTypes.HtmlElement &&
+    grandParentNode.name.length === 1 &&
+    isTextNode(grandParentNode.name[0])
+  ) {
+    return grandParentNode.name[0].value.replace(CURSOR, '');
+  }
+}
+
+function isElementOrDanglingClose(
+  node: LiquidHtmlNode,
+): node is HtmlElement | HtmlDanglingMarkerClose {
+  return [NodeTypes.HtmlElement, NodeTypes.HtmlDanglingMarkerClose].includes(node.type);
+}

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

@@ -0,0 +1,79 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { DocumentManager } from '../../documents';
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+import { BasicParamTypes } from '@platformos/platformos-check-common';
+
+describe('Module: LiquidDocParamTypeCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [
+          {
+            name: 'product',
+          },
+        ],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+  });
+
+  it("offers type completions within liquid doc's param type tag for partials", async () => {
+    const sources = [`{% doc %} @param {█`, `{% doc %} @param  {  █`];
+
+    for (const source of sources) {
+      await expect(provider).to.complete(
+        { source, relativePath: 'file://app/views/partials/file.liquid' },
+        [...Object.values(BasicParamTypes), 'product'],
+      );
+    }
+  });
+
+  it('offers completions within liquid doc tag for blocks', async () => {
+    await expect(provider).to.complete(
+      { source: `{% doc %} @█`, relativePath: 'file://blocks/file.liquid' },
+      ['param', 'example', 'description'],
+    );
+  });
+
+  it("does not offer completion if it's not within liquid doc's param type tag", async () => {
+    const sources = [
+      `{% doc %} @param {}█`,
+      `{% doc %} @example {}█`,
+      `{% doc %} @param {string} - █`,
+      `@param {█`,
+    ];
+
+    for (const source of sources) {
+      await expect(provider).to.complete(
+        { source, relativePath: 'file://app/views/partials/file.liquid' },
+        [],
+      );
+    }
+  });
+
+  it("does not offer completion if it's not within a snippet or block", async () => {
+    await expect(provider).to.complete(
+      { source: `{% doc %} @param {█`, relativePath: 'file://sections/file.liquid' },
+      [],
+    );
+
+    await expect(provider).to.complete(
+      { source: `{% doc %} @param {█`, relativePath: 'file://templates/file.liquid' },
+      [],
+    );
+
+    await expect(provider).to.complete(
+      { source: `{% doc %} @param {█`, relativePath: 'file://layout/file.liquid' },
+      [],
+    );
+  });
+});

package/src/completions/providers/LiquidDocParamTypeCompletionProvider.ts

@@ -0,0 +1,65 @@
+import { NodeTypes } from '@platformos/liquid-html-parser';
+import { CompletionItem, CompletionItemKind, MarkupKind } from 'vscode-languageserver';
+import { LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+import { filePathSupportsLiquidDoc } from '@platformos/platformos-check-common';
+import {
+  getValidParamTypes,
+  SupportedDocTagTypes,
+  ThemeDocset,
+} from '@platformos/platformos-check-common';
+
+export class LiquidDocParamTypeCompletionProvider implements Provider {
+  constructor(private readonly themeDocset: ThemeDocset) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+    if (!filePathSupportsLiquidDoc(params.document.uri)) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+
+    if (
+      !node ||
+      !parentNode ||
+      node.type !== NodeTypes.TextNode ||
+      parentNode.type !== NodeTypes.LiquidRawTag ||
+      parentNode.name !== 'doc'
+    ) {
+      return [];
+    }
+
+    /**
+     * We need to make sure we're trying to code complete after
+     * the param tag's `{` character.
+     *
+     * We will be removing any spaces in case there are any formatting issues.
+     */
+    const fragments = node.value.split(' ').filter(Boolean);
+    if (
+      fragments.length > 2 ||
+      fragments[0] !== `@${SupportedDocTagTypes.Param}` ||
+      !/^\{[a-zA-Z]*$/.test(fragments[1])
+    ) {
+      return [];
+    }
+
+    const liquidDrops = await this.themeDocset.liquidDrops();
+
+    return Array.from(getValidParamTypes(liquidDrops)).map(([label, description]) => {
+      const documentation = description
+        ? {
+            kind: MarkupKind.Markdown,
+            value: description,
+          }
+        : undefined;
+
+      return {
+        label,
+        kind: CompletionItemKind.EnumMember,
+        insertText: label,
+        documentation,
+      };
+    });
+  }
+}

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

@@ -0,0 +1,144 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { DocumentManager } from '../../documents';
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+
+describe('Module: LiquidDocTagCompletionProvider', 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('offers completions within liquid doc tag for partials', async () => {
+    await expect(provider).to.complete(
+      { source: `{% doc %} @█`, relativePath: 'file://app/views/partials/file.liquid' },
+      ['param', 'example', 'description'],
+    );
+    await expect(provider).to.complete(
+      { source: `{% doc %} @par█`, relativePath: 'file://app/views/partials/file.liquid' },
+      ['param'],
+    );
+  });
+
+  it('offers completions within liquid doc tag for blocks', async () => {
+    await expect(provider).to.complete(
+      { source: `{% doc %} @█`, relativePath: 'file://blocks/file.liquid' },
+      ['param', 'example', 'description'],
+    );
+  });
+
+  it("does not offer completion if it doesn't start with @", async () => {
+    await expect(provider).to.complete(
+      { source: `{% doc %} █`, relativePath: 'file://app/views/partials/file.liquid' },
+      [],
+    );
+  });
+
+  it('does not offer completion if it is not within a doc tag', async () => {
+    await expect(provider).to.complete(
+      { source: `{% notdoc %} @█`, relativePath: 'file://app/views/partials/file.liquid' },
+      [],
+    );
+  });
+
+  it('does not offer completion if it is not a snippet file or block', async () => {
+    await expect(provider).to.complete(
+      { source: `{% doc %} @█`, relativePath: 'file://sections/file.liquid' },
+      [],
+    );
+    await expect(provider).to.complete(
+      { source: `{% doc %} @█`, relativePath: 'file://templates/file.liquid' },
+      [],
+    );
+    await expect(provider).to.complete(
+      { source: `{% doc %} @█`, relativePath: 'file://layout/file.liquid' },
+      [],
+    );
+  });
+
+  describe('nodes that accept free-form text', () => {
+    it('offers completions when @ is at the start of a new line following an implicit description', async () => {
+      await expect(provider).to.complete(
+        {
+          source: `{% doc %}
+          This is an implicit description
+          @█`,
+          relativePath: 'file://app/views/partials/file.liquid',
+        },
+        ['param', 'example', 'description'],
+      );
+    });
+
+    it('offers completions when @ is at the start of a new line following a node that accepts free-form text', async () => {
+      await expect(provider).to.complete(
+        {
+          source: `{% doc %}
+          @prompt Text
+          @█`,
+          relativePath: 'file://app/views/partials/file.liquid',
+        },
+        ['param', 'example', 'description'],
+      );
+
+      await expect(provider).to.complete(
+        {
+          source: `{% doc %}
+          @description Text
+          @█`,
+          relativePath: 'file://app/views/partials/file.liquid',
+        },
+        ['param', 'example', 'description'],
+      );
+
+      await expect(provider).to.complete(
+        {
+          source: `{% doc %}
+          @example Text
+          @█`,
+          relativePath: 'file://app/views/partials/file.liquid',
+        },
+        ['param', 'example', 'description'],
+      );
+    });
+
+    it('does not offer completions when @ is not at the start of a line', async () => {
+      await expect(provider).to.complete(
+        {
+          source: `{% doc %}
+          @prompt This is a promptwith @█`,
+          relativePath: 'file://app/views/partials/file.liquid',
+        },
+        [],
+      );
+      await expect(provider).to.complete(
+        {
+          source: `{% doc %}
+          @description This is a description with @█`,
+          relativePath: 'file://app/views/partials/file.liquid',
+        },
+        [],
+      );
+
+      await expect(provider).to.complete(
+        {
+          source: `{% doc %}
+          @example Here is an example with @`,
+          relativePath: 'file://app/views/partials/file.liquid',
+        },
+        [],
+      );
+    });
+  });
+});

package/src/completions/providers/LiquidDocTagCompletionProvider.ts

@@ -0,0 +1,74 @@
+import { NodeTypes } from '@platformos/liquid-html-parser';
+import {
+  CompletionItem,
+  CompletionItemKind,
+  InsertTextFormat,
+  MarkupKind,
+} from 'vscode-languageserver';
+import { LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+import { formatLiquidDocTagHandle, SUPPORTED_LIQUID_DOC_TAG_HANDLES } from '../../utils/liquidDoc';
+import { filePathSupportsLiquidDoc } from '@platformos/platformos-check-common';
+
+export class LiquidDocTagCompletionProvider implements Provider {
+  constructor() {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+    if (!filePathSupportsLiquidDoc(params.document.uri)) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+
+    if (
+      !node ||
+      !parentNode ||
+      parentNode.type !== NodeTypes.LiquidRawTag ||
+      parentNode.name !== 'doc'
+    ) {
+      return [];
+    }
+
+    switch (node.type) {
+      case NodeTypes.TextNode:
+        if (!node.value.startsWith('@')) {
+          return [];
+        }
+        return this.createCompletionItems(node.value);
+      case NodeTypes.LiquidDocDescriptionNode:
+      case NodeTypes.LiquidDocExampleNode:
+      case NodeTypes.LiquidDocPromptNode:
+        // These nodes accept free-form text, so we only suggest completions if the last line starts with '@'
+        const lastLine = node.content.value.split('\n').at(-1)?.trim();
+        if (!lastLine?.startsWith('@')) {
+          return [];
+        }
+        return this.createCompletionItems(lastLine);
+      default:
+        return [];
+    }
+  }
+
+  private createCompletionItems(userInput: string): CompletionItem[] {
+    // Need to offset the '@' symbol by 1
+    const offsetInput = userInput.slice(1);
+    const entries = Object.entries(SUPPORTED_LIQUID_DOC_TAG_HANDLES).filter(
+      ([label]) => !offsetInput || label.startsWith(offsetInput),
+    );
+
+    return entries.map(([label, { description, example, template }]) => {
+      const item: CompletionItem = {
+        label,
+        kind: CompletionItemKind.EnumMember,
+        documentation: {
+          kind: MarkupKind.Markdown,
+          value: formatLiquidDocTagHandle(label, description, example),
+        },
+        insertText: template,
+        insertTextFormat: InsertTextFormat.Snippet,
+      };
+
+      return item;
+    });
+  }
+}