@platformos/platformos-language-server-common 0.0.2

package/src/completions/providers/TranslationCompletionProvider.ts

@@ -0,0 +1,103 @@
+import { LiquidHtmlNode, NodeTypes } from '@platformos/liquid-html-parser';
+import { CompletionItem, CompletionItemKind, Range, TextEdit } from 'vscode-languageserver';
+import { DocumentManager } from '../../documents';
+import {
+  GetTranslationsForURI,
+  extractParams,
+  paramsString,
+  renderTranslation,
+  translationOptions,
+} from '../../translations';
+import { findCurrentNode } from '@platformos/platformos-check-common';
+import { LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+
+export class TranslationCompletionProvider implements Provider {
+  constructor(
+    private readonly documentManager: DocumentManager,
+    private readonly getTranslationsForURI: GetTranslationsForURI,
+  ) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+    const document = this.documentManager.get(params.textDocument.uri);
+
+    if (
+      !node ||
+      node.type !== NodeTypes.String ||
+      !parentNode ||
+      parentNode.type !== NodeTypes.LiquidVariable ||
+      !document
+    ) {
+      return [];
+    }
+
+    const ast = document.ast as LiquidHtmlNode | Error;
+    const textDocument = document.textDocument;
+
+    const translations = await this.getTranslationsForURI(params.textDocument.uri);
+    const partial = node.value;
+
+    // We only want to show standard translations to complete if the translation
+    // is prefixed by shopify. Otherwise it's too noisy.
+    const options = translationOptions(translations).filter(
+      (option) => !option.path[0]?.startsWith('shopify') || partial.startsWith('shopify'),
+    );
+
+    const [_currentNode, realAncestors] =
+      ast instanceof Error
+        ? [null, []]
+        : findCurrentNode(ast, textDocument.offsetAt(params.position));
+
+    // That part feels kind of gross, let me explain...
+    // When we complete translations, we also want to append the `| t` after the
+    // string, but we should only ever do that if the variable didn't _already_ have that.
+    // But since our completion engine works on incomplete code, we need to temporarily
+    // fetch the real node to do the optional | t completion.
+    const realParentNode = realAncestors.at(-1);
+    let shouldAppendTranslateFilter =
+      realParentNode?.type === NodeTypes.LiquidVariable && realParentNode?.filters.length === 0;
+    const quote = node.single ? "'" : '"';
+    let postFix = quote + ' | t';
+    let replaceRange: Range;
+
+    if (shouldAppendTranslateFilter) {
+      postFix = quote + ' | t';
+      replaceRange = {
+        start: textDocument.positionAt(node.position.start + 1), // minus the quote characters
+        end: textDocument.positionAt(node.position.end), // including quote
+      };
+    } else {
+      postFix = '';
+      replaceRange = {
+        start: textDocument.positionAt(node.position.start + 1), // minus the quote characters
+        end: textDocument.positionAt(node.position.end - 1), // excluding quote
+      };
+    }
+
+    const insertTextStartIndex = partial.lastIndexOf('.') + 1;
+
+    return options.map(({ path, translation }): CompletionItem => {
+      const params = extractParams(
+        typeof translation === 'string' ? translation : Object.values(translation)[0] ?? '',
+      );
+      const parameters = paramsString(params);
+      return {
+        label: quote + path.join('.') + quote + ' | t', // don't want the count here because it feels noisy(?)
+        insertText: path.join('.').slice(insertTextStartIndex), // for editors that don't support textEdit
+        kind: CompletionItemKind.Field,
+        textEdit: TextEdit.replace(
+          replaceRange,
+          path.join('.') + postFix + (shouldAppendTranslateFilter ? parameters : ''),
+        ),
+        documentation: {
+          kind: 'markdown',
+          value: renderTranslation(translation),
+        },
+      };
+    });
+  }
+}

package/src/completions/providers/common/CompletionItemProperties.ts

