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

custom document support (#405)

Browse source
This commit is contained in:
Naoyuki Kanezawa 2016-12-17 03:42:40 +09:00 committed by Guillermo Rauch
parent 43b0e6f514
commit 8ddafaea5c
14 changed files with 249 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/next.js
View file

@ -30,7 +30,7 @@ domready(() => {
const container = document.getElementById('__next')
const appProps = { Component, props, router, headManager }
rehydrate(ids)
if (ids) rehydrate(ids)
render(createElement(App, appProps), container)
})

3
client/webpack-hot-middleware-client.js
View file

@ -23,6 +23,9 @@ const handlers = {
// reload to recover from runtime errors
next.router.reload(route)
}
},
hardReload () {
window.location.reload()
}
}

1
document.js Normal file
View file

@ -0,0 +1 @@
module.exports = require('./dist/server/document')

52
lib/document.js
View file

@ -1,52 +0,0 @@
import React from 'react'
import htmlescape from 'htmlescape'
import readPkgUp from 'read-pkg-up'
const { pkg } = readPkgUp.sync({
cwd: __dirname,
normalize: false
})
export default ({ head, css, html, data, dev, staticMarkup, cdn }) => {
return <html>
<head>
{(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
<style dangerouslySetInnerHTML={{ __html: css }} />
</head>
<body>
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
{staticMarkup ? null : <script dangerouslySetInnerHTML={{
__html: `__NEXT_DATA__ =${htmlescape(data)}; module={};`
}} />}
{staticMarkup ? null : createClientScript({ dev, cdn })}
<script type='text/javascript' src='/_next/commons.js' />
</body>
</html>
}
function createClientScript ({ dev, cdn }) {
if (dev) {
return <script type='text/javascript' src='/_next/next-dev.bundle.js' />
}
if (!cdn) {
return <script type='text/javascript' src='/_next/next.bundle.js' />
}
return <script dangerouslySetInnerHTML={{ __html: `
(function () {
load('https://cdn.zeit.co/next.js/${pkg.version}/next.min.js', function (err) {
if (err) load('/_next/next.bundle.js')
})
function load (src, fn) {
fn = fn || function () {}
var script = document.createElement('script')
script.src = src
script.onload = function () { fn(null) }
script.onerror = fn
script.crossorigin = 'anonymous'
document.body.appendChild(script)
}
})()
`}} />
}

1
package.json
View file

@ -42,6 +42,7 @@
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-runtime": "6.20.0",
"chokidar": "1.6.1",
"cross-spawn": "5.0.1",
"del": "2.2.2",
"domready": "1.0.8",

1
pages/_document.js Normal file
View file

@ -0,0 +1 @@
module.exports = require('next/document')

62
server/build/babel.js Normal file
View file

@ -0,0 +1,62 @@
import { resolve, join, dirname } from 'path'
import { readFile, writeFile } from 'mz/fs'
import { transform } from 'babel-core'
import chokidar from 'chokidar'
import mkdirp from 'mkdirp-then'
const babelRuntimePath = require.resolve('babel-runtime/package')
.replace(/[\\/]package\.json$/, '')
export default babel
async function babel (dir, { dev = false } = {}) {
dir = resolve(dir)
let src
try {
src = await readFile(join(dir, 'pages', '_document.js'), 'utf8')
} catch (err) {
if (err.code === 'ENOENT') {
src = await readFile(join(__dirname, '..', '..', 'pages', '_document.js'), 'utf8')
} else {
throw err
}
}
const { code } = transform(src, {
babelrc: false,
sourceMaps: dev ? 'inline' : false,
presets: ['es2015', 'react'],
plugins: [
require.resolve('babel-plugin-react-require'),
require.resolve('babel-plugin-transform-async-to-generator'),
require.resolve('babel-plugin-transform-object-rest-spread'),
require.resolve('babel-plugin-transform-class-properties'),
require.resolve('babel-plugin-transform-runtime'),
[
require.resolve('babel-plugin-module-resolver'),
{
alias: {
'babel-runtime': babelRuntimePath,
react: require.resolve('react'),
'next/link': require.resolve('../../lib/link'),
'next/css': require.resolve('../../lib/css'),
'next/head': require.resolve('../../lib/head'),
'next/document': require.resolve('../../server/document')
}
}
]
]
})
const file = join(dir, '.next', 'dist', 'pages', '_document.js')
await mkdirp(dirname(file))
await writeFile(file, code)
}
export function watch (dir) {
return chokidar.watch('pages/_document.js', {
cwd: dir,
ignoreInitial: true
})
}

8
server/build/index.js
View file

@ -1,4 +1,5 @@
import webpack from './webpack'
import babel from './babel'
import clean from './clean'
export default async function build (dir) {
@ -7,6 +8,13 @@ export default async function build (dir) {
clean(dir)
])
await Promise.all([
runCompiler(compiler),
babel(dir)
])
}
function runCompiler (compiler) {
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err) return reject(err)

4
server/build/plugins/watch-pages-plugin.js
View file

@ -58,7 +58,9 @@ export default class WatchPagesPlugin {
}
isPageFile (f) {
return f.indexOf(this.dir) === 0 && extname(f) === '.js'
return f.indexOf(this.dir) === 0 &&
relative(this.dir, f) !== '_document.js' &&
extname(f) === '.js'
}
}

