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>
2025-05-20 05:10:56 +00:00 · 2022-02-15 17:04:12 +02:00
1 parent 46585ee9d8
commit d656a9e289
@@ -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";

@@ -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);

@@ -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";
@@ -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));
@@ -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());