@@ -0,0 +1,66 @@
+import { DocsetEntry } from '@platformos/platformos-check-common';
+import { CompletionItem, CompletionItemTag, MarkupContent } from 'vscode-languageserver';
+import { DocsetEntryType, render } from '../../../docset';
+import { ArrayType, PseudoType, ShapeType, UnionType } from '../../../TypeSystem';
+
+// ASCII tokens that make a string appear lower in the list.
+//
+// It's setup so that we can show array filters before "global" filters,
+// and similarly array deprecated filters before "global" deprecated
+// filters.
+enum SortTokens {
+  normal = '',
+  deprioritized = '{',
+  deprecated = '|',
+  deprecatedAndDeprioritized = '}',
+}
+
+export function createCompletionItem(
+  entry: DocsetEntry & { deprioritized?: boolean },
+  extraProperties: Partial<CompletionItem> = {},
+  docsetEntryType?: DocsetEntryType,
+  entryType?: PseudoType | ArrayType | ShapeType | UnionType,
+): CompletionItem {
+  // prettier-ignore
+  const sortToken = entry.deprecated
+    ? entry.deprioritized
+      ? SortTokens.deprecatedAndDeprioritized
+      : SortTokens.deprecated
+    : entry.deprioritized
+      ? SortTokens.deprioritized
+      : SortTokens.normal;
+  return {
+    label: entry.name,
+    sortText: `${sortToken}${entry.name}`,
+    ...documentationProperties(entry, docsetEntryType, entryType),
+    ...deprecatedProperties(entry),
+    ...extraProperties,
+  };
+}
+
+function documentationProperties(
+  entry: DocsetEntry,
+  docsetEntryType?: DocsetEntryType,
+  entryType?: PseudoType | ArrayType | ShapeType | UnionType,
+): {
+  documentation: MarkupContent;
+} {
+  const value = render(entry, entryType, docsetEntryType);
+
+  return {
+    documentation: {
+      kind: 'markdown',
+      value,
+    },
+  };
+}
+
+function deprecatedProperties(entry: DocsetEntry & { deprioritized?: boolean }) {
+  if (!entry.deprecated) return {};
+
+  const tags: CompletionItemTag[] = [CompletionItemTag.Deprecated];
+
+  return {
+    tags,
+  };
+}

package/src/completions/providers/common/Provider.ts

@@ -0,0 +1,6 @@
+import { CompletionItem } from 'vscode-languageserver';
+import { LiquidCompletionParams } from '../../params';
+
+export interface Provider {
+  completions(params: LiquidCompletionParams): Promise<CompletionItem[]>;
+}

package/src/completions/providers/common/index.ts

@@ -0,0 +1,18 @@
+export { createCompletionItem } from './CompletionItemProperties';
+export { Provider } from './Provider';
+
+export function sortByName(
+  { name: nameA }: { name: string },
+  { name: nameB }: { name: string },
+): number {
+  if (nameA < nameB) {
+    return -1;
+  }
+
+  if (nameA > nameB) {
+    return 1;
+  }
+
+  // names must be equal
+  return 0;
+}

package/src/completions/providers/data/contentForParameterCompletionOptions.ts

@@ -0,0 +1,9 @@
+/**
+ * These definitions are not currently available in the generated Liquid Docs
+ * so we're hardcoding them here in the interim.
+ */
+export const DEFAULT_COMPLETION_OPTIONS: { [key: string]: string } = {
+  type: "The type (name) of an existing theme block in your theme’s /blocks folder. Only applicable when `content_type` is 'block'.",
+  id: "A unique identifier and literal string within the section or block that contains the static blocks. Only applicable when `content_type` is 'block'.",
+  closest: 'A path that provides a way to access the closest resource of a given type.',
+};

package/src/completions/providers/index.ts

@@ -0,0 +1,20 @@
+export { ContentForCompletionProvider } from './ContentForCompletionProvider';
+export { ContentForBlockTypeCompletionProvider } from './ContentForBlockTypeCompletionProvider';
+export { ContentForParameterCompletionProvider } from './ContentForParameterCompletionProvider';
+export { HtmlTagCompletionProvider } from './HtmlTagCompletionProvider';
+export { HtmlAttributeCompletionProvider } from './HtmlAttributeCompletionProvider';
+export { HtmlAttributeValueCompletionProvider } from './HtmlAttributeValueCompletionProvider';
+export { FilterCompletionProvider } from './FilterCompletionProvider';
+export { FilterNamedParameterCompletionProvider } from './FilterNamedParameterCompletionProvider';
+export { LiquidTagsCompletionProvider } from './LiquidTagsCompletionProvider';
+export { ObjectAttributeCompletionProvider } from './ObjectAttributeCompletionProvider';
+export { ObjectCompletionProvider } from './ObjectCompletionProvider';
+export { TranslationCompletionProvider } from './TranslationCompletionProvider';
+export { PartialCompletionProvider } from './PartialCompletionProvider';
+export {
+  GetPartialNamesForURI,
+  RenderPartialParameterCompletionProvider,
+} from './RenderPartialParameterCompletionProvider';
+export { LiquidDocTagCompletionProvider } from './LiquidDocTagCompletionProvider';
+export { LiquidDocParamTypeCompletionProvider } from './LiquidDocParamTypeCompletionProvider';
+export { Provider } from './common/Provider';

