Merge pull request #160 from remarkablemark/refactor/parser-types

refactor: improve parser types

Author: remarkablemark

.eslintrc.json

@@ -6,6 +6,7 @@
     "node": true
   },
   "extends": "eslint:recommended",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module"

index.d.ts

@@ -5,19 +5,27 @@ import domToReact from './lib/dom-to-react';
 import htmlToDOM from 'html-dom-parser';
 
 export interface HTMLReactParserOptions {
-  // TODO: Replace `object` by type for objects like `{ type: 'h1', props: { children: 'Heading' } }`
   replace?: (
     domNode: DomElement
   ) => JSX.Element | object | void | undefined | null | false;
-  library?: object;
+  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;
+  };
 }
 
 /**
  * Converts HTML string to JSX element(s).
  *
- * @param  html    - The HTML string to parse to JSX element(s).
- * @param  options - The parser options.
- * @return         - Single or array of JSX elements.
+ * @param  html    - HTML string to parse to JSX element(s).
+ * @param  options - Parser options.
+ * @return         - JSX element(s).
  */
 declare function HTMLReactParser(
   html: string,

index.js

@@ -16,6 +16,9 @@ function HTMLReactParser(html, options) {
   if (typeof html !== 'string') {
     throw new TypeError('First argument must be a string');
   }
+  if (html === '') {
+    return [];
+  }
   return domToReact(htmlToDOM(html, domParserOptions), options);
 }
 

lib/dom-to-react.d.ts

@@ -6,9 +6,9 @@ import { DomElement } from 'domhandler';
 /**
  * Converts DOM nodes to JSX element(s).
  *
- * @param nodes - An array of DomNodes to convert to JSX element(s).
- * @param options - Options to use when converting to JSX.
- * @returns Single or array of JSX elements.
+ * @param nodes   - DOM nodes.
+ * @param options - Parser options.
+ * @returns       - JSX element(s).
  */
 export default function domToReact(
   nodes: DomElement[],

package.json

@@ -43,6 +43,7 @@
     "@rollup/plugin-commonjs": "^12.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@types/react": "^16.9.35",
+    "@typescript-eslint/parser": "^3.1.0",
     "benchmark": "^2.1.4",
     "dtslint": "^3.6.10",
     "eslint": "^7.1.0",

test/attributes-to-props.js

@@ -2,7 +2,7 @@ const assert = require('assert');
 const attributesToProps = require('../lib/attributes-to-props');
 const utilities = require('../lib/utilities');
 
-describe('attributes-to-props', () => {
+describe('attributes to props', () => {
   describe('HTML', () => {
     it('converts attributes to React props', () => {
       assert.deepEqual(

test/dom-to-react.js

@@ -5,7 +5,7 @@ const domToReact = require('../lib/dom-to-react');
 const { data, render } = require('./helpers/');
 const utilities = require('../lib/utilities');
 
-describe('dom-to-react', () => {
+describe('DOM to React', () => {
   it('converts single DOM node to React', () => {
     const html = data.html.single;
     const reactElement = domToReact(htmlToDOM(html));

test/html-to-react.js

@@ -3,7 +3,7 @@ const React = require('react');
 const parse = require('..');
 const { data, render } = require('./helpers/');
 
-describe('html-to-react', () => {
+describe('HTML to React', () => {
   describe('exports', () => {
     it('has default ES Module', () => {
       assert.strictEqual(parse.default, parse);
@@ -13,7 +13,7 @@ describe('html-to-react', () => {
       assert.strictEqual(parse.domToReact, require('../lib/dom-to-react'));
     });
 
-    it('contains htmlToDOM', () => {
+    it('has htmlToDOM', () => {
       assert.strictEqual(parse.htmlToDOM, require('html-dom-parser'));
     });
   });
@@ -27,6 +27,10 @@ describe('html-to-react', () => {
       });
     });
 
+    it('converts empty string to empty array', () => {
+      assert.deepEqual(parse(''), []);
+    });
+
     it('returns string if it cannot be parsed as HTML', () => {
       assert.strictEqual(parse('foo'), 'foo');
     });

test/types/index.test.tsx

@@ -1,43 +1,67 @@
-import parse, { HTMLReactParserOptions, domToReact, htmlToDOM } from 'html-react-parser';
+import parse, {
+  HTMLReactParserOptions,
+  domToReact,
+  htmlToDOM
+} from 'html-react-parser';
 import * as React from 'react';
 
-/* $ExpectType ReactElement | ReactElement[] */
-parse('<div>text</div>');
+// $ExpectError
+parse();
 
-// `options.replace`
+// $ExpectType Element | Element[]
+parse('');
 
-// Return React.createElement from `replace`
-parse('<p id="replace">text</p>', {
+// $ExpectType Element | Element[]
+parse('string');
+
+// $ExpectType Element | Element[]
+parse('<p>text</p>');
+
+// $ExpectType Element | Element[]
+parse('<li>1</li><li>2</li>');
+
+// $ExpectType Element | Element[]
+parse('<br id="replace">', {
   replace: domNode => {
     if (domNode.attribs && domNode.attribs.id === 'replace') {
-      return React.createElement('span', {}, 'replaced');
+      return <span>replaced</span>;
     }
   }
 });
 
-// Return ReactElement
-const options: HTMLReactParserOptions = {
+// $ExpectType Element | Element[]
+parse('<br id="remove">', {
   replace({ attribs }) {
-    return attribs && attribs.id === 'remove' && <React.Fragment />;
+    return attribs && attribs.id === 'remove' && <></>;
   }
-};
+});
 
-parse('<p><br id="remove"></p>', options);
+let options: HTMLReactParserOptions;
 
-// Return domhandler node
-parse('<a id="header" href="#">Heading</a>', {
+options = {
   replace: node => {
     if (node.attribs && node.attribs.id === 'header') {
-      return {
-        type: 'h1',
-        props: { children: 'Heading' }
-      };
+      return;
     }
   }
+};
+
+// $ExpectType Element | Element[]
+parse('<a id="header" href="#">Heading</a>', options);
+
+// $ExpectType Element | Element[]
+parse('<hr>', {
+  library: {
+    cloneElement: (element, props, children) =>
+      React.cloneElement(element, props, children),
+    createElement: (type, props, children) =>
+      React.createElement(type, props, children),
+    isValidElement: element => React.isValidElement(element)
+  }
 });
 
 // $ExpectType DomElement[]
-const dom = htmlToDOM('<div>text</div>');
+const domNodes = htmlToDOM('<div>text</div>');
 
-/* $ExpectType ReactElement | ReactElement[] */
-domToReact(dom);
+// $ExpectType Element | Element[]
+domToReact(domNodes);

test/types/lib/dom-to-react.test.tsx

@@ -1,39 +1,40 @@
+import { DomElement } 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 ReactElement | ReactElement[] */
-domToReact(htmlToDOM('<div>text</div>'));
+// $ExpectType DomElement[]
+htmlToDOM('<div>text</div>');
 
-// `options.replace`
+// $ExpectType Element | Element[]
+domToReact(htmlToDOM('<div>text</div>'));
 
-// Return React.createElement from `replace`
+// $ExpectType Element | Element[]
 domToReact(htmlToDOM('<p id="replace">text</p>'), {
   replace: domNode => {
     if (domNode.attribs && domNode.attribs.id === 'replace') {
-      return React.createElement('span', {}, 'replaced');
+      return <span>replaced</span>;
     }
   }
 });
 
-// Return ReactElement
-const options: HTMLReactParserOptions = {
+let options: HTMLReactParserOptions;
+
+options = {
   replace({ attribs }) {
-    return attribs && attribs.id === 'remove' && <React.Fragment />;
+    return attribs && attribs.id === 'remove' && <></>;
   }
 };
 
+// $ExpectType Element | Element[]
 domToReact(htmlToDOM('<p><br id="remove"></p>'), options);
 
-// Return domhandler node
+// $ExpectType Element | Element[]
 domToReact(htmlToDOM('<a id="header" href="#">Heading</a>'), {
   replace: node => {
     if (node.attribs && node.attribs.id === 'header') {
-      return {
-        type: 'h1',
-        props: { children: 'Heading' }
-      };
+      return;
     }
   }
 });