From 30aefe314d4542491ba5aa9a5494c2f8203204d6 Mon Sep 17 00:00:00 2001 From: rofrischmann Date: Mon, 23 Jan 2017 14:39:16 +0100 Subject: [PATCH 1/5] added example using fela --- examples/with-fela/README.md | 30 ++++++++++++++++++++++ examples/with-fela/fela.js | 16 ++++++++++++ examples/with-fela/layout.js | 8 ++++++ examples/with-fela/package.json | 15 +++++++++++ examples/with-fela/pages/_document.js | 32 ++++++++++++++++++++++++ examples/with-fela/pages/index.js | 15 +++++++++++ examples/with-fela/pages/nested/route.js | 20 +++++++++++++++ 7 files changed, 136 insertions(+) create mode 100644 examples/with-fela/README.md create mode 100644 examples/with-fela/fela.js create mode 100644 examples/with-fela/layout.js create mode 100644 examples/with-fela/package.json create mode 100644 examples/with-fela/pages/_document.js create mode 100644 examples/with-fela/pages/index.js create mode 100644 examples/with-fela/pages/nested/route.js diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md new file mode 100644 index 0000000000000..639af1b9bf47b --- /dev/null +++ b/examples/with-fela/README.md @@ -0,0 +1,30 @@ + +# Example app with Fela + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-fela +cd with-fela +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela). + +For this purpose we are extending the `` and injecting the server side rendered styles into the ``. diff --git a/examples/with-fela/fela.js b/examples/with-fela/fela.js new file mode 100644 index 0000000000000..b10e2dfc08007 --- /dev/null +++ b/examples/with-fela/fela.js @@ -0,0 +1,16 @@ +import { createRenderer } from 'fela' + +// add your renderer configuration here +const renderer = createRenderer() + +export function getRenderer() { + return renderer +} + +export function getMountNode() { + if (typeof window !== 'undefined') { + return document.getElementById('fela-stylesheet') + } + + return undefined +} diff --git a/examples/with-fela/layout.js b/examples/with-fela/layout.js new file mode 100644 index 0000000000000..345c79770c6f8 --- /dev/null +++ b/examples/with-fela/layout.js @@ -0,0 +1,8 @@ +import { Provider } from 'react-fela' +import { getRenderer, getMountNode } from './fela' + +export default ({ children }) => ( + + {children} + +) diff --git a/examples/with-fela/package.json b/examples/with-fela/package.json new file mode 100644 index 0000000000000..900dc6e354a98 --- /dev/null +++ b/examples/with-fela/package.json @@ -0,0 +1,15 @@ +{ + "name": "with-fela", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "fela": "^4.1.2", + "fela-dom": "^4.1.2", + "next": "^2.0.0-beta", + "react-fela": "^4.1.2" + } +} \ No newline at end of file diff --git a/examples/with-fela/pages/_document.js b/examples/with-fela/pages/_document.js new file mode 100644 index 0000000000000..34838ee2b153d --- /dev/null +++ b/examples/with-fela/pages/_document.js @@ -0,0 +1,32 @@ +import Document, { Head, Main, NextScript } from 'next/document' +import { getRenderer } from '../fela' + +export default class MyDocument extends Document { + static getInitialProps({ renderPage }) { + const page = renderPage() + const renderer = getRenderer() + const css = renderer.renderToString() + + renderer.clear() + + return { + ...page, + css, + } + } + + render() { + return ( + + + My page + + + +
+ + + + ) + } +} diff --git a/examples/with-fela/pages/index.js b/examples/with-fela/pages/index.js new file mode 100644 index 0000000000000..4344ee5d11c7a --- /dev/null +++ b/examples/with-fela/pages/index.js @@ -0,0 +1,15 @@ +import { createComponent } from 'react-fela' +import Page from '../layout' + +const title = ({ size }) => ({ + fontSize: size + 'px', + color: 'red' +}) + +const Title = createComponent(title, 'h1') + +export default () => ( + + My Title + +) diff --git a/examples/with-fela/pages/nested/route.js b/examples/with-fela/pages/nested/route.js new file mode 100644 index 0000000000000..0eebef0ece0b8 --- /dev/null +++ b/examples/with-fela/pages/nested/route.js @@ -0,0 +1,20 @@ +import { createComponent } from 'react-fela' +import Page from '../../layout' + +import Link from 'next/link' + +const title = () => ({ + color: 'yellow', + fontSize: '120px', + background: 'green', +}) + +const Title = createComponent(title) + +export default () => ( + + My Nested Subroute + back home + route + +) From 9d73513cbb03ed11d07586d99a892fe070007da0 Mon Sep 17 00:00:00 2001 From: rofrischmann Date: Mon, 23 Jan 2017 14:40:48 +0100 Subject: [PATCH 2/5] update package-json --- examples/with-fela/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/with-fela/package.json b/examples/with-fela/package.json index 900dc6e354a98..ff56591b73576 100644 --- a/examples/with-fela/package.json +++ b/examples/with-fela/package.json @@ -8,7 +8,6 @@ }, "dependencies": { "fela": "^4.1.2", - "fela-dom": "^4.1.2", "next": "^2.0.0-beta", "react-fela": "^4.1.2" } From 033b7fd4f94abce12382dd16799faab9489d7b02 Mon Sep 17 00:00:00 2001 From: rofrischmann Date: Mon, 23 Jan 2017 15:11:48 +0100 Subject: [PATCH 3/5] removed nested routing test --- examples/with-fela/pages/nested/route.js | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 examples/with-fela/pages/nested/route.js diff --git a/examples/with-fela/pages/nested/route.js b/examples/with-fela/pages/nested/route.js deleted file mode 100644 index 0eebef0ece0b8..0000000000000 --- a/examples/with-fela/pages/nested/route.js +++ /dev/null @@ -1,20 +0,0 @@ -import { createComponent } from 'react-fela' -import Page from '../../layout' - -import Link from 'next/link' - -const title = () => ({ - color: 'yellow', - fontSize: '120px', - background: 'green', -}) - -const Title = createComponent(title) - -export default () => ( - - My Nested Subroute - back home - route - -) From 67357fa2cfe8d64177e43a100ff128b3f8c97919 Mon Sep 17 00:00:00 2001 From: rofrischmann Date: Mon, 23 Jan 2017 15:22:43 +0100 Subject: [PATCH 4/5] fixed linting issues --- examples/with-fela/fela.js | 4 ++-- examples/with-fela/layout.js | 2 +- examples/with-fela/pages/_document.js | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/with-fela/fela.js b/examples/with-fela/fela.js index b10e2dfc08007..4bf7099801063 100644 --- a/examples/with-fela/fela.js +++ b/examples/with-fela/fela.js @@ -3,11 +3,11 @@ import { createRenderer } from 'fela' // add your renderer configuration here const renderer = createRenderer() -export function getRenderer() { +export function getRenderer () { return renderer } -export function getMountNode() { +export function getMountNode () { if (typeof window !== 'undefined') { return document.getElementById('fela-stylesheet') } diff --git a/examples/with-fela/layout.js b/examples/with-fela/layout.js index 345c79770c6f8..fe180685492a9 100644 --- a/examples/with-fela/layout.js +++ b/examples/with-fela/layout.js @@ -3,6 +3,6 @@ import { getRenderer, getMountNode } from './fela' export default ({ children }) => ( - {children} + {children} ) diff --git a/examples/with-fela/pages/_document.js b/examples/with-fela/pages/_document.js index 34838ee2b153d..cc423d80bcb67 100644 --- a/examples/with-fela/pages/_document.js +++ b/examples/with-fela/pages/_document.js @@ -2,7 +2,7 @@ import Document, { Head, Main, NextScript } from 'next/document' import { getRenderer } from '../fela' export default class MyDocument extends Document { - static getInitialProps({ renderPage }) { + static getInitialProps ({ renderPage }) { const page = renderPage() const renderer = getRenderer() const css = renderer.renderToString() @@ -11,16 +11,16 @@ export default class MyDocument extends Document { return { ...page, - css, + css } } - render() { + render () { return ( My page - +
From 9a3c5af6c4e60b1621651cbb5408eddb6caf5ada Mon Sep 17 00:00:00 2001 From: rofrischmann Date: Tue, 24 Jan 2017 00:22:21 +0100 Subject: [PATCH 5/5] fixed typo --- examples/with-fela/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md index 639af1b9bf47b..88a976f18a568 100644 --- a/examples/with-fela/README.md +++ b/examples/with-fela/README.md @@ -25,6 +25,6 @@ now ## The idea behind the example -This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela). +This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela). For this purpose we are extending the `` and injecting the server side rendered styles into the ``.