html-react-parser 4.2.10 → 5.0.0

package/lib/utilities.d.ts

@@ -0,0 +1,42 @@
+import type { Element } from 'html-dom-parser';
+import type { Props } from './attributes-to-props';
+/**
+ * Check if a tag is a custom component.
+ *
+ * @see {@link https://github.com/facebook/react/blob/v16.6.3/packages/react-dom/src/shared/isCustomComponent.js}
+ *
+ * @param tagName - Tag name.
+ * @param props - Props passed to the element.
+ * @returns - Whether the tag is custom component.
+ */
+export declare function isCustomComponent(tagName: string, props?: Record<string, any>): boolean;
+/**
+ * Sets style prop.
+ *
+ * @param style - Inline style.
+ * @param props - Props object.
+ */
+export declare function setStyleProp(style: string, props: Props): void;
+/**
+ * @see https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
+ */
+export declare const PRESERVE_CUSTOM_ATTRIBUTES: boolean;
+/**
+ * @see https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
+ */
+export declare const ELEMENTS_WITH_NO_TEXT_CHILDREN: Set<string>;
+/**
+ * Checks if the given node can contain text nodes
+ *
+ * @param node - Element node.
+ * @returns - Whether the node can contain text nodes.
+ */
+export declare const canTextBeChildOfNode: (node: Element) => boolean;
+/**
+ * Returns the first argument as is.
+ *
+ * @param arg - The argument to be returned.
+ * @returns - The input argument `arg`.
+ */
+export declare const returnFirstArg: (arg: any) => any;
+//# sourceMappingURL=utilities.d.ts.map

package/lib/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAanD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC1B,OAAO,CAcT;AAMD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAe9D;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B,SAAsC,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,8BAA8B,aAUzC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,SAAU,OAAO,YACF,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,QAAS,GAAG,QAAQ,CAAC"}

package/lib/utilities.js

@@ -1,105 +1,103 @@
-var React = require('react');
-var styleToJS = require('style-to-js').default;
-
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.returnFirstArg = exports.canTextBeChildOfNode = exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = exports.PRESERVE_CUSTOM_ATTRIBUTES = exports.setStyleProp = exports.isCustomComponent = void 0;
+var react_1 = require("react");
+var style_to_js_1 = __importDefault(require("style-to-js"));
 var RESERVED_SVG_MATHML_ELEMENTS = new Set([
-  'annotation-xml',
-  'color-profile',
-  'font-face',
-  'font-face-src',
-  'font-face-uri',
-  'font-face-format',
-  'font-face-name',
-  'missing-glyph'
+    'annotation-xml',
+    'color-profile',
+    'font-face',
+    'font-face-src',
+    'font-face-uri',
+    'font-face-format',
+    'font-face-name',
+    'missing-glyph',
 ]);
-
 /**
- * Check if a given tag is a custom component.
+ * Check if a tag is a custom component.
  *
  * @see {@link https://github.com/facebook/react/blob/v16.6.3/packages/react-dom/src/shared/isCustomComponent.js}
  *
- * @param {string} tagName - The name of the html tag.
- * @param {object} props - The props being passed to the element.
- * @returns {boolean} - Whether tag is custom component.
+ * @param tagName - Tag name.
+ * @param props - Props passed to the element.
+ * @returns - Whether the tag is custom component.
  */
 function isCustomComponent(tagName, props) {
-  if (tagName.indexOf('-') === -1) {
-    return props && typeof props.is === 'string';
-  }
-  // These are reserved SVG and MathML elements.
-  // We don't mind this whitelist too much because we expect it to never grow.
-  // The alternative is to track the namespace in a few places which is convoluted.
-  // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
-  if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
-    return false;
-  }
-  return true;
+    if (tagName.indexOf('-') === -1) {
+        return Boolean(props && typeof props.is === 'string');
+    }
+    // These are reserved SVG and MathML elements.
+    // We don't mind this whitelist too much because we expect it to never grow.
+    // The alternative is to track the namespace in a few places which is convoluted.
+    // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
+    if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
+        return false;
+    }
+    return true;
 }
