@platformos/platformos-language-server-common 0.0.2

package/src/json/hover/providers/SettingsHoverProvider.ts

@@ -0,0 +1,79 @@
+import { isError } from '@platformos/platformos-check-common';
+import { JSONPath, MarkedString } from 'vscode-json-languageservice';
+import { GetTranslationsForURI, renderTranslation, translationValue } from '../../../translations';
+import { isLiquidRequestContext, LiquidRequestContext, RequestContext } from '../../RequestContext';
+import { isSectionOrBlockFile } from '../../utils';
+import { JSONHoverProvider } from '../JSONHoverProvider';
+import { AugmentedLiquidSourceCode } from '../../../documents';
+import { isSectionOrBlockSchema } from '../../completions/providers/BlockTypeCompletionProvider';
+
+export class SettingsHoverProvider implements JSONHoverProvider {
+  constructor(private getDefaultSchemaTranslations: GetTranslationsForURI) {}
+
+  canHover(context: RequestContext, path: JSONPath): context is LiquidRequestContext {
+    return (
+      isSectionOrBlockFile(context.doc.uri) &&
+      isLiquidRequestContext(context) &&
+      path.length !== 0 &&
+      (isPresetsSettingsPath(path) || isDefaultSettingsPath(path))
+    );
+  }
+
+  async hover(context: RequestContext, path: JSONPath): Promise<MarkedString[]> {
+    if (!this.canHover(context, path)) return [];
+
+    const { doc } = context;
+    const label = await getSettingsLabel(doc, path.at(-1) as string);
+
+    if (!label) return [];
+
+    if (!label.startsWith('t:')) {
+      return [label];
+    }
+
+    return this.getDefaultSchemaTranslations(doc.uri).then((translations) => {
+      const path = label.substring(2);
+      const value = translationValue(path, translations);
+      if (!value) return undefined as any;
+
+      return [renderTranslation(value)];
+    });
+  }
+}
+
+function isPresetsSettingsPath(path: JSONPath) {
+  return (
+    path.at(0) === 'presets' &&
+    path.at(2) === 'settings' &&
+    path.at(3) !== undefined &&
+    typeof path.at(3) === 'string'
+  );
+}
+
+function isDefaultSettingsPath(path: JSONPath) {
+  return (
+    path.at(0) === 'default' &&
+    path.at(1) === 'settings' &&
+    path.at(2) !== undefined &&
+    typeof path.at(2) === 'string'
+  );
+}
+
+async function getSettingsLabel(
+  doc: AugmentedLiquidSourceCode,
+  label: string,
+): Promise<string | undefined> {
+  const schema = await doc.getSchema();
+
+  if (
+    !schema ||
+    !isSectionOrBlockSchema(schema) ||
+    isError(schema.parsed) ||
+    schema.parsed.settings === undefined ||
+    !Array.isArray(schema.parsed.settings)
+  ) {
+    return;
+  }
+
+  return schema.parsed.settings.find((setting: any) => setting?.id === label)?.label;
+}

package/src/json/hover/providers/TranslationPathHoverProvider.ts

