@platformos/codemirror-language-client 0.0.2

package/src/extensions/textDocumentSync.spec.ts

@@ -0,0 +1,188 @@
+// @vitest-environment jsdom
+import { expect, describe, it, beforeEach, afterEach } from 'vitest';
+import { EditorState, Extension, StateEffect } from '@codemirror/state';
+import { textDocumentField, textDocumentSync } from './textDocumentSync';
+import { clientFacet, fileUriFacet } from './client';
+import { MockClient } from '../test/MockClient';
+import {
+  DidChangeTextDocumentNotification,
+  DidCloseTextDocumentNotification,
+  DidOpenTextDocumentNotification,
+} from 'vscode-languageserver-protocol';
+import { EditorView } from '@codemirror/view';
+
+describe('Module: textDocumentField', () => {
+  let state;
+
+  it('should instantiate the document with a version', () => {
+    state = EditorState.create({
+      doc: 'hello world',
+      extensions: [fileUriFacet.of('browser://input.liquid'), textDocumentSync],
+    });
+
+    const t1 = state.field(textDocumentField);
+    expect(t1.version).to.equal(0);
+  });
+
+  it('should increase the version if the document changes', () => {
+    state = EditorState.create({
+      doc: 'hello world',
+      extensions: [fileUriFacet.of('browser://input.liquid'), textDocumentSync],
+    });
+
+    const t1 = state.field(textDocumentField);
+    state = state.update({
+      changes: {
+        from: 0,
+        to: 'hello world'.indexOf(' '),
+        insert: 'hi',
+      },
+    }).state;
+
+    const t2 = state.field(textDocumentField);
+    expect(t1).not.to.equal(t2);
+    expect(t2.version).to.equal(t1.version + 1);
+  });
+
+  it('should not increase the version if the document does not change', () => {
+    state = EditorState.create({
+      doc: 'hello world',
+      extensions: [fileUriFacet.of('browser://input.liquid'), textDocumentSync],
+    });
+
+    const t1 = state.field(textDocumentField);
+    state = state.update({
+      changes: {
+        from: 0,
+        to: 0,
+        insert: '',
+      },
+    }).state;
+
+    const t2 = state.field(textDocumentField);
+    expect(t1).to.equal(t2);
+  });
+
+  it('should reset the version if the file URI changes', () => {
+    state = EditorState.create({
+      doc: 'hello world',
+      extensions: [fileUriFacet.of('browser://input.liquid'), textDocumentSync],
+    });
+
+    const t1 = state.field(textDocumentField);
+    state = state.update({
+      effects: StateEffect.reconfigure.of([
+        fileUriFacet.of('browser://renamed.liquid'),
+        textDocumentSync,
+      ]),
+    }).state;
+
+    const t2 = state.field(textDocumentField);
+    expect(t1).not.to.equal(t2);
+    expect(t1.uri).to.equal('browser://input.liquid');
+    expect(t1.version).to.equal(0);
+    expect(t2.uri).to.equal('browser://renamed.liquid');
+    expect(t2.version).to.equal(0);
+  });
+});
+
+describe('Module: TextDocumentSyncPlugin', () => {
+  let state: EditorState, client: MockClient, extensions: Extension;
+  let view: EditorView;
+
+  beforeEach(() => {
+    client = new MockClient();
+    extensions = [
+      clientFacet.of(client),
+      fileUriFacet.of('browser://input.liquid'),
+      textDocumentSync,
+    ];
+    state = EditorState.create({
+      doc: 'hello world',
+      extensions,
+    });
+    view = new EditorView({
+      state,
+    });
+  });
+
+  afterEach(() => {
+    view.destroy();
+  });
+
+  it('should send a textDocument/didOpen notification on start', () => {
+    expect(client.sendNotification).toBeCalledTimes(1);
+    expect(client.sendNotification).toBeCalledWith(DidOpenTextDocumentNotification.type, {
+      textDocument: {
+        uri: 'browser://input.liquid',
+        version: 0,
+        languageId: 'liquid',
+        text: 'hello world',
+      },
+    });
+  });
+
+  it('should send textDocument/didChange notifications on change', () => {
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: 'hello world'.indexOf(' '),
+        insert: 'hi',
+      },
+    });
+
+    expect(client.sendNotification).toBeCalledTimes(2);
+    expect(client.sendNotification).toBeCalledWith(DidChangeTextDocumentNotification.type, {
+      textDocument: {
+        uri: 'browser://input.liquid',
+        version: 1,
+      },
+      contentChanges: [
+        {
+          text: 'hi world',
+        },
+      ],
+    });
+  });
+
+  it('should send textDocument/didClose notification when destroyed', () => {
+    view.dispatch({
+      effects: StateEffect.reconfigure.of([
+        clientFacet.of(client),
+        fileUriFacet.of('browser://input.liquid'),
+      ]),
+    });
+
+    expect(client.sendNotification).toBeCalledTimes(2);
+    expect(client.sendNotification).toBeCalledWith(DidCloseTextDocumentNotification.type, {
+      textDocument: {
+        uri: 'browser://input.liquid',
+      },
+    });
+  });
+
+  it('should send textDocument/didClose and textDocument/didOpen notifications when the file URI changes', () => {
+    view.dispatch({
+      effects: StateEffect.reconfigure.of([
+        clientFacet.of(client),
+        fileUriFacet.of('browser://other-file.liquid'),
+        textDocumentSync,
+      ]),
+    });
+
+    expect(client.sendNotification).toBeCalledTimes(3);
+    expect(client.sendNotification).toBeCalledWith(DidCloseTextDocumentNotification.type, {
+      textDocument: {
+        uri: 'browser://input.liquid',
+      },
+    });
+    expect(client.sendNotification).toBeCalledWith(DidOpenTextDocumentNotification.type, {
+      textDocument: {
+        uri: 'browser://other-file.liquid',
+        version: 0,
+        languageId: 'liquid',
+        text: 'hello world',
+      },
+    });
+  });
+});

