put meta[charset] before title (#497)

ambar · ctrlplusb · commit 83d533a9c780 · 2017-10-04T21:44:30.000+01:00
diff --git a/server/middleware/reactApplication/ServerHTML.js b/server/middleware/reactApplication/ServerHTML.js
@@ -43,14 +43,13 @@ function ServerHTML(props) {
   const { asyncComponentsState, helmet, nonce, reactAppString } = props;
 
   // Creates an inline script definition that is protected by the nonce.
-  const inlineScript = body => (
-    <script nonce={nonce} type="text/javascript" dangerouslySetInnerHTML={{ __html: body }} />
-  );
+  const inlineScript = body =>
+    <script nonce={nonce} type="text/javascript" dangerouslySetInnerHTML={{ __html: body }} />;
 
   const headerElements = removeNil([
+    ...ifElse(helmet)(() => helmet.meta.toComponent(), []),
     ...ifElse(helmet)(() => helmet.title.toComponent(), []),
     ...ifElse(helmet)(() => helmet.base.toComponent(), []),
-    ...ifElse(helmet)(() => helmet.meta.toComponent(), []),
     ...ifElse(helmet)(() => helmet.link.toComponent(), []),
     ifElse(clientEntryAssets && clientEntryAssets.css)(() => stylesheetTag(clientEntryAssets.css)),
     ...ifElse(helmet)(() => helmet.style.toComponent(), []),
@@ -83,7 +82,9 @@ function ServerHTML(props) {
       process.env.BUILD_FLAG_IS_DEV === 'true' && config('bundles.client.devVendorDLL.enabled'),
     )(() =>
       scriptTag(
-        `${config('bundles.client.webPath')}${config('bundles.client.devVendorDLL.name')}.js?t=${Date.now()}`,
+        `${config('bundles.client.webPath')}${config(
+          'bundles.client.devVendorDLL.name',
+        )}.js?t=${Date.now()}`,
       ),
     ),
     ifElse(clientEntryAssets && clientEntryAssets.js)(() => scriptTag(clientEntryAssets.js)),
@@ -93,10 +94,16 @@ function ServerHTML(props) {
   return (
     <HTML
       htmlAttributes={ifElse(helmet)(() => helmet.htmlAttributes.toComponent(), null)}
-      headerElements={headerElements.map((x, idx) => (
-        <KeyedComponent key={idx}>{x}</KeyedComponent>
-      ))}
-      bodyElements={bodyElements.map((x, idx) => <KeyedComponent key={idx}>{x}</KeyedComponent>)}
+      headerElements={headerElements.map((x, idx) =>
+        (<KeyedComponent key={idx}>
+          {x}
+        </KeyedComponent>),
+      )}
+      bodyElements={bodyElements.map((x, idx) =>
+        (<KeyedComponent key={idx}>
+          {x}
+        </KeyedComponent>),
+      )}
       appBodyString={reactAppString}
     />
   );
diff --git a/shared/components/DemoApp/index.js b/shared/components/DemoApp/index.js
@@ -21,15 +21,17 @@ function DemoApp() {
     <div style={{ padding: '2rem' }}>
       <Helmet>
         <html lang="en" />
-        <title>{config('htmlPage.defaultTitle')}</title>
+        <meta charSet="utf-8" />
         <meta name="application-name" content={config('htmlPage.defaultTitle')} />
         <meta name="description" content={config('htmlPage.description')} />
-        <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="msapplication-TileColor" content="#2b2b2b" />
         <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png" />
         <meta name="theme-color" content="#2b2b2b" />
+        <title>
+          {config('htmlPage.defaultTitle')}
+        </title>
         {/*
           A great reference for favicons:
           https://github.com/audreyr/favicon-cheat-sheet
