fix: move script tag to the bottom of the document (#28)

* fix: move scripts element to the bottom * chore: upgrade flow version
flybondi · May 29, 2019 · 80ecb19 · 80ecb19
1 parent 2e55934
commit 80ecb19
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -66,7 +66,7 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "1.6.0",
     "eslint-plugin-standard": "^4.0.0",
-    "flow-bin": "0.98.1",
+    "flow-bin": "0.99.0",
     "flow-typed": "^2.5.2",
     "husky": "^2.3.0",
     "jest": "24.8.0",

diff --git a/packages/server/package.json b/packages/server/package.json
@@ -72,7 +72,7 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "1.6.0",
     "eslint-plugin-standard": "^4.0.0",
-    "flow-bin": "0.98.1",
+    "flow-bin": "0.99.0",
     "flow-typed": "^2.5.2",
     "husky": "^2.3.0",
     "jest": "24.8.0",

diff --git a/packages/server/src/Document.component.jsx b/packages/server/src/Document.component.jsx
@@ -13,7 +13,6 @@ import { Error } from './Error.component';
 import serialize from 'serialize-javascript';
 
 const getHeaderTags = (extractor: Extractor) => [
-  ...extractor.getScriptElements(),
   ...extractor.getStyleElements(),
   ...extractor.getLinkElements()
 ];
@@ -69,6 +68,7 @@ export function DocumentComponent({
             <Data data={filterServerData(data)} />
           </Fragment>
         )}
+        {extractor && extractor.getScriptElements()}
         {extraBodyTags.map(renderTags)}
       </body>
     </html>
@@ -90,12 +90,15 @@ DocumentComponent.getInitialProps = async ({
 
 export const Root = () => <div id="root">BEFORE.JS-DATA</div>;
 
-export const Data = ({ data }: { data: DataType }) => (
-  <script
-    id="server-app-state"
-    type="application/json"
-    dangerouslySetInnerHTML={{
-      __html: serialize({ ...data }).replace(/<\/script>/g, '%3C/script%3E')
-    }}
-  />
-);
+export const Data = ({ data }: { data: DataType }) => {
+  return (
+    <script
+      key={Math.random()}
+      id="server-app-state"
+      type="application/json"
+      dangerouslySetInnerHTML={{
+        __html: serialize(data, { isJSON: true }).replace(/<\/script>/g, '%3C/script%3E')
+      }}
+    />
+  );
+};
diff --git a/yarn.lock b/yarn.lock
@@ -4023,10 +4023,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
   integrity sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==
 
-flow-bin@0.98.1:
-  version "0.98.1"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.98.1.tgz#a8d781621c91703df69928acc83c9777e2fcbb49"
-  integrity sha512-y1YzQgbFUX4EG6h2EO8PhyJeS0VxNgER8XsTwU8IXw4KozfneSmGVgw8y3TwAOza7rVhTlHEoli1xNuNW1rhPw==
+flow-bin@0.99.0:
+  version "0.99.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.99.0.tgz#df035be2493825ddce0b2f26d1273747465b538c"
+  integrity sha512-PjTzcOwte2mq+aP+HFCQZw/AojltOnOdtZC9iPzkWJJdPH7nYSKkZhC4dFgP24BuXsJH6yZBZ48gEKsX04UegQ==
 
 flow-typed@^2.5.2:
   version "2.5.2"