Added text node to script or style tags even if empty (#17)

* added text node to script or style tags even if empty

* add the text node in "scryle" even if it's a zero-length string

* actually avoid adding unnecessary text node and add text property only on script and style tags

* add test for text node in script

* add test for text node in style tags

* remove temporary test file

Author: Kal-Aster

index.js

@@ -1399,9 +1399,16 @@ function text(state) {
       const start = match.index;
       const end = re.lastIndex;
       state.scryle = null; // reset the script/style flag now
-      // write the tag content, if any
+      // write the tag content
       if (start > pos) {
         parseSpecialTagsContent(state, name, match);
+      } else if (name !== TEXTAREA_TAG) {
+        state.last.text = {
+          type: TEXT,
+          text: '',
+          start: pos,
+          end: pos
+        };
       }
       // now the closing tag, either </script> or </style>
       pushTag(state, `/${name}`, start, end);
@@ -1598,19 +1605,19 @@ const TREE_BUILDER_STRUCT = Object.seal({
   },
   pushText(store, node) {
     const text = node.text;
-    const empty = !/\S/.test(text);
     const scryle = store.scryle;
     if (!scryle) {
       // store.last always have a nodes property
       const parent = store.last;
-
+      
       const pack = this.compact && !parent[IS_RAW];
+      const empty = !/\S/.test(text);
       if (pack && empty) {
         return
       }
       this.split(node, text, node.start, pack);
       parent.nodes.push(node);
-    } else if (!empty) {
+    } else {
       scryle.text = node;
     }
   },

src/parsers/text.js

@@ -32,9 +32,16 @@ export default function text(state) {
       const start = match.index
       const end = re.lastIndex
       state.scryle = null // reset the script/style flag now
-      // write the tag content, if any
+      // write the tag content
       if (start > pos) {
         parseSpecialTagsContent(state, name, match)
+      } else if (name !== TEXTAREA_TAG) {
+        state.last.text = {
+          type: TEXT,
+          text: '',
+          start: pos,
+          end: pos
+        }
       }
       // now the closing tag, either </script> or </style>
       pushTag(state, `/${name}`, start, end)

src/tree-builder.js

@@ -175,19 +175,19 @@ const TREE_BUILDER_STRUCT = Object.seal({
   },
   pushText(store, node) {
     const text = node.text
-    const empty = !/\S/.test(text)
     const scryle = store.scryle
     if (!scryle) {
       // store.last always have a nodes property
       const parent = store.last
-
+      
       const pack = this.compact && !parent[IS_RAW]
+      const empty = !/\S/.test(text)
       if (pack && empty) {
         return
       }
       this.split(node, text, node.start, pack)
       parent.nodes.push(node)
-    } else if (!empty) {
+    } else {
       scryle.text = node
     }
   },

test/tparser.js

@@ -698,19 +698,133 @@ export default {
             valueStart: 18,
           },
         ],
+        text: { type: 3, text: '', start: 37, end: 37 },
       },
       { type: 1, name: '/script', start: 37, end: 46 },
       {
         type: 1,
         name: 'script',
         start: 46,
         end: 54,
+        text: { type: 3, text: '', start: 54, end: 54 },
       },
       { type: 1, name: '/script', start: 54, end: 63 },
       { type: 1, name: '/div', start: 63, end: 69 },
     ],
   },
 
+  'script tag with zero-length content has empty text node': {
+    data: "<component><script></script></component>",
+    expected: [
+      {
+        type: 1,
+        name: 'component',
+        start: 0,
+        end: 11,
+        isCustom: true,
+      },
+      {
+        type: 1,
+        name: 'script',
+        start: 11,
+        end: 19,
+        text: { type: 3, text: '', start: 19, end: 19 },
+      },
+      { type: 1, name: '/script', start: 19, end: 28 },
+      {
+        type: 1,
+        name: '/component',
+        start: 28,
+        end: 40,
+        isCustom: true,
+      },
+    ]
+  },
+
+  'script tag with content containing only whiteline characters has text node': {
+    data: "<component><script>  </script></component>",
+    expected: [
+      {
+        type: 1,
+        name: 'component',
+        start: 0,
+        end: 11,
+        isCustom: true,
+      },
+      {
+        type: 1,
+        name: 'script',
+        start: 11,
+        end: 19,
+      },
+      { type: 3, text: '  ', start: 19, end: 21 },
+      { type: 1, name: '/script', start: 21, end: 30 },
+      {
+        type: 1,
+        name: '/component',
+        start: 30,
+        end: 42,
+        isCustom: true,
+      },
+    ]
+  },
+
+  'style tag with zero-length content has empty text node': {
+    data: "<component><style></style></component>",
+    expected: [
+      {
+        type: 1,
+        name: 'component',
+        start: 0,
+        end: 11,
+        isCustom: true,
+      },
+      {
+        type: 1,
+        name: 'style',
+        start: 11,
+        end: 18,
+        text: { type: 3, text: '', start: 18, end: 18 },
+      },
+      { type: 1, name: '/style', start: 18, end: 26 },
+      {
+        type: 1,
+        name: '/component',
+        start: 26,
+        end: 38,
+        isCustom: true,
+      },
+    ]
+  },
+
+  'style tag with content containing only whiteline characters has text node': {
+    data: "<component><style>  </style></component>",
+    expected: [
+      {
+        type: 1,
+        name: 'component',
+        start: 0,
+        end: 11,
+        isCustom: true,
+      },
+      {
+        type: 1,
+        name: 'style',
+        start: 11,
+        end: 18,
+      },
+      { type: 3, text: '  ', start: 18, end: 20 },
+      { type: 1, name: '/style', start: 20, end: 28 },
+      {
+        type: 1,
+        name: '/component',
+        start: 28,
+        end: 40,
+        isCustom: true,
+      },
+    ]
+  },
+
   'whitespace after the tag name is ignored #1': {
     data: '<div\t\n\n  \n\t/>',
     expected: [{ type: _T.TAG, name: 'div', end: 13, isSelfClosing: true }],