@platformos/codemirror-language-client 0.0.2

package/src/extensions/hover.spec.ts

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { EditorState, Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MockClient } from '../test/MockClient';
+import { clientFacet, fileUriFacet } from './client';
+import { hover, hoverRendererFacet, lspHover } from './hover';
+import { textDocumentSync } from './textDocumentSync';
+import { Hover } from 'vscode-languageserver-protocol';
+
+describe('Module: hover', () => {
+  const fileUri = 'browser://input.liquid';
+  let client: MockClient;
+  let extensions: Extension;
+  let view: EditorView;
+  let hoverRenderer: any;
+
+  beforeEach(() => {
+    client = new MockClient();
+    hoverRenderer = vi.fn().mockReturnValue(null);
+    extensions = [
+      clientFacet.of(client),
+      fileUriFacet.of(fileUri),
+      textDocumentSync,
+      hoverRendererFacet.of(hoverRenderer),
+      lspHover(),
+    ];
+    view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello world',
+        extensions,
+      }),
+    });
+  });
+
+  it('should translate LSP hover requests into CodeMirror hover tooltips', async () => {
+    const promise = hover(view, /* doesnt matter for unit test */ 0, 1);
+
+    const hoverResponse: Hover = {
+      contents: {
+        kind: 'markdown',
+        value: '### echo hello world',
+      },
+    };
+
+    client.resolveRequest(hoverResponse);
+    const result = await promise;
+
+    expect(result).toEqual({
+      pos: 0,
+      end: 5,
+      above: true,
+      arrow: false,
+      create: expect.any(Function),
+    });
+
+    result!.create(view);
+
+    expect(hoverRenderer).toHaveBeenCalledWith(view, hoverResponse);
+  });
+
+  it('should return null if nothing comes back', async () => {
+    const promise = hover(view, 0, 1);
+    client.resolveRequest(null);
+    const result = await promise;
+    expect(result).to.eql(null);
+  });
+});

package/src/extensions/hover.ts

@@ -0,0 +1,66 @@
+import { Hover, HoverRequest } from 'vscode-languageserver-protocol';
+import { clientFacet, fileUriFacet } from './client';
+import { textDocumentField } from './textDocumentSync';
+import { Facet } from '@codemirror/state';
+import { EditorView, Tooltip, TooltipView, hoverTooltip } from '@codemirror/view';
+
+type SecondArgType<F> = F extends (_: any, arg: infer A) => any ? A : never;
+export type HoverOptions = Partial<SecondArgType<typeof hoverTooltip>>;
+
+/**
+ * A HoverRenderer would be equivalent to the Hover window in VS Code. It
+ * shows the documentation for the symbol under the cursor.
+ *
+ * Takes a LSP Hover as argument and must return a TooltipView (type {} and autocomplete for required params).
+ */
+export type HoverRenderer = (view: EditorView, hover: Hover) => TooltipView;
+
+export const hoverRendererFacet = Facet.define<
+  HoverRenderer | undefined,
+  HoverRenderer | undefined
+>({
+  static: true,
+  combine: (values) => values[0] ?? undefined,
+});
+
+export const lspHover = (overrides: HoverOptions = {}) =>
+  hoverTooltip(hover, {
+    ...overrides,
+  });
+
+export async function hover(view: EditorView, pos: number, _side: -1 | 1): Promise<Tooltip | null> {
+  const client = view.state.facet(clientFacet.reader);
+  const fileUri = view.state.facet(fileUriFacet.reader);
+  const hoverRenderer = view.state.facet(hoverRendererFacet.reader);
+  const textDocument = view.state.field(textDocumentField);
+
+  if (!hoverRenderer) return null;
+
+  const result = await client.sendRequest(HoverRequest.type, {
+    textDocument: { uri: fileUri },
+    position: textDocument.positionAt(pos),
+  });
+
+  // No results
+  if (result === null) return null;
+
+  let { from, to, text } = view.state.doc.lineAt(pos);
+  let start = pos;
+  let end = pos;
+  if (result.range) {
+    start = textDocument.offsetAt(result.range.start);
+    end = textDocument.offsetAt(result.range.end);
+  } else {
+    // basic "current word" algo
+    while (start > from && /\w/.test(text[start - from - 1])) start--;
+    while (end < to && /\w/.test(text[end - from])) end++;
+  }
+
+  return {
+    pos: start,
+    end: end,
+    above: true,
+    create: (view) => hoverRenderer(view, result),
+    arrow: false,
+  };
+}

package/src/extensions/index.ts

