@platformos/codemirror-language-client 0.0.2

package/src/extensions/complete.spec.ts

@@ -0,0 +1,200 @@
+import { vi, expect, describe, it, beforeEach, assert } from 'vitest';
+import { EditorState, Extension } from '@codemirror/state';
+import { CompletionContext } from '@codemirror/autocomplete';
+import { clientFacet, fileUriFacet, serverCapabilitiesFacet } from './client';
+import { MockClient } from '../test/MockClient';
+import { CompletionItem, CompletionItemKind, CompletionList } from 'vscode-languageserver-protocol';
+import { textDocumentSync } from './textDocumentSync';
+import { complete, infoRendererFacet, lspComplete } from './complete';
+
+describe('Module: complete', () => {
+  const fileUri = 'browser://input.liquid';
+  let client: MockClient;
+  let state: EditorState;
+  let infoRenderer: any;
+  let doc: string;
+
+  beforeEach(() => {
+    doc = 'hello. ;';
+    client = new MockClient();
+    infoRenderer = vi.fn().mockReturnValue(null);
+    state = EditorState.create({
+      doc,
+      extensions: [
+        clientFacet.of(client),
+        serverCapabilitiesFacet.of({
+          completionProvider: {
+            triggerCharacters: ['.'],
+          },
+        }),
+        fileUriFacet.of(fileUri),
+        textDocumentSync,
+        infoRendererFacet.of(infoRenderer),
+        lspComplete(),
+      ],
+    });
+  });
+
+  it('should translate LSP completion responses into CodeMirror completion items', async () => {
+    const context = new CompletionContext(state, /* does not matter for mock test */ 0, true);
+    const promise = complete(context);
+
+    client.resolveRequest([
+      {
+        label: 'hello | world',
+        insertText: 'hello',
+        kind: CompletionItemKind.Text,
+      },
+      {
+        label: 'echo',
+        kind: CompletionItemKind.Function,
+        documentation: {
+          kind: 'markdown',
+          value: '### echo',
+        },
+      },
+      {
+        label: '"general.greeting" | t',
+        insertText: 'greeting',
+        textEdit: {
+          newText: '"general.greeting" | t',
+          range: {
+            start: { line: 0, character: 0 },
+            end: { line: 0, character: 3 },
+          },
+        },
+        kind: CompletionItemKind.Function,
+        documentation: {
+          kind: 'markdown',
+          value: '### echo',
+        },
+      },
+    ] as CompletionItem[]);
+    const results = await promise;
+
+    expect(results).toEqual({
+      from: 0,
+      options: [
+        {
+          label: 'hello',
+          displayLabel: 'hello | world',
+          type: 'text',
+          info: expect.any(Function),
+          apply: undefined,
+        },
+        {
+          label: 'echo',
+          displayLabel: 'echo',
+          type: 'function',
+          info: expect.any(Function),
+          apply: undefined,
+        },
+        {
+          displayLabel: '"general.greeting" | t',
+          label: 'greeting',
+          type: 'function',
+          info: expect.any(Function),
+          apply: expect.any(Function),
+        },
+      ],
+    });
+  });
+
+  it('should translate LSP completion list responses into CodeMirror completion items', async () => {
+    const context = new CompletionContext(state, /* does not matter for mock test */ 0, true);
+    const promise = complete(context);
+
+    client.resolveRequest({
+      isIncomplete: false,
+      items: [
+        {
+          label: 'hello | world',
+          insertText: 'hello',
+          kind: CompletionItemKind.Text,
+        },
+        {
+          label: 'echo',
+          kind: CompletionItemKind.Function,
+          documentation: {
+            kind: 'markdown',
+            value: '### echo',
+          },
+        },
+        {
+          label: '"general.greeting" | t',
+          insertText: 'greeting',
+          textEdit: {
+            newText: '"general.greeting" | t',
+            range: {
+              start: { line: 0, character: 0 },
+              end: { line: 0, character: 3 },
+            },
+          },
+          kind: CompletionItemKind.Function,
+          documentation: {
+            kind: 'markdown',
+            value: '### echo',
+          },
+        },
+      ],
+    } as CompletionList);
+    const results = await promise;
+
+    expect(results).toEqual({
+      from: 0,
+      options: [
+        {
+          label: 'hello',
+          displayLabel: 'hello | world',
+          type: 'text',
+          info: expect.any(Function),
+          apply: undefined,
+        },
+        {
+          label: 'echo',
+          displayLabel: 'echo',
+          type: 'function',
+          info: expect.any(Function),
+          apply: undefined,
+        },
+        {
+          displayLabel: '"general.greeting" | t',
+          label: 'greeting',
+          type: 'function',
+          info: expect.any(Function),
+          apply: expect.any(Function),
+        },
+      ],
+    });
+  });
+
+  it('should return null if not on a trigger character nor inside a word', async () => {
+    const context = new CompletionContext(state, doc.indexOf(';'), true);
+    const promise = complete(context);
+    assert(!client.pendingRequest);
+    const result = await promise;
+    expect(result).to.be.null;
+  });
+
+  it('should make a request to the backend if after a trigger character', async () => {
+    const context = new CompletionContext(state, doc.indexOf('.') + 1, true);
+    complete(context);
+    assert(client.pendingRequest);
+    client.resolveRequest(null);
+  });
+
+  it('should make a request to the backend if after a word character', async () => {
+    const context = new CompletionContext(state, doc.indexOf('h') + 1, true);
+    complete(context);
+    assert(client.pendingRequest);
+    client.resolveRequest(null);
+  });
+
+  it('should return null if nothing comes back', async () => {
+    const context = new CompletionContext(state, /* does not matter for mock test */ 0, true);
+    const promise = complete(context);
+    client.resolveRequest(null);
+    const results = await promise;
+    expect(results).to.eql(null);
+  });
+});