@@ -0,0 +1,71 @@
+import { nodeAtPath } from '@platformos/platformos-check-common';
+import { JSONPath, MarkedString } from 'vscode-json-languageservice';
+import { extractParams, paramsString } from '../../../translations';
+import { isJSONRequestContext, JSONRequestContext, RequestContext } from '../../RequestContext';
+import { fileMatch } from '../../utils';
+import { JSONHoverProvider } from '../JSONHoverProvider';
+
+export class TranslationPathHoverProvider implements JSONHoverProvider {
+  private filePatterns = [/^.*\/locales\/[^\/]*\.json$/];
+
+  canHover(context: RequestContext, path: JSONPath): context is JSONRequestContext {
+    return (
+      fileMatch(context.doc.uri, this.filePatterns) &&
+      path.length > 0 &&
+      isJSONRequestContext(context)
+    );
+  }
+
+  async hover(context: RequestContext, path: JSONPath): Promise<MarkedString[]> {
+    // Redundant use for type assertion
+    if (!this.canHover(context, path)) return [];
+    const { doc } = context;
+    const ast = doc.ast;
+    const node = nodeAtPath(ast, path);
+
+    switch (true) {
+      // Because the JSON language service doesn't support composition of hover info,
+      // We have to hardcode the docs for the translation file schema here.
+      case ['zero', 'one', 'two', 'few', 'many', 'other'].includes(path.at(-1) as string): {
+        if (!node || node.type !== 'Literal' || typeof node.value !== 'string') {
+          return [`Pluralized translations should have a string value`];
+        }
+        return [contextualizedLabel(doc.uri, path.slice(0, -1), node.value)];
+      }
+
+      case path.at(-1)!.toString().endsWith('_html'): {
+        if (!node || node.type !== 'Literal' || typeof node.value !== 'string') {
+          return [`Translations ending in '_html' should have a string value`];
+        }
+        return [
+          contextualizedLabel(doc.uri, path, node.value),
+          `The '_html' suffix prevents the HTML content from being escaped.`,
+        ];
+      }
+
+      default: {
+        if (!node || node.type !== 'Literal' || typeof node.value !== 'string') {
+          return [`Translation group: ${path.join('.')}`];
+        }
+        return [contextualizedLabel(doc.uri, path, node.value)];
+      }
+    }
+  }
+}
+
+export function contextualizedLabel(
+  uri: string,
+  str: (string | number)[],
+  value: string,
+): MarkedString {
+  if (uri.includes('.schema')) {
+    return marked(`"t:${str.join('.')}"`, 'json');
+  } else {
+    const params = extractParams(value);
+    return marked(`{{ '${str.join('.')}' | t${paramsString(params)} }}`, 'liquid');
+  }
+}
+
+function marked(value: string, language = 'liquid'): { language: string; value: string } {
+  return { language, value };
+}

package/src/json/schemaSettings.spec.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest';
+import { getSectionBlockByName, schemaSettingsPropertyCompletionItems } from './schemaSettings';
+
+describe('Unit: schemaSettings', () => {
+  const translations = {
+    title: 'Example Title',
+  };
+
+  describe('schemaSettingsPropertyCompletionItems', () => {
+    it('returns completion item if setting has a valid id', () => {
+      const completions = schemaSettingsPropertyCompletionItems(
+        [
+          {
+            id: 'setting-id',
+            label: 'Setting Label',
+          },
+        ],
+        translations,
+      );
+
+      expect(completions).to.have.lengthOf(1);
+      expect(completions).toContainEqual(
+        expect.objectContaining({
+          insertText: '"setting-id"',
+          documentation: expect.objectContaining({
+            value: 'Setting Label',
+          }),
+        }),
+      );
+    });
+
+    it('returns translated completion item', () => {
+      const completions = schemaSettingsPropertyCompletionItems(
+        [
+          {
+            id: 'setting-id',
+            label: 't:title',
+          },
+        ],
+
+        translations,
+      );
+
+      expect(completions).to.have.lengthOf(1);
+      expect(completions).toContainEqual(
+        expect.objectContaining({
+          insertText: '"setting-id"',
+          documentation: expect.objectContaining({
+            value: 'Example Title',
+          }),
+        }),
+      );
+    });
+
+    it("does not return completion item if setting doesn't have id", () => {
+      const completions = schemaSettingsPropertyCompletionItems(
+        [
+          {
+            label: 'Setting Label',
+          },
+        ],
+        translations,
+      );
+      expect(completions).to.have.lengthOf(0);
+    });
+  });
+
+  describe('getSectionBlockByName', () => {
+    it('does not return block if parsedSchema is empty', () => {
+      expect(getSectionBlockByName(undefined, 'block-name')).toBeUndefined();
+    });
+
+    it('does not return block if it is not a section block is empty', () => {
+      expect(
+        getSectionBlockByName(
+          {
+            blocks: [
+              {
+                type: 'block-name',
+              },
+            ],
+          },
+          'block-name',
+        ),
+      ).toBeUndefined();
+    });
+
+    it('does return block if it is a section block is empty', () => {
+      const block = {
+        type: 'block-name',
+        name: 'block name',
+      };
+      expect(
+        getSectionBlockByName(
+          {
+            blocks: [block],
+          },
+          'block-name',
+        ),
+      ).toBe(block);
+    });
+  });
+});

