Can I use monaco editor with python lsp in pure client without a server

[liudonghua123]

Hi, I tried to write a simple demo which use monaco with python lsp support in plain html without server.

I want to use pyodide or pure js to serve as lsp server. Is there any ideas about how to do it?

I found a example monaco-python, but the monaco editor was too old, I try to update monaco editor, then it did not work.

A lot of examples introduced python lsp need to use a server to run lsp server. But I want to make something pure web, maybe use web workers, pyodide and webassembly.

Some reference links.

• https://github.com/shanghaobo/monaco-editor-python
• https://github.com/maxwrlr/monaco-python
• https://github.com/Wiihame/Monaco-python-lsp
• https://github.com/moeakwak/monaco-language-server

[kaisalmen]

@liudonghua123 there is this project; https://www.npmjs.com/package/@typefox/pyright-browser

[liudonghua123]

@kaisalmen Thanks for the recommend pyright-browser
package. I will try it. 😄

[liudonghua123]

@kaisalmen Hi, I found the documentation on pyright-browser, TypeFox/pyright is really concise, is there any more detailed documentation or examples I can learn from?

[kaisalmen]

@msujew is there any further material? ⬆️

[liudonghua123]

I tried to compress all the files in https://github.com/python/typeshed/tree/main/stdlib to stdlib.zip and then read the files, prefixed the path with root /stdlib and configured clientOptions.initializationOptions.files, but then I got the following errors equest initialize failed with message: Roots cannot be files..

main.ts

/* --------------------------------------------------------------------------------------------
 * Copyright (c) 2018-2022 TypeFox GmbH (http://www.typefox.io). All rights reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 * ------------------------------------------------------------------------------------------ */

import * as monaco from 'monaco-editor';
import * as vscode from 'vscode';
import '@codingame/monaco-vscode-theme-defaults-default-extension';
import { whenReady } from '@codingame/monaco-vscode-python-default-extension';
import { LogLevel } from 'vscode/services';
import { createConfiguredEditor, createModelReference } from 'vscode/monaco';
import { ExtensionHostKind, registerExtension } from 'vscode/extensions';
import getConfigurationServiceOverride, { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override';
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
import { initServices, MonacoLanguageClient } from 'monaco-languageclient';
import { CloseAction, ErrorAction, MessageTransports } from 'vscode-languageclient';
import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageserver-protocol/browser.js';
import { RegisteredFileSystemProvider, registerFileSystemOverlay, RegisteredMemoryFile } from '@codingame/monaco-vscode-files-service-override';
import { Uri } from 'vscode';
import * as JSZip from 'jszip';

import { buildWorkerDefinition } from 'monaco-editor-workers';
buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers/', new URL('', window.location.href).href, false);

const languageId = 'python';
let languageClient: MonacoLanguageClient;

let files: { [id: string]: string } = {};

/**
 * read file contents from zip file using jszip
 * @param url url of the zip file
 * @returns object with file path and file contents
 */
async function readZipFile(url: string) {
    try {
        const response = await fetch(url);
        const data = await response.arrayBuffer();
        const results: { [id: string]: string } = {};
        const zip = await JSZip.loadAsync(data);
        for (const [filename, file] of Object.entries(zip.files)) {
            console.info(`Reading ${filename}`);
            results[`/${filename}`] = await file.async('text');
        }
        console.info(`Read ${Object.keys(results).length} files`);
        console.info(results);
        return results;
    } catch (error) {
        console.error(error);
        return {};
    }
}

const createLanguageClient = (transports: MessageTransports): MonacoLanguageClient => {
    return new MonacoLanguageClient({
        name: 'Pyright Language Client',
        clientOptions: {
            // use a language id as a document selector
            documentSelector: [languageId],
            // disable the default error handler
            errorHandler: {
                error: () => ({ action: ErrorAction.Continue }),
                closed: () => ({ action: CloseAction.DoNotRestart })
            },
            // pyright requires a workspace folder to be present, otherwise it will not work
            workspaceFolder: {
                index: 0,
                name: 'workspace',
                // uri: monaco.Uri.parse('/workspace')
                uri: Uri.file('/workspace')
            },
            synchronize: {
                fileEvents: [vscode.workspace.createFileSystemWatcher('**')]
            },
            initializationOptions: {
                files
            }
        },
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: () => {
                return Promise.resolve(transports);
            }
        }
    });
};

