terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Improve Fela example (#2330)

Browse source 
* Improve Fela example

- add webPreset
- cleaner code
- add key for style
- demonstrate Fela composition

* Fix standard lint
This commit is contained in:
Daniel Steigerwald 2017-06-28 19:14:18 +02:00 committed by Tim Neutkens
parent 3be175b466
commit c39e555353
6 changed files with 49 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/with-fela/fela-renderer.js Normal file
View file

@ -0,0 +1,8 @@
import { createRenderer } from 'fela'
import webPreset from 'fela-preset-web'
const felaRenderer = createRenderer({
plugins: [...webPreset]
})
export default felaRenderer

8
examples/with-fela/fela.js
View file

@ -1,8 +0,0 @@
import { createRenderer } from 'fela'
// add your renderer configuration here
const renderer = createRenderer()
export default function getRenderer () {
return renderer
}

7
examples/with-fela/layout.js
View file

@ -1,8 +1,7 @@
import { Provider } from 'react-fela'
import getRenderer from './fela'
import felaRenderer from './fela-renderer'
export default ({ children }) => (
<Provider renderer={getRenderer()}>
export default ({ children }) =>
<Provider renderer={felaRenderer}>
{children}
</Provider>
)

1
examples/with-fela/package.json
View file

@ -9,6 +9,7 @@
"dependencies": {
"fela": "^5.0.1",
"fela-dom": "5.0.2",
"fela-preset-web": "^5.0.2",
"next": "latest",
"react": "^15.4.2",
"react-dom": "^15.4.2",

19
examples/with-fela/pages/_document.js
View file

@ -1,14 +1,12 @@
import Document, { Head, Main, NextScript } from 'next/document'
import { renderToSheetList } from 'fela-dom'
import getRenderer from '../fela'
import felaRenderer from '../fela-renderer'
export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
const page = renderPage()
const renderer = getRenderer()
const sheetList = renderToSheetList(renderer)
renderer.clear()
const sheetList = renderToSheetList(felaRenderer)
felaRenderer.clear()
return {
...page,
@ -17,9 +15,14 @@ export default class MyDocument extends Document {
}
render () {
const styleNodes = this.props.sheetList.map(({ type, media, css }) => (
<style data-fela-type={type} media={media} dangerouslySetInnerHTML={{ __html: css }} />
))
const styleNodes = this.props.sheetList.map(({ type, media, css }) =>
<style
dangerouslySetInnerHTML={{ __html: css }}
data-fela-type={type}
key={`${type}-${media}`}
media={media}
/>,
)
return (
<html>

36
examples/with-fela/pages/index.js
View file

@ -1,16 +1,32 @@
import { createComponent } from 'react-fela'
import Page from '../layout'
const title = ({ size }) => ({
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
fontSize: size + 'px',
color: 'red'
})
const Container = createComponent(() => ({
maxWidth: 700,
marginLeft: 'auto',
marginRight: 'auto',
lineHeight: 1.5
}))
const Title = createComponent(title, 'h1')
const Text = createComponent(({ size = 16 }) => ({
fontFamily:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
fontSize: size,
color: '#333'
}))
export default () => (
<Page>
<Title size={50}>My Title</Title>
</Page>
const Title = createComponent(
({ size = 24 }) => ({
fontSize: size,
color: '#555'
}),
Text,
)
export default () =>
<Page>
<Container>
<Title size={50}>My Title</Title>
<Text>Hi, I am Fela.</Text>
</Container>
</Page>