ace-linters 0.1.0 → 0.2.0

package/README.md

@@ -1,12 +1,14 @@
 # Ace Linters (Ace Language Client)
 
-Ace linters is a library that brings language-aware features to the Ace editor. It includes a number of language services, each of which provides support for a specific language, such as JSON, HTML, CSS, and Typescript.
+Ace linters is a library that brings language-aware features to the Ace editor. It includes a number of language
+services, each of which provides support for a specific language, such as JSON, HTML, CSS, and Typescript.
 
 Ace linters works in two modes: **WebSockets** and **WebWorkers**.
 
 ## Features
 
 With Ace linters, you can easily add the following language-aware features to your Ace editor:
+
 - Error checking
 - Code completion
 - Type checking
@@ -16,6 +18,7 @@ With Ace linters, you can easily add the following language-aware features to yo
 ## Supported languages
 
 Ace linters supports the following languages by default with webworkers approach:
+
 - JSON, JSON5 (with JsonService)
 - HTML (with HtmlService)
 - CSS, SCSS, LESS (with CssService)
@@ -23,6 +26,7 @@ Ace linters supports the following languages by default with webworkers approach
 - Lua (with LuaService)
 
 For WebSockets you could connect any of your Language Server folowing LSP
+
 ## Installation
 
 To install Ace linters, you can use the following command:
@@ -31,29 +35,32 @@ To install Ace linters, you can use the following command:
 npm install ace-linters
 ```
 
-## Usage with WebWorker
+## Usage with WebWorker (JSON-RPC)
 
 To use Ace linters with WebWorker, you will first need to include it in your project and create an instance of the Ace
-editor
-and
-an instance of LanguageProvider. Then, LanguageProvider will use the appropriate language service based on the mode being used:
+editor and an instance of LanguageProvider.
 
 *client.js*:
+
 ```javascript
 import * as ace from "ace-code";
 import {Mode as TypescriptMode} from "ace-code/src/mode/typescript";
-import {registerStyles, LanguageProvider, MessageController} from "ace-linters";
-import { ScriptTarget, JsxEmit } from "ace-linters/type-converters/typescript-converters";
+import {registerStyles, LanguageProvider} from "ace-linters";
+import {ScriptTarget, JsxEmit} from "ace-linters/type-converters/typescript-converters";
 
-// Register custom styles for the hover tooltip
-registerStyles();
-
-// Create a web worker and a message controller
+// Create a web worker
 let worker = new Worker(new URL('./webworker.js', import.meta.url));
-let messageController = new MessageController(worker);
+
+// Create an Ace editor
+let editor = ace.edit("container", {
+    mode: new TypescriptMode() // Set the mode of the editor to Typescript
+});
+
+// Create a language provider for web worker
+let languageProvider = LanguageProvider.for(worker);
 
 // Set global options for the Typescript service
-messageController.setGlobalOptions("typescript", {
+languageProvider.setGlobalOptions("typescript", {
     compilerOptions: {
         allowJs: true,
         target: ScriptTarget.ESNext,
@@ -61,25 +68,19 @@ messageController.setGlobalOptions("typescript", {
     }
 });
 
-// Create an Ace editor
-let editor = ace.edit("container");
-
-// Set the mode of the editor to Typescript
-editor.session.setMode(new TypescriptMode());
-
-// Create a language provider
-let languageProvider = new LanguageProvider(messageController);
-
 // Register the editor with the language provider
 languageProvider.registerEditor(editor);
 
 ``` 
+
 In WebWorkers mode, you need to register
 services on the webworker side. Like this:
 
 *webworker.js*
+
 ```javascript
 import {ServiceManager} from "ace-linters/services/service-manager";
+
 let manager = new ServiceManager(self);
 manager.registerService("typescript", {
     module: () => import("ace-linters/services/typescript/typescript-service"),
@@ -88,37 +89,31 @@ manager.registerService("typescript", {
 });
 ```
 
-[Example client](https://github.com/mkslanc/ace-linters/blob/main/packages/demo/webworker-lsp/demo.ts).
+[Example client](https://github.com/mkslanc/ace-linters/blob/main/packages/demo/webworker-json-rpc/demo.ts)
 
-[Example web worker](https://github.com/mkslanc/ace-linters/blob/main/packages/demo/webworker-lsp/webworker.ts)
+[Example web worker](https://github.com/mkslanc/ace-linters/blob/main/packages/demo/webworker-json-rpc/webworker.ts)
+
+## Usage with WebSocket (JSON-RPC)
 
-## Usage with WebSocket
 In WebSockets mode, you need to start a language server on any port and connect to it.
 
 Here's an example client:
+
 ```javascript
 import * as ace from "ace-code";
 import {Mode as JSONMode} from "ace-code/src/mode/json"; //any mode you want
-import {registerStyles, LanguageProvider, MessageControllerWS} from "ace-linters";
-import { ScriptTarget, JsxEmit } from "ace-linters/type-converters/typescript-converters";
-
-// Register custom styles for the hover tooltip
-registerStyles();
+import {LanguageProvider} from "ace-linters";
 
-// Create a web socket and a message controller
+// Create a web socket
 const webSocket = new WebSocket("ws://localhost:3000/exampleServer"); // adress of your websocket server
 
-//Message controller for web sockets
-let messageController = new MessageControllerWS(webSocket);
-
 // Create an Ace editor
-let editor = ace.edit("container");
-
-// Set the mode of the editor to JSON
-editor.session.setMode(new JSONMode());
+let editor = ace.edit("container", {
+    mode: new JSONMode() // Set the mode of the editor to JSON
+});
 
-// Create a language provider
-let languageProvider = new LanguageProvider(messageController);
+// Create a language provider for web socket
+let languageProvider = LanguageProvider.for(webSocket);
 
 // Register the editor with the language provider
 languageProvider.registerEditor(editor);
@@ -127,5 +122,11 @@ languageProvider.registerEditor(editor);
 [Example client](https://github.com/mkslanc/ace-linters/blob/main/packages/demo/websockets-lsp/client.ts)
 
 [Example server](https://github.com/mkslanc/ace-linters/tree/main/packages/demo/websockets-lsp/server)
+
+## Usage with WebWorker (other format)
+
+You can use Ace linters with pre-defined services by looking at the "Ace linters with WebWorker demo (with default services)" example on GitHub:
+[Example](https://github.com/mkslanc/ace-linters/blob/main/packages/demo/webworker-lsp/)
 ## License
+
 Ace linters is released under the [MIT License](https://opensource.org/licenses/MIT).

package/components/description-tooltip.ts

@@ -20,7 +20,7 @@ export class DescriptionTooltip extends Tooltip {
         this.provider = provider;
         Tooltip.call(this, document.body);
 
-        event.addListener(this.getElement(), "mouseout", this.onTooltipMouseOut);
+        event.addListener(this.getElement(), "mouseout", this.onMouseOut);
 
         this.getElement().style.pointerEvents = "auto";
         this.getElement().style.whiteSpace = "pre-wrap";
@@ -30,14 +30,25 @@ export class DescriptionTooltip extends Tooltip {
         editor.on("mousemove", this.onMouseMove);
     }
 
-    private $registerEditorEvents(editor: Ace.Editor) {
+    private $activateEditor(editor: Ace.Editor) {
         this.$activeEditor = editor;
-        editor.on("change", this.$hide);
-        editor.on("mousewheel", this.$hide);
-        //@ts-ignore
-        editor.on("mousedown", this.$hide);
 
-        editor.container.addEventListener("mouseout", this.onTooltipMouseOut);
+        this.$activeEditor.container.addEventListener("mouseout", this.onMouseOut);
+    }
+
+    private $inactivateEditor() {
+        if (!this.$activeEditor)
+            return;
+        this.$activeEditor.container.removeEventListener("mouseout", this.onMouseOut);
+
+        this.$activeEditor = null;
+    }
+
+    private $registerEditorEvents() {
+        this.$activeEditor.on("change", this.$hide);
+        this.$activeEditor.on("mousewheel", this.$hide);
+        //@ts-ignore
+        this.$activeEditor.on("mousedown", this.$hide);
     }
 
     private $removeEditorEvents() {
@@ -46,7 +57,7 @@ export class DescriptionTooltip extends Tooltip {
         //@ts-ignore
         this.$activeEditor.off("mousedown", this.$hide);
 
-        this.$activeEditor.container.removeEventListener("mouseout", this.onTooltipMouseOut);
+        this.$activeEditor.container.removeEventListener("mouseout", this.onMouseOut);
         this.$activeEditor = null;
     }
 
@@ -54,24 +65,23 @@ export class DescriptionTooltip extends Tooltip {
         clearTimeout(this.$mouseMoveTimer);
         clearTimeout(this.$showTimer);
         if (this.isOpen) {
-            this.doHover(editor);
+            this.doHover();
         } else {
             this.$mouseMoveTimer = setTimeout(() => {
-                this.doHover(editor);
+                this.$inactivateEditor();
+                this.$activateEditor(editor);
+                this.doHover();
                 this.$mouseMoveTimer = null;
             }, 500);
 
         }
     };
 
-    doHover = (editor) => {
-        if (!editor) {
-            console.log(editor);
-        }
-        let renderer = editor.renderer;
+    doHover = () => {
+        let renderer = this.$activeEditor.renderer;
         let screenPos = renderer.pixelToScreenCoordinates(this.x, this.y);
 
-        let session = editor.session;
+        let session = this.$activeEditor.session;
 
         this.provider.doHover(session, screenPos, (hover) => {
             let description = this.provider.getTooltipText(hover);
@@ -99,21 +109,21 @@ export class DescriptionTooltip extends Tooltip {
             this.column = column;
 
             if (this.$mouseMoveTimer) {
-                this.$show(editor);
+                this.$show();
             } else {
                 this.$showTimer = setTimeout(() => {
-                    this.$show(editor);
+                    this.$show();
                     this.$showTimer = null;
                 }, 500);
             }
         });
     }
 
-    $show = (editor: Editor) => {
-        let renderer = editor.renderer;
+    $show = () => {
+        let renderer = this.$activeEditor.renderer;
         let position = renderer.textToScreenCoordinates(this.row, this.column);
 
-        let cursorPos = editor.getCursorPosition();
+        let cursorPos = this.$activeEditor.getCursorPosition();
 
         this.show(null, position.pageX, position.pageY);
 
@@ -138,7 +148,7 @@ export class DescriptionTooltip extends Tooltip {
         else
             position.pageY += renderer.lineHeight;
 
-        this.$registerEditorEvents(editor);
+        this.$registerEditorEvents();
 
         this.getElement().style.maxWidth = rect.width - (position.pageX - rect.left) + "px";
         this.show(null, position.pageX, position.pageY);
@@ -151,12 +161,8 @@ export class DescriptionTooltip extends Tooltip {
     };
 
     onMouseOut = (e: MouseEvent) => {
-        if (e && e.relatedTarget == this.getElement())
-            return;
-        this.$hide();
-    };
-
-    onTooltipMouseOut = (e: MouseEvent) => {
+        clearTimeout(this.$mouseMoveTimer);
+        clearTimeout(this.$showTimer);
         if (!e.relatedTarget || e.relatedTarget == this.getElement())
             return;
 
@@ -169,14 +175,15 @@ export class DescriptionTooltip extends Tooltip {
     }
 
     $hide = () => {
-        clearTimeout(this.$timer);
+        clearTimeout(this.$mouseMoveTimer);
+        clearTimeout(this.$showTimer);
         this.$removeEditorEvents();
         this.hide();
     }
 
     destroy() {
         this.$hide();
-        event.removeListener(this.getElement(), "mouseout", this.onTooltipMouseOut);
+        event.removeListener(this.getElement(), "mouseout", this.onMouseOut);
     };
 
 }

package/index.ts

@@ -2,9 +2,7 @@ import {MessageController} from "./message-controller";
 import * as lintersCSS from "./css/linters.css";
 import * as dom from "ace-code/src/lib/dom";
 
-export function registerStyles() {
-    dom.importCssString(lintersCSS, "linters.css");
-}
+dom.importCssString(lintersCSS, "linters.css");
 
 export {LanguageProvider} from "./language-provider";
 export {MessageController} from "./message-controller";

package/language-provider.ts

@@ -2,7 +2,6 @@ import {Ace, Range as AceRange} from "ace-code";
 import {DescriptionTooltip} from "./components/description-tooltip";
 import {AceLinters} from "./types";
 import Tooltip = AceLinters.Tooltip;
-import TextEdit = AceLinters.TextEdit;
 import {FormattingOptions} from "vscode-languageserver-protocol";
 import {MarkDownConverter} from "./types";
 import {CommonConverter} from "./type-converters/common-converters";
@@ -11,7 +10,20 @@ import ServiceOptions = AceLinters.ServiceOptions;
 import Editor = Ace.Editor;
 import EditSession = Ace.EditSession;
 import Completion = Ace.Completion;
-import Annotation = Ace.Annotation;
+import {MessageControllerWS} from "./message-controller-ws";
+import ServiceOptionsMap = AceLinters.ServiceOptionsMap;
+import {MessageController} from "./message-controller";
+import {
+    fromAceDelta,
+    fromPoint,
+    fromRange,
+    toAnnotations,
+    toCompletionItem,
+    toCompletions,
+    toRange, toResolvedCompletion,
+    toTooltip
+} from "./type-converters/lsp-converters";
+import * as lsp from "vscode-languageserver-protocol";
 
 let showdown = require('showdown');
 
@@ -20,15 +32,37 @@ export class LanguageProvider {
     private $descriptionTooltip: DescriptionTooltip;
     private readonly $markdownConverter: MarkDownConverter;
     private readonly $messageController: IMessageController;
-    private $sessionLanguageProviders: {[sessionID: string]: SessionLanguageProvider} = {};
+    private $sessionLanguageProviders: { [sessionID: string]: SessionLanguageProvider } = {};
     private $editors: Editor[] = [];
 
-    constructor(messageController: IMessageController, markdownConverter?: MarkDownConverter) {
+    private constructor(messageController: IMessageController, markdownConverter?: MarkDownConverter) {
         this.$messageController = messageController;
         this.$markdownConverter = markdownConverter ?? new showdown.Converter();
         this.$descriptionTooltip = new DescriptionTooltip(this);
     }
 
+    /**
+     *  Creates LanguageProvider for any Language Server to connect with JSON-RPC (webworker, websocket)
+     * @param {Worker | WebSocket} mode
+     * @param markdownConverter
+     */
+    static for(mode: Worker | WebSocket, markdownConverter?: MarkDownConverter) { //TODO:
+        let messageController = new MessageControllerWS(mode);
+        return new LanguageProvider(messageController, markdownConverter);
+    }
+
+    /**
+     *  Creates LanguageProvider using our transport protocol with ability to register different services on same
+     *  webworker
+     * @param {Worker} worker
+     * @param markdownConverter
+     */
+    static default(worker: Worker, markdownConverter?: MarkDownConverter) {
+        let messageController: IMessageController;
+        messageController = new MessageController(worker);
+        return new LanguageProvider(messageController, markdownConverter);
+    }
+
     private $registerSession = (session?: EditSession, options?: ServiceOptions) => {
         if (!session)
             return;
@@ -66,14 +100,19 @@ export class LanguageProvider {
         sessionLanguageProvider.setOptions(options);
     }
 
+    setGlobalOptions<T extends keyof ServiceOptionsMap>(serviceName: T, options: ServiceOptionsMap[T], merge = false) {
+        this.$messageController.setGlobalOptions(serviceName, options, merge);
+    }
+
     doHover(session: EditSession, position: Ace.Point, callback?: (hover: Tooltip) => void) {
-        this.$messageController.doHover(this.$getFileName(session), position, callback);
+        this.$messageController.doHover(this.$getFileName(session), fromPoint(position), (hover) => callback(toTooltip(hover)));
     }
 
     getTooltipText(hover: Tooltip) {
         if (!hover)
             return;
-        let text = hover.content.type === CommonConverter.TooltipType.markdown ? CommonConverter.cleanHtml(this.$markdownConverter.makeHtml(hover.content.text)) : hover.content.text;
+        let text = hover.content.type === CommonConverter.TooltipType.markdown ?
+            CommonConverter.cleanHtml(this.$markdownConverter.makeHtml(hover.content.text)) : hover.content.text;
         return {text: text, range: hover.range}
     }
 
@@ -82,9 +121,10 @@ export class LanguageProvider {
         sessionLanguageProvider.format();
     }
 
-    doComplete(editor: Editor, session: EditSession, callback: (CompletionList: Completion[]) => void) {
+    doComplete(editor: Editor, session: EditSession, callback: (CompletionList: Completion[] | null) => void) {
         let cursor = editor.getCursorPosition();
-        this.$messageController.doComplete(this.$getFileName(session), cursor, callback);
+        this.$messageController.doComplete(this.$getFileName(session), fromPoint(cursor),
+            (completionList) => callback(toCompletions(completionList)));
     }
 
     $registerCompleters(editor: Editor) {
@@ -93,14 +133,17 @@ export class LanguageProvider {
                 getCompletions: async (editor, session, pos, prefix, callback) => {
                     this.doComplete(editor, session, (completions) => {
                         let fileName = this.$getFileName(session);
+                        if (!completions)
+                            return;
                         completions.forEach((item) => item["fileName"] = fileName);
                         callback(null, CommonConverter.normalizeRanges(completions));
                     });
                 },
                 getDocTooltip: (item) => {
                     if (!item["isResolved"]) {
-                        this.$messageController.doResolve(item["fileName"], item, (completion) => {
+                        this.$messageController.doResolve(item["fileName"], toCompletionItem(item), (completionItem) => {
                             item["isResolved"] = true;
+                            let completion = toResolvedCompletion(item, completionItem);
                             item.docText = completion.docText;
                             if (completion.docHTML) {
                                 item.docHTML = completion.docHTML;
@@ -139,12 +182,14 @@ class SessionLanguageProvider {
         this.$messageController = messageController;
         this.session = session;
         this.initFileName();
+
+        session.doc["version"] = 0;
         session.doc.on("change", this.$changeListener, true);
 
         // @ts-ignore
         session.on("changeMode", this.$changeMode);
 
-        this.$messageController.init(this.fileName, session.getValue(), this.$mode, options, this.$connected, this.$showAnnotations);
+        this.$messageController.init(this.fileName, session.doc, this.$mode, options, this.$connected, this.$showAnnotations);
     }
 
     private $connected = () => {
@@ -187,13 +232,12 @@ class SessionLanguageProvider {
     }
 
     private $changeListener = (delta) => {
+        this.session.doc["version"]++;
         if (!this.$deltaQueue) {
             this.$deltaQueue = [];
             setTimeout(this.$sendDeltaQueue, 0);
         }
-        if (delta.action == "insert")
-            this.$deltaQueue.push(delta.start, delta.lines);
-        else this.$deltaQueue.push(delta.start, delta.end);
+        this.$deltaQueue.push(delta);
     }
 
     private $sendDeltaQueue = () => {
@@ -201,11 +245,13 @@ class SessionLanguageProvider {
         if (!deltas) return;
         this.$deltaQueue = null;
         if (deltas.length)
-            this.$messageController.change(this.fileName, deltas, this.session.getValue(), this.session.doc.getLength());
+            this.$messageController.change(this.fileName, deltas.map((delta) =>
+                fromAceDelta(delta, this.session.doc.getNewLineCharacter())), this.session.doc);
     };
 
-    private $showAnnotations = (annotations: Annotation[]) => {
+    private $showAnnotations = (diagnostics) => {
         this.session.clearAnnotations();
+        let annotations = toAnnotations(diagnostics)
         if (annotations && annotations.length > 0) {
             this.session.setAnnotations(annotations);
         }
@@ -232,19 +278,19 @@ class SessionLanguageProvider {
             selectionRanges = [new AceRange(0, 0, row, column)];
         }
         for (let range of selectionRanges) {
-            this.$messageController.format(this.fileName, range, $format, this.$applyFormat);
+            this.$messageController.format(this.fileName, fromRange(range), $format, this.$applyFormat);
         }
     }
 
-    private $applyFormat = (edits: TextEdit[]) => {
-        for (let edit of edits) {
-            this.session.doc.replace(CommonConverter.toRange(edit.range), edit.newText); //we need this to
-            // mirror Range
+    private $applyFormat = (edits: lsp.TextEdit[]) => {
+        for (let edit of edits.reverse()) {
+            this.session.doc.replace(toRange(edit.range), edit.newText);
         }
     }
 
     doComplete(editor: Editor, callback: (CompletionList) => void) {
         let cursor = editor.getCursorPosition();
-        this.$messageController.doComplete(this.fileName, cursor, callback);
+        this.$messageController.doComplete(this.fileName, fromPoint(cursor),
+            (completionList) => callback(toCompletions(completionList)));
     }
-}
+}