feat: refactor CodeEditor (#360)

* fix: attempt to fix eslint import recognition

* fix: fix lint issues

* feat: restructure code editor component

* feat: restructure CodeEditor component

* feat: use type safe connector for CodeEditor

Author: x1unix

web/.eslintrc.cjs

@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   env: {
     browser: true,
     es2021: true
@@ -21,7 +22,9 @@ module.exports = {
     "prettier",
     "unused-imports"
   ],
+  parser: "@typescript-eslint/parser",
   parserOptions: {
+    project: true,
     ecmaVersion: "latest",
     ecmaFeatures: {
       jsx: true
@@ -50,7 +53,11 @@ module.exports = {
     },
     'import/resolver': {
       typescript: {
-        alwaysTryTypes: true
+        alwaysTryTypes: true,
+        project: ["**/tsconfig.json"]
+      },
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       }
     }
   },

web/package.json

@@ -16,8 +16,8 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@xterm/addon-canvas": "^0.6.0-beta.1",
     "@xterm/addon-fit": "^0.9.0-beta.1",

web/src/components/features/inspector/RunOutput/RunOutput.tsx

@@ -46,7 +46,7 @@ const RunOutput: React.FC<StateProps & {}> = ({ status, monaco, terminal }) => {
     }
   }, [theme])
   const fontFamily = useMemo(() => getFontFamily(monaco?.fontFamily ?? DEFAULT_FONT), [monaco])