package/src/extensions/complete.ts

@@ -0,0 +1,274 @@
+import {
+  autocompletion,
+  CompletionContext,
+  CompletionResult,
+  CompletionInfo,
+  pickedCompletion,
+  Completion,
+  snippet,
+} from '@codemirror/autocomplete';
+import {
+  CompletionItem,
+  CompletionItemKind,
+  CompletionList,
+  CompletionRequest,
+  InsertTextFormat,
+  InsertReplaceEdit,
+  TextEdit,
+  CompletionTriggerKind,
+  CompletionContext as LSPCompletionContext,
+} from 'vscode-languageserver-protocol';
+import { clientFacet, fileUriFacet, serverCapabilitiesFacet } from './client';
+import { textDocumentField } from './textDocumentSync';
+import { Facet } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import { translateSnippet } from './snippet';
+
+type FirstArgType<F> = F extends (arg: infer A) => any ? A : never;
+export type AutocompleteOptions = Partial<FirstArgType<typeof autocompletion>>;
+
+export const lspComplete = (overrides: AutocompleteOptions = {}) =>
+  autocompletion({
+    activateOnTyping: true,
+    override: [complete],
+    maxRenderedOptions: 20,
+    ...overrides,
+  });
+
+/**
+ * An InfoRenderer would be equivalent to the Quick Info window in VS Code. It's the part of the completion
+ * window that shows you the docs about the thing that is currently selected.
+ *
+ * Takes a LSP CompletionItem as argument and returns a DOM node, optional and injected so that we can control
+ * how we render the info window from the rendering context.
+ */
+export type InfoRenderer = (completion: CompletionItem) => CompletionInfo;
+
+export const infoRendererFacet = Facet.define<InfoRenderer | undefined, InfoRenderer | undefined>({
+  static: true,
+  combine: (values) => values[0] ?? undefined,
+});
+
+export async function complete(context: CompletionContext): Promise<CompletionResult | null> {
+  const word = context.matchBefore(/\w+/);
+  const serverCapabilities = context.state.facet(serverCapabilitiesFacet.reader);
+  const triggerCharacters = serverCapabilities.completionProvider?.triggerCharacters ?? [];
+  const previousChar = context.state.doc.sliceString(context.pos - 1, context.pos);
+  const isTriggerCharacter = triggerCharacters.includes(previousChar);
+  const canComplete = isTriggerCharacter || word || context.pos === 0;
+  if (!canComplete) return null;
+
+  const client = context.state.facet(clientFacet.reader);
+  const fileUri = context.state.facet(fileUriFacet.reader);
+  const infoRenderer = context.state.facet(infoRendererFacet.reader);
+  const textDocument = context.state.field(textDocumentField);
+
+  const lspContext: LSPCompletionContext = isTriggerCharacter
+    ? { triggerKind: CompletionTriggerKind.TriggerCharacter, triggerCharacter: previousChar }
+    : { triggerKind: CompletionTriggerKind.Invoked };
+
+  const results = await client.sendRequest(CompletionRequest.type, {
+    textDocument: { uri: fileUri },
+    position: textDocument.positionAt(context.pos),
+    context: lspContext,
+  });
+
+  // No results
+  if (results === null || (Array.isArray(results) && results.length === 0)) return null;
+
+  return {
+    from: word?.from ?? context.pos,
+    options: items(results).map(toCodeMirrorCompletion(infoRenderer, textDocument)),
+  };
+}
+
+const toCodeMirrorCompletion =
+  (infoRenderer: InfoRenderer | undefined, textDocument: TextDocument) =>
+  (completionItem: CompletionItem): Completion => {
+    switch (completionItem.insertTextFormat) {
+      case InsertTextFormat.Snippet:
+        return {
+          label: completionItem.insertText ?? completionItem.label,
+          displayLabel: completionItem.label,
+          apply: applySnippet(completionItem as SnippetCompletionItem, textDocument),
+          type: convertLSPKindToCodeMirrorKind(completionItem.kind),
+          info: infoRenderer ? (_) => infoRenderer(completionItem) : undefined,
+        };
+
+      case InsertTextFormat.PlainText:
+      default: {
+        return {
+          label: completionItem.insertText ?? completionItem.label,
+          displayLabel: completionItem.label,
+          apply: hasApplicableTextEdit(completionItem)
+            ? (view, completion) => applyEdit(view, completion, completionItem, textDocument)
+            : undefined,
+          type: convertLSPKindToCodeMirrorKind(completionItem.kind),
+          info: infoRenderer ? (_) => infoRenderer(completionItem) : undefined,
+        };
+      }
+    }
+  };
+
+function hasApplicableTextEdit(
+  completionItem: CompletionItem,
+): completionItem is CompletionItem & { textEdit: NonNullable<CompletionItem['textEdit']> } {
+  return (
+    !!completionItem.textEdit &&
+    (TextEdit.is(completionItem.textEdit) || InsertReplaceEdit.is(completionItem.textEdit))
+  );
+}
+
+type SnippetCompletionItem = Omit<CompletionItem, 'insertTextFormat'> & {
+  insertTextFormat: typeof InsertTextFormat.Snippet;
+};
+
+const applySnippet = (item: SnippetCompletionItem, textDocument: TextDocument) => {
+  const { textEdit } = item;
+  let from: null | number = null;
+  let to: null | number = null;
+  let newText = '';
+
+  if (TextEdit.is(textEdit)) {
+    from = textDocument.offsetAt(textEdit.range.start);
+    to = textDocument.offsetAt(textEdit.range.end);
+    newText = textEdit.newText;
+  } else if (textEdit && InsertReplaceEdit.is(textEdit)) {
+    from = textDocument.offsetAt(textEdit.replace.start);
+    to = textDocument.offsetAt(textEdit.replace.end);
+    newText = textEdit.newText;
+  } else if (item.insertText) {
+    newText = item.insertText;
+  } else {
+    newText = item.label;
+  }
+
+  const template = translateSnippet(newText);
+
+  // Because we might replace text with textEdit, we can't use snippet as is.
+  // we'll need to infer the from/to from the textEdit.
+  const apply = snippet(template);
+  return (view: EditorView, completion: Completion, defaultFrom: number, defaultTo: number) => {
+    apply(view, completion, from ?? defaultFrom, to ?? defaultTo);
+  };
+};
+
+enum CMCompletionType {
+  Class = 'class',
+  Constant = 'constant',
+  Enum = 'enum',
+  Function = 'function',
+  Interface = 'interface',
+  Keyword = 'keyword',
+  Method = 'method',
+  Namespace = 'namespace',
+  Property = 'property',
+  Text = 'text',
+  Type = 'type',
+  Variable = 'variable',
+}
+
+function convertLSPKindToCodeMirrorKind(kind: CompletionItemKind | undefined): CMCompletionType {
+  if (!kind) return CMCompletionType.Text;
+  switch (kind) {
+    case CompletionItemKind.Constructor:
+    case CompletionItemKind.Class:
+      return CMCompletionType.Class;
+
+    case CompletionItemKind.Constant:
+      return CMCompletionType.Constant;
+
+    case CompletionItemKind.Enum:
+    case CompletionItemKind.EnumMember:
+      return CMCompletionType.Enum;
+
+    case CompletionItemKind.Snippet:
+    case CompletionItemKind.Function:
+      return CMCompletionType.Function;
+
+    case CompletionItemKind.Interface:
+      return CMCompletionType.Interface;
+
+    case CompletionItemKind.Operator:
+    case CompletionItemKind.Keyword:
+      return CMCompletionType.Keyword;
+
+    case CompletionItemKind.Method:
+      return CMCompletionType.Method;
+
+    case CompletionItemKind.File:
+    case CompletionItemKind.Folder:
+    case CompletionItemKind.Module:
+      return CMCompletionType.Namespace;
+
+    case CompletionItemKind.Property:
+    case CompletionItemKind.Reference:
+    case CompletionItemKind.Field:
+      return CMCompletionType.Property;
+
+    case CompletionItemKind.Struct:
+    case CompletionItemKind.TypeParameter:
+      return CMCompletionType.Type;
+
+    case CompletionItemKind.Event:
+    case CompletionItemKind.Value:
+    case CompletionItemKind.Variable:
+      return CMCompletionType.Variable;
+
+    case CompletionItemKind.Color:
+    case CompletionItemKind.Unit:
+    case CompletionItemKind.Text:
+    default:
+      return CMCompletionType.Text;
+  }
+}
+
+function applyEdit(
+  view: EditorView,
+  completion: Completion,
+  item: CompletionItem & { textEdit: NonNullable<CompletionItem['textEdit']> },
+  textDocument: TextDocument,
+) {
+  const { textEdit } = item;
+  let start = 0;
+  let end = 0;
+  let newText = '';
+
+  if (TextEdit.is(textEdit)) {
+    start = textDocument.offsetAt(textEdit.range.start);
+    end = textDocument.offsetAt(textEdit.range.end);
+    newText = textEdit.newText;
+  } else if (InsertReplaceEdit.is(textEdit)) {
+    start = textDocument.offsetAt(textEdit.replace.start);
+    end = textDocument.offsetAt(textEdit.replace.end);
+    newText = textEdit.newText;
+  }
+
+  view.dispatch({
+    // Tell the completion engine which item we chose
+    annotations: [pickedCompletion.of(completion)],
+    // Move cursor to after the text
+    selection: { anchor: start + newText.length, head: start + newText.length },
+    // Apply the text edit
+    changes: view.state.changes({
+      from: start,
+      to: end,
+      insert: newText,
+    }),
+  });
+}
+
+function isCompletionList(results: CompletionList | CompletionItem[]): results is CompletionList {
+  return (results as CompletionList).isIncomplete !== undefined;
+}
+
+function items(results: CompletionList | CompletionItem[]): CompletionItem[] {
+  if (isCompletionList(results)) {
+    return (results as CompletionList).items.map((item) => ({
+      ...results.itemDefaults,
+      ...item,
+    }));
+  }
+  return results;
+}

