@platformos/platformos-language-server-common 0.0.2

package/src/documentHighlights/BaseDocumentHighlightsProvider.ts

@@ -0,0 +1,10 @@
+import { DocumentHighlight, DocumentHighlightParams } from 'vscode-languageserver';
+import { LiquidHtmlNode } from '@platformos/platformos-check-common';
+
+export interface BaseDocumentHighlightsProvider {
+  documentHighlights: (
+    node: LiquidHtmlNode,
+    ancestors: LiquidHtmlNode[],
+    params: DocumentHighlightParams,
+  ) => Promise<DocumentHighlight[] | null>;
+}

package/src/documentHighlights/DocumentHighlightsProvider.ts

@@ -0,0 +1,54 @@
+import { SourceCodeType } from '@platformos/platformos-check-common';
+import { DocumentHighlight, DocumentHighlightParams } from 'vscode-languageserver';
+import { DocumentManager } from '../documents';
+import { findCurrentNode } from '@platformos/platformos-check-common';
+import { BaseDocumentHighlightsProvider } from './BaseDocumentHighlightsProvider';
+import {
+  HtmlTagNameDocumentHighlightsProvider,
+  LiquidBlockTagDocumentHighlightsProvider,
+} from './providers';
+
+/**
+ * The default behaviour for documentHighlights is to highlight every occurence
+ * of the word under the cursor. We want to prevent that since it doesn't really
+ * make sense in our context. We don't want to highlight every occurence of
+ * `assign` when you put your cursor over it.
+ */
+export const PREVENT_DEFAULT: DocumentHighlight[] = [];
+
+/**
+ * Informs the client to highlight ranges in a document.
+ *
+ * This is a pretty abstract concept, but you could use it to highlight all
+ * instances of a variable in a template, to highlight the matching
+ * opening/closing liquid tags, html tags, etc.
+ */
+export class DocumentHighlightsProvider {
+  private providers: BaseDocumentHighlightsProvider[];
+
+  constructor(public documentManager: DocumentManager) {
+    this.providers = [
+      new HtmlTagNameDocumentHighlightsProvider(documentManager),
+      new LiquidBlockTagDocumentHighlightsProvider(documentManager),
+    ];
+  }
+
+  async documentHighlights(params: DocumentHighlightParams): Promise<DocumentHighlight[] | null> {
+    const document = this.documentManager.get(params.textDocument.uri);
+    if (!document || document.type !== SourceCodeType.LiquidHtml || document.ast instanceof Error) {
+      return PREVENT_DEFAULT;
+    }
+
+    const [currentNode, ancestors] = findCurrentNode(
+      document.ast,
+      document.textDocument.offsetAt(params.position),
+    );
+
+    const promises = this.providers.map((p) =>
+      p.documentHighlights(currentNode, ancestors, params).catch(() => null),
+    );
+    const results = await Promise.all(promises);
+
+    return results.find(Boolean) ?? PREVENT_DEFAULT;
+  }
+}

package/src/documentHighlights/index.ts

@@ -0,0 +1 @@
+export { DocumentHighlightsProvider, PREVENT_DEFAULT } from './DocumentHighlightsProvider';

package/src/documentHighlights/providers/HtmlTagNameDocumentHighlightsProvider.spec.ts

