✨ Added: support for aphrodite out of the box.

Closes #864
MoOx · Nov 16, 2016 · 9550cd6 · 9550cd6
1 parent 15f55f8
commit 9550cd6
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 82 deletions.
diff --git a/src/builder/webpack/config.node.js b/src/builder/webpack/config.node.js
@@ -20,10 +20,13 @@ const defaultExternals = [
   // to not bundle all deps in the static build (for perf)
   // the problem is that if people rely on node_modules for stuff
   // like css, this breaks their build.
-  //
+
   // Glamor integration
   "glamor",
   "glamor/server",
+
+  // Aprodite integration
+  "aphrodite",
 ]
 
 const sourceMapSupport = require.resolve("source-map-support/register")

diff --git a/src/components/Html/__tests__/__snapshots__/aphrodite.js.snap b/src/components/Html/__tests__/__snapshots__/aphrodite.js.snap
@@ -0,0 +1,53 @@
+exports[`test should render Html component with aphrodite styles when possible 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" />
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".stuff {}",
+        }
+      }
+      data-aphrodite={undefined}
+      data-react-helmet={true} />
+    <link
+      data-react-helmet={true}
+      href="test.css"
+      rel="stylesheet" />
+  </head>
+  <body>
+    <div
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<div />",
+        }
+      }
+      id="phenomic" />
+    <script
+      phenomicStuff={true} />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "window._aphrodite = [\"stuff\"]);",
+        }
+      }
+      data-react-helmet={true} />
+    <script
+      data-react-helmet={true}
+      src="test.js" />
+  </body>
+</html>
+`;
diff --git a/src/components/Html/__tests__/__snapshots__/glamor.js.snap b/src/components/Html/__tests__/__snapshots__/glamor.js.snap
@@ -0,0 +1,52 @@
+exports[`test should render Html component with glamor styles when possible 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" />
+    <style
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ".stuff {}",
+        }
+      }
+      data-react-helmet={true} />
+    <link
+      data-react-helmet={true}
+      href="test.css"
+      rel="stylesheet" />
+  </head>
+  <body>
+    <div
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<div />",
+        }
+      }
+      id="phenomic" />
+    <script
+      phenomicStuff={true} />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "window._glamor = [{\"id\":\"s\"}]",
+        }
+      }
+      data-react-helmet={true} />
+    <script
+      data-react-helmet={true}
+      src="test.js" />
+  </body>
+</html>
+`;
diff --git a/src/components/Html/__tests__/__snapshots__/index.js.snap b/src/components/Html/__tests__/__snapshots__/index.js.snap
@@ -36,56 +36,3 @@ exports[`test should render Html component 1`] = `
   </body>
 </html>
 `;
-
-exports[`test should render Html component when glamor available 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" />
-    <style
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": ".stuff {}",
-        }
-      }
-      data-react-helmet={true} />
-    <link
-      data-react-helmet={true}
-      href="test.css"
-      rel="stylesheet" />
-  </head>
-  <body>
-    <div
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<div />",
-        }
-      }
-      id="phenomic" />
-    <script
-      phenomicStuff={true} />
-    <script
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "window._glam = [{\"id\":\"s\"}]",
-        }
-      }
-      data-react-helmet={true} />
-    <script
-      data-react-helmet={true}
-      src="test.js" />
-  </body>
-</html>
-`;
diff --git a/src/components/Html/__tests__/aphrodite.js b/src/components/Html/__tests__/aphrodite.js
@@ -0,0 +1,33 @@
+import React from "react"
+import { createRenderer } from "react-addons-test-utils"
+
+import Html from "../index.js"
+
+test("should render Html component with aphrodite styles when possible", () => {
+  jest.mock(
+    "aphrodite",
+    () => ({
+      StyleSheetServer: {
+        renderStatic: (render) => ({
+          html: render(),
+          css: {
+            content: ".stuff {}",
+            renderedClassNames: [ "stuff" ],
+          },
+        }),
+      },
+    }),
+    { virtual: true }
+  )
+  const renderer = createRenderer()
+  renderer.render(
+    /* eslint-disable react/jsx-no-bind */
+    <Html
+      css={ [ "test.css" ] }
+      js={ [ "test.js" ] }
+      renderBody={ () => "<div />" }
+      renderScript={ () => <script phenomicStuff /> }
+    />
+  )
+  expect(renderer.getRenderOutput()).toMatchSnapshot()
+})
diff --git a/src/components/Html/__tests__/glamor.js b/src/components/Html/__tests__/glamor.js
@@ -0,0 +1,29 @@
+import React from "react"
+import { createRenderer } from "react-addons-test-utils"
+
+import Html from "../index.js"
+
+test("should render Html component with glamor styles when possible", () => {
+  jest.mock(
+    "glamor/server",
+    () => ({
+      renderStatic: (render) => ({
+        html: render(),
+        css: ".stuff {}",
+        ids: [ { id: "s" } ],
+      }),
+    }),
+    { virtual: true }
+  )
+  const renderer = createRenderer()
+  renderer.render(
+    /* eslint-disable react/jsx-no-bind */
+    <Html
+      css={ [ "test.css" ] }
+      js={ [ "test.js" ] }
+      renderBody={ () => "<div />" }
+      renderScript={ () => <script phenomicStuff /> }
+    />
+  )
+  expect(renderer.getRenderOutput()).toMatchSnapshot()
+})
diff --git a/src/components/Html/__tests__/index.js b/src/components/Html/__tests__/index.js
@@ -16,29 +16,3 @@ test("should render Html component", () => {
   )
   expect(renderer.getRenderOutput()).toMatchSnapshot()
 })
-
-test("should render Html component when glamor available", () => {
-  jest.mock(
-    "glamor/server",
-    () => ({
-      renderStatic: (render) => ({
-        html: render(),
-        css: ".stuff {}",
-        ids: [ { id: "s" } ],
-      }),
-    }),
-    { virtual: true }
-  )
-  const renderer = createRenderer()
-  renderer.render(
-    /* eslint-disable react/jsx-no-bind */
-    <Html
-      css={ [ "test.css" ] }
-      js={ [ "test.js" ] }
-      renderBody={ () => "<div />" }
-      renderScript={ () => <script phenomicStuff /> }
-    />
-  )
-  expect(renderer.getRenderOutput()).toMatchSnapshot()
-  jest.unmock("glamor/server", { virtual: true })
-})
diff --git a/src/components/Html/index.js b/src/components/Html/index.js
@@ -45,26 +45,56 @@ const Html = (props: Props) => {
     // skip glamor if not working
   }
 
+  // Aprodite
+  // https://github.com/Khan/aphrodite#server-side-rendering
+  let aproditeRenderStatic
+  try {
+    // $FlowFixMe just ignore aprodite as we don't have it as a dep
+    aproditeRenderStatic = require("aphrodite").StyleSheetServer.renderStatic
+  }
+  catch (e) {
+    // skip aprodite if not working
+  }
+
   // render body
   let body
   if (glamorRenderStatic) {
     const glamorResult = glamorRenderStatic(() => props.renderBody())
 
-    console.log({ glamorResult })
     renderToString(
       <Helmet
         style={ [
           { "cssText": glamorResult.css },
         ] }
         script={ [
-          { "innerHTML": `window._glam = ${
+          { "innerHTML": `window._glamor = ${
             JSON.stringify(glamorResult.ids)
           }` },
         ] }
       />
     )
     body = glamorResult.html
   }
+  else if (aproditeRenderStatic) {
+    const aproditeResult = aproditeRenderStatic(() => props.renderBody())
+
+    renderToString(
+      <Helmet
+        style={ [
+          {
+            "cssText": aproditeResult.css.content,
+            "data-aphrodite": undefined,
+          },
+        ] }
+        script={ [
+          { "innerHTML": `window._aphrodite = ${
+            JSON.stringify(aproditeResult.css.renderedClassNames)
+          });` },
+        ] }
+      />
+    )
+    body = aproditeResult.html
+  }
 
   body = body || props.renderBody()