8
server/build/webpack.js
View file

@ -13,7 +13,10 @@ import DetachPlugin from './plugins/detach-plugin'
export default async function createCompiler (dir, { hotReload = false, dev = false } = {}) {
dir = resolve(dir)
const pages = await glob('pages/**/*.js', { cwd: dir })
const pages = await glob('pages/**/*.js', {
cwd: dir,
ignore: 'pages/_document.js'
})
const entry = {}
const defaultEntries = hotReload ? ['next/dist/client/webpack-hot-middleware-client'] : []
@ -146,7 +149,8 @@ export default async function createCompiler (dir, { hotReload = false, dev = fa
'next/link': require.resolve('../../lib/link'),
'next/prefetch': require.resolve('../../lib/prefetch'),
'next/css': require.resolve('../../lib/css'),
'next/head': require.resolve('../../lib/head')
'next/head': require.resolve('../../lib/head'),
'next/document': require.resolve('../../server/document')
}
}
]

118
server/document.js Normal file
View file

@ -0,0 +1,118 @@
import React, { Component, PropTypes } from 'react'
import htmlescape from 'htmlescape'
import { renderStatic } from 'glamor/server'
import readPkgUp from 'read-pkg-up'
const { pkg } = readPkgUp.sync({
cwd: __dirname,
normalize: false
})
export default class Document extends Component {
static getInitialProps ({ renderPage }) {
let head
const { html, css, ids } = renderStatic(() => {
const page = renderPage()
head = page.head
return page.html
})
const nextCSS = { css, ids }
return { html, head, nextCSS }
}
static childContextTypes = {
_documentProps: PropTypes.any
}
constructor (props) {
super(props)
const { __NEXT_DATA__, nextCSS } = props
if (nextCSS) __NEXT_DATA__.ids = nextCSS.ids
}
getChildContext () {
return { _documentProps: this.props }
}
render () {
return <html>
<Head />
<body>
<Main />
<NextScript />
</body>
</html>
}
}
export class Head extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { head, nextCSS } = this.context._documentProps
return <head>
{(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
{nextCSS ? <style dangerouslySetInnerHTML={{ __html: nextCSS.css }} /> : null}
{this.props.children}
</head>
}
}
export class Main extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { html, __NEXT_DATA__, staticMarkup } = this.context._documentProps
return <div>
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
{staticMarkup ? null : <script dangerouslySetInnerHTML={{
__html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
}} />}
</div>
}
}
export class NextScript extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { staticMarkup, dev, cdn } = this.context._documentProps
return <div>
{staticMarkup ? null : createClientScript({ dev, cdn })}
<script type='text/javascript' src='/_next/commons.js' />
</div>
}
}
function createClientScript ({ dev, cdn }) {
if (dev) {
return <script type='text/javascript' src='/_next/next-dev.bundle.js' />
}
if (!cdn) {
return <script type='text/javascript' src='/_next/next.bundle.js' />
}
return <script dangerouslySetInnerHTML={{ __html: `
(function () {
load('https://cdn.zeit.co/next.js/${pkg.version}/next.min.js', function (err) {
if (err) load('/_next/next.bundle.js')
})
function load (src, fn) {
fn = fn || function () {}
var script = document.createElement('script')
script.src = src
script.onload = function () { fn(null) }
script.onerror = fn
script.crossorigin = 'anonymous'
document.body.appendChild(script)
}
})()
`}} />
}