@@ -0,0 +1,94 @@
+import { assert, beforeEach, describe, expect, it } from 'vitest';
+import { DocumentHighlightParams } from 'vscode-languageserver';
+import { Position } from 'vscode-languageserver-protocol';
+import { DocumentHighlightsProvider, PREVENT_DEFAULT } from '../DocumentHighlightsProvider';
+import { DocumentManager } from '../../documents';
+
+describe('Module: HtmlTagNameDocumentHighlightsProvider', () => {
+  let documentManager: DocumentManager;
+  let provider: DocumentHighlightsProvider;
+
+  beforeEach(() => {
+    documentManager = new DocumentManager();
+    provider = new DocumentHighlightsProvider(documentManager);
+  });
+
+  it('should return [] for non-existent documents', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/non-existent-document.liquid' },
+      position: Position.create(0, 0),
+    };
+
+    const result = await provider.documentHighlights(params);
+    expect(result).to.equal(PREVENT_DEFAULT);
+  });
+
+  it('should return [] for non-HTML documents', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 0),
+    };
+
+    documentManager.open(params.textDocument.uri, 'Sample text content', 1);
+
+    const result = await provider.documentHighlights(params);
+    expect(result).to.equal(PREVENT_DEFAULT);
+  });
+
+  it('should return document highlight ranges for HTML tag names', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 3), // position within the tag name
+    };
+
+    documentManager.open(params.textDocument.uri, '<div></div>', 1);
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+    expect(result[0]).not.to.eql(result[1]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+
+    expect(startTagName).toBe('div');
+    expect(endTagName).toBe('div');
+  });
+
+  it('should return document highlight ranges for closing HTML tag names', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 16), // position within the closing div tag name
+    };
+
+    documentManager.open(params.textDocument.uri, '<div><img><div></div></div>', 1);
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+
+    expect(startTagName).toBe('div');
+    expect(endTagName).toBe('div');
+  });
+
+  it('return [] for positions not within HTML tag names', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 0), // position outside the tag name
+    };
+
+    documentManager.open(params.textDocument.uri, '<div></div>', 1);
+
+    const result = await provider.documentHighlights(params);
+    expect(result).to.equal(PREVENT_DEFAULT);
+  });
+});

package/src/documentHighlights/providers/HtmlTagNameDocumentHighlightsProvider.ts

@@ -0,0 +1,22 @@
+import { LiquidHtmlNode } from '@platformos/liquid-html-parser';
+import { DocumentHighlightParams } from 'vscode-languageserver';
+import { DocumentManager } from '../../documents';
+import { BaseDocumentHighlightsProvider } from '../BaseDocumentHighlightsProvider';
+import { getHtmlElementNameRanges } from '../../utils/htmlTagNames';
+
+export class HtmlTagNameDocumentHighlightsProvider implements BaseDocumentHighlightsProvider {
+  constructor(public documentManager: DocumentManager) {}
+
+  async documentHighlights(
+    node: LiquidHtmlNode,
+    ancestors: LiquidHtmlNode[],
+    params: DocumentHighlightParams,
+  ) {
+    const textDocument = this.documentManager.get(params.textDocument.uri)?.textDocument;
+    if (!textDocument) return null;
+
+    const ranges = getHtmlElementNameRanges(node, ancestors, params, textDocument);
+    if (!ranges) return null;
+    return ranges.map((range) => ({ range }));
+  }
+}

package/src/documentHighlights/providers/LiquidBlockTagDocumentHighlightsProvider.spec.ts

