From 66393a9372fb6e39d0618238f0c17ed816b26088 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 | 5 +- package-lock.json | 65 ------------------ 3 files changed, 48 insertions(+), 138 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..e24d9f2566 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", @@ -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 index 796033f47a..a9ae7e5017 100644 --- a/package-lock.json +++ b/package-lock.json @@ -118,7 +118,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", @@ -130,11 +129,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", @@ -7441,26 +7438,6 @@ "node": "^10.12.0 || >=12.0.0" } }, - "node_modules/file-loader": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz", - "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==", - "dev": true, - "dependencies": { - "loader-utils": "^2.0.0", - "schema-utils": "^3.0.0" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "webpack": "^4.0.0 || ^5.0.0" - } - }, "node_modules/file-saver": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", @@ -15410,21 +15387,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/svg-url-loader": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-8.0.0.tgz", - "integrity": "sha512-5doSXvl18hY1fGsRLdhWAU5jgzgxJ06/gc/26cpuDnN0xOz1HmmfhkpL29SSrdIvhtxQ1UwGzmk7wTT/l48mKw==", - "dev": true, - "dependencies": { - "file-loader": "~6.2.0" - }, - "engines": { - "node": ">=14" - }, - "peerDependencies": { - "webpack": "^5.0.0" - } - }, "node_modules/svgo": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz", @@ -16384,33 +16346,6 @@ "punycode": "^2.1.0" } }, - "node_modules/url-loader": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz", - "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==", - "dev": true, - "dependencies": { - "loader-utils": "^2.0.0", - "mime-types": "^2.1.27", - "schema-utils": "^3.0.0" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "file-loader": "*", - "webpack": "^4.0.0 || ^5.0.0" - }, - "peerDependenciesMeta": { - "file-loader": { - "optional": true - } - } - }, "node_modules/url-parse": { "version": "1.5.10", "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",