Refactor the way html files are wrapped. Now it's way more flexible.

MoOx · Nov 15, 2016 · 0c0fae4 · 0c0fae4
1 parent f4f441f
commit 0c0fae4
Show file tree

Hide file tree

Showing 12 changed files with 207 additions and 216 deletions.
diff --git a/flow/interfaces/node-modules/react-helmet.js b/flow/interfaces/node-modules/react-helmet.js
@@ -1,9 +1,37 @@
-declare module "react-helmet" {
-  declare function rewind(): void;
+/* eslint-disable max-len */
+// https://github.com/flowtype/flow-typed/tree/master/definitions/npm/react-helmet_v3.x.x
 
-  declare interface ReactHelmet {
-    rewind: rewind
+declare module "react-helmet" {
+  declare type Props = {
+    htmlAttributes?: Object,
+    title?: string,
+    defaultTitle?: string,
+    titleTemplate?: string,
+    base?: Object,
+    meta?: Array<Object>,
+    link?: Array<Object>,
+    script?: Array<Object>,
+    noscript?: Array<Object>,
+    style?: Array<Object>,
+    onChangeClientState?: (newState: Object, addedTags: Object, removeTags: Object) => void | mixed,
+  };
+  declare interface HeadAttribute {
+    toString(): string;
+    toComponent(): React$Element<*>;
+  }
+  declare interface Head {
+    htmlAttributes: HeadAttribute;
+    title: HeadAttribute;
+    base: HeadAttribute;
+    meta: HeadAttribute;
+    link: HeadAttribute;
+    script: HeadAttribute;
+    style: HeadAttribute;
   }
 
-  declare var exports: ReactHelmet
+  declare class Helmet extends React$Component {
+    static rewind(): Head;
+    props: Props;
+  }
+  declare var exports: typeof Helmet;
 }
diff --git a/package.json b/package.json
@@ -123,6 +123,7 @@
     "react-helmet": "^3.0.0",
     "react-redux": "^4.0.0",
     "react-router": "^2.3.0",
+    "react-test-renderer": "^15.3.2",
     "redux": "^3.0.0",
     "stylelint": "^7.2.0",
     "stylelint-config-standard": "^13.0.0",

diff --git a/src/_utils/html-metas/__tests__/index.js b/src/_utils/html-metas/__tests__/index.js
diff --git a/src/_utils/html-metas/index.js b/src/_utils/html-metas/index.js
diff --git a/src/components/Html/__tests__/__snapshots__/index.js.snap b/src/components/Html/__tests__/__snapshots__/index.js.snap
@@ -0,0 +1,31 @@
+exports[`test should render Html componnent 1`] = `
+<html
+  lang="en">
+  <head>
+    <title
+      data-react-helmet={true} />
+    <meta
+      charSet="utf-8"
+      data-react-helmet={true} />
+    <meta
+      content="IE=edge"
+      data-react-helmet={true}
+      httpEquiv="X-UA-Compatible" />
+    <meta
+      content="width=device-width, initial-scale=1"
+      data-react-helmet={true}
+      name="viewport" />
+    <link
+      data-react-helmet={true}
+      href="test.css"
+      rel="stylesheet" />
+  </head>
+  <body>
+    <div />
+    <script />
+    <script
+      data-react-helmet={true}
+      src="test.css" />
+  </body>
+</html>
+`;
diff --git a/src/components/Html/__tests__/index.js b/src/components/Html/__tests__/index.js
@@ -1,50 +1,18 @@
-import test from "jest-ava-api"
 import React from "react"
 import { createRenderer } from "react-addons-test-utils"
-import expect from "expect"
-import expectJSX from "expect-jsx"
 
 import Html from "../index.js"
 
-expect.extend(expectJSX)
-
-const head = "head"
-const body = "body"
-const script = "script"
-const htmlProps = { lang: "en" }
-
-const renderer = (...args) => {
-  const render = createRenderer()
-  render.render(...args)
-  return render.getRenderOutput()
-}
-
 test("should render Html componnent", () => {
-  expect(
-    renderer(
-      <Html
-        htmlProps={ htmlProps }
-        head={ head }
-        body={ body }
-        script={ script }
-        config={{ clientScripts: true }}
-      >
-        <p>{ "foo" }</p>
-      </Html>
-    )
-  ).toEqualJSX(
-    <html
-      lang="en"
-    >
-      <head dangerouslySetInnerHTML={{ __html: head }} />
-      <body>
-        <div
-          dangerouslySetInnerHTML={{ __html: body }}
-          id="phenomic"
-        />
-        <script dangerouslySetInnerHTML={{ __html: script }} />
-        <p>{ "foo" }</p>
-      </body>
-    </html>
+  const renderer = createRenderer()
+  renderer.render(
+    /* eslint-disable react/jsx-no-bind */
+    <Html
+      css={ [ "test.css" ] }
+      js={ [ "test.css" ] }
+      renderBody={ () => <div /> }
+      renderScript={ () => <script /> }
+    />
   )
+  expect(renderer.getRenderOutput()).toMatchSnapshot()
 })
diff --git a/src/components/Html/index.js b/src/components/Html/index.js
@@ -1,31 +1,65 @@
 // @flow
 
 import React from "react"
+import { renderToString } from "react-dom/server"
+import Helmet from "react-helmet"
 
 type Props = {
-  htmlProps: Object,
-  head: string,
-  body: string,
-  script: string,
-  config: PhenomicStaticConfig,
-  children?: any,
+  css: Array<string>,
+  js: Array<string>,
+  renderBody: () => React$Element<any>,
+  renderScript: () => React$Element<any>,
 }
 
-const Html = (props: Props) => (
-  <html { ...props.htmlProps }>
-    <head dangerouslySetInnerHTML={{ __html: props.head }} />
-    <body>
-      <div
-        id="phenomic"
-        dangerouslySetInnerHTML={{ __html: props.body }}
-      />
-      {
-        props.config.clientScripts &&
-        <script dangerouslySetInnerHTML={{ __html: props.script }} />
-      }
-      { props.config.clientScripts && props.children }
-    </body>
-  </html>
-)
+const defaultHtmlAttributes = {
+  "lang": "en",
+}
+const defaultMeta = [
+  // <meta charset="utf-8" />
+  { "charset": "utf-8" },
+  // <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  { "http-equiv": "X-UA-Compatible", "content": "IE=edge" },
+  // <meta name="viewport" content="width=device-width, initial-scale=1" />
+  { "name": "viewport", "content": "width=device-width, initial-scale=1" },
+]
+
+const Html = (props: Props) => {
+  // Inject default html metas before
+  // Those need to be rendered somehow otherwise Helmet won't consider those
+  renderToString(
+    <Helmet
+      htmlAttributes={ defaultHtmlAttributes }
+      meta={ defaultMeta }
+      link={ [
+        ...props.css.map((file) => ({ rel: "stylesheet", href: file })),
+      ] }
+      script={ [
+        ...props.js.map((file) => ({ src: file })),
+      ] }
+    />
+  )
+
+  // render body
+  const body = props.renderBody()
+  // rewind html metas
+  const head = Helmet.rewind()
+
+  // <!doctype html> is automatically prepended
+  return (
+    <html { ...head.htmlAttributes.toComponent() }>
+      <head>
+        { head.base.toComponent() }
+        { head.title.toComponent() }
+        { head.meta.toComponent() }
+        { head.link.toComponent() }
+      </head>
+      <body>
+        { body }
+        { props.renderScript() }
+        { head.script.toComponent() }
+      </body>
+    </html>
+  )
+}
 
 export default Html
diff --git a/src/static/__tests__/results/destination/index.html.js b/src/static/__tests__/results/destination/index.html.js
@@ -1,15 +1,14 @@
 /* eslint-disable max-len */
-import htmlMetas from "../../../../_utils/html-metas"
-
 export default () => (
       `<!doctype html>
 <html lang="en">
 
 <head>
-  ${ htmlMetas({
-    baseUrl: { pathname: "/" },
-    css: [ "test.css" ] }).join("\n  ") }
   <title data-react-helmet="true"></title>
+  <meta data-react-helmet="true" charset="utf-8" />
+  <meta data-react-helmet="true" http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1" />
+  <link data-react-helmet="true" rel="stylesheet" href="/test.css" />
 </head>
 
 <body>
@@ -32,7 +31,7 @@ export default () => (
       }
     }
   </script>
-  <script src="/test.js"></script>
+  <script data-react-helmet="true" src="/test.js"></script>
 </body>
 
 </html>`

diff --git a/src/static/__tests__/results/destination/test-url/index.html.js b/src/static/__tests__/results/destination/test-url/index.html.js
@@ -1,15 +1,14 @@
 /* eslint-disable max-len */
-import htmlMetas from "../../../../../_utils/html-metas"
-
 export default () => (
       `<!doctype html>
 <html lang="en">
 
 <head>
-  ${ htmlMetas({
-    baseUrl: { pathname: "/" },
-    css: [ "test.css" ] }).join("\n  ") }
   <title data-react-helmet="true"></title>
+  <meta data-react-helmet="true" charset="utf-8" />
+  <meta data-react-helmet="true" http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1" />
+  <link data-react-helmet="true" rel="stylesheet" href="/test.css" />
 </head>
 
 <body>
@@ -28,7 +27,7 @@ export default () => (
       "pages": {}
     }
   </script>
-  <script src="/test.js"></script>
+  <script data-react-helmet="true" src="/test.js"></script>
 </body>
 
 </html>`

diff --git a/src/static/__tests__/results/destination/test/index.html.js b/src/static/__tests__/results/destination/test/index.html.js
@@ -1,15 +1,14 @@
 /* eslint-disable max-len */
-import htmlMetas from "../../../../../_utils/html-metas"
-
 export default () => (
       `<!doctype html>
 <html lang="en">
 
 <head>
-  ${ htmlMetas({
-    baseUrl: { pathname: "/" },
-    css: [ "test.css" ] }).join("\n  ") }
   <title data-react-helmet="true"></title>
+  <meta data-react-helmet="true" charset="utf-8" />
+  <meta data-react-helmet="true" http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1" />
+  <link data-react-helmet="true" rel="stylesheet" href="/test.css" />
 </head>
 
 <body>
@@ -28,7 +27,7 @@ export default () => (
       "pages": {}
     }
   </script>
-  <script src="/test.js"></script>
+  <script data-react-helmet="true" src="/test.js"></script>
 </body>
 
 </html>`