IDE: upgrade dependencies and fix problem with font loading order

legend-pure-ide-light/src/main/web/dev/scripts/start.js

@@ -36,7 +36,6 @@ const args = process.argv.slice(2);
 const enableAdvancedMode = args.includes('--advanced');
 
 // settings
-const ENABLE_HMR = true;
 const CONTENT_LINE_LENGTH = 72;
 
 // Makes the script crash on unhandled rejections instead of silently
@@ -48,7 +47,6 @@ const webpackConfig = webpackConfigCreate(undefined, { mode: 'development', enab
 // Type checking
 const compiler = webpack(webpackConfig);
 const tsCheckerHooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(compiler);
-compiler.close(() => { /* Webpack 5 require explicit compiler hook closing */ });
 let typeCheckingStartTime;
 tsCheckerHooks.start.tap('fork-ts-checker-start', () => {
   // this hook is called when type checking is started, so we can reset the time here
@@ -147,5 +145,7 @@ tsCheckerHooks.issues.tap('fork-ts-checker-issues', (issues, compilation) => {
 });
 
 const webpackDevServerConfig = webpackConfig.devServer;
-const server = new WebpackDevServer(compiler, { ...webpackDevServerConfig, hot: ENABLE_HMR });
+const server = new WebpackDevServer(compiler, { ...webpackDevServerConfig });
 server.listen(webpackDevServerConfig.port, webpackDevServerConfig.host);
+
+compiler.close(() => { /* Webpack 5 require explicit compiler hook closing */ });

legend-pure-ide-light/src/main/web/package.json

@@ -9,81 +9,81 @@
     "build": "webpack --mode production",
     "start": "node ./dev/scripts/start.js",
     "start:advanced": "node ./dev/scripts/start.js --advanced",
-    "start:minimal": "webpack serve --mode development --hot",
+    "start:minimal": "webpack serve --mode development",
     "serve:static": "npx http-server ../../../target/classes/ -p 3000 -a localhost -g --cors -o /ide",
     "lint": "eslint --config ./.eslintrc-advanced.js .",
     "lint:fix": "eslint --config ./.eslintrc-advanced.js --fix .",
     "update": "yarn upgrade-interactive --latest"
   },
   "dependencies": {
-    "@material-ui/core": "4.11.0",
-    "@types/lodash": "4.14.163",
-    "@types/node": "14.14.6",
-    "@types/react": "16.9.55",
-    "@types/react-dom": "16.9.9",
+    "@material-ui/core": "4.11.1",
+    "@types/lodash": "4.14.165",
+    "@types/node": "14.14.10",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
     "@types/react-resize-detector": "5.0.0",
-    "@types/react-select": "3.0.22",
+    "@types/react-select": "3.0.26",
     "@types/react-window": "1.8.2",
     "@types/uuid": "8.3.0",
     "clsx": "1.1.1",
     "history": "5.0.0",
     "http-status-codes": "2.1.4",
     "lodash": "4.17.20",
-    "mobx": "6.0.1",
-    "mobx-react-lite": "3.0.1",
+    "mobx": "6.0.4",
+    "mobx-react-lite": "3.1.6",
     "monaco-editor": "0.21.2",
-    "query-string": "6.13.6",
+    "query-string": "6.13.7",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-hotkeys": "2.0.0",
-    "react-icons": "3.11.0",
+    "react-icons": "4.1.0",
     "react-reflex": "3.1.0",
     "react-resize-detector": "5.2.0",
-    "react-select": "3.1.0",
+    "react-select": "3.1.1",
     "react-window": "1.8.6",
     "serializr": "2.0.3",
     "uuid": "8.3.1",
-    "whatwg-fetch": "3.4.1"
+    "whatwg-fetch": "3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "7.12.9",
     "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/preset-env": "7.12.1",
-    "@babel/preset-react": "7.12.1",
-    "@babel/preset-typescript": "7.12.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
-    "@typescript-eslint/eslint-plugin": "4.6.0",
-    "@typescript-eslint/parser": "4.6.0",
-    "autoprefixer": "10.0.1",
+    "@babel/preset-env": "7.12.7",
+    "@babel/preset-react": "7.12.7",
+    "@babel/preset-typescript": "7.12.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
+    "@typescript-eslint/eslint-plugin": "4.9.0",
+    "@typescript-eslint/parser": "4.9.0",
+    "autoprefixer": "10.0.4",
     "babel-eslint": "10.1.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.2",
     "chalk": "4.1.0",
-    "circular-dependency-plugin": "5.2.0",
+    "circular-dependency-plugin": "5.2.2",
     "clean-webpack-plugin": "3.0.0",
-    "css-loader": "5.0.0",
+    "css-loader": "5.0.1",
     "cssnano": "4.1.10",
-    "eslint": "7.12.1",
+    "eslint": "7.14.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-react": "7.21.5",
     "eslint-plugin-react-hooks": "4.2.0",
-    "fork-ts-checker-webpack-plugin": "5.2.1",
-    "html-webpack-plugin": "5.0.0-alpha.7",
-    "mini-css-extract-plugin": "1.2.1",
+    "fork-ts-checker-webpack-plugin": "6.0.4",
+    "html-webpack-plugin": "5.0.0-alpha.14",
+    "mini-css-extract-plugin": "1.3.1",
     "monaco-editor-webpack-plugin": "2.0.0",
-    "postcss": "8.1.4",
-    "postcss-loader": "4.0.4",
-    "postcss-scss": "3.0.2",
+    "postcss": "8.1.10",
+    "postcss-loader": "4.1.0",
+    "postcss-scss": "3.0.4",
     "react-refresh": "0.9.0",
-    "resolve": "1.18.1",
-    "sass": "1.28.0",
-    "sass-loader": "10.0.4",
+    "resolve": "1.19.0",
+    "sass": "1.29.0",
+    "sass-loader": "10.1.0",
     "semver": "7.3.2",
     "strip-ansi": "6.0.0",
     "text-table": "0.2.0",
-    "typescript": "4.0.5",
-    "webpack": "5.3.2",
-    "webpack-cli": "4.1.0",
-    "webpack-dev-server": "3.11.0",
+    "typescript": "4.1.2",
+    "webpack": "5.9.0",
+    "webpack-cli": "4.2.0",
+    "webpack-dev-server": "4.0.0-beta.0",
     "wrap-ansi": "7.0.0"
   },
   "browserslist": [

legend-pure-ide-light/src/main/web/src/components/App.tsx

@@ -20,8 +20,65 @@ import { ApplicationStoreProvider } from 'Stores/ApplicationStore';
 import { NotificationSnackbar } from 'Components/shared/NotificationSnackbar';
 import { ActionAlert } from 'Components/application/ActionAlert';
 import { BlockingAlert } from 'Components/application/BlockingAlert';
-import { MuiThemeProvider } from '@material-ui/core';
-import { materialUiTheme } from 'Style/MaterialUITheme';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
+
+const materialUiTheme = createMuiTheme({
+  props: {
+    MuiButtonBase: {
+      // No more ripple
+      disableRipple: true,
+    },
+  },
+  transitions: {
+    // So we have `transition: none;` everywhere
+    create: (): string => 'none'
+  },
+  typography: {
+    fontFamily: 'Roboto',
+    fontSize: 10,
+    htmlFontSize: 10,
+  },
+  // Overriding global theme, specific theme for each component can be customized at component level
+  // See https://material-ui.com/customization/globals/
+  overrides: {
+    MuiTooltip: {
+      tooltip: {
+        background: 'var(--color-dark-grey-100)',
+        color: 'var(--color-light-grey-100)',
+        fontSize: '1.2rem',
+        maxWidth: 'inherit'
+      },
+      tooltipPlacementTop: {
+        margin: '0.5rem 0',
+      },
+    },
+    MuiPaper: {
+      root: {
+        borderRadius: 0,
+      },
+      rounded: {
+        borderRadius: 0,
+      }
+    },
+    MuiDialog: {
+      scrollPaper: {
+        alignItems: 'flex-start'
+      },
+      paper: {
+        margin: 0
+      },
+      root: {
+        marginTop: '4.8rem'
+      }
+    },
+    MuiList: {
+      padding: {
+        paddingTop: 0,
+        paddingBottom: 0,
+      }
+    }
+  }
+});
 
 export const App: React.FC = () => (
   <ApplicationStoreProvider>

legend-pure-ide-light/src/main/web/src/components/editor/StatusBar.tsx

@@ -47,23 +47,23 @@ export const StatusBar = observer((props: {
           disabled={editorStore.executionState.isInProgress}
           onClick={executeGo}
           tabIndex={-1}
-          title={'Execute (F9)'}
+          title="Execute (F9)"
         ><FaHammer /></button>
         <button
           className={clsx('editor__status-bar__action editor__status-bar__action__toggler',
             { 'editor__status-bar__action__toggler--active': editorStore.isInExpandedMode }
           )}
           onClick={toggleExpandMode}
           tabIndex={-1}
-          title={'Maximize/Minimize'}
+          title="Maximize/Minimize"
         ><FaRegWindowMaximize /></button>
         <button
           className={clsx('editor__status-bar__action editor__status-bar__action__toggler',
             { 'editor__status-bar__action__toggler--active': Boolean(editorStore.auxPanelSize) }
           )}
           onClick={toggleAuxPanel}
           tabIndex={-1}
-          title={'Toggle auxiliary panel (Ctrl + `)'}
+          title="Toggle auxiliary panel (Ctrl + `)"
         ><FaTerminal /></button>
       </div>
     </div >

legend-pure-ide-light/src/main/web/src/components/editor/aux-panel/AuxiliaryPanel.tsx

@@ -82,13 +82,13 @@ export const AuxiliaryPanel = observer(() => {
             className="auxiliary-panel__header__action"
             onClick={toggleExpandAuxPanel}
             tabIndex={-1}
-            title={'Toggle expand/collapse'}
+            title="Toggle Expand/Collapse"
           >{editorStore.isAuxPanelMaximized ? <GoChevronDown /> : <GoChevronUp />}</button>
           <button
             className="auxiliary-panel__header__action"
             onClick={closePanel}
             tabIndex={-1}
-            title={'Close'}
+            title="Close"
           ><GoX /></button>
         </div>
       </div>

legend-pure-ide-light/src/main/web/src/components/editor/aux-panel/SearchPanel.tsx

@@ -73,7 +73,7 @@ const SearchResultEntryDisplay = observer((props: {
       <div className="search-panel__entry__content">
         {searchEntry.coordinates.map(coordinate => (
           <div key={coordinate.uuid} className="search-panel__entry__content__item">
-            <div className="search-panel__entry__content__item__label" title="Go to result" onClick={goToResult(coordinate)}>
+            <div className="search-panel__entry__content__item__label" title="Go to Result" onClick={goToResult(coordinate)}>
               {`line: ${coordinate.startLine} - column: ${coordinate.startColumn}`}
             </div>
             <div className="search-panel__entry__content__item__actions">
@@ -133,7 +133,7 @@ const CandidateWithPackageImportedDisplay = observer((props: {
   return (
     <div className="search-panel__entry__content__item">
       <div className="search-panel__entry__content__item__label__candidate"
-        title="Go to result"
+        title="Go to Result"
         onClick={goToResult}>
         <div className="search-panel__entry__content__item__label__candidate-name">
           {candidate.foundName}
@@ -146,7 +146,7 @@ const CandidateWithPackageImportedDisplay = observer((props: {
         <button
           className="search-panel__entry__content__item__action"
           tabIndex={-1}
-          title="Go to result"
+          title="Go to Result"
           onClick={goToResult}
         ><FaArrowAltCircleRight /></button>
       </div>
@@ -166,7 +166,7 @@ const CandidateWithPackageNotImportedDisplay = observer((props: {
   return (
     <div className="search-panel__entry__content__item">
       <div className="search-panel__entry__content__item__label__candidate"
-        title="Add suggested import"
+        title="Add Suggested Import"
         onClick={useCandidate}>
         <div className="search-panel__entry__content__item__label__candidate-name">
           {candidate.foundName}
@@ -179,7 +179,7 @@ const CandidateWithPackageNotImportedDisplay = observer((props: {
         <button
           className="search-panel__entry__content__item__action"
           tabIndex={-1}
-          title="Go to result"
+          title="Go to Result"
           onClick={goToResult}
         ><FaArrowAltCircleRight /></button>
       </div>

legend-pure-ide-light/src/main/web/src/components/editor/edit-panel/EditPanel.tsx

@@ -134,7 +134,7 @@ export const EditPanel = observer(() => {
                   className="edit-panel__header__tab__close-btn"
                   onClick={closeTab(editorState)}
                   tabIndex={-1}
-                  title={'Close'}
+                  title="Close"
                 ><FaTimes /></button>
               </ContextMenu>
             </div>

legend-pure-ide-light/src/main/web/src/components/editor/edit-panel/FileEditor.tsx

@@ -18,8 +18,8 @@ import React, { useEffect, useState, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { editor as monacoEditorAPI, KeyCode } from 'monaco-editor';
 import { useEditorStore } from 'Stores/EditorStore';
-import { disposeEditor, baseTextEditorSettings, disableEditorHotKeys, moveToPosition, setErrorMarkers } from 'Utilities/TextEditorUtil';
-import { TAB_SIZE, EDITOR_THEME, EDITOR_LANGUAGE } from 'Stores/EditorConfig';
+import { disposeEditor, disableEditorHotKeys, moveToPosition, setErrorMarkers } from 'Utilities/TextEditorUtil';
+import { TAB_SIZE, EDITOR_THEME, EDITOR_LANGUAGE, MONOSPACE_FONT_FAMILY } from 'Stores/EditorConfig';
 import ReactResizeDetector from 'react-resize-detector';
 import { useApplicationStore } from 'Stores/ApplicationStore';
 import type { FileEditorState } from 'Stores/EditorState';
@@ -41,7 +41,21 @@ export const FileEditor = observer((props: {
     if (!editor && textInput.current) {
       const element = textInput.current;
       const editor = monacoEditorAPI.create(element, {
-        ...baseTextEditorSettings,
+        contextmenu: false,
+        copyWithSyntaxHighlighting: false,
+        // NOTE: These following font options are needed (and CSS font-size option `.monaco-editor * { font-size: ... }` as well)
+        // in order to make the editor appear properly on multiple platform, the ligatures option is needed for Mac to display properly
+        // otherwise the cursor position relatively to text would be off
+        // Another potential cause for this misaligment is that the fonts are being lazy-loaded and made available after `monaco-editor`
+        // calculated the font-width, for this, we can use `remeasureFonts`, but our case here, `fontLigatures: true` seems
+        // to do the trick
+        // See https://github.com/microsoft/monaco-editor/issues/392
+        fontSize: 14,
+        // Enforce a fixed font-family to make cross platform display consistent (i.e. Mac defaults to use `Menlo` which is bigger than
+        // `Consolas` on Windows, etc.)
+        fontFamily: MONOSPACE_FONT_FAMILY,
+        fontLigatures: true,
+        fixedOverflowWidgets: true, // make sure hover or widget near boundary are not truncated
         language: EDITOR_LANGUAGE.PURE,
         theme: EDITOR_THEME.NATIVE,
       });

legend-pure-ide-light/src/main/web/src/components/editor/side-bar/ConceptTreeExplorer.tsx

@@ -223,7 +223,7 @@ export const ConceptTreeExplorer = observer(() => {
             <div className="panel__header__actions">
               <button className="panel__header__action explorer__btn__refresh"
                 onClick={refreshTree}
-                title="Refresh tree"
+                title="Refresh Tree"
               ><MdRefresh /></button>
               <button className="panel__header__action"
                 onClick={collapseTree}

legend-pure-ide-light/src/main/web/src/components/editor/side-bar/DirectoryTreeExplorer.tsx

@@ -219,7 +219,7 @@ export const DirectoryTreeExplorer = observer(() => {
             <div className="panel__header__actions">
               <button className="panel__header__action explorer__btn__refresh"
                 onClick={refreshTree}
-                title="Refresh tree"
+                title="Refresh Tree"
               ><MdRefresh /></button>
               <button className="panel__header__action"
                 onClick={focus}

legend-pure-ide-light/src/main/web/src/components/shared/NotificationSnackbar.tsx

@@ -83,7 +83,7 @@ export const NotificationSnackbar = observer(() => {
             key="close"
             onClick={handleClose}
             tabIndex={-1}
-            title={'Dismiss'}
+            title="Dismiss"
           ><FaTimes /></button>
         ]}
       />

legend-pure-ide-light/src/main/web/src/index.html

@@ -20,8 +20,13 @@
 <head>
   <title>Pure IDE</title>
   <meta charset="UTF-8">
+  <!--
+    Attempt to preconnect to font registry for faster load and always prefer <link> (non-blocking) to CSS @import (blocking)
+    See https://stackoverflow.com/questions/12316501/including-google-web-fonts-link-or-import
+  -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
   <link
-    href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:300,400,500,700,900|Raleway:900|Fira+Code:400,500&display=swap"
+    href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:300,400,500,700,900|Raleway:900|Roboto+Mono:400,700&display=swap"
     rel="stylesheet">
 </head>
 

legend-pure-ide-light/src/main/web/src/index.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import 'Style/CssLoader';
+import 'Style/main.scss';
 import { configure as hotkeysConfigure } from 'react-hotkeys';
 import { editor as monacoEditorAPI, languages as monacoLanguagesAPI } from 'monaco-editor';
 import { configuration, language, theme } from 'Utilities/LanguageUtil';