Monaco editor example (#37)

Author: joe-re

packages/server/.gitignore

@@ -0,0 +1 @@
+dist_index

packages/server/.npmignore

@@ -1,5 +1,5 @@
 import yargs from 'yargs'
-import createServer from '../createServer'
+import { createServer } from '../createServer'
 
 const cli = yargs
   .usage('SQL Language Server Command Line Interface')

packages/server/bin/cli.ts

@@ -25,8 +25,7 @@ type Args = {
 	method?: ConnectionMethod
 }
 
-export default function createServer() {
-  let connection: IConnection = createConnection((yargs.argv as Args).method || 'node-ipc')
+export function createServerWithConnection(connection: IConnection) {
   initializeLogging()
   const logger = log4js.getLogger()
   let documents: TextDocuments<TextDocument> = new TextDocuments(TextDocument)
@@ -201,3 +200,8 @@ export default function createServer() {
   logger.info('start sql-languager-server')
   return connection
 }
+
+export function createServer() {
+  let connection: IConnection = createConnection((yargs.argv as Args).method || 'node-ipc')
+  return createServerWithConnection(connection)
+}

packages/server/createServer.ts

@@ -0,0 +1 @@
+lib

packages/server/example/monaco_editor/.gitignore

@@ -0,0 +1,10 @@
+## SQLLanguageServer monaco-editor example
+
+### how to setup
+
+```sh
+$ yarn && yarn build
+$ yarn start
+```
+
+Then connect to http://localhost:3000 on your browser.

packages/server/example/monaco_editor/README.md

@@ -0,0 +1,34 @@
+{
+  "private": true,
+  "name": "sql-lsp-monaco-editor-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "compile": "tsc",
+    "copy": "cp src/index.html lib/index.html",
+    "build": "yarn build:server && yarn build:client",
+    "build:client": "yarn compile && webpack && yarn run copy",
+    "build:server": "cd ../../ && yarn",
+    "start": "node lib/server.js"
+  },
+  "dependencies": {
+    "express": "^4.17.1",
+    "monaco-editor-core": "^0.20.0",
+    "monaco-languageclient": "^0.13.1-next.1",
+    "reconnecting-websocket": "^4.4.0",
+    "vscode-ws-jsonrpc": "^0.2.0",
+    "ws": "^7.3.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.6",
+    "@types/ws": "^7.2.6",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
+    "source-map-loader": "^1.0.1",
+    "style-loader": "^1.2.1",
+    "typescript": "^3.9.6",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12"
+  }
+}

packages/server/example/monaco_editor/package.json

@@ -0,0 +1,70 @@
+/// <reference types="monaco-editor-core/monaco"/>
+
+import { listen, MessageConnection } from "vscode-ws-jsonrpc";
+import {
+  MonacoLanguageClient,
+  MonacoServices,
+  createConnection,
+} from "monaco-languageclient";
+import ReconnectingWebSocket from "reconnecting-websocket";
+
+monaco.languages.register({
+  id: "sql",
+  extensions: [".sql"],
+  aliases: ["SQL", "sql"],
+  mimetypes: ["application/json"],
+});
+
+const value = `SELECT * FROM users`;
+const editor = monaco.editor.create(document.getElementById("container")!, {
+  model: monaco.editor.createModel(
+    value,
+    "sql",
+    monaco.Uri.parse("inmemory://model.sql"),
+  ),
+  glyphMargin: true,
+  tabCompletion: 'on'
+});
+
+MonacoServices.install(editor);
+
+const URL = "ws://localhost:3000/server";
+const webSocket = createWebSocket(URL) as WebSocket;
+listen({
+  webSocket,
+  onConnection: (connection) => {
+    const languageClient = createLanguageClient(connection);
+    const disposable = languageClient.start();
+    connection.onClose(() => disposable.dispose());
+  },
+});
+
+function createLanguageClient(
+  connection: MessageConnection
+): MonacoLanguageClient {
+  return new MonacoLanguageClient({
+    name: "SQL Language Server MonacoClient",
+    clientOptions: {
+      documentSelector: ["sql"],
+    },
+    connectionProvider: {
+      get: (errorHandler, closeHandler) => {
+        return Promise.resolve(
+          createConnection(connection, errorHandler, closeHandler)
+        );
+      },
+    },
+  });
+}
+
+function createWebSocket(url: string): ReconnectingWebSocket {
+  const socketOptions = {
+    maxReconnectionDelay: 10000,
+    minReconnectionDelay: 1000,
+    reconnectionDelayGrowFactor: 1.3,
+    connectionTimeout: 10000,
+    maxRetries: Infinity,
+    debug: false,
+  };
+  return new ReconnectingWebSocket(url, [], socketOptions);
+}

packages/server/example/monaco_editor/src/client.ts

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+</head>
+
+<body>
+	<h2>Monaco Language Client SQLLanguageServer Sample</h2>
+	<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
+	<script src="main.bundle.js"></script>
+</html

packages/server/example/monaco_editor/src/index.html

@@ -0,0 +1,38 @@
+import * as path from "path";
+import * as rpc from "vscode-ws-jsonrpc";
+import * as server from "vscode-ws-jsonrpc/lib/server";
+import * as lsp from "vscode-languageserver";
+import { createConnection } from 'vscode-languageserver';
+import { createServerWithConnection } from '../../../dist_index/index'
+
+export function launchServer(socket: rpc.IWebSocket) {
+  const reader = new rpc.WebSocketMessageReader(socket);
+  const writer = new rpc.WebSocketMessageWriter(socket);
+  const asExternalProccess =
+    process.argv.findIndex((value) => value === "--external") !== -1;
+  if (asExternalProccess) {
+    // start the language server as an external process
+    // TODO: implement it
+
+    // const extJsonServerPath = path.resolve(__dirname, "ext-json-server.js");
+    // const socketConnection = server.createConnection(reader, writer, () =>
+    //   socket.dispose()
+    // );
+    // const serverConnection = server.createServerProcess("JSON", "node", [
+    //   extJsonServerPath,
+    // ]);
+    // server.forward(socketConnection, serverConnection, (message) => {
+    //   if (rpc.isRequestMessage(message)) {
+    //     if (message.method === lsp.InitializeRequest.type.method) {
+    //       const initializeParams = message.params as lsp.InitializeParams;
+    //       initializeParams.processId = process.pid;
+    //     }
+    //   }
+    //   return message;
+    // });
+  } else {
+    // start the language server inside the current process
+    const connection = createConnection(reader, writer)
+    createServerWithConnection(connection)
+  }
+}

packages/server/example/monaco_editor/src/launchServer.ts

@@ -0,0 +1,5 @@
+require('monaco-editor-core');
+(self as any).MonacoEnvironment = {
+    getWorkerUrl: () => './editor.worker.bundle.js'
+}
+require('./client');

packages/server/example/monaco_editor/src/main.ts

@@ -0,0 +1,57 @@
+import * as express from "express";
+import * as ws from "ws";
+import * as http from "http";
+import * as net from "net";
+import * as url from "url";
+import * as rpc from "vscode-ws-jsonrpc";
+import { launchServer } from './launchServer'
+
+process.on("uncaughtException", function (err: any) {
+  console.error("Uncaught Exception: ", err.toString());
+  if (err.stack) {
+    console.error(err.stack);
+  }
+});
+
+const app = express();
+app.use(express.static(__dirname));
+
+const server = app.listen(3000);
+
+const wss = new ws.Server({
+  noServer: true,
+  perMessageDeflate: false,
+});
+
+server.on(
+  "upgrade",
+  (request: http.IncomingMessage, socket: net.Socket, head: Buffer) => {
+    const path = request.url ? url.parse(request.url).pathname : undefined;
+    if (path === "/server") {
+      wss.handleUpgrade(request, socket, head, (webSocket) => {
+        const socket: rpc.IWebSocket = {
+          send: (content) =>
+            webSocket.send(content, (error) => {
+              if (error) {
+                throw error;
+              }
+            }),
+          onMessage: (cb) => webSocket.on("message", cb),
+          onError: (cb) => webSocket.on("error", cb),
+          onClose: (cb) => webSocket.on("close", cb),
+          dispose: () => webSocket.close(),
+        };
+        if (webSocket.readyState === webSocket.OPEN) {
+          console.log("ready to launch server");
+          launchServer(socket)
+        } else {
+          webSocket.on("open", () => {
+            // launch(socket)
+            console.log("ready to raunch server2");
+            launchServer(socket)
+          });
+        }
+      });
+    }
+  }
+);

packages/server/example/monaco_editor/src/server.ts

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "target": "es6",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "outDir": "lib",
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "declarationMap": true,
+        "inlineSources": false,
+        "declaration": true,
+        "stripInternal": true,
+        "lib": [
+          "es2016",
+          "dom"
+        ],
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [ "node_modules" ]
+}

packages/server/example/monaco_editor/tsconfig.json

@@ -0,0 +1,42 @@
+const path = require('path')
+const lib = path.resolve(__dirname, 'lib')
+
+module.exports = {
+  entry: {
+    main: path.resolve(lib, 'main.js'),
+    'editor.worker': 'monaco-editor-core/esm/vs/editor/editor.worker.js'
+  },
+  output: {
+    filename: '[name].bundle.js',
+    path: lib
+  },
+  target: 'web',
+  node: {
+    fs: 'empty',
+    child_process: 'empty',
+    net: 'empty',
+    crypto: 'empty'
+  },
+  resolve: {
+    alias: {
+      'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility')
+    },
+    extensions: ['.js', '.json', '.ttf']
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [{
+      test: /\.css$/i,
+      use: ['style-loader', 'css-loader']
+    },
+    {
+      test: /\.ttf$/,
+      use: ['file-loader']
+    },
+    {
+      test: /\.js$/,
+      enforce: 'pre',
+      loader: 'source-map-loader'
+    }]
+  }
+}

packages/server/example/monaco_editor/webpack.config.js

@@ -0,0 +1,2 @@
+import { createServer, createServerWithConnection } from './createServer'
+export { createServer, createServerWithConnection }

packages/server/index.ts

@@ -1,20 +1,24 @@
 {
   "name": "sql-language-server",
-  "version": "0.10.8",
-  "main": "index.js",
+  "version": "0.10.0",
+  "main": "dist_index/index.js",
   "bin": {
     "sql-language-server": "./dist/cli.js"
   },
   "license": "MIT",
   "scripts": {
-    "compile": "rollup -c",
+    "compile:cli": "rm -rf dist && rollup -c",
+    "compile:index": "rm -rf dist_index && rollup -c rollup.index.config.js",
+    "compile:sqlint": "cd ../sqlint && yarn && yarn build",
+    "clean": "rm -rf dist dist_index",
     "watch": "rollup -c -w",
     "test": "jest",
-    "prepublish": "yarn run compile"
+    "prepublish": "yarn compile:sqlint && yarn compile:cli && yarn compile:index"
   },
   "files": [
     "package.json",
-    "dist"
+    "dist",
+    "dist_index"
   ],
   "dependencies": {
     "@types/pg": "^7.4.10",