Merge with master.

This commit is contained in:
Arunoda Susiripala 2017-04-06 15:44:05 +05:30
commit 866319c76d
22 changed files with 288 additions and 80 deletions

2
.gitignore vendored
View file

@ -11,3 +11,5 @@ npm-debug.log
# coverage
.nyc_output
coverage
.DS_Store

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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": {

View file

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

View file

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

View file

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

View file

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

View file

@ -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/',

View file

@ -5,7 +5,8 @@ const cache = new Map()
const defaultConfig = {
webpack: null,
poweredByHeader: true
poweredByHeader: true,
distDir: '.next'
}
export default function getConfig (dir) {

View file

@ -27,7 +27,8 @@ export default class Server {
this.hotReloader = dev ? new HotReloader(this.dir, { quiet }) : null
this.http = null
this.config = getConfig(this.dir)
this.buildStats = !dev ? require(join(this.dir, '.next', 'build-stats.json')) : null
this.dist = this.config.distDir
this.buildStats = !dev ? require(join(this.dir, this.dist, 'build-stats.json')) : null
this.buildId = !dev ? this.readBuildId() : '-'
this.renderOpts = {
dev,
@ -92,25 +93,25 @@ export default class Server {
'/_next/:hash/manifest.js': async (req, res, params) => {
this.handleBuildHash('manifest.js', params.hash, res)
const p = join(this.dir, '.next/manifest.js')
const p = join(this.dir, `${this.dist}/manifest.js`)
await this.serveStatic(req, res, p)
},
'/_next/:hash/main.js': async (req, res, params) => {
this.handleBuildHash('main.js', params.hash, res)
const p = join(this.dir, '.next/main.js')
const p = join(this.dir, `${this.dist}/main.js`)
await this.serveStatic(req, res, p)
},
'/_next/:hash/commons.js': async (req, res, params) => {
this.handleBuildHash('commons.js', params.hash, res)
const p = join(this.dir, '.next/commons.js')
const p = join(this.dir, `${this.dist}/commons.js`)
await this.serveStatic(req, res, p)
},
'/_next/:hash/app.js': async (req, res, params) => {
this.handleBuildHash('app.js', params.hash, res)
const p = join(this.dir, '.next/app.js')
const p = join(this.dir, `${this.dist}/app.js`)
await this.serveStatic(req, res, p)
},
@ -284,7 +285,7 @@ export default class Server {
}
readBuildId () {
const buildIdPath = join(this.dir, '.next', 'BUILD_ID')
const buildIdPath = join(this.dir, this.dist, 'BUILD_ID')
const buildId = fs.readFileSync(buildIdPath, 'utf8')
return buildId.trim()
}
@ -305,7 +306,7 @@ export default class Server {
const errors = this.hotReloader.getCompilationErrors()
if (!errors.size) return
const id = join(this.dir, '.next', 'bundles', 'pages', page)
const id = join(this.dir, this.dist, 'bundles', 'pages', page)
const p = resolveFromList(id, errors.keys())
if (p) return errors.get(p)[0]
}

View file

@ -3,6 +3,7 @@ import { createElement } from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import send from 'send'
import requireModule from './require'
import getConfig from './config'
import resolvePath from './resolve'
import { Router } from '../lib/router'
import { loadGetInitialProps } from '../lib/utils'
@ -42,9 +43,11 @@ async function doRender (req, res, pathname, query, {
await ensurePage(page, { dir, hotReloader })
const dist = getConfig(dir).distDir
let [Component, Document] = await Promise.all([
requireModule(join(dir, '.next', 'dist', 'pages', page)),
requireModule(join(dir, '.next', 'dist', 'pages', '_document'))
requireModule(join(dir, dist, 'dist', 'pages', page)),
requireModule(join(dir, dist, 'dist', 'pages', '_document'))
])
Component = Component.default || Component
Document = Document.default || Document

View file

@ -0,0 +1,7 @@
module.exports = {
onDemandEntries: {
// Make sure entries are not getting disposed.
maxInactiveAge: 1000 * 60 * 60
},
distDir: 'dist'
}

View file

@ -0,0 +1,3 @@
export default () => (
<div>Hello World</div>
)

View file

@ -0,0 +1,49 @@
/* global jasmine, describe, it, expect, beforeAll, afterAll */
import { join } from 'path'
import { existsSync } from 'fs'
import {
nextServer,
nextBuild,
startApp,
stopApp,
renderViaHTTP
} from 'next-test-utils'
const appDir = join(__dirname, '../')
let appPort
let server
let app
jasmine.DEFAULT_TIMEOUT_INTERVAL = 40000
describe('Production Usage', () => {
beforeAll(async () => {
await nextBuild(appDir)
app = nextServer({
dir: join(__dirname, '../'),
dev: false,
quiet: true
})
server = await startApp(app)
appPort = server.address().port
})
afterAll(() => stopApp(server))
describe('With basic usage', () => {
it('should render the page', async () => {
const html = await renderViaHTTP(appPort, '/')
expect(html).toMatch(/Hello World/)
})
})
describe('File locations', () => {
it('should build the app within the given `dist` directory', () => {
expect(existsSync(join(__dirname, '/../dist/app.js'))).toBeTruthy()
})
it('should not build the app within the default `.next` directory', () => {
expect(existsSync(join(__dirname, '/../.next/app.js'))).toBeFalsy()
})
})
})

View file

@ -235,7 +235,7 @@ async@2.0.1:
dependencies:
lodash "^4.8.0"
async@^1.4.0, async@^1.4.2:
async@^1.4.0:
version "1.5.2"
resolved "https://registry.npmjs.org/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@ -2788,7 +2788,7 @@ istanbul-api@^1.1.0-alpha.1:
mkdirp "^0.5.1"
once "^1.4.0"
istanbul-lib-coverage@^1.0.0, istanbul-lib-coverage@^1.0.0-alpha, istanbul-lib-coverage@^1.0.0-alpha.0:
istanbul-lib-coverage@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.1.tgz#f263efb519c051c5f1f3343034fc40e7b43ff212"
@ -2796,19 +2796,13 @@ istanbul-lib-coverage@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.2.tgz#87a0c015b6910651cb3b184814dfb339337e25e1"
istanbul-lib-hook@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-1.0.0.tgz#fc5367ee27f59268e8f060b0c7aaf051d9c425c5"
dependencies:
append-transform "^0.4.0"
istanbul-lib-hook@^1.0.5:
istanbul-lib-hook@^1.0.0, istanbul-lib-hook@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.5.tgz#6ca3d16d60c5f4082da39f7c5cd38ea8a772b88e"
dependencies:
append-transform "^0.4.0"
istanbul-lib-instrument@^1.1.1, istanbul-lib-instrument@^1.1.4, istanbul-lib-instrument@^1.3.0, istanbul-lib-instrument@^1.6.2:
istanbul-lib-instrument@^1.1.1, istanbul-lib-instrument@^1.6.2:
version "1.6.2"
resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.6.2.tgz#dac644f358f51efd6113536d7070959a0111f73b"
dependencies:
@ -2820,7 +2814,7 @@ istanbul-lib-instrument@^1.1.1, istanbul-lib-instrument@^1.1.4, istanbul-lib-ins
istanbul-lib-coverage "^1.0.0"
semver "^5.3.0"
istanbul-lib-instrument@^1.7.0:
istanbul-lib-instrument@^1.1.4, istanbul-lib-instrument@^1.3.0, istanbul-lib-instrument@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.0.tgz#b8e0dc25709bb44e17336ab47b7bb5c97c23f659"
dependencies:
@ -2832,7 +2826,7 @@ istanbul-lib-instrument@^1.7.0:
istanbul-lib-coverage "^1.0.2"
semver "^5.3.0"
istanbul-lib-report@^1.0.0:
istanbul-lib-report@^1.0.0, istanbul-lib-report@^1.0.0-alpha.3:
version "1.0.0"
resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.0.0.tgz#d83dac7f26566b521585569367fe84ccfc7aaecb"
dependencies:
@ -2841,27 +2835,7 @@ istanbul-lib-report@^1.0.0:
path-parse "^1.0.5"
supports-color "^3.1.2"
istanbul-lib-report@^1.0.0-alpha.3:
version "1.0.0-alpha.3"
resolved "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-1.0.0-alpha.3.tgz#32d5f6ec7f33ca3a602209e278b2e6ff143498af"
dependencies:
async "^1.4.2"
istanbul-lib-coverage "^1.0.0-alpha"
mkdirp "^0.5.1"
path-parse "^1.0.5"
rimraf "^2.4.3"
supports-color "^3.1.2"
istanbul-lib-source-maps@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.1.0.tgz#9d429218f35b823560ea300a96ff0c3bbdab785f"
dependencies:
istanbul-lib-coverage "^1.0.0-alpha.0"
mkdirp "^0.5.1"
rimraf "^2.4.4"
source-map "^0.5.3"
istanbul-lib-source-maps@^1.1.1:
istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.1.1.tgz#f8c8c2e8f2160d1d91526d97e5bd63b2079af71c"
dependencies:
@ -2870,13 +2844,7 @@ istanbul-lib-source-maps@^1.1.1:
rimraf "^2.4.4"
source-map "^0.5.3"
istanbul-reports@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.0.1.tgz#9a17176bc4a6cbebdae52b2f15961d52fa623fbc"
dependencies:
handlebars "^4.0.3"
istanbul-reports@^1.0.2:
istanbul-reports@^1.0.0, istanbul-reports@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.0.2.tgz#4e8366abe6fa746cc1cd6633f108de12cc6ac6fa"
dependencies:
@ -4343,7 +4311,7 @@ right-align@^0.1.1:
dependencies:
align-text "^0.1.1"
rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4:
rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.4, rimraf@^2.5.4:
version "2.6.1"
resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
dependencies:
@ -5000,9 +4968,9 @@ webpack-dev-middleware@1.10.1:
path-is-absolute "^1.0.0"
range-parser "^1.0.3"
webpack-hot-middleware@2.17.1:
version "2.17.1"
resolved "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.17.1.tgz#0c8fbf6f93ff29c095d684b07ab6d6c0f2f951d7"
webpack-hot-middleware@2.18.0:
version "2.18.0"
resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.18.0.tgz#a16bb535b83a6ac94a78ac5ebce4f3059e8274d3"
dependencies:
ansi-html "0.0.7"
html-entities "^1.2.0"
@ -5016,9 +4984,9 @@ webpack-sources@^0.2.3:
source-list-map "^1.1.1"
source-map "~0.5.3"
webpack@2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.3.2.tgz#7d521e6f0777a3a58985c69425263fdfe977b458"
webpack@2.3.3:
version "2.3.3"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.3.3.tgz#eecc083c18fb7bf958ea4f40b57a6640c5a0cc78"
dependencies:
acorn "^4.0.4"
acorn-dynamic-import "^2.0.0"