How to update document programmatically?

[AresEkb]

For example I have the following code in my language server worker:

import { createServicesForGrammar } from 'langium/grammar';
import { LangiumServices } from 'langium/lsp';

let sharedServices: LangiumServices['shared'];

async function start() {
  const { shared } = await createServicesForGrammar(...);
  sharedServices = shared;
}

function setDocumentText(uri: string, text: string) {
  // ???
}

How to update text of a Langium document by URI in setDocumentText? I can't find any suitable methods in shared.workspace.TextDocuments and shared.workspace.LangiumDocuments. Should I delete and recreate the document?

[msujew]

Hey @AresEkb,

It depends a bit on what the context of the changed document is. Do you want to change a document which is already open in an editor? If so, you should instruct the language client to change the text via the expected notification. The server should not change the text of a document by itself.

If the document is not open, you can use a combination of LangiumDocuments#deleteDocument/addDocument, LangiumDocumentFactory#fromString and DocumentBuilder#build or DocumentBuilder#update to update the document programmatically.

[AresEkb]

Document is open. Actually I use https://www.npmjs.com/package/monaco-editor-wrapper in a browser. Here is the editor:

import { editor } from '@codingame/monaco-vscode-editor-api';
import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
import { generateTextMate } from 'langium-cli/textmate';
import { createServicesForGrammar } from 'langium/grammar';
import { MonacoEditorLanguageClientWrapper, WrapperConfig } from 'monaco-editor-wrapper';
import { memo, useCallback, useEffect, useState } from 'react';

import { AstNode } from 'langium';
import { createConfig } from './config';
import { DocumentChange, documentChange } from './workerUtils';

export interface LangiumEditorProps {
  className?: string;
  uri: string;
  language: string;
  grammar: string;
  value?: string;
  onChange?: (value: LangiumEditorValue) => void;
  excludeText?: boolean;
  includeAst?: boolean;
}

export interface LangiumEditorValue {
  text?: string;
  ast?: AstNode;
}

const MemoizedMonacoEditorReactComp = memo(MonacoEditorReactComp);

