Upgrade to webpack@5 (#4725)

* attempt to upgrade webpack@5 and all relevant packages to latest version -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * debugging webpack@5 usage -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * - attempt to use "react-refresh-typescript" with webpack@5 thingy - extending getTSLoader() to accept more options from ts-loader Signed-off-by: Roman <ixrock@gmail.com> * more fixes, updating webpack loaders Signed-off-by: Roman <ixrock@gmail.com> * merge-fixes, using internal webpack@5 asset handlers (type: "asset/*") Signed-off-by: Roman <ixrock@gmail.com> * fix: raw-loader / <Icon svg="./*">, updated mocked types for importing resources via webpack Signed-off-by: Roman <ixrock@gmail.com> * removing webpack-dev-server, clean up Signed-off-by: Roman <ixrock@gmail.com> * fix master-merge conflict Signed-off-by: Roman <ixrock@gmail.com> * fix/reverted: use sourceMap for styles Signed-off-by: Roman <ixrock@gmail.com> * fix lint Signed-off-by: Roman <ixrock@gmail.com> * fix: loading svg icons inline as data-url (workaround for "?raw" as it fails in tests and "!!raw-loader!" seems doesn't work at all in webpack@5) Signed-off-by: Roman <ixrock@gmail.com> * attempt to use webpack-dev-server via node-api -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * attempt to use webpack-dev-server via node-api -- part 2 Signed-off-by: Roman <ixrock@gmail.com> * fix: incorrect parsing svg-icon xml-content by <HotbarEntityIcon/> Signed-off-by: Roman <ixrock@gmail.com> * fix: more random fixes related to incorrect parsing svg-icon content, added static Icon.isSvg(content: string) Signed-off-by: Roman <ixrock@gmail.com> * attempt to fix: "Uncaught (in promise) DOMException: A network error occurred." when loading cluster frame -- part 1 Signed-off-by: Roman <ixrock@gmail.com> * fix: loading cluster frame + error in loading terminal default font (which was causing network exception error and hidden cluster-view) fix: proxying websockets (e.g. terminal) Signed-off-by: Roman <ixrock@gmail.com> * fix: wait lensProxy.listen() to obtain lensProxy.port for webpack-dev-server Signed-off-by: Roman <ixrock@gmail.com> * fix lint Signed-off-by: Roman <ixrock@gmail.com> * fix unit tests Signed-off-by: Roman <ixrock@gmail.com> * reverted auto-formatted imports with 2 lines (.idea/webstorm) Signed-off-by: Roman <ixrock@gmail.com> * fix: handle warnings in main-process compilation files Signed-off-by: Roman <ixrock@gmail.com> * fix: handle warnings in "renderer" compilation Signed-off-by: Roman <ixrock@gmail.com> * fix: move app fonts preloading into html/css files, clean up Signed-off-by: Roman <ixrock@gmail.com> * update "webpack@5", "typescript@4.5" in bundled extensions / attempt to fix weird errors in build pipeline: ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/common/catalog/catalog-category-registry.d.ts 6:27-35 [tsl] ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/common/catalog/catalog-category-registry.d.ts(6,28) TS1005: ',' expected. ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/components/select/select.d.ts 8:14-28 [tsl] ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/components/select/select.d.ts(8,15) TS1005: ',' expected. ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/api/catalog-entity-registry.d.ts 8:14-22 [tsl] ERROR in /home/runner/work/lens/lens/src/extensions/npm/extensions/dist/src/renderer/api/catalog-entity-registry.d.ts(8,15) TS1005: ',' expected. Signed-off-by: Roman <ixrock@gmail.com> * fix: handle errors in bundled extensions compilation process Signed-off-by: Roman <ixrock@gmail.com> * fix: "webpack" not found in production Signed-off-by: Roman <ixrock@gmail.com> * fix: removed preloading fonts in template via <link preload> since it's not bundled with HtmlWebpackPlugin() anyway anda all fonts loaded via css @font-face rule Signed-off-by: Roman <ixrock@gmail.com> * apply HMR at least for css/styles and use manual page reload on app/scripts change Signed-off-by: Roman <ixrock@gmail.com> * use `react-refresh-typescript` and `@pmmmwh/react-refresh-webpack-plugin` to support HMR in most cases Signed-off-by: Roman <ixrock@gmail.com> * responding to comments Signed-off-by: Roman <ixrock@gmail.com> * revered extension version in package-lock.json (autoupdated on `make dev`) Signed-off-by: Roman <ixrock@gmail.com>
lensapp · Feb 15, 2022 · d656a9e · d656a9e
1 parent 46585ee
commit d656a9e
Show file tree

Hide file tree

Showing 52 changed files with 5,881 additions and 19,335 deletions.
diff --git a/__mocks__/imageMock.ts → __mocks__/assetMock.ts b/__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)
diff --git a/extensions/kube-object-event-status/package-lock.json b/extensions/kube-object-event-status/package-lock.json
diff --git a/extensions/kube-object-event-status/package.json b/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"
   }
 }
diff --git a/extensions/metrics-cluster-feature/package-lock.json b/extensions/metrics-cluster-feature/package-lock.json
diff --git a/extensions/metrics-cluster-feature/package.json b/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"
   }
 }
diff --git a/extensions/node-menu/package-lock.json b/extensions/node-menu/package-lock.json
diff --git a/extensions/node-menu/package.json b/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"
   }
 }
diff --git a/extensions/pod-menu/package-lock.json b/extensions/pod-menu/package-lock.json
diff --git a/extensions/pod-menu/package.json b/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"
   }
 }
diff --git a/package.json b/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"
   }

diff --git a/src/common/catalog-entities/kubernetes-cluster.ts b/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",

diff --git a/src/common/catalog/catalog-category-registry.ts b/src/common/catalog/catalog-category-registry.ts
@@ -3,10 +3,10 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { action, computed, observable, makeObservable } from "mobx";
-import { Disposer, ExtendedMap, iter } from "../utils";
-import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
 import { once } from "lodash";
+import { action, computed, makeObservable, observable } from "mobx";
+import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
+import { ExtendedMap, iter, type Disposer } from "../utils";
 
 export type CategoryFilter = (category: CatalogCategory) => any;
 

diff --git a/src/common/getTSLoader.ts b/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,
     },
   };
 };

diff --git a/src/common/user-store/user-store.ts b/src/common/user-store/user-store.ts
@@ -12,7 +12,8 @@ import { getAppVersion } from "../utils/app-version";
 import { kubeConfigDefaultPath } from "../kube-helpers";
 import { appEventBus } from "../app-event-bus/event-bus";
 import { getOrInsertSet, toggle, toJS } from "../../renderer/utils";
-import { DESCRIPTORS, EditorConfiguration, ExtensionRegistry, KubeconfigSyncValue, UserPreferencesModel, TerminalConfig } from "./preferences-helpers";
+import { DESCRIPTORS } from "./preferences-helpers";
+import type { EditorConfiguration, ExtensionRegistry, KubeconfigSyncValue, UserPreferencesModel, TerminalConfig } from "./preferences-helpers";
 import logger from "../../main/logger";
 
 export interface UserStoreModel {

diff --git a/src/main/catalog/catalog-entity-registry.ts b/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";
 

diff --git a/src/main/index.ts b/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,16 @@ 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);
+
+      windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
+
+      await devServer.start();
+    }
+
     const menuItems = di.inject(electronMenuItemsInjectable);
     const trayMenuItems = di.inject(trayMenuItemsInjectable);
 

diff --git a/src/main/menu/menu.ts b/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";

diff --git a/src/main/router.ts b/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));