@@ -0,0 +1,188 @@
+import { assert, beforeEach, describe, expect, it } from 'vitest';
+import { DocumentHighlightParams } from 'vscode-languageserver';
+import { Position } from 'vscode-languageserver-protocol';
+import { DocumentHighlightsProvider, PREVENT_DEFAULT } from '../DocumentHighlightsProvider';
+import { DocumentManager } from '../../documents';
+
+describe('Module: LiquidBlockTagDocumentHighlightsProvider', () => {
+  let documentManager: DocumentManager;
+  let provider: DocumentHighlightsProvider;
+
+  beforeEach(() => {
+    documentManager = new DocumentManager();
+    provider = new DocumentHighlightsProvider(documentManager);
+  });
+
+  it('should return document highlight ranges for liquid blocks', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 4), // position within the tag name
+    };
+
+    documentManager.open(params.textDocument.uri, '{% form "cart", cart %}...{% endform %}', 1);
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+    expect(result[0]).not.to.eql(result[1]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+
+    expect(startTagName).toBe('form');
+    expect(endTagName).toBe('endform');
+  });
+
+  it('should return document highlight ranges for liquid conditionals', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 4),
+    };
+
+    documentManager.open(
+      params.textDocument.uri,
+      '{% if cond %}...{% elsif cond %}...{% else %}...{% endif %}',
+      1,
+    );
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+    assert(result[2]);
+    assert(result[3]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+    const branch1TagName = document.getText(result[2].range);
+    const branch2TagName = document.getText(result[3].range);
+
+    expect(startTagName).toBe('if');
+    expect(endTagName).toBe('endif');
+    expect(branch1TagName).toBe('elsif');
+    expect(branch2TagName).toBe('else');
+  });
+
+  it('should return document highlight ranges for liquid case statements', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 4),
+    };
+
+    documentManager.open(
+      params.textDocument.uri,
+      `{% case thing %}
+         {% when 'foo' %}...
+         {% when 'bar' %}...
+         {% else %}...
+       {% endcase %}`,
+      1,
+    );
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+    assert(result[2]);
+    assert(result[3]);
+    assert(result[4]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+    const branch1TagName = document.getText(result[2].range);
+    const branch2TagName = document.getText(result[3].range);
+    const branch3TagName = document.getText(result[4].range);
+
+    expect(startTagName).toBe('case');
+    expect(endTagName).toBe('endcase');
+    expect(branch1TagName).toBe('when');
+    expect(branch2TagName).toBe('when');
+    expect(branch3TagName).toBe('else');
+  });
+
+  it('should return document highlight ranges for LiquidRawTags tags', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 4),
+    };
+
+    documentManager.open(params.textDocument.uri, '{% raw %}...{% endraw %}', 1);
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+
+    expect(startTagName).toBe('raw');
+    expect(endTagName).toBe('endraw');
+  });
+
+  it('should return document highlight ranges for liquid comment tags', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 4),
+    };
+
+    documentManager.open(params.textDocument.uri, '{% comment %}...{% endcomment %}', 1);
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+
+    expect(startTagName).toBe('comment');
+    expect(endTagName).toBe('endcomment');
+  });
+
+  it('should return the correct highlights inside liquid liquid tags', async () => {
+    const params: DocumentHighlightParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(1, 10),
+    };
+
+    documentManager.open(
+      params.textDocument.uri,
+      `{% liquid
+         if cond
+           echo foo
+         else
+           echo bar
+         endif
+       %}`,
+      1,
+    );
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.documentHighlights(params);
+    assert(result);
+    assert(result[0]);
+    assert(result[1]);
+    assert(result[2]);
+
+    const startTagName = document.getText(result[0].range);
+    const endTagName = document.getText(result[1].range);
+    const branch1TagName = document.getText(result[2].range);
+
+    expect(startTagName).toBe('if');
+    expect(endTagName).toBe('endif');
+    expect(branch1TagName).toBe('else');
+  });
+});

package/src/documentHighlights/providers/LiquidBlockTagDocumentHighlightsProvider.ts

@@ -0,0 +1,73 @@
+import {
+  LiquidBranch,
+  LiquidHtmlNode,
+  LiquidRawTag,
+  LiquidTag,
+  NodeTypes,
+} from '@platformos/liquid-html-parser';
+import { DocumentHighlightParams, Range } from 'vscode-languageserver';
+import { DocumentManager } from '../../documents';
+import { BaseDocumentHighlightsProvider } from '../BaseDocumentHighlightsProvider';
+
+export class LiquidBlockTagDocumentHighlightsProvider implements BaseDocumentHighlightsProvider {
+  constructor(public documentManager: DocumentManager) {}
+
+  async documentHighlights(
+    node: LiquidHtmlNode,
+    ancestors: LiquidHtmlNode[],
+    params: DocumentHighlightParams,
+  ) {
+    const textDocument = this.documentManager.get(params.textDocument.uri)?.textDocument;
+    if (!textDocument) return null;
+
+    if (isLiquidBranch(node)) {
+      node = ancestors.at(-1)!;
+    }
+
+    if (!isLiquidBlock(node) || !node.blockEndPosition) {
+      return null;
+    }
+
+    const nameOffset = node.source.indexOf(node.name, node.blockStartPosition.start);
+    const endblockNameOffset = node.source.indexOf('end' + node.name, node.blockEndPosition.start);
+
+    const ranges: Range[] = [
+      Range.create(
+        textDocument.positionAt(nameOffset),
+        textDocument.positionAt(nameOffset + node.name.length),
+      ),
+      Range.create(
+        textDocument.positionAt(endblockNameOffset),
+        // "end" is 3 characters, end$name is 3 + node.name.length.
+        textDocument.positionAt(endblockNameOffset + 3 + node.name.length),
+      ),
+    ];
+
+    // highlighting the elsif/else branches as well
+    if (isLiquidTag(node) && node.children && node.children.every(isLiquidBranch)) {
+      for (const branch of node.children.filter((x) => x.name !== null)) {
+        const branchNameOffset = node.source.indexOf(branch.name!, branch.blockStartPosition.start);
+        ranges.push(
+          Range.create(
+            textDocument.positionAt(branchNameOffset),
+            textDocument.positionAt(branchNameOffset + branch.name!.length),
+          ),
+        );
+      }
+    }
+
+    return ranges.map((range) => ({ range }));
+  }
+}
+
+function isLiquidBranch(node: LiquidHtmlNode): node is LiquidBranch {
+  return node.type === NodeTypes.LiquidBranch;
+}
+
+function isLiquidBlock(node: LiquidHtmlNode): node is LiquidTag | LiquidRawTag {
+  return node.type === NodeTypes.LiquidTag || node.type === NodeTypes.LiquidRawTag;
+}
+
+function isLiquidTag(node: LiquidHtmlNode): node is LiquidTag {
+  return node.type === NodeTypes.LiquidTag;
+}

