merged in comment support code

Author: HenrikJoreteg

src/parse-tag.js

@@ -19,6 +19,15 @@ export default function stringify(tag) {
     ) {
       res.voidElement = true
     }
+
+    // handle comment tag
+    if (res.name.startsWith('!--')) {
+      const endIndex = tag.indexOf('-->')
+      return {
+        type: 'comment',
+        comment: endIndex !== -1 ? tag.slice(4, endIndex) : '',
+      }
+    }
   }
 
   const reg = new RegExp(attrRE)

src/parse.js

@@ -22,10 +22,24 @@ export default function parse(html, options) {
       }
     }
     const isOpen = tag.charAt(1) !== '/'
+    const isComment = tag.startsWith('<!--')
     const start = index + tag.length
     const nextChar = html.charAt(start)
     let parent
 
+    if (isComment) {
+      const comment = parseTag(tag)
+
+      // if we're at root, push new base node
+      if (level < 0) {
+        result.push(comment)
+        return result
+      }
+      parent = arr[level]
+      parent.children.push(comment)
+      return result
+    }
+
     if (isOpen) {
       level++
 

src/stringify.js

@@ -23,6 +23,9 @@ function stringify(buff, doc) {
         return buff
       }
       return buff + doc.children.reduce(stringify, '') + '</' + doc.name + '>'
+    case 'comment':
+      buff += '<!--' + doc.comment + '-->'
+      return buff
   }
 }
 

test/parse.js

@@ -55,6 +55,130 @@ test('parse', function (t) {
   ])
   t.equal(html, HTML.stringify(parsed))
 
+  html = '<!-- just a comment node -->'
+  parsed = HTML.parse(html)
+  t.deepEqual(parsed, [
+    {
+      type: 'comment',
+      comment: ' just a comment node ',
+    },
+  ])
+  t.equal(html, HTML.stringify(parsed))
+
+  html =
+    '<div><h2>Comment below this header</h2><!-- just a comment node --></div>'
+  parsed = HTML.parse(html)
+  t.deepEqual(parsed, [
+    {
+      name: 'div',
+      type: 'tag',
+      attrs: {},
+      voidElement: false,
+      children: [
+        {
+          attrs: {},
+          name: 'h2',
+          type: 'tag',
+          voidElement: false,
+          children: [
+            {
+              content: 'Comment below this header',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          type: 'comment',
+          comment: ' just a comment node ',
+        },
+      ],
+    },
+  ])
+  t.equal(html, HTML.stringify(parsed))
+
+  html =
+    '<div><h2>Comment below this header</h2><!-- just a comment node --><!-- subsequent comment node --></div>'
+  parsed = HTML.parse(html)
+  t.deepEqual(parsed, [
+    {
+      name: 'div',
+      type: 'tag',
+      attrs: {},
+      voidElement: false,
+      children: [
+        {
+          attrs: {},
+          name: 'h2',
+          type: 'tag',
+          voidElement: false,
+          children: [
+            {
+              content: 'Comment below this header',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          type: 'comment',
+          comment: ' just a comment node ',
+        },
+        {
+          type: 'comment',
+          comment: ' subsequent comment node ',
+        },
+      ],
+    },
+  ])
+  t.equal(html, HTML.stringify(parsed))
+
+  html = '<div><h2><!-- comment inside h2 tag --></h2></div>'
+  parsed = HTML.parse(html)
+  t.deepEqual(parsed, [
+    {
+      name: 'div',
+      type: 'tag',
+      attrs: {},
+      voidElement: false,
+      children: [
+        {
+          attrs: {},
+          name: 'h2',
+          type: 'tag',
+          voidElement: false,
+          children: [
+            {
+              type: 'comment',
+              comment: ' comment inside h2 tag ',
+            },
+          ],
+        },
+      ],
+    },
+  ])
+  t.equal(html, HTML.stringify(parsed))
+
+  html = '<!---->'
+  parsed = HTML.parse(html)
+  t.deepEqual(parsed, [
+    {
+      type: 'comment',
+      comment: '',
+    },
+  ])
+  t.equal(html, HTML.stringify(parsed))
+
+  html =
+    '<!---this comment starts with a hyphen b/c web developers love curveballs -->'
+  parsed = HTML.parse(html)
+  t.deepEqual(parsed, [
+    {
+      type: 'comment',
+      comment:
+        '-this comment starts with a hyphen b/c web developers love curveballs ',
+    },
+  ])
+  t.equal(html, HTML.stringify(parsed))
+
   html = '<div>oh <strong>hello</strong> there! How are <span>you</span>?</div>'
   parsed = HTML.parse(html)