-  const isClean = !status || !status?.dirty
+  const isClean = !status?.dirty
 
   return (
     <div className="RunOutput" style={styles}>

web/src/components/features/workspace/CodeEditor/CodeEditor.tsx

@@ -3,21 +3,23 @@ import { Spinner } from '@fluentui/react'
 import MonacoEditor, { type Monaco } from '@monaco-editor/react'
 import { KeyMod, KeyCode, type editor, type IKeyboardEvent } from 'monaco-editor'
 
+import apiClient from '~/services/api'
 import { createVimModeAdapter, type StatusBarAdapter, type VimModeKeymap } from '~/plugins/vim/editor'
 import { Analyzer } from '~/services/analyzer'
-import { TargetType } from '~/services/config'
-import { Connect, newMarkerAction, runFileDispatcher } from '~/store'
+import { type MonacoSettings, TargetType } from '~/services/config'
+import { connect, newMarkerAction, runFileDispatcher, type StateDispatch } from '~/store'
 import { type WorkspaceState, dispatchFormatFile, dispatchResetWorkspace, dispatchUpdateFile } from '~/store/workspace'
-import { getTimeNowUsageMarkers, wrapAsyncWithDebounce } from '../utils'
-import { attachCustomCommands } from '../commands'
-import { LANGUAGE_GOLANG, stateToOptions } from '../props'
+import { getTimeNowUsageMarkers, wrapAsyncWithDebounce } from './utils'
+import { attachCustomCommands } from './commands'
+import { LANGUAGE_GOLANG, stateToOptions } from './props'
+import { configureMonacoLoader } from './loader'
+import { registerGoLanguageProvider } from './autocomplete'
+import type { VimState } from '~/store/vim/state'
 
 const ANALYZE_DEBOUNCE_TIME = 500
 
-interface CodeEditorState {
-  code?: string
-  loading?: boolean
-}
+// ask monaco-editor/react to use our own Monaco instance.
+configureMonacoLoader()
 
 const mapWorkspaceProps = ({ files, selectedFile }: WorkspaceState) => {
   if (!selectedFile) {
@@ -33,16 +35,22 @@ const mapWorkspaceProps = ({ files, selectedFile }: WorkspaceState) => {
   }
 }
 
-@Connect(({ workspace, ...s }) => ({
-  ...mapWorkspaceProps(workspace),
-  darkMode: s.settings.darkMode,
-  vimModeEnabled: s.settings.enableVimMode,
-  isServerEnvironment: s.runTarget.target === TargetType.Server,
-  loading: s.status?.loading,
-  options: s.monaco,
-  vim: s.vim,
-}))
-export class CodeEditor extends React.Component<any, CodeEditorState> {
+interface CodeEditorState {
+  code?: string
+  loading?: boolean
+}
+
+interface Props extends CodeEditorState {
+  fileName: string
+  darkMode: boolean
+  vimModeEnabled: boolean
+  isServerEnvironment: boolean
+  options: MonacoSettings
+  vim?: VimState | null
+  dispatch: StateDispatch
+}
+
+class CodeEditor extends React.Component<Props> {
   private analyzer?: Analyzer
   private editorInstance?: editor.IStandaloneCodeEditor
   private vimAdapter?: VimModeKeymap
@@ -57,6 +65,8 @@ export class CodeEditor extends React.Component<any, CodeEditorState> {
     this.editorInstance = editorInstance
     this.monaco = monacoInstance
 
+    registerGoLanguageProvider(apiClient)
+
     editorInstance.onKeyDown((e) => this.onKeyDown(e))
     const [vimAdapter, statusAdapter] = createVimModeAdapter(this.props.dispatch, editorInstance)
     this.vimAdapter = vimAdapter
@@ -221,3 +231,13 @@ export class CodeEditor extends React.Component<any, CodeEditorState> {
     )
   }
 }
+
+export const ConnectedCodeEditor = connect<CodeEditorState, {}>(({ workspace, ...s }) => ({
+  ...mapWorkspaceProps(workspace),
+  darkMode: s.settings.darkMode,
+  vimModeEnabled: s.settings.enableVimMode,
+  isServerEnvironment: s.runTarget.target === TargetType.Server,
+  loading: s.status?.loading,
+  options: s.monaco,
+  vim: s.vim,
+}))(CodeEditor)

web/src/components/features/workspace/CodeEditor/autocomplete/index.ts

@@ -0,0 +1,15 @@
+import * as monaco from 'monaco-editor'
+import type { IAPIClient } from '~/services/api'
+
+import { GoCompletionItemProvider } from './provider'
+
+let alreadyRegistered = false
+export const registerGoLanguageProvider = (client: IAPIClient) => {
+  if (alreadyRegistered) {
+    console.warn('Go Language provider was already registered')
+    return
+  }
+
+  alreadyRegistered = true
+  return monaco.languages.registerCompletionItemProvider('go', new GoCompletionItemProvider(client))
+}

web/src/components/features/workspace/CodeEditor/autocomplete/parse.ts

@@ -0,0 +1,24 @@
+// Matches package (and method name)
+const COMPL_REGEXP = /([a-zA-Z0-9_]+)(\.([A-Za-z0-9_]+))?$/
+const R_GROUP_PKG = 1
+const R_GROUP_METHOD = 3
+
+export const parseExpression = (expr: string) => {
+  COMPL_REGEXP.lastIndex = 0 // Reset regex state
+  const m = COMPL_REGEXP.exec(expr)
+  if (!m) {
+    return null
+  }
+
+  const varName = m[R_GROUP_PKG]
+  const propValue = m[R_GROUP_METHOD]
+
+  if (!propValue) {
+    return { value: varName }
+  }
+
+  return {
+    packageName: varName,
+    value: propValue,
+  }
+}

web/src/components/features/workspace/provider.ts renamed to web/src/components/features/workspace/CodeEditor/autocomplete/provider.ts

@@ -1,52 +1,12 @@
-import { loader } from '@monaco-editor/react'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-import * as monaco from 'monaco-editor'
+import type * as monaco from 'monaco-editor'
 import { type IAPIClient } from '~/services/api'
+import { wrapAsyncWithDebounce } from '../utils'
 import snippets from './snippets'
-import { wrapAsyncWithDebounce } from './utils'
+import { parseExpression } from './parse'
 
-// Import aliases
-type CompletionList = monaco.languages.CompletionList
-type CompletionContext = monaco.languages.CompletionContext
-type ITextModel = monaco.editor.ITextModel
-type Position = monaco.Position
-type CancellationToken = monaco.CancellationToken
-
-let alreadyRegistered = false
-
-// Matches package (and method name)
-const COMPL_REGEXP = /([a-zA-Z0-9_]+)(\.([A-Za-z0-9_]+))?$/
-const R_GROUP_PKG = 1
-const R_GROUP_METHOD = 3
 const SUGGESTIONS_DEBOUNCE_DELAY = 500
 
-const parseExpression = (expr: string) => {
-  COMPL_REGEXP.lastIndex = 0 // Reset regex state
-  const m = COMPL_REGEXP.exec(expr)
-  if (!m) {
-    return null
-  }
-
-  const varName = m[R_GROUP_PKG]
-  const propValue = m[R_GROUP_METHOD]
-
-  if (!propValue) {
-    return { value: varName }
-  }
-
-  return {
-    packageName: varName,
-    value: propValue,
-  }
-}
-
-self.MonacoEnvironment = {
-  getWorker: () => {
-    return new EditorWorker()
-  },
-}
-
-class GoCompletionItemProvider implements monaco.languages.CompletionItemProvider {
+export class GoCompletionItemProvider implements monaco.languages.CompletionItemProvider {
   private readonly getSuggestionFunc: IAPIClient['getSuggestions']
 
   constructor(private readonly client: IAPIClient) {
@@ -57,11 +17,11 @@ class GoCompletionItemProvider implements monaco.languages.CompletionItemProvide
   }
 
   async provideCompletionItems(
-    model: ITextModel,
-    position: Position,
-    context: CompletionContext,
-    token: CancellationToken,
-  ): Promise<CompletionList> {
+    model: monaco.editor.ITextModel,
+    position: monaco.Position,
+    context: monaco.languages.CompletionContext,
+    token: monaco.CancellationToken,
+  ): Promise<monaco.languages.CompletionList> {
     const val = model
       .getValueInRange({
         startLineNumber: position.lineNumber,
@@ -108,14 +68,3 @@ class GoCompletionItemProvider implements monaco.languages.CompletionItemProvide
     }
   }
 }
-
-export const registerGoLanguageProvider = (client: IAPIClient) => {
-  if (alreadyRegistered) {
-    console.warn('Go Language provider was already registered')
-    return
-  }
-
-  alreadyRegistered = true
-  loader.config({ monaco })
-  return monaco.languages.registerCompletionItemProvider('go', new GoCompletionItemProvider(client))
-}

web/src/components/features/workspace/snippets.ts renamed to web/src/components/features/workspace/CodeEditor/autocomplete/snippets.ts

@@ -0,0 +1,20 @@
+import { loader } from '@monaco-editor/react'
+import * as monaco from 'monaco-editor'
+
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+
+let loaderConfigured = false
+export const configureMonacoLoader = () => {
+  if (loaderConfigured) {
+    return
+  }
+
+  loader.config({ monaco })
+  loaderConfigured = true
+}
+
+self.MonacoEnvironment = {
+  getWorker: () => {
+    return new EditorWorker()
+  },
+}