package/src/documentHighlights/providers/index.ts

@@ -0,0 +1,2 @@
+export { HtmlTagNameDocumentHighlightsProvider } from './HtmlTagNameDocumentHighlightsProvider';
+export { LiquidBlockTagDocumentHighlightsProvider } from './LiquidBlockTagDocumentHighlightsProvider';

package/src/documentLinks/DocumentLinksProvider.spec.ts

@@ -0,0 +1,66 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { DocumentManager } from '../documents';
+import { DocumentLinksProvider } from './DocumentLinksProvider';
+import { DocumentsLocator, TranslationProvider } from '@platformos/platformos-common';
+import { MockFileSystem } from '@platformos/platformos-check-common/src/test';
+
+describe('DocumentLinksProvider', () => {
+  let documentManager: DocumentManager;
+  let documentLinksProvider: DocumentLinksProvider;
+  let documentsLocator: DocumentsLocator;
+  let fs: MockFileSystem;
+  let rootUri: string;
+  let uriString: string;
+
+  beforeEach(() => {
+    documentManager = new DocumentManager();
+    fs = new MockFileSystem({
+      'path/to/project/app/lib/commands/apply.liquid': 'apply content',
+      'path/to/project/app/views/apply_view.liquid': 'apply view content',
+    });
+    documentsLocator = new DocumentsLocator(fs);
+    documentLinksProvider = new DocumentLinksProvider(
+      documentManager,
+      async () => rootUri,
+      documentsLocator,
+      new TranslationProvider(fs),
+    );
+  });
+
+  it('should return an empty array for non-LiquidHtml documents', async () => {
+    uriString = 'file:///path/to/non-liquid-html-document.txt';
+    rootUri = 'file:///path/to/project';
+
+    documentManager.open(uriString, 'Sample plain text content', 1);
+
+    const result = await documentLinksProvider.documentLinks(uriString);
+    expect(result).toEqual([]);
+  });
+
+  it('should return an empty array for non-existent documents', async () => {
+    uriString = 'file:///path/to/non-existent-document.txt';
+    rootUri = 'file:///path/to/project';
+
+    const result = await documentLinksProvider.documentLinks(uriString);
+    expect(result).toEqual([]);
+  });
+
+  it('should return a list of document links with correct URLs for a LiquidHtml document', async () => {
+    uriString = 'file:///path/to/liquid-html-document.liquid';
+    rootUri = 'file:///path/to/project';
+
+    const liquidHtmlContent = `
+      {% function a = 'commands/apply' %}
+    `;
+
+    documentManager.open(uriString, liquidHtmlContent, 1);
+
+    const result = await documentLinksProvider.documentLinks(uriString);
+    const expectedUrls = ['file:///path/to/project/app/lib/commands/apply.liquid'];
+
+    expect(result.length).toBe(expectedUrls.length);
+    for (let i = 0; i < expectedUrls.length; i++) {
+      expect(result[i].target).toBe(expectedUrls[i]);
+    }
+  });
+});

package/src/documentLinks/DocumentLinksProvider.ts

