Upgrade to webpack@5 (#4894)

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,9 @@
  */
 
 import { action, computed, observable, makeObservable } from "mobx";
-import type { Disposer } from "../utils";
-import { strictSet, iter, getOrInsertMap } from "../utils";
 import { once } from "lodash";
+import { iter, getOrInsertMap, strictSet } from "../utils";
+import type { Disposer } 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

@@ -10,7 +10,7 @@ import logger from "../logger";
 import { exitApp } from "../exit-app";
 import { broadcastMessage } from "../../common/ipc";
 import { openBrowser } from "../../common/utils";
-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) {
@@ -144,8 +142,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());

src/renderer/api/catalog-entity-registry.ts

@@ -9,7 +9,8 @@ import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegis
 import "../../common/catalog-entities";
 import type { Cluster } from "../../common/cluster/cluster";
 import { ClusterStore } from "../../common/cluster-store/cluster-store";
-import { Disposer, iter } from "../utils";
+import { iter } from "../utils";
+import type { Disposer } from "../utils";
 import { once } from "lodash";
 import logger from "../../common/logger";
 import { CatalogRunEvent } from "../../common/catalog/catalog-run-event";

src/renderer/bootstrap.tsx

@@ -136,7 +136,14 @@ export async function bootstrap(di: DependencyInjectionContainer) {
     App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
   }
 
-  await initializeApp(rootElem);
+  try {
+    await initializeApp(rootElem);
+  } catch (error) {
+    console.error(`[BOOTSTRAP]: view initialization error: ${error}`, {
+      origin: location.href,
+      isTopFrameView: process.isMainFrame,
+    });
+  }
 
   render(
     <DiContextProvider value={{ di }}>

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -25,7 +25,7 @@ interface Props<T extends CatalogEntity> {
 @observer
 export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Props<T>> {
   categoryIcon(category: CatalogCategory) {
-    if (category.metadata.icon.includes("<svg")) {
+    if (Icon.isSvg(category.metadata.icon)) {
       return <Icon svg={category.metadata.icon} smallest />;
     } else {
       return <Icon material={category.metadata.icon} smallest />;

src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx

@@ -65,7 +65,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
         continue;
       }
 
-      const key = menuItem.icon.includes("<svg") ? "svg" : "material";
+      const key = Icon.isSvg(menuItem.icon) ? "svg" : "material";
 
       items.push(
         <MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>

src/renderer/components/+catalog/catalog-menu.tsx

@@ -28,7 +28,7 @@ function getCategoryIcon(category: CatalogCategory) {
   const { icon } = category.metadata ?? {};
 
   if (typeof icon === "string") {
-    return icon.includes("<svg")
+    return Icon.isSvg(icon)
       ? <Icon small svg={icon}/>
       : <Icon small material={icon}/>;
   }

src/renderer/components/+cluster/cluster-overview-store/cluster-overview-store.ts

@@ -5,9 +5,9 @@
 
 import { action, observable, reaction, when, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
-import { Cluster, clusterApi, getMetricsByNodeNames, IClusterMetrics } from "../../../../common/k8s-api/endpoints";
+import { Cluster, clusterApi, getMetricsByNodeNames, type IClusterMetrics } from "../../../../common/k8s-api/endpoints";
 import { autoBind, StorageHelper } from "../../../utils";
-import { IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
+import { type IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
 import { nodesStore } from "../../+nodes/nodes.store";
 
 export enum MetricType {

src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -14,7 +14,7 @@ import { boundMethod, stopPropagation } from "../../utils";
 import { MarkdownViewer } from "../markdown-viewer";
 import { Spinner } from "../spinner";
 import { Button } from "../button";
-import { Select, SelectOption } from "../select";
+import { Select, type SelectOption } from "../select";
 import { Badge } from "../badge";
 import { Tooltip, withStyles } from "@material-ui/core";
 import { withInjectables } from "@ogre-tools/injectable-react";

src/renderer/components/+helm-releases/release-rollback-dialog.tsx

@@ -10,7 +10,7 @@ import { observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { Dialog, DialogProps } from "../dialog";
 import { Wizard, WizardStep } from "../wizard";
-import { getReleaseHistory, HelmRelease, IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
+import { getReleaseHistory, HelmRelease, type IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { Select, SelectOption } from "../select";
 import { Notifications } from "../notifications";
 import orderBy from "lodash/orderBy";

src/renderer/components/+namespaces/namespace-details.tsx

@@ -10,7 +10,7 @@ import { computed, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { boundMethod, cssNames, Disposer } from "../../utils";
-import { getMetricsForNamespace, IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
+import { getMetricsForNamespace, type IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Link } from "react-router-dom";
 import { Spinner } from "../spinner";

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -15,7 +15,7 @@ import { ResourceMetrics } from "../resource-metrics";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object-meta";
-import { getBackendServiceNamePort, getMetricsForIngress, IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
+import { getBackendServiceNamePort, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { boundMethod } from "../../utils";

src/renderer/components/+preferences/add-helm-repo-dialog.tsx

@@ -18,7 +18,7 @@ import { systemName, isUrl, isPath } from "../input/input_validators";
 import { SubTitle } from "../layout/sub-title";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
-import { HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
+import { type HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
 import { requestOpenFilePickingDialog } from "../../ipc";
 
 interface Props extends Partial<DialogProps> {

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -15,7 +15,7 @@ import { Link } from "react-router-dom";
 import { ResourceMetrics } from "../resource-metrics";
 import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForPvc, IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
+import { getMetricsForPvc, type IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { KubeObjectMeta } from "../kube-object-meta";

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { daemonSetStore } from "./daemonsets.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { DaemonSet, getMetricsForDaemonSets, IPodMetrics } from "../../../common/k8s-api/endpoints";
+import { DaemonSet, getMetricsForDaemonSets, type IPodMetrics } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { makeObservable, observable, reaction } from "mobx";

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
-import { Deployment, getMetricsForDeployments, IPodMetrics } from "../../../common/k8s-api/endpoints";
+import { Deployment, getMetricsForDeployments, type IPodMetrics } from "../../../common/k8s-api/endpoints";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
 import { podsStore } from "../+workloads-pods/pods.store";

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -17,7 +17,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { podsStore } from "../+workloads-pods/pods.store";
 import { jobStore } from "./job.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForJobs, IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
+import { getMetricsForJobs, type IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { makeObservable, observable, reaction } from "mobx";

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { observable, reaction, makeObservable } from "mobx";
-import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
+import { type IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { boundMethod, cssNames, toJS } from "../../utils";

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "../+workloads-pods/pods.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForReplicaSets, IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
+import { getMetricsForReplicaSets, type IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -16,7 +16,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
 import { podsStore } from "../+workloads-pods/pods.store";
 import { statefulSetStore } from "./statefulset.store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { getMetricsForStatefulSets, IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
+import { getMetricsForStatefulSets, type IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";

src/renderer/components/dock/terminal/dock-tab.tsx

@@ -3,6 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import "./terminal-dock-tab.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { boundMethod, cssNames } from "../../../utils";

src/renderer/components/dock/terminal/terminal-dock-tab.scss

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.TerminalTab {
+  @include font-preload {
+    font-family: "RobotoMono", monospace;
+  }
+}

src/renderer/components/dock/terminal/terminal.ts

@@ -11,7 +11,7 @@ import type { TabId } from "../dock/store";
 import { TerminalApi, TerminalChannels } from "../../../api/terminal-api";
 import { ThemeStore } from "../../../theme.store";
 import { disposer } from "../../../utils";
-import { isMac, defaultTerminalFontFamily } from "../../../../common/vars";
+import { isMac } from "../../../../common/vars";
 import { once } from "lodash";
 import { UserStore } from "../../../../common/user-store";
 import { clipboard } from "electron";
@@ -25,14 +25,6 @@ export class Terminal {
     return document.getElementById("terminal-init");
   }
 
-  static async preloadFonts() {
-    const fontPath = require("../../fonts/roboto-mono-nerd.ttf").default; // eslint-disable-line @typescript-eslint/no-var-requires
-    const fontFace = new FontFace(defaultTerminalFontFamily, `url(${fontPath})`);
-
-    await fontFace.load();
-    document.fonts.add(fontFace);
-  }
-
   private xterm: XTerm | null = new XTerm({
     cursorBlink: true,
     cursorStyle: "bar",

src/renderer/components/dock/upgrade-chart/view.tsx

@@ -15,7 +15,7 @@ import type { UpgradeChartTabStore } from "./store";
 import { Spinner } from "../../spinner";
 import { Badge } from "../../badge";
 import { EditorPanel } from "../editor-panel";
-import { helmChartStore, IChartVersion } from "../../+helm-charts/helm-chart.store";
+import { helmChartStore, type IChartVersion } from "../../+helm-charts/helm-chart.store";
 import type { HelmRelease, IReleaseUpdateDetails, IReleaseUpdatePayload } from "../../../../common/k8s-api/endpoints/helm-releases.api";
 import { Select, SelectOption } from "../../select";
 import { IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";

src/renderer/components/fonts.scss

@@ -13,7 +13,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
+  src: url("./fonts/MaterialIcons-Regular.woff2") format("woff");
+  src: url("./fonts/MaterialIcons-Regular.ttf") format("truetype");
 }
 
 // Patched RobotoMono font with icons
@@ -21,6 +22,6 @@
 // https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
 @font-face {
   font-family: 'RobotoMono';
-  src: local('RobotoMono'),
-  url('fonts/roboto-mono-nerd.ttf') format('truetype');
+  font-display: block;
+  src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
 }

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -47,7 +47,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
       return <Icon material="bug_report" className={className} />;
     }
 
-    if (category.metadata.icon.includes("<svg")) {
+    if (Icon.isSvg(category.metadata.icon)) {
       return <Icon svg={category.metadata.icon} className={className} />;
     } else {
       return <Icon material={category.metadata.icon} className={className} />;

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -12,7 +12,7 @@ import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { HotbarStore } from "../../../common/hotbar-store";
 import type { CatalogEntity } from "../../api/catalog-entity";
-import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
+import { DragDropContext, Draggable, Droppable, type DropResult } from "react-beautiful-dnd";
 import { HotbarSelector } from "./hotbar-selector";
 import { HotbarCell } from "./hotbar-cell";
 import { HotbarIcon } from "./hotbar-icon";

src/renderer/components/icon/icon.tsx

@@ -11,6 +11,7 @@ import type { LocationDescriptor } from "history";
 import { boundMethod, cssNames } from "../../utils";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import isNumber from "lodash/isNumber";
+import { decode } from "../../../common/utils/base64";
 
 export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   material?: string;          // material-icon, see available names at https://material.io/icons/
@@ -36,6 +37,10 @@ export class Icon extends React.PureComponent<IconProps> {
     focusable: true,
   };
 
+  static isSvg(content: string) {
+    return String(content).includes("svg+xml"); // data-url for raw svg-icon
+  }
+
   get isInteractive() {
     const { interactive, onClick, href, link } = this.props;
 
@@ -58,7 +63,7 @@ export class Icon extends React.PureComponent<IconProps> {
     switch (evt.nativeEvent.code) {
       case "Space":
 
-        // fallthrough
+      // fallthrough
       case "Enter": {
         this.ref.current?.click();
         evt.preventDefault();
@@ -98,9 +103,12 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (typeof svg === "string") {
-      const svgIconText = svg.includes("<svg") ? svg : require(`!!raw-loader!./${svg}.svg`).default;
+      const dataUrlPrefix = "data:image/svg+xml;base64,";
+      const svgIconDataUrl = svg.startsWith(dataUrlPrefix) ? svg : require(`./${svg}.svg`);
+      const svgIconText = typeof svgIconDataUrl == "string" // decode xml from data-url
+        ? decode(svgIconDataUrl.replace(dataUrlPrefix, "")) : "";
 
-      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
+      iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }} />;
     }
 
     // render as material-icon
@@ -128,7 +136,7 @@ export class Icon extends React.PureComponent<IconProps> {
     }
 
     if (href) {
-      return <a {...iconProps} href={href} ref={this.ref}/>;
+      return <a {...iconProps} href={href} ref={this.ref} />;
     }
 
     return <i {...iconProps} ref={this.ref} />;

src/renderer/components/mixins.scss

@@ -59,3 +59,15 @@
     @content; // css-modules (*.module.scss)
   }
 }
+
+// Makes custom font available at earlier stages (start preloading)
+// Element must be in DOM and contain some text of loading font.
+@mixin font-preload() {
+  &:before {
+    width: 0;
+    display: block;
+    overflow: hidden;
+    content: "x"; // required
+    @content; // must contain `font-family`
+  }
+}

src/renderer/components/select/select.tsx

@@ -10,8 +10,10 @@ import "./select.scss";
 import React, { ReactNode } from "react";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
-import ReactSelect, { ActionMeta, components, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
-import Creatable, { CreatableProps } from "react-select/creatable";
+import ReactSelect, { components } from "react-select";
+import ReactSelectCreatable from "react-select/creatable";
+import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
+import type { CreatableProps } from "react-select/creatable";
 
 import { ThemeStore } from "../../theme.store";
 import { boundMethod, cssNames } from "../../utils";
@@ -138,7 +140,7 @@ export class Select extends React.Component<SelectProps> {
     };
 
     return isCreatable
-      ? <Creatable {...selectProps}/>
+      ? <ReactSelectCreatable {...selectProps}/>
       : <ReactSelect {...selectProps}/>;
   }
 }

src/renderer/frames/cluster-frame/init-cluster-frame/init-cluster-frame.ts

@@ -5,7 +5,6 @@
 import type { Cluster } from "../../../../common/cluster/cluster";
 import type { CatalogEntityRegistry } from "../../../api/catalog-entity-registry";
 import logger from "../../../../main/logger";
-import { Terminal } from "../../../components/dock/terminal/terminal";
 import type { KubernetesCluster } from "../../../../common/catalog-entities";
 import { Notifications } from "../../../components/notifications";
 import type { AppEvent } from "../../../../common/app-event-bus/event-bus";
@@ -40,7 +39,6 @@ export const initClusterFrame =
         `${logPrefix} Init dashboard, clusterId=${hostedCluster.id}, frameId=${frameRoutingId}`,
       );
 
-      await Terminal.preloadFonts();
       await requestSetClusterFrameId(hostedCluster.id);
       await hostedCluster.whenReady; // cluster.activate() is done at this point
 

src/renderer/template.html

@@ -2,6 +2,8 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <link rel="preload" href="<%= assetPath %>/MaterialIcons-Regular.ttf" as="font" crossorigin>
+  <link rel="preload" href="<%= assetPath %>/roboto-mono-nerd.ttf" as="font" crossorigin>
 </head>
 <body>