package/src/extensions/documentHighlights.spec.ts

@@ -0,0 +1,111 @@
+// @vitest-environment jsdom
+import { EditorState, Extension, Range, RangeSet, RangeValue } from '@codemirror/state';
+import { Decoration, DecorationSet, EditorView } from '@codemirror/view';
+import { assert, beforeEach, describe, expect, it } from 'vitest';
+import { DocumentHighlight } from 'vscode-languageserver-protocol';
+import { MockClient } from '../test/MockClient';
+import { clientFacet, fileUriFacet } from './client';
+import { getDecorations, highlightDeco, lspDocumentHighlights } from './documentHighlights';
+import { textDocumentSync } from './textDocumentSync';
+
+describe('Module: documentHighlights', () => {
+  const fileUri = 'browser://input.liquid';
+  let client: MockClient;
+  let extensions: Extension;
+  let view: EditorView;
+  let hoverRenderer: any;
+
+  beforeEach(() => {
+    client = new MockClient({}, { documentHighlightProvider: true });
+    extensions = [
+      clientFacet.of(client),
+      fileUriFacet.of(fileUri),
+      textDocumentSync,
+      lspDocumentHighlights(),
+    ];
+    view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello world',
+        extensions,
+      }),
+    });
+  });
+
+  it('should translate LSP Document Highlights into a CodeMirror DecorationSet', async () => {
+    const promise = getDecorations(view);
+    const highlightsResponse: DocumentHighlight[] = [
+      {
+        range: {
+          start: { line: 0, character: 0 },
+          end: { line: 0, character: 5 },
+        },
+      },
+    ];
+
+    client.resolveRequest(highlightsResponse);
+    const result = await promise;
+    const actual = toArray(result);
+    const expected = toArray(Decoration.set([highlightDeco.range(0, 5)]));
+    expect(actual).to.eql(expected);
+  });
+
+  it('should sort the decorations', async () => {
+    const promise = getDecorations(view);
+    const highlightsResponse: DocumentHighlight[] = [
+      {
+        range: {
+          start: { line: 0, character: 5 },
+          end: { line: 0, character: 10 },
+        },
+      },
+      {
+        range: {
+          start: { line: 0, character: 0 },
+          end: { line: 0, character: 5 },
+        },
+      },
+    ];
+
+    client.resolveRequest(highlightsResponse);
+    const result = await promise;
+    expect(toArray(result)).to.eql(
+      toArray(Decoration.set([highlightDeco.range(0, 5), highlightDeco.range(5, 10)])),
+    );
+  });
+
+  it('should return a Decoration.none DecorationSet', async () => {
+    const promise = getDecorations(view);
+    client.resolveRequest(null);
+    const result = await promise;
+    expect(toArray(result)).to.eql(toArray(Decoration.none));
+  });
+
+  /**
+   * I wish CM didn't think that their implementation of iterators was better
+   * than the built-in one. Makes testing that stuff really hard for what seems
+   * like an obscure reason.
+   *
+   * > A range cursor is an object that moves to the next range every time you
+   * > call next on it. Note that, unlike ES6 iterators, these start out pointing
+   * > at the first element, so you should call next only after reading the first
+   * > range (if any).
+   *
+   * Also, RangeSet.eq doesn't seem to work. Which is why I decided to take this
+   * approach.
+   */
+  function* toIterator(decoSet: DecorationSet): Iterable<Range<Decoration>> {
+    let iter = decoSet.iter();
+    if (iter.value === null) {
+      return;
+    }
+
+    do {
+      yield { from: iter.from, to: iter.to, value: iter.value };
+      iter.next();
+    } while (iter.value !== null);
+  }
+
+  function toArray(decoSet: DecorationSet): Range<Decoration>[] {
+    return Array.from(toIterator(decoSet));
+  }
+});

