Enable monaco editor web service to improve editor performance (argop…

…roj#1837)

ui/package.json

@@ -29,7 +29,6 @@
     "@types/react-router-dom": "^4.2.3",
     "@types/superagent": "^3.5.7",
     "argo-ui": "https://github.com/argoproj/argo-ui.git",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.3",
     "babel-preset-env": "^1.6.1",
@@ -51,6 +50,7 @@
     "minimatch": "^3.0.4",
     "moment": "^2.24.0",
     "monaco-editor": "^0.15.6",
+    "monaco-editor-webpack-plugin": "^1.7.0",
     "node-sass": "^4.7.2",
     "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",
@@ -70,6 +70,7 @@
     "style-loader": "^0.20.1",
     "superagent": "^3.8.2",
     "superagent-promise": "^1.1.0",
+    "ts-loader": "^6.0.4",
     "ts-node": "^4.1.0",
     "tslint": "^5.16.0",
     "tslint-react": "^3.4.0",

ui/src/app/webpack.config.js

@@ -1,8 +1,10 @@
 'use strict;';
 
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const path = require('path');
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -29,7 +31,7 @@ const config = {
         rules: [
             {
                 test: /\.tsx?$/,
-                loaders: [ ...( isProd ? [] : ['react-hot-loader/webpack']), 'awesome-typescript-loader?configFileName=./src/app/tsconfig.json']
+                loaders: [ ...( isProd ? [] : ['react-hot-loader/webpack']), `ts-loader?allowTsInNodeModules=true&configFile=${path.resolve('./src/app/tsconfig.json')}`]
             }, {
                 enforce: 'pre',
                 exclude: [
@@ -65,6 +67,7 @@ const config = {
         }, {
             from: 'node_modules/@fortawesome/fontawesome-free/webfonts', to: 'assets/fonts'
         }]),
+        new MonacoWebpackPlugin(),
     ],
     devServer: {
         historyApiFallback: true,