@platformos/platformos-language-server-common 0.0.2

package/src/json/JSONLanguageService.spec.ts

@@ -0,0 +1,424 @@
+import { Mode, Translations } from '@platformos/platformos-check-common';
+import { assert, beforeEach, describe, expect, it } from 'vitest';
+import { DocumentManager } from '../documents';
+import { JSONLanguageService } from './JSONLanguageService';
+import { getRequestParams, isCompletionList } from './test/test-helpers';
+
+const simplifiedSectionSchema = JSON.stringify({
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    name: {
+      type: 'string',
+      description: 'The section title shown in the theme editor',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional CSS class for the section',
+    },
+    disabled_on: {
+      type: 'string',
+    },
+  },
+});
+
+const simplifiedTaeBlockSchema = JSON.stringify({
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    name: {
+      type: 'string',
+      description: 'The section title shown in the theme editor',
+    },
+    class: {
+      type: 'string',
+      description: 'Additional CSS class for the section',
+    },
+    javascript: {
+      type: 'string',
+      description: 'Haha this one is different',
+    },
+  },
+});
+
+const simplifiedTranslationSchema = JSON.stringify({
+  $schema: 'https://json-schema.org/draft/2020-12/schema',
+  type: 'object',
+  additionalProperties: {
+    oneOf: [
+      {
+        type: 'string',
+      },
+      {
+        $ref: '#/$defs/pluralizedString',
+      },
+      {
+        $ref: '#',
+      },
+    ],
+  },
+  $defs: {
+    pluralizedString: {
+      type: 'object',
+      properties: {
+        one: {
+          type: 'string',
+          description: 'Translation for the singular form',
+        },
+        other: {
+          type: 'string',
+          description: 'Translation for the plural form',
+        },
+      },
+      additionalProperties: false,
+      description: 'An object representing a pluralized translation string',
+    },
+  },
+});
+
+describe('Module: JSONLanguageService', () => {
+  let jsonLanguageService: JSONLanguageService;
+  let documentManager: DocumentManager;
+  let schemaTranslations: Translations;
+
+  beforeEach(async () => {
+    schemaTranslations = {};
+    documentManager = new DocumentManager(
+      undefined,
+      undefined,
+      undefined,
+      async () => 'theme', // theme schema
+      async () => false, // invalid
+    );
+    jsonLanguageService = new JSONLanguageService(
+      documentManager,
+      {
+        schemas: async (mode: Mode) => [
+          {
+            uri: 'https://shopify.dev/section-schema.json',
+            schema: simplifiedSectionSchema,
+            fileMatch: ['**/sections/*.liquid'],
+          },
+          {
+            uri: 'https://shopify.dev/translation-schema.json',
+            schema: simplifiedTranslationSchema,
+            fileMatch: ['**/locales/*.json'],
+          },
+          {
+            uri:
+              mode === 'theme'
+                ? 'https://shopify.dev/block-schema.json'
+                : 'https://shopify.dev/block-tae-schema.json',
+            schema: mode === 'theme' ? simplifiedSectionSchema : simplifiedTaeBlockSchema,
+            fileMatch: ['**/blocks/*.liquid'],
+          },
+        ],
+      },
+      () => Promise.resolve(schemaTranslations),
+      (uri: string) => Promise.resolve(uri.includes('tae') ? 'app' : 'theme'),
+      () => Promise.resolve([]),
+      async () => undefined,
+      async () => 'file:///test-root',
+    );
+
+    await jsonLanguageService.setup({
+      textDocument: {
+        completion: {
+          contextSupport: true,
+          completionItem: {
+            snippetSupport: true,
+            commitCharactersSupport: true,
+            documentationFormat: ['markdown'],
+            deprecatedSupport: true,
+            preselectSupport: true,
+          },
+        },
+      },
+    });
+  });
+
+  describe('completions', () => {
+    it('should return section JSON schema completions in a section file {% schema %}', async () => {
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          <div>hello world</div>
+          {% schema %}
+            {
+              "name": "My section",
+              "█"
+            }
+          {% endschema %}
+        `,
+      );
+
+      const completions = await jsonLanguageService.completions(params);
+      assert(isCompletionList(completions));
+      expect(completions.items).to.have.lengthOf(2);
+      expect(completions.items[0].label).to.equal('class');
+      expect(completions.items[0].documentation).to.equal('Additional CSS class for the section');
+    });
+
+    it('should return translation key completions in a theme translation file', async () => {
+      const paths = [
+        'locales/en.default.json',
+        'locales/en.default.schema.json',
+        'locales/fr.json',
+        'locales/fr.schema.json',
+      ];
+      for (const path of paths) {
+        const params = getRequestParams(
+          documentManager,
+          path,
+          `
+            {
+              "general": {
+                "hello": {
+                  "other": "hey folks",
+                  "█"
+                }
+              }
+            }
+          `,
+        );
+        const completions = await jsonLanguageService.completions(params);
+        assert(isCompletionList(completions));
+        expect(completions.items).to.have.lengthOf(1);
+        expect(completions.items[0].label).to.equal('one');
+        expect(completions.items[0].documentation).to.eql('Translation for the singular form');
+      }
+    });
+
+    it('should be possible to offer theme app extension completions in app contexts, and theme completions in theme contexts for blocks', async () => {
+      const testContexts: [Mode, string, string[]][] = [
+        ['theme', 'theme/blocks/block.liquid', ['class', 'disabled_on']],
+        ['app', 'tae/blocks/block.liquid', ['class', 'javascript']],
+      ];
+      for (const [mode, path, expectedRecommendations] of testContexts) {
+        const params = getRequestParams(
+          documentManager,
+          path,
+          `
+          <div>hello world</div>
+          {% schema %}
+            {
+              "name": "My section",
+              "█"
+            }
+          {% endschema %}
+        `,
+        );
+
+        const completions = await jsonLanguageService.completions(params);
+        assert(isCompletionList(completions));
+        expect(completions.items).to.have.lengthOf(expectedRecommendations.length);
+        expect(completions.items).toEqual(
+          expectedRecommendations.map((recommendation) =>
+            expect.objectContaining({ label: recommendation }),
+          ),
+        );
+      }
+    });
+
+    it('should complete t:translations', async () => {
+      schemaTranslations = {
+        general: {
+          hello: 'hello world',
+          hi: 'hi world',
+        },
+      };
+
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          <div>hello world</div>
+          {% schema %}
+            {
+              "name": "t:█"
+            }
+          {% endschema %}
+        `,
+      );
+
+      const completions = await jsonLanguageService.completions(params);
+      assert(isCompletionList(completions));
+      expect(completions.items).to.have.lengthOf(2);
+      expect(completions.items[0].label).to.equal('t:general.hello');
+      expect(completions.items[0].documentation).to.eql({
+        kind: 'markdown',
+        value: 'hello world',
+      });
+    });
+  });
+
+  describe('hover', () => {
+    it('should return the translation value of a t:translation', async () => {
+      schemaTranslations = {
+        general: {
+          hello: 'hello world',
+        },
+      };
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          <div>hello world</div>
+          {% schema %}
+            {
+              "name": "t:general.hello█"
+            }
+          {% endschema %}
+        `,
+      );
+      const hover = await jsonLanguageService.hover(params);
+      assert(hover !== null);
+      expect(hover.contents).to.eql(['hello world']);
+    });
+
+    it('should return the path of a translation key in a theme translation file', async () => {
+      const paths = ['locales/en.default.json', 'locales/fr.json'];
+      for (const path of paths) {
+        const params = getRequestParams(
+          documentManager,
+          path,
+          `
+            {
+              "general": {
+                "hello█": "world"
+              }
+            }
+          `,
+        );
+        const hover = await jsonLanguageService.hover(params);
+        assert(hover !== null);
+        expect(hover.contents).to.eql([{ language: 'liquid', value: `{{ 'general.hello' | t }}` }]);
+      }
+    });
+
+    it('should return add interpolated variables to the hover', async () => {
+      const paths = ['locales/en.default.json', 'locales/fr.json'];
+      for (const path of paths) {
+        const params = getRequestParams(
+          documentManager,
+          path,
+          `
+            {
+              "general": {
+                "hello█": " {{ var1 }} world {{ var2 }}"
+              }
+            }
+          `,
+        );
+        const hover = await jsonLanguageService.hover(params);
+        assert(hover !== null);
+        expect(hover.contents).to.eql([
+          { language: 'liquid', value: `{{ 'general.hello' | t: var1: var1, var2: var2 }}` },
+        ]);
+      }
+    });
+
+    it('should return translation group hover for non-leaf nodes', async () => {
+      const paths = ['locales/en.default.json', 'locales/fr.json'];
+      for (const path of paths) {
+        const params = getRequestParams(
+          documentManager,
+          path,
+          `
+            {
+              "general█": {
+                "hello": " {{ var1 }} world {{ var2 }}"
+              }
+            }
+          `,
+        );
+        const hover = await jsonLanguageService.hover(params);
+        assert(hover !== null);
+        expect(hover.contents).to.eql([`Translation group: general`]);
+      }
+    });
+
+    it('should return the parent translation key for pluralized translations', async () => {
+      const paths = ['locales/en.default.json', 'locales/fr.json'];
+      for (const path of paths) {
+        const params = getRequestParams(
+          documentManager,
+          path,
+          `
+            {
+              "general": {
+                "one█": " {{ var1 }} world"
+              }
+            }
+          `,
+        );
+        const hover = await jsonLanguageService.hover(params);
+        assert(hover !== null);
+        expect(hover.contents).to.eql([
+          { language: 'liquid', value: `{{ 'general' | t: var1: var1 }}` },
+        ]);
+      }
+    });
+
+    it('should return the t:path of a translation key in a schema translation file', async () => {
+      const paths = ['locales/en.default.schema.json', 'locales/fr.schema.json'];
+      for (const path of paths) {
+        const params = getRequestParams(
+          documentManager,
+          path,
+          `
+            {
+              "general": {
+                "hello█": "world"
+              }
+            }
+          `,
+        );
+        const hover = await jsonLanguageService.hover(params);
+        assert(hover !== null);
+        expect(hover.contents).to.eql([{ language: 'json', value: `"t:general.hello"` }]);
+      }
+    });
+  });
+
+  describe('isValidSchema', () => {
+    it('should return true for a valid schema', async () => {
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          <div>hello world</div>
+          {% schema %}
+            { "name": "hello world" }
+          {% endschema %}
+        `,
+      );
+      const isValid = await jsonLanguageService.isValidSchema(
+        params.textDocument.uri,
+        '{ "name": "hello world" }',
+      );
+      expect(isValid).to.be.true;
+    });
+
+    it('should return false for an invalid schema', async () => {
+      const params = getRequestParams(
+        documentManager,
+        'sections/section.liquid',
+        `
+          <div>hello world</div>
+          {% schema %}
+            { "invalid": true }
+          {% endschema %}
+        `,
+      );
+      const isValid = await jsonLanguageService.isValidSchema(
+        params.textDocument.uri,
+        '{ "invalid": true }',
+      );
+      expect(isValid).to.be.false;
+    });
+  });
+});

