FIX #3757 update Fela example for Next 5 (#3949)

* #3757 update Fela for Next 5

closes #3757

* add missing props passdown

examples/with-fela/FelaProvider.js

@@ -0,0 +1,26 @@
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { Provider } from 'react-fela'
+import getFelaRenderer from './getFelaRenderer'
+
+const clientRenderer = getFelaRenderer()
+
+export default class FelaProvider extends Component {
+  static contextTypes = {
+    renderer: PropTypes.object
+  };
+
+  render () {
+    if (this.context.renderer) {
+      return this.props.children
+    }
+
+    const renderer = this.props.renderer || clientRenderer
+    return (
+      <Provider renderer={renderer}>
+        {this.props.children}
+      </Provider>
+    )
+  }
+}

examples/with-fela/fela-renderer.js

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

examples/with-fela/getFelaRenderer.js

@@ -0,0 +1,10 @@
+import { createRenderer } from 'fela'
+import webPreset from 'fela-preset-web'
+
+export default function getRenderer () {
+  return createRenderer({
+    plugins: [
+      ...webPreset
+    ]
+  })
+}

examples/with-fela/layout.js

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

examples/with-fela/package.json

@@ -7,12 +7,12 @@
     "start": "next start"
   },
   "dependencies": {
-    "fela": "^5.0.1",
-    "fela-dom": "5.0.2",
-    "fela-preset-web": "^5.0.2",
+    "fela": "^6.1.4",
+    "fela-dom": "^7.0.5",
+    "fela-preset-web": "^8.0.4",
     "next": "latest",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-fela": "^5.0.2"
+    "react-fela": "^7.0.1"
   }
 }

examples/with-fela/pages/_document.js

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

examples/with-fela/pages/index.js

@@ -1,5 +1,6 @@
 import { createComponent } from 'react-fela'
-import Page from '../layout'
+
+import FelaProvider from '../FelaProvider'
 
 const Container = createComponent(() => ({
   maxWidth: 700,
@@ -20,13 +21,14 @@ const Title = createComponent(
     fontSize: size,
     color: '#555'
   }),
-  Text,
+  Text
 )
 
-export default () =>
-  <Page>
+export default () => (
+  <FelaProvider>
     <Container>
       <Title size={50}>My Title</Title>
       <Text>Hi, I am Fela.</Text>
     </Container>
-  </Page>
+  </FelaProvider>
+)