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>

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";