From 15f55f8b4a672569db2e12c9df8cd37ee4bcaab7 Mon Sep 17 00:00:00 2001 From: Maxime Thirouin Date: Wed, 16 Nov 2016 08:47:24 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added:=20support=20for=20``Glamor``?= =?UTF-8?q?=20and=20``styled-components``=20out=20of=20the=20box.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Now if you use [Glamor](https://github.com/threepointone/glamor/) to write your style, static rendering will take that into account and will prerender styles for you. Nothing to setup. It’s even injecting glamor ids if you want to rehydrate on startup. See [glamor server documentation](https://github.com/threepointone/glamor/blob/master/docs/ server.md) to setup hydratation (you will need to handle this yourself in your ``scripts/phenomic.browser.js``. Since [styled-components](https://styled-components.com/) [use Glamor under the hood](https://github.com/styled-components/styled-components/issues/124) , this will work for this library as well. Ref #864 --- src/builder/webpack/config.node.js | 4 ++ .../__tests__/__snapshots__/index.js.snap | 68 +++++++++++++++++-- src/components/Html/__tests__/index.js | 34 ++++++++-- src/components/Html/index.js | 45 +++++++++++- src/static/__tests__/url-as-html.js | 2 +- src/static/url-as-html.js | 26 +++---- 6 files changed, 151 insertions(+), 28 deletions(-) diff --git a/src/builder/webpack/config.node.js b/src/builder/webpack/config.node.js index 9665394a3..f47e92d56 100644 --- a/src/builder/webpack/config.node.js +++ b/src/builder/webpack/config.node.js @@ -20,6 +20,10 @@ 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", ] const sourceMapSupport = require.resolve("source-map-support/register") diff --git a/src/components/Html/__tests__/__snapshots__/index.js.snap b/src/components/Html/__tests__/__snapshots__/index.js.snap index 9b811c66a..ef820b1d9 100644 --- a/src/components/Html/__tests__/__snapshots__/index.js.snap +++ b/src/components/Html/__tests__/__snapshots__/index.js.snap @@ -1,4 +1,4 @@ -exports[`test should render Html componnent 1`] = ` +exports[`test should render Html component 1`] = ` @@ -21,11 +21,71 @@ exports[`test should render Html componnent 1`] = ` rel="stylesheet" /> -
- - + `) diff --git a/src/static/url-as-html.js b/src/static/url-as-html.js index 126cc6cd1..a75d4986e 100644 --- a/src/static/url-as-html.js +++ b/src/static/url-as-html.js @@ -64,22 +64,16 @@ export default function( /* eslint-disable react/no-multi-comp */ - const renderBody = () => { - const body = render( - - - - - - ) - - return ( -
- ) - } + const renderBody = () => render( + + + + + + ) const renderScript = () => { if (options.clientScripts) {