package/src/json/schemaSettings.ts

@@ -0,0 +1,53 @@
+import { CompletionItemKind, MarkupKind } from 'vscode-json-languageservice';
+import { renderTranslation, translationValue } from '../translations';
+import { Section, Setting, Translations } from '@platformos/platformos-check-common';
+import { JSONCompletionItem } from './completions/JSONCompletionProvider';
+
+export function schemaSettingsPropertyCompletionItems(
+  parsedSettings: Partial<Setting.Any>[],
+  translations: Translations,
+): JSONCompletionItem[] {
+  return parsedSettings
+    .filter((setting) => setting.id)
+    .map((setting) => {
+      let docValue = '';
+
+      if (setting.label) {
+        if (setting.label.startsWith('t:')) {
+          const translation = translationValue(setting.label.substring(2), translations);
+
+          if (translation) {
+            docValue = renderTranslation(translation);
+          }
+        } else {
+          docValue = setting.label;
+        }
+      }
+
+      const completionText = setting.id ? `"${setting.id}"` : '';
+
+      return {
+        kind: CompletionItemKind.Property,
+        label: completionText,
+        insertText: completionText,
+        documentation: {
+          kind: MarkupKind.Markdown,
+          value: docValue,
+        },
+      };
+    });
+}
+
+/*
+ * JSONCompletionProviders have to be more fault tolerant since there can be errors
+ * while typing the schema. This is why parsedSchemas (untyped) are used instead of
+ * validSchemas (typed).
+ */
+export function getSectionBlockByName(
+  parsedSchema: any = {},
+  blockName: string,
+): Partial<Section.LocalBlock> | undefined {
+  return parsedSchema.blocks
+    ?.filter((block: any) => 'name' in block)
+    ?.find((block: any) => block.type === blockName);
+}

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

@@ -0,0 +1,68 @@
+import {
+  CompletionItem,
+  CompletionList,
+  CompletionParams,
+  HoverParams,
+} from 'vscode-languageserver-protocol';
+import { DocumentManager } from '../../documents';
+import { GetThemeBlockNames } from '../JSONContributions';
+import { JSONLanguageService } from '../JSONLanguageService';
+import { SourceCodeType } from '@platformos/platformos-check-common';
+import { GetTranslationsForURI } from '../../translations';
+
+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);
+}
+
+export function mockJSONLanguageService(
+  rootUri: string,
+  documentManager: DocumentManager,
+  getDefaultSchemaTranslations: GetTranslationsForURI = async () => ({}),
+  getThemeBlockNames: GetThemeBlockNames = async () => [],
+) {
+  return new JSONLanguageService(
+    documentManager,
+    {
+      schemas: async () => [
+        {
+          uri: 'https://shopify.dev/block-schema.json',
+          schema: JSON.stringify({
+            $schema: 'http://json-schema.org/draft-07/schema#',
+          }),
+          fileMatch: ['**/{blocks,sections}/*.liquid'],
+        },
+      ],
+    },
+    getDefaultSchemaTranslations,
+    async () => 'theme',
+    getThemeBlockNames,
+    async (_uri: string, name: string) => {
+      const blockUri = `${rootUri}/blocks/${name}.liquid`;
+      const doc = documentManager.get(blockUri);
+      if (!doc || doc.type !== SourceCodeType.LiquidHtml) {
+        return;
+      }
+      return doc.getSchema();
+    },
+    async () => rootUri,
+  );
+}

package/src/json/utils.ts

