lean4monaco 1.0.0

package/README.md

@@ -0,0 +1,79 @@
+# Lean 4 Monaco
+
+## Usage
+
+Install this package in your npm project.
+```
+npm install lean4monaco
+```
+
+The package contains two main classes: `LeanMonaco` and `LeanMonacoEditor`. The
+class `LeanMonaco` can only have exactly one active instance and arranges the
+correct setup of the Monaco Services and the VSCode API. When it is started,
+one or more editors can be created using `LeanMonacoEditor`. Here is an example
+how to use the classes using React:
+
+```ts
+import { LeanMonaco, LeanMonacoEditor } from 'lean4monaco'
+
+[...]
+
+useEffect(() => {
+    const leanMonaco = new LeanMonaco()
+    const leanMonacoEditor = new LeanMonacoEditor()
+
+    ;(async () => {
+        await leanMonaco.start('ws://localhost:8080/')
+        leanMonaco.setInfoviewElement(infoviewRef.current)
+        await leanMonacoEditor.start(codeviewRef.current!, '/project/test.lean', '#check Nat')
+    })()
+
+    return () => {
+        leanMonacoEditor.dispose()
+        leanMonaco.dispose()
+    }
+})
+```
+
+For some reason, the file (here `test.lean`) cannot be at the root of the file system, i.e., not `/test.lean` instead of `/project/test.lean`. (TODO: find out why)
+
+The package uses the Lean 4 VSCode extension, which is intended to run in a nodejs runtime. Therefore, we need to install node polyfills.
+Here is how this can be done if your project uses Vite:
+```
+npm install vite-plugin-node-polyfills memfs 
+```
+
+```ts
+// vite.config.ts
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+
+export default {
+  plugins: [
+    nodePolyfills({
+      overrides: {
+        fs: 'memfs',
+      },
+    }),
+  ],
+}
+```
+
+For Vite dev mode to work properly, the following plugin is necessary:
+```
+npm install 'https://gitpkg.vercel.app/abentkamp/monacotest2/esbuild-import-meta-url-plugin?ec9666e' --save-dev
+```
+This could be replaced by `@codingame/esbuild-import-meta-url-plugin` when this PR is accepted: https://github.com/CodinGame/esbuild-import-meta-url-plugin/pull/5
+
+```ts
+// vite.config.ts
+import importMetaUrlPlugin from '@codingame/esbuild-import-meta-url-plugin'
+
+export default {
+  optimizeDeps: {
+    esbuildOptions: {
+      plugins: [importMetaUrlPlugin]
+    }
+  },
+  [...]
+}
+```

package/dist/editor.d.ts

@@ -0,0 +1,10 @@
+import { ITextFileEditorModel } from 'vscode/monaco';
+import * as monaco from 'monaco-editor';
+import { IReference } from '@codingame/monaco-vscode-editor-service-override';
+export declare class LeanMonacoEditor {
+    editor: monaco.editor.IStandaloneCodeEditor;
+    modelRef: IReference<ITextFileEditorModel>;
+    disposed: boolean;
+    start(editorEl: HTMLElement, fileName: string, code: string): Promise<void>;
+    dispose(): void;
+}

package/dist/editor.js

@@ -0,0 +1,31 @@
+import { Uri } from 'vscode';
+import { fs } from 'memfs';
+import { createModelReference } from 'vscode/monaco';
+import * as monaco from 'monaco-editor';
+import path from 'path';
+export class LeanMonacoEditor {
+    editor;
+    modelRef;
+    disposed = false;
+    async start(editorEl, fileName, code) {
+        if (this.disposed)
+            return;
+        // Create file for clientProvider to find
+        fs.mkdirSync(path.dirname(fileName), { recursive: true });
+        fs.writeFileSync(fileName, '');
+        // Create editor and model
+        const theme = "Visual Studio Light"; //"Visual Studio Dark" //"Default Light Modern" //"Default Light+" //"Default Dark+" //"Default High Contrast"
+        this.editor = monaco.editor.create(editorEl, { automaticLayout: true, theme });
+        this.modelRef = await createModelReference(Uri.parse(fileName), code);
+        this.editor.setModel(this.modelRef.object.textEditorModel);
+        // Set focus on editor to trigger infoview to open
+        this.editor.focus();
+    }
+    dispose() {
+        if (this.modelRef)
+            this.modelRef.dispose();
+        if (this.editor)
+            this.editor.dispose();
+        this.disposed = true;
+    }
+}

