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
@@ -9,7 +9,7 @@ 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 { type Disposer, iter } from "../utils";
 import { once } from "lodash";
 import logger from "../../common/logger";
 import { CatalogRunEvent } from "../../common/catalog/catalog-run-event";
@@ -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 }}>
@@ -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 />;
@@ -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)}>
@@ -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}/>;
  }
@@ -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 {
@@ -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";
@@ -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";
@@ -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";
@@ -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";
@@ -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> {
@@ -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";
@@ -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";
@@ -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";
@@ -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";
@@ -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";
@@ -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";
@@ -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";
@@ -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",
@@ -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";
@@ -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,5 @@
 // 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');
+  src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
 }
@@ -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} />;
@@ -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";
@@ -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} />;
@@ -10,8 +10,9 @@ 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 type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
+import Creatable, { type CreatableProps } from "react-select/creatable";

 import { ThemeStore } from "../../theme.store";
 import { boundMethod, cssNames } from "../../utils";
@@ -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