Merge pull request #196 from x1unix/dev

chore: Release v.1.12.0

Author: x1unix

web/public/.gitignore

@@ -1,2 +1,2 @@
-worker.wasm
-wasm_exec.js
+wasm_exec.js
+*.wasm

web/src/changelog.json

@@ -1,16 +1,16 @@
 {
-  "Interface - General": [
+  "Interface - IDE": [
     {
-      "issueId": 169,
-      "url": "/pull/169",
-      "description": "Add Vim mode emulation."
+      "issueId": 194,
+      "url": "/pull/194",
+      "description": "Notify about time.Now() issues when using server environment."
     }
   ],
-  "Interface - Bugs": [
+  "Interface - Vim": [
     {
-      "issueId": 178,
-      "url": "/pull/178",
-      "description": "Fix word wrap in alert box on small screens."
+      "issueId": 195,
+      "url": "/pull/195",
+      "description": "Implement :w command for Vim mode"
     }
   ]
 }

web/src/components/core/StatusBar/StatusBar.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { connect } from 'react-redux';
-import {editor} from 'monaco-editor';
-import {newEnvironmentChangeAction} from '~/store';
+import React, {useState} from 'react';
+import {connect} from 'react-redux';
+import {editor, MarkerSeverity} from 'monaco-editor';
+import { newEnvironmentChangeDispatcher } from '~/store';
 import config, {RuntimeType} from '~/services/config';
 import EllipsisText from '~/components/utils/EllipsisText';
 import StatusBarItem from '~/components/core/StatusBar/StatusBarItem';
@@ -17,6 +17,37 @@ interface Props {
   dispatch?: Function
 }
 
+const pluralize = (count: number, label: string) => (
+  count === 1 ? (
+    `${count} ${label}`
+  ): (
+    `${count} ${label}s`
+  )
+)
+
+const getMarkerCounters = (markers?: editor.IMarkerData[]) => {
+  let errors = 0;
+  let warnings = 0;
+  if (!markers?.length) {
+    return {errors, warnings};
+  }
+
+  for (let marker of markers) {
+    switch (marker.severity) {
+      case MarkerSeverity.Warning:
+        warnings++;
+        break;
+      case MarkerSeverity.Error:
+        errors++;
+        break;
+      default:
+        break;
+    }
+  }
+
+  return {errors, warnings};
+};
+
 const getStatusItem = ({loading, lastError}) => {
   if (loading) {
     return (
@@ -47,17 +78,25 @@ const StatusBar: React.FC<Props> = ({
 }) => {
   const [ runSelectorModalVisible, setRunSelectorModalVisible ] = useState(false);
   const className = loading ? 'StatusBar StatusBar--busy' : 'StatusBar';
+  const {warnings, errors} = getMarkerCounters(markers);
   return (
     <>
       <div className={className}>
         <div className="StatusBar__side-left">
           <StatusBarItem
             icon="ErrorBadge"
-            title="No Problems"
             button
           >
-            {markers?.length ?? 0} Errors
+            {pluralize(errors, 'Error')}
           </StatusBarItem>
+          { warnings > 0 ? (
+            <StatusBarItem
+              icon="Warning"
+              button
+            >
+              {pluralize(warnings, 'Warning')}
+            </StatusBarItem>
+          ) : null }
           <VimStatusBarItem />
           {getStatusItem({loading, lastError})}
         </div>
@@ -92,7 +131,7 @@ const StatusBar: React.FC<Props> = ({
         onClose={val => {
           setRunSelectorModalVisible(false);
           if (val) {
-            dispatch?.(newEnvironmentChangeAction(val));
+            dispatch?.(newEnvironmentChangeDispatcher(val));
           }
         }}
       />

web/src/components/editor/CodeEditor.tsx

@@ -1,24 +1,26 @@
 import React from 'react';
 import MonacoEditor from 'react-monaco-editor';
-import {editor, IKeyboardEvent} from 'monaco-editor';
 import * as monaco from 'monaco-editor';
+import {editor, IKeyboardEvent} from 'monaco-editor';
 import {
-  VimModeKeymap,
   createVimModeAdapter,
-  StatusBarAdapter
+  StatusBarAdapter,
+  VimModeKeymap
 } from '~/plugins/vim/editor';
-import { attachCustomCommands } from './commands';
+import {attachCustomCommands} from './commands';
 
 import {
   Connect,
   formatFileDispatcher,
   newFileChangeAction,
-  runFileDispatcher,
+  newMarkerAction,
   newSnippetLoadDispatcher,
-  newMarkerAction
+  runFileDispatcher,
 } from '~/store';
-import { Analyzer } from '~/services/analyzer';
-import { LANGUAGE_GOLANG, stateToOptions } from './props';
+import {Analyzer} from '~/services/analyzer';
+import {LANGUAGE_GOLANG, stateToOptions} from './props';
+import {getTimeNowUsageMarkers} from './utils';
+import {RuntimeType} from "@services/config";
 
 const ANALYZE_DEBOUNCE_TIME = 500;
 
@@ -29,8 +31,10 @@ interface CodeEditorState {
 
 @Connect(s => ({
   code: s.editor.code,
+  fileName: s.editor.fileName,
   darkMode: s.settings.darkMode,
   vimModeEnabled: s.settings.enableVimMode,
+  isServerEnvironment: RuntimeType.isServerRuntime(s.settings.runtime),
   loading: s.status?.loading,
   options: s.monaco,
   vim: s.vim,
@@ -102,7 +106,12 @@ export default class CodeEditor extends React.Component<any, CodeEditorState> {
     editorInstance.focus();
   }
 
-  componentDidUpdate(prevProps) {
+  private isFileOrEnvironmentChanged(prevProps) {
+    return (prevProps.isServerEnvironment !== this.props.isServerEnvironment) ||
+      (prevProps.fileName !== this.props.fileName);
+  }
+
+  private applyVimModeChanges(prevProps) {
     if (prevProps?.vimModeEnabled === this.props.vimModeEnabled) {
       return
     }
@@ -117,34 +126,60 @@ export default class CodeEditor extends React.Component<any, CodeEditorState> {
     this.vimAdapter?.dispose();
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.isFileOrEnvironmentChanged(prevProps)) {
+      // Update editor markers on file or environment changes;
+      this.doAnalyze(this.props.code);
+    }
+
+    this.applyVimModeChanges(prevProps);
+  }
+
   componentWillUnmount() {
     this.analyzer?.dispose();
     this.vimAdapter?.dispose();
   }
 
   onChange(newValue: string, _: editor.IModelContentChangedEvent) {
     this.props.dispatch(newFileChangeAction(newValue));
-
-    if (this.analyzer) {
-      this.doAnalyze(newValue);
-    }
+    this.doAnalyze(newValue);
   }
 
   private doAnalyze(code: string) {
     if (this._previousTimeout) {
       clearTimeout(this._previousTimeout);
     }
 
-    this._previousTimeout = setTimeout(() => {
+    this._previousTimeout = setTimeout(async () => {
       this._previousTimeout = null;
-      this.analyzer?.analyzeCode(code).then(({markers}) => {
-        editor.setModelMarkers(
-          this.editorInstance?.getModel() as editor.ITextModel,
-          this.editorInstance?.getId() as string,
-          markers
-        );
-        this.props.dispatch(newMarkerAction(markers))
-      }).catch(err => console.error('failed to perform code analysis: %s', err));
+
+      // Code analysis contains 2 steps that run on different conditions:
+      // 1. Run Go worker if it's available and check for errors
+      // 2. Add warnings to `time.Now` calls if code runs on server.
+      const promises = [
+        this.analyzer?.getMarkers(code) ?? null,
+        this.props.isServerEnvironment ? (
+          Promise.resolve(getTimeNowUsageMarkers(code, this.editorInstance!))
+        ) : null
+      ].filter(p => !!p);
+
+      const results = await Promise.allSettled(promises);
+      const markers = results.flatMap(r => {
+        // Can't do in beautiful way due of TS strict checks.
+        if (r.status === 'rejected') {
+          console.error(r.reason);
+          return [];
+        }
+
+        return r.value ?? [];
+      });
+
+      editor.setModelMarkers(
+        this.editorInstance?.getModel() as editor.ITextModel,
+        this.editorInstance?.getId() as string,
+        markers
+      );
+      this.props.dispatch(newMarkerAction(markers));
     }, ANALYZE_DEBOUNCE_TIME);
   }
 

web/src/components/editor/utils.ts

@@ -0,0 +1,46 @@
+import {editor, MarkerSeverity, Uri} from 'monaco-editor';
+import config from "@services/config";
+
+const segmentLength = 'time.Now()'.length;
+const issueUrl = Uri.parse(`${config.githubUrl}/issues/104`);
+const timeNowUsageWarning = 'Warning: `time.Now()` will always return fake time. ' +
+    'Change current environment to WebAssembly in settings to use real date and time.';
+
+/**
+ * Checks if passed source code contains `time.Now()` calls and returns
+ * a list of warning markers for those calls.
+ *
+ * Returns empty array if no calls found.
+ * @param code
+ * @param editorInstance
+ */
+export const getTimeNowUsageMarkers = (code: string, editorInstance: editor.IStandaloneCodeEditor): editor.IMarkerData[]  => {
+  const regex = /\W(time\.Now\(\))/gm;
+  const matches: number[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(code))) {
+    matches.push(match.index);
+  }
+
+  if (!matches.length) {
+    return [];
+  }
+
+  const model = editorInstance.getModel() as editor.ITextModel;
+  return matches.map(index => {
+    // Skip extra character or white-space before expression
+    const {lineNumber, column} = model.getPositionAt(index + 1);
+    return {
+      code: {
+        value: 'More information',
+        target: issueUrl
+      },
+      severity: MarkerSeverity.Warning,
+      message: timeNowUsageWarning,
+      startLineNumber: lineNumber,
+      endLineNumber: lineNumber,
+      startColumn: column,
+      endColumn: column + segmentLength,
+    };
+  });
+}

web/src/index.tsx

@@ -7,6 +7,9 @@ import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import App from './App';
 import './index.css';
 
+// Polyfills
+import 'core-js/actual/promise/all-settled';
+import 'core-js/actual/array/flat-map';
 
 initializeIcons();
 registerGoLanguageProvider(apiClient);

web/src/plugins/vim/editor.ts

@@ -1,7 +1,10 @@
 import {editor, IKeyboardEvent, KeyCode} from 'monaco-editor';
+import { VimMode } from 'monaco-vim';
 import VimModeKeymap from 'monaco-vim/lib/cm/keymap_vim';
-import {Dispatch} from '~/store/vim/state';
+import type {Nullable} from '~/utils/types';
 
+import {runFileDispatcher, shareSnippetDispatcher} from '~/store';
+import {Dispatch} from '~/store/vim/state';
 import {
   newVimCommandDoneAction,
   newVimCommandStartAction,
@@ -12,7 +15,7 @@ import {
   newVimModeChangeAction,
   VimModeChangeArgs
 } from '~/store/vim/actions';
-import {Nullable} from "~/utils/types";
+
 
 // This implementation is quite hacky, but still better than
 // having a huge list of all possible keys except printable.
@@ -30,7 +33,23 @@ interface CommandInputOpts {
   value: string
 }
 
+// customCommands is list of custom VIM commands that trigger
+// different store actions.
+const customCommands = [
+  {
+    name: 'write',
+    short: 'w',
+    action: runFileDispatcher,
+  },
+  {
+    name: 'share',
+    action: shareSnippetDispatcher,
+  }
+]
+
 class VimModeKeymapAdapter extends VimModeKeymap {
+  private commandsAttached = false;
+
   constructor(
     // "dispatch" is reserved method in inner class.
     private dispatchFunc: Dispatch,
@@ -40,9 +59,22 @@ class VimModeKeymapAdapter extends VimModeKeymap {
   }
 
   attach() {
+    if (!this.commandsAttached) {
+      this.attachCommands();
+      this.commandsAttached = true;
+    }
+
     this.dispatchFunc(newVimInitAction());
     super.attach();
   }
+
+  private attachCommands() {
+    customCommands.forEach(({name, short, action}) => {
+      VimMode.Vim.defineEx(name, short, () => {
+        this.dispatchFunc(action);
+      })
+    });
+  }
 }
 
 export { VimModeKeymap };

web/src/services/analyzer.ts

@@ -45,6 +45,11 @@ export class Analyzer {
     return this.request<string, AnalyzeResult>(MessageType.Analyze, code);
   }
 
+  async getMarkers(code: string) {
+    const { markers } = await this.analyzeCode(code);
+    return markers;
+  }
+
   dispose() {
     this.terminated = true;
     this.worker.postMessage({ type: MessageType.Exit });