Merge v3-beta in dynamic-imports

Author: arunoda

.gitignore

@@ -6,10 +6,12 @@ dist
 node_modules
 
 # logs
-npm-debug.log
+*.log
 
 # coverage
 .nyc_output
 coverage
 
+# test output
+test/**/out
 .DS_Store

bin/next

@@ -22,6 +22,7 @@ const commands = new Set([
   'init',
   'build',
   'start',
+  'export',
   defaultCommand
 ])
 

bin/next-export

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+import { resolve, join } from 'path'
+import { existsSync } from 'fs'
+import parseArgs from 'minimist'
+import exportApp from '../server/export'
+import { printAndExit } from '../lib/utils'
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const argv = parseArgs(process.argv.slice(2), {
+  alias: {
+    h: 'help',
+    s: 'silent',
+    o: 'outdir'
+  },
+  boolean: ['h'],
+  default: {
+    s: false,
+    o: null
+  }
+})
+
+if (argv.help) {
+  console.log(`
+    Description
+      Exports the application for production deployment
+
+    Usage
+      $ next export [options] <dir>
+
+    <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'
+
+    Options
+      -h - list this help
+      -o - set the output dir (defaults to 'out')
+      -s - do not print any messages to console
+  `)
+  process.exit(0)
+}
+
+const dir = resolve(argv._[0] || '.')
+
+// Check if pages dir exists and warn if not
+if (!existsSync(dir)) {
+  printAndExit(`> No such directory exists as the project root: ${dir}`)
+}
+
+if (!existsSync(join(dir, 'pages'))) {
+  if (existsSync(join(dir, '..', 'pages'))) {
+    printAndExit('> No `pages` directory found. Did you mean to run `next` in the parent (`../`) directory?')
+  }
+
+  printAndExit('> Couldn\'t find a `pages` directory. Please create one under the project root')
+}
+
+const options = {
+  silent: argv.silent,
+  outdir: argv.outdir ? resolve(argv.outdir) : resolve(dir, 'out')
+}
+
+exportApp(dir, options)
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })

client/index.js

@@ -30,6 +30,8 @@ const {
   location
 } = window
 
+const asPath = getURL()
+
 const pageLoader = new PageLoader(buildId, assetPrefix)
 window.__NEXT_LOADED_PAGES__.forEach(({ route, fn }) => {
   pageLoader.registerPage(route, fn)
@@ -68,7 +70,7 @@ export default async () => {
     Component = ErrorComponent
   }
 
-  router = createRouter(pathname, query, getURL(), {
+  router = createRouter(pathname, query, asPath, {
     pageLoader,
     Component,
     ErrorComponent,
@@ -119,7 +121,7 @@ export async function renderError (error) {
   console.error(errorMessage)
 
   if (prod) {
-    const initProps = { err: error, pathname, query }
+    const initProps = { err: error, pathname, query, asPath }
     const props = await loadGetInitialProps(ErrorComponent, initProps)
     ReactDOM.render(createElement(ErrorComponent, props), errorContainer)
   } else {
@@ -132,8 +134,8 @@ async function doRender ({ Component, props, hash, err, emitter }) {
     Component !== ErrorComponent &&
     lastAppProps.Component === ErrorComponent) {
     // fetch props if ErrorComponent was replaced with a page component by HMR
-    const { pathname, query } = router
-    props = await loadGetInitialProps(Component, { err, pathname, query })
+    const { pathname, query, asPath } = router
+    props = await loadGetInitialProps(Component, { err, pathname, query, asPath })
   }
 
   if (emitter) {

examples/root-static-files/README.md

@@ -0,0 +1,29 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/custom-server)
+
+# Root static files example
+
+## 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/custom-server
+cd custom-server
+```
+
+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 demonstrates how to serve files such as /robots.txt and /sitemap.xml from the root.

examples/root-static-files/package.json

@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  }
+}

examples/root-static-files/pages/index.js

@@ -0,0 +1,7 @@
+export default () => (
+  <ul>
+    <li><a href='/robots.txt'>/robots.txt</a></li>
+    <li><a href='/sitemap.xml'>/sitemap.xml</a></li>
+    <li><a href='/favicon.ico'>/favicon.ico</a></li>
+  </ul>
+)

examples/root-static-files/server.js

@@ -0,0 +1,30 @@
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+const { join } = require('path')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+app.prepare()
+.then(() => {
+  createServer((req, res) => {
+    const parsedUrl = parse(req.url, true)
+    const rootStaticFiles = [
+      '/robots.txt',
+      '/sitemap.xml',
+      '/favicon.ico'
+    ]
+    if (rootStaticFiles.indexOf(parsedUrl.pathname) > -1) {
+      const path = join(__dirname, 'static', parsedUrl.pathname)
+      app.serveStatic(req, res, path)
+    } else {
+      handle(req, res, parsedUrl)
+    }
+  })
+  .listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})

examples/root-static-files/static/favicon.ico

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

examples/root-static-files/static/robots.txt

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
+  <url>
+    <loc>http://www.example.com/foo.html</loc> 
+  </url>
+</urlset>

examples/root-static-files/static/sitemap.xml

@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "beta"
+    "next": "latest"
   },
   "devDependencies": {
     "babel-plugin-inline-react-svg": "^0.2.0"

examples/svg-components/package.json

@@ -4,15 +4,31 @@ import { StyleSheetServer } from 'aphrodite'
 export default class MyDocument extends Document {
   static async getInitialProps ({ renderPage }) {
     const { html, css } = StyleSheetServer.renderStatic(() => renderPage())
-    return { ...html, css }
+    const ids = css.renderedClassNames
+    return { ...html, css, ids }
+  }
+
+  constructor (props) {
+    super(props)
+    /* Take the renderedClassNames from aphrodite (as generated
+    in getInitialProps) and assign them to __NEXT_DATA__ so that they
+    are accessible to the client for rehydration. */
+    const { __NEXT_DATA__, ids } = props
+    if (ids) {
+      __NEXT_DATA__.ids = this.props.ids
+    }
   }
 
   render () {
+    /* Make sure to use data-aphrodite attribute in the style tag here
+    so that aphrodite knows which style tag it's in control of when
+    the client goes to render styles. If you don't you'll get a second
+    <style> tag */
     return (
       <html>
         <Head>
           <title>My page</title>
-          <style dangerouslySetInnerHTML={{ __html: this.props.css.content }} />
+          <style data-aphrodite dangerouslySetInnerHTML={{ __html: this.props.css.content }} />
         </Head>
         <body>
           <Main />

examples/with-aphrodite/pages/_document.js

@@ -1,6 +1,13 @@
 import React from 'react'
 import { StyleSheet, css } from 'aphrodite'
 
+if (typeof window !== 'undefined') {
+  /* StyleSheet.rehydrate takes an array of rendered classnames,
+  and ensures that the client side render doesn't generate
+  duplicate style definitions in the <style data-aphrodite> tag */
+  StyleSheet.rehydrate(window.__NEXT_DATA__.ids)
+}
+
 export default () => (
   <div className={css(styles.root)}>
     <h1 className={css(styles.title)}>My page</h1>

examples/with-aphrodite/pages/index.js

@@ -0,0 +1,36 @@
+import { ApolloClient, createNetworkInterface } from 'react-apollo'
+import fetch from 'isomorphic-fetch'
+
+let apolloClient = null
+
+// Polyfill fetch() on the server (used by apollo-client)
+if (!process.browser) {
+  global.fetch = fetch
+}
+
+function create () {
+  return new ApolloClient({
+    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
+    networkInterface: createNetworkInterface({
+      uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
+      opts: { // Additional fetch() options like `credentials` or `headers`
+        credentials: 'same-origin'
+      }
+    })
+  })
+}
+
+export default function initApollo () {
+  // Make sure to create a new client for every server-side request so that data
+  // isn't shared between connections (which would be bad)
+  if (!process.browser) {
+    return create()
+  }
+
+  // Reuse client on the client-side
+  if (!apolloClient) {
+    apolloClient = create()
+  }
+
+  return apolloClient
+}

examples/with-apollo-and-redux/lib/initApollo.js

@@ -0,0 +1,39 @@
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
+import reducers from './reducers'
+
+let reduxStore = null
+
+// Get the Redux DevTools extension and fallback to a no-op function
+let devtools = f => f
+if (process.browser && window.__REDUX_DEVTOOLS_EXTENSION__) {
+  devtools = window.__REDUX_DEVTOOLS_EXTENSION__()
+}
+
+function create (apollo, initialState = {}) {
+  return createStore(
+    combineReducers({ // Setup reducers
+      ...reducers,
+      apollo: apollo.reducer()
+    }),
+    initialState, // Hydrate the store with server-side data
+    compose(
+      applyMiddleware(apollo.middleware()), // Add additional middleware here
+      devtools
+    )
+  )
+}
+
+export default function initRedux (apollo, initialState) {
+  // Make sure to create a new store for every server-side request so that data
+  // isn't shared between connections (which would be bad)
+  if (!process.browser) {
+    return create(apollo, initialState)
+  }
+
+  // Reuse store on the client-side
+  if (!reduxStore) {
+    reduxStore = create(apollo, initialState)
+  }
+
+  return reduxStore
+}