package/src/css/CSSLanguageService.spec.ts

@@ -0,0 +1,161 @@
+import { assert, beforeEach, describe, expect, it } from 'vitest';
+import { DocumentManager } from '../documents';
+import { CSSLanguageService } from './CSSLanguageService';
+import { getRequestParams, isCompletionList } from './test/test-helpers';
+
+describe('Module: CSSLanguageService', () => {
+  let cssLanguageService: CSSLanguageService;
+  let documentManager: DocumentManager;
+
+  beforeEach(async () => {
+    documentManager = new DocumentManager(
+      undefined,
+      undefined,
+      undefined,
+      async () => 'theme', // theme schema
+      async () => false, // invalid
+    );
+    cssLanguageService = new CSSLanguageService(documentManager);
+
+    await cssLanguageService.setup({
+      textDocument: {
+        completion: {
+          contextSupport: true,
+          completionItem: {
+            snippetSupport: true,
+            commitCharactersSupport: true,
+            documentationFormat: ['markdown'],
+            deprecatedSupport: true,
+            preselectSupport: true,
+          },
+        },
+      },
+    });
+  });
+
+  describe('completions', () => {
+    it('should return CSS completions in a liquid file {% stylesheet %}', async () => {
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          {% stylesheet %}
+            .a:hov█ {
+              color: red;
+            }
+          {% endstylesheet %}
+          <div>hello world</div>
+
+        `,
+      );
+
+      const completions = await cssLanguageService.completions(params);
+      assert(isCompletionList(completions));
+      expect(completions.items).to.have.lengthOf(357);
+      expect(completions.items[0].label).to.equal(':active');
+      expect(completions.items[0].documentation).to.deep.equal({
+        kind: 'markdown',
+        value:
+          dedent(`Applies while an element is being activated by the user\\. For example, between the times the user presses the mouse button and releases it\\.
+
+(Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 5)
+
+[MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:active)`),
+      });
+    });
+  });
+
+  describe('hover', () => {
+    it('should return hover information for the given property in a {% stylesheet %}', async () => {
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          {% stylesheet %}
+            .wrapper {
+              display: flex█;
+            }
+          {% endstylesheet %}
+          <div>hello world</div>
+        `,
+      );
+      const hover = await cssLanguageService.hover(params);
+      assert(hover !== null);
+      expect(hover.contents).to.eql({
+        kind: 'plaintext',
+        // Dedent this
+        value:
+          dedent(`In combination with 'float' and 'position', determines the type of box or boxes that are generated for an element.
+        (Edge 12, Firefox 1, Safari 1, Chrome 1, IE 4, Opera 7)
+        
+        Syntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
+        
+        MDN Reference: https://developer.mozilla.org/docs/Web/CSS/display`),
+      });
+    });
+
+    it('should return hover information for the given tag in a {% stylesheet %}', async () => {
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          {% stylesheet %}
+            .wrapper█ {
+              display: flex;
+            }
+          {% endstylesheet %}
+          <div>hello world</div>
+        `,
+      );
+      const hover = await cssLanguageService.hover(params);
+      assert(hover !== null);
+      expect(hover.contents).to.eql([
+        '<element class="wrapper">',
+        '[Selector Specificity](https://developer.mozilla.org/docs/Web/CSS/Specificity): (0, 1, 0)',
+      ]);
+    });
+  });
+
+  describe('diagnostics', () => {
+    it('should return ddiagnostics information for the given property in a {% stylesheet %}', async () => {
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          {% stylesheet %}
+            a:h {
+            }
+          {% endstylesheet %}
+          <div>hello world</div>
+        `,
+      );
+      const diagnostics = await cssLanguageService.diagnostics(params);
+      assert(diagnostics !== null);
+      expect(diagnostics).to.eql([
+        {
+          code: 'emptyRules',
+          message: 'Do not use empty rulesets',
+          range: {
+            end: {
+              character: 15,
+              line: 2,
+            },
+            start: {
+              character: 12,
+              line: 2,
+            },
+          },
+          severity: 2,
+          source: 'json',
+        },
+      ]);
+    });
+  });
+});
+
+function dedent(text: string): string {
+  return text
+    .split('\n')
+    .map((line) => line.trimStart())
+    .join('\n');
+}