export const startPythonClient = async () => {
    // init vscode-api
    await initServices({
        userServices: {
            ...getThemeServiceOverride(),
            ...getTextmateServiceOverride(),
            ...getConfigurationServiceOverride(Uri.file('/workspace')),
            ...getKeybindingsServiceOverride()
        },
        debugLogging: true,
        logLevel: LogLevel.Debug
    });

    console.log('Before ready themes');
    await whenReady();
    console.log('After ready themes');

    // extension configuration derived from:
    // https://github.com/microsoft/pyright/blob/main/packages/vscode-pyright/package.json
    // only a minimum is required to get pyright working
    const extension = {
        name: 'python-client',
        publisher: 'monaco-languageclient-project',
        version: '1.0.0',
        engines: {
            vscode: '^1.78.0'
        },
        contributes: {
            languages: [{
                id: languageId,
                aliases: [
                    'Python'
                ],
                extensions: [
                    '.py',
                    '.pyi'
                ]
            }],
            commands: [{
                command: 'pyright.restartserver',
                title: 'Pyright: Restart Server',
                category: 'Pyright'
            },
            {
                command: 'pyright.organizeimports',
                title: 'Pyright: Organize Imports',
                category: 'Pyright'
            }],
            keybindings: [{
                key: 'ctrl+k',
                command: 'pyright.restartserver',
                when: 'editorTextFocus'
            }]
        }
    };
    registerExtension(extension, ExtensionHostKind.LocalProcess);

    updateUserConfiguration(`{
        "editor.fontSize": 14,
        "workbench.colorTheme": "Default Dark Modern"
    }`);

    const fileSystemProvider = new RegisteredFileSystemProvider(false);
    fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/workspace/hello.py'), 'print("Hello, World!")'));
    registerFileSystemOverlay(1, fileSystemProvider);

    const pythonWorkerUrl = new URL('../../node_modules/@typefox/pyright-browser/dist/pyright.worker.js', window.location.href).href;
    const worker = new Worker(pythonWorkerUrl);
    worker.postMessage({
        type: 'browser/boot',
        mode: 'foreground'
    });
    const reader = new BrowserMessageReader(worker);
    const writer = new BrowserMessageWriter(worker);
    files = await readZipFile(new URL('./src/python/browser/stdlib.zip', window.location.href).href);
    languageClient = createLanguageClient({ reader, writer });
    languageClient.start();
    reader.onClose(() => languageClient.stop());

    const registerCommand = async (cmdName: string, handler: (...args: unknown[]) => void) => {
        // commands sould not be there, but it demonstrates how to retrieve list of all external commands
        const commands = await vscode.commands.getCommands(true);
        if (!commands.includes(cmdName)) {
            vscode.commands.registerCommand(cmdName, handler);
        }
    };
    // always exectute the command with current language client
    await registerCommand('pyright.restartserver', (...args: unknown[]) => {
        languageClient.sendRequest('workspace/executeCommand', { command: 'pyright.restartserver', arguments: args });
    });
    await registerCommand('pyright.organizeimports', (...args: unknown[]) => {
        languageClient.sendRequest('workspace/executeCommand', { command: 'pyright.organizeimports', arguments: args });
    });

    // use the file create before
    const modelRef = await createModelReference(monaco.Uri.file('/workspace/hello.py'));
    modelRef.object.setLanguageId(languageId);

    // create monaco editor
    createConfiguredEditor(document.getElementById('container')!, {
        model: modelRef.object.textEditorModel,
        automaticLayout: true
    });
};

