Convert to xast doctype, instruction and comment nodes (#1415)

Here we add [xast](https://github.com/syntax-tree/xast) support
to three basic nodes: doctype, instruction and comment

Some tests are rewritten instead of checking each field to `.include`
assertion which is able to match shape of object.

lib/svgo/js2svg.js

@@ -101,12 +101,12 @@ JS2SVG.prototype.convert = function (data) {
         svg += this.createElem(item);
       } else if (item.text) {
         svg += this.createText(item.text);
-      } else if (item.doctype) {
-        svg += this.createDoctype(item.doctype);
-      } else if (item.processinginstruction) {
-        svg += this.createProcInst(item.processinginstruction);
-      } else if (item.comment) {
-        svg += this.createComment(item.comment);
+      } else if (item.type === 'doctype') {
+        svg += this.createDoctype(item);
+      } else if (item.type === 'instruction') {
+        svg += this.createProcInst(item);
+      } else if (item.type === 'comment') {
+        svg += this.createComment(item);
       } else if (item.cdata) {
         svg += this.createCDATA(item.cdata);
       }
@@ -146,7 +146,8 @@ JS2SVG.prototype.createIndent = function () {
  *
  * @return {String}
  */
-JS2SVG.prototype.createDoctype = function (doctype) {
+JS2SVG.prototype.createDoctype = function (node) {
+  const { doctype } = node.data;
   return this.config.doctypeStart + doctype + this.config.doctypeEnd;
 };
 
@@ -157,13 +158,10 @@ JS2SVG.prototype.createDoctype = function (doctype) {
  *
  * @return {String}
  */
-JS2SVG.prototype.createProcInst = function (instruction) {
+JS2SVG.prototype.createProcInst = function (node) {
+  const { name, value } = node;
   return (
-    this.config.procInstStart +
-    instruction.name +
-    ' ' +
-    instruction.body +
-    this.config.procInstEnd
+    this.config.procInstStart + name + ' ' + value + this.config.procInstEnd
   );
 };
 
@@ -174,8 +172,9 @@ JS2SVG.prototype.createProcInst = function (instruction) {
  *
  * @return {String}
  */
-JS2SVG.prototype.createComment = function (comment) {
-  return this.config.commentStart + comment + this.config.commentEnd;
+JS2SVG.prototype.createComment = function (node) {
+  const { value } = node;
+  return this.config.commentStart + value + this.config.commentEnd;
 };
 
 /**

lib/svgo/svg2js.js

@@ -37,7 +37,12 @@ module.exports = function (data) {
 
   sax.ondoctype = function (doctype) {
     pushToContent({
-      doctype: doctype,
+      type: 'doctype',
+      // TODO parse doctype for name, public and system to match xast
+      name: 'svg',
+      data: {
+        doctype,
+      },
     });
 
     var subsetStart = doctype.indexOf('['),
@@ -54,13 +59,16 @@ module.exports = function (data) {
 
   sax.onprocessinginstruction = function (data) {
     pushToContent({
-      processinginstruction: data,
+      type: 'instruction',
+      name: data.name,
+      value: data.body,
     });
   };
 
   sax.oncomment = function (comment) {
     pushToContent({
-      comment: comment.trim(),
+      type: 'comment',
+      value: comment.trim(),
     });
   };
 

plugins/removeComments.js

@@ -19,7 +19,7 @@ exports.description = 'removes comments';
  * @author Kir Belevich
  */
 exports.fn = function (item) {
-  if (item.comment && item.comment.charAt(0) !== '!') {
+  if (item.type === 'comment' && item.value.charAt(0) !== '!') {
     return false;
   }
 };

plugins/removeDoctype.js

@@ -32,7 +32,7 @@ exports.description = 'removes doctype declaration';
  * @author Kir Belevich
  */
 exports.fn = function (item) {
-  if (item.doctype) {
+  if (item.type === 'doctype') {
     return false;
   }
 };

plugins/removeXMLProcInst.js

@@ -18,7 +18,8 @@ exports.description = 'removes XML processing instructions';
  * @author Kir Belevich
  */
 exports.fn = function (item) {
-  return !(
-    item.processinginstruction && item.processinginstruction.name === 'xml'
-  );
+  if (item.type === 'instruction' && item.name === 'xml') {
+    return false;
+  }
+  return true;
 };

test/svg2js/_index.js

@@ -49,53 +49,30 @@ describe('svg2js', function () {
       });
     });
 
-    describe('root.content[0].processinginstruction', function () {
-      it('should exist', function () {
-        expect(root.content[0].processinginstruction).to.exist;
-      });
-
-      it('should be an instance of Object', function () {
-        expect(root.content[0].processinginstruction).to.be.an.instanceOf(
-          Object
-        );
-      });
-
-      it('should have property "name" with value "xml"', function () {
-        expect(root.content[0].processinginstruction).to.have.property(
-          'name',
-          'xml'
-        );
-      });
-
-      it('should have property "body" with value `version="1.0" encoding="utf-8"`', function () {
-        expect(root.content[0].processinginstruction).to.have.property(
-          'body',
-          'version="1.0" encoding="utf-8"'
-        );
+    it('the first node should be instruction', () => {
+      expect(root.content[0]).to.include({
+        type: 'instruction',
+        name: 'xml',
+        value: 'version="1.0" encoding="utf-8"',
       });
     });
 
-    describe('root.content[1].comment', function () {
-      it('should exist', function () {
-        expect(root.content[1].comment).to.exist;
-      });
-
-      it('should equal "Generator: Adobe Illustrator…"', function () {
-        expect(root.content[1].comment).to.equal(
-          'Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)'
-        );
+    it('the second node should be comment', () => {
+      expect(root.content[1]).to.include({
+        type: 'comment',
+        value:
+          'Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)',
       });
     });
 
-    describe('root.content[2].doctype', function () {
-      it('should exist', function () {
-        expect(root.content[2].doctype).to.exist;
-      });
-
-      it('should eventually equal " svg PUBLIC…"', function () {
-        expect(root.content[2].doctype).to.equal(
-          ' svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"'
-        );
+    it('the third node should be doctype', () => {
+      expect(root.content[2]).to.deep.include({
+        type: 'doctype',
+        name: 'svg',
+        data: {
+          doctype:
+            ' svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"',
+        },
       });
     });