package/src/css/CSSLanguageService.ts

@@ -0,0 +1,113 @@
+import { LiquidRawTag, NodeTypes } from '@platformos/liquid-html-parser';
+import { Mode, Modes, SourceCodeType, findCurrentNode } from '@platformos/platformos-check-common';
+import { LanguageService, Stylesheet, getCSSLanguageService } from 'vscode-css-languageservice';
+import {
+  CompletionItem,
+  CompletionList,
+  CompletionParams,
+  Diagnostic,
+  DocumentDiagnosticParams,
+  Hover,
+  HoverParams,
+  ClientCapabilities as LSPClientCapabilities,
+} from 'vscode-languageserver';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { DocumentManager } from '../documents';
+
+export class CSSLanguageService {
+  private service: LanguageService | null = null;
+
+  constructor(private documentManager: DocumentManager) {}
+
+  async setup(clientCapabilities: LSPClientCapabilities) {
+    this.service = getCSSLanguageService({
+      clientCapabilities,
+    });
+  }
+
+  async completions(params: CompletionParams): Promise<null | CompletionList | CompletionItem[]> {
+    const service = this.service;
+    if (!service) return null;
+    const documents = this.getDocuments(params, service);
+    if (!documents) return null;
+    const [stylesheetTextDocument, stylesheetDocument] = documents;
+    return service.doComplete(stylesheetTextDocument, params.position, stylesheetDocument);
+  }
+
+  async diagnostics(params: DocumentDiagnosticParams): Promise<Diagnostic[]> {
+    const service = this.service;
+    if (!service) return [];
+    const documents = this.getDocuments(params, service);
+    if (!documents) return [];
+    const [stylesheetTextDocument, stylesheetDocument] = documents;
+    return service.doValidation(stylesheetTextDocument, stylesheetDocument);
+  }
+
+  async hover(params: HoverParams): Promise<Hover | null> {
+    const service = this.service;
+    if (!service) return null;
+    const documents = this.getDocuments(params, service);
+    if (!documents) return null;
+    const [stylesheetTextDocument, stylesheetDocument] = documents;
+    return service.doHover(stylesheetTextDocument, params.position, stylesheetDocument);
+  }
+
+  private getDocuments(
+    params: HoverParams | CompletionParams | DocumentDiagnosticParams,
+    service: LanguageService,
+  ): [TextDocument, Stylesheet] | null {
+    const document = this.documentManager.get(params.textDocument.uri);
+    if (!document) return null;
+
+    switch (document.type) {
+      case SourceCodeType.GraphQL:
+      case SourceCodeType.JSON: {
+        return null;
+      }
+      case SourceCodeType.LiquidHtml: {
+        if (document.ast instanceof Error) return null;
+        const textDocument = document.textDocument;
+        let offset = 0;
+        let isDiagnostics = false;
+        if ('position' in params && params.position.line !== 0 && params.position.character !== 0) {
+          offset = textDocument.offsetAt(params.position);
+        } else {
+          const stylesheetIndex = document.source.indexOf('{% stylesheet %}');
+          offset = stylesheetIndex;
+          isDiagnostics = true;
+        }
+        const [node, ancestors] = findCurrentNode(document.ast, offset);
+        let stylesheetTag = [...ancestors].find(
+          (node): node is LiquidRawTag =>
+            node.type === NodeTypes.LiquidRawTag && node.name === 'stylesheet',
+        );
+        if (isDiagnostics && 'children' in node && node.children) {
+          stylesheetTag = node.children.find(
+            (node): node is LiquidRawTag =>
+              node.type === NodeTypes.LiquidRawTag && node.name === 'stylesheet',
+          );
+        }
+
+        if (!stylesheetTag) return null;
+
+        const schemaLineNumber = textDocument.positionAt(stylesheetTag.blockStartPosition.end).line;
+        // Hacking away "same line numbers" here by prefixing the file with newlines
+        // This way params.position will be at the same line number in this fake jsonTextDocument
+        // Which means that the completions will be at the same line number in the Liquid document
+        const stylesheetString =
+          Array(schemaLineNumber).fill('\n').join('') +
+          stylesheetTag.source
+            .slice(stylesheetTag.blockStartPosition.end, stylesheetTag.blockEndPosition.start)
+            .replace(/\n$/, ''); // Remove trailing newline so parsing errors don't show up on `{% endstylesheet %}`
+        const stylesheetTextDocument = TextDocument.create(
+          textDocument.uri,
+          'json',
+          textDocument.version,
+          stylesheetString,
+        );
+        const stylesheetDocument = service.parseStylesheet(stylesheetTextDocument);
+        return [stylesheetTextDocument, stylesheetDocument];
+      }
+    }
+  }
+}

