Merge pull request #116 from remarkablemark/fix/script

remarkablemark · web-flow · commit b3d5f7bf22a1 · 2019-07-03T00:58:14.000-04:00
fix: revert commit so &lt;script&gt; is parsed or else server-side rendering breaks
diff --git a/README.md b/README.md
@@ -223,10 +223,19 @@ Run tests with coverage:
 $ npm run test:coverage
 ```
 
+View coverage in browser:
+
+```sh
+$ npm run test:coverage
+$ npm run test:coverage:report
+$ open coverage/index.html
+```
+
 Lint files:
 
 ```sh
 $ npm run lint
+$ npm run dtslint
 ```
 
 Fix lint errors:
diff --git a/lib/attributes-to-props.js b/lib/attributes-to-props.js
@@ -2,6 +2,7 @@ var DOMProperty = require('react-dom-core/lib/DOMProperty');
 var propertyConfig = require('./property-config');
 var styleToObject = require('style-to-object');
 var utilities = require('./utilities');
+var camelCase = utilities.camelCase;
 
 var config = propertyConfig.config;
 var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
@@ -79,7 +80,7 @@ function cssToJs(style) {
   styleToObject(style, function(propName, propValue) {
     // Check if it's not a comment node
     if (propName && propValue) {
-      styleObj[utilities.camelCase(propName)] = propValue;
+      styleObj[camelCase(propName)] = propValue;
     }
   });
   return styleObj;
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/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "html-react-parser",
   "version": "0.8.0",
-  "description": "An HTML to React parser.",
+  "description": "HTML to React parser.",
   "author": "Mark <mark@remarkablemark.org>",
   "main": "index.js",
   "scripts": {
@@ -14,7 +14,7 @@
     "lint": "eslint --ignore-path .gitignore .",
     "lint:fix": "npm run lint -- --fix",
     "dtslint": "dtslint .",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run lint && npm run dtslint && npm test && npm run build",
     "release": "standard-version --no-verify",
     "test": "mocha",
     "test:coverage": "nyc npm test",
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 = parse(html);
+      assert.equal(render(reactElement), html);
+    });
+
     it('converts empty <style> to React', () => {
       const html = '<style></style>';
       const reactElement = parse(html);
