upgrade to webpack@5 / reviving #4725 + #4867

Signed-off-by: Roman <[email protected]>

__mocks__/imageMock.ts → __mocks__/assetMock.ts

@@ -3,4 +3,4 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-export default {};
+export default ""; // mostly path to bundled file or data-url (webpack)

extensions/kube-object-event-status/package.json

@@ -18,8 +18,8 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "ts-loader": "^8.0.4",
-    "typescript": "^4.3.2",
-    "webpack": "^4.46.0"
+    "ts-loader": "latest",
+    "typescript": "latest",
+    "webpack": "latest"
   }
 }

extensions/metrics-cluster-feature/package.json

@@ -19,10 +19,10 @@
   ],
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "jest": "^26.6.3",
     "semver": "^7.3.2",
-    "ts-loader": "^8.0.4",
-    "typescript": "^4.3.2",
-    "webpack": "^4.44.2"
+    "jest": "latest",
+    "ts-loader": "latest",
+    "typescript": "latest",
+    "webpack": "latest"
   }
 }

extensions/node-menu/package.json

@@ -18,9 +18,9 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "jest": "^26.6.3",
-    "ts-loader": "^8.0.4",
-    "typescript": "^4.3.2",
-    "webpack": "^4.46.0"
+    "jest": "latest",
+    "ts-loader": "latest",
+    "typescript": "latest",
+    "webpack": "latest"
   }
 }

extensions/pod-menu/package.json

@@ -18,9 +18,9 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "jest": "^26.6.3",
-    "ts-loader": "^8.0.4",
-    "typescript": "^4.3.2",
-    "webpack": "^4.46.0"
+    "jest": "latest",
+    "ts-loader": "latest",
+    "typescript": "latest",
+    "webpack": "latest"
   }
 }

package.json

@@ -16,9 +16,9 @@
     "dev-build": "concurrently yarn:compile:*",
     "debug-build": "concurrently yarn:compile:main yarn:compile:extension-types",
     "dev-run": "nodemon --watch static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
-    "dev:main": "yarn run compile:main --watch",
-    "dev:renderer": "yarn run webpack-dev-server --config webpack.renderer.ts",
-    "dev:extension-types": "yarn run compile:extension-types --watch",
+    "dev:main": "yarn run compile:main --watch --progress",
+    "dev:renderer": "yarn run compile:renderer --watch --progress",
+    "dev:extension-types": "yarn run compile:extension-types --watch --progress",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "yarn run webpack --config webpack.main.ts",
     "compile:renderer": "yarn run webpack --config webpack.renderer.ts",
@@ -62,7 +62,7 @@
     },
     "moduleNameMapper": {
       "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts",
-      "\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts"
+      "\\.(svg|png|jpg|eot|woff2?|ttf)$": "<rootDir>/__mocks__/assetMock.ts"
     },
     "modulePathIgnorePatterns": [
       "<rootDir>/dist",
@@ -268,7 +268,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@sentry/types": "^6.14.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^11.2.7",
@@ -291,12 +291,11 @@
     "@types/lodash": "^4.14.177",
     "@types/marked": "^4.0.1",
     "@types/md5-file": "^4.0.2",
-    "@types/mini-css-extract-plugin": "^0.9.1",
+    "@types/mini-css-extract-plugin": "^2.4.0",
     "@types/mock-fs": "^4.13.1",
     "@types/node": "14.17.33",
     "@types/node-fetch": "^2.5.12",
     "@types/npm": "^2.0.32",
-    "@types/progress-bar-webpack-plugin": "^2.1.2",
     "@types/proper-lockfile": "^4.1.2",
     "@types/randomcolor": "^0.5.6",
     "@types/react": "^17.0.34",
@@ -319,80 +318,77 @@
     "@types/triple-beam": "^1.3.2",
     "@types/url-parse": "^1.4.5",
     "@types/uuid": "^8.3.3",
-    "@types/webpack": "^4.41.32",
-    "@types/webpack-dev-server": "^3.11.6",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^4.7.2",
     "@types/webpack-env": "^1.16.3",
-    "@types/webpack-node-externals": "^1.7.1",
+    "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "ansi_up": "^5.1.0",
     "chart.js": "^2.9.4",
     "circular-dependency-plugin": "^5.2.2",
     "color": "^3.2.1",
     "concurrently": "^5.3.0",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.5.1",
     "deepdash": "^5.3.9",
     "dompurify": "^2.3.4",
     "electron": "^14.2.4",
     "electron-builder": "^22.14.5",
     "electron-notarize": "^0.3.0",
     "esbuild": "^0.13.15",
-    "esbuild-loader": "^2.16.0",
+    "esbuild-loader": "^2.18.0",
     "eslint": "^8.7.0",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "file-loader": "^6.2.0",
     "flex.box": "^3.4.4",
-    "fork-ts-checker-webpack-plugin": "^5.2.1",
+    "fork-ts-checker-webpack-plugin": "^6.5.0",
     "hoist-non-react-statics": "^3.3.2",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
     "ignore-loader": "^0.1.2",
     "include-media": "^1.4.9",
     "jest": "26.6.3",
     "jest-canvas-mock": "^2.3.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-mock-extended": "^1.0.18",
     "make-plural": "^6.2.2",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.5.2",
     "node-gyp": "7.1.2",
-    "node-loader": "^1.0.3",
+    "node-loader": "^2.0.0",
     "nodemon": "^2.0.15",
     "playwright": "^1.17.1",
     "postcss": "^8.4.5",
-    "postcss-loader": "^4.3.0",
-    "progress-bar-webpack-plugin": "^2.1.0",
+    "postcss-loader": "^6.2.1",
     "randomcolor": "^0.6.2",
-    "raw-loader": "^4.0.2",
     "react-beautiful-dnd": "^13.1.0",
-    "react-refresh": "^0.9.0",
+    "react-refresh": "^0.11.0",
+    "react-refresh-typescript": "^2.0.3",
     "react-router-dom": "^5.3.0",
     "react-select": "3.2.0",
     "react-select-event": "^5.1.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6",
     "sass": "^1.45.1",
-    "sass-loader": "^10.2.0",
+    "sass-loader": "^12.4.0",
     "sharp": "^0.29.3",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.7",
     "ts-jest": "26.5.6",
-    "ts-loader": "^7.0.5",
+    "ts-loader": "^9.2.6",
     "ts-node": "^10.4.0",
     "type-fest": "^1.0.2",
     "typed-emitter": "^1.4.0",
     "typedoc": "0.22.10",
-    "typedoc-plugin-markdown": "^3.11.3",
+    "typedoc-plugin-markdown": "^3.11.12",
     "typeface-roboto": "^1.1.13",
     "typescript": "^4.5.2",
     "typescript-plugin-css-modules": "^3.4.0",
-    "url-loader": "^4.1.1",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3",
-    "webpack-node-externals": "^1.7.2",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-node-externals": "^3.0.0",
     "xterm": "^4.15.0",
     "xterm-addon-fit": "^0.5.0"
   }

src/common/catalog-entities/kubernetes-cluster.ts

@@ -11,6 +11,7 @@ import { app } from "electron";
 import type { CatalogEntitySpec } from "../catalog/catalog-entity";
 import { IpcRendererNavigationEvents } from "../../renderer/navigation/events";
 import { requestClusterActivation, requestClusterDisconnection } from "../../renderer/ipc";
+import KubeClusterCategoryIcon from "./icons/kubernetes.svg";
 
 export interface KubernetesClusterPrometheusMetrics {
   address?: {
@@ -138,7 +139,7 @@ class KubernetesClusterCategory extends CatalogCategory {
   public readonly kind = "CatalogCategory";
   public metadata = {
     name: "Clusters",
-    icon: require(`!!raw-loader!./icons/kubernetes.svg`).default, // eslint-disable-line
+    icon: KubeClusterCategoryIcon,
   };
   public spec: CatalogCategorySpec = {
     group: "entity.k8slens.dev",

src/common/catalog/catalog-category-registry.ts

@@ -4,9 +4,8 @@
  */
 
 import { action, computed, observable, makeObservable } from "mobx";
-import type { Disposer } from "../utils";
-import { strictSet, iter, getOrInsertMap } from "../utils";
 import { once } from "lodash";
+import { iter, type Disposer, getOrInsertMap, strictSet } from "../utils";
 import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
 
 export type CategoryFilter = (category: CatalogCategory) => any;

src/common/getTSLoader.ts

@@ -4,18 +4,17 @@
  */
 
 import esbuild from "esbuild";
+import type { Options as TSLoaderOptions } from "ts-loader";
 
 /**
  * A function returning webpack ts/tsx loader
- *
  * depends on env LENS_DEV_USE_ESBUILD_LOADER to use esbuild-loader (faster) or good-old ts-loader
- *
- * @param testRegExp - the regex for webpack to conditional find the files
  * @returns ts/tsx webpack loader configuration object
  */
-const getTSLoader = (
-  testRegExp: RegExp, transpileOnly = true,
-) => {
+const getTSLoader = (options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp) => {
+  testRegExp ??= /\.tsx?$/; // by default covers react/jsx-stuff
+  options.transpileOnly ??= true;
+
   if (process.env.LENS_DEV_USE_ESBUILD_LOADER === "true") {
     console.info(`\n🚀 using esbuild-loader for ts(x)`);
 
@@ -35,9 +34,7 @@ const getTSLoader = (
     exclude: /node_modules/,
     use: {
       loader: "ts-loader",
-      options: {
-        transpileOnly,
-      },
+      options,
     },
   };
 };

src/common/vars.ts

@@ -38,7 +38,6 @@ export const mainDir = path.join(contextDir, "src/main");
 export const rendererDir = path.join(contextDir, "src/renderer");
 export const htmlTemplate = path.resolve(rendererDir, "template.html");
 export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
-export const webpackDevServerPort = 9009;
 
 // Special runtime paths
 defineGlobal("__static", {

src/main/catalog/catalog-entity-registry.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { action, computed, IComputedValue, IObservableArray, makeObservable, observable } from "mobx";
+import { action, computed, type IComputedValue, type IObservableArray, makeObservable, observable } from "mobx";
 import { CatalogCategoryRegistry, catalogCategoryRegistry, CatalogEntity, CatalogEntityConstructor } from "../../common/catalog";
 import { iter } from "../../common/utils";
 

src/main/index.ts

@@ -10,7 +10,7 @@ import * as Mobx from "mobx";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsMainApi from "../extensions/main-api";
 import { app, autoUpdater, dialog, powerMonitor } from "electron";
-import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
+import { appName, isIntegrationTesting, isMac, isWindows, productName, isDevelopment } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
@@ -176,7 +176,7 @@ di.runSetups().then(() => {
 
     try {
       logger.info("🔌 Starting LensProxy");
-      await lensProxy.listen();
+      await lensProxy.listen(); // lensProxy.port available
     } catch (error) {
       dialog.showErrorBox("Lens Error", `Could not start proxy: ${error?.message || "unknown error"}`);
 
@@ -228,6 +228,15 @@ di.runSetups().then(() => {
     logger.info("🖥️  Starting WindowManager");
     const windowManager = WindowManager.createInstance();
 
+    // Override main content view url to local webpack-dev-server to support HMR / live-reload
+    if (isDevelopment) {
+      const { createDevServer } = await import("../../webpack.dev-server");
+      const devServer = createDevServer(lensProxy.port);
+
+      await devServer.start();
+      windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
+    }
+
     const menuItems = di.inject(electronMenuItemsInjectable);
     const trayMenuItems = di.inject(trayMenuItemsInjectable);
 

src/main/menu/menu.ts

@@ -9,7 +9,7 @@ import { appName, isMac, isWindows, docsUrl, supportUrl, productName } from "../
 import logger from "../logger";
 import { exitApp } from "../exit-app";
 import { broadcastMessage } from "../../common/ipc";
-import * as packageJson from "../../../package.json";
+import packageJson from "../../../package.json";
 import { preferencesURL, extensionsURL, addClusterURL, catalogURL, welcomeURL } from "../../common/routes";
 import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
 import type { MenuRegistration } from "./menu-registration";

src/main/router.ts

@@ -9,7 +9,7 @@ import type http from "http";
 import path from "path";
 import { readFile } from "fs-extra";
 import type { Cluster } from "../common/cluster/cluster";
-import { apiPrefix, appName, publicPath, isDevelopment, webpackDevServerPort } from "../common/vars";
+import { apiPrefix, appName, publicPath } from "../common/vars";
 import { HelmApiRoute, KubeconfigRoute, MetricsRoute, PortForwardRoute, ResourceApplierApiRoute, VersionRoute } from "./routes";
 import logger from "./logger";
 
@@ -110,7 +110,7 @@ export class Router {
     };
   }
 
-  protected static async handleStaticFile({ params, response, raw: { req }}: LensApiRequest): Promise<void> {
+  protected static async handleStaticFile({ params, response }: LensApiRequest): Promise<void> {
     let filePath = params.path;
 
     for (let retryCount = 0; retryCount < 5; retryCount += 1) {
@@ -124,19 +124,6 @@ export class Router {
       }
 
       try {
-        const filename = path.basename(req.url);
-        // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
-        const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
-
-        if (isDevelopment && toWebpackDevServer) {
-          const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
-
-          response.statusCode = 307;
-          response.setHeader("Location", redirectLocation);
-
-          return response.end();
-        }
-
         const data = await readFile(asset);
 
         response.setHeader("Content-Type", getMimeType(asset));

src/main/window-manager.ts

@@ -28,6 +28,8 @@ export interface SendToViewArgs {
 }
 
 export class WindowManager extends Singleton {
+  public mainContentUrl = `http://localhost:${LensProxy.getInstance().port}`;
+
   protected mainWindow: BrowserWindow;
   protected splashWindow: BrowserWindow;
   protected windowState: windowStateKeeper.State;
@@ -41,10 +43,6 @@ export class WindowManager extends Singleton {
     this.bindEvents();
   }
 
-  get mainUrl() {
-    return `http://localhost:${LensProxy.getInstance().port}`;
-  }
-
   private async initMainWindow(showSplash: boolean) {
     // Manage main window size and position with state persistence
     if (!this.windowState) {
@@ -142,8 +140,8 @@ export class WindowManager extends Singleton {
 
     try {
       if (showSplash) await this.showSplash();
-      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainUrl} ...`);
-      await this.mainWindow.loadURL(this.mainUrl);
+      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainContentUrl} ...`);
+      await this.mainWindow.loadURL(this.mainContentUrl);
     } catch (error) {
       logger.error("Loading main window failed", { error });
       dialog.showErrorBox("ERROR!", error.toString());