refactor(dom-to-react): change how library option works

- Update README
- Add typings
- Add a new test for Preact
- Restore old peerDependencies

Author: David Bailey

README.md

@@ -196,13 +196,31 @@ parse('<p><br id="remove"></p>', {
 
 ### library
 
-The `library` option allows you to specify which component library is used to create elements (currently either React or Preact). React is used by default if this option is not specified, or if the given option is unknown.
+The `library` option allows you to specify which component library is used to create elements. React is used by default if this option is not specified.
 
 Here's an example showing how to use Preact:
 
 ```js
 parse('<br>', {
-  library: 'preact'
+  library: require('preact')
+});
+```
+
+Or, using a custom library:
+
+```js
+parse('<br>', {
+  library: {
+    cloneElement: () => {
+      /* ... */
+    },
+    createElement: () => {
+      /* ... */
+    },
+    isValidElement: () => {
+      /* ... */
+    }
+  }
 });
 ```
 

index.d.ts

@@ -8,6 +8,7 @@ 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): React.ReactElement | object | undefined | false;
+  library?: object;
 }
 
 /**

lib/dom-to-react.js

@@ -1,22 +1,6 @@
 var attributesToProps = require('./attributes-to-props');
 var utilities = require('./utilities');
 
-/**
- * Requires the appropriate component library (React or Preact).
- *
- * @param  {Object} [options] - The additional options.
- * @return {Object}
- */
-function requireReact(options) {
-  options = options || {};
-
-  if (options.library === 'preact') {
-    return require('preact');
-  }
-
-  return require('react');
-}
-
 /**
  * Converts DOM nodes to React elements.
  *
@@ -26,13 +10,13 @@ function requireReact(options) {
  * @return {ReactElement|Array}
  */
 function domToReact(nodes, options) {
-  var React = requireReact(options);
+  options = options || {};
 
+  var React = options.library || require('react');
   var cloneElement = React.cloneElement;
   var createElement = React.createElement;
   var isValidElement = React.isValidElement;
 
-  options = options || {};
   var result = [];
   var node;
   var hasReplace = typeof options.replace === 'function';

package.json

@@ -54,6 +54,7 @@
     "lint-staged": "^8.2.1",
     "mocha": "^6.1.4",
     "nyc": "^14.1.1",
+    "preact": "10.0.4",
     "prettier": "^1.18.2",
     "react": "^16",
     "react-dom": "^16",
@@ -64,9 +65,8 @@
     "rollup-plugin-uglify": "^6.0.2",
     "standard-version": "^6.0.1"
   },
-  "optionalPeerDependencies": {
-    "react": "^0.14 || ^15 || ^16",
-    "preact": "^8 || ^10"
+  "peerDependencies": {
+    "react": "^0.14 || ^15 || ^16"
   },
   "files": [
     "/dist",

test/dom-to-react.js

@@ -1,5 +1,6 @@
 const assert = require('assert');
 const React = require('react');
+const Preact = require('preact');
 const htmlToDOM = require('html-dom-parser');
 const domToReact = require('../lib/dom-to-react');
 const { data, render } = require('./helpers/');
@@ -159,6 +160,13 @@ describe('dom-to-react parser', () => {
     );
   });
 
+  it('handles using a custom component library', () => {
+    const html = data.html.single;
+    const preactElement = domToReact(htmlToDOM(html), { library: Preact });
+
+    assert.deepEqual(preactElement, Preact.createElement('p', {}, 'foo'));
+  });
+
   it('does not modify keys for replacement if it has one', () => {
     const html = [data.html.single, data.html.customElement].join('');