package/src/extensions/textDocumentSync.ts

@@ -0,0 +1,138 @@
+import { TextDocument } from 'vscode-languageserver-textdocument';
+import {
+  DidChangeTextDocumentNotification,
+  DidCloseTextDocumentNotification,
+  DidOpenTextDocumentNotification,
+} from 'vscode-languageserver-protocol';
+import { Extension, StateField } from '@codemirror/state';
+import { EditorView, PluginValue, ViewPlugin, ViewUpdate } from '@codemirror/view';
+
+import { AbstractLanguageClient } from '../LanguageClient';
+
+import { clientFacet, fileUriFacet } from './client';
+
+class TextDocumentSyncPlugin implements PluginValue {
+  private client: AbstractLanguageClient;
+  private uri: string;
+
+  constructor(view: EditorView) {
+    const doc = view.state.field(textDocumentField);
+    this.client = view.state.facet(clientFacet);
+    this.uri = doc.uri;
+    this.openFile(doc);
+  }
+
+  update(update: ViewUpdate) {
+    const doc = update.state.field(textDocumentField);
+    const prevFileUri = update.startState.facet(fileUriFacet.reader);
+    const currFileUri = update.state.facet(fileUriFacet.reader);
+
+    if (prevFileUri !== currFileUri) {
+      this.closeFile(prevFileUri);
+      this.openFile(doc);
+      this.uri = currFileUri;
+    } else if (update.docChanged) {
+      this.changeFile(doc);
+    }
+  }
+
+  destroy() {
+    this.closeFile(this.uri);
+  }
+
+  private openFile(doc: TextDocument) {
+    // Here we initialize the state in the Language Server by sending a
+    // textDocument/didOpen notification.
+    this.client.sendNotification(DidOpenTextDocumentNotification.type, {
+      textDocument: {
+        uri: doc.uri,
+        version: doc.version,
+        languageId: doc.languageId,
+        text: doc.getText(),
+      },
+    });
+  }
+
+  private changeFile(doc: TextDocument) {
+    // Here we send the textDocument/didChange notification to the server
+    // to tell it the file was modified. The version attribute is used to
+    // verify if the server and client are in sync (if the versions don't
+    // match, they aren't).
+    this.client.sendNotification(DidChangeTextDocumentNotification.type, {
+      textDocument: {
+        uri: doc.uri,
+        version: doc.version,
+      },
+      contentChanges: [
+        {
+          text: doc.getText(),
+        },
+      ],
+    });
+  }
+
+  private closeFile(uri: string) {
+    this.client.sendNotification(DidCloseTextDocumentNotification.type, {
+      textDocument: {
+        uri,
+      },
+    });
+  }
+}
+
+export const textDocumentField = StateField.define<TextDocument>({
+  create(state) {
+    const fileUri = state.facet(fileUriFacet.reader);
+    const version = 0;
+    return TextDocument.create(
+      fileUri,
+      languageId(fileUri),
+      version,
+      state.doc.sliceString(0, state.doc.length),
+    );
+  },
+  update(previousValue, tr) {
+    const prevFileUri = tr.startState.facet(fileUriFacet.reader);
+    const currFileUri = tr.state.facet(fileUriFacet.reader);
+    const isNewFile = prevFileUri !== currFileUri;
+    const doc = tr.newDoc;
+    if (isNewFile) {
+      const version = 0;
+      return TextDocument.create(
+        currFileUri,
+        languageId(currFileUri),
+        version,
+        doc.sliceString(0, doc.length),
+      );
+    } else if (tr.docChanged) {
+      return TextDocument.create(
+        previousValue.uri,
+        previousValue.languageId,
+        previousValue.version + 1,
+        doc.sliceString(0, doc.length),
+      );
+    }
+    return previousValue;
+  },
+});
+
+const textDocumentSyncPlugin = ViewPlugin.fromClass(TextDocumentSyncPlugin);
+
+// Implicitly depends on the fileUriFacet and clientFacet...
+// Don't know how that's typically handled yet...
+export const textDocumentSync: Extension = [textDocumentField, textDocumentSyncPlugin];
+
+function languageId(uri: string): string {
+  const lowerCased = uri.toLowerCase();
+  if (lowerCased.endsWith('.liquid')) {
+    return 'liquid';
+  } else if (lowerCased.endsWith('.graphql')) {
+    return 'graphql';
+  } else if (lowerCased.endsWith('.js')) {
+    return 'javascript';
+  } else if (lowerCased.endsWith('.css')) {
+    return 'css';
+  } else {
+    return 'unknown';
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './extensions';
+export * from './CodeMirrorLanguageClient';

package/src/test/MockClient.ts

@@ -0,0 +1,96 @@
+import { vi } from 'vitest';
+import {
+  ProtocolRequestType,
+  ProtocolNotificationType,
+  CancellationTokenSource,
+  CancellationToken,
+  ServerCapabilities,
+} from 'vscode-languageserver-protocol';
+import { PromiseCompletion, AbstractLanguageClient, disposable } from '../LanguageClient';
+
+export class MockClient extends EventTarget implements AbstractLanguageClient {
+  clientCapabilities: AbstractLanguageClient['clientCapabilities'];
+  serverCapabilities: AbstractLanguageClient['serverCapabilities'];
+  serverInfo: AbstractLanguageClient['serverInfo'];
+
+  // I'm too lazy to copy the types for this stuff.
+  onNotification: AbstractLanguageClient['onNotification'];
+  onRequest: AbstractLanguageClient['onRequest'];
+  sendNotification: AbstractLanguageClient['sendNotification'];
+  sendRequest: AbstractLanguageClient['sendRequest'];
+
+  public pendingRequest: Promise<any> | null;
+  private promiseCompletion: PromiseCompletion | null;
+
+  constructor(
+    clientCapabilities = {},
+    serverCapabilities: AbstractLanguageClient['serverCapabilities'] = null,
+    serverInfo = null,
+  ) {
+    super();
+    this.clientCapabilities = clientCapabilities;
+    this.serverCapabilities = serverCapabilities;
+    this.serverInfo = serverInfo;
+    this.pendingRequest = null;
+    this.promiseCompletion = null;
+
+    this.onNotification = (type, handler) => {
+      const callback = (e: any) => handler(e.detail.params);
+      this.addEventListener(type.method, callback);
+      return disposable(() => this.removeEventListener(type.method, callback));
+    };
+
+    this.onRequest = (type, handler) => {
+      const cancellationToken: CancellationToken = new CancellationTokenSource().token;
+      const callback = (e: any) => handler(e.detail.params, cancellationToken);
+      this.addEventListener(type.method, callback);
+      return disposable(() => this.removeEventListener(type.method, callback));
+    };
+
+    this.sendRequest = vi.fn(async (_type, _params) => {
+      this.pendingRequest = new Promise((resolve, reject) => {
+        this.promiseCompletion = { resolve, reject };
+      });
+      return await this.pendingRequest;
+    }) as any;
+
+    this.sendNotification = vi.fn((_type, _params) => {}) as any;
+  }
+
+  resolveRequest(value: any) {
+    if (!this.promiseCompletion) throw Error('Expecting a pending request');
+    this.promiseCompletion.resolve(value);
+    this.pendingRequest = null;
+  }
+
+  rejectRequest(error: any) {
+    if (!this.promiseCompletion) throw Error('Expecting a pending request');
+    this.promiseCompletion.reject(error);
+    this.pendingRequest = null;
+  }
+
+  triggerNotification<P, RO>(type: ProtocolNotificationType<P, RO>, params: P) {
+    this.dispatchEvent(
+      new CustomEvent(type.method, {
+        detail: {
+          jsonrpc: '2.0',
+          method: type.method,
+          params,
+        },
+      }),
+    );
+  }
+
+  triggerRequest<P, R, PR, E, RO>(type: ProtocolRequestType<P, R, PR, E, RO>, params: P) {
+    this.dispatchEvent(
+      new CustomEvent(type.method, {
+        detail: {
+          jsonrpc: '2.0',
+          requestId: 0,
+          method: type.method,
+          params,
+        },
+      }),
+    );
+  }
+}

package/src/utils/simpleStateField.ts

@@ -0,0 +1,22 @@
+import { StateEffectType, StateField } from '@codemirror/state';
+
+/** Sometimes you don't want to repeat yourself for a simple state field. */
+export function simpleStateField<T>(
+  stateEffect: StateEffectType<T>,
+  defaultValue: T,
+): StateField<T> {
+  return StateField.define<T>({
+    create: () => defaultValue,
+    update(value, tr) {
+      let updatedValue = value;
+
+      for (const effect of tr.effects) {
+        if (effect.is(stateEffect)) {
+          updatedValue = effect.value;
+        }
+      }
+
+      return updatedValue;
+    },
+  });
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*.ts"],
+  "exclude": ["./dist"],
+  "compilerOptions": {
+    "outDir": "./dist/esm",
+    "tsBuildInfoFile": "./dist/esm/tsconfig.tsbuildInfo",
+    "module": "es6",
+    "rootDir": "src",
+    "resolveJsonModule": false,
+    "lib": [
+      "es2019",
+      "DOM",
+      "webworker"
+    ]
+  }
+}
+

package/tsconfig.umd.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.spec.ts"],
+  "compilerOptions": {
+    "outDir": "dist/umd",
+    "tsBuildInfoFile": "dist/umd/tsconfig.tsbuildInfo",
+    "module": "umd"
+  }
+}