update styletron example (#5573)

examples/with-styletron/layout.js

@@ -1,8 +0,0 @@
-import { StyletronProvider } from 'styletron-react'
-import getStyletron from './styletron'
-
-export default ({ children }) => (
-  <StyletronProvider styletron={getStyletron()}>
-    {children}
-  </StyletronProvider>
-)

examples/with-styletron/package.json

@@ -10,8 +10,8 @@
     "next": "latest",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "styletron-client": "^2.2.0",
+    "styletron": "^3.0.4",
-    "styletron-react": "^2.2.1",
+    "styletron-engine-atomic": "^1.0.8",
-    "styletron-server": "^2.2.0"
+    "styletron-react": "^4.3.5"
   }
 }

examples/with-styletron/pages/_app.js

@@ -0,0 +1,19 @@
+import App, { Container } from 'next/app'
+import React from 'react'
+import { Provider as StyletronProvider } from 'styletron-react'
+import getStyletron from '../styletron'
+
+class MyApp extends App {
+  render () {
+    const { Component } = this.props
+    return (
+      <Container>
+        <StyletronProvider value={getStyletron()}>
+          <Component />
+        </StyletronProvider>
+      </Container>
+    )
+  }
+}
+
+export default MyApp

examples/with-styletron/pages/_document.js

@@ -17,7 +17,7 @@ export default class MyDocument extends Document {
             <style
               className='_styletron_hydrate_'
               dangerouslySetInnerHTML={{ __html: sheet.css }}
-              media={sheet.media || ''}
+              media={sheet.media || null}
               key={i}
             />
           ))}

examples/with-styletron/pages/index.js

@@ -1,5 +1,4 @@
 import { styled } from 'styletron-react'
-import Page from '../layout'
 
 const Title = styled('div', {
   color: 'red',
@@ -7,7 +6,7 @@ const Title = styled('div', {
 })
 
 export default () => (
-  <Page>
+  <div>
     <Title>My page</Title>
-  </Page>
+  </div>
 )

examples/with-styletron/styletron.js

@@ -1,18 +1,16 @@
-
 const isServer = typeof window === 'undefined'
 
 let styletron
 
 export default function getStyletron () {
-  if (isServer) {
+  if (isServer && !styletron) {
-    const Styletron = require('styletron-server')
+    const Styletron = require('styletron-engine-atomic').Server
     styletron = new Styletron()
   } else if (!styletron) {
-    const Styletron = require('styletron-client')
+    const Styletron = require('styletron-engine-atomic').Client
     const styleElements = document.getElementsByClassName('_styletron_hydrate_')
     styletron = new Styletron(styleElements)
   }
-
   return styletron
 }