From 3f3073d716332c542074e7da3b78759d7c8d6e4b Mon Sep 17 00:00:00 2001 From: Scott J Dickerson Date: Mon, 22 Jul 2024 13:02:46 -0400 Subject: [PATCH] :bug: 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: ` - `OTS parsing error: invalid sfntVersion: 1702391919` [^1]: https://github.com/patternfly/patternfly-react-seed Signed-off-by: Scott J Dickerson --- client/config/webpack.common.ts | 116 +++++++++++++------------------- client/package.json | 2 +- 2 files changed, 48 insertions(+), 70 deletions(-) diff --git a/client/config/webpack.common.ts b/client/config/webpack.common.ts index 637b943652..5f884c12aa 100644 --- 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,47 +38,27 @@ 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", @@ -85,17 +66,13 @@ const config: Configuration = { }, }, ], - 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 index b3faca8b7f..85916be792 100644 --- 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",