feat: add live server support to connect with CLI (#141)

* feat: add live server support to connect with CLI

* do not hardcode localhost

* add bidirectional communication

* fix linter errors

* add cross-env dep

* add notifications for live server connection and icon in terminal

* fix linter errors

* change Introduction to Information

* change Introduction to Information

* Remove console.log

* Add ability to send multiple types of messages over WS server

* Fix linter

* Remove .DS_Store and add it to .gitignore

* Apply suggestions from code review

Co-authored-by: David Boyne <boyneyy123@gmail.com>

Co-authored-by: Matatjahu <urbanczyk.maciej.95@gmail.com>
Co-authored-by: David Boyne <boyneyy123@gmail.com>

Author: 3 people

.gitignore

@@ -1,4 +1,5 @@
+.DS_Store
 /node_modules
 .vscode/
 /lib
-/build
+/build

package-lock.json

@@ -47,10 +47,10 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts build",
     "test": "npm run test:unit",
-    "test:unit": "react-scripts test --detectOpenHandles",
+    "test:unit": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts test --detectOpenHandles",
     "eject": "react-scripts eject",
     "lint": "eslint --max-warnings 0 --config .eslintrc .",
     "lint:fix": "eslint --max-warnings 0 --config .eslintrc . --fix",
@@ -86,12 +86,13 @@
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "conventional-changelog-conventionalcommits": "^4.6.1",
+    "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "7.26.1",
     "eslint-plugin-security": "^1.4.0",
     "eslint-plugin-sonarjs": "^0.10.0",
-    "react-scripts": "4.0.3",
     "markdown-toc": "^1.2.0",
+    "react-scripts": "4.0.3",
     "semantic-release": "^18.0.0",
     "typescript": "^4.4.3"
   },

package.json