package/dist/importmetaurl.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'esbuild';
+export declare const importMetaUrlPlugin: Plugin;

package/dist/importmetaurl.js

@@ -0,0 +1,26 @@
+import * as fs from 'fs';
+import url from 'url';
+import { resolve } from 'import-meta-resolve';
+// Fix for @codingame/esbuild-import-meta-url-plugin, see https://github.com/CodinGame/esbuild-import-meta-url-plugin/pull/5
+// TODO: remove this when pull request gets accepted
+export const importMetaUrlPlugin = {
+    name: 'import.meta.url',
+    setup({ onLoad }) {
+        // Help vite that bundles/move files in dev mode without touching `import.meta.url` which breaks asset urls
+        onLoad({ filter: /.*\.js$/, namespace: 'file' }, async (args) => {
+            const code = fs.readFileSync(args.path, 'utf8');
+            const assetImportMetaUrlRE = /\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*(?:,\s*)?\)/g;
+            let i = 0;
+            let newCode = '';
+            for (let match = assetImportMetaUrlRE.exec(code); match != null; match = assetImportMetaUrlRE.exec(code)) {
+                newCode += code.slice(i, match.index);
+                const path = match[1].slice(1, -1);
+                const resolved = resolve(path, url.pathToFileURL(args.path).toString());
+                newCode += `new URL(${JSON.stringify(url.fileURLToPath(resolved))}, import.meta.url)`;
+                i = assetImportMetaUrlRE.lastIndex;
+            }
+            newCode += code.slice(i);
+            return { contents: newCode };
+        });
+    }
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './editor';
+export * from './leanmonaco';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './editor';
+export * from './leanmonaco';

package/dist/infowebview.d.ts

@@ -0,0 +1,21 @@
+import { EditorApi, InfoviewApi } from "@leanprover/infoview-api";
+import { InfoWebviewFactory, InfoWebview } from "./monaco-lean4/vscode-lean4/src/infoview";
+import { Rpc } from "./monaco-lean4/vscode-lean4/src/rpc";
+import { ViewColumn } from "vscode";
+export declare class IFrameInfoWebview implements InfoWebview {
+    private iframe;
+    rpc: Rpc;
+    visible: boolean;
+    private onDidDisposeEmitter;
+    onDidDispose: import("vscode").Event<void>;
+    api: InfoviewApi;
+    constructor(iframe: HTMLIFrameElement, rpc: Rpc);
+    dispose(): void;
+    reveal(viewColumn?: ViewColumn, preserveFocus?: boolean): void;
+}
+export declare class IFrameInfoWebviewFactory implements InfoWebviewFactory {
+    private infoviewElement;
+    setInfoviewElement(infoviewElement: HTMLElement): void;
+    make(editorApi: EditorApi, stylesheet: string, column: number): IFrameInfoWebview;
+    private initialHtml;
+}

package/dist/infowebview.js

@@ -0,0 +1,80 @@
+import { Rpc } from "./monaco-lean4/vscode-lean4/src/rpc";
+import { EventEmitter } from "vscode";
+export class IFrameInfoWebview {
+    iframe;
+    rpc;
+    visible = true;
+    onDidDisposeEmitter = new EventEmitter();
+    onDidDispose = this.onDidDisposeEmitter.event;
+    api;
+    constructor(iframe, rpc) {
+        this.iframe = iframe;
+        this.rpc = rpc;
+        this.api = rpc.getApi();
+    }
+    dispose() {
+        this.iframe.remove();
+        this.onDidDisposeEmitter.fire();
+    }
+    reveal(viewColumn, preserveFocus) {
+    }
+}
+export class IFrameInfoWebviewFactory {
+    infoviewElement;
+    setInfoviewElement(infoviewElement) {
+        this.infoviewElement = infoviewElement;
+    }
+    make(editorApi, stylesheet, column) {
+        const iframe = document.createElement("iframe");
+        this.infoviewElement.append(iframe);
+        iframe.contentWindow.document.open();
+        iframe.contentWindow.document.write(this.initialHtml(stylesheet));
+        iframe.contentWindow.document.close();
+        // Note that an extension can send data to its webviews using webview.postMessage().
+        // This method sends any JSON serializable data to the webview. The message is received
+        // inside the webview through the standard message event.
+        // The receiving of these messages is done inside webview\index.ts where it
+        // calls window.addEventListener('message',...
+        const rpc = new Rpc(m => {
+            try {
+                // JSON.stringify is needed here to serialize getters such as `Position.line` and `Position.character`
+                void iframe.contentWindow.postMessage(JSON.stringify(m));
+            }
+            catch (e) {
+                // ignore any disposed object exceptions
+            }
+        });
+        rpc.register(editorApi);
+        // Similarly, we can received data from the webview by listening to onDidReceiveMessage.
+        document.defaultView.addEventListener('message', m => {
+            if (m.source != iframe.contentWindow) {
+                return;
+            }
+            try {
+                rpc.messageReceived(JSON.parse(m.data));
+            }
+            catch {
+                // ignore any disposed object exceptions
+            }
+        });
+        return new IFrameInfoWebview(iframe, rpc);
+    }
+    initialHtml(stylesheet) {
+        return `
+            <!DOCTYPE html>
+            <html>
+            <head>
+                <meta charset="UTF-8" />
+                <meta http-equiv="Content-type" content="text/html;charset=utf-8">
+                <title>Infoview</title>
+                <style>${stylesheet}</style>
+                <link rel="stylesheet" href="${new URL('./vscode.css', import.meta.url)}">
+                <link rel="stylesheet" href="${new URL('./monaco-lean4/lean4-infoview/src/infoview/index.css', import.meta.url)}">
+            </head>
+            <body>
+                <div id="react_root"></div>
+                <script type="module" src="${new URL('./webview.js', import.meta.url)}"></script>
+            </body>
+            </html>`;
+    }
+}