package/src/json/JSONLanguageService.ts

@@ -0,0 +1,239 @@
+import { LiquidRawTag, NodeTypes } from '@platformos/liquid-html-parser';
+import {
+  IsValidSchema,
+  JsonValidationSet,
+  Mode,
+  Modes,
+  SchemaDefinition,
+  SourceCodeType,
+  findCurrentNode,
+  isValid,
+  toJSONAST,
+  visit,
+} from '@platformos/platformos-check-common';
+import { JSONDocument, LanguageService, getLanguageService } from 'vscode-json-languageservice';
+import {
+  CompletionItem,
+  CompletionList,
+  CompletionParams,
+  DocumentLink,
+  DocumentLinkParams,
+  Hover,
+  HoverParams,
+  ClientCapabilities as LSPClientCapabilities,
+} from 'vscode-languageserver';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { DocumentManager } from '../documents';
+import { GetTranslationsForURI } from '../translations';
+import { JSONContributions, GetThemeBlockNames, GetThemeBlockSchema } from './JSONContributions';
+import { createJSONDocumentLinksVisitor } from './documentLinks/DocumentLinksProvider';
+import { URI } from 'vscode-uri';
+import { FindThemeRootURI } from '../internal-types';
+
+export class JSONLanguageService {
+  // We index by Mode here because I don't want to reconfigure the service depending on the URI.
+  // This is because you may be in a "app" context in one folder, and in a "theme" context in another one.
+  // Because theme app extensions and themes do not share a common JSON schema for blocks/*.liquid files,
+  // we need to do this switch on mode here to figure out which language service we will use to power
+  // completions/hover. The mode comes from the theme check config.
+  private services: Record<Mode, LanguageService | null>;
+
+  // One record for all modes since collisions on URIs should point to the same schema
+  private schemas: Record<string, SchemaDefinition>;
+
+  // Setup state
+  public initialized: Promise<void>;
+  private initialize: () => void = () => {};
+
+  constructor(
+    private documentManager: DocumentManager,
+    private jsonValidationSet: JsonValidationSet,
+    private getDefaultSchemaTranslations: GetTranslationsForURI,
+    private getModeForURI: (uri: string) => Promise<Mode>,
+    private getThemeBlockNames: GetThemeBlockNames,
+    private getThemeBlockSchema: GetThemeBlockSchema,
+    private findThemeRootURI: FindThemeRootURI,
+  ) {
+    this.services = Object.fromEntries(Modes.map((mode) => [mode, null])) as typeof this.services;
+    this.schemas = {};
+    this.initialized = new Promise((resolve) => {
+      this.initialize = resolve;
+    });
+  }
+
+  async setup(clientCapabilities: LSPClientCapabilities) {
+    const promises = Modes.map(async (mode) => {
+      const schemas = await this.jsonValidationSet.schemas(mode);
+      for (const schema of schemas) {
+        this.schemas[schema.uri] = schema;
+      }
+
+      if (!schemas.length) return;
+
+      const service = getLanguageService({
+        clientCapabilities,
+
+        // Map URIs to schemas without making network requests. Removes the
+        // network dependency.
+        schemaRequestService: this.getSchemaForURI.bind(this),
+
+        // This is how we make sure that our "$ref": "./inputSettings.json" in
+        // our JSON schemas resolve correctly.
+        workspaceContext: {
+          resolveRelativePath: (relativePath, resource) => {
+            const url = new URL(relativePath, resource);
+            return url.toString();
+          },
+        },
+
+        contributions: [
+          new JSONContributions(
+            this.documentManager,
+            this.getDefaultSchemaTranslations,
+            this.getThemeBlockNames,
+            this.getThemeBlockSchema,
+          ),
+        ],
+      });
+
+      service.configure({
+        // This is what we use to map file names to JSON schemas. Without
+        // this, we'd need folks to use the `$schema` field in their JSON
+        // blobs. That ain't fun nor is going to happen.
+        schemas: schemas.map((schemaDefinition) => ({
+          uri: schemaDefinition.uri,
+          fileMatch: schemaDefinition.fileMatch,
+        })),
+      });
+
+      this.services[mode] = service;
+    });
+
+    await Promise.all(promises);
+    this.initialize();
+  }
+
+  async completions(params: CompletionParams): Promise<null | CompletionList | CompletionItem[]> {
+    await this.initialized;
+    const mode = await this.getModeForURI(params.textDocument.uri);
+    const service = this.services[mode];
+    if (!service) return null;
+    const documents = this.getDocuments(params, service);
+    if (!documents) return null;
+    const [jsonTextDocument, jsonDocument] = documents;
+    return service.doComplete(jsonTextDocument, params.position, jsonDocument);
+  }
+
+  async hover(params: HoverParams): Promise<Hover | null> {
+    await this.initialized;
+    const mode = await this.getModeForURI(params.textDocument.uri);
+    const service = this.services[mode];
+    if (!service) return null;
+    const documents = this.getDocuments(params, service);
+    if (!documents) return null;
+    const [jsonTextDocument, jsonDocument] = documents;
+    return service.doHover(jsonTextDocument, params.position, jsonDocument);
+  }
+
+  async documentLinks(params: DocumentLinkParams): Promise<DocumentLink[]> {
+    await this.initialized;
+    const rootUri = await this.findThemeRootURI(params.textDocument.uri);
+    if (!rootUri) return [];
+
+    const document = this.documentManager.get(params.textDocument.uri);
+    if (!document) return [];
+
+    switch (document.type) {
+      case SourceCodeType.JSON: {
+        if (document.ast instanceof Error) return [];
+        const visitor = await createJSONDocumentLinksVisitor(
+          document.textDocument,
+          URI.parse(rootUri),
+        );
+        return visit(document.ast, visitor);
+      }
+
+      case SourceCodeType.LiquidHtml: {
+        if (document.ast instanceof Error) return [];
+        const textDocument = document.textDocument;
+        const links: DocumentLink[] = [];
+
+        const schema = await document.getSchema();
+        if (schema && !(schema.ast instanceof Error)) {
+          const visitor = await createJSONDocumentLinksVisitor(
+            textDocument,
+            URI.parse(rootUri),
+            schema.offset,
+          );
+          const schemaLinks = await visit(schema.ast, visitor);
+          links.push(...schemaLinks);
+        }
+
+        return links;
+      }
+
+      default:
+        return [];
+    }
+  }
+
+  public isValidSchema = async (uri: string, jsonString: string) => {
+    await this.initialized;
+    const mode = await this.getModeForURI(uri);
+    const service = this.services[mode];
+    if (!service) return false;
+    return isValid(service, uri, jsonString);
+  };
+
+  private getDocuments(
+    params: HoverParams | CompletionParams,
+    service: LanguageService,
+  ): [TextDocument, JSONDocument] | null {
+    const document = this.documentManager.get(params.textDocument.uri);
+    if (!document) return null;
+
+    switch (document.type) {
+      case SourceCodeType.GraphQL:
+        return null;
+      case SourceCodeType.JSON: {
+        const jsonTextDocument = document.textDocument;
+        const jsonDocument = service.parseJSONDocument(jsonTextDocument);
+        return [jsonTextDocument, jsonDocument];
+      }
+
+      case SourceCodeType.LiquidHtml: {
+        if (document.ast instanceof Error) return null;
+        const textDocument = document.textDocument;
+        const offset = textDocument.offsetAt(params.position);
+        const [_, ancestors] = findCurrentNode(document.ast, offset);
+        const schema = ancestors.find(
+          (node): node is LiquidRawTag =>
+            node.type === NodeTypes.LiquidRawTag && node.name === 'schema',
+        );
+        if (!schema) return null;
+
+        const schemaLineNumber = textDocument.positionAt(schema.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 jsonString =
+          Array(schemaLineNumber).fill('\n').join('') +
+          schema.source.slice(schema.blockStartPosition.end, schema.blockEndPosition.start);
+        const jsonTextDocument = TextDocument.create(
+          textDocument.uri,
+          'json',
+          textDocument.version,
+          jsonString,
+        );
+        const jsonDocument = service.parseJSONDocument(jsonTextDocument);
+        return [jsonTextDocument, jsonDocument];
+      }
+    }
+  }
+
+  private async getSchemaForURI(uri: string): Promise<string> {
+    const schema = this.schemas[uri]?.schema;
+    if (!schema) return `Could not get schema for '${uri}'`;
+    return schema;
+  }
+}

package/src/json/RequestContext.ts

@@ -0,0 +1,35 @@
+import { LiquidHtmlNode, LiquidRawTag } from '@platformos/liquid-html-parser';
+import { isError, JSONNode, SourceCodeType } from '@platformos/platformos-check-common';
+import {
+  AugmentedJsonSourceCode,
+  AugmentedLiquidSourceCode,
+  AugmentedSourceCode,
+} from '../documents';
+
+export type RequestContext = {
+  doc: AugmentedSourceCode;
+  schema?: LiquidRawTag;
+  parsed?: any | Error;
+};
+
+export type LiquidRequestContext = {
+  doc: Omit<AugmentedLiquidSourceCode, 'ast'> & { ast: LiquidHtmlNode };
+  schema: LiquidRawTag;
+  parsed: any;
+};
+
+export type JSONRequestContext = {
+  doc: Omit<AugmentedJsonSourceCode, 'ast'> & { ast: JSONNode };
+};
+
+export function isLiquidRequestContext(context: RequestContext): context is LiquidRequestContext {
+  const { doc, schema, parsed } = context;
+  return (
+    doc.type === SourceCodeType.LiquidHtml && !!schema && !isError(doc.ast) && !isError(parsed)
+  );
+}
+
+export function isJSONRequestContext(context: RequestContext): context is JSONRequestContext {
+  const { doc } = context;
+  return doc.type === SourceCodeType.JSON && !isError(doc.ast);
+}