revert: feat(dom-to-react): skip and do not parse <script> content

remarkablemark · remarkablemark · commit e625e1dee8fd · 2019-07-03T00:33:16.000-04:00
This reverts commit 1fb5ee2. The reason for the revert is because removing the <script> from the parsing causes server-side rendering to break. Fixes #115
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -56,11 +56,11 @@ function domToReact(nodes, options) {
 
     children = null;
 
+    // node type for <script> is "script"
     // node type for <style> is "style"
-    // skip node type "script" as react-dom does not render the contents
-    if (node.type === 'style') {
-      // prevent text in <style> from being escaped
-      // https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
+    if (node.type === 'script' || node.type === 'style') {
+      // prevent text in <script> or <style> from being escaped
+      // https://facebook.github.io/react/tips/dangerously-set-inner-html.html
       if (node.children[0]) {
         props.dangerouslySetInnerHTML = {
           __html: node.children[0].data
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -56,9 +56,23 @@ describe('dom-to-react parser', () => {
     );
   });
 
-  it('does not parse <script> content', () => {
+  it('does not escape <script> content', () => {
     const html = data.html.script;
-    assert.deepEqual(domToReact(htmlToDOM(html)), []);
+    const reactElement = domToReact(htmlToDOM(html));
+
+    assert(React.isValidElement(reactElement));
+    assert.deepEqual(
+      reactElement,
+      React.createElement(
+        'script',
+        {
+          dangerouslySetInnerHTML: {
+            __html: 'alert(1 < 2);'
+          }
+        },
+        null
+      )
+    );
   });
 
   it('does not escape <style> content', () => {
diff --git a/test/helpers/data.json b/test/helpers/data.json
@@ -4,7 +4,7 @@
     "multiple": "<p>foo</p><p>bar</p>",
     "nested": "<div><p>foo <em>bar</em></p></div>",
     "attributes": "<hr id=\"foo\" class=\"bar baz\" style=\"background: #fff; text-align: center;\" data-foo=\"bar\" />",
-    "complex": "<html><head><meta charSet=\"utf-8\"/><title>Title</title><link rel=\"stylesheet\" href=\"style.css\"/></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px\">Heading</h1><hr/><p>Paragraph</p><img src=\"image.jpg\"/><div class=\"class1 class2\">Some <em>text</em>.</div></body></html>",
+    "complex": "<html><head><meta charSet=\"utf-8\"/><title>Title</title><link rel=\"stylesheet\" href=\"style.css\"/></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px\">Heading</h1><hr/><p>Paragraph</p><img src=\"image.jpg\"/><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
     "textarea": "<textarea>foo</textarea>",
     "script": "<script>alert(1 < 2);</script>",
     "style": "<style>body > .foo { color: #f00; }</style>",
diff --git a/test/html-to-react.js b/test/html-to-react.js
@@ -45,6 +45,12 @@ describe('html-to-react', () => {
       assert.equal(render(reactElement), html);
     });
 
+    it('converts empty <script> to React', () => {
+      const html = '<script></script>';
+      const reactElement = Parser(html);
+      assert.equal(render(reactElement), html);
+    });
+
     it('converts empty <style> to React', () => {
       const html = '<style></style>';
       const reactElement = parse(html);
