From cae184883bc84843d193fe2c25e090776c93fdb6 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Wed, 26 Jan 2022 16:15:06 +0200
Subject: [PATCH] fix: raw-loader / <Icon svg="./*">, updated mocked types for
 importing resources via webpack

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../catalog-entities/kubernetes-cluster.ts       |  3 ++-
 src/renderer/components/icon/icon.tsx            |  2 +-
 types/mocks.d.ts                                 | 16 +++++++++++++---
 webpack.extensions.ts                            |  1 +
 webpack.main.ts                                  |  3 ++-
 webpack.renderer.ts                              | 14 ++++++++------
 6 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/common/catalog-entities/kubernetes-cluster.ts b/src/common/catalog-entities/kubernetes-cluster.ts
index f697d90bf0..5552785005 100644
--- a/src/common/catalog-entities/kubernetes-cluster.ts
+++ b/src/common/catalog-entities/kubernetes-cluster.ts
@@ -11,6 +11,7 @@ import { broadcastMessage, requestMain } from "../ipc";
 import { app } from "electron";
 import type { CatalogEntitySpec } from "../catalog/catalog-entity";
 import { IpcRendererNavigationEvents } from "../../renderer/navigation/events";
+import KubeClusterCategoryIcon from "./icons/kubernetes.svg?raw";
 
 export interface KubernetesClusterPrometheusMetrics {
   address?: {
@@ -134,7 +135,7 @@ class KubernetesClusterCategory extends CatalogCategory {
   public readonly kind = "CatalogCategory";
   public metadata = {
     name: "Clusters",
-    icon: require(`./icons/kubernetes.svg?raw`).default, // eslint-disable-line
+    icon: KubeClusterCategoryIcon,
   };
   public spec: CatalogCategorySpec = {
     group: "entity.k8slens.dev",
diff --git a/src/renderer/components/icon/icon.tsx b/src/renderer/components/icon/icon.tsx
index 3c8d2df164..f480a3cd11 100644
--- a/src/renderer/components/icon/icon.tsx
+++ b/src/renderer/components/icon/icon.tsx
@@ -100,7 +100,7 @@ export class Icon extends React.PureComponent<IconProps> {
 
     // render as inline svg-icon
     if (typeof svg === "string") {
-      const svgIconText = svg.includes("<svg") ? svg : require(`./${svg}.svg?raw`).default;
+      const svgIconText = svg.includes("<svg") ? svg : require(`./${svg}.svg?raw`);
 
       iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
     }
diff --git a/types/mocks.d.ts b/types/mocks.d.ts
index 3d7f676a1a..4842ebaaa1 100644
--- a/types/mocks.d.ts
+++ b/types/mocks.d.ts
@@ -25,7 +25,17 @@ declare module "*.scss" {
   const content: string;
   export = content;
 }
-declare module "*.ttf" {
-  const content: string;
-  export = content;
+
+// Declare everything what's bundled as webpack's type="asset/resource"
+declare module "*.svg?raw" {
+  export = "";
 }
+declare module "*.svg" {
+  export = "";
+}
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.eot";
+declare module "*.woff";
+declare module "*.woff2";
+declare module "*.ttf";
diff --git a/webpack.extensions.ts b/webpack.extensions.ts
index 974a2ef559..32bba8f8a5 100644
--- a/webpack.extensions.ts
+++ b/webpack.extensions.ts
@@ -57,6 +57,7 @@ export default function generateExtensionTypes(): webpack.Configuration {
         fontsLoaderWebpackRule(),
         filesAndIconsWebpackRule(),
         cssModulesWebpackRule({ styleLoader: "style-loader" }),
+        { resourceQuery: /raw/, type: "asset/source" }, // import with "?raw"
       ],
     },
     resolve: {
diff --git a/webpack.main.ts b/webpack.main.ts
index ec158fae07..13f6e40053 100755
--- a/webpack.main.ts
+++ b/webpack.main.ts
@@ -42,11 +42,12 @@ configs.push((): webpack.Configuration => {
           test: /\.node$/,
           use: "node-loader",
         },
+        getTSLoader({}, /\.ts$/),
         {
+          // import SvgRawTextFile from "./some-file.svg?raw"
           resourceQuery: /raw/,
           type: "asset/source",
         },
-        getTSLoader({}, /\.ts$/),
       ],
     },
     plugins: [
diff --git a/webpack.renderer.ts b/webpack.renderer.ts
index c8c31e3c27..aa1827229b 100755
--- a/webpack.renderer.ts
+++ b/webpack.renderer.ts
@@ -86,14 +86,16 @@ export function webpackLensRenderer(): webpack.Configuration {
           test: /\.node$/,
           use: "node-loader",
         },
-        {
-          resourceQuery: /raw/,
-          type: "asset/source",
-        },
         getTSLoader(),
         cssModulesWebpackRule(),
         filesAndIconsWebpackRule(),
         fontsLoaderWebpackRule(),
+        {
+          // Allows to import/require() resource as plain text with suffix `?raw`
+          // To make it work must be listed in the end of `config.module.rules`
+          resourceQuery: /raw/,
+          type: "asset/source",
+        },
       ],
     },
 
@@ -133,7 +135,7 @@ export function webpackLensRenderer(): webpack.Configuration {
 export function filesAndIconsWebpackRule(): webpack.RuleSetRule {
   return {
     test: /\.(jpg|png|svg|map|ico)$/,
-    type: "asset/resource",
+    type: "asset/resource", // https://webpack.js.org/guides/asset-modules/
   };
 }
 
@@ -143,7 +145,7 @@ export function filesAndIconsWebpackRule(): webpack.RuleSetRule {
 export function fontsLoaderWebpackRule(): webpack.RuleSetRule {
   return {
     test: /\.(ttf|eot|woff2?)$/,
-    type: "asset",
+    type: "asset/resource",
   };
 }