@@ -0,0 +1,123 @@
+import { LiquidHtmlNode, LiquidString, NamedTags, NodeTypes } from '@platformos/liquid-html-parser';
+import { SourceCodeType } from '@platformos/platformos-check-common';
+import { DocumentLink, Range } from 'vscode-languageserver';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { URI, Utils } from 'vscode-uri';
+
+import { visit, Visitor } from '@platformos/platformos-check-common';
+import { DocumentManager } from '../documents';
+import { FindThemeRootURI } from '../internal-types';
+import { DocumentsLocator, TranslationProvider } from '@platformos/platformos-common';
+
+export class DocumentLinksProvider {
+  constructor(
+    private documentManager: DocumentManager,
+    private findThemeRootURI: FindThemeRootURI,
+    private documentsLocator: DocumentsLocator,
+    private translationProvider: TranslationProvider,
+  ) {}
+
+  async documentLinks(uriString: string): Promise<DocumentLink[]> {
+    const sourceCode = this.documentManager.get(uriString);
+    if (
+      !sourceCode ||
+      sourceCode.type !== SourceCodeType.LiquidHtml ||
+      sourceCode.ast instanceof Error
+    ) {
+      return [];
+    }
+
+    const rootUri = await this.findThemeRootURI(uriString);
+    if (!rootUri) {
+      return [];
+    }
+
+    const visitor = documentLinksVisitor(
+      sourceCode.textDocument,
+      URI.parse(rootUri),
+      this.documentsLocator,
+      this.translationProvider,
+    );
+    return visit(sourceCode.ast, visitor);
+  }
+}
+
+function documentLinksVisitor(
+  textDocument: TextDocument,
+  root: URI,
+  documentsLocator: DocumentsLocator,
+  translationProvider: TranslationProvider,
+): Visitor<SourceCodeType.LiquidHtml, DocumentLink> {
+  return {
+    async LiquidTag(node) {
+      if (
+        (node.name === 'render' || node.name === 'include') &&
+        typeof node.markup !== 'string' &&
+        isLiquidString(node.markup.snippet)
+      ) {
+        const snippet = node.markup.snippet;
+        return DocumentLink.create(
+          range(textDocument, snippet),
+          await documentsLocator.locate(root, node.name, snippet.value),
+        );
+      }
+
+      if (
+        node.name === 'function' &&
+        typeof node.markup !== 'string' &&
+        isLiquidString(node.markup.partial)
+      ) {
+        const snippet = node.markup.partial;
+        return DocumentLink.create(
+          range(textDocument, snippet),
+          await documentsLocator.locate(root, node.name, snippet.value),
+        );
+      }
+
+      if (
+        node.name === 'graphql' &&
+        typeof node.markup !== 'string' &&
+        'graphql' in node.markup &&
+        isLiquidString(node.markup.graphql)
+      ) {
+        const snippet = node.markup.graphql;
+        return DocumentLink.create(
+          range(textDocument, snippet),
+          await documentsLocator.locate(root, node.name, snippet.value),
+        );
+      }
+    },
+    async LiquidVariable(node) {
+      if (!isLiquidString(node.expression)) {
+        return;
+      }
+
+      if (node.filters.some(({ name }) => ['t', 'translate'].includes(name))) {
+        const [filePath] = await translationProvider.findTranslationFile(
+          root,
+          node.expression.value,
+          'en',
+        );
+        return DocumentLink.create(range(textDocument, node), filePath);
+      }
+
+      if (node.filters.length > 0 && node.filters[0].name === 'asset_url') {
+        const expression = node.expression;
+        return DocumentLink.create(
+          range(textDocument, node.expression),
+          await documentsLocator.locate(root, 'asset', expression.value),
+        );
+      }
+    },
+  };
+}
+
+function range(textDocument: TextDocument, node: { position: LiquidHtmlNode['position'] }): Range {
+  const start = textDocument.positionAt(node.position.start + 1);
+  const end = textDocument.positionAt(node.position.end - 1);
+  return Range.create(start, end);
+}
+
+function isLiquidString(node: LiquidHtmlNode): node is LiquidString {
+  return node.type === NodeTypes.String;
+}

package/src/documentLinks/index.ts

@@ -0,0 +1 @@
+export { DocumentLinksProvider } from './DocumentLinksProvider';