Merge branch 'master' into feature/remove-polyfills

CRGavrila · Mar 23, 2016 · 7dbe665 · 7dbe665
2 parents 76c48bd + 02088e3
commit 7dbe665
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
+- [2.3.1](#231)
 - [2.3.0](#230)
 - [2.2.0](#220)
 - [2.1.1](#211)
@@ -17,6 +18,12 @@
 - [1.0.0](#100)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## 2.3.1
+
+Bugfixes:
+
+  - Fallback values for rewind on the server threw a `tags.map` error in Node.  Changing the tag default values to `[]` fixes it.
+
 ## 2.3.0
 
 Bugfixes:

diff --git a/README.md b/README.md
@@ -28,48 +28,45 @@ Inspired by [react-document-title](https://github.com/gaearon/react-document-tit
 import React from "react";
 import Helmet from "react-helmet";
 
-export default class Application extends React.Component {
-    render() {
-        return (
-            <div className="application">
-                <Helmet title="My Title" />
-                ...
-            </div>
-        );
-    }
+export default function Application () {
+    return (
+        <div className="application">
+            <Helmet title="My Title" />
+            ...
+        </div>
+    );
 };
 ```
 
 ```javascript
 import React from "react";
 import Helmet from "react-helmet";
 
-export default class Application extends React.Component {
-    render() {
-        return (
-            <div className="application">
-                <Helmet
-                    title="My Title"
-                    titleTemplate="MySite.com - %s"
-                    base={{"target": "_blank", "href": "http://mysite.com/"}}
-                    meta={[
-                        {"name": "description", "content": "Helmet application"},
-                        {"property": "og:type", "content": "article"}
-                    ]}
-                    link={[
-                        {"rel": "canonical", "href": "http://mysite.com/example"},
-                        {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
-                        {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
-                    ]}
-                    script={[
-                      {"src": "http://include.com/pathtojs.js", "type": "text/javascript"}
-                    ]}
-                    onChangeClientState={(newState) => console.log(newState)}
-                />
-                ...
-            </div>
-        );
-    }
+export default function Application () {
+    return (
+        <div className="application">
+            <Helmet
+                title="My Title"
+                titleTemplate="MySite.com - %s"
+                base={{"target": "_blank", "href": "http://mysite.com/"}}
+                meta={[
+                    {"name": "description", "content": "Helmet application"},
+                    {"property": "og:type", "content": "article"}
+                ]}
+                link={[
+                    {"rel": "canonical", "href": "http://mysite.com/example"},
+                    {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
+                    {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
+                ]}
+                script={[
+                  {"src": "http://include.com/pathtojs.js", "type": "text/javascript"},
+                  {"type": "application/ld+json", innerHTML: `{ "@context": "http://schema.org" }`}
+                ]}
+                onChangeClientState={(newState) => console.log(newState)}
+            />
+            ...
+        </div>
+    );
 };
 ```
 
@@ -124,23 +121,21 @@ const html = `
 
 ### As React components
 ```javascript
-class HTML extends React.Component {
-    render() {
-        return (
-            <html>
-                <head>
-                    {head.title.toComponent()}
-                    {head.meta.toComponent()}
-                    {head.link.toComponent()}
-                </head>
-                <body>
-                    <div id="content">
-                        // React stuff here
-                    </div>
-                </body>
-            </html>
-        );
-    }
+function HTML () {
+    return (
+        <html>
+            <head>
+                {head.title.toComponent()}
+                {head.meta.toComponent()}
+                {head.link.toComponent()}
+            </head>
+            <body>
+                <div id="content">
+                    // React stuff here
+                </div>
+            </body>
+        </html>
+    );
 }
 ```
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-helmet",
   "description": "A document head manager for React",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "main": "./lib/index.js",
   "author": "NFL <engineers@nfl.com>",
   "contributors": [
@@ -34,18 +34,20 @@
   },
   "devDependencies": {
     "babel": "5.8.34",
-    "babel-eslint": "4.1.5",
+    "babel-eslint": "5.0.0",
     "babel-loader": "5.4.0",
     "chai": "3.4.1",
     "chalk": "1.1.1",
     "del": "2.2.0",
-    "eslint": "1.10.3",
-    "eslint-config-nfl": "4.0.2",
-    "eslint-plugin-react": "3.15.0",
+    "eslint": "2.4.0",
+    "eslint-config-nfl": "6.1.0",
+    "eslint-plugin-react": "4.2.2",
+    "estraverse": "^4.2.0",
+    "estraverse-fb": "^1.3.1",
     "gulp": "3.9.0",
     "gulp-cached": "1.1.0",
     "gulp-debug": "2.1.2",
-    "gulp-eslint": "1.1.1",
+    "gulp-eslint": "2.0.0",
     "gulp-if": "2.0.0",
     "gulp-notify": "2.2.0",
     "gulp-util": "3.0.7",

diff --git a/src/Helmet.js b/src/Helmet.js
@@ -86,6 +86,10 @@ const getTagsFromPropsList = (tagName, validTags, propsList) => {
                         && !(lowerCaseAttributeKey === TAG_PROPERTIES.REL && tag[lowerCaseAttributeKey].toLowerCase() === "stylesheet")) {
                         validAttributeKey = lowerCaseAttributeKey;
                     }
+                    // Special case for innerHTML which doesn't work lowercased
+                    if (validTags.indexOf(attributeKey) !== -1 && attributeKey === TAG_PROPERTIES.INNER_HTML) {
+                        validAttributeKey = attributeKey;
+                    }
                 }
 
                 if (!validAttributeKey) {
@@ -146,7 +150,11 @@ const updateTags = (type, tags) => {
 
             for (const attribute in tag) {
                 if (tag.hasOwnProperty(attribute)) {
-                    newElement.setAttribute(attribute, tag[attribute]);
+                    if (attribute === "innerHTML") {
+                        newElement.innerHTML = tag.innerHTML;
+                    } else {
+                        newElement.setAttribute(attribute, tag[attribute]);
+                    }
                 }
             }
 
@@ -183,12 +191,17 @@ const generateTagsAsString = (type, tags) => {
     const stringifiedMarkup = tags.map(tag => {
         const attributeHtml = Object.keys(tag)
             .map((attribute) => {
+                if (attribute === "innerHTML") {
+                    return "";
+                }
                 const encodedValue = encodeSpecialCharacters(tag[attribute]);
                 return `${attribute}="${encodedValue}"`;
             })
             .join(" ");
 
-        return `<${type} ${HELMET_ATTRIBUTE}="true" ${attributeHtml}${type === TAG_NAMES.SCRIPT ? `></${type}>` : `/>`}`;
+        const innerHTML = tag.innerHTML || "";
+
+        return `<${type} ${HELMET_ATTRIBUTE}="true" ${attributeHtml}${type === TAG_NAMES.SCRIPT ? `>${innerHTML}</${type}>` : `/>`}`;
     }).join("");
 
     return stringifiedMarkup;
@@ -221,7 +234,11 @@ const generateTagsAsReactComponent = (type, tags) => {
         Object.keys(tag).forEach((attribute) => {
             const mappedAttribute = REACT_TAG_MAP[attribute] || attribute;
 
-            mappedTag[mappedAttribute] = tag[attribute];
+            if (mappedAttribute === "innerHTML") {
+                mappedTag.dangerouslySetInnerHTML = {__html: tag.innerHTML};
+            } else {
+                mappedTag[mappedAttribute] = tag[attribute];
+            }
         });
 
         return React.createElement(type, mappedTag);
@@ -277,10 +294,10 @@ const Helmet = (Component) => {
                 // provide fallback if mappedState is undefined
                 mappedState = mapStateOnServer({
                     title: "",
-                    baseTag: "",
-                    metaTags: "",
-                    linkTags: "",
-                    scriptTags: ""
+                    baseTag: [],
+                    metaTags: [],
+                    linkTags: [],
+                    scriptTags: []
                 });
             }
 
@@ -306,7 +323,7 @@ const reducePropsToState = (propsList) => ({
     baseTag: getBaseTagFromPropsList([TAG_PROPERTIES.HREF], propsList),
     metaTags: getTagsFromPropsList(TAG_NAMES.META, [TAG_PROPERTIES.NAME, TAG_PROPERTIES.CHARSET, TAG_PROPERTIES.HTTPEQUIV, TAG_PROPERTIES.PROPERTY], propsList),
     linkTags: getTagsFromPropsList(TAG_NAMES.LINK, [TAG_PROPERTIES.REL, TAG_PROPERTIES.HREF], propsList),
-    scriptTags: getTagsFromPropsList(TAG_NAMES.SCRIPT, [TAG_PROPERTIES.SRC], propsList)
+    scriptTags: getTagsFromPropsList(TAG_NAMES.SCRIPT, [TAG_PROPERTIES.SRC, TAG_PROPERTIES.INNER_HTML, TAG_PROPERTIES.NAME], propsList)
 });
 
 const handleClientStateChange = (newState) => {

diff --git a/src/HelmetConstants.js b/src/HelmetConstants.js
@@ -13,7 +13,8 @@ export const TAG_PROPERTIES = {
     REL: "rel",
     HREF: "href",
     PROPERTY: "property",
-    SRC: "src"
+    SRC: "src",
+    INNER_HTML: "innerHTML"
 };
 
 export const REACT_TAG_MAP = {

diff --git a/src/test/HelmetTest.js b/src/test/HelmetTest.js
@@ -806,11 +806,22 @@ describe("Helmet", () => {
 
         describe("script tags", () => {
             it("can update script tags", () => {
+                const scriptInnerHTML = `
+                  {
+                    "@context": "http://schema.org",
+                    "@type": "NewsArticle",
+                    "url": "http://localhost/helmet"
+                  }
+                `;
                 ReactDOM.render(
                     <Helmet
                         script={[
                             {"src": "http://localhost/test.js", "type": "text/javascript"},
-                            {"src": "http://localhost/test2.js", "type": "text/javascript"}
+                            {"src": "http://localhost/test2.js", "type": "text/javascript"},
+                            {
+                                type: "application/ld+json",
+                                innerHTML: scriptInnerHTML
+                            }
                         ]}
                     />,
                     container
@@ -822,10 +833,11 @@ describe("Helmet", () => {
 
                 const filteredTags = [].slice.call(existingTags).filter((tag) => {
                     return (tag.getAttribute("src") === "http://localhost/test.js" && tag.getAttribute("type") === "text/javascript") ||
-                        (tag.getAttribute("src") === "http://localhost/test2.js" && tag.getAttribute("type") === "text/javascript");
+                        (tag.getAttribute("src") === "http://localhost/test2.js" && tag.getAttribute("type") === "text/javascript") ||
+                        (tag.getAttribute("type") === "application/ld+json" && tag.innerHTML === scriptInnerHTML);
                 });
 
-                expect(filteredTags.length).to.be.at.least(2);
+                expect(filteredTags.length).to.be.at.least(3);
             });
 
             it("will clear all scripts tags if none are specified", () => {