package/dist/leanmonaco.d.ts

@@ -0,0 +1,26 @@
+import 'vscode/localExtensionHost';
+import { RegisterExtensionResult } from 'monaco-editor-wrapper';
+import { LeanClientProvider } from './monaco-lean4/vscode-lean4/src/utils/clientProvider';
+import { InfoProvider } from './monaco-lean4/vscode-lean4/src/infoview';
+import { AbbreviationFeature } from './monaco-lean4/vscode-lean4/src/abbreviation/AbbreviationFeature';
+import { LeanTaskGutter } from './monaco-lean4/vscode-lean4/src/taskgutter';
+import { IFrameInfoWebviewFactory } from './infowebview';
+import { Logger } from 'monaco-languageclient/tools';
+import { DisposableStore } from 'vscode/monaco';
+export declare class LeanMonaco {
+    ready: (value: void | PromiseLike<void>) => void;
+    whenReady: Promise<void>;
+    static activeInstance: LeanMonaco | null;
+    logger: Logger;
+    registerFileUrlResults: DisposableStore;
+    extensionRegisterResult: RegisterExtensionResult | undefined;
+    clientProvider: LeanClientProvider | undefined;
+    infoProvider: InfoProvider | undefined;
+    iframeWebviewFactory: IFrameInfoWebviewFactory | undefined;
+    abbreviationFeature: AbbreviationFeature | undefined;
+    taskGutter: LeanTaskGutter | undefined;
+    disposed: boolean;
+    start(websocketUrl: string): Promise<void>;
+    setInfoviewElement(infoviewEl: HTMLElement): void;
+    dispose(): void;
+}

package/dist/leanmonaco.js