package/src/css/test/test-helpers.ts

@@ -0,0 +1,30 @@
+import {
+  CompletionItem,
+  CompletionList,
+  CompletionParams,
+  HoverParams,
+} from 'vscode-languageserver-protocol';
+import { DocumentManager } from '../../documents';
+
+export function getRequestParams(
+  documentManager: DocumentManager,
+  relativePath: string,
+  source: string,
+): HoverParams & CompletionParams {
+  const uri = `file:///root/${relativePath}`;
+  const sourceWithoutCursor = source.replace('█', '');
+  documentManager.open(uri, sourceWithoutCursor, 1);
+  const doc = documentManager.get(uri)!.textDocument;
+  const position = doc.positionAt(source.indexOf('█'));
+
+  return {
+    textDocument: { uri: uri },
+    position: position,
+  };
+}
+
+export function isCompletionList(
+  completions: null | CompletionList | CompletionItem[],
+): completions is CompletionList {
+  return completions !== null && !Array.isArray(completions);
+}

package/src/definitions/BaseDefinitionProvider.ts

@@ -0,0 +1,10 @@
+import { LiquidHtmlNode } from '@platformos/liquid-html-parser';
+import { DefinitionParams, DefinitionLink } from 'vscode-languageserver-protocol';
+
+export interface BaseDefinitionProvider {
+  definitions(
+    params: DefinitionParams,
+    node: LiquidHtmlNode,
+    ancestors: LiquidHtmlNode[],
+  ): Promise<DefinitionLink[]>;
+}

package/src/definitions/DefinitionProvider.ts

@@ -0,0 +1,48 @@
+import { findCurrentNode, SourceCodeType } from '@platformos/platformos-check-common';
+import { DefinitionLink, DefinitionParams } from 'vscode-languageserver';
+
+import { AugmentedJsonSourceCode, DocumentManager } from '../documents';
+import { BaseDefinitionProvider } from './BaseDefinitionProvider';
+import { SchemaTranslationStringDefinitionProvider } from './providers/SchemaTranslationStringDefinitionProvider';
+import { TranslationStringDefinitionProvider } from './providers/TranslationStringDefinitionProvider';
+
+export class DefinitionProvider {
+  private providers: BaseDefinitionProvider[];
+
+  constructor(
+    private documentManager: DocumentManager,
+    getDefaultLocaleSourceCode: (uri: string) => Promise<AugmentedJsonSourceCode | null>,
+    getDefaultSchemaLocaleSourceCode: (uri: string) => Promise<AugmentedJsonSourceCode | null>,
+  ) {
+    this.providers = [
+      new TranslationStringDefinitionProvider(documentManager, getDefaultLocaleSourceCode),
+      new SchemaTranslationStringDefinitionProvider(
+        documentManager,
+        getDefaultSchemaLocaleSourceCode,
+      ),
+    ];
+  }
+
+  async definitions(params: DefinitionParams): Promise<DefinitionLink[] | null> {
+    const sourceCode = this.documentManager.get(params.textDocument.uri);
+    if (
+      !sourceCode ||
+      sourceCode.type !== SourceCodeType.LiquidHtml ||
+      sourceCode.ast instanceof Error
+    ) {
+      return null;
+    }
+
+    const { textDocument } = sourceCode;
+    const [node, ancestors] = findCurrentNode(
+      sourceCode.ast,
+      textDocument.offsetAt(params.position),
+    );
+
+    const results: DefinitionLink[] = await Promise.all(
+      this.providers.map((provider) => provider.definitions(params, node, ancestors)),
+    ).then((res) => res.flat());
+
+    return results.length > 0 ? results : null;
+  }
+}