Add support for passing a document

wooorm · web-flow · commit e0b9b17634ef · 2019-05-31T08:24:26.000+02:00
Closes GH-3. Closes GH-4. Reviewed-by: Keith McKnight <keith@mcknig.ht> Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>
diff --git a/readme.md b/readme.md
@@ -80,6 +80,10 @@ Transform a [**hast**][hast] [*tree*][tree] to a DOM tree.
 
 Whether a DOM fragment should be returned (default: `false`).
 
+###### `options.document`
+
+Document interface to use (default: `global.document`).
+
 ###### `options.namespace`
 
 `namespace` to use to create [*elements*][element].
diff --git a/src/index.js b/src/index.js
@@ -20,7 +20,7 @@ function transform(node, options) {
 
 // Create a document.
 function root(node, options) {
-  const { fragment, namespace: optionsNamespace } = options;
+  const { doc, fragment, namespace: optionsNamespace } = options;
   const { children = [] } = node;
   const { length: childrenLength } = children;
 
@@ -45,43 +45,43 @@ function root(node, options) {
   let el;
 
   if (rootIsDocument) {
-    el = document.implementation.createDocument(namespace, '', null);
+    el = doc.implementation.createDocument(namespace, '', null);
   } else if (fragment) {
-    el = document.createDocumentFragment();
+    el = doc.createDocumentFragment();
   } else {
-    el = document.createElement('html');
+    el = doc.createElement('html');
   }
 
   return appendAll(el, children, Object.assign({ fragment, namespace }, options));
 }
 
 // Create a `doctype`.
-function doctype(node) {
-  return document.implementation.createDocumentType(
+function doctype(node, { doc }) {
+  return doc.implementation.createDocumentType(
     node.name || 'html',
     node.public || '',
     node.system || '',
   );
 }
 
 // Create a `text`.
-function text(node) {
-  return document.createTextNode(node.value);
+function text(node, { doc }) {
+  return doc.createTextNode(node.value);
 }
 
 // Create a `comment`.
-function comment(node) {
-  return document.createComment(node.value);
+function comment(node, { doc }) {
+  return doc.createComment(node.value);
 }
 
 // Create an `element`.
 function element(node, options) {
-  const { namespace } = options;
+  const { namespace, doc } = options;
   // TODO: use `g` in SVG space.
   const { tagName = 'div', properties = {}, children = [] } = node;
   const el = typeof namespace !== 'undefined'
-    ? document.createElementNS(namespace, tagName)
-    : document.createElement(tagName);
+    ? doc.createElementNS(namespace, tagName)
+    : doc.createElement(tagName);
 
   // Add HTML attributes.
   const props = Object.keys(properties);
@@ -146,5 +146,5 @@ function appendAll(node, children, options) {
 
 
 export default function toDOM(hast, options = {}) {
-  return transform(hast, options);
+  return transform(hast, { ...options, doc: options.document || document });
 }
diff --git a/src/index.test.js b/src/index.test.js
@@ -254,6 +254,37 @@ describe('hast-util-to-dom', () => {
     expect(actual).toEqual('<html xmlns="http://example.com"/>');
   });
 
+  it('should support a given document', () => {
+    const doc = {
+      createElementNS(namespace, tagName) {
+        const name = tagName === 'h1' ? 'h2' : tagName;
+        return document.createElementNS(namespace, name);
+      },
+      createTextNode(value) {
+        return document.createTextNode(value.toUpperCase());
+      },
+      implementation: {
+        createDocument(namespace, qualifiedName, documentType) {
+          return document.implementation.createDocument(namespace, qualifiedName, documentType);
+        },
+      },
+    };
+
+    const actual = serializeNodeToHtmlString(
+      toDOM({
+        type: 'root',
+        children: [
+          h('html', [
+            h('title', 'foo'),
+            h('h1', 'bar'),
+          ]),
+        ],
+      }, { document: doc }),
+    );
+
+    expect(actual).toEqual('<html><title>FOO</title><h2>BAR</h2></html>');
+  });
+
   describe('booleanish property', () => {
     it('handles booleanish attribute with `true` value correctly', () => {
       const actual = serializeNodeToHtmlString(toDOM(h('div', {