@@ -0,0 +1,30 @@
+import { LiquidHtmlNode, LiquidRawTag } from '@platformos/liquid-html-parser';
+import { SourceCodeType, visit, Visitor } from '@platformos/platformos-check-common';
+
+export function fileMatch(uri: string, patterns: RegExp[]): boolean {
+  return patterns.some((pattern) => pattern.test(uri));
+}
+
+export function isSectionFile(uri: string): boolean {
+  return /\/sections\/[^/]*\.liquid$/.test(uri);
+}
+
+export function isBlockFile(uri: string): boolean {
+  return /\/blocks\/[^/]*\.liquid$/.test(uri);
+}
+
+export function isSectionOrBlockFile(uri: string): boolean {
+  return isSectionFile(uri) || isBlockFile(uri);
+}
+
+export async function findSchemaNode(ast: LiquidHtmlNode): Promise<LiquidRawTag | undefined> {
+  const nodes = await visit(ast, {
+    async LiquidRawTag(node) {
+      if (node.name === 'schema') {
+        return node;
+      }
+    },
+  } as Visitor<SourceCodeType.LiquidHtml, LiquidRawTag>);
+
+  return nodes[0];
+}

package/src/linkedEditingRanges/BaseLinkedEditingRangesProvider.ts

@@ -0,0 +1,10 @@
+import { LiquidHtmlNode } from '@platformos/liquid-html-parser';
+import { LinkedEditingRangeParams, LinkedEditingRanges } from 'vscode-languageserver';
+
+export interface BaseLinkedEditingRangesProvider {
+  linkedEditingRanges: (
+    node: LiquidHtmlNode | null,
+    ancestors: LiquidHtmlNode[] | null,
+    params: LinkedEditingRangeParams,
+  ) => Promise<LinkedEditingRanges | null>;
+}

package/src/linkedEditingRanges/LinkedEditingRangesProvider.ts

@@ -0,0 +1,40 @@
+import { LiquidHtmlNode, SourceCodeType } from '@platformos/platformos-check-common';
+import { LinkedEditingRangeParams, LinkedEditingRanges } from 'vscode-languageserver';
+import { DocumentManager } from '../documents';
+import { findCurrentNode } from '@platformos/platformos-check-common';
+import { BaseLinkedEditingRangesProvider } from './BaseLinkedEditingRangesProvider';
+import { EmptyHtmlTagLinkedRangesProvider, HtmlTagNameLinkedRangesProvider } from './providers';
+
+export class LinkedEditingRangesProvider {
+  private providers: BaseLinkedEditingRangesProvider[];
+
+  constructor(public documentManager: DocumentManager) {
+    this.providers = [
+      new HtmlTagNameLinkedRangesProvider(documentManager),
+      new EmptyHtmlTagLinkedRangesProvider(documentManager),
+    ];
+  }
+
+  async linkedEditingRanges(params: LinkedEditingRangeParams): Promise<LinkedEditingRanges | null> {
+    const document = this.documentManager.get(params.textDocument.uri);
+    if (!document || document.type !== SourceCodeType.LiquidHtml) {
+      return null;
+    }
+
+    let currentNode: LiquidHtmlNode | null = null;
+    let ancestors: LiquidHtmlNode[] | null = null;
+
+    if (!(document.ast instanceof Error)) {
+      [currentNode, ancestors] = findCurrentNode(
+        document.ast,
+        document.textDocument.offsetAt(params.position),
+      );
+    }
+
+    const promises = this.providers.map((p) =>
+      p.linkedEditingRanges(currentNode, ancestors, params).catch(() => null),
+    );
+    const results = await Promise.all(promises);
+    return results.find(Boolean) ?? null;
+  }
+}

package/src/linkedEditingRanges/index.ts

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

package/src/linkedEditingRanges/providers/EmptyHtmlTagLinkedRangesProvider.spec.ts