package/src/extensions/documentHighlights.ts

@@ -0,0 +1,91 @@
+/**
+ * This extension requests LSP Document Highlights [1] when the user types or
+ * change its code selection.
+ *
+ * Those are then transformed into CodeMirror decorations and applied to the editor.
+ *
+ * [1]: https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#textDocument_documentHighlight
+ */
+import { Extension, Prec, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, DecorationSet, EditorView } from '@codemirror/view';
+import { DocumentHighlightRequest } from 'vscode-languageserver-protocol';
+import { clientFacet, fileUriFacet } from './client';
+import { textDocumentField } from './textDocumentSync';
+
+// We will use this CSS class to decorate all document highlights
+export const documentHighlightsClass = 'cmlc-document-highlights';
+export const highlightDeco = Decoration.mark({ class: documentHighlightsClass });
+const highlightStyles = Prec.low(
+  EditorView.theme({
+    [`.${documentHighlightsClass}`]: {
+      // Set background color to a light gray that matches a subtle highlight on
+      // a light theme
+      'background-color': 'rgba(0,0,0,0.1)',
+    },
+  }),
+);
+
+const setDocumentHighlights = StateEffect.define<DecorationSet>();
+const documentHighlightsStateField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(value, tr) {
+    let updatedValue = value;
+
+    for (const effect of tr.effects) {
+      if (effect.is(setDocumentHighlights)) {
+        updatedValue = effect.value;
+      }
+    }
+
+    return updatedValue;
+  },
+  // This is some CM obscure API shit that registers this state field
+  // into the CM state and makes it so CM will show the decorations
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+export async function getDecorations(view: EditorView): Promise<DecorationSet> {
+  const client = view.state.facet(clientFacet.reader);
+  const uri = view.state.facet(fileUriFacet.reader);
+  const textDocument = view.state.field(textDocumentField);
+
+  // If the client doesn't support those requests, don't ask for them.
+  if (!client.serverCapabilities?.documentHighlightProvider) {
+    return Decoration.none;
+  }
+
+  const results = await client.sendRequest(DocumentHighlightRequest.type, {
+    textDocument: { uri },
+    position: textDocument.positionAt(view.state.selection.main.from),
+  });
+
+  if (!results) {
+    return Decoration.none;
+  }
+
+  const decorations = results
+    .map((highlight) => ({
+      from: textDocument.offsetAt(highlight.range.start),
+      to: textDocument.offsetAt(highlight.range.end),
+    }))
+    .sort((a, b) => a.from - b.from) // CM wants them sorted ascending or else it freaks out
+    .map(({ from, to }) => highlightDeco.range(from, to));
+
+  return Decoration.set(decorations);
+}
+
+export function lspDocumentHighlights(): Extension {
+  const decorationHandler = EditorView.updateListener.of((update) => {
+    // We only want to query the language server for document highlights
+    // the document has changed or the selection has moved
+    if (update.docChanged || update.selectionSet) {
+      getDecorations(update.view).then((deco) => {
+        update.view.dispatch({
+          effects: setDocumentHighlights.of(deco),
+        });
+      });
+    }
+  });
+
+  return [documentHighlightsStateField, decorationHandler, highlightStyles];
+}