Merge with master.

arunoda · arunoda · commit 866319c76d0f · 2017-04-06T15:44:05.000+05:30
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,5 @@ npm-debug.log
 # coverage
 .nyc_output
 coverage
+
+.DS_Store
diff --git a/bin/next-build b/bin/next-build
@@ -22,8 +22,9 @@ if (argv.help) {
     Usage
       $ next build <dir>
 
-    <dir> represents where the compiled .next folder should go.
-    If no directory is provided, .next will be created in the current directory
+    <dir> represents where the compiled dist folder should go.
+    If no directory is provided, the dist folder will be created in the current directory.
+    You can set a custom folder in config https://github.com/zeit/next.js#custom-configuration, otherwise it will be created inside '.next'
   `)
   process.exit(0)
 }
diff --git a/bin/next-dev b/bin/next-dev
@@ -29,8 +29,9 @@ if (argv.help) {
     Usage
       $ next dev <dir> -p <port number>
 
-    <dir> represents where the compiled .next folder should go.
-    If no directory is provided, .next will be created in the current directory
+    <dir> represents where the compiled folder should go.
+    If no directory is provided, the folder will be created in the current directory.
+    You can set a custom folder in config https://github.com/zeit/next.js#custom-configuration.
 
     Options
       --port, -p      A port number on which to start the application
diff --git a/bin/next-start b/bin/next-start
@@ -4,6 +4,7 @@ import { resolve } from 'path'
 import parseArgs from 'minimist'
 import Server from '../server'
 import { existsSync } from 'fs'
+import getConfig from '../server/config'
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
@@ -32,9 +33,10 @@ if (argv.help) {
     Usage
       $ next start <dir> -p <port>
 
-    <dir> is the directory that contains the compiled .next folder
+    <dir> is the directory that contains the compiled dist folder
     created by running \`next build\`.
     If no directory is provided, the current directory will be assumed.
+    You can set a custom dist folder in config https://github.com/zeit/next.js#custom-configuration
 
     Options
       --port, -p      A port number on which to start the application
@@ -45,11 +47,12 @@ if (argv.help) {
 }
 
 const dir = resolve(argv._[0] || '.')
+const dist = getConfig(dir).distDir
 
 const srv = new Server({ dir })
 
-if (!existsSync(resolve(dir, '.next', 'BUILD_ID'))) {
-  console.error(`> Could not find a valid build in the '.next' directory! Try building your app with 'next build' before starting the server.`)
+if (!existsSync(resolve(dir, dist, 'BUILD_ID'))) {
+  console.error(`> Could not find a valid build in the '${dist}' directory! Try building your app with 'next build' before starting the server.`)
   process.exit(1)
 }
 
diff --git a/examples/with-glamorous/README.md b/examples/with-glamorous/README.md
@@ -0,0 +1,30 @@
+
+# Example app with [glamorous](https://github.com/kentcdodds/glamorous)
+
+## 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-glamorous
+cd with-glamorous
+```
+
+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 [glamorous](https://github.com/kentcdodds/glamorous) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx). It also incorporates [glamor](https://github.com/threepointone/glamor) since `glamor` is a dependency for `glamorous`.
+
+We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseedo-elements and CSS animations.
diff --git a/examples/with-glamorous/package.json b/examples/with-glamorous/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "with-glamorous",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "glamor": "^2.20.24",
+    "glamorous": "^1.0.0",
+    "next": "^2.0.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/examples/with-glamorous/pages/_document.js b/examples/with-glamorous/pages/_document.js
@@ -0,0 +1,33 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import { renderStatic } from 'glamor/server'
+
+export default class MyDocument extends Document {
+  static async getInitialProps ({ renderPage }) {
+    const page = renderPage()
+    const styles = renderStatic(() => 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 Glamorous</title>
+          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-glamorous/pages/index.js b/examples/with-glamorous/pages/index.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import { rehydrate, css } from 'glamor'
+import glamorous from 'glamorous'
+
+// Adds server generated styles to glamor cache.
+// Has to run before any `style()` calls
+// '__NEXT_DATA__.ids' is set in '_document.js'
+if (typeof window !== 'undefined') {
+  rehydrate(window.__NEXT_DATA__.ids)
+}
+
+export default () => {
+  css.global('html, body', { padding: '3rem 1rem', margin: 0, background: 'papayawhip', 'min-height': '100%', 'font-family': 'Helvetica, Arial, sans-serif', 'font-size': '24px' })
+
+  const basicStyles = {
+    backgroundColor: 'white',
+    color: 'cornflowerblue',
+    border: '1px solid lightgreen',
+    borderRight: 'none',
+    borderBottom: 'none',
+    boxShadow: '5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow',
+    transition: 'all 0.1s linear',
+    margin: `3rem 0`,
+    padding: `1rem 0.5rem`
+  }
+
+  const hoverStyles = {
+    ':hover': {
+      color: 'white',
+      backgroundColor: 'lightgray',
+      borderColor: 'aqua',
+      boxShadow: `-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue`
+    },
+    '& code': {
+      backgroundColor: 'linen'
+    }
+  }
+
+  const crazyStyles = props => {
+    const crazyStyles = hoverStyles
+    const bounce = css.keyframes({
+      '0%': { transform: `scale(1.01)` },
+      '100%': { transform: `scale(0.99)` }
+    })
+    crazyStyles.animation = `${bounce} 0.2s infinite ease-in-out alternate`
+    return crazyStyles
+  }
+
+  const Basic = glamorous.div(basicStyles)
+  const Combined = glamorous.div(basicStyles, hoverStyles)
+  const Animated = glamorous.div(basicStyles, hoverStyles, crazyStyles)
+
+  return (
+    <div>
+      <Basic>
+        Cool Styles
+      </Basic>
+      <Combined>
+        With <code>:hover</code>.
+      </Combined>
+      <Animated>
+        Let's bounce.
+      </Animated>
+    </div>
+  )
+}
diff --git a/examples/with-universal-configuration/README.md b/examples/with-universal-configuration/README.md
@@ -6,8 +6,8 @@
 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/basic-css
-cd basic-css
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-universal-configuration
+cd with-universal-configuration
 ```
 
 Install it and run:
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "cross-spawn": "5.1.0",
     "del": "2.2.2",
     "friendly-errors-webpack-plugin": "1.5.0",
+    "glob": "^7.1.1",
     "glob-promise": "3.1.0",
     "htmlescape": "1.1.1",
     "http-status": "1.0.1",
@@ -90,7 +91,7 @@
     "uuid": "3.0.1",
     "webpack": "2.3.3",
     "webpack-dev-middleware": "1.10.1",
-    "webpack-hot-middleware": "2.17.1",
+    "webpack-hot-middleware": "2.18.0",
     "write-file-webpack-plugin": "4.0.0"
   },
   "devDependencies": {
diff --git a/readme.md b/readme.md
@@ -644,6 +644,17 @@ module.exports = {
 }
 ```
 
+#### Setting a custom build directory
+
+You can specify a name to use for a custom build directory. For example, the following config will create a `build` folder instead of a `.next` folder. If no configuration is specified then next will create a `.next` folder.
+
+```javascript
+// next.config.js
+module.exports = {
+  distDir: 'build'
+}
+```
+
 ### Customizing webpack config
 
 In order to extend our usage of `webpack`, you can define a function that extends its config via `next.config.js`.
@@ -718,7 +729,7 @@ Then run `now` and enjoy!
 
 Next.js can be deployed to other hosting solutions too. Please have a look at the ['Deployment'](https://github.com/zeit/next.js/wiki/Deployment) section of the wiki.
 
-Note: we recommend putting `.next` in `.npmignore` or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next`)
+Note: we recommend putting `.next`, or your custom dist folder (Please have a look at ['Custom Config'](You can set a custom folder in config https://github.com/zeit/next.js#custom-configuration.)), in `.npmignore` or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next` or your custom dist folder)
 
 ## FAQ
 
diff --git a/server/build/clean.js b/server/build/clean.js
@@ -1,6 +1,8 @@
 import { resolve } from 'path'
 import del from 'del'
+import getConfig from '../config'
 
 export default function clean (dir) {
-  return del(resolve(dir, '.next'))
+  const dist = getConfig(dir).distDir
+  return del(resolve(dir, dist))
 }
diff --git a/server/build/index.js b/server/build/index.js
@@ -1,5 +1,6 @@
 import { tmpdir } from 'os'
 import { join } from 'path'
+import getConfig from '../config'
 import fs from 'mz/fs'
 import uuid from 'uuid'
 import del from 'del'
@@ -13,8 +14,10 @@ export default async function build (dir) {
 
   try {
     await runCompiler(compiler)
-    await writeBuildStats(buildDir)
-    await writeBuildId(buildDir)
+
+    // Pass in both the buildDir and the dir to retrieve config
+    await writeBuildStats(buildDir, dir)
+    await writeBuildId(buildDir, dir)
   } catch (err) {
     console.error(`> Failed to build on ${buildDir}`)
     throw err
@@ -45,22 +48,24 @@ function runCompiler (compiler) {
   })
 }
 
-async function writeBuildStats (dir) {
+async function writeBuildStats (buildDir, dir) {
+  const dist = getConfig(dir).distDir
   // Here we can't use hashes in webpack chunks.
   // That's because the "app.js" is not tied to a chunk.
   // It's created by merging a few assets. (commons.js and main.js)
   // So, we need to generate the hash ourself.
   const assetHashMap = {
     'app.js': {
-      hash: await md5File(join(dir, '.next', 'app.js'))
+      hash: await md5File(join(buildDir, dist, 'app.js'))
     }
   }
-  const buildStatsPath = join(dir, '.next', 'build-stats.json')
+  const buildStatsPath = join(buildDir, dist, 'build-stats.json')
   await fs.writeFile(buildStatsPath, JSON.stringify(assetHashMap), 'utf8')
 }
 
-async function writeBuildId (dir) {
-  const buildIdPath = join(dir, '.next', 'BUILD_ID')
+async function writeBuildId (buildDir, dir) {
+  const dist = getConfig(dir).distDir
+  const buildIdPath = join(buildDir, dist, 'BUILD_ID')
   const buildId = uuid.v4()
   await fs.writeFile(buildIdPath, buildId, 'utf8')
 }
diff --git a/server/build/replace.js b/server/build/replace.js
@@ -1,10 +1,13 @@
 import mv from 'mv'
 import { join } from 'path'
+import getConfig from '../config'
 
 export default async function replaceCurrentBuild (dir, buildDir) {
-  const _dir = join(dir, '.next')
-  const _buildDir = join(buildDir, '.next')
-  const oldDir = join(buildDir, '.next.old')
+  const dist = getConfig(dir).distDir
+  const buildDist = getConfig(buildDir).distDir
+  const _dir = join(dir, dist)
+  const _buildDir = join(buildDir, dist)
+  const oldDir = join(buildDir, `${buildDist}.old`)
 
   try {
     await move(_dir, oldDir)
diff --git a/server/build/webpack.js b/server/build/webpack.js
@@ -265,7 +265,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
     context: dir,
     entry,
     output: {
-      path: join(buildDir || dir, '.next'),
+      path: join(buildDir || dir, config.distDir),
       filename: '[name]',
       libraryTarget: 'commonjs2',
       publicPath: '/_webpack/',
diff --git a/server/config.js b/server/config.js
@@ -5,7 +5,8 @@ const cache = new Map()
 
 const defaultConfig = {
   webpack: null,
-  poweredByHeader: true
+  poweredByHeader: true,
+  distDir: '.next'
 }
 
 export default function getConfig (dir) {
diff --git a/server/index.js b/server/index.js
diff --git a/server/render.js b/server/render.js
diff --git a/test/integration/dist-dir/next.config.js b/test/integration/dist-dir/next.config.js
diff --git a/test/integration/dist-dir/pages/index.js b/test/integration/dist-dir/pages/index.js
diff --git a/test/integration/dist-dir/test/index.test.js b/test/integration/dist-dir/test/index.test.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,8 @@`
`1`	`1`	`import { resolve } from 'path'`
`2`	`2`	`import del from 'del'`
	`3`	`+import getConfig from '../config'`
`3`	`4`
`4`	`5`	`export default function clean (dir) {`
`5`		`- return del(resolve(dir, '.next'))`
	`6`	`+ const dist = getConfig(dir).distDir`
	`7`	`+ return del(resolve(dir, dist))`
`6`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,8 @@ const cache = new Map()`
`5`	`5`
`6`	`6`	`const defaultConfig = {`
`7`	`7`	`webpack: null,`
`8`		`- poweredByHeader: true`
	`8`	`+ poweredByHeader: true,`
	`9`	`+ distDir: '.next'`
`9`	`10`	`}`
`10`	`11`
`11`	`12`	`export default function getConfig (dir) {`