@@ -0,0 +1,19 @@
+export { clientFacet, fileUriFacet, serverCapabilitiesFacet } from './client';
+export {
+  AutocompleteOptions,
+  InfoRenderer,
+  complete,
+  infoRendererFacet,
+  lspComplete,
+} from './complete';
+export { documentHighlightsClass, lspDocumentHighlights } from './documentHighlights';
+export { HoverOptions, HoverRenderer, hover, lspHover } from './hover';
+export {
+  DiagnosticRenderer,
+  LinterOptions,
+  diagnosticRendererFacet,
+  diagnosticsFacet,
+  lspDiagnosticsField,
+  lspLinter,
+} from './lspLinter';
+export { textDocumentField, textDocumentSync } from './textDocumentSync';

package/src/extensions/lspLinter.spec.ts

@@ -0,0 +1,156 @@
+// @vitest-environment jsdom
+import { expect, describe, it, beforeEach, afterEach } from 'vitest';
+import { EditorState, Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { Diagnostic as CodeMirrorDiagnostic } from '@codemirror/lint';
+import { diagnosticsFacet, lspLinter } from './lspLinter';
+import { clientFacet, fileUriFacet } from './client';
+import { MockClient } from '../test/MockClient';
+import { DiagnosticSeverity, PublishDiagnosticsNotification } from 'vscode-languageserver-protocol';
+
+describe('Module: lspLinter', () => {
+  const fileUri = 'browser://input.liquid';
+  let client: MockClient;
+  let extensions: Extension;
+  let view: EditorView;
+
+  beforeEach(() => {
+    client = new MockClient();
+    extensions = [clientFacet.of(client), fileUriFacet.of(fileUri), lspLinter()];
+    view = new EditorView({
+      state: EditorState.create({
+        doc: 'hello world',
+        extensions,
+      }),
+    });
+  });
+
+  afterEach(() => {
+    view.destroy();
+  });
+
+  describe('When it receives up to date diagnostics from the server', () => {
+    beforeEach(async () => {
+      client.triggerNotification(PublishDiagnosticsNotification.type, {
+        uri: fileUri,
+        version: 0,
+        diagnostics: [
+          {
+            message: 'hello not accepted',
+            severity: DiagnosticSeverity.Error,
+            range: {
+              start: {
+                line: 0,
+                character: 0,
+              },
+              end: {
+                line: 0,
+                character: 'hello'.length,
+              },
+            },
+          },
+        ],
+      });
+    });
+
+    it('should make them available in the diagnosticState', () => {
+      const codeMirrorDiagnostics = view.state.facet(diagnosticsFacet.reader);
+      expect(codeMirrorDiagnostics).to.have.lengthOf(1);
+      const expectedDiagnostic: CodeMirrorDiagnostic = {
+        from: 0,
+        to: 'hello'.length,
+        message: 'hello not accepted',
+        renderMessage: undefined,
+        severity: 'error',
+      };
+      expect(codeMirrorDiagnostics[0]).to.eql(expectedDiagnostic);
+    });
+  });
+
+  describe('When it receives out of date diagnostics from the server', () => {
+    beforeEach(async () => {
+      // Here we dispatch a doc change, this internally increments the
+      // version value of the textDocument by 1.
+      view.dispatch(
+        view.state.update({
+          changes: {
+            from: 0,
+            to: 'hello world'.indexOf(' '),
+            insert: 'hi',
+          },
+        }),
+      );
+
+      // Here we dispatch a set of diagnostics for the old state
+      client.triggerNotification(PublishDiagnosticsNotification.type, {
+        uri: fileUri,
+        version: 0, // Note: since the file was modified, those diagnostics are out of date
+        diagnostics: [
+          {
+            message: 'hello not accepted',
+            severity: DiagnosticSeverity.Error,
+            range: {
+              start: {
+                line: 0,
+                character: 0,
+              },
+              end: {
+                line: 0,
+                character: 'hello'.length,
+              },
+            },
+          },
+        ],
+      });
+    });
+
+    it('should discard the stale diagnostics', () => {
+      const codeMirrorDiagnostics = view.state.facet(diagnosticsFacet.reader);
+      expect(codeMirrorDiagnostics).to.have.lengthOf(0);
+    });
+  });
+
+  describe('When it changes the document and the diagnostics are suddenly stale', () => {
+    beforeEach(async () => {
+      // Here we dispatch a set of diagnostics for the state, they are up to date
+      client.triggerNotification(PublishDiagnosticsNotification.type, {
+        uri: fileUri,
+        version: 0,
+        diagnostics: [
+          {
+            message: 'hello not accepted',
+            severity: DiagnosticSeverity.Error,
+            range: {
+              start: {
+                line: 0,
+                character: 0,
+              },
+              end: {
+                line: 0,
+                character: 'hello'.length,
+              },
+            },
+          },
+        ],
+      });
+
+      // Here we dispatch a doc change. This internally increments the
+      // version value of the textDocument by 1. The diagnostics are now
+      // stale.
+      view.dispatch(
+        view.state.update({
+          changes: {
+            from: 0,
+            to: 'hello world'.indexOf(' '),
+            insert: 'hi',
+          },
+        }),
+      );
+    });
+
+    it('should discard the stale diagnostics', () => {
+      const codeMirrorDiagnostics = view.state.facet(diagnosticsFacet.reader);
+      expect(codeMirrorDiagnostics).to.have.lengthOf(0);
+    });
+  });
+});

package/src/extensions/lspLinter.ts

@@ -0,0 +1,154 @@
+import { Diagnostic as CodeMirrorDiagnostic, linter } from '@codemirror/lint';
+import { Extension, Facet, StateEffect } from '@codemirror/state';
+import { EditorView, PluginValue, ViewPlugin } from '@codemirror/view';
+import {
+  Disposable,
+  Diagnostic as LSPDiagnostic,
+  DiagnosticSeverity as LSPSeverity,
+  PublishDiagnosticsNotification,
+} from 'vscode-languageserver-protocol';
+import { TextDocument } from 'vscode-languageserver-textdocument';
+
+import { simpleStateField } from '../utils/simpleStateField';
+import { clientFacet, fileUriFacet } from './client';
+import { textDocumentField } from './textDocumentSync';
+
+class DiagnosticsPlugin implements PluginValue {
+  private handlers: Disposable[];
+
+  constructor(view: EditorView) {
+    const client = view.state.facet(clientFacet.reader);
+    const fileUri = view.state.facet(fileUriFacet.reader);
+    this.handlers = [];
+    this.handlers.push(
+      client.onNotification(PublishDiagnosticsNotification.type, (params) => {
+        if (params.uri !== fileUri) return;
+        view.dispatch({
+          effects: [
+            setLSPDiagnosticsVersion.of(params.version ?? null),
+            setLSPDiagnostics.of(params.diagnostics),
+          ],
+        });
+      }),
+    );
+  }
+
+  destroy() {
+    this.handlers.forEach((disposable) => disposable.dispose());
+  }
+}
+
+export const setLSPDiagnosticsVersion = StateEffect.define<number | null>();
+export const lspDiagnosticsVersionField = simpleStateField(setLSPDiagnosticsVersion, null);
+
+export const setLSPDiagnostics = StateEffect.define<LSPDiagnostic[]>();
+export const lspDiagnosticsField = simpleStateField(setLSPDiagnostics, []);
+
+export const diagnosticsFacet = Facet.define<CodeMirrorDiagnostic[], CodeMirrorDiagnostic[]>({
+  combine: (values) => values[0],
+});
+
+export type DiagnosticRenderer = (lspDiagnostic: LSPDiagnostic) => Node;
+
+export const diagnosticRendererFacet = Facet.define<
+  DiagnosticRenderer | undefined,
+  DiagnosticRenderer | undefined
+>({
+  combine: (values) => (values.length > 0 ? values[0] : undefined),
+});
+
+export const computedCodeMirrorDiagnosticsValueProvider = diagnosticsFacet.compute(
+  [textDocumentField, lspDiagnosticsField, lspDiagnosticsVersionField],
+  (state) => {
+    const doc = state.field(textDocumentField);
+    const lspDiagnosticsVersion = state.field(lspDiagnosticsVersionField);
+
+    // If the diagnostics version and doc version don't match, it means
+    // the diagnostics are stale.
+    if (lspDiagnosticsVersion !== doc.version) {
+      return [];
+    }
+
+    const lspDiagnostics = state.field(lspDiagnosticsField);
+    const diagnosticRenderer = state.facet(diagnosticRendererFacet.reader);
+    return lspDiagnostics.map((diagnostic) =>
+      lspToCodeMirrorDiagnostic(diagnostic, doc, diagnosticRenderer),
+    );
+  },
+);
+
+type SecondArgType<F> = F extends (_: any, second: infer A) => any ? A : never;
+
+export type LinterOptions = SecondArgType<typeof linter>;
+
+export const diagnosticsLinter = (overrides: LinterOptions) =>
+  linter(
+    (view) => {
+      const diagnostics = view.state.facet(diagnosticsFacet.reader);
+      return diagnostics;
+    },
+    {
+      delay: 100,
+      needsRefresh(update) {
+        const currVersion = update.state.field(lspDiagnosticsVersionField);
+        const prevVersion = update.startState.field(lspDiagnosticsVersionField);
+
+        // Checking against any kind of changes otherwise the squiggly line disappears!!
+        return (
+          update.geometryChanged ||
+          update.viewportChanged ||
+          update.heightChanged ||
+          update.focusChanged ||
+          update.docChanged ||
+          update.transactions[0]?.reconfigured ||
+          prevVersion !== currVersion
+        );
+      },
+      ...overrides,
+    },
+  );
+export const diagnosticsPlugin = ViewPlugin.fromClass(DiagnosticsPlugin);
+
+export const lspLinter = (linterOptions: LinterOptions = {}): Extension => [
+  textDocumentField,
+  lspDiagnosticsField,
+  lspDiagnosticsVersionField,
+  computedCodeMirrorDiagnosticsValueProvider,
+  diagnosticsLinter(linterOptions),
+  diagnosticsPlugin,
+];
+
+type CodeMirrorSeverity = 'info' | 'warning' | 'error';
+function lspToCodeMirrorSeverity(severity: LSPSeverity | undefined): CodeMirrorSeverity {
+  switch (severity) {
+    case LSPSeverity.Error: {
+      return 'error';
+    }
+
+    case LSPSeverity.Warning: {
+      return 'warning';
+    }
+
+    case LSPSeverity.Hint:
+    case LSPSeverity.Information:
+    default: {
+      return 'info';
+    }
+  }
+}
+
+function lspToCodeMirrorDiagnostic(
+  lspDiagnostic: LSPDiagnostic,
+  textDocument: TextDocument,
+  diagnosticRenderer: DiagnosticRenderer | undefined,
+): CodeMirrorDiagnostic {
+  const { range, message, severity } = lspDiagnostic;
+  const { start, end } = range;
+  return {
+    from: textDocument.offsetAt(start),
+    to: textDocument.offsetAt(end),
+    message,
+    severity: lspToCodeMirrorSeverity(severity),
+    renderMessage: diagnosticRenderer ? () => diagnosticRenderer(lspDiagnostic) : undefined,
+  };
+}

package/src/extensions/snippet.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { translateSnippet } from './snippet';
+
+describe('Module: snippets', () => {
+  describe('Unit: translateSnippet', () => {
+    it('translate $0 to $99', () => {
+      expect(translateSnippet('$0')).to.equal('${99}');
+    });
+
+    it('handles $1, $2, $3 propertly', () => {
+      expect(translateSnippet('def $1, $2, $3, $0 end')).to.equal(
+        'def ${1}, ${2}, ${3}, ${99} end',
+      );
+    });
+
+    it('handles placeholders properly', () => {
+      expect(translateSnippet('def ${1:hi}, ${2:hi}, $0 end')).to.equal(
+        'def ${1:hi}, ${2:hi}, ${99} end',
+      );
+    });
+
+    it('appends $99 at the end of the string if $0 is not present', () => {
+      expect(translateSnippet('def $1 end')).to.equal('def ${1} end${99}');
+    });
+
+    // CodeMirror doesn't support VS Code's ${2:$1} syntax, so we gotta do something about it.
+    it('applies a fallback strategy when placeholders refer to other placeholders', () => {
+      expect(translateSnippet('${1:hi} ${2:oh$1no}')).to.equal('${1:hi} ${2:ohno}${99}');
+    });
+  });
+});

package/src/extensions/snippet.ts

@@ -0,0 +1,42 @@
+import { MapMode, RangeSet, RangeValue, StateEffect, StateField, Range } from '@codemirror/state';
+
+/**
+ * Syntax is $1, ${2}, ${3:foo}, $0
+ * https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#snippet_syntax
+ */
+export type LSPSnippet = string;
+
+/**
+ * Syntax is ${placeholder} or ${1:placeholder} or #{} or ${}
+ * https://codemirror.net/docs/ref/#autocomplete.snippet
+ */
+export type CodeMirrorSnippet = string;
+
+/**
+ * This function takes a snippet from the language server and transforms it
+ * into the format that CodeMirror expects.
+ *
+ * There are small nuances w.r.t. $0 but that shouldn't be too much of a
+ * problem. ($0 is the "end" cursor position in LSP, CM doesn't have that... so
+ * we convert $0 to ${99} :D)
+ */
+export function translateSnippet(snippet: LSPSnippet): CodeMirrorSnippet {
+  let fixed = snippet.replace(/\$(\d)+/g, (_match, index) => {
+    return '${' + (Number(index) === 0 ? '99' : index) + '}';
+  });
+
+  // Remove references to other placeholders in placeholders. CodeMirror doesn't
+  // support those and it's a PITA to implement differently.
+  fixed = fixed.replace(
+    /\$\{(\d+):([^}$]*)(\$\{\d+\})([^}$]*)\}/g,
+    (_match, index, pre, ref, post) => {
+      return '${' + index + ':' + pre + post + '}';
+    },
+  );
+
+  if (fixed.includes('${99}')) {
+    return fixed;
+  } else {
+    return fixed + '${99}';
+  }
+}