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

Merge master into v3-beta.

This commit is contained in:
Arunoda Susiripala 2017-07-06 12:24:31 +05:30
commit c5c270c576
12 changed files with 249 additions and 29 deletions

View file

@ -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>
)

View file

@ -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 (

View file

@ -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
const app = (
// 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)
try {
// 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>
)
} 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
}
}

View file

@ -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>
)

View file

@ -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 (

View file

@ -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}
// Run all graphql queries
const app = (
<ApolloProvider client={apollo}>
<ComposedComponent url={url} {...composedInitialProps} />
</ApolloProvider>
)
await getDataFromTree(app)
try {
// Run all GraphQL queries
await getDataFromTree(
<ApolloProvider client={apollo}>
<ComposedComponent url={url} {...composedInitialProps} />
</ApolloProvider>
)
} 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
}
}

View file

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

View file

@ -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.

View file

@ -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"
}

View file

@ -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>
)
}
}

View file

@ -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>
)
}

View file

@ -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 })
}