export function LangiumEditor(props: LangiumEditorProps) {
  const [config, setConfig] = useState<WrapperConfig>();
  const [textModel, setTextModel] = useState<editor.ITextModel>();

  useEffect(() => {
    let mounted = true;
    let worker: Worker | undefined;
    async function init() {
      worker = await createWorker(props.grammar, props.excludeText, props.includeAst);
      const { Grammar } = await createServicesForGrammar({ grammar: props.grammar });
      const textmateGrammar = generateTextMate(Grammar, { id: props.language, grammar: '' });
      if (mounted) {
        setConfig(
          createConfig(props.uri, props.value ?? '', props.language, textmateGrammar, {
            $type: 'WorkerDirect',
            worker,
          }),
        );
      }
    }
    init();
    return () => {
      mounted = false;
      setTimeout(() => {
        worker?.terminate();
        worker = undefined;
      }, 5000);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.grammar, props.uri]);

  useEffect(() => {
    textModel?.setValue(props.value ?? '');
  }, [props.value, textModel]);

  const onLoad = useCallback(
    (wrapper: MonacoEditorLanguageClientWrapper) => {
      setTextModel(wrapper.getTextModels()?.modified ?? undefined);
      const onChange = props.onChange;
      if (onChange) {
        const client = wrapper.getLanguageClient(props.language);
        if (!client) {
          throw new Error();
        }
        client.onNotification(documentChange, (response: DocumentChange) => {
          if (response.uri === props.uri) {
            onChange({ text: response.text, ast: response.ast });
          }
        });
      }
    },
    [props.language, props.onChange, props.uri],
  );

  if (!config) {
    return <div></div>;
  }

  return <MemoizedMonacoEditorReactComp className={props.className} wrapperConfig={config} onLoad={onLoad} />;
}

function createWorker(grammar: string, excludeText?: boolean, includeAst?: boolean): Promise<Worker> {
  return new Promise((resolve, reject) => {
    const worker = new Worker(new URL('./langiumEditorWorker.ts', import.meta.url), { type: 'module' });
    worker.onmessage = (event) => {
      if (event.data.type === 'started') {
        resolve(worker);
      }
    };
    worker.onerror = reject;
    worker.postMessage({ type: 'start', grammar, excludeText, includeAst });
  });
}

At first I get wrapper.getTextModels()?.modified from MonacoEditorLanguageClientWrapper. And then I can update the text using textModel.setValue(). But I need to implement some additional logic that transforms a JSON into a text and only after that updates the editor. So I want to encapsulate this logic inside the worker and just send a message worker.postMessage({ type: 'setText', uri, text }) or worker.postMessage({ type: 'setJson', uri, json })

Here is the worker:

import { DocumentState, TextDocument, URI } from 'langium';
import { createServicesForGrammar } from 'langium/grammar';
import { LangiumServices, startLanguageServer } from 'langium/lsp';
import { DiagnosticSeverity } from 'vscode-languageserver/browser.js';

import {
  createServerConnection,
  DocumentChange,
  documentChangeNotification,
  DslCompletionProvider,
} from './workerUtils.js';

addEventListener('message', async (event) => {
  if (event.data.type === 'start') {
    if (typeof event.data.grammar !== 'string') {
      throw new Error('Grammar should be a string');
    }
    await start(event.data.grammar, event.data.excludeText ?? false, event.data.includeAst ?? false);
  }
});

let sharedServices: LangiumServices['shared'];

async function start(grammar: string, excludeText: boolean, includeAst: boolean): Promise<void> {
  const connection = createServerConnection();

  const { shared, serializer } = await createServicesForGrammar({
    grammar,
    module: {
      lsp: {
        CompletionProvider: (services: LangiumServices) => new DslCompletionProvider(services),
      },
    },
    sharedModule: {
      lsp: {
        Connection: () => connection,
      },
    },
  });

  sharedServices = shared;

  shared.workspace.DocumentBuilder.onBuildPhase(DocumentState.Validated, (documents) => {
    for (const document of documents) {
      if (document.diagnostics?.some((d) => d.severity === DiagnosticSeverity.Error)) {
        continue;
      }
      const params: DocumentChange = {
        uri: document.uri.toString(),
        diagnostics: document.diagnostics ?? [],
      };
      if (!excludeText) {
        params.text = document.textDocument.getText();
      }
      if (includeAst) {
        params.ast = JSON.parse(serializer.JsonSerializer.serialize(document.parseResult.value, { refText: true }));
      }
      connection.sendNotification(documentChangeNotification, params);
    }
  });

  startLanguageServer(shared);
  postMessage({ type: 'started' });
}

I'm a noob in Monaco and LSP. How could I send workspace/applyEdit in my worker?

[msujew]

I see, then you should definitively instruct the client to update the document - otherwise the document in the editor and the one in your language server will desync.

You can use sharedServices.lsp.Connection to communicate with the client. I believe you should be able to use Connection.workspace.applyEdit to apply the change on the client.

[AresEkb]

Thanks! It works

Added the following to the worker:

addEventListener('message', async (event) => {
  // Other event handlers
  if (event.data.type === 'setValue') {
    if (typeof event.data.uri !== 'string') {
      throw new Error('URI should be a string');
    }
    if (typeof event.data.value !== 'string') {
      throw new Error('Value should be a string');
    }
    setValue(event.data.uri, event.data.value);
  }
});

async function setValue(uri: string, value: string) {
  connection!.workspace.applyEdit({
    changes: {
      [uri]: [TextEdit.replace(Range.create(0, 0, uinteger.MAX_VALUE, 0), value)],
    },
  });
}

And that's how I can invoke it from the editor:

  useEffect(() => {
    worker.current?.postMessage({ type: 'setValue', uri: props.uri, value: props.value ?? '' });
  }, [props.uri, props.value]);