Fixed: move react-helmet injected scripts in the head to prevent …

…duplicate loading of JS files (#904) Previously, scripts injected via ``react-helmet`` where injected before the end of the ``</body>`` tag. But it can produce unexpected behavior since on the client side, ``react-helmet`` injects those in the ``<head>``, which can make some scripts doing twice their job (and that's probably not what you want).
MoOx · Dec 16, 2016 · 23a9ad7 · 23a9ad7
1 parent 7a242d9
commit 23a9ad7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/src/components/Html/__tests__/__snapshots__/aphrodite.js.snap b/src/components/Html/__tests__/__snapshots__/aphrodite.js.snap
@@ -23,6 +23,13 @@ exports[`test should render Html component with aphrodite styles when possible 1
     <link
       href="test.css"
       rel="stylesheet" />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "window._aphrodite = [\"stuff\"]);",
+        }
+      }
+      data-react-helmet={true} />
   </head>
   <body>
     <div
@@ -34,13 +41,6 @@ exports[`test should render Html component with aphrodite styles when possible 1
       id="phenomic" />
     <script
       phenomicStuff={true} />
-    <script
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "window._aphrodite = [\"stuff\"]);",
-        }
-      }
-      data-react-helmet={true} />
     <script
       src="test.js" />
   </body>

diff --git a/src/components/Html/__tests__/__snapshots__/glamor.js.snap b/src/components/Html/__tests__/__snapshots__/glamor.js.snap
@@ -22,6 +22,13 @@ exports[`test should render Html component with glamor styles when possible 1`]
     <link
       href="test.css"
       rel="stylesheet" />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "window._glamor = [{\"id\":\"s\"}]",
+        }
+      }
+      data-react-helmet={true} />
   </head>
   <body>
     <div
@@ -33,13 +40,6 @@ exports[`test should render Html component with glamor styles when possible 1`]
       id="phenomic" />
     <script
       phenomicStuff={true} />
-    <script
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "window._glamor = [{\"id\":\"s\"}]",
-        }
-      }
-      data-react-helmet={true} />
     <script
       src="test.js" />
   </body>

diff --git a/src/components/Html/index.js b/src/components/Html/index.js
@@ -100,11 +100,11 @@ const Html = (props: Props) => {
             <link key={ "phenomic.css." + i } rel="stylesheet" href={ file } />
           ))
         }
+        { head.script.toComponent() }
       </head>
       <body>
         <div id="phenomic" dangerouslySetInnerHTML={{ __html: body }} />
         { props.renderScript() }
-        { head.script.toComponent() }
         {
           props.js.map((file, i) => (
             <script key={ "phenomic.js." + i } src={ file } />

diff --git a/src/static/__tests__/url-as-html.js b/src/static/__tests__/url-as-html.js
@@ -193,6 +193,7 @@ test("custom script tags", async (t) => {
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script data-react-helmet="true" src="http://foo.bar/baz.js"></script>
 </head>
 
 <body>
@@ -221,7 +222,6 @@ test("custom script tags", async (t) => {
       }
     }
   </script>
-  <script data-react-helmet="true" src="http://foo.bar/baz.js"></script>
   <script src="/test.js"></script>
 </body>