Merge pull request #129 from davidbailey00/support-preact

Add support for Preact

Author: remarkablemark

README.md

@@ -194,6 +194,36 @@ parse('<p><br id="remove"></p>', {
 });
 ```
 
+### library
+
+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: require('preact')
+});
+```
+
+Or, using a custom library:
+
+```js
+parse('<br>', {
+  library: {
+    cloneElement: () => {
+      /* ... */
+    },
+    createElement: () => {
+      /* ... */
+    },
+    isValidElement: () => {
+      /* ... */
+    }
+  }
+});
+```
+
 ## FAQ
 
 #### Is this library XSS safe?

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,11 +1,6 @@
-var React = require('react');
 var attributesToProps = require('./attributes-to-props');
 var utilities = require('./utilities');
 
-var cloneElement = React.cloneElement;
-var createElement = React.createElement;
-var isValidElement = React.isValidElement;
-
 /**
  * Converts DOM nodes to React elements.
  *
@@ -16,6 +11,12 @@ var isValidElement = React.isValidElement;
  */
 function domToReact(nodes, options) {
   options = options || {};
+
+  var React = options.library || require('react');
+  var cloneElement = React.cloneElement;
+  var createElement = React.createElement;
+  var isValidElement = React.isValidElement;
+
   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",

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('');