stdlib.zip

[msujew]

I believe you're adding folders into the files object, which the language server cannot handle. You're logging a file called /stdlib/zoneinfo/ which isn't a valid file path.

[liudonghua123]

@msujew Thanks, your solution worked for me. You really helped me a lot, thanks again. 😄

The following is my updated code related to readZipFile.

async function readZipFile(url: string) {
    try {
        const response = await fetch(url);
        const data = await response.arrayBuffer();
        const results: { [id: string]: string } = {};
        const zip = await JSZip.loadAsync(data);
        for (const [filename, file] of Object.entries(zip.files)) {
            // skip directories which suffixed with '/'
            if (filename.endsWith('/')) {
                console.info(`Skip directory ${filename}`);
                continue;
            }
            console.info(`Reading ${filename}`);
            results[`/${filename}`] = await file.async('text');
        }
        console.info(`Read ${Object.keys(results).length} files`);
        console.info(results);
        return results;
    } catch (error) {
        console.error(error);
        return {};
    }
}

[liudonghua123]

I found an error (File or directory "/workspace" does not exist.) in the console if I use /stdlib path prefix of typeshed/stdlib.

If I changed the path prefix to /workspace/typings, then this error disappeared, but the method signature of print is wrong then.

[msujew]

I had the same issue with print. No idea what's wrong there, I just modified the typeshed definitions to make flush optional.

Note that we just provide the browser glue. The actual type validation logic is written by the people over at the original Pyright repo.

[MJ-lx]

According to the previous discussion, I implemented code prompts through Worker, but I encountered Safari compatibility problem.

Is there a way to solve?

[kaisalmen]

Does it work in other browsers like Chrome or Firefox or does it also not work? Can you please share your code?

[MJ-lx]

it work in chrome. This may be due to the reasons mentioned in the comments in the file,But I have no idea

main.ts

import {
  CloseAction,
  ErrorAction,
  MessageTransports,
  MonacoLanguageClient,
  MonacoServices,
} from "monaco-languageclient";

import { CDNPath } from "@/config/index";

import {
  BrowserMessageReader,
  BrowserMessageWriter,
} from "vscode-languageserver-protocol/browser.js";

let files: { [id: string]: string } = {};

async function readFile(url: string) {
  try {
    const response = await fetch(url);
    const results = await response.json();
    return results;
  } catch (error) {
    console.error(error);
    return {};
  }
}

const createLanguageClient = (
  transports: MessageTransports
): MonacoLanguageClient => {
  return new MonacoLanguageClient({
    name: "Pyright Language Client",
    clientOptions: {
      // use a language id as a document selector
      documentSelector: ["python"],
      // disable the default error handler
      errorHandler: {
        error: () => ({ action: ErrorAction.Continue }),
        closed: () => ({ action: CloseAction.DoNotRestart }),
      },
      initializationOptions: {
        files,
      },
    },

    // create a language client connection from the JSON RPC connection on demand
    connectionProvider: {
      get: () => {
        return Promise.resolve(transports);
      },
    },
  });
};

const startServer = async (editor: any) => {
  // 解决worker脚本跨域问题
  const pythonWorkerUrl = `${CDNPath}python/pyright.worker.js`;
  const blob = new Blob([`importScripts("${pythonWorkerUrl}")`], {
    type: "application/javascript",
  });

  const blobUrl = window.URL.createObjectURL(blob);
  const worker = new Worker(blobUrl);
  worker.postMessage({
    type: "browser/boot",
    mode: "foreground",
  });
  console.time("💀");
  files = await readFile(`${CDNPath}python/typeshed.json`);
  console.timeEnd("💀");
  const reader = new BrowserMessageReader(worker);
  const writer = new BrowserMessageWriter(worker);
  const languageClient = createLanguageClient({ reader, writer });
  languageClient.start();
  reader.onClose(() => languageClient.stop());
};