@@ -0,0 +1,74 @@
+import { describe, beforeEach, it, expect, assert } from 'vitest';
+import { LinkedEditingRangesProvider } from '..';
+import { DocumentManager } from '../../documents';
+import { LinkedEditingRangeParams } from 'vscode-languageserver';
+import { Position } from 'vscode-languageserver-protocol';
+import { htmlElementNameWordPattern } from '../wordPattern';
+
+describe('Module: EmptyHtmlTagLinkedRangesProvider', () => {
+  let documentManager: DocumentManager;
+  let provider: LinkedEditingRangesProvider;
+
+  beforeEach(() => {
+    documentManager = new DocumentManager();
+    provider = new LinkedEditingRangesProvider(documentManager);
+  });
+
+  it('should return null for non-existent documents', async () => {
+    const params: LinkedEditingRangeParams = {
+      textDocument: { uri: 'file:///path/to/non-existent-document.liquid' },
+      position: Position.create(0, 0),
+    };
+
+    const result = await provider.linkedEditingRanges(params);
+    expect(result).toBeNull();
+  });
+
+  it('should return null for non-empty HTML tags', async () => {
+    const params: LinkedEditingRangeParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 0),
+    };
+
+    documentManager.open(params.textDocument.uri, '<div></div>', 1);
+
+    const result = await provider.linkedEditingRanges(params);
+    expect(result).toBeNull();
+  });
+
+  it('should return linked editing ranges for empty HTML tags', async () => {
+    const params: LinkedEditingRangeParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 1), // position within the empty tag
+    };
+
+    documentManager.open(params.textDocument.uri, '<></>', 1);
+    const document = documentManager.get(params.textDocument.uri)?.textDocument;
+    assert(document);
+
+    const result = await provider.linkedEditingRanges(params);
+    assert(result);
+    assert(result.ranges[0]);
+    assert(result.ranges[1]);
+    expect(result.ranges[0]).not.to.eql(result.ranges[1]);
+
+    const startTag = document.getText(result.ranges[0]);
+    const endTag = document.getText(result.ranges[1]);
+
+    expect(startTag).toBe('');
+    expect(endTag).toBe('');
+    expect(result.wordPattern).toBe(htmlElementNameWordPattern);
+  });
+
+  it('should return null for positions not within empty HTML tags', async () => {
+    const params: LinkedEditingRangeParams = {
+      textDocument: { uri: 'file:///path/to/document.liquid' },
+      position: Position.create(0, 0), // position outside the tag
+    };
+
+    documentManager.open(params.textDocument.uri, '<></>', 1);
+
+    const result = await provider.linkedEditingRanges(params);
+    expect(result).toBeNull();
+  });
+});

package/src/linkedEditingRanges/providers/EmptyHtmlTagLinkedRangesProvider.ts

@@ -0,0 +1,47 @@
+import { LiquidHtmlNode } from '@platformos/liquid-html-parser';
+import {
+  LinkedEditingRangeParams,
+  LinkedEditingRanges,
+  Position,
+  Range,
+} from 'vscode-languageserver';
+import { DocumentManager } from '../../documents';
+import { BaseLinkedEditingRangesProvider } from '../BaseLinkedEditingRangesProvider';
+import { htmlElementNameWordPattern } from '../wordPattern';
+
+export class EmptyHtmlTagLinkedRangesProvider implements BaseLinkedEditingRangesProvider {
+  constructor(public documentManager: DocumentManager) {}
+
+  async linkedEditingRanges(
+    node: LiquidHtmlNode | null,
+    ancestors: LiquidHtmlNode[] | null,
+    { textDocument: { uri }, position }: LinkedEditingRangeParams,
+  ): Promise<LinkedEditingRanges | null> {
+    // We're strictly checking for <></> and cursor in either branch, that's a parse error
+    // ... but it's fine because <></> is rather easy to find.
+    if (node !== null || ancestors !== null) return null;
+    const document = this.documentManager.get(uri);
+    const textDocument = document?.textDocument;
+
+    if (!document || !textDocument) return null;
+    const openRange = Range.create(
+      Position.create(position.line, position.character - 1),
+      Position.create(position.line, position.character + 1),
+    );
+    if (!['<>', '< '].includes(textDocument.getText(openRange))) return null;
+
+    const closeOffset = document.source.indexOf('</>', textDocument.offsetAt(position));
+    if (closeOffset === -1) return null;
+
+    const afterSlashOffset = closeOffset + 2;
+    const afterSlashPosition = textDocument.positionAt(afterSlashOffset);
+
+    return {
+      ranges: [
+        Range.create(position, position),
+        Range.create(afterSlashPosition, afterSlashPosition),
+      ],
+      wordPattern: htmlElementNameWordPattern,
+    };
+  }
+}

