support for comma- and space-separated attributes

kmck · kmck · commit 0010a88e91fb · 2018-06-04T20:17:10.000-07:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hast-util-to-dom",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Transform HAST to DOM",
   "main": "dist/hast-util-to-dom.js",
   "module": "dist/hast-util-to-dom.mjs",
diff --git a/src/index.js b/src/index.js
@@ -124,6 +124,7 @@ function element(node, options = {}) {
       name: key,
       propertyName: key,
     };
+
     const {
       name,
       propertyName,
@@ -133,10 +134,21 @@ function element(node, options = {}) {
       overloadedBoolean,
       // numeric,
       // positiveNumeric,
-      // commaSeparated,
-      // spaceSeparated,
+      commaSeparated,
+      spaceSeparated,
     } = info;
-    const value = properties[key];
+
+    let value = properties[key];
+    if (Array.isArray(value)) {
+      if (commaSeparated) {
+        value = value.join(', ');
+      } else if (spaceSeparated) {
+        value = value.join(' ');
+      } else {
+        value = value.join(' ');
+      }
+    }
+
     try {
       if (mustUseProperty) {
         el[propertyName] = value;
diff --git a/src/index.test.js b/src/index.test.js
@@ -55,7 +55,12 @@ describe('hast-util-to-dom', () => {
       }],
     };
     const htmlActual = serializeNodeToHtmlString(toDOM(tree));
-    const htmlExpected = '<!DOCTYPE html><html><head></head><body></body></html>';
+    let htmlExpected = '<!DOCTYPE html><html><head></head><body></body></html>';
+    if (!bowser.x) {
+      if (bowser.gecko) {
+        htmlExpected = '<!DOCTYPE html>\n<html><head></head><body></body></html>';
+      }
+    }
     expect(htmlActual).toEqual(htmlExpected);
   });
 
@@ -108,6 +113,26 @@ describe('hast-util-to-dom', () => {
     expect(htmlActual).toEqual(htmlExpected);
   });
 
+  it('handles space-separated attributes correctly', () => {
+    const tree = h('div', { class: ['foo', 'bar'] });
+    const htmlActual = serializeNodeToHtmlString(toDOM(tree));
+    const htmlExpected = '<div class="foo bar"></div>';
+    expect(htmlActual).toEqual(htmlExpected);
+  });
+
+  it('handles comma-separated attributes correctly', () => {
+    const img = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=';
+    const tree = h('img', { srcSet: [`${img} 1x`, `${img} 2x`] });
+    const htmlActual = serializeNodeToHtmlString(toDOM(tree));
+    let htmlExpected = `<img srcset="${img} 1x, ${img} 2x">`;
+    if (!bowser.x) {
+      if (bowser.webkit || bowser.blink || bowser.gecko) {
+        htmlExpected = `<img srcset="${img} 1x, ${img} 2x" />`;
+      }
+    }
+    expect(htmlActual).toEqual(htmlExpected);
+  });
+
   it('creates a doctype node', () => {
     const tree = {
       type: 'doctype',
diff --git a/src/utils.js b/src/utils.js
@@ -26,14 +26,14 @@ export function serializeNodeToString(node) {
 export function serializeNodeToHtmlString(node) {
   const serialized = serializeNodeToString(node);
   // XMLSerializer puts xmlns on documentElement
+  const { documentElement: ownerDocumentElement } = node.ownerDocument || node;
+  const { namespaceURI: ownerNamespaceURI } = ownerDocumentElement || {};
   const { namespaceURI } = node.documentElement || node;
-  if (namespaceURI) {
-    const { namespaceURI: ownerNamespaceURI } = node.ownerDocument
-      ? node.ownerDocument.documentElement
-      : node.documentElement;
+  if (ownerNamespaceURI) {
     if (namespaceURI === ownerNamespaceURI) {
-      return serialized.replace(` xmlns="${namespaceURI}"`, '');
+      return serialized.replace(` xmlns="${ownerNamespaceURI}"`, '');
     }
+    return serialized.replace(new RegExp(` xmlns="${ownerNamespaceURI}"`, 'g'), '');
   }
   return serialized;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "hast-util-to-dom",`
`3`		`- "version": "1.0.2",`
	`3`	`+ "version": "1.0.3",`
`4`	`4`	`"description": "Transform HAST to DOM",`
`5`	`5`	`"main": "dist/hast-util-to-dom.js",`
`6`	`6`	`"module": "dist/hast-util-to-dom.mjs",`