Fix SVG handling

wooorm · wooorm · commit bd672affe49c · 2019-12-09T19:41:08.000+01:00
diff --git a/src/__fixtures__/doctype-nameless/index.html b/src/__fixtures__/doctype-nameless/index.html
@@ -1 +1 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
diff --git a/src/__fixtures__/doctype-quirksmode-ibm/index.html b/src/__fixtures__/doctype-quirksmode-ibm/index.html
@@ -1 +1 @@
-<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"><html><head></head><body></body></html>
+<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"><html><head></head><body></body></html>
diff --git a/src/__fixtures__/doctype-quirksmode-xml/index.html b/src/__fixtures__/doctype-quirksmode-xml/index.html
@@ -1 +1 @@
-<!--?xml version="1.0"?--><html><head></head><body></body></html>
+<!--?xml version="1.0"?--><html><head></head><body></body></html>
diff --git a/src/__fixtures__/doctype/index.html b/src/__fixtures__/doctype/index.html
@@ -1 +1 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
diff --git a/src/__fixtures__/element-void-close/index.html b/src/__fixtures__/element-void-close/index.html
@@ -1,3 +1,3 @@
 <body><br />text<br />
 <img />text
-</body>
+</body>
diff --git a/src/__fixtures__/element-void/index.html b/src/__fixtures__/element-void/index.html
@@ -6,11 +6,11 @@
 
 <p>this<br />and that</p>
 
-<svg><path><circle><g><rect></rect></g></circle></path></svg>
+<svg><path><circle><g><rect/></g></circle></path></svg>
 
-<svg><path></path><circle></circle><g></g><rect></rect></svg>
+<svg><path/><circle/><g/><rect/></svg>
 
 <math><mglyph><mspace><malignmark></malignmark></mspace></mglyph></math>
 
 <math><mglyph></mglyph><mspace></mspace><malignmark></malignmark></math>
-</body>
+</body>
diff --git a/src/__fixtures__/simple/index.html b/src/__fixtures__/simple/index.html
@@ -1,2 +1,2 @@
 <!DOCTYPE html><html><head><title>Hello!</title></head><body><h1 id="world">World!<!--after-->
