Merge master into v3-beta.

examples/with-apollo-and-redux/components/ErrorMessage.js

@@ -0,0 +1,13 @@
+export default ({message}) => (
+  <aside>
+    {message}
+    <style jsx>{`
+      aside {
+        padding: 1.5em;
+        font-size: 14px;
+        color: white;
+        background-color: red;
+      }
+    `}</style>
+  </aside>
+)

examples/with-apollo-and-redux/components/PostList.js

@@ -1,9 +1,11 @@
 import { gql, graphql } from 'react-apollo'
+import ErrorMessage from './ErrorMessage'
 import PostUpvoter from './PostUpvoter'
 
 const POSTS_PER_PAGE = 10
 
-function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
+function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMorePosts }) {
+  if (error) return <ErrorMessage message='Error loading posts.' />
   if (allPosts && allPosts.length) {
     const areMorePosts = allPosts.length < _allPostsMeta.count
     return (

examples/with-apollo-and-redux/lib/withData.js

@@ -5,9 +5,14 @@ import Head from 'next/head'
 import initApollo from './initApollo'
 import initRedux from './initRedux'
 
+// Gets the display name of a JSX component for dev tools
+function getComponentDisplayName (Component) {
+  return Component.displayName || Component.name || 'Unknown'
+}
+
 export default ComposedComponent => {
   return class WithData extends React.Component {
-    static displayName = `WithData(${ComposedComponent.displayName})`
+    static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`
     static propTypes = {
       serverState: PropTypes.object.isRequired
     }
@@ -21,23 +26,28 @@ export default ComposedComponent => {
         composedInitialProps = await ComposedComponent.getInitialProps(ctx)
       }
 
-      // Run all graphql queries in the component tree
+      // Run all GraphQL queries in the component tree
       // and extract the resulting data
       if (!process.browser) {
         const apollo = initApollo()
         const redux = initRedux(apollo)
-        // Provide the `url` prop data in case a graphql query uses it
+        // Provide the `url` prop data in case a GraphQL query uses it
         const url = {query: ctx.query, pathname: ctx.pathname}
 
-        // Run all graphql queries
+        try {
-        const app = (
+          // Run all GraphQL queries
+          await getDataFromTree(
             // No need to use the Redux Provider
             // because Apollo sets up the store for us
             <ApolloProvider client={apollo} store={redux}>
               <ComposedComponent url={url} {...composedInitialProps} />
             </ApolloProvider>
           )
-        await getDataFromTree(app)
+        } catch (error) {
+          // Prevent Apollo Client GraphQL errors from crashing SSR.
+          // Handle them in components via the data.error prop:
+          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
+        }
         // getDataFromTree does not call componentWillUnmount
         // head side effect therefore need to be cleared manually
         Head.rewind()
@@ -48,7 +58,7 @@ export default ComposedComponent => {
         // No need to include other initial Redux state because when it
         // initialises on the client-side it'll create it again anyway
         serverState = {
-          apollo: { // Make sure to only include Apollo's data state
+          apollo: { // Only include the Apollo data state
             data: state.apollo.data
           }
         }

examples/with-apollo/components/ErrorMessage.js

@@ -0,0 +1,13 @@
+export default ({message}) => (
+  <aside>
+    {message}
+    <style jsx>{`
+      aside {
+        padding: 1.5em;
+        font-size: 14px;
+        color: white;
+        background-color: red;
+      }
+    `}</style>
+  </aside>
+)

examples/with-apollo/components/PostList.js

@@ -1,9 +1,11 @@
 import { gql, graphql } from 'react-apollo'
+import ErrorMessage from './ErrorMessage'
 import PostUpvoter from './PostUpvoter'
 
 const POSTS_PER_PAGE = 10
 
-function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
+function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMorePosts }) {
+  if (error) return <ErrorMessage message='Error loading posts.' />
   if (allPosts && allPosts.length) {
     const areMorePosts = allPosts.length < _allPostsMeta.count
     return (

examples/with-apollo/lib/withData.js

@@ -4,9 +4,14 @@ import { ApolloProvider, getDataFromTree } from 'react-apollo'
 import Head from 'next/head'
 import initApollo from './initApollo'
 
+// Gets the display name of a JSX component for dev tools
+function getComponentDisplayName (Component) {
+  return Component.displayName || Component.name || 'Unknown'
+}
+
 export default ComposedComponent => {
   return class WithData extends React.Component {
-    static displayName = `WithData(${ComposedComponent.displayName})`
+    static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`
     static propTypes = {
       serverState: PropTypes.object.isRequired
     }
@@ -20,29 +25,34 @@ export default ComposedComponent => {
         composedInitialProps = await ComposedComponent.getInitialProps(ctx)
       }
 
-      // Run all graphql queries in the component tree
+      // Run all GraphQL queries in the component tree
       // and extract the resulting data
       if (!process.browser) {
         const apollo = initApollo()
-        // Provide the `url` prop data in case a graphql query uses it
+        // Provide the `url` prop data in case a GraphQL query uses it
         const url = {query: ctx.query, pathname: ctx.pathname}
-
+        try {
-        // Run all graphql queries
+          // Run all GraphQL queries
-        const app = (
+          await getDataFromTree(
             <ApolloProvider client={apollo}>
               <ComposedComponent url={url} {...composedInitialProps} />
             </ApolloProvider>
           )
-        await getDataFromTree(app)
+        } catch (error) {
+          // Prevent Apollo Client GraphQL errors from crashing SSR.
+          // Handle them in components via the data.error prop:
+          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
+        }
         // getDataFromTree does not call componentWillUnmount
         // head side effect therefore need to be cleared manually
         Head.rewind()
 
-        // Extract query data from the Apollo's store
+        // Extract query data from the Apollo store
         const state = apollo.getInitialState()
 
         serverState = {
-          apollo: { // Make sure to only include Apollo's data state
+          apollo: {
+            // Only include the Apollo data state
             data: state.data
           }
         }

examples/with-emotion/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    ["emotion/babel", { "inline": true }]
+  ]
+}

examples/with-emotion/README.md

@@ -0,0 +1,34 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-emotion)
+
+# Example app with [emotion](https://github.com/tkh44/emotion)
+
+## 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-emotion
+cd with-emotion
+```
+
+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 to use [emotion](https://github.com/tkh44/emotion) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
+
+We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseedo-selector and CSS animations.
+
+
+This is based off the with-glamorous example.

examples/with-emotion/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "with-emotion",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "emotion": "^5.0.0",
+    "next": "^2.4.6",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  },
+  "license": "ISC"
+}

examples/with-emotion/pages/_document.js

@@ -0,0 +1,33 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import { extractCritical } from 'emotion/server'
+
+export default class MyDocument extends Document {
+  static getInitialProps ({ renderPage }) {
+    const page = renderPage()
+    const styles = extractCritical(page.html)
+    return { ...page, ...styles }
+  }
+
+  constructor (props) {
+    super(props)
+    const { __NEXT_DATA__, ids } = props
+    if (ids) {
+      __NEXT_DATA__.ids = this.props.ids
+    }
+  }
+
+  render () {
+    return (
+      <html>
+        <Head>
+          <title>With Emotion</title>
+          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}

examples/with-emotion/pages/index.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import { hydrate, keyframes, fragment, injectGlobal } from 'emotion'
+import styled from 'emotion/react'
+
+// Adds server generated styles to emotion cache.
+// '__NEXT_DATA__.ids' is set in '_document.js'
+if (typeof window !== 'undefined') {
+  hydrate(window.__NEXT_DATA__.ids)
+}
+
+export default () => {
+  injectGlobal`
+    html, body {
+      padding: 3rem 1rem;
+      margin: 0;
+      background: papayawhip;
+      min-height: 100%;
+      font-family: Helvetica, Arial, sans-serif;
+      font-size: 24px;
+    }
+  `
+
+  const basicStyles = fragment`
+    background-color: white;
+    color: cornflowerblue;
+    border: 1px solid lightgreen;
+    border-right: none;
+    border-bottom: none;
+    box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
+    transition: all 0.1s linear;
+    margin: 3rem 0;
+    padding: 1rem 0.5rem;
+  `
+  const hoverStyles = fragment`
+    color: white;
+    background-color: lightgray;
+    border-color: aqua;
+    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  `
+  const bounce = keyframes`
+    from {
+      transform: scale(1.01);
+    }
+    to {
+      transform: scale(0.99);
+    }
+  `
+
+  const Basic = styled.div`@apply ${basicStyles};`
+  const Combined = styled.div`
+    @apply ${basicStyles};
+    &:hover {
+      @apply ${hoverStyles};
+    }
+    & code {
+      background-color: linen;
+    }
+  `
+  const Animated = styled.div`
+    @apply ${basicStyles};
+    &:hover {
+      @apply ${hoverStyles};
+    }
+    & code {
+      background-color: linen;
+    }
+    animation: ${props => props.animation} 0.2s infinite ease-in-out alternate;
+  `
+
+  return (
+    <div>
+      <Basic>Cool Styles</Basic>
+      <Combined>
+        With <code>:hover</code>.
+      </Combined>
+      <Animated animation={bounce}>Let's bounce.</Animated>
+    </div>
+  )
+}

server/build/clean.js

@@ -4,5 +4,5 @@ import getConfig from '../config'
 
 export default function clean (dir) {
   const dist = getConfig(dir).distDir
-  return del(resolve(dir, dist))
+  return del(resolve(dir, dist), { force: true })
 }