@@ -0,0 +1,205 @@
+import 'vscode/localExtensionHost';
+import { LeanClientProvider } from './monaco-lean4/vscode-lean4/src/utils/clientProvider';
+import { Uri } from 'vscode';
+import { InfoProvider } from './monaco-lean4/vscode-lean4/src/infoview';
+import { AbbreviationFeature } from './monaco-lean4/vscode-lean4/src/abbreviation/AbbreviationFeature';
+import { LeanTaskGutter } from './monaco-lean4/vscode-lean4/src/taskgutter';
+import { IFrameInfoWebviewFactory } from './infowebview';
+import { setupMonacoClient } from './monacoleanclient';
+import { checkLean4ProjectPreconditions } from './preconditions';
+import { checkServiceConsistency } from 'monaco-editor-wrapper/vscode/services';
+import { Logger } from 'monaco-languageclient/tools';
+import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
+import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
+import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
+import { initServices } from 'monaco-languageclient/vscode/services';
+import { registerExtension } from 'vscode/extensions';
+import { DisposableStore } from 'vscode/monaco';
+const extensionFilesOrContents = new Map();
+extensionFilesOrContents.set('/language-configuration.json', new URL('./monaco-lean4/vscode-lean4/language-configuration.json', import.meta.url));
+extensionFilesOrContents.set('/syntaxes/lean4.json', new URL('./monaco-lean4/vscode-lean4/syntaxes/lean4.json', import.meta.url));
+extensionFilesOrContents.set('/syntaxes/lean4-markdown.json', new URL('./monaco-lean4/vscode-lean4/syntaxes/lean4-markdown.json', import.meta.url));
+extensionFilesOrContents.set('/syntaxes/codeblock.json', new URL('./monaco-lean4/vscode-lean4/syntaxes/codeblock.json', import.meta.url));
+const extensionConfig = {
+    name: 'lean4web',
+    publisher: 'leanprover-community',
+    version: '1.0.0',
+    engines: {
+        vscode: '*'
+    },
+    "contributes": {
+        "languages": [
+            {
+                "id": "lean4",
+                "configuration": "./language-configuration.json",
+                "extensions": [
+                    ".lean"
+                ],
+            },
+            {
+                "id": "lean4markdown",
+                "aliases": [],
+                "extensions": [
+                    ".lean4markdown"
+                ],
+                "configuration": "./language-configuration.json"
+            }
+        ],
+        "grammars": [
+            {
+                "language": "lean4",
+                "scopeName": "source.lean4",
+                "path": "./syntaxes/lean4.json"
+            },
+            {
+                "language": "lean4markdown",
+                "scopeName": "source.lean4.markdown",
+                "path": "./syntaxes/lean4-markdown.json"
+            },
+            {
+                "language": "lean4",
+                "scopeName": "markdown.lean4.codeblock",
+                "path": "./syntaxes/codeblock.json",
+                "injectTo": [
+                    "text.html.markdown"
+                ],
+                "embeddedLanguages": {
+                    "meta.embedded.block.lean4": "lean4"
+                }
+            }
+        ],
+    }
+};
+const serviceConfig = {
+    userServices: {
+        ...getTextmateServiceOverride(),
+        ...getThemeServiceOverride(),
+        ...getConfigurationServiceOverride()
+    },
+    workspaceConfig: {
+        workspaceProvider: {
+            trusted: true,
+            workspace: {
+                workspaceUri: Uri.file('/workspace')
+            },
+            async open() {
+                return false;
+            }
+        }
+    }
+};
+const websocketOptions = {
+    $type: 'WebSocketUrl',
+    url: '',
+    startOptions: {
+        onCall: () => {
+            console.log('Connected to socket.');
+        },
+        reportStatus: true
+    },
+    stopOptions: {
+        onCall: () => {
+            console.log('Disconnected from socket.');
+        },
+        reportStatus: true
+    }
+};
+export class LeanMonaco {
+    ready;
+    whenReady = new Promise((resolve) => {
+        this.ready = resolve;
+    });
+    static activeInstance = null;
+    logger = new Logger();
+    registerFileUrlResults = new DisposableStore();
+    extensionRegisterResult;
+    clientProvider;
+    infoProvider;
+    iframeWebviewFactory;
+    abbreviationFeature;
+    taskGutter;
+    disposed = false;
+    async start(websocketUrl) {
+        if (LeanMonaco.activeInstance == this) {
+            console.warn('A LeanMonaco instance cannot be started twice.');
+            return;
+        }
+        if (LeanMonaco.activeInstance) {
+            console.warn('There can only be one active LeanMonaco instance at a time. Disposing previous instance.');
+            LeanMonaco.activeInstance?.dispose();
+        }
+        LeanMonaco.activeInstance = this;
+        if (!window.MonacoEnvironment?.getWorker) {
+            const workerLoaders = {
+                editorWorkerService: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' }),
+                textMateWorker: () => new Worker(new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url), { type: 'module' }),
+            };
+            window.MonacoEnvironment = {
+                getWorker: function (moduleId, label) {
+                    const workerFactory = workerLoaders[label];
+                    if (workerFactory != null) {
+                        return workerFactory();
+                    }
+                    throw new Error(`Unimplemented worker ${label} (${moduleId})`);
+                }
+            };
+        }
+        await initServices({
+            serviceConfig,
+            caller: `Lean monaco-editor`,
+            performChecks: checkServiceConsistency,
+            logger: this.logger
+        });
+        await (await import('@codingame/monaco-vscode-theme-defaults-default-extension')).whenReady;
+        if (this.disposed)
+            return;
+        this.extensionRegisterResult = registerExtension(extensionConfig, 1 /* ExtensionHostKind.LocalProcess */);
+        if (extensionFilesOrContents) {
+            for (const entry of extensionFilesOrContents) {
+                const registerFileUrlResult = this.extensionRegisterResult.registerFileUrl(entry[0], entry[1].href);
+                this.registerFileUrlResults.add(registerFileUrlResult);
+            }
+        }
+        await this.extensionRegisterResult.whenReady();
+        if (this.disposed)
+            return;
+        this.abbreviationFeature = new AbbreviationFeature({});
+        this.clientProvider = new LeanClientProvider({
+            installChanged: () => { return { dispose: () => { } }; },
+            testLeanVersion: () => { return "lean4/stable"; },
+            getElanDefaultToolchain: () => { return "lean4/stable"; }
+        }, { appendLine: () => { }
+        }, setupMonacoClient({
+            ...websocketOptions,
+            url: websocketUrl,
+        }), checkLean4ProjectPreconditions, (docUri) => { return true; });
+        this.taskGutter = new LeanTaskGutter(this.clientProvider, { asAbsolutePath: (path) => Uri.parse(`${new URL('monaco-lean4/vscode-lean4/' + path, import.meta.url)}`), });
+        if (!this.iframeWebviewFactory)
+            this.iframeWebviewFactory = new IFrameInfoWebviewFactory();
+        this.infoProvider = new InfoProvider(this.clientProvider, { language: 'lean4' }, {}, this.iframeWebviewFactory);
+        this.ready();
+    }
+    setInfoviewElement(infoviewEl) {
+        if (!this.iframeWebviewFactory)
+            this.iframeWebviewFactory = new IFrameInfoWebviewFactory();
+        this.iframeWebviewFactory.setInfoviewElement(infoviewEl);
+    }
+    dispose() {
+        if (LeanMonaco.activeInstance == this) {
+            LeanMonaco.activeInstance = null;
+        }
+        this.registerFileUrlResults?.dispose();
+        this.registerFileUrlResults = new DisposableStore();
+        this.extensionRegisterResult?.dispose();
+        this.extensionRegisterResult = undefined;
+        this.disposed = true;
+        this.infoProvider?.dispose();
+        this.infoProvider = undefined;
+        this.taskGutter?.dispose();
+        this.taskGutter = undefined;
+        this.clientProvider?.dispose();
+        this.clientProvider = undefined;
+        this.abbreviationFeature?.dispose();
+        this.abbreviationFeature = undefined;
+    }
+}

package/dist/monaco-lean4/lean4-infoview/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@leanprover/infoview",
+    "version": "0.7.2",
+    "description": "An interactive display for the Lean 4 theorem prover.",
+    "scripts": {
+        "watch": "rollup --config --environment NODE_ENV:development --watch",
+        "build": "rollup --config --environment NODE_ENV:production",
+        "watchTest": "npm run watch",
+        "test": "tsc -p test/tsconfig.json"
+    },
+    "exports": {
+        ".": "./dist/index.development.js",
+        "./loader": "./dist/loader.production.min.js",
+        "./package.json": "./package.json"
+    },
+    "typesVersions": {
+        "*": {
+            "*": [
+                "dist/index.d.ts"
+            ],
+            "loader": [
+                "dist/loader.d.ts"
+            ]
+        }
+    },
+    "files": [
+        "dist/*"
+    ],
+    "type": "module",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@floating-ui/react": "^0.24.7",
+        "@rollup/plugin-commonjs": "^23.0.7",
+        "@rollup/plugin-node-resolve": "^15.1.0",
+        "@rollup/plugin-replace": "^5.0.2",
+        "@rollup/plugin-terser": "^0.1.0",
+        "@rollup/plugin-typescript": "^9.0.2",
+        "@rollup/plugin-url": "^8.0.1",
+        "@types/marked": "^4.3.1",
+        "@types/react": "^18.2.15",
+        "@types/react-dom": "^18.2.7",
+        "current-release": "npm:@leanprover/infoview@latest",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "rollup": "^3.26.2",
+        "rollup-plugin-css-only": "^4.3.0",
+        "typescript": "^5.4.5"
+    },
+    "dependencies": {
+        "@leanprover/infoview-api": "~0.4.0",
+        "@vscode/codicons": "^0.0.32",
+        "@vscode/webview-ui-toolkit": "^1.4.0",
+        "es-module-shims": "^1.7.3",
+        "marked": "^4.3.0",
+        "react-fast-compare": "^3.2.2",
+        "tachyons": "^4.12.0",
+        "vscode-languageserver-protocol": "^3.17.3"
+    }
+}