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/+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}/>;
   }