-</h1></body></html>
+</h1></body></html>
diff --git a/src/__fixtures__/svg-advanced/index.html b/src/__fixtures__/svg-advanced/index.html
@@ -0,0 +1 @@
+<li><svg class="icon" aria-label="Verified" viewBox="0 0 16 16" width="18" height="18" role="img"><path fill="currentcolor" fill-rule="evenodd" d="M15.67 7.066l-1.08-1.34a1.5 1.5 0 01-.309-.77l-.19-1.698a1.51 1.51 0 00-1.329-1.33l-1.699-.19c-.3-.03-.56-.159-.78-.329L8.945.33a1.504 1.504 0 00-1.878 0l-1.34 1.08a1.5 1.5 0 01-.77.31l-1.698.19c-.7.08-1.25.63-1.33 1.329l-.19 1.699c-.03.3-.159.56-.329.78L.33 7.055a1.504 1.504 0 000 1.878l1.08 1.34c.17.22.28.48.31.77l.19 1.698c.08.7.63 1.25 1.329 1.33l1.699.19c.3.03.56.159.78.329l1.339 1.08c.55.439 1.329.439 1.878 0l1.34-1.08c.22-.17.48-.28.77-.31l1.698-.19c.7-.08 1.25-.63 1.33-1.329l.19-1.699c.03-.3.159-.56.329-.78l1.08-1.339a1.504 1.504 0 000-1.878zM6.5 12.01L3 8.51l1.5-1.5 2 2 5-5L13 5.56l-6.5 6.45z"/></svg></li>
diff --git a/src/__fixtures__/svg-advanced/index.json b/src/__fixtures__/svg-advanced/index.json
@@ -0,0 +1,38 @@
+{
+  "type": "element",
+  "tagName": "li",
+  "properties": {},
+  "children": [
+    {
+      "type": "element",
+      "tagName": "svg",
+      "properties": {
+        "className": [
+          "icon"
+        ],
+        "ariaLabel": "Verified",
+        "viewBox": [
+          0,
+          0,
+          16,
+          16
+        ],
+        "width": 18,
+        "height": 18,
+        "role": "img"
+      },
+      "children": [
+        {
+          "type": "element",
+          "tagName": "path",
+          "properties": {
+            "fill": "currentcolor",
+            "fillRule": "evenodd",
+            "d": "M15.67 7.066l-1.08-1.34a1.5 1.5 0 01-.309-.77l-.19-1.698a1.51 1.51 0 00-1.329-1.33l-1.699-.19c-.3-.03-.56-.159-.78-.329L8.945.33a1.504 1.504 0 00-1.878 0l-1.34 1.08a1.5 1.5 0 01-.77.31l-1.698.19c-.7.08-1.25.63-1.33 1.329l-.19 1.699c-.03.3-.159.56-.329.78L.33 7.055a1.504 1.504 0 000 1.878l1.08 1.34c.17.22.28.48.31.77l.19 1.698c.08.7.63 1.25 1.329 1.33l1.699.19c.3.03.56.159.78.329l1.339 1.08c.55.439 1.329.439 1.878 0l1.34-1.08c.22-.17.48-.28.77-.31l1.698-.19c.7-.08 1.25-.63 1.33-1.329l.19-1.699c.03-.3.159-.56.329-.78l1.08-1.339a1.504 1.504 0 000-1.878zM6.5 12.01L3 8.51l1.5-1.5 2 2 5-5L13 5.56l-6.5 6.45z"
+          },
+          "children": []
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/__fixtures__/svg/index.html b/src/__fixtures__/svg/index.html
@@ -1,6 +1,6 @@
 <div>
   <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <circle cx="60" cy="60" r="50" fill="red"></circle>
-    <circle cx="170" cy="60" r="50" fill="green"></circle>
+    <circle cx="60" cy="60" r="50" fill="red"/>
+    <circle cx="170" cy="60" r="50" fill="green"/>
   </svg>
-</div>
+</div>
diff --git a/src/__fixtures__/template/index.html b/src/__fixtures__/template/index.html
@@ -3,4 +3,4 @@
 <template id="text"></template>
 
 <template id="html"></template>
-</body></html>
+</body></html>
diff --git a/src/fixtures.test.js b/src/fixtures.test.js
@@ -21,7 +21,7 @@ describe('fixtures', () => {
       let parsedExpected;
 
       try {
-        parsedExpected = fs.readFileSync(fixtureOutput).toString();
+        parsedExpected = fs.readFileSync(fixtureOutput).toString().trim();
       } catch (e) {
         fs.writeFileSync(fixtureOutput, parsedActual);
         return;
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,7 @@
 import ns from 'web-namespaces';
 import find from 'property-information/find';
-import schema from 'property-information/html';
+import html from 'property-information/html';
+import svg from 'property-information/svg';
 
 function transform(node, options) {
   switch (node.type) {
@@ -53,7 +54,11 @@ function root(node, options) {
     el = doc.createElement('html');
   }
 
-  return appendAll(el, children, Object.assign({ fragment, namespace }, options));
+  return appendAll(
+    el,
+    children,
+    Object.assign({ fragment, namespace, impliedNamespace: namespace }, options),
+  );
 }
 
 // Create a `doctype`.
@@ -78,11 +83,21 @@ function comment(node, { doc }) {
 // Create an `element`.
 function element(node, options) {
   const { namespace, doc } = options;
-  // TODO: use `g` in SVG space.
-  const { tagName = 'div', properties = {}, children = [] } = node;
-  const el = typeof namespace !== 'undefined'
-    ? doc.createElementNS(namespace, tagName)
-    : doc.createElement(tagName);
+  let impliedNamespace = options.impliedNamespace || namespace;
+  const { tagName = impliedNamespace === ns.svg ? 'g' : 'div', properties = {}, children = [] } = node;
+
+  if (
+    (impliedNamespace === null || impliedNamespace === undefined || impliedNamespace === ns.html)
+    && tagName === 'svg'
+  ) {
+    impliedNamespace = ns.svg;
+  }
+
+  const schema = impliedNamespace === ns.svg ? svg : html;
+
+  const el = impliedNamespace === null || impliedNamespace === undefined
+    ? doc.createElement(tagName)
+    : doc.createElementNS(impliedNamespace, tagName);
 
   // Add HTML attributes.
   const props = Object.keys(properties);
@@ -131,7 +146,7 @@ function element(node, options) {
     }
   }
 
-  return appendAll(el, children, options);
+  return appendAll(el, children, { ...options, impliedNamespace });
 }
 
 // Add all children.
diff --git a/src/index.test.js b/src/index.test.js
@@ -71,12 +71,20 @@ describe('hast-util-to-dom', () => {
     expect(actual).toEqual('<div></div>');
   });
 
-  it('creates an unknown node', () => {
+  it('creates an unknown node in HTML', () => {
     const actual = serializeNodeToHtmlString(toDOM({ type: 'something-else' }));
 
     expect(actual).toEqual('<div></div>');
   });
 
+  it('creates an unknown node in SVG', () => {
+    const actual = serializeNodeToHtmlString(
+      toDOM({ type: 'something-else' }, { namespace: ns.svg }),
+    );
+
+    expect(actual).toEqual('<g/>');
+  });
+
   it('creates an unknown node (with children)', () => {
     const actual = serializeNodeToHtmlString(toDOM({
       type: 'something-else',
@@ -109,7 +117,7 @@ describe('hast-util-to-dom', () => {
       { namespace: ns.svg },
     ));
 
-    expect(actual).toEqual('<g xmlns="http://www.w3.org/2000/svg" id="foo" class="bar"><circle/></g>');
+    expect(actual).toEqual('<g id="foo" class="bar"><circle/></g>');
   });
 
   it('creates an input node with some attributes', () => {
diff --git a/src/utils.js b/src/utils.js
@@ -7,9 +7,11 @@ const XMLSerializer = Serializer.interface;
 export default function serializeNodeToHtmlString(node) {
   const serialized = new XMLSerializer().serializeToString(node);
 
-  // XMLSerializer puts xmlns on the main element that is not in the XML
+  // XMLSerializer puts xmlns on “main” elements that are not in the XML
   // namespace.
   // We’d like to inspect that, but having the HTML namespace everywhere will
   // get unwieldy, so remove those.
-  return serialized.replace(new RegExp(` xmlns="${ns.html}"`, 'g'), '');
+  return serialized
+    .replace(new RegExp(` xmlns="${ns.html}"`, 'g'), '')
+    .replace(new RegExp(`(<(?:svg|g)) xmlns="${ns.svg}"`, 'g'), '$1');
 }

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"><html><head></head><body></body></html>`
	`1`	`+<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"><html><head></head><body></body></html>`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<!--?xml version="1.0"?--><html><head></head><body></body></html>`
	`1`	`+<!--?xml version="1.0"?--><html><head></head><body></body></html>`
-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 <body><br />text<br />
 <img />text
 -</body>
 +</body>
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`<!DOCTYPE html><html><head><title>Hello!</title></head><body><h1 id="world">World!<!--after-->`
`2`		`-</h1></body></html>`
	`2`	`+</h1></body></html>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+<li><svg class="icon" aria-label="Verified" viewBox="0 0 16 16" width="18" height="18" role="img"><path fill="currentcolor" fill-rule="evenodd" d="M15.67 7.066l-1.08-1.34a1.5 1.5 0 01-.309-.77l-.19-1.698a1.51 1.51 0 00-1.329-1.33l-1.699-.19c-.3-.03-.56-.159-.78-.329L8.945.33a1.504 1.504 0 00-1.878 0l-1.34 1.08a1.5 1.5 0 01-.77.31l-1.698.19c-.7.08-1.25.63-1.33 1.329l-.19 1.699c-.03.3-.159.56-.329.78L.33 7.055a1.504 1.504 0 000 1.878l1.08 1.34c.17.22.28.48.31.77l.19 1.698c.08.7.63 1.25 1.329 1.33l1.699.19c.3.03.56.159.78.329l1.339 1.08c.55.439 1.329.439 1.878 0l1.34-1.08c.22-.17.48-.28.77-.31l1.698-.19c.7-.08 1.25-.63 1.33-1.329l.19-1.699c.03-.3.159-.56.329-.78l1.08-1.339a1.504 1.504 0 000-1.878zM6.5 12.01L3 8.51l1.5-1.5 2 2 5-5L13 5.56l-6.5 6.45z"/></svg></li>