-
-// styleToJSOptions
-var STYLE_TO_JS_OPTIONS = { reactCompat: true };
-
+exports.isCustomComponent = isCustomComponent;
+var styleOptions = {
+    reactCompat: true,
+};
 /**
  * Sets style prop.
  *
- * @param {null|undefined|string} style
- * @param {object} props
+ * @param style - Inline style.
+ * @param props - Props object.
  */
 function setStyleProp(style, props) {
-  if (style === null || style === undefined) {
-    return;
-  }
-  try {
-    props.style = styleToJS(style, STYLE_TO_JS_OPTIONS);
-  } catch (err) {
-    props.style = {};
-  }
+    if (typeof style !== 'string') {
+        return;
+    }
+    if (!style.trim()) {
+        props.style = {};
+        return;
+    }
+    try {
+        props.style = (0, style_to_js_1.default)(style, styleOptions);
+    }
+    catch (error) {
+        props.style = {};
+    }
 }
-
+exports.setStyleProp = setStyleProp;
+/**
+ * @see https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
+ */
+exports.PRESERVE_CUSTOM_ATTRIBUTES = Number(react_1.version.split('.')[0]) >= 16;
 /**
- * @constant {boolean}
- * @see {@link https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html}
+ * @see https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
  */
-var PRESERVE_CUSTOM_ATTRIBUTES = React.version.split('.')[0] >= 16;
-
-// Taken from
-// https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
-var ELEMENTS_WITH_NO_TEXT_CHILDREN = new Set([
-  'tr',
-  'tbody',
-  'thead',
-  'tfoot',
-  'colgroup',
-  'table',
-  'head',
-  'html',
-  'frameset'
+exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = new Set([
+    'tr',
+    'tbody',
+    'thead',
+    'tfoot',
+    'colgroup',
+    'table',
+    'head',
+    'html',
+    'frameset',
 ]);
-
 /**
  * Checks if the given node can contain text nodes
  *
- * @param {DomElement} node - Node.
- * @returns - Whether node can contain text nodes.
+ * @param node - Element node.
+ * @returns - Whether the node can contain text nodes.
  */
-function canTextBeChildOfNode(node) {
-  return !ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node.name);
-}
-
+var canTextBeChildOfNode = function (node) {
+    return !exports.ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node.name);
+};
+exports.canTextBeChildOfNode = canTextBeChildOfNode;
 /**
  * Returns the first argument as is.
  *
- * @param {any} arg - The argument to be returned.
- * @returns {any} The input argument `arg`.
+ * @param arg - The argument to be returned.
+ * @returns - The input argument `arg`.
  */
-function returnFirstArg(arg) {
-  return arg;
-}
-
-module.exports = {
-  PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
-  ELEMENTS_WITH_NO_TEXT_CHILDREN: ELEMENTS_WITH_NO_TEXT_CHILDREN,
-  isCustomComponent: isCustomComponent,
-  setStyleProp: setStyleProp,
-  canTextBeChildOfNode: canTextBeChildOfNode,
-  returnFirstArg: returnFirstArg
-};
+var returnFirstArg = function (arg) { return arg; };
+exports.returnFirstArg = returnFirstArg;
+//# sourceMappingURL=utilities.js.map

