@platformos/platformos-language-server-common 0.0.2

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

@@ -0,0 +1,232 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { MetafieldDefinitionMap, ObjectEntry } from '@platformos/platformos-check-common';
+
+describe('Module: ObjectCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    const _objects: ObjectEntry[] = [
+      { name: 'all_products' },
+      { name: 'global' },
+      {
+        name: 'section',
+        access: {
+          global: false,
+          template: [],
+          parents: [],
+        },
+      },
+      {
+        name: 'block',
+        access: {
+          global: false,
+          template: [],
+          parents: [],
+        },
+      },
+      {
+        name: 'predictive_search',
+        access: {
+          global: false,
+          template: [],
+          parents: [],
+        },
+      },
+      {
+        name: 'recommendations',
+        access: {
+          global: false,
+          template: [],
+          parents: [],
+        },
+      },
+      {
+        name: 'product',
+        properties: [
+          {
+            name: 'metafields',
+          },
+        ],
+      },
+      {
+        name: 'metafield',
+        access: {
+          global: false,
+          template: [],
+          parents: [],
+        },
+        properties: [
+          {
+            name: 'type',
+            description: 'the type of the metafield',
+            return_type: [{ type: 'string', name: '' }],
+          },
+          {
+            name: 'value',
+            description: 'the value of the metafield',
+            return_type: [{ type: 'untyped', name: '' }],
+          },
+        ],
+      },
+    ];
+
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => _objects,
+        liquidDrops: async () => _objects,
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => {
+        return {
+          article: [],
+          blog: [],
+          collection: [],
+          company: [],
+          company_location: [],
+          location: [],
+          market: [],
+          order: [],
+          page: [],
+          product: [
+            {
+              key: 'color',
+              name: 'color',
+              namespace: 'custom',
+              description: 'the color of the product',
+              type: {
+                category: 'COLOR',
+                name: 'color',
+              },
+            },
+          ],
+          variant: [],
+          shop: [],
+        } as MetafieldDefinitionMap;
+      },
+    });
+  });
+
+  it('should complete variable lookups', async () => {
+    const contexts = [
+      `{{ a█`,
+      `{% echo a█ %}`,
+      `{% assign x = a█ %}`,
+      `{% for a in a█ %}`,
+      `{% for a in b reversed limit: a█ %}`,
+      `{% paginate b by a█ %}`,
+      `{% paginate b by col, window_size: a█ %}`,
+      `{% if a█ %}`,
+      `{% if a > a█ %}`,
+      `{% if a > b or a█ %}`,
+      `{% if a > b or c > a█ %}`,
+      `{% elsif a > a█ %}`,
+      `{% when a█ %}`,
+      `{% when a, a█ %}`,
+      `{% cycle a█ %}`,
+      `{% cycle 'foo', a█ %}`,
+      `{% cycle 'foo': a█ %}`,
+      `{% render 'snip', var: a█ %}`,
+      `{% render 'snip' for a█ as item %}`,
+      `{% render 'snip' with a█ as name %}`,
+      `{% for x in (1..a█) %}`,
+      // `{% paginate a█ by 50 %}`,
+      `<a-{{ a█ }}`,
+      `<a data-{{ a█ }}`,
+      `<a data={{ a█ }}`,
+      `<a data="{{ a█ }}"`,
+      `<a data='x{{ a█ }}'`,
+    ];
+    await Promise.all(
+      contexts.map((context) => expect(provider, context).to.complete(context, ['all_products'])),
+    );
+  });
+
+  it('should complete variable lookups (placeholder mode)', async () => {
+    const contexts = [
+      `{{ █`,
+      `{% echo █ %}`,
+      `{% assign x = █ %}`,
+      `{% for a in █ %}`,
+      `{% for a in b reversed limit: █ %}`,
+      `{% paginate b by █ %}`,
+      `{% paginate b by col, window_size: █ %}`,
+      `{% if █ %}`,
+      `{% if a > █ %}`,
+      `{% if a > b or █ %}`,
+      `{% if a > b or c > █ %}`,
+      `{% elsif a > █ %}`,
+      `{% when █ %}`,
+      `{% when a, █ %}`,
+      `{% cycle █ %}`,
+      `{% cycle 'foo', █ %}`,
+      `{% cycle 'foo': █ %}`,
+      `{% render 'snip', var: █ %}`,
+      `{% render 'snip' for █ as item %}`,
+      `{% render 'snip' with █ as name %}`,
+      `{% for x in (1..█) %}`,
+      // `{% paginate █ by 50 %}`,
+      `<a-{{ █ }}`,
+      `<a data-{{ █ }}`,
+      `<a data={{ █ }}`,
+      `<a data="{{ █ }}"`,
+      `<a data='x{{ █ }}'`,
+    ];
+
+    await Promise.all(
+      contexts.map((context) =>
+        expect(provider, context).to.complete(context, ['all_products', 'global', 'product']),
+      ),
+    );
+  });
+
+  it('should complete contextual variables', async () => {
+    const contexts: [string, string][] = [
+      ['{% paginate all_products by 5 %}{{ pagi█ }}{% endpaginate %}', 'paginate'],
+      ['{% form "cart" %}{{ for█ }}{% endform %}', 'form'],
+      ['{% for p in all_products %}{{ for█ }}{% endfor %}', 'forloop'],
+      ['{% tablerow p in all_products %}{{ tablerow█ }}{% endtablerow %}', 'tablerowloop'],
+      ['{% layout non█ %}', 'none'],
+      ['{% increment var %}{{ var█ }}', 'var'],
+      ['{% decrement var %}{{ var█ }}', 'var'],
+      ['{% assign var = 1 %}{{ var█ }}', 'var'],
+    ];
+    for (const [context, expected] of contexts) {
+      await expect(provider, context).to.complete(context, [expected]);
+      const outOfContext = `{{ ${expected}█ }}`;
+      await expect(provider, outOfContext).to.complete(outOfContext, []);
+    }
+  });
+
+  it('should complete relative-path-dependent contextual variables', async () => {
+    const contexts: [string, string][] = [
+      ['section', 'sections/main-product.liquid'],
+      ['block', 'blocks/my-block.liquid'],
+      ['predictive_search', 'sections/predictive-search.liquid'],
+      ['recommendations', 'sections/recommendations.liquid'],
+    ];
+    for (const [object, relativePath] of contexts) {
+      const source = `{{ ${object}█ }}`;
+      await expect(provider, source).to.complete({ source, relativePath }, [object]);
+      await expect(provider, source).to.complete({ source, relativePath: 'file.liquid' }, []);
+    }
+  });
+
+  it('should not complete anything if there is nothing to complete', async () => {
+    await expect(provider).to.complete('{% assign x = "█" %}', []);
+  });
+
+  it('should complete metafields defined by getMetafieldDefinitions', async () => {
+    await expect(provider).to.complete('{% echo product.metafields.█ %}', ['custom']);
+    await expect(provider).to.complete('{% echo product.metafields.custom.█ %}', ['color']);
+    await expect(provider).to.complete('{% echo product.metafields.custom.color.█ %}', [
+      'type',
+      'value',
+    ]);
+  });
+});

package/src/completions/providers/ObjectCompletionProvider.ts

@@ -0,0 +1,44 @@
+import { NodeTypes } from '@platformos/liquid-html-parser';
+import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
+import { TypeSystem } from '../../TypeSystem';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider, createCompletionItem } from './common';
+
+export class ObjectCompletionProvider implements Provider {
+  constructor(private readonly typeSystem: TypeSystem) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { partialAst, node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+
+    if (!node || node.type !== NodeTypes.VariableLookup) {
+      return [];
+    }
+
+    if (!node.name || node.lookups.length > 0) {
+      // We only do top level in this one.
+      return [];
+    }
+
+    // ContentFor and Render uses VariableLookup to support completion of NamedParams.
+    if (
+      parentNode?.type === NodeTypes.ContentForMarkup ||
+      parentNode?.type === NodeTypes.RenderMarkup
+    ) {
+      return [];
+    }
+
+    const partial = node.name.replace(CURSOR, '');
+    const options = await this.typeSystem.availableVariables(
+      partialAst,
+      partial,
+      node,
+      params.textDocument.uri,
+    );
+    return options.map(({ entry, type }) =>
+      createCompletionItem(entry, { kind: CompletionItemKind.Variable }, 'object', type),
+    );
+  }
+}

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

@@ -0,0 +1,107 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+
+describe('Module: RenderSnippetCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getTranslationsForURI: async (_) => ({}),
+      getPartialNamesForURI: async (_) => ['product-card', 'image'],
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+  });
+
+  it('should complete snippets correctly', async () => {
+    await expect(provider).to.complete('{% render "', ['product-card', 'image']);
+  });
+});
+
+describe('Module: PartialCompletionProvider with paths', async () => {
+  it('should complete module paths - /modules/user/commands/test', async () => {
+    const provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getTranslationsForURI: async (_) => ({}),
+      getPartialNamesForURI: async (_uri, partial, _tag) => {
+        if (partial === '/modules/user/commands') {
+          return ['test'];
+        }
+        return [];
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+
+    await expect(provider).to.complete('{% render "/modules/user/commands', ['test']);
+  });
+
+  it('should complete root commands path - /commands/test2', async () => {
+    const provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getTranslationsForURI: async (_) => ({}),
+      getPartialNamesForURI: async (_uri, partial, _tag) => {
+        if (partial === '/commands') {
+          return ['test2'];
+        }
+        return [];
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+
+    await expect(provider).to.complete('{% render "/commands', ['test2']);
+  });
+
+  it('should complete multiple files in directory', async () => {
+    const provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getTranslationsForURI: async (_) => ({}),
+      getPartialNamesForURI: async (_uri, partial, _tag) => {
+        if (partial === '/modules/user/commands') {
+          return ['create', 'update', 'delete'];
+        }
+        return [];
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+    });
+
+    await expect(provider).to.complete('{% render "/modules/user/commands', [
+      'create',
+      'update',
+      'delete',
+    ]);
+  });
+});

package/src/completions/providers/PartialCompletionProvider.ts

@@ -0,0 +1,50 @@
+import { LiquidTag, NodeTypes } from '@platformos/liquid-html-parser';
+import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
+import { LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+
+export type GetPartialNamesForURI = (
+  uri: string,
+  partial: string,
+  tag: string | undefined,
+) => Promise<string[]>;
+
+export class PartialCompletionProvider implements Provider {
+  constructor(private readonly getPartialNamesForURI: GetPartialNamesForURI = async () => []) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+
+    if (
+      !node ||
+      !parentNode ||
+      node.type !== NodeTypes.String ||
+      ![NodeTypes.RenderMarkup, NodeTypes.GraphQLMarkup, NodeTypes.FunctionMarkup].includes(
+        parentNode.type,
+      )
+    ) {
+      return [];
+    }
+
+    const partial = node.value;
+    const options = await this.getPartialNamesForURI(
+      params.textDocument.uri,
+      partial,
+      (ancestors.at(-2) as LiquidTag)?.name || undefined,
+    );
+
+    return options.map(
+      (option: string): CompletionItem => ({
+        label: option,
+        kind: CompletionItemKind.Snippet,
+        documentation: {
+          kind: 'markdown',
+          value: option,
+        },
+      }),
+    );
+  }
+}

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

@@ -0,0 +1,91 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { DocumentManager } from '../../documents';
+import { MetafieldDefinitionMap, DocDefinition } from '@platformos/platformos-check-common';
+
+const uri = 'file:///snippets/product-card.liquid';
+
+describe('Module: RenderSnippetParameterCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+  const mockSnippetName = 'product-card';
+  const mockSnippetDefinition: DocDefinition = {
+    uri,
+    liquidDoc: {
+      parameters: [
+        {
+          name: 'title',
+          description: 'The title of the product',
+          type: 'string',
+          required: true,
+          nodeType: 'param',
+        },
+        {
+          name: 'border-radius',
+          description: 'The border radius in px',
+          type: 'number',
+          required: false,
+          nodeType: 'param',
+        },
+        {
+          name: 'no-type',
+          description: 'This parameter has no type',
+          type: null,
+          required: true,
+          nodeType: 'param',
+        },
+        {
+          name: 'no-description',
+          description: null,
+          type: 'string',
+          required: true,
+          nodeType: 'param',
+        },
+        {
+          name: 'no-type-or-description',
+          description: null,
+          type: null,
+          required: true,
+          nodeType: 'param',
+        },
+      ],
+    },
+  };
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+      getDocDefinitionForURI: async (_uri, _type, snippetName) => {
+        if (mockSnippetName === snippetName) {
+          return mockSnippetDefinition;
+        }
+      },
+    });
+  });
+
+  it("provide completion options that doesn't already exist in render tag", async () => {
+    await expect(provider).to.complete(`{% render '${mockSnippetName}', █ %}`, [
+      'title',
+      'border-radius',
+      'no-type',
+      'no-description',
+      'no-type-or-description',
+    ]);
+    await expect(provider).to.complete(
+      `{% render '${mockSnippetName}', title: 'foo', border-radius: 5, █ %}`,
+      ['no-type', 'no-description', 'no-type-or-description'],
+    );
+  });
+
+  it('does not provide completion options if the snippet does not exist', async () => {
+    await expect(provider).to.complete(`{% render 'fake-snippet', █ %}`, []);
+  });
+});

package/src/completions/providers/RenderPartialParameterCompletionProvider.ts

@@ -0,0 +1,79 @@
+import { NodeTypes } from '@platformos/liquid-html-parser';
+import {
+  CompletionItem,
+  CompletionItemKind,
+  InsertTextFormat,
+  MarkupKind,
+  Range,
+  TextEdit,
+} from 'vscode-languageserver';
+import { CURSOR, LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+import { formatLiquidDocParameter, getParameterCompletionTemplate } from '../../utils/liquidDoc';
+import { GetDocDefinitionForURI } from '@platformos/platformos-check-common';
+
+export type GetPartialNamesForURI = (uri: string) => Promise<string[]>;
+
+export class RenderPartialParameterCompletionProvider implements Provider {
+  constructor(private readonly getDocDefinitionForURI: GetDocDefinitionForURI) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+
+    if (
+      !node ||
+      !parentNode ||
+      node.type !== NodeTypes.VariableLookup ||
+      parentNode.type !== NodeTypes.RenderMarkup ||
+      parentNode.snippet.type !== 'String'
+    ) {
+      return [];
+    }
+
+    const userInputStr = node.name?.replace(CURSOR, '') || '';
+
+    const partialDefinition = await this.getDocDefinitionForURI(
+      params.textDocument.uri,
+      'app/views/partials',
+      parentNode.snippet.value,
+    );
+
+    const liquidDocParams = partialDefinition?.liquidDoc?.parameters;
+
+    if (!liquidDocParams) {
+      return [];
+    }
+
+    let offset = node.name === CURSOR ? 1 : 0;
+
+    let start = params.document.textDocument.positionAt(node.position.start);
+    let end = params.document.textDocument.positionAt(node.position.end - offset);
+
+    // We need to find out existing params in the render tag so we don't offer it again for completion
+    const existingRenderParams = parentNode.args
+      .filter((arg) => arg.type === NodeTypes.NamedArgument)
+      .map((arg) => arg.name);
+
+    return liquidDocParams
+      .filter((liquidDocParam) => !existingRenderParams.includes(liquidDocParam.name))
+      .filter((liquidDocParam) => liquidDocParam.name.startsWith(userInputStr))
+      .map((liquidDocParam) => {
+        return {
+          label: liquidDocParam.name,
+          kind: CompletionItemKind.Property,
+          documentation: {
+            kind: MarkupKind.Markdown,
+            value: formatLiquidDocParameter(liquidDocParam, true),
+          },
+          textEdit: TextEdit.replace(
+            Range.create(start, end),
+            getParameterCompletionTemplate(liquidDocParam.name, liquidDocParam.type),
+          ),
+          insertTextFormat: InsertTextFormat.Snippet,
+        };
+      });
+  }
+}

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

@@ -0,0 +1,65 @@
+import { describe, beforeEach, it, expect } from 'vitest';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+
+describe('Module: TranslationCompletionProvider', async () => {
+  let provider: CompletionsProvider;
+
+  beforeEach(async () => {
+    provider = new CompletionsProvider({
+      documentManager: new DocumentManager(),
+      themeDocset: {
+        graphQL: async () => null,
+        filters: async () => [],
+        objects: async () => [],
+        liquidDrops: async () => [],
+        tags: async () => [],
+        systemTranslations: async () => ({}),
+      },
+      getMetafieldDefinitions: async (_rootUri: string) => ({} as MetafieldDefinitionMap),
+      getTranslationsForURI: async (_) => ({
+        general: {
+          username_html: '<b>username</b>',
+          password: 'password',
+          comments: {
+            one: '{{ count }} comment',
+            other: '{{ count }} comments',
+          },
+        },
+      }),
+    });
+  });
+
+  it('should complete translations correctly', async () => {
+    await expect(provider).to.complete('{{ "genera', [
+      '"general.username_html" | t',
+      '"general.password" | t',
+      '"general.comments" | t',
+    ]);
+
+    // Why all three you ask? Because we want to support fuzzy matching.
+    // We leave filtering up to the client.
+    await expect(provider).to.complete('{{ "general.comments', [
+      '"general.username_html" | t',
+      '"general.password" | t',
+      expect.objectContaining({
+        documentation: {
+          kind: 'markdown',
+          value: expect.stringMatching(/one(.|\n)*comment(.|\n)*other(.|\n)*comments/m),
+        },
+      }),
+    ]);
+    await expect(provider).to.complete('{{ "general.passwo█" }}', [
+      '"general.username_html" | t',
+      expect.objectContaining({
+        label: '"general.password" | t',
+        insertText: 'password',
+        textEdit: expect.objectContaining({
+          newText: 'general.password" | t',
+        }),
+      }),
+      '"general.comments" | t',
+    ]);
+  });
+});