fix: raw-loader / <Icon svg="./*">, updated mocked types for importing resources via webpack

Signed-off-by: Roman <ixrock@gmail.com>

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

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

types/mocks.d.ts

@@ -25,7 +25,17 @@ declare module "*.scss" {
   const content: string;
   export = content;
 }
-declare module "*.ttf" {
+
-  const content: string;
+// Declare everything what's bundled as webpack's type="asset/resource"
-  export = content;
+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";

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: {

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: [

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