28
server/hot-reloader.js
View file

@ -3,6 +3,7 @@ import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import isWindowsBash from 'is-windows-bash'
import webpack from './build/webpack'
import babel, { watch } from './build/babel'
import read from './read'
export default class HotReloader {
@ -12,6 +13,7 @@ export default class HotReloader {
this.middlewares = []
this.webpackDevMiddleware = null
this.webpackHotMiddleware = null
this.watcher = null
this.initialized = false
this.stats = null
this.compilationErrors = null
@ -33,7 +35,11 @@ export default class HotReloader {
}
async start () {
await this.prepareMiddlewares()
this.watch()
await Promise.all([
this.prepareMiddlewares(),
babel(this.dir, { dev: true })
])
this.stats = await this.waitUntilValid()
}
@ -163,6 +169,26 @@ export default class HotReloader {
send (action, ...args) {
this.webpackHotMiddleware.publish({ action, data: args })
}
watch () {
const onChange = (path) => {
babel(this.dir, { dev: true })
.then(() => {
const f = join(this.dir, '.next', 'dist', relative(this.dir, path))
delete require.cache[f]
this.send('hardReload')
})
}
this.watcher = watch(this.dir)
this.watcher
.on('add', onChange)
.on('change', onChange)
.on('unlink', onChange)
.on('error', (err) => {
console.error(err)
})
}
}
function deleteCache (path) {

31
server/render.js
View file

@ -2,12 +2,10 @@ import { join } from 'path'
import { parse } from 'url'
import { createElement } from 'react'
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
import { renderStatic } from 'glamor/server'
import requireModule from './require'
import read from './read'
import getConfig from './config'
import Router from '../lib/router'
import Document from '../lib/document'
import Head, { defaultHead } from '../lib/head'
import App from '../lib/app'
@ -17,8 +15,12 @@ export async function render (url, ctx = {}, {
staticMarkup = false
} = {}) {
const path = getPath(url)
const mod = await requireModule(join(dir, '.next', 'dist', 'pages', path))
const Component = mod.default || mod
let [Component, Document] = await Promise.all([
requireModule(join(dir, '.next', 'dist', 'pages', path)),
requireModule(join(dir, '.next', 'dist', 'pages', '_document'))
])
Component = Component.default || Component
Document = Document.default || Document
const [
props,
@ -30,33 +32,32 @@ export async function render (url, ctx = {}, {
read(join(dir, '.next', 'bundles', 'pages', dev ? '_error-debug' : '_error'))
])
const { html, css, ids } = renderStatic(() => {
const renderPage = () => {
const app = createElement(App, {
Component,
props,
router: new Router(ctx.req ? ctx.req.url : url)
})
return (staticMarkup ? renderToStaticMarkup : renderToString)(app)
})
const html = (staticMarkup ? renderToStaticMarkup : renderToString)(app)
const head = Head.rewind() || defaultHead()
return { html, head }
}
const config = await getConfig(dir)
const docProps = await Document.getInitialProps({ ...ctx, renderPage })
const doc = createElement(Document, {
html,
head,
css,
data: {
__NEXT_DATA__: {
component,
errorComponent,
props,
ids: ids,
err: (ctx.err && dev) ? errorToJSON(ctx.err) : null
},
dev,
staticMarkup,
cdn: config.cdn
cdn: config.cdn,
...docProps
})
return '<!DOCTYPE html>' + renderToStaticMarkup(doc)

2
test/integration.test.js
View file

@ -8,7 +8,7 @@ import { render as _render } from '../server/render'
const dir = join(__dirname, 'fixtures', 'basic')
jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000
describe('integration tests', () => {
beforeAll(() => build(dir))