html-react-parser 4.2.10 → 5.0.0

package/src/utilities.ts

@@ -0,0 +1,108 @@
+import { version } from 'react';
+import StyleToJS from 'style-to-js';
+import type { Element } from 'html-dom-parser';
+
+import type { Props } from './attributes-to-props';
+
+const 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',
+]);
+
+/**
+ * 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 function isCustomComponent(
+  tagName: string,
+  props?: Record<string, any>,
+): boolean {
+  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;
+}
+
+const styleOptions = {
+  reactCompat: true,
+} as const;
+
+/**
+ * Sets style prop.
+ *
+ * @param style - Inline style.
+ * @param props - Props object.
+ */
+export function setStyleProp(style: string, props: Props): void {
+  if (typeof style !== 'string') {
+    return;
+  }
+
+  if (!style.trim()) {
+    props.style = {};
+    return;
+  }
+
+  try {
+    props.style = StyleToJS(style, styleOptions);
+  } catch (error) {
+    props.style = {};
+  }
+}
+
+/**
+ * @see https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
+ */
+export const PRESERVE_CUSTOM_ATTRIBUTES = Number(version.split('.')[0]) >= 16;
+
+/**
+ * @see https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
+ */
+export const 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 node - Element node.
+ * @returns - Whether the node can contain text nodes.
+ */
+export const canTextBeChildOfNode = (node: Element) =>
+  !ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node.name);
+
+/**
+ * Returns the first argument as is.
+ *
+ * @param arg - The argument to be returned.
+ * @returns - The input argument `arg`.
+ */
+export const returnFirstArg = (arg: any) => arg;

package/index.d.ts

@@ -1,60 +0,0 @@
-// TypeScript Version: 5.3
-/* eslint-disable no-undef, no-unused-vars */
-
-import {
-  Comment,
-  Element,
-  Node,
-  ProcessingInstruction,
-  Text
-} from 'domhandler';
-import type { DomHandlerOptions } from 'domhandler';
-import htmlToDOM from 'html-dom-parser';
-import { ParserOptions } from 'htmlparser2';
-
-import attributesToProps from './lib/attributes-to-props';
-import domToReact from './lib/dom-to-react';
-
-export { attributesToProps, domToReact, htmlToDOM };
-export type HTMLParser2Options = ParserOptions & DomHandlerOptions;
-export { Comment, Element, ProcessingInstruction, Text };
-export type DOMNode = Comment | Element | Node | ProcessingInstruction | Text;
-
-export interface HTMLReactParserOptions {
-  htmlparser2?: HTMLParser2Options;
-
-  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 | object | void | undefined | null | false;
-
-  transform?: (
-    reactNode: JSX.Element | string,
-    domNode: DOMNode,
-    index: number
-  ) => JSX.Element | string | null;
-
-  trim?: boolean;
-}
-
-/**
- * Converts HTML string to JSX element(s).
- *
- * @param html - HTML string.
- * @param options - Parser options.
- * @returns - JSX element(s), empty array, or string.
- */
-export default function HTMLReactParser(
-  html: string,
-  options?: HTMLReactParserOptions
-): ReturnType<typeof domToReact>;

package/index.js

@@ -1,50 +0,0 @@
-var domhandler = require('domhandler');
-var htmlToDOM = require('html-dom-parser').default;
-
-var attributesToProps = require('./lib/attributes-to-props');
-var domToReact = require('./lib/dom-to-react');
-
-// support backwards compatibility for ES Module
-htmlToDOM =
-  /* istanbul ignore next */
-  typeof htmlToDOM.default === 'function' ? htmlToDOM.default : htmlToDOM;
-
-var domParserOptions = { lowerCaseAttributeNames: false };
-
-/**
- * Converts HTML string to React elements.
- *
- * @param {string} html - HTML string.
- * @param {object} [options] - Parser options.
- * @param {object} [options.htmlparser2] - htmlparser2 options.
- * @param {object} [options.library] - Library for React, Preact, etc.
- * @param {Function} [options.replace] - Replace method.
- * @returns {JSX.Element|JSX.Element[]|string} - React element(s), empty array, or string.
- */
-function HTMLReactParser(html, options) {
-  if (typeof html !== 'string') {
-    throw new TypeError('First argument must be a string');
-  }
-  if (html === '') {
-    return [];
-  }
-  options = options || {};
-  return domToReact(
-    htmlToDOM(html, options.htmlparser2 || domParserOptions),
-    options
-  );
-}
-
-HTMLReactParser.domToReact = domToReact;
-HTMLReactParser.htmlToDOM = htmlToDOM;
-HTMLReactParser.attributesToProps = attributesToProps;
-
-// domhandler
-HTMLReactParser.Comment = domhandler.Comment;
-HTMLReactParser.Element = domhandler.Element;
-HTMLReactParser.ProcessingInstruction = domhandler.ProcessingInstruction;
-HTMLReactParser.Text = domhandler.Text;
-
-// support CommonJS and ES Modules
-module.exports = HTMLReactParser;
-HTMLReactParser.default = HTMLReactParser;

package/index.mjs

@@ -1,13 +0,0 @@
-import HTMLReactParser from './index.js';
-
-export var domToReact = HTMLReactParser.domToReact;
-export var htmlToDOM = HTMLReactParser.htmlToDOM;
-export var attributesToProps = HTMLReactParser.attributesToProps;
-
-// domhandler
-export var Comment = HTMLReactParser.Comment;
-export var Element = HTMLReactParser.Element;
-export var ProcessingInstruction = HTMLReactParser.ProcessingInstruction;
-export var Text = HTMLReactParser.Text;
-
-export default HTMLReactParser;