Add ability to pass in a custom parser (for server-side-rendering).

README.md

@@ -92,6 +92,15 @@ Subsequent `render()`s diff against that DOM just like a normal JSX rendering fl
 > render(<Markup markup={markup} allow-scripts />, document.body);
 > ```
 
+`parser` – With this property you can pass in a custom parser, such as `dom-parser`. This enables you to do server-side-rendering.
+
+> ##### Example
+>
+> ```js
+> const parser = typeof document==='undefined' && require('dom-parser');
+> render(<Markup parser={parser} markup="<em>hello!</em><h1>asdflkj</h1>" />);
+> ```
+
 ---
 
 

package.json

@@ -73,6 +73,7 @@
  "sinon": "^1.17.4",
  "sinon-chai": "^2.8.0",
  "uglify-js": "^2.6.2",
- "webpack": "^1.13.1"
+ "webpack": "^1.13.1",
+ "dom-parser": "^0.1.5"
  }
 }

src/index.js

@@ -25,7 +25,7 @@ export default class Markup extends Component {
  }
  }
 
- render({ wrap=true, type, markup, components, reviver, onError, 'allow-scripts':allowScripts, 'allow-events':allowEvents, trim, ...props }) {
+ render({ wrap=true, type, markup, components, reviver, onError, 'allow-scripts':allowScripts, 'allow-events':allowEvents, trim, parser=null, ...props }) {
  let h = reviver || this.reviver || this.constructor.prototype.reviver || customReviver || defaultReviver,
  vdom;
 
@@ -34,7 +34,8 @@ export default class Markup extends Component {
  let options = {
  allowScripts,
  allowEvents,
- trim
+ trim,
+ parser
  };
 
  try {

src/markup-to-vdom.js

@@ -10,7 +10,7 @@ const EMPTY_OBJ = {};
 * @param {Object} [map] Optional map of custom element names to Components or variant element names.
  */
 export default function markupToVdom(markup, type, reviver, map, options) {
- let dom = parseMarkup(markup, type);
+ let dom = parseMarkup(markup, type, options.parser);
 
  if (dom && dom.error) {
  throw new Error(dom.error);

src/parse-markup.js

@@ -3,7 +3,7 @@ let parserDoc;
 /** Parse markup into a DOM using the given mimetype.
  * @param {String} markup
  */
-export default function parseMarkup(markup, type) {
+export default function parseMarkup(markup, type, customParser=null) {
  let doc,
  mime = type==='html' ? 'text/html' : 'application/xml',
  parserError, wrappedMarkup, tag;
@@ -20,7 +20,8 @@ export default function parseMarkup(markup, type) {
 
  // if available (browser support varies), using DOMPaser in HTML mode is much faster, safer and cleaner than injecting HTML into an iframe.
  try {
- doc = new DOMParser().parseFromString(wrappedMarkup, mime);
+ const parser = customParser ? customParser : new DOMParser();
+ doc = parser.parseFromString(wrappedMarkup, mime);
  } catch (err) {
  parserError = err;
  }

test/index.js

@@ -4,6 +4,7 @@ import sinonChai from 'sinon-chai';
 chai.use(assertJsx);
 chai.use(sinonChai);
 import Markup from 'src';
+import DomParser from 'dom-parser';
 
 /*eslint-env browser,mocha*/
 /*global sinon,expect,chai*/
@@ -325,4 +326,10 @@ describe('Markup', () => {
  </div>
  );
  });
+
+ it('should render when using a custom parser', () => {
+ let markup = `<em>hello!</em><h1>asdflkj</h1>`;
+ render(<Markup parser={new DomParser()} markup={markup} />, scratch);
+ expect(scratch.firstChild.innerHTML).to.equal(markup);
+ });
 });