package/src/linkedEditingRanges/providers/HtmlTagNameLinkedRangesProvider.spec.ts

@@ -0,0 +1,102 @@
+import { describe, beforeEach, it, expect, assert } from 'vitest';
+import { LinkedEditingRangesProvider } from '../LinkedEditingRangesProvider';
+import { DocumentManager } from '../../documents';
+import { LinkedEditingRangeParams } from 'vscode-languageserver';
+import { Position } from 'vscode-languageserver-protocol';
+import { htmlElementNameWordPattern } from '../wordPattern';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+
+describe('Module: HtmlTagNameLinkedRangesProvider', () => {
+  const uri = 'file:///path/to/document.liquid';
+  let documentManager: DocumentManager;
+  let provider: LinkedEditingRangesProvider;
+  let params: LinkedEditingRangeParams;
+  let document: TextDocument;
+  let source: string;
+
+  beforeEach(() => {
+    documentManager = new DocumentManager();
+    provider = new LinkedEditingRangesProvider(documentManager);
+  });
+
+  describe('When the HTML tag is closed and the cursor is inside the tag name', () => {
+    beforeEach(() => {
+      source = '<div id="main"><img><div></div></div>';
+      documentManager.open(uri, source, 1);
+      document = documentManager.get(uri)?.textDocument!;
+    });
+
+    it('should return linked editing ranges for HTML tag names', async () => {
+      params = {
+        textDocument: { uri },
+        position: document.positionAt(2), // position within the opening div#main tag name
+      };
+
+      const result = await provider.linkedEditingRanges(params);
+      assert(result);
+      assert(result.ranges[0]);
+      assert(result.ranges[1]);
+      expect(result.ranges[0]).not.to.eql(result.ranges[1]);
+
+      const startTagName = document.getText(result.ranges[0]);
+      const endTagName = document.getText(result.ranges[1]);
+
+      expect(startTagName).toBe('div');
+      expect(endTagName).toBe('div');
+      expect(result.wordPattern).toBe(htmlElementNameWordPattern);
+    });
+
+    it('should return linked editing ranges for closing HTML tag names', async () => {
+      params = {
+        textDocument: { uri },
+        position: document.positionAt(source.indexOf('</div>') + 2), // position within the closing div tag name
+      };
+
+      const result = await provider.linkedEditingRanges(params);
+      assert(result);
+      assert(result.ranges[0]);
+      assert(result.ranges[1]);
+
+      const startTagName = document.getText(result.ranges[0]);
+      const endTagName = document.getText(result.ranges[1]);
+
+      expect(startTagName).toBe('div');
+      expect(endTagName).toBe('div');
+      expect(result.wordPattern).toBe(htmlElementNameWordPattern);
+    });
+  });
+
+  describe('When The HTML tag name is dangling', () => {
+    beforeEach(() => {
+      // This is acceptable Liquid. We allow folks to have an unclosed HTML
+      // element inside conditional blocks.
+      source = `
+        {% if cond %}
+          <div>
+        {% endif %}
+      `;
+      documentManager.open(uri, source, 1);
+      document = documentManager.get(uri)?.textDocument!;
+    });
+
+    it('should not return linked editing ranges', async () => {
+      params = {
+        textDocument: { uri },
+        position: document.positionAt(source.indexOf('<div>') + 1),
+      };
+      const result = await provider.linkedEditingRanges(params);
+      expect(result).toBeNull();
+    });
+  });
+
+  it('should return null for positions not within HTML tag names', async () => {
+    documentManager.open(uri, '<div></div>', 1);
+    params = {
+      textDocument: { uri },
+      position: Position.create(0, 0), // position outside the tag name
+    };
+
+    const result = await provider.linkedEditingRanges(params);
+    expect(result).toBeNull();
+  });
+});