Improve Fela example (vercel#2330)

steida · timneutkens · commit c39e555353d6 · 2017-06-28T19:14:18.000+02:00
* Improve Fela example

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

* Fix standard lint
diff --git a/examples/with-fela/fela-renderer.js b/examples/with-fela/fela-renderer.js
@@ -0,0 +1,8 @@
+import { createRenderer } from 'fela'
+import webPreset from 'fela-preset-web'
+
+const felaRenderer = createRenderer({
+  plugins: [...webPreset]
+})
+
+export default felaRenderer
diff --git a/examples/with-fela/fela.js b/examples/with-fela/fela.js
diff --git a/examples/with-fela/layout.js b/examples/with-fela/layout.js
@@ -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>
-)
diff --git a/examples/with-fela/package.json b/examples/with-fela/package.json
@@ -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",
diff --git a/examples/with-fela/pages/_document.js b/examples/with-fela/pages/_document.js
@@ -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>
diff --git a/examples/with-fela/pages/index.js b/examples/with-fela/pages/index.js
@@ -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 () => (
+const Title = createComponent(
+  ({ size = 24 }) => ({
+    fontSize: size,
+    color: '#555'
+  }),
+  Text,
+)
+
+export default () =>
   <Page>
-    <Title size={50}>My Title</Title>
+    <Container>
+      <Title size={50}>My Title</Title>
+      <Text>Hi, I am Fela.</Text>
+    </Container>
   </Page>
-)