@@ -50,7 +50,7 @@ export const MonacoWrapper: React.FunctionComponent<MonacoWrapperProps> = ({
   }
 
   const onChange = debounce((v: string) => {
-    EditorService.updateState(v);
+    EditorService.updateState({ content: v });
     SpecificationService.parseSpec(v);
   }, 250);
 

src/components/Editor/MonacoWrapper.tsx

@@ -305,18 +305,18 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
         <li className="mb-4">
           <div
             className={`p-2 pl-3 text-white cursor-pointer hover:bg-gray-900 ${
-              hash === 'introduction' ? 'bg-gray-900' : ''
+              hash === 'information' ? 'bg-gray-900' : ''
             }`}
             onClick={() =>
               NavigationService.scrollTo(
                 '/info',
                 rawSpec,
-                'introduction',
+                'information',
                 language,
               )
             }
           >
-            Introduction
+            Information
           </div>
         </li>
         {spec.hasServers() && (

src/components/Navigation.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
+import { VscRadioTower } from 'react-icons/vsc'; 
 
 import { SpecificationService } from '../../services';
 import state from '../../state';
 
 interface TerminalInfoProps {}
 
 export const TerminalInfo: React.FunctionComponent<TerminalInfoProps> = () => {
+  const appState = state.useAppState();
   const editorState = state.useEditorState();
   const parserState = state.useParserState();
 
+  const liveServer = appState.liveServer.get();
   const actualVersion = parserState.parsedSpec.get()?.version() || '2.0.0';
   const latestVersion = SpecificationService.getLastVersion();
   const documentValid = parserState.valid.get();
@@ -25,8 +28,16 @@ export const TerminalInfo: React.FunctionComponent<TerminalInfoProps> = () => {
 
   return (
     <div className="flex flex-row px-2">
+      {liveServer && (
+        <div className="flex flex-row content-center ml-3">
+          <span className="inline-block mr-2">
+            <VscRadioTower className="w-4 h-4 text-yellow-500" />
+          </span>
+          <span>Live server</span>
+        </div>
+      )}
       {errors.length ? (
-        <div>
+        <div className="ml-3">
           <span className="text-red-500">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +55,7 @@ export const TerminalInfo: React.FunctionComponent<TerminalInfoProps> = () => {
           <span>Invalid</span>
         </div>
       ) : (
-        <div>
+        <div className="ml-3">
           <span className="text-green-500">
             <svg
               xmlns="http://www.w3.org/2000/svg"

src/components/Terminal/TerminalInfo.tsx

@@ -5,9 +5,17 @@ import { FormatService } from './format.service';
 import { SpecificationService } from './specification.service';
 
 import state from '../state';
+import { SocketClient } from './socket-client.service';
 
 export type AllowedLanguages = 'json' | 'yaml' | 'yml';
 
+export interface UpdateState {
+  content: string,
+  updateModel?: boolean,
+  sendToServer?: boolean,
+  language?: AllowedLanguages,
+} 
+
 export class EditorService {
   static getInstance(): monacoAPI.editor.IStandaloneCodeEditor {
     return window.Editor;
@@ -18,12 +26,17 @@ export class EditorService {
       .getModel()?.getValue() as string;
   }
 
-  static updateState(
-    content: string,
+  static updateState({
+    content,
     updateModel = false,
-    language?: AllowedLanguages,
-  ) {
-    if (!content) {
+    sendToServer = true,
+    language,
+  }: UpdateState) {
+    if (state.editor.editorValue.get() === content) {
+      return;
+    }
+
+    if (!content && typeof content !== 'string') {
       return;
     }
 
@@ -44,6 +57,10 @@ export class EditorService {
     }
     state.editor.editorValue.set(content);
 
+    if (sendToServer) {
+      SocketClient.send('file:update', { code: content });
+    }
+
     if (updateModel) {
       const instance = this.getInstance();
       if (instance) {
@@ -58,7 +75,7 @@ export class EditorService {
       this.getValue(),
       version || SpecificationService.getLastVersion(),
     );
-    this.updateState(converted, true);
+    this.updateState({ content: converted, updateModel: true });
   }
 
   static async importFromURL(url: string): Promise<void> {
@@ -67,7 +84,7 @@ export class EditorService {
         .then(res => res.text())
         .then(text => {
           state.editor.documentFrom.set(`URL: ${url}` as `URL: ${string}`);
-          this.updateState(text, true);
+          this.updateState({ content: text, updateModel: true });
         })
         .catch(err => {
           console.error(err);
@@ -89,7 +106,7 @@ export class EditorService {
     fileReader.onload = fileLoadedEvent => {
       const content = fileLoadedEvent.target?.result;
       console.log(content);
-      this.updateState(String(content), true);
+      this.updateState({ content: String(content), updateModel: true });
     };
     fileReader.readAsText(file, 'UTF-8');
   }
@@ -98,7 +115,7 @@ export class EditorService {
     try {
       const decoded = FormatService.decodeBase64(content);
       state.editor.documentFrom.set('Base64');
-      this.updateState(decoded, true);
+      this.updateState({ content: String(decoded), updateModel: true });
     } catch (err) {
       console.error(err);
       throw err;
@@ -108,7 +125,7 @@ export class EditorService {
   static async convertToYaml() {
     try {
       const yamlContent = FormatService.convertToYaml(this.getValue());
-      yamlContent && this.updateState(yamlContent, true, 'yaml');
+      yamlContent && this.updateState({ content: yamlContent, updateModel: true, language: 'yaml' });
     } catch (err) {
       console.error(err);
       throw err;
@@ -118,7 +135,7 @@ export class EditorService {
   static async convertToJSON() {
     try {
       const jsonContent = FormatService.convertToJSON(this.getValue());
-      jsonContent && this.updateState(jsonContent, true, 'json');
+      jsonContent && this.updateState({ content: jsonContent, updateModel: true, language: 'json' });
     } catch (err) {
       console.error(err);
       throw err;
@@ -214,7 +231,6 @@ export class EditorService {
   }
 
   private static fileName = 'asyncapi';
-
   private static downloadFile(content: string, fileName: string) {
     return fileDownload(content, fileName);
   }

src/services/editor.service.ts

@@ -2,4 +2,5 @@ export * from './editor.service';
 export * from './format.service';
 export * from './monaco.service';
 export * from './navigation.service';
+export * from './socket-client.service';
 export * from './specification.service';

src/services/index.ts

@@ -2,6 +2,7 @@
 import { getLocationOf } from '@asyncapi/parser/lib/utils';
 
 import { EditorService } from './editor.service';
+import { SocketClient } from './socket-client.service';
 import { SpecificationService } from './specification.service';
 import state from '../state';
 
@@ -84,19 +85,17 @@ export class NavigationService {
 
     const documentUrl = urlParams.get('url') || urlParams.get('load');
     const base64Document = urlParams.get('base64');
+    const liveServerPort = urlParams.get('liveServer');
 
-    if (!documentUrl && !base64Document) {
-      state.app.initialized.set(true);
-      return;
-    }
-
-    if (documentUrl) {
+    if (liveServerPort && typeof Number(liveServerPort) === 'number') {
+      SocketClient.connect(window.location.hostname, liveServerPort);
+    } else if (documentUrl) {
       await EditorService.importFromURL(documentUrl);
     } else if (base64Document) {
       await EditorService.importBase64(base64Document);
     }
 
-    if (this.isReadOnly()) {
+    if (this.isReadOnly(true)) {
       await SpecificationService.parseSpec(state.editor.editorValue.get());
       state.sidebar.show.set(false);
       state.editor.set({

src/services/navigation.service.ts

@@ -0,0 +1,78 @@
+import toast from 'react-hot-toast';
+
+import { EditorService } from './editor.service';
+
+import state from '../state';
+
+interface IncomingMessage {
+  type: 'file:loaded' | 'file:changed' | 'file:deleted';
+  code?: string;
+}
+
+export class SocketClient {
+  private static ws: WebSocket;
+
+  static connect(hostname: string, port: string | number) {
+    try {
+      const ws = this.ws = new WebSocket(`ws://${hostname || 'localhost'}:${port}/live-server`);
+
+      ws.onopen = this.onOpen;
+      ws.onmessage = this.onMessage;
+      ws.onerror = this.onError;
+    } catch (e) {
+      console.error(e);
+      this.onError();
+    }
+  }
+
+  static send(eventName: string, content: Record<string, unknown>) {
+    this.ws && this.ws.send(JSON.stringify({ type: eventName, ...content }));
+  }
+
+  private static onMessage(event: MessageEvent<any>) {
+    try {
+      const json: IncomingMessage = JSON.parse(event.data);
+  
+      switch (json.type) {
+      case 'file:loaded':
+      case 'file:changed':
+        EditorService.updateState({ 
+          content: json.code as string, 
+          updateModel: true, 
+          sendToServer: false,
+        });
+        break;
+      case 'file:deleted':
+        console.warn('Live Server: The file has been deleted on the file system.');
+        break;
+      default:
+        console.warn('Live Server: An unknown even has been received. See details:');
+        console.log(json);
+      }
+    } catch (e) {
+      console.error(`Live Server: An invalid event has been received. See details:\n${event.data}`);
+    }
+  }
+
+  private static onOpen() {
+    toast.success(
+      <div>
+        <span className="block text-bold">
+          Correctly connected to the live server!
+        </span>
+      </div>
+    );
+    state.app.liveServer.set(true);
+  }
+
+  private static onError() {
+    toast.error(
+      <div>
+        <span className="block text-bold">
+          Failed to connect to live server. Please check developer console for more information.
+        </span>
+      </div>
+    );
+    state.app.liveServer.set(false);
+  }
+}