@volar/monaco 1.3.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Johnson Chu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# @volar/monaco
+
+`@volar/monaco` is used to bridge the language capabilities implemented based on Volar.js to Monaco Editor, you can expect:
+
+- Support IntelliSense, Diagnosis, Formatting
+- Language behavior is consistent with regular IDEs
+- Optimized Performance
+- Missing package types are automatically fetched from CDN
+
+It should be noted that this package does not participate in syntax highlighting support and language configuration.
+
+We assume you already know:
+
+- How to create a Monaco Editor
+- How to work with Web Worker
+
+## Usage
+
+### Setup worker
+
+```ts
+// my-lang.worker.ts
+import * as worker from 'monaco-editor-core/esm/vs/editor/editor.worker';
+import type * as monaco from 'monaco-editor-core';
+import { createLanguageService } from '@volar/monaco/worker';
+
+self.onmessage = () => {
+	worker.initialize((ctx: monaco.worker.IWorkerContext) => {
+		return createLanguageService({
+			workerContext: ctx,
+			config: {
+				// ...Language Service Config of my-lang language support
+			},
+		});
+	});
+};
+```
+
+#### TypeScript Support
+
+```ts
+import { createLanguageService } from '@volar/monaco/worker';
+import * as ts from 'typescript';
+
+createLanguageService({
+	// ...
+	typescript: {
+		module: ts as any,
+		compilerOptions: {
+			// ...tsconfig options
+		},
+		// Enable auto fetch node_modules types
+		autoFetchTypes: true,
+	},
+});
+```
+
+### Add worker loader to global env
+
+```ts
+import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker';
+import myWorker from './my-lang.worker?worker';
+
+(self as any).MonacoEnvironment = {
+	getWorker(_: any, label: string) {
+		if (label === 'my-lang') {
+			return new myWorker();
+		}
+		return new editorWorker();
+	}
+}
+```
+
+### Setup Language Features and Diagnostics
+
+```ts
+import type { LanguageService } from '@volar/language-service';
+import { editor, languages } from 'monaco-editor-core';
+import * as VolarMonaco from '@volar/monaco';
+
+languages.register({ id: 'my-lang', extensions: ['.my-lang'] });
+
+languages.onLanguage('my-lang', () => {
+	const worker = editor.createWebWorker<LanguageService>({
+		moduleId: 'vs/language/my-lang/myLangWorker',
+		label: 'my-lang',
+	});
+	VolarMonaco.editor.activateMarkers(worker, ['my-lang'], 'my-lang-markers-owner', editor);
+	VolarMonaco.languages.registerProvides(worker, ['my-lang'], languages)
+});
+```
+
+
+## Samples
+
+- Implementation for Vue:\
+  https://github.com/Kingwl/monaco-volar

package/out/editor.d.ts

@@ -0,0 +1,5 @@
+import type { LanguageService } from '@volar/language-service';
+import type { editor as _editor, IDisposable } from 'monaco-editor-core';
+export declare namespace editor {
+    function activateMarkers(worker: _editor.MonacoWebWorker<LanguageService>, languages: string[], markersOwn: string, editor: typeof import('monaco-editor-core').editor): IDisposable;
+}

package/out/editor.js

@@ -0,0 +1,95 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editor = void 0;
+const markers_1 = require("./utils/markers");
+const protocol2monaco = require("./utils/protocol2monaco");
+var editor;
+(function (editor_1) {
+    function activateMarkers(worker, languages, markersOwn, editor) {
+        const disposables = [];
+        const listener = new Map();
+        disposables.push(editor.onDidCreateModel((model) => hostingMarkers(model)), editor.onWillDisposeModel(stopHostingMarkers), editor.onDidChangeModelLanguage((event) => {
+            stopHostingMarkers(event.model);
+            hostingMarkers(event.model);
+        }), {
+            dispose: () => {
+                for (const model of editor.getModels()) {
+                    stopHostingMarkers(model);
+                }
+            }
+        });
+        for (const model of editor.getModels()) {
+            hostingMarkers(model);
+        }
+        return { dispose: () => disposables.forEach((d) => d.dispose()) };
+        function stopHostingMarkers(model) {
+            var _a;
+            editor.setModelMarkers(model, markersOwn, []);
+            const key = model.uri.toString();
+            if (listener.has(key)) {
+                (_a = listener.get(key)) === null || _a === void 0 ? void 0 : _a.dispose();
+                listener.delete(key);
+            }
+        }
+        function hostingMarkers(model) {
+            if (!languages.includes(model.getLanguageId())) {
+                return;
+            }
+            let timer;
+            const changeSubscription = model.onDidChangeContent(() => {
+                clearTimeout(timer);
+                timer = setTimeout(() => doValidation(model), 200);
+            });
+            const visibleSubscription = model.onDidChangeAttached(() => {
+                if (model.isAttachedToEditor()) {
+                    doValidation(model);
+                }
+                else {
+                    editor.setModelMarkers(model, markersOwn, []);
+                }
+            });
+            listener.set(model.uri.toString(), {
+                dispose: () => {
+                    changeSubscription.dispose();
+                    visibleSubscription.dispose();
+                    clearTimeout(timer);
+                }
+            });
+            doValidation(model);
+        }
+        function doValidation(model) {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (model.isDisposed()) {
+                    return;
+                }
+                if (!model.isAttachedToEditor()) {
+                    return;
+                }
+                const languageService = yield getLanguageService(model.uri);
+                const diagnostics = yield languageService.doValidation(model.uri.toString());
+                const result = diagnostics.map(error => {
+                    const marker = protocol2monaco.asMarkerData(error);
+                    markers_1.markers.set(marker, error);
+                    return marker;
+                });
+                editor.setModelMarkers(model, markersOwn, result);
+            });
+        }
+        function getLanguageService(...uris) {
+            return __awaiter(this, void 0, void 0, function* () {
+                yield worker.withSyncedResources(uris);
+                return worker.getProxy();
+            });
+        }
+    }
+    editor_1.activateMarkers = activateMarkers;
+})(editor = exports.editor || (exports.editor = {}));
+//# sourceMappingURL=editor.js.map

package/out/index.d.ts

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

package/out/index.js

@@ -0,0 +1,18 @@
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./languages"), exports);
+__exportStar(require("./editor"), exports);
+//# sourceMappingURL=index.js.map

package/out/languages.d.ts

@@ -0,0 +1,5 @@
+import type { editor, languages as _languages, IDisposable } from 'monaco-editor-core';
+import type { LanguageService } from '@volar/language-service';
+export declare namespace languages {
+    function registerProvides(worker: editor.MonacoWebWorker<LanguageService>, language: _languages.LanguageSelector, languages: typeof import('monaco-editor-core').languages): Promise<IDisposable>;
+}

package/out/languages.js

@@ -0,0 +1,47 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.languages = void 0;
+const provider_1 = require("./utils/provider");
+var languages;
+(function (languages_1) {
+    function registerProvides(worker, language, languages) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const provider = yield (0, provider_1.createLanguageFeaturesProvider)(worker);
+            const disposables = [
+                languages.registerHoverProvider(language, provider),
+                languages.registerReferenceProvider(language, provider),
+                languages.registerRenameProvider(language, provider),
+                languages.registerSignatureHelpProvider(language, provider),
+                languages.registerDocumentSymbolProvider(language, provider),
+                languages.registerDocumentHighlightProvider(language, provider),
+                languages.registerLinkedEditingRangeProvider(language, provider),
+                languages.registerDefinitionProvider(language, provider),
+                languages.registerImplementationProvider(language, provider),
+                languages.registerTypeDefinitionProvider(language, provider),
+                languages.registerCodeLensProvider(language, provider),
+                languages.registerCodeActionProvider(language, provider),
+                languages.registerDocumentFormattingEditProvider(language, provider),
+                languages.registerDocumentRangeFormattingEditProvider(language, provider),
+                languages.registerOnTypeFormattingEditProvider(language, provider),
+                languages.registerLinkProvider(language, provider),
+                languages.registerCompletionItemProvider(language, provider),
+                languages.registerColorProvider(language, provider),
+                languages.registerFoldingRangeProvider(language, provider),
+                languages.registerDeclarationProvider(language, provider),
+                languages.registerSelectionRangeProvider(language, provider),
+                languages.registerInlayHintsProvider(language, provider),
+            ];
+            return { dispose: () => disposables.forEach((d) => d.dispose()) };
+        });
+    }
+    languages_1.registerProvides = registerProvides;
+})(languages = exports.languages || (exports.languages = {}));
+//# sourceMappingURL=languages.js.map

package/out/utils/autoFetchTypes.d.ts

@@ -0,0 +1,6 @@
+export declare function createAutoTypesFetchingHost(cdn: string): {
+    fileExists: (fileName: string) => boolean;
+    readFile: (fileName: string) => string | undefined;
+    files: Map<string, string | undefined>;
+    wait: () => Promise<void | undefined>;
+};

package/out/utils/autoFetchTypes.js

@@ -0,0 +1,82 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAutoTypesFetchingHost = void 0;
+const axios_1 = require("axios");
+function createAutoTypesFetchingHost(cdn) {
+    const fetchTasks = [];
+    const files = new Map();
+    let fetching;
+    return {
+        fileExists,
+        readFile,
+        files,
+        wait: () => __awaiter(this, void 0, void 0, function* () { return yield fetching; }),
+    };
+    function fileExists(fileName) {
+        return readFile(fileName) !== undefined;
+    }
+    function readFile(fileName) {
+        if (!files.has(fileName)) {
+            files.set(fileName, undefined);
+            fetch(fileName);
+        }
+        return files.get(fileName);
+    }
+    function readFileAsync(fileName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fileName.startsWith('/node_modules/')) {
+                const url = cdn + fileName.slice('/node_modules/'.length);
+                const text = yield readWebFile(url);
+                files.set(fileName, text);
+            }
+        });
+    }
+    function readWebFile(uri) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            // ignore .js because it's no help for intellisense
+            if (uri.endsWith('.d.ts') || uri.endsWith('.json')) {
+                try {
+                    return (_a = (yield axios_1.default.get(uri, {
+                        transformResponse: (res) => {
+                            // avoid parse to json object
+                            return res;
+                        },
+                    })).data) !== null && _a !== void 0 ? _a : undefined;
+                }
+                catch (_b) {
+                    // ignore
+                }
+            }
+        });
+    }
+    function fetch(fileName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            fetchTasks.push([fileName, readFileAsync(fileName)]);
+            if (!fetching) {
+                fetching = fetchWorker();
+                yield fetching;
+                fetching = undefined;
+            }
+        });
+    }
+    function fetchWorker() {
+        return __awaiter(this, void 0, void 0, function* () {
+            while (fetchTasks.length) {
+                const tasks = fetchTasks.map(([_, task]) => task);
+                fetchTasks.length = 0;
+                yield Promise.all(tasks);
+            }
+        });
+    }
+}
+exports.createAutoTypesFetchingHost = createAutoTypesFetchingHost;
+//# sourceMappingURL=autoFetchTypes.js.map

package/out/utils/markers.d.ts

@@ -0,0 +1,3 @@
+import * as vscode from 'vscode-languageserver-protocol';
+import type { editor } from 'monaco-editor-core';
+export declare const markers: WeakMap<editor.IMarkerData, vscode.Diagnostic>;

package/out/utils/markers.js

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markers = void 0;
+exports.markers = new WeakMap();
+//# sourceMappingURL=markers.js.map

package/out/utils/monaco2protocol.d.ts

@@ -0,0 +1,7 @@
+import { IRange, languages, Position } from 'monaco-editor-core';
+import * as protocol from 'vscode-languageserver-protocol';
+export declare function asPosition(position: Position): protocol.Position;
+export declare function asRange(range: IRange): protocol.Range;
+export declare function asCompletionContext(context: languages.CompletionContext): protocol.CompletionContext;
+export declare function asTriggerKind(kind: languages.CompletionTriggerKind): protocol.CompletionTriggerKind;
+export declare function asFormattingOptions(options: languages.FormattingOptions): protocol.FormattingOptions;

package/out/utils/monaco2protocol.js

@@ -0,0 +1,38 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asFormattingOptions = exports.asTriggerKind = exports.asCompletionContext = exports.asRange = exports.asPosition = void 0;
+const monaco_editor_core_1 = require("monaco-editor-core");
+const protocol = require("vscode-languageserver-protocol");
+function asPosition(position) {
+    return protocol.Position.create(position.lineNumber - 1, position.column - 1);
+}
+exports.asPosition = asPosition;
+function asRange(range) {
+    return protocol.Range.create(range.startLineNumber - 1, range.startColumn - 1, range.endLineNumber - 1, range.endColumn - 1);
+}
+exports.asRange = asRange;
+function asCompletionContext(context) {
+    return {
+        triggerKind: asTriggerKind(context.triggerKind),
+        triggerCharacter: context.triggerCharacter,
+    };
+}
+exports.asCompletionContext = asCompletionContext;
+function asTriggerKind(kind) {
+    switch (kind) {
+        case monaco_editor_core_1.languages.CompletionTriggerKind.Invoke:
+            return protocol.CompletionTriggerKind.Invoked;
+        case monaco_editor_core_1.languages.CompletionTriggerKind.TriggerCharacter:
+            return protocol.CompletionTriggerKind.TriggerCharacter;
+        case monaco_editor_core_1.languages.CompletionTriggerKind.TriggerForIncompleteCompletions:
+            return protocol.CompletionTriggerKind.TriggerForIncompleteCompletions;
+    }
+}
+exports.asTriggerKind = asTriggerKind;
+function asFormattingOptions(options) {
+    return {
+        tabSize: options.tabSize,
+        insertSpaces: options.insertSpaces,
+    };
+}
+exports.asFormattingOptions = asFormattingOptions;
+//# sourceMappingURL=monaco2protocol.js.map

package/out/utils/protocol2monaco.d.ts

@@ -0,0 +1,38 @@
+import { editor, IMarkdownString, IRange, languages, MarkerSeverity, MarkerTag, Position, Uri } from 'monaco-editor-core';
+import * as protocol from 'vscode-languageserver-protocol';
+export declare function asCompletionList(list: protocol.CompletionList, range: protocol.Range): languages.CompletionList;
+export declare function asCompletionItemKind(kind: protocol.CompletionItemKind | undefined): languages.CompletionItemKind;
+export declare function asCompletionItem(item: protocol.CompletionItem, range: protocol.Range): languages.CompletionItem;
+export declare function asCommand(command: protocol.Command): languages.Command;
+export declare function asTextEdit(edit: protocol.TextEdit): languages.TextEdit;
+export declare function asCompletionItemRange(textEdit: NonNullable<protocol.CompletionItem['textEdit']>): languages.CompletionItem['range'];
+export declare function asRange(range: protocol.Range): IRange;
+export declare function asHover(hover: protocol.Hover): languages.Hover;
+export declare function asMarkdownString(markdownString: protocol.Hover['contents']): IMarkdownString[];
+export declare function asLocation(definition: protocol.LocationLink | protocol.Location): languages.Location;
+export declare function asUri(uri: protocol.URI): Uri;
+export declare function asSignatureHelp(signatureHelp: protocol.SignatureHelp): languages.SignatureHelp;
+export declare function asSignatureInformation(signatureInformation: protocol.SignatureInformation): languages.SignatureInformation;
+export declare function asParameterInformation(parameterInformation: protocol.ParameterInformation): languages.ParameterInformation;
+export declare function asMarkerData(diagnostic: protocol.Diagnostic): editor.IMarkerData;
+export declare function asMarkerTag(tag: protocol.DiagnosticTag): MarkerTag;
+export declare function asRelatedInformation(relatedInformation: protocol.DiagnosticRelatedInformation): editor.IRelatedInformation;
+export declare function asMarkerSeverity(severity: protocol.DiagnosticSeverity | undefined): MarkerSeverity;
+export declare function asWorkspaceEdit(workspaceEdit: protocol.WorkspaceEdit): languages.WorkspaceEdit;
+export declare function asDocumentSymbol(symbol: protocol.DocumentSymbol): languages.DocumentSymbol;
+export declare function asSymbolTag(tag: protocol.SymbolTag): languages.SymbolTag;
+export declare function asSymbolKind(kind: protocol.SymbolKind): languages.SymbolKind;
+export declare function asDocumentHighlight(highlight: protocol.DocumentHighlight): languages.DocumentHighlight;
+export declare function asDocumentHighlightKind(kind: protocol.DocumentHighlightKind | undefined): languages.DocumentHighlightKind;
+export declare function asCodeLens(item: protocol.CodeLens): languages.CodeLens;
+export declare function asCodeAction(item: protocol.CodeAction): languages.CodeAction;
+export declare function asLink(item: protocol.DocumentLink): languages.ILink;
+export declare function asColorInformation(item: protocol.ColorInformation): languages.IColorInformation;
+export declare function asColorPresentation(item: protocol.ColorPresentation): languages.IColorPresentation;
+export declare function asFoldingRange(item: protocol.FoldingRange): languages.FoldingRange;
+export declare function asSelectionRange(item: protocol.SelectionRange): languages.SelectionRange;
+export declare function asInlayHint(item: protocol.InlayHint): languages.InlayHint;
+export declare function asInlayHintKind(kind: protocol.InlayHintKind): languages.InlayHintKind;
+export declare function asInlayHintLabel(label: protocol.InlayHint['label']): languages.InlayHint['label'];
+export declare function asInlayHintLabelPart(part: protocol.InlayHintLabelPart): languages.InlayHintLabelPart;
+export declare function asPosition(position: protocol.Position): Position;