package/lib/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":";;;;;;AAAA,+BAAgC;AAChC,4DAAoC;AAKpC,IAAM,4BAA4B,GAAG,IAAI,GAAG,CAAC;IAC3C,gBAAgB;IAChB,eAAe;IACf,WAAW;IACX,eAAe;IACf,eAAe;IACf,kBAAkB;IAClB,gBAAgB;IAChB,eAAe;CAChB,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,SAAgB,iBAAiB,CAC/B,OAAe,EACf,KAA2B;IAE3B,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE;QAC/B,OAAO,OAAO,CAAC,KAAK,IAAI,OAAO,KAAK,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;KACvD;IAED,8CAA8C;IAC9C,4EAA4E;IAC5E,iFAAiF;IACjF,iFAAiF;IACjF,IAAI,4BAA4B,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;QAC7C,OAAO,KAAK,CAAC;KACd;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAjBD,8CAiBC;AAED,IAAM,YAAY,GAAG;IACnB,WAAW,EAAE,IAAI;CACT,CAAC;AAEX;;;;;GAKG;AACH,SAAgB,YAAY,CAAC,KAAa,EAAE,KAAY;IACtD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO;KACR;IAED,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE;QACjB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACjB,OAAO;KACR;IAED,IAAI;QACF,KAAK,CAAC,KAAK,GAAG,IAAA,qBAAS,EAAC,KAAK,EAAE,YAAY,CAAC,CAAC;KAC9C;IAAC,OAAO,KAAK,EAAE;QACd,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;KAClB;AACH,CAAC;AAfD,oCAeC;AAED;;GAEG;AACU,QAAA,0BAA0B,GAAG,MAAM,CAAC,eAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AAE9E;;GAEG;AACU,QAAA,8BAA8B,GAAG,IAAI,GAAG,CAAC;IACpD,IAAI;IACJ,OAAO;IACP,OAAO;IACP,OAAO;IACP,UAAU;IACV,OAAO;IACP,MAAM;IACN,MAAM;IACN,UAAU;CACX,CAAC,CAAC;AAEH;;;;;GAKG;AACI,IAAM,oBAAoB,GAAG,UAAC,IAAa;IAChD,OAAA,CAAC,sCAA8B,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;AAA9C,CAA8C,CAAC;AADpC,QAAA,oBAAoB,wBACgB;AAEjD;;;;;GAKG;AACI,IAAM,cAAc,GAAG,UAAC,GAAQ,IAAK,OAAA,GAAG,EAAH,CAAG,CAAC;AAAnC,QAAA,cAAc,kBAAqB"}

package/package.json

