build(ui): improve performance with esbuild-loader (argoproj#12516)

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
shuangkun · May 13, 2024 · cd52436 · cd52436
1 parent 026b14e
commit cd52436
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 178 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -8,15 +8,15 @@
     "scripts": {
         "build": "rm -Rf dist && NODE_ENV=production webpack --mode production --config ./src/app/webpack.config.js",
         "start": "webpack-dev-server --config ./src/app/webpack.config.js",
-        "lint": "eslint --fix ./src/app",
+        "lint": "eslint --fix ./src/app && tsc --noEmit",
         "test": "jest",
         "deduplicate": "yarn-deduplicate -s fewer yarn.lock"
     },
     "engines": {
         "node": ">=20"
     },
     "dependencies": {
-        "argo-ui": "git+https://github.com/argoproj/argo-ui.git#87d27fb1cb4f6e3ac4a49f85747e471b2efa7512",
+        "argo-ui": "git+https://github.com/argoproj/argo-ui.git#741f07c28b446f432e0a46ff47cadc841883887c",
         "chart.js": "^2.9.4",
         "chartjs-plugin-annotation": "^0.5.7",
         "classnames": "^2.5.1",
@@ -63,8 +63,8 @@
         "@typescript-eslint/eslint-plugin": "^6.18.1",
         "@typescript-eslint/parser": "^6.10.0",
         "babel-jest": "^29.7.0",
-        "babel-loader": "^9.1.3",
         "copy-webpack-plugin": "^12.0.1",
+        "esbuild-loader": "^4.0.2",
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
@@ -74,13 +74,10 @@
         "monaco-editor-webpack-plugin": "^7.1.0",
         "prettier": "^3.2.1",
         "raw-loader": "^4.0.2",
-        "react-hot-loader": "^4.13.1",
         "sass": "^1.69.7",
         "sass-loader": "^13.3.2",
-        "source-map-loader": "^4.0.2",
         "style-loader": "^1.3.0",
         "ts-jest": "^26.4.4",
-        "ts-loader": "^9.5.1",
         "ts-node": "^9.1.1",
         "typescript": "^4.6.4",
         "webpack": "^5.89.0",
@@ -89,6 +86,7 @@
         "yarn-deduplicate": "^6.0.2"
     },
     "resolutions": {
-        "semver": "^7.5.2"
+        "semver": "^7.5.2",
+        "types-ramda": "0.29.4"
     }
 }
diff --git a/ui/src/app/index.tsx b/ui/src/app/index.tsx
@@ -3,11 +3,3 @@ import * as ReactDOM from 'react-dom';
 import {App} from './app';
 
 ReactDOM.render(<App />, document.getElementById('app'));
-
-const mdl = module as any;
-if (mdl.hot) {
-    mdl.hot.accept('./app.tsx', () => {
-        const UpdatedApp = require('./app.tsx').App; // eslint-disable-line @typescript-eslint/no-var-requires
-        ReactDOM.render(<UpdatedApp />, document.getElementById('app'));
-    });
-}
diff --git a/ui/src/app/shared/utils.ts b/ui/src/app/shared/utils.ts
@@ -89,7 +89,9 @@ export const Utils = {
         }
     },
 
-    onNamespaceChange() {
+    // TODO: some of these utils should probably be moved to context
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- just a temp type, this gets set in app-router
+    onNamespaceChange(x: string) {
         // noop
     },
 

diff --git a/ui/src/app/tsconfig.json b/ui/src/app/tsconfig.json
@@ -3,6 +3,7 @@
         "outDir": "./../../dist/app",
         "sourceMap": true,
         "noImplicitAny": true,
+        "isolatedModules": true, // for compatibility with esbuild
         "module": "ES2020", // must be ES2020+ for dynamic imports: https://github.com/Microsoft/TypeScript/issues/16675, https://github.com/webpack/webpack/issues/5703#issuecomment-357512412
         "moduleResolution": "node",
         "esModuleInterop": true,

diff --git a/ui/src/app/typings.d.ts b/ui/src/app/typings.d.ts
@@ -1 +1,10 @@
 declare let SYSTEM_INFO: {version: string};
+
+declare module 'swagger-ui-react/swagger-ui.css';
+
+// TODO: remove this once we've updated to TS v5.1+ (c.f. https://github.com/microsoft/TypeScript/issues/49231#issuecomment-1137251612)
+declare namespace Intl {
+    type Key = 'calendar' | 'collation' | 'currency' | 'numberingSystem' | 'timeZone' | 'unit';
+
+    function supportedValuesOf(input: Key): string[];
+}
diff --git a/ui/src/app/webpack.config.js b/ui/src/app/webpack.config.js
@@ -5,7 +5,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const webpack = require('webpack');
-const path = require('path');
 
 const isProd = process.env.NODE_ENV === 'production';
 const proxyConf = {
@@ -25,7 +24,7 @@ const config = {
         path: __dirname + '/../../dist/app'
     },
 
-    devtool: 'source-map',
+    devtool: isProd ? 'source-map' : 'eval',
 
     resolve: {
         extensions: ['.ts', '.tsx', '.js', '.json', '.ttf'],
@@ -36,16 +35,13 @@ const config = {
         rules: [
             {
                 test: /\.tsx?$/,
-                use: [
-                    ...(isProd ? [] : ['react-hot-loader/webpack']),
-                    `ts-loader?transpileOnly=${!isProd}&allowTsInNodeModules=true&configFile=${path.resolve('./src/app/tsconfig.json')}`
-                ]
+                loader: 'esbuild-loader'
             },
             {
                 enforce: 'pre',
-                exclude: [/node_modules\/react-paginate/, /node_modules\/monaco-editor/],
+                exclude: [/node_modules\/monaco-editor/],
                 test: /\.js$/,
-                use: [...(isProd ? ['babel-loader'] : ['source-map-loader'])]
+                use: ['esbuild-loader']
             },
             {
                 test: /\.scss$/,