From 84ef862901f62ee48e9c286fe68fdb8b685d9189 Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 7 Feb 2024 16:09:09 +0100 Subject: [PATCH] Fix(web-react): Require `html-react-parser` as dependency * ensure that the Icon component will be working either on client and server --- packages/web-react/config/webpack.common.js | 6 ++ packages/web-react/package.json | 5 +- .../web-react/src/components/Icon/Icon.tsx | 58 +++++-------------- .../web-react/src/components/Icon/README.md | 8 +-- packages/web-react/src/utils/htmlParser.ts | 16 ----- 5 files changed, 27 insertions(+), 66 deletions(-) delete mode 100644 packages/web-react/src/utils/htmlParser.ts diff --git a/packages/web-react/config/webpack.common.js b/packages/web-react/config/webpack.common.js index 24da72746d..05dd82719e 100644 --- a/packages/web-react/config/webpack.common.js +++ b/packages/web-react/config/webpack.common.js @@ -19,6 +19,12 @@ module.exports = { amd: 'react-dom', root: 'react-dom', }, + 'html-react-parser': { + commonjs: 'html-react-parser', + commonjs2: 'html-react-parser', + amd: 'html-react-parser', + root: 'html-react-parser', + }, }, ], devtool: 'source-map', diff --git a/packages/web-react/package.json b/packages/web-react/package.json index 3b4cc7f697..78070353cb 100644 --- a/packages/web-react/package.json +++ b/packages/web-react/package.json @@ -20,7 +20,8 @@ "@floating-ui/react": "^0.26.5", "@react-hook/resize-observer": "^1.2.6", "classnames": "^2.3.1", - "react-transition-group": "^4.4.5" + "react-transition-group": "^4.4.5", + "html-react-parser": "5.0.11" }, "devDependencies": { "@babel/preset-env": "7.23.7", @@ -59,7 +60,6 @@ "eslint-plugin-react": "7.33.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-standard": "5.0.0", - "html-react-parser": "5.0.11", "jest": "29.7.0", "jest-cli": "29.7.0", "jest-environment-jsdom": "29.7.0", @@ -82,7 +82,6 @@ "@lmc-eu/spirit-design-tokens": "*", "@lmc-eu/spirit-icons": "*", "@lmc-eu/spirit-web": "*", - "html-react-parser": "^5.0.6", "react": "^17.0.2 || ^18.0.0", "react-dom": "^17.0.2 || ^18.0.0" }, diff --git a/packages/web-react/src/components/Icon/Icon.tsx b/packages/web-react/src/components/Icon/Icon.tsx index c5f0bdaa52..b17df92304 100644 --- a/packages/web-react/src/components/Icon/Icon.tsx +++ b/packages/web-react/src/components/Icon/Icon.tsx @@ -1,8 +1,7 @@ +import htmlReactParser from 'html-react-parser'; import React from 'react'; import { useIcon, useStyleProps } from '../../hooks'; import { IconProps } from '../../types'; -import { htmlParser } from '../../utils/htmlParser'; -import { NoSsr } from '../NoSsr'; const defaultProps = { ariaHidden: true, @@ -13,53 +12,26 @@ export const Icon = (props: IconProps) => { const { boxSize, name, title, ariaHidden, ...restProps } = props; let icon = useIcon(name); const { styleProps, props: otherProps } = useStyleProps(restProps); - const isHtmlParserLoaded = typeof htmlParser === 'function'; if (title) { icon = `${title}${icon}`; } - if (isHtmlParserLoaded) { - return ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore: Incompatible HTMLElement and SVGSVGElement - - {/* @ts-expect-error TS2349: This expression is not callable. Type 'never' has no call signatures. */} - {htmlParser(icon)} - - ); - } - - // @deprecated Usage of `html-react-parser` will be required in the next major version. - // @TODO: Remove this block in the next major version. - // @see { @link https://jira.almacareer.tech/browse/DS-1149 } return ( - - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore: Incompatible HTMLElement and SVGSVGElement */} - - + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore: Incompatible HTMLElement and SVGSVGElement + + {htmlReactParser(icon)} + ); }; diff --git a/packages/web-react/src/components/Icon/README.md b/packages/web-react/src/components/Icon/README.md index 5b3f1dfae4..1886d141b5 100644 --- a/packages/web-react/src/components/Icon/README.md +++ b/packages/web-react/src/components/Icon/README.md @@ -7,19 +7,19 @@ Icons are graphical metaphors or symbols that can be used to complement existing To use this component in your project you need to run the following command using [npm][npm]: ```bash -npm install -S @lmc-eu/spirit-icons html-react-parser +npm install -S @lmc-eu/spirit-icons ``` If you prefer [Yarn][yarn], use the following command instead: ```bash -yarn add @lmc-eu/spirit-icons html-react-parser +yarn add @lmc-eu/spirit-icons ``` ### 📦 Dependencies -Both packages are required as **peer dependency** to keep package size as low as possible. -So they will not be automatically installed with `@lmc-eu/spirit-web-react`. +`@lmc-eu/spirit-icons` is required as a **peer dependency** to keep package size as low as possible. +So it will not be automatically installed with `@lmc-eu/spirit-web-react`. - [`@lmc-eu/spirit-icons`][icons-package] - Spirit Icons package - [`html-react-parser`][html-react-parser-package] - HTML to React parser (avoid usage of `dangerouslySetInnerHTML` on the server side) diff --git a/packages/web-react/src/utils/htmlParser.ts b/packages/web-react/src/utils/htmlParser.ts deleted file mode 100644 index b85c6fa6f7..0000000000 --- a/packages/web-react/src/utils/htmlParser.ts +++ /dev/null @@ -1,16 +0,0 @@ -import warning from '../common/utilities/warning'; - -let parse = null; - -import('html-react-parser') - .then((htmlReactParser) => { - parse = htmlReactParser; - }) - .catch(() => - warning( - false, - '`html-react-parser` is not installed and will be required in the next major version. Please install, missing peer dependency.', - ), - ); - -export const htmlParser = typeof parse === 'function' ? parse : null;