@@ -1,37 +1,40 @@
 {
   "name": "html-react-parser",
-  "version": "4.2.10",
+  "version": "5.0.0",
   "description": "HTML to React parser.",
   "author": "Mark <mark@remarkablemark.org>",
-  "main": "index.js",
-  "module": "index.mjs",
+  "main": "./lib/index.js",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "import": "./index.mjs",
-      "require": "./index.js"
+      "types": "./lib/index.d.ts",
+      "import": "./esm/index.mjs",
+      "require": "./lib/index.js"
     },
     "./lib/*": {
       "types": "./lib/*.d.ts",
+      "import": "./esm/*.mjs",
       "default": "./lib/*.js"
-    },
-    "./package.json": "./package.json"
+    }
   },
   "scripts": {
-    "benchmark": "node benchmark",
-    "build": "rollup --config --failAfterWarnings",
-    "clean": "rimraf dist",
+    "benchmark": "ts-node benchmark",
+    "build": "npm run build:cjs && npm run build:umd",
+    "build:cjs": "tsc --project tsconfig.build.json",
+    "build:umd": "rollup --config --failAfterWarnings",
+    "clean": "rm -rf coverage lib dist",
     "lint": "eslint --ignore-path .gitignore --ignore-pattern /examples/ .",
-    "lint:dts": "dtslint .",
     "lint:fix": "npm run lint -- --fix",
+    "lint:tsc": "tsc --noEmit",
     "_postinstall": "husky install",
     "postpublish": "pinst --enable",
-    "prepublishOnly": "pinst --disable && npm run lint && npm run lint:dts && npm run test:ci && npm run clean && npm run build",
+    "prepublishOnly": "pinst --disable && npm run lint && npm run test:ci && npm run clean && npm run build",
     "size-limit": "size-limit",
-    "test": "jest --coverage --testPathIgnorePatterns test/integration/",
-    "test:ci": "npm test -- --ci --colors",
-    "test:esm": "node --test test/esm",
-    "test:integration": "npm run build && jest --env=jsdom test/integration/",
+    "test": "jest --testPathIgnorePatterns test/integration",
+    "test:ci": "CI=true npm test -- --ci --colors",
+    "test:esm": "npm run build:cjs && node --test test/esm",
+    "test:integration": "npm run build && jest --coverage=false --env=jsdom test/integration",
     "test:watch": "npm test -- --watch"
   },
   "repository": {
@@ -57,12 +60,15 @@
   "devDependencies": {
     "@commitlint/cli": "18.2.0",
     "@commitlint/config-conventional": "18.1.0",
-    "@definitelytyped/dtslint": "0.0.182",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "11.1.5",
     "@size-limit/preset-big-lib": "10.0.1",
+    "@types/benchmark": "2.1.4",
+    "@types/jest": "29.5.6",
     "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "@typescript-eslint/eslint-plugin": "6.9.0",
     "@typescript-eslint/parser": "6.9.0",
     "benchmark": "2.1.4",
@@ -76,9 +82,9 @@
     "preact": "10.18.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rimraf": "5.0.5",
     "rollup": "4.1.4",
     "size-limit": "10.0.1",
+    "ts-jest": "29.1.1",
     "typescript": "5.2.2"
   },
   "peerDependencies": {
@@ -86,9 +92,9 @@
   },
   "files": [
     "/dist",
+    "/esm",
     "/lib",
-    "index.d.ts",
-    "index.mjs"
+    "/src"
   ],
   "collective": {
     "type": "opencollective",

package/src/attributes-to-props.ts

@@ -0,0 +1,108 @@
+import {
+  BOOLEAN,
+  OVERLOADED_BOOLEAN,
+  getPropertyInfo,
+  isCustomAttribute,
+  possibleStandardNames,
+} from 'react-property';
+import { PRESERVE_CUSTOM_ATTRIBUTES, setStyleProp } from './utilities';
+
+// https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components
+// https://developer.mozilla.org/docs/Web/HTML/Attributes
+const UNCONTROLLED_COMPONENT_ATTRIBUTES = ['checked', 'value'];
+const UNCONTROLLED_COMPONENT_NAMES = ['input', 'select', 'textarea'];
+
+const valueOnlyInputs = {
+  reset: true,
+  submit: true,
+} as const;
+
+export type Attributes = Record<string, string>;
+
+export type Props = Record<string, string | boolean> & {
+  dangerouslySetInnerHTML?: {
+    __html: string;
+  };
+  key?: string | number;
+  style?: Record<string, string>;
+};
+
+/**
+ * Converts HTML/SVG DOM attributes to React props.
+ *
+ * @param attributes - HTML/SVG DOM attributes.
+ * @param nodeName - DOM node name.
+ * @returns - React props.
+ */
+export default function attributesToProps(
+  attributes: Attributes = {},
+  nodeName?: string,
+): Props {
+  const props: Props = {};
+
+  const isInputValueOnly = Boolean(
+    attributes.type &&
+      valueOnlyInputs[attributes.type as keyof typeof valueOnlyInputs],
+  );
+
+  for (const attributeName in attributes) {
+    const attributeValue = attributes[attributeName];
+
+    // ARIA (aria-*) or custom data (data-*) attribute
+    if (isCustomAttribute(attributeName)) {
+      props[attributeName] = attributeValue;
+      continue;
+    }
+
+    // convert HTML/SVG attribute to React prop
+    const attributeNameLowerCased = attributeName.toLowerCase();
+    let propName = getPropName(attributeNameLowerCased);
+
+    if (propName) {
+      const propertyInfo = getPropertyInfo(propName);
+
+      // convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
+      if (
+        UNCONTROLLED_COMPONENT_ATTRIBUTES.indexOf(propName) !== -1 &&
+        UNCONTROLLED_COMPONENT_NAMES.indexOf(nodeName!) !== -1 &&
+        !isInputValueOnly
+      ) {
+        propName = getPropName('default' + attributeNameLowerCased);
+      }
+
+      props[propName] = attributeValue;
+
+      switch (propertyInfo && propertyInfo.type) {
+        case BOOLEAN:
+          props[propName] = true;
+          break;
+        case OVERLOADED_BOOLEAN:
+          if (attributeValue === '') {
+            props[propName] = true;
+          }
+          break;
+      }
+      continue;
+    }
+
+    // preserve custom attribute if React >=16
+    if (PRESERVE_CUSTOM_ATTRIBUTES) {
+      props[attributeName] = attributeValue;
+    }
+  }
+
+  // transform inline style to object
+  setStyleProp(attributes.style, props);
+
+  return props;
+}
+
+/**
+ * Gets prop name from lowercased attribute name.
+ *
+ * @param attributeName - Lowercased attribute name.
+ * @returns - Prop name.
+ */
+function getPropName(attributeName: string): string {
+  return possibleStandardNames[attributeName];
+}

package/src/dom-to-react.ts

@@ -0,0 +1,156 @@
+import { cloneElement, createElement, isValidElement } from 'react';
+import type { Element, DOMNode, Text } from 'html-dom-parser';
+
+import attributesToProps from './attributes-to-props';
+import type { Props } from './attributes-to-props';
+import {
+  PRESERVE_CUSTOM_ATTRIBUTES,
+  canTextBeChildOfNode,
+  isCustomComponent,
+  returnFirstArg,
+  setStyleProp,
+} from './utilities';
+
+import type { HTMLReactParserOptions } from './types';
+
+const React = {
+  cloneElement,
+  createElement,
+  isValidElement,
+} as const;
+
+/**
+ * Converts DOM nodes to JSX element(s).
+ *
+ * @param nodes - DOM nodes.
+ * @param options - Options.
+ * @returns - String or JSX element(s).
+ */
+export default function domToReact(
+  nodes: DOMNode[],
+  options?: HTMLReactParserOptions,
+): string | JSX.Element | JSX.Element[] {
+  const reactElements = [];
+
+  const hasReplace = typeof options?.replace === 'function';
+  const transform = options?.transform || returnFirstArg;
+  const { cloneElement, createElement, isValidElement } =
+    options?.library || React;
+
+  let index = 0;
+  const nodesLength = nodes.length;
+
+  for (; index < nodesLength; index++) {
+    const node = nodes[index];
+
+    // replace with custom React element (if present)
+    if (hasReplace) {
+      let replaceElement = options.replace!(node) as JSX.Element;
+
+      if (isValidElement(replaceElement)) {
+        // set "key" prop for sibling elements
+        // https://react.dev/learn/rendering-lists#rules-of-keys
+        if (nodesLength > 1) {
+          replaceElement = cloneElement(replaceElement, {
+            key: replaceElement.key || index,
+          });
+        }
+
+        reactElements.push(transform(replaceElement, node, index));
+        continue;
+      }
+    }
+
+    if (node.type === 'text') {
+      const isWhitespace = !node.data.trim().length;
+
+      // We have a whitespace node that can't be nested in its parent
+      // so skip it
+      if (
+        isWhitespace &&
+        node.parent &&
+        !canTextBeChildOfNode(node.parent as Element)
+      ) {
+        continue;
+      }
+
+      // Trim is enabled and we have a whitespace node
+      // so skip it
+      if (options?.trim && isWhitespace) {
+        continue;
+      }
+
+      // We have a text node that's not whitespace and it can be nested
+      // in its parent so add it to the results
+      reactElements.push(transform(node.data, node, index));
+      continue;
+    }
+
+    const element = node as Element;
+    let props: Props = {};
+
+    if (skipAttributesToProps(element)) {
+      setStyleProp(element.attribs.style, element.attribs);
+      props = element.attribs;
+    } else if (element.attribs) {
+      props = attributesToProps(element.attribs, element.name);
+    }
+
+    let children = null;
+
+    switch (node.type) {
+      case 'script':
+      case 'style':
+        // prevent text in <script> or <style> from being escaped
+        // https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html
+        if (node.children[0]) {
+          props.dangerouslySetInnerHTML = {
+            __html: (node.children[0] as Text).data,
+          };
+        }
+        break;
+
+      case 'tag':
+        // setting textarea value in children is an antipattern in React
+        // https://react.dev/reference/react-dom/components/textarea#caveats
+        if (node.name === 'textarea' && node.children[0]) {
+          props.defaultValue = (node.children[0] as Text).data;
+        } else if (node.children && node.children.length) {
+          // continue recursion of creating React elements (if applicable)
+          children = domToReact(node.children as Text[], options);
+        }
+        break;
+
+      // skip all other cases (e.g., comment)
+      default:
+        continue;
+    }
+
+    // set "key" prop for sibling elements
+    // https://react.dev/learn/rendering-lists#rules-of-keys
+    if (nodesLength > 1) {
+      props.key = index;
+    }
+
+    reactElements.push(
+      transform(createElement(node.name, props, children), node, index),
+    );
+  }
+
+  return reactElements.length === 1 ? reactElements[0] : reactElements;
+}
+
+/**
+ * Determines whether DOM element attributes should be transformed to props.
+ * Web Components should not have their attributes transformed except for `style`.
+ *
+ * @param node - Element node.
+ * @returns - Whether the node attributes should be converted to props.
+ */
+function skipAttributesToProps(node: Element): boolean {
+  return (
+    PRESERVE_CUSTOM_ATTRIBUTES &&
+    node.type === 'tag' &&
+    isCustomComponent(node.name, node.attribs)
+  );
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+import htmlToDOM from 'html-dom-parser';
+
+import attributesToProps from './attributes-to-props';
+import domToReact from './dom-to-react';
+import type { HTMLReactParserOptions } from './types';
+
+export { Comment, Element, ProcessingInstruction, Text } from 'domhandler';
+export type { DOMNode } from 'html-dom-parser';
+
+export { HTMLReactParserOptions, attributesToProps, domToReact, htmlToDOM };
+
+const domParserOptions = { lowerCaseAttributeNames: false } as const;
+
+/**
+ * Converts HTML string to React elements.
+ *
+ * @param html - HTML string.
+ * @param options - Parser options.
+ * @returns - React element(s), empty array, or string.
+ */
+export default function HTMLReactParser(
+  html: string,
+  options?: HTMLReactParserOptions,
+): JSX.Element | JSX.Element[] | string {
+  if (typeof html !== 'string') {
+    throw new TypeError('First argument must be a string');
+  }
+
+  if (!html) {
+    return [];
+  }
+
+  return domToReact(
+    htmlToDOM(html, options?.htmlparser2 || domParserOptions),
+    options,
+  );
+}

package/src/types.ts

@@ -0,0 +1,29 @@
+import type { DomHandlerOptions } from 'domhandler';
+import type { DOMNode } from 'html-dom-parser';
+import type { ParserOptions } from 'htmlparser2';
+import type { ReactNode } from 'react';
+
+export interface HTMLReactParserOptions {
+  htmlparser2?: ParserOptions & DomHandlerOptions;
+
+  library?: {
+    cloneElement: (
+      element: JSX.Element,
+      props?: object,
+      ...children: any
+    ) => JSX.Element;
+    createElement: (type: any, props?: object, ...children: any) => JSX.Element;
+    isValidElement: (element: any) => boolean;
+    [key: string]: any;
+  };
+
+  replace?: (domNode: DOMNode) => JSX.Element | string | null | boolean | void;
+
+  transform?: (
+    reactNode: ReactNode,
+    domNode: DOMNode,
+    index: number,
+  ) => JSX.Element | string | null | void;
+
+  trim?: boolean;
+}