Fix(web-react): Require html-react-parser as dependency

* ensure that the Icon component will be working either on client and server
lmc-eu · Feb 14, 2024 · 84ef862 · 84ef862
1 parent b7c145f
commit 84ef862
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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>${title}</title>${icon}`;
   }
 
-  if (isHtmlParserLoaded) {
-    return (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore: Incompatible HTMLElement and SVGSVGElement
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        width={boxSize}
-        height={boxSize}
-        aria-hidden={ariaHidden}
-        {...otherProps}
-        {...styleProps}
-        className={styleProps.className}
-      >
-        {/* @ts-expect-error TS2349: This expression is not callable. Type 'never' has no call signatures. */}
-        {htmlParser(icon)}
-      </svg>
-    );
-  }
-
-  // @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 (
-    <NoSsr>
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/* @ts-ignore: Incompatible HTMLElement and SVGSVGElement */}
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        width={boxSize}
-        height={boxSize}
-        aria-hidden={ariaHidden}
-        // @deprecated Usage of dangerouslySetInnerHTML is discouraged due to support of SSR and will be removed in the next major version.
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{ __html: icon }}
-        {...otherProps}
-        {...styleProps}
-        className={styleProps.className}
-      />
-    </NoSsr>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore: Incompatible HTMLElement and SVGSVGElement
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={boxSize}
+      height={boxSize}
+      aria-hidden={ariaHidden}
+      {...otherProps}
+      {...styleProps}
+      className={styleProps.className}
+    >
+      {htmlReactParser(icon)}
+    </svg>
   );
 };
 

diff --git 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