export default startServer;

[msujew]

This was supposed to be fixed, see here. Are you running the latest version of Safari?

[MJ-lx]

can i use background mode to solve

[MJ-lx]

thanks.Nested workers are supported in Safari 16.4,but I tested on 16.1

[liudonghua123]

@msujew Hi, I tried to make a python-browser example using the above-mentioned code. If I put in this repo, it works, see https://github.com/liudonghua123/monaco-languageclient/blob/python-browser-next/packages/examples/src/python/browser/main.ts.

If I create a new vite powered project, move related files to created project and start with yarn dev or yarn build, it always failed with Uncaught TypeError: Cannot read properties of null (reading 'registerWorkbenchContribution'). This error comes from
node_modules/@codingame/monaco-vscode-configuration-service-override/vscode/src/vs/workbench/services/configuration/browser/configurationService.js:1145.

const workbenchContributionsRegistry = ( Registry.as(Extensions.Workbench));
// workbenchContributionsRegistry is null here
workbenchContributionsRegistry.registerWorkbenchContribution(RegisterConfigurationSchemasContribution, 3 );

The call stack is empty, maybe it comes from import getConfigurationServiceOverride, { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override'; in main.ts.

I don't know whether it's vite bundler problem or some other configuration problem.

Reproduce step:

• git clone https://github.com/liudonghua123/monaco-playground
• cd monaco-playground
• yarn
• yarn dev
• visit http://localhost:5173
• inspect console tab of dev-tools

[liudonghua123]

Here is the Registry value when error occurs.

And this is the Registry value without errors.

[kaisalmen]

Hi @liudonghua123 with vite dev mode you currently need to be aware of this:
https://github.com/TypeFox/monaco-languageclient/blob/main/README.md#vite-dev-server-troubleshooting
Please try this first. We also do this in this repo's vite config.

It does not apply to a production build as vite is using rollup for that.

[kaisalmen]

@liudonghua123 I found a couple of things:

I changed the main monaco-editor dependency and added the vscode dependency. One wrong monaco-editor dependency was used (see yarn list monaco-editor). Another change for vite dev is currently required (I need to add this to the README. It is stated in the linked monaco-vscode-api README, but not here explicitly). You need to start vite like this:

"dev": "node --experimental-import-meta-resolve ./node_modules/vite/bin/vite.js",

This code change is required:

The editor div is only 5px high, so you need to pass some styling.

Another finding tsc requires "isolatedModules": false, so current build is not working

[liudonghua123]

@kaisalmen Hi, is there any updates about the example mentioned above? 😄

[kaisalmen]

@liudonghua123 did you see that #561 (reply in thread) ?

[liudonghua123]

@kaisalmen Sorry for some carelessness, I did it again as you said, it's almost working now (maybe I forgot some steps previously). I have some questions here. Why --experimental-import-meta-resolve and "isolatedModules": false is needed here?

If I try to use gh-pages to serve the dist files via vite build, some files still not bundled into it.

[kaisalmen]

@liudonghua123 I needed "isolatedModules": false to be able to compile your code. 🙂

Why --experimental-import-meta-resolve. See answer is here:
https://github.com/CodinGame/monaco-vscode-api#if-you-use-vite

I can't enlarge your screenshot (seems to be an GH error/problem)

[MJ-lx]

@msujew Hi, Is there any way to remove console.log ?

[msujew]

The log statements are pretty deep embedded into the worker threads. Since the original pyright LS runs in a separate node process, it was always assumed that the print statements can be "rewritten" to be hidden from the user. As the browser build is just a fork of the original pyright, I don't really want to remove all the log statements, given that it leads to more maintenance effort when rebasing onto the latest master branch.

You can probably work around the issue by overriding the console.log function and filtering the messages, but that's a bit cumbersome.