build(package): upgrade dependency html-dom-parser to 0.5.0

remarkablemark · remarkablemark · commit 5568ed72fb2c · 2020-12-13T19:21:23.000-05:00
BREAKING CHANGE: upgrade dependency `html-dom-parser` to 0.5.0
diff --git a/index.d.ts b/index.d.ts
@@ -1,12 +1,24 @@
-// TypeScript Version: 3.3
+// TypeScript Version: 4.1
+
+import { ParserOptions } from 'htmlparser2';
+import {
+  Comment,
+  DomHandlerOptions,
+  Element,
+  ProcessingInstruction,
+  Text
+} from 'domhandler';
+import htmlToDOM from 'html-dom-parser';
 
-import { DomElement, ParserOptions } from 'htmlparser2';
-import domToReact from './lib/dom-to-react';
 import attributesToProps from './lib/attributes-to-props';
-import htmlToDOM from 'html-dom-parser';
+import domToReact from './lib/dom-to-react';
+
+export { attributesToProps, domToReact, htmlToDOM };
+export type HTMLParser2Options = ParserOptions & DomHandlerOptions;
+export type DOMNode = Comment | Element | ProcessingInstruction | Text;
 
 export interface HTMLReactParserOptions {
-  htmlparser2?: ParserOptions;
+  htmlparser2?: HTMLParser2Options;
 
   library?: {
     cloneElement: (
@@ -20,7 +32,7 @@ export interface HTMLReactParserOptions {
   };
 
   replace?: (
-    domNode: DomElement
+    domNode: DOMNode
   ) => JSX.Element | object | void | undefined | null | false;
 
   trim?: boolean;
@@ -33,11 +45,7 @@ export interface HTMLReactParserOptions {
  * @param  options - Parser options.
  * @return         - JSX element(s), empty array, or string.
  */
-declare function HTMLReactParser(
+export default function HTMLReactParser(
   html: string,
   options?: HTMLReactParserOptions
 ): ReturnType<typeof domToReact>;
-
-export { DomElement, ParserOptions, domToReact, htmlToDOM, attributesToProps };
-
-export default HTMLReactParser;
diff --git a/lib/attributes-to-props.d.ts b/lib/attributes-to-props.d.ts
@@ -1,11 +1,12 @@
-// TypeScript Version: 3.3
+// TypeScript Version: 4.1
+
+export type Attributes = Record<string, string>;
+export type Props = Attributes;
 
 /**
  * Converts HTML/SVG DOM attributes to React props.
  *
- * @param attributes        - The HTML/SVG DOM attributes.
- * @returns                 - The React props.
+ * @param  attributes - HTML/SVG DOM attributes.
+ * @return            - React props.
  */
-export default function attributesToProps(
-  attributes: { [key: string]: string }
-): { [key: string]: string };
+export default function attributesToProps(attributes: Attributes): Props;
diff --git a/lib/dom-to-react.d.ts b/lib/dom-to-react.d.ts
@@ -1,16 +1,17 @@
-// TypeScript Version: 3.3
+// TypeScript Version: 4.1
 
-import { HTMLReactParserOptions } from '..';
-import { DomElement } from 'domhandler';
+import { DOMNode, HTMLReactParserOptions } from '..';
+
+export { DOMNode, HTMLReactParserOptions };
 
 /**
  * Converts DOM nodes to JSX element(s).
  *
- * @param nodes   - DOM nodes.
- * @param options - Parser options.
- * @returns       - JSX element(s).
+ * @param  nodes   - DOM nodes.
+ * @param  options - Parser options.
+ * @return         - JSX element(s).
  */
 export default function domToReact(
-  nodes: DomElement[],
+  nodes: DOMNode[],
   options?: HTMLReactParserOptions
-): JSX.Element | JSX.Element[];
+): string | JSX.Element | JSX.Element[];
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -5,13 +5,13 @@ var utilities = require('./utilities');
 var setStyleProp = utilities.setStyleProp;
 
 /**
- * Converts DOM nodes to React elements.
+ * Converts DOM nodes to JSX element(s).
  *
  * @param  {DomElement[]} nodes             - DOM nodes.
  * @param  {object}       [options={}]      - Options.
  * @param  {Function}     [options.replace] - Replacer.
  * @param  {object}       [options.library] - Library (React/Preact/etc.).
- * @return {string|ReactElement|ReactElement[]}
+ * @return {string|JSX.Element|JSX.Element[]}
  */
 function domToReact(nodes, options) {
   options = options || {};
diff --git a/package.json b/package.json
@@ -32,8 +32,7 @@
     "dom"
   ],
   "dependencies": {
-    "@types/htmlparser2": "3.10.2",
-    "html-dom-parser": "0.3.0",
+    "html-dom-parser": "0.5.0",
     "react-property": "1.0.1",
     "style-to-js": "1.1.0"
   },
diff --git a/test/types/index.tsx b/test/types/index.tsx
@@ -3,53 +3,54 @@ import parse, {
   domToReact,
   htmlToDOM
 } from 'html-react-parser';
+import { Element } from 'domhandler';
 import * as React from 'react';
 
 // $ExpectError
 parse();
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('');
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('string');
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('<p>text</p>');
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('<li>1</li><li>2</li>');
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('<br id="replace">', {
   replace: domNode => {
-    if (domNode.attribs && domNode.attribs.id === 'replace') {
+    if (domNode instanceof Element && domNode.attribs.id === 'replace') {
       return <span>replaced</span>;
     }
   }
 });
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('<br id="remove">', {
-  replace({ attribs }) {
-    return attribs && attribs.id === 'remove' && <></>;
+  replace: domNode => {
+    if (domNode instanceof Element && domNode.attribs.id === 'remove') {
+      return <></>;
+    }
   }
 });
 
-let options: HTMLReactParserOptions;
-
-options = {
-  replace: node => {
-    if (node.attribs && node.attribs.id === 'header') {
+const options: HTMLReactParserOptions = {
+  replace: domNode => {
+    if (domNode instanceof Element && domNode.attribs.id === 'header') {
       return;
     }
   }
 };
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('<a id="header" href="#">Heading</a>', options);
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('<hr>', {
   library: {
     cloneElement: (element, props, children) =>
@@ -60,7 +61,7 @@ parse('<hr>', {
   }
 });
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('<p/><p/>', {
   htmlparser2: {
     xmlMode: true,
@@ -72,11 +73,11 @@ parse('<p/><p/>', {
   }
 });
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 parse('\t<p>text \r</p>\n', { trim: true });
 
-// $ExpectType DomElement[]
+// $ExpectType DOMNode[]
 const domNodes = htmlToDOM('<div>text</div>');
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 domToReact(domNodes);
diff --git a/test/types/lib/dom-to-react.tsx b/test/types/lib/dom-to-react.tsx
@@ -1,43 +1,46 @@
-import { DomElement } from 'domhandler';
+import { Element } from 'domhandler';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import domToReact from 'html-react-parser/lib/dom-to-react';
 import * as React from 'react';
 import htmlToDOM from 'html-dom-parser';
 
-// $ExpectType DomElement[]
+// $ExpectType DOMNode[]
 htmlToDOM('<div>text</div>');
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
+domToReact(htmlToDOM('string'));
+
+// $ExpectType string | Element | Element[]
 domToReact(htmlToDOM('<div>text</div>'));
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 domToReact(htmlToDOM('<p id="replace">text</p>'), {
   replace: domNode => {
-    if (domNode.attribs && domNode.attribs.id === 'replace') {
+    if (domNode instanceof Element && domNode.attribs.id === 'replace') {
       return <span>replaced</span>;
     }
   }
 });
 
-let options: HTMLReactParserOptions;
-
-options = {
-  replace({ attribs }) {
-    return attribs && attribs.id === 'remove' && <></>;
+const options: HTMLReactParserOptions = {
+  replace: domNode => {
+    if (domNode instanceof Element && domNode.attribs.id === 'remove') {
+      return <></>;
+    }
   }
 };
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 domToReact(htmlToDOM('<p><br id="remove"></p>'), options);
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 domToReact(htmlToDOM('<a id="header" href="#">Heading</a>'), {
-  replace: node => {
-    if (node.attribs && node.attribs.id === 'header') {
+  replace: domNode => {
+    if (domNode instanceof Element && domNode.attribs.id === 'header') {
       return;
     }
   }
 });
 
-// $ExpectType Element | Element[]
+// $ExpectType string | Element | Element[]
 domToReact(htmlToDOM('\t<p>text \r</p>\n'), { trim: true });
