@platformos/platformos-language-server-common 0.0.2

package/src/completions/params/fix.ts

@@ -0,0 +1,269 @@
+export const CURSOR = '█';
+
+const SINGLE_QUOTE = `'` as const;
+const DOUBLE_QUOTE = `"` as const;
+const HTML_TOKENS: Token[] = ['<', '>'];
+const SHOULD_IGNORE_HTML_TOKENS: Token[] = [SINGLE_QUOTE, DOUBLE_QUOTE, '{{', '{%'];
+
+const QUOTES: Token[] = [SINGLE_QUOTE, DOUBLE_QUOTE];
+const CONTROL_TOKENS: Token[] = ['{{', '{%', '<'];
+
+const TokenPairs = {
+  "'": "'",
+  '"': '"',
+  '{{': '}}',
+  '{%': '%}',
+  '<': '>',
+  '[': ']',
+  '(': ')',
+} as const;
+
+type Token = (typeof TokenPairs)[keyof typeof TokenPairs] | keyof typeof TokenPairs;
+
+/**
+ * Fix the source code and return the new fixed source with the new absolute
+ * position
+ *
+ * @param source - source code
+ * @param position - absolute position
+ *
+ * @returns new fixed source
+ */
+export function fix(source: string, position: number = source.length): string {
+  const fixer = new Fixer(source, position);
+  return fixer.fix();
+}
+
+class Fixer {
+  public markup: string;
+
+  /**
+   * A list of quotes, <, [, etc. We'll pass through that list to determine
+   * what needs to be closed at the end.
+   */
+  private tokens: Token[] = [];
+
+  /**
+   * A stack of closing tokens such that when we're done we simply pop
+   * everything out into the string to get a fixed string.
+   */
+  private stack: Token[] = [];
+  private cursor: number;
+
+  constructor(source: string, position: number) {
+    this.cursor = 0;
+    this.markup = source.slice(0, position);
+  }
+
+  /**
+   * This is cool, so bear with me.
+   *
+   * We'll scan the entire string up to the cursor position and turn that
+   * into a list of tokens
+   *
+   * input:
+   *   `<a href="hi'" other="{{ 'there'`
+   *
+   * output:
+   *   - <
+   *   - "
+   *   - '
+   *   - "
+   *   - "
+   *   - {{
+   *   - '
+   *   - '
+   *   - }}
+   *   - "
+   *
+   * Then we take that output, and we turn it into a stack
+   * (open tokens push, close tokens pop)
+   *
+   * stack evolution:
+   *   - <         # open tag
+   *   - < "       # add quote
+   *   - < "       # (single quote is ignored)
+   *   - <         # close quote
+   *   - < "       # open new quote
+   *   - < " {{    # open liquid variable output
+   *   - < " {{ '  # open liquid string in variable output
+   *   - < " {{    # close liquid string in variable output
+   *
+   * then we pop the close characters of that stack onto the string and
+   * have a fixed string
+   *
+   *   - <a href="hi'" other="{{ 'there'      # start
+   *   - <a href="hi'" other="{{ 'there'}}    # pop close {{
+   *   - <a href="hi'" other="{{ 'there'}}"   # pop close "
+   *   - <a href="hi'" other="{{ 'there'}}">  # pop close <
+   *
+   * And there we go, we have a fixed string.
+   */
+  fix() {
+    this.scanTokens();
+    this.buildStack();
+    let markup = this.markup;
+
+    if (this.shouldIncludeCursorPlaceholder()) {
+      markup += CURSOR;
+    }
+
+    while (this.stack.length !== 0) {
+      markup += this.stack.pop();
+    }
+
+    return markup;
+  }
+
+  buildStack() {
+    for (let token of this.tokens) {
+      if (this.shouldPanic(token)) {
+        while (token !== this.stack.pop()) {}
+      } else if (this.shouldSkipToken(token)) {
+        /* do nothing */
+      } else if (this.isClosingToken(token)) {
+        this.stack.pop();
+      } else {
+        const closingToken = TokenPairs[token as keyof typeof TokenPairs];
+        if (closingToken) {
+          this.stack.push(closingToken);
+        }
+      }
+    }
+  }
+
+  isClosingToken(token: Token) {
+    return this.current === token;
+  }
+
+  shouldPanic(token: Token) {
+    const isInStringContext = QUOTES.includes(this.current as any);
+    return isInStringContext && this.stack.at(-2) === token;
+  }
+
+  shouldSkipToken(token: Token) {
+    const current = this.current;
+    const isInTextContext = !current;
+    const isInStringContext = QUOTES.includes(current as any);
+    const isInLiquidContext = this.stack.includes('}}') || this.stack.includes('%}');
+    return (
+      (isInTextContext && !CONTROL_TOKENS.includes(token)) ||
+      (isInStringContext && !CONTROL_TOKENS.includes(token) && !QUOTES.includes(token)) ||
+      (isInLiquidContext && token === '<') ||
+      (current === SINGLE_QUOTE && token === DOUBLE_QUOTE) ||
+      (current === DOUBLE_QUOTE && token === SINGLE_QUOTE) ||
+      (SHOULD_IGNORE_HTML_TOKENS.includes(current!) && HTML_TOKENS.includes(token))
+    );
+  }
+
+  scanTokens() {
+    while (!this.isAtEnd()) {
+      const character = this.peek();
+      switch (character) {
+        case DOUBLE_QUOTE:
+        case SINGLE_QUOTE:
+        case '(':
+        case ')':
+        case '[':
+        case ']': {
+          this.pushToken(character);
+          break;
+        }
+
+        case '{': {
+          if (this.matchNext('%')) {
+            this.pushToken('{%');
+          } else if (this.matchNext('{')) {
+            this.pushToken('{{');
+          }
+          break;
+        }
+
+        case '%': {
+          if (this.matchNext('}')) {
+            this.pushToken('%}');
+          }
+          break;
+        }
+
+        case '}': {
+          if (this.matchNext('}')) {
+            this.pushToken('}}');
+          }
+          break;
+        }
+
+        case '<': {
+          if (this.testNext(/[a-z{\/]/i)) {
+            this.pushToken('<');
+          }
+          break;
+        }
+
+        case '>': {
+          this.pushToken('>');
+          break;
+        }
+
+        default: {
+          /* do nothing */
+        }
+      }
+
+      this.advance();
+    }
+  }
+
+  shouldIncludeCursorPlaceholder() {
+    const prevCharacter = this.markup.at(-1) ?? '';
+    const prevPrevCharacter = this.markup.at(-2) ?? '';
+    const isInLiquidContext = this.stack.includes('%}') || this.stack.includes('}}');
+    const isInHtmlContext = this.current === '>';
+    const isInStringContext = QUOTES.includes(this.current as any);
+    return (
+      (isInStringContext && this.stack.at(-2) === '>' && QUOTES.includes(prevCharacter as any)) ||
+      (isInHtmlContext &&
+        (/\s/.test(prevCharacter) ||
+          prevCharacter === '<' ||
+          (prevPrevCharacter === '<' && prevCharacter === '/') ||
+          (prevPrevCharacter === '%' && prevCharacter === '}'))) ||
+      (isInLiquidContext &&
+        ((!isInStringContext && [' ', '\t', '\n', '.', '{', '[', ','].includes(prevCharacter)) ||
+          (isInStringContext && prevPrevCharacter === '[')))
+    );
+  }
+
+  get current() {
+    return this.stack.at(-1);
+  }
+
+  advance() {
+    this.cursor += 1;
+  }
+
+  matchNext(character: string) {
+    if (this.peekNext() !== character) return false;
+    this.cursor++;
+    return true;
+  }
+
+  testNext(regex: RegExp) {
+    return regex.test(this.peekNext());
+  }
+
+  peek(cursor = this.cursor) {
+    return this.markup[cursor];
+  }
+
+  peekNext(cursor = this.cursor) {
+    return this.markup[cursor + 1];
+  }
+
+  pushToken(token: Token) {
+    this.tokens.push(token);
+  }
+
+  isAtEnd() {
+    return this.cursor >= this.markup.length;
+  }
+}

package/src/completions/params/index.ts

@@ -0,0 +1,2 @@
+export { LiquidCompletionParams, createLiquidCompletionParams } from './LiquidCompletionParams';
+export { CURSOR } from './fix';

package/src/completions/params/testcases.txt

@@ -0,0 +1,104 @@
+# The way this works is the following:
+# - each test case consists of a pair of lines separated by two new lines,
+# - the first line of each pair is "where you are",
+# - the second line of each pair is "what we expect the fix to be".
+# The █ character is used to represent the cursor position, and will
+# be parsed as a placeholder character
+# Lines that start by # are ignored as comments.
+<div class="container" id="
+<div class="container" id="█">
+
+<div class="container" id="{{
+<div class="container" id="{{█}}">
+
+<div class="container" id="{{ var.
+<div class="container" id="{{ var.█}}">
+
+<div class="container" id="{{ var['
+<div class="container" id="{{ var['█']}}">
+
+<div class="container" id="{{ var['key'
+<div class="container" id="{{ var['key']}}">
+
+<div class="container" id="{{ var['key']
+<div class="container" id="{{ var['key']}}">
+
+<div class="container" id="{{ var['key'] }}"
+<div class="container" id="{{ var['key'] }}">
+
+<div class="container" id="{{ var['key'] }}"></div>
+<div class="container" id="{{ var['key'] }}"></div>
+
+{% for item in list
+{% for item in list%}
+
+{% for item in list %}
+{% for item in list %}
+
+{% for item in list %}<p>{{ █
+{% for item in list %}<p>{{ █}}
+
+{% for item in list %}<p>{{ item.
+{% for item in list %}<p>{{ item.█}}
+
+{% for item in list %}<p>{{ item['
+{% for item in list %}<p>{{ item['█']}}
+
+{% for item in list %}<p>{{ item['key'
+{% for item in list %}<p>{{ item['key']}}
+
+{% for item in list %}<p>{{ item['key']
+{% for item in list %}<p>{{ item['key']}}
+
+{% for item in list %}<p>{{ item['key'] }}</p>
+{% for item in list %}<p>{{ item['key'] }}</p>
+
+{% for item in list %}<p>{{ item['key'] }}</p>{% endfor █
+{% for item in list %}<p>{{ item['key'] }}</p>{% endfor █%}
+
+{% for item in list %}<p>{{ item['key'] }}</p>{% endfor %}
+{% for item in list %}<p>{{ item['key'] }}</p>{% endfor %}
+
+{% for item in (1..a
+{% for item in (1..a)%}
+
+{% form "cart",
+{% form "cart",█%}
+
+<a href="{% url '
+<a href="{% url ''%}">
+
+<a href="{% url 'name' █
+<a href="{% url 'name' █%}">
+
+<a href="{% url 'name' %}
+<a href="{% url 'name' %}">
+
+<a href="{% url 'name' %}"
+<a href="{% url 'name' %}">
+
+<a href="{% url 'name' %}"></a>
+<a href="{% url 'name' %}"></a>
+
+{% if condition %}
+{% if condition %}
+
+{% if condition %}<p>
+{% if condition %}<p>
+
+{% if condition %}<p>Hello, world!
+{% if condition %}<p>Hello, world!
+
+{% if condition %}<p>Hello, world!</p>
+{% if condition %}<p>Hello, world!</p>
+
+# cursor is included because no way to tell if you didn't want another var
+{% if condition %}<p>Hello, world!</p>{% endif 
+{% if condition %}<p>Hello, world!</p>{% endif █%}
+
+{% if condition %}<p>Hello, world!</p>{% endif %}
+{% if condition %}<p>Hello, world!</p>{% endif %}
+
+# this one looks at symbols that have meaning depending on context
+{% if a <b %}<p attr="hi'">{% else > b %}Hello, world!{{ "don't
+{% if a <b %}<p attr="hi'">{% else > b %}Hello, world!{{ "don't"}}

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

@@ -0,0 +1,41 @@
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { InsertTextFormat } from 'vscode-json-languageservice';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+
+describe('Module: ContentForBlockTypeCompletionProvider', 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),
+      getThemeBlockNames: async (_rootUri: string, _includePrivate: boolean) => [
+        'block-1',
+        'block-2',
+      ],
+    });
+  });
+
+  it('should complete content_for "block" type parameter ', async () => {
+    const expected = ['block-1', 'block-2'].sort();
+    await expect(provider).to.complete('{% content_for "block", type: "█" %}', expected);
+  });
+
+  it('should not complete content_for "blocks" type parameter', async () => {
+    await expect(provider).to.complete('{% content_for "blocks", type: "█" %}', []);
+  });
+
+  it('should not complete content_for "block" id parameter', async () => {
+    await expect(provider).to.complete('{% content_for "block", type: "", id: "█" %}', []);
+  });
+});

package/src/completions/providers/ContentForBlockTypeCompletionProvider.ts

@@ -0,0 +1,42 @@
+import { NodeTypes } from '@platformos/liquid-html-parser';
+import { CompletionItem, CompletionItemKind } from 'vscode-languageserver';
+import { LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+
+export class ContentForBlockTypeCompletionProvider implements Provider {
+  constructor(
+    private readonly getThemeBlockNames: (
+      rootUri: string,
+      includePrivate: boolean,
+    ) => Promise<string[]>,
+  ) {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { document } = params;
+    const doc = document.textDocument;
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+    const grandParentNode = ancestors.at(-2);
+
+    if (
+      !node ||
+      !parentNode ||
+      !grandParentNode ||
+      node.type !== NodeTypes.String ||
+      parentNode.type !== NodeTypes.NamedArgument ||
+      parentNode.name !== 'type' ||
+      grandParentNode.type !== NodeTypes.ContentForMarkup ||
+      grandParentNode.contentForType.value !== 'block'
+    ) {
+      return [];
+    }
+
+    return (await this.getThemeBlockNames(doc.uri, false)).map((blockName) => ({
+      label: blockName,
+      kind: CompletionItemKind.EnumMember,
+      insertText: blockName,
+    }));
+  }
+}

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

@@ -0,0 +1,96 @@
+import { MetafieldDefinitionMap } from '@platformos/platformos-check-common';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { InsertTextFormat } from 'vscode-json-languageservice';
+import { DocumentManager } from '../../documents';
+import { CompletionsProvider } from '../CompletionsProvider';
+
+describe('Module: ContentForCompletionProvider', 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),
+    });
+  });
+
+  it('should complete content_for block keywords correctly', async () => {
+    const expected = ['block', 'blocks'].sort();
+    await expect(provider).to.complete('{% content_for "█" %}', expected);
+  });
+
+  describe('when the text being completed does not have extra markup', () => {
+    it('should text edit complete content_for block with type & id placeholders', async () => {
+      const source = '{% content_for "█" %}';
+      await expect(provider).to.complete(
+        source,
+        expect.arrayContaining([
+          expect.objectContaining({
+            label: 'block',
+            textEdit: expect.applyEdits(source, `{% content_for "block", type: "$1", id: "$2" %}`),
+          }),
+        ]),
+      );
+    });
+
+    it('should keep using the quote type used', async () => {
+      const source = `{% content_for '█' %}`;
+      await expect(provider).to.complete(
+        source,
+        expect.arrayContaining([
+          expect.objectContaining({
+            label: 'block',
+            textEdit: expect.applyEdits(
+              source,
+              // single quotes everywhere
+              `{% content_for 'block', type: '$1', id: '$2' %}`,
+            ),
+          }),
+        ]),
+      );
+    });
+
+    it('should text edit complete inside the liquid liquid tag', async () => {
+      const source = `{% liquid
+        content_for "█"
+        echo "more content"
+      %}`;
+      const afterEdit = `{% liquid
+        content_for "block", type: "$1", id: "$2"
+        echo "more content"
+      %}`;
+      await expect(provider).to.complete(
+        source,
+        expect.arrayContaining([
+          expect.objectContaining({
+            label: 'block',
+            textEdit: expect.applyEdits(source, afterEdit),
+          }),
+        ]),
+      );
+    });
+  });
+
+  describe('when it has extra markup', () => {
+    it('should not text edit complete', async () => {
+      const source = '{% content_for "█", type: "some-type", id: "some-id" %}';
+      await expect(provider).to.complete(
+        source,
+        expect.arrayContaining([
+          expect.objectContaining({
+            label: 'block',
+            insertTextFormat: InsertTextFormat.PlainText,
+          }),
+        ]),
+      );
+    });
+  });
+});

package/src/completions/providers/ContentForCompletionProvider.ts

@@ -0,0 +1,113 @@
+import { LiquidString, NodeTypes } from '@platformos/liquid-html-parser';
+import {
+  CompletionItem,
+  CompletionItemKind,
+  InsertTextFormat,
+  Range,
+  TextEdit,
+} from 'vscode-languageserver';
+import { LiquidCompletionParams } from '../params';
+import { Provider } from './common';
+
+export class ContentForCompletionProvider implements Provider {
+  constructor() {}
+
+  async completions(params: LiquidCompletionParams): Promise<CompletionItem[]> {
+    if (!params.completionContext) return [];
+
+    const { document } = params;
+    const doc = document.textDocument;
+    const { node, ancestors } = params.completionContext;
+    const parentNode = ancestors.at(-1);
+
+    if (
+      !node ||
+      !parentNode ||
+      node.type !== NodeTypes.String ||
+      parentNode.type !== NodeTypes.ContentForMarkup
+    ) {
+      return [];
+    }
+
+    const options = [
+      {
+        keyword: 'block',
+        description: 'Renders a static theme block within `sections` or `theme blocks`.\n',
+        syntax: "content_for 'block', type: '$1', id: '$2'",
+      },
+      {
+        keyword: 'blocks',
+        description: `Renders block elements within sections or other blocks as configured in the JSON template or section groups.
+See [theme blocks](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks)
+to see how to create theme blocks that can be used this way.\n`,
+        syntax: `content_for 'blocks'`,
+      },
+    ];
+
+    const partial = node.value;
+    const isInLiquidLiquidTag = ancestors.some(
+      (node) => node.type === NodeTypes.LiquidTag && node.name === 'liquid',
+    );
+    const startPosition = node.position.start + 1; // after the quote
+    const endPosition = indexOf(
+      document.source,
+      // We want to maintain trailing whitespace to whatever it was before the completion
+      isInLiquidLiquidTag ? / *\n/g : /\s*-?%}/gm,
+      startPosition + partial.length,
+    );
+    const hasMarkup =
+      document.source
+        .slice(startPosition + partial.length, endPosition)
+        .replace(/^['"]/, '')
+        .trim() !== '';
+    const shouldCompleteSyntax = endPosition !== -1 && !hasMarkup;
+
+    return options
+      .filter(({ keyword }) => keyword.startsWith(partial))
+      .map(({ keyword, description, syntax }): CompletionItem => {
+        const item: CompletionItem = {
+          label: keyword,
+          kind: CompletionItemKind.Keyword,
+          insertTextFormat: InsertTextFormat.PlainText,
+          documentation: {
+            kind: 'markdown',
+            value: description,
+          },
+        };
+
+        if (shouldCompleteSyntax) {
+          const snippetText = getSnippetText(node, syntax);
+          item.insertTextFormat = InsertTextFormat.Snippet;
+          item.textEdit = TextEdit.replace(
+            Range.create(doc.positionAt(startPosition), doc.positionAt(endPosition)),
+            snippetText,
+          );
+        }
+
+        return item;
+      });
+  }
+}
+
+function getSnippetText(node: LiquidString, syntax: string): string {
+  // Language clients don't like it when the text edit starts before the word being completed
+  // So we make the snippet text start with the word being completed
+  return (
+    syntax
+      .replace(/^content_for '/, '')
+      // use the same quote type as the original string everywhere in the snippet
+      .replace(node.single ? /"/g : /'/g, node.single ? "'" : '"')
+  );
+}
+
+/**
+ * String.prototype.indexOf does not accept RegExp args...
+ * String.prototype.search does not accept fromIndex args...
+ *
+ * We want both.
+ */
+function indexOf(string: string, searchValue: RegExp, fromIndex: number): number {
+  searchValue.lastIndex = fromIndex;
+  const match = searchValue.exec(string);
+  return match ? match.index : -1;
+}