next-dev

Author: nkzawa

bin/next-build

@@ -1,11 +1,8 @@
 #!/usr/bin/env node
 
-import { resolve, dirname } from 'path'
+import { resolve } from 'path'
 import parseArgs from 'minimist'
-import fs from 'mz/fs'
-import mkdirp from 'mkdirp-then';
-import glob from 'glob-promise'
-import { transpile, bundle } from '../server/build'
+import build from '../server/build'
 
 const argv = parseArgs(process.argv.slice(2), {
   alias: {
@@ -16,29 +13,8 @@ const argv = parseArgs(process.argv.slice(2), {
 
 const dir = resolve(argv._[0] || '.')
 
-Promise.resolve()
-.then(async () => {
-  const paths = await glob('**/*.js', { cwd: dir, ignore: 'node_modules/**' })
-  await Promise.all(paths.map(async (p) => {
-    const code = await transpile(resolve(dir, p))
-    const outpath = resolve(dir, '.next', p)
-    await writeFile(outpath, code)
-  }))
-
-  const pagePaths = await glob('.next/pages/**/*.js', { cwd: dir })
-  await Promise.all(pagePaths.map(async (p) => {
-    const code = await bundle(resolve(dir, p))
-    const outpath = resolve(dir, '.next', p)
-    await writeFile(outpath, code)
-  }))
-})
+build(dir)
 .catch((err) => {
   console.error(err)
   exit(1)
 })
-
-async function writeFile (path, data) {
-  await mkdirp(dirname(path))
-  await fs.writeFile(path, data, { encoding: 'utf8', flag: 'w+' })
-}
-

bin/next-dev

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+import { resolve } from 'path'
+import parseArgs from 'minimist'
+import Server from '../server'
+import build from '../server/build'
+
+const argv = parseArgs(process.argv.slice(2), {
+  alias: {
+    h: 'help',
+    p: 'port'
+  },
+  boolean: ['h'],
+  default: {
+    p: 3000
+  }
+})
+
+const dir = resolve(argv._[0] || '.')
+
+build(dir)
+.then(async () => {
+  const srv = new Server({ dir, dev: true })
+  await srv.start(argv.port)
+  console.log('> Ready on http://localhost:%d', argv.port);
+})
+.catch((err) => {
+  console.error(err)
+  exit(1)
+})

bin/next-start

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 
+import { resolve } from 'path'
 import parseArgs from 'minimist'
 import Server from '../server'
 
@@ -14,9 +15,9 @@ const argv = parseArgs(process.argv.slice(2), {
   }
 })
 
-const dir = argv._[0] || '.'
+const dir = resolve(argv._[0] || '.')
 
-const srv = new Server(dir)
+const srv = new Server({ dir })
 srv.start(argv.port)
 .then(() => {
   console.log('> Ready on http://localhost:%d', argv.port);

client/next-dev.js

@@ -0,0 +1 @@
+import './next'

lib/document.js

@@ -54,8 +54,8 @@ export function DevTools (props, context) {
 DevTools.contextTypes = { _documentProps: PropTypes.any }
 
 export function NextScript (props, context) {
-  const { hotReload } = context._documentProps;
-  const src = !hotReload ? '/_next/next.bundle.js' : '/_next/next-dev.bundle.js'
+  const { dev } = context._documentProps;
+  const src = !dev ? '/_next/next.bundle.js' : '/_next/next-dev.bundle.js'
   return <script type='text/javascript' src={src}/>
 }
 

package.json

@@ -29,7 +29,6 @@
     "cross-spawn": "4.0.2",
     "glob-promise": "1.0.6",
     "htmlescape": "1.1.1",
-    "memory-fs": "0.3.0",
     "minimist": "1.2.0",
     "mkdirp-then": "1.2.0",
     "mz": "2.4.0",

server/build.js

@@ -0,0 +1,51 @@
+import { resolve, dirname, basename } from 'path'
+import webpack from 'webpack'
+
+export default function bundle (src, dst) {
+  const compiler = webpack({
+    entry: src,
+    output: {
+      path: dirname(dst),
+      filename: basename(dst),
+      libraryTarget: 'commonjs2'
+    },
+    externals: [
+      'react',
+      'react-dom',
+      {
+        [require.resolve('react')]: 'react',
+        [require.resolve('../lib/link')]: 'next/link'
+      }
+    ],
+    resolveLoader: {
+      root: resolve(__dirname, '..', '..', 'node_modules')
+    },
+    plugins: [
+      new webpack.optimize.UglifyJsPlugin({
+        compress: { warnings: false },
+        sourceMap: false
+      })
+    ],
+    module: {
+      preLoaders: [
+        { test: /\.json$/, loader: 'json-loader' }
+      ]
+    }
+  })
+
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) return reject(err)
+
+      const jsonStats = stats.toJson()
+      if (jsonStats.errors.length > 0) {
+        const error = new Error(jsonStats.errors[0])
+        error.errors = jsonStats.errors
+        error.warnings = jsonStats.warnings
+        return reject(error)
+      }
+
+      resolve()
+    })
+  })
+}

server/build/bundle.js

@@ -0,0 +1,18 @@
+import { resolve } from 'path'
+import glob from 'glob-promise'
+import transpile from './transpile'
+import bundle from './bundle'
+
+export default async function build (dir) {
+  const dstDir = resolve(dir, '.next')
+
+  const paths = await glob('**/*.js', { cwd: dir, ignore: 'node_modules/**' })
+  await Promise.all(paths.map(async (p) => {
+    await transpile(resolve(dir, p), resolve(dstDir, p))
+  }))
+
+  const pagePaths = await glob('pages/**/*.js', { cwd: dstDir })
+  await Promise.all(pagePaths.map(async (p) => {
+    await bundle(resolve(dstDir, p), resolve(dstDir, '_bundles', p))
+  }))
+}

server/build/index.js

@@ -0,0 +1,49 @@
+import { dirname } from 'path'
+import fs from 'mz/fs'
+import mkdirp from 'mkdirp-then';
+import { transformFile } from 'babel-core'
+import preset2015 from 'babel-preset-es2015'
+import presetReact from 'babel-preset-react'
+import transformAsyncToGenerator from 'babel-plugin-transform-async-to-generator'
+import transformClassProperties from 'babel-plugin-transform-class-properties'
+import transformObjectRestSpread from 'babel-plugin-transform-object-rest-spread'
+import transformRuntime from 'babel-plugin-transform-runtime'
+import moduleAlias from 'babel-plugin-module-alias'
+
+const babelRuntimePath = require.resolve('babel-runtime/package')
+.replace(/[\\\/]package\.json$/, '');
+
+const babelOptions = {
+  presets: [preset2015, presetReact],
+  plugins: [
+    transformAsyncToGenerator,
+    transformClassProperties,
+    transformObjectRestSpread,
+    transformRuntime,
+    [
+      moduleAlias,
+      [
+        { src: `npm:${babelRuntimePath}`, expose: 'babel-runtime' },
+        { src: `npm:${require.resolve('react')}`, expose: 'react' },
+        { src: `npm:${require.resolve('../lib/link')}`, expose: 'next/link' }
+      ]
+    ]
+  ],
+  ast: false
+}
+
+export default async function transpile (src, dst) {
+  const code = await new Promise((resolve, reject) => {
+    transformFile(src, babelOptions, (err, result) => {
+      if (err) return reject(err)
+      resolve(result.code)
+    })
+  })
+
+  await writeFile(dst, code)
+}
+
+async function writeFile (path, data) {
+  await mkdirp(dirname(path))
+  await fs.writeFile(path, data, { encoding: 'utf8', flag: 'w+' })
+}