Language Server Refactor

package.json

@@ -13,7 +13,7 @@
     "@apollo/react-hooks": "^3.1.3",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
-    "@onflow/cadence-language-server": "^0.18.1",
+    "@onflow/cadence-language-server": "^0.20.2",
     "@reach/router": "^1.3.4",
     "@types/file-saver": "^2.0.1",
     "apollo-cache-inmemory": "^1.6.6",

src/components/Arguments/components.tsx

@@ -104,7 +104,7 @@ const renderMessage = (message: string) => {
   let spanClass = getSpanClass(message);
 
   const { items } = message.split(' ').reduce(
-    (acc, item) => {
+    (acc, item,i) => {
       let current = acc.items[acc.items.length - 1];
       if (acc.startNew) {
         acc.startNew = false;
@@ -115,7 +115,7 @@ const renderMessage = (message: string) => {
       if (item.startsWith('`')) {
         acc.startNew = true;
         const span = (
-          <span className={spanClass}>{item.replace(/`/g, '')}</span>
+          <span className={spanClass} key={`${item}-${i}`}>{item.replace(/`/g, '')}</span>
         );
         acc.items.push(span);
         acc.startNew = true;
@@ -148,7 +148,7 @@ export const ErrorsList: React.FC<ErrorListProps> = (props) => {
           const message = renderMessage(item.message);
           return (
             <SingleError
-              key={`${i}-${item.message}`}
+              key={`error-${item.message}`}
               onClick={() => goTo(item.position)}
               onMouseOver={() => hover(item.highlight)}
               onMouseOut={() => hideDecorations()}

src/components/Arguments/index.tsx

@@ -222,7 +222,8 @@ const Arguments: React.FC<ArgumentsProps> = (props) => {
     project, 
     active, 
     isSavingCode, 
-    lastSigners 
+    lastSigners,
+    // updateAccountDeployedCode
   } = useProject();
 
   const [notifications, setNotifications] = useState< { [identifier: string]: string[] } >({});

src/components/CadenceEditor.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-const { MonacoServices } = require('monaco-languageclient/lib/monaco-services');
 
 import configureCadence, { CADENCE_LANGUAGE_ID } from 'util/cadence';
 import {
@@ -108,18 +107,16 @@ type EditorState = {
   viewState: any;
 };
 
-let monacoServicesInstalled = false;
-
-type CodeGetter = (index: number) => string | undefined;
-
 type CadenceEditorProps = {
+  type: EntityType;
   code: string;
   mount: string;
   show: boolean;
   onChange: any;
   activeId: string;
-  type: EntityType;
-  getCode: CodeGetter;
+  languageServer: CadenceLanguageServer
+  callbacks: Callbacks
+  serverReady: boolean
 };
 
 type CadenceEditorState = {
@@ -144,7 +141,9 @@ class CadenceEditor extends React.Component<
     onChange: any;
     activeId: string;
     type: EntityType;
-    getCode: CodeGetter;
+    languageServer: any;
+    callbacks: Callbacks;
+    serverReady: boolean;
   }) {
     super(props);
 
@@ -164,73 +163,38 @@ class CadenceEditor extends React.Component<
   }
 
   async componentDidMount() {
-    const editor = monaco.editor.create(
-      document.getElementById(this.props.mount),
-      {
-        theme: 'vs-light',
-        language: CADENCE_LANGUAGE_ID,
-        minimap: {
-          enabled: false,
+    await this.initEditor()
+
+    if (this.props.serverReady) {
+      await this.loadLanguageClient()
+    }
+  }
+
+  async initEditor(){
+    this.editor = monaco.editor.create(
+        document.getElementById(this.props.mount),
+        {
+          theme: 'vs-light',
+          language: CADENCE_LANGUAGE_ID,
+          minimap: {
+            enabled: false,
+          },
         },
-      },
     );
-    this.editor = editor;
-
     this._subscription = this.editor.onDidChangeModelContent((event: any) => {
       this.props.onChange(this.editor.getValue(), event);
     });
 
     const state = this.getOrCreateEditorState(
-      this.props.activeId,
-      this.props.code,
+        this.props.activeId,
+        this.props.code,
     );
     this.editor.setModel(state.model);
     this.editor.focus();
-
-    if (this.props.activeId && !this.callbacks) {
-      const getCode = (index: number) => this.props.getCode(index);
-      await this.loadLanguageServer(getCode);
-    }
   }
 
-  private async loadLanguageServer(getCode: CodeGetter) {
-    this.callbacks = {
-      // The actual callback will be set as soon as the language server is initialized
-      toServer: null,
-
-      // The actual callback will be set as soon as the language server is initialized
-      onClientClose: null,
-
-      // The actual callback will be set as soon as the language client is initialized
-      onServerClose: null,
-
-      // The actual callback will be set as soon as the language client is initialized
-      toClient: null,
-
-      getAddressCode(address: string): string | undefined {
-        const number = parseInt(address, 16);
-        if (!number) {
-          return;
-        }
-        return getCode(number - 1);
-      },
-    };
-
-    // The Monaco Language Client services have to be installed globally, once.
-    // An editor must be passed, which is only used for commands.
-    // As the Cadence language server is not providing any commands this is OK
-
-    if (!monacoServicesInstalled) {
-      monacoServicesInstalled = true;
-      MonacoServices.install(monaco);
-    }
-
-    // Start one language server per editor.
-    // Even though one language server can handle multiple documents,
-    // this demonstrates this is possible and is more resilient:
-    // if the server for one editor crashes, it does not break the other editors
-
-    await CadenceLanguageServer.create(this.callbacks);
+  private async loadLanguageClient() {
+    this.callbacks = this.props.callbacks;
 
     this.languageClient = createCadenceLanguageClient(this.callbacks);
     this.languageClient.start();
@@ -345,13 +309,26 @@ class CadenceEditor extends React.Component<
 
   async componentDidUpdate(prevProps: any) {
     if (this.props.activeId !== prevProps.activeId) {
-      this.switchEditor(prevProps.activeId, this.props.activeId);
-      this.destroyMonaco();
-      await this.componentDidMount();
+      await this.swapMonacoEditor(prevProps.activeId, this.props.activeId)
     }
+
+    const serverStatusChanged = this.props.serverReady !== prevProps.serverReady
+    const activeIdChanged = this.props.activeId !== prevProps.activeId
+    const typeChanged = this.props.type !== prevProps.type
+    if(serverStatusChanged || activeIdChanged || typeChanged){
+      if(this.props.callbacks.toServer !== null){
+        await this.loadLanguageClient()
+      }
+    }
+  }
+
+  async swapMonacoEditor(prev: any, current: any){
+    await this.destroyMonaco();
+    await this.initEditor();
+    this.switchEditor(prev, current);
   }
 
-  destroyMonaco() {
+  destroyMonaco(){
     if (this.editor) {
       this.editor.dispose();
       const model = this.editor.getModel();