🐛 Fix packaging of fonts

Update `webpack.common.ts` to the current patternfly-react-seed[^1] packaging configs for fonts. This allows the correct fonts to be used in the app - `RedHatText` over `helvetica`. This also resolves any browser console reported errors of the form: - `Failed to decode downloaded font: <url>` - `OTS parsing error: invalid sfntVersion: 1702391919` [^1]: https://github.com/patternfly/patternfly-react-seed Signed-off-by: Scott J Dickerson <[email protected]>
konveyor · Jul 22, 2024 · 66393a9 · 66393a9
1 parent 80ee8ec
commit 66393a9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 138 deletions.
diff --git a/client/config/webpack.common.ts b/client/config/webpack.common.ts
@@ -9,6 +9,7 @@ import { brandingAssetPath } from "@konveyor-ui/common";
 import { LANGUAGES_BY_FILE_EXTENSION } from "./monacoConstants";
 
 const pathTo = (relativePath: string) => path.resolve(__dirname, relativePath);
+const nodeModules = (pkg: string) => pathTo(`../../node_modules/${pkg}`);
 const brandingPath = brandingAssetPath();
 const manifestPath = path.resolve(brandingPath, "manifest.json");
 
@@ -37,65 +38,41 @@ const config: Configuration = {
           },
         },
       },
+
+      // Ref: https://github.com/patternfly/patternfly-react-seed/blob/main/webpack.common.js
       {
         test: /\.(svg|ttf|eot|woff|woff2)$/,
+        type: "asset/resource",
         // only process modules with this loader
         // if they live under a 'fonts' or 'pficon' directory
         include: [
-          pathTo("../../node_modules/patternfly/dist/fonts"),
-          pathTo(
-            "../../node_modules/@patternfly/react-core/dist/styles/assets/fonts"
-          ),
-          pathTo(
-            "../../node_modules/@patternfly/react-core/dist/styles/assets/pficon"
-          ),
-          pathTo("../../node_modules/@patternfly/patternfly/assets/fonts"),
-          pathTo("../../node_modules/@patternfly/patternfly/assets/pficon"),
+          nodeModules("patternfly/dist/fonts"),
+          nodeModules("@patternfly/react-core/dist/styles/assets/fonts"),
+          nodeModules("@patternfly/react-core/dist/styles/assets/pficon"),
+          nodeModules("@patternfly/patternfly/assets/fonts"),
+          nodeModules("@patternfly/patternfly/assets/pficon"),
         ],
-        use: {
-          loader: "file-loader",
-          options: {
-            // Limit at 50k. larger files emited into separate files
-            limit: 5000,
-            outputPath: "fonts",
-            name: "[name].[ext]",
-          },
-        },
-      },
-      {
-        test: /\.(xsd)$/,
-        include: [pathTo("../src")],
-        use: {
-          loader: "raw-loader",
-          options: {
-            esModule: true,
-          },
-        },
       },
       {
         test: /\.svg$/,
+        type: "asset/inline",
         include: (input) => input.indexOf("background-filter.svg") > 1,
         use: [
           {
-            loader: "url-loader",
             options: {
               limit: 5000,
               outputPath: "svgs",
               name: "[name].[ext]",
             },
           },
         ],
-        type: "javascript/auto",
       },
       {
         test: /\.svg$/,
         // only process SVG modules with this loader if they live under a 'bgimages' directory
         // this is primarily useful when applying a CSS background using an SVG
         include: (input) => input.indexOf(BG_IMAGES_DIRNAME) > -1,
-        use: {
-          loader: "svg-url-loader",
-          options: {},
-        },
+        type: "asset/inline",
       },
       {
         test: /\.svg$/,
@@ -110,53 +87,32 @@ const config: Configuration = {
           loader: "raw-loader",
           options: {},
         },
-        type: "javascript/auto",
       },
       {
         test: /\.(jpg|jpeg|png|gif)$/i,
         include: [
           pathTo("../src"),
-          pathTo("../../node_modules/patternfly"),
-          pathTo("../../node_modules/@patternfly/patternfly/assets/images"),
-          pathTo(
-            "../../node_modules/@patternfly/react-styles/css/assets/images"
-          ),
-          pathTo(
-            "../../node_modules/@patternfly/react-core/dist/styles/assets/images"
-          ),
-          pathTo(
-            "../../node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images"
+          nodeModules("patternfly"),
+          nodeModules("@patternfly/patternfly/assets/images"),
+          nodeModules("@patternfly/react-styles/css/assets/images"),
+          nodeModules("@patternfly/react-core/dist/styles/assets/images"),
+          nodeModules(
+            "@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images"
           ),
-          pathTo(
-            "../../node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images"
+          nodeModules(
+            "@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images"
           ),
-          pathTo(
-            "../../node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images"
+          nodeModules(
+            "@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images"
           ),
         ],
-        use: [
-          {
-            loader: "url-loader",
-            options: {
-              limit: 5000,
-              outputPath: "images",
-              name: "[name].[ext]",
-            },
+        type: "asset",
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8096,
           },
-        ],
-        type: "javascript/auto",
-      },
-      {
-        test: pathTo("../../node_modules/xmllint/xmllint.js"),
-        loader: "exports-loader",
-        options: {
-          exports: "xmllint",
         },
       },
-      {
-        test: /\.yaml$/,
-        use: "raw-loader",
-      },
 
       // For monaco-editor-webpack-plugin --->
       {
@@ -169,6 +125,28 @@ const config: Configuration = {
         type: "asset/resource",
       },
       // <--- For monaco-editor-webpack-plugin
+
+      {
+        test: /\.(xsd)$/,
+        include: [pathTo("../src")],
+        use: {
+          loader: "raw-loader",
+          options: {
+            esModule: true,
+          },
+        },
+      },
+      {
+        test: nodeModules("xmllint/xmllint.js"),
+        loader: "exports-loader",
+        options: {
+          exports: "xmllint",
+        },
+      },
+      {
+        test: /\.yaml$/,
+        use: "raw-loader",
+      },
     ],
   },
 

diff --git a/client/package.json b/client/package.json
@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "analyze": "source-map-explorer 'dist/static/js/*.js'",
-    "clean": "rimraf ./dist",
+    "clean": "rimraf ./dist ./coverage",
     "extract": "i18next --config i18next-parser.config.js",
     "prebuild": "npm run clean && npm run tsc -- --noEmit",
     "build": "NODE_ENV=production webpack --config ./config/webpack.prod.ts",
@@ -79,7 +79,6 @@
     "css-minimizer-webpack-plugin": "^6.0.0",
     "dotenv-webpack": "^8.1.0",
     "exports-loader": "^3.1.0",
-    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-webpack-plugin": "^5.6.0",
     "i18next-parser": "^0.13.0",
@@ -91,11 +90,9 @@
     "react-refresh-typescript": "^2.0.9",
     "source-map-explorer": "^2.5.2",
     "style-loader": "^3.3.4",
-    "svg-url-loader": "^8.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "url-loader": "^4.1.1",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.2",

diff --git a/package-lock.json b/package-lock.json