Merge branch 'canary' into master

vercel · Oct 16, 2019 · 0b457cb · 0b457cb
2 parents 2d837f4 + 02e75cf
commit 0b457cb
Show file tree

Hide file tree

Showing 32 changed files with 237 additions and 137 deletions.
diff --git a/errors/no-document-title.md b/errors/no-document-title.md
@@ -10,7 +10,7 @@ Set `<title>` in `pages/_app.js` instead:
 
 ```js
 // pages/_app.js
-import App, { Container } from 'next/app'
+import App from 'next/app'
 import Head from 'next/head'
 import React from 'react'
 
@@ -29,12 +29,12 @@ export default class MyApp extends App {
     const { Component, pageProps } = this.props
 
     return (
-      <Container>
+      <>
         <Head>
           <title>My new cool app</title>
         </Head>
         <Component {...pageProps} />
-      </Container>
+      </>
     )
   }
 }

diff --git a/examples/using-preact/README.md b/examples/using-preact/README.md
@@ -1,4 +1,4 @@
-# Hello World example
+# Preact example
 
 ## How to use
 
@@ -43,4 +43,5 @@ This example uses [Preact](https://github.com/developit/preact) instead of React
 
 Here's how we did it:
 
-- Use `next.config.js` to customize our webpack config to support [preact-compat](https://github.com/developit/preact-compat)
+- Use `next.config.js` to customize our webpack config by aliasing React to `preact/compat`
+- Use `server.js` to make our server use Preact by aliasing React to `preact/compat`
diff --git a/examples/using-preact/next.config.js b/examples/using-preact/next.config.js
@@ -1,3 +1,13 @@
-const withPreact = require('@zeit/next-preact')
+module.exports = {
+  webpack: function (config) {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      react: 'preact/compat',
+      react$: 'preact/compat',
+      'react-dom': 'preact/compat',
+      'react-dom$': 'preact/compat'
+    }
 
-module.exports = withPreact()
+    return config
+  }
+}
diff --git a/examples/using-preact/package.json b/examples/using-preact/package.json
@@ -7,10 +7,14 @@
     "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
-    "@zeit/next-preact": "0.1.0",
+    "module-alias": "2.2.2",
     "next": "latest",
-    "preact": "8.2.7",
-    "preact-compat": "3.18.0"
+    "preact": "10.0.0",
+    "preact-render-to-string": "5.0.7"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "react": "16.10.2",
+    "react-dom": "16.10.2"
+  }
 }
diff --git a/examples/using-preact/server.js b/examples/using-preact/server.js
@@ -1,7 +1,11 @@
 const port = parseInt(process.env.PORT, 10) || 3000
 const dev = process.env.NODE_ENV !== 'production'
+const moduleAlias = require('module-alias')
 
-require('@zeit/next-preact/alias')()
+moduleAlias.addAliases({
+  react: 'preact/compat',
+  'react-dom': 'preact/compat'
+})
 
 const { createServer } = require('http')
 const { parse } = require('url')

diff --git a/examples/with-noscript/components/Noscript.js b/examples/with-noscript/components/Noscript.js
@@ -1,7 +1,15 @@
 import React from 'react'
-import ReactDOMServer from 'react-dom/server'
 
-export default function Noscript (props) {
-  const staticMarkup = ReactDOMServer.renderToStaticMarkup(props.children)
+// We don't want to send 'react-dom/server' to the client
+let ReactDOMServer
+if (typeof window === 'undefined') {
+  ReactDOMServer = require('react-dom/server')
+}
+
+export default function Noscript ({ children }) {
+  if (!ReactDOMServer) {
+    return null
+  }
+  const staticMarkup = ReactDOMServer.renderToStaticMarkup(children)
   return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />
 }
diff --git a/examples/with-noscript/next.config.js b/examples/with-noscript/next.config.js
diff --git a/examples/with-noscript/package.json b/examples/with-noscript/package.json
@@ -9,8 +9,7 @@
   "dependencies": {
     "next": "latest",
     "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-lazyload": "^2.2.7"
+    "react-dom": "^16.7.0"
   },
   "license": "ISC"
 }
diff --git a/examples/with-noscript/pages/index.js b/examples/with-noscript/pages/index.js
@@ -1,35 +1,15 @@
 import React from 'react'
-import LazyLoad from 'react-lazyload'
 import Noscript from '../components/Noscript'
 
-const images = [
-  '/static/img/reactjs.png',
-  '/static/img/nextjs.png',
-  '/static/img/vuejs.png',
-  '/static/img/angular.jpg'
-]
+export default function IndexPage () {
+  return (
+    <>
+      <h1>noscript</h1>
+      <p>Disable JavaScript to see it in action:</p>
 
-class Index extends React.Component {
-  static getInitialProps (context) {
-    const { isServer } = context
-    return { isServer }
-  }
-  render () {
-    return (
-      <div style={{ textAlign: 'center' }}>
-        {images.map((item, index) => (
-          <div key={index}>
-            <LazyLoad height={700} offset={100}>
-              <img width={700} height={700} src={item} alt={`image_${index}`} />
-            </LazyLoad>
-            <Noscript>
-              <img width={700} height={700} src={item} alt={`image_${index}`} />
-            </Noscript>
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
+      <hr />
 
-export default Index
+      <Noscript>Noscript is enabled!</Noscript>
+    </>
+  )
+}
diff --git a/examples/with-noscript/public/static/img/angular.jpg b/examples/with-noscript/public/static/img/angular.jpg
diff --git a/examples/with-noscript/public/static/img/nextjs.png b/examples/with-noscript/public/static/img/nextjs.png
diff --git a/examples/with-noscript/public/static/img/reactjs.png b/examples/with-noscript/public/static/img/reactjs.png
diff --git a/examples/with-noscript/public/static/img/vuejs.png b/examples/with-noscript/public/static/img/vuejs.png
diff --git a/examples/with-react-intl/server.js b/examples/with-react-intl/server.js
@@ -46,7 +46,7 @@ const getMessages = locale => {
 app.prepare().then(() => {
   createServer((req, res) => {
     const accept = accepts(req)
-    const locale = accept.language(accept.languages(supportedLanguages)) || 'en'
+    const locale = accept.language(supportedLanguages) || 'en'
     req.locale = locale
     req.localeDataScript = getLocaleDataScript(locale)
     req.messages = dev ? {} : getMessages(locale)

diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.1.2-canary.2"
+  "version": "9.1.2-canary.3"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "9.1.2-canary.2",
+  "version": "9.1.2-canary.3",
   "keywords": [
     "react",
     "next",

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "9.1.2-canary.2",
+  "version": "9.1.2-canary.3",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "9.1.2-canary.2",
+  "version": "9.1.2-canary.3",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -234,7 +234,7 @@ export default async function getBaseWebpackConfig(
           // TODO(atcastle): Analyze if other cache groups should be set to 'all' as well
           chunks: 'all',
           name: 'framework',
-          // This regex ignores nested copies of framework libraries so they're 
+          // This regex ignores nested copies of framework libraries so they're
           // bundled with their issuer.
           // https://github.com/zeit/next.js/pull/9012
           test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types)[\\/]/,

diff --git a/packages/next/build/webpack/loaders/next-serverless-loader.ts b/packages/next/build/webpack/loaders/next-serverless-loader.ts
@@ -70,6 +70,7 @@ const nextServerlessLoader: loader.Loader = function() {
   } else {
     return `
     import {parse} from 'url'
+    import {parse as parseQs} from 'querystring'
     import {renderToHTML} from 'next/dist/next-server/server/render';
     import {sendHTML} from 'next/dist/next-server/server/send-html';
     ${
@@ -131,7 +132,40 @@ const nextServerlessLoader: loader.Loader = function() {
             ? `const params = fromExport && !unstable_getStaticProps ? {} : getRouteMatcher(getRouteRegex("${page}"))(parsedUrl.pathname) || {};`
             : `const params = {};`
         }
-        const result = await renderToHTML(req, res, "${page}", Object.assign({}, unstable_getStaticProps ? {} : parsedUrl.query, params, sprData ? { _nextSprData: '1' } : {}), renderOpts)
+        ${
+          // Temporary work around -- `x-now-route-params` is a platform header
+          // _only_ set for `Prerender` requests. We should move this logic
+          // into our builder to ensure we're decoupled. However, this entails
+          // removing reliance on `req.url` and using `req.query` instead
+          // (which is needed for "custom routes" anyway).
+          isDynamicRoute(page)
+            ? `const nowParams = req.headers && req.headers["x-now-route-params"]
+              ? getRouteMatcher(
+                  (function() {
+                    const { re, groups } = getRouteRegex("${page}");
+                    return {
+                      re: {
+                        // Simulate a RegExp match from the \`req.url\` input
+                        exec: str => {
+                          const obj = parseQs(str);
+                          return Object.keys(obj).reduce(
+                            (prev, key) =>
+                              Object.assign(prev, {
+                                [key]: encodeURIComponent(obj[key])
+                              }),
+                            {}
+                          );
+                        }
+                      },
+                      groups
+                    };
+                  })()
+                )(req.headers["x-now-route-params"])
+              : null;
+          `
+            : `const nowParams = null;`
+        }
+        const result = await renderToHTML(req, res, "${page}", Object.assign({}, unstable_getStaticProps ? {} : parsedUrl.query, nowParams ? nowParams : params, sprData ? { _nextSprData: '1' } : {}), renderOpts)
 
         if (fromExport) return { html: result, renderOpts }
         return result

diff --git a/packages/next/client/router.ts b/packages/next/client/router.ts
@@ -13,7 +13,7 @@ type SingletonRouterBase = {
   ready(cb: () => any): void
 }
 
-export { Router, NextRouter }
+export { Router, RouterContext, NextRouter }
 
 export type SingletonRouter = SingletonRouterBase & NextRouter
 

diff --git a/packages/next/client/with-router.tsx b/packages/next/client/with-router.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { NextComponentType, NextPageContext } from '../next-server/lib/utils'
-import { NextRouter } from './router'
+import { NextRouter, RouterContext } from './router'
 
 export type WithRouterProps = {
   router: NextRouter
@@ -21,19 +20,12 @@ export default function withRouter<
   class WithRouteWrapper extends React.Component<ExcludeRouterProps<P>> {
     static displayName?: string
     static getInitialProps?: any
-    static contextTypes = {
-      router: PropTypes.object,
-    }
+    static contextType = RouterContext
 
-    context!: WithRouterProps
+    context!: React.ContextType<typeof RouterContext>
 
     render() {
-      return (
-        <ComposedComponent
-          router={this.context.router}
-          {...this.props as any}
-        />
-      )
+      return <ComposedComponent router={this.context} {...this.props as any} />
     }
   }
 

diff --git a/packages/next/next-server/server/spr-cache.ts b/packages/next/next-server/server/spr-cache.ts
@@ -35,7 +35,7 @@ export const calculateRevalidate = (pathname: string): number | false => {
   // in development we don't have a prerender-manifest
   // and default to always revalidating to allow easier debugging
   const curTime = new Date().getTime()
-  if (!sprOptions.dev) return curTime
+  if (sprOptions.dev) return curTime
 
   const { initialRevalidateSeconds } = prerenderManifest.routes[pathname] || {
     initialRevalidateSeconds: 1,

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "9.1.2-canary.2",
+  "version": "9.1.2-canary.3",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",

diff --git a/packages/next/pages/_app.tsx b/packages/next/pages/_app.tsx
@@ -1,13 +1,12 @@
 import React, { ErrorInfo } from 'react'
-import PropTypes from 'prop-types'
 import {
   execOnce,
   loadGetInitialProps,
   AppContextType,
   AppInitialProps,
   AppPropsType,
 } from '../next-server/lib/utils'
-import { Router, makePublicRouterInstance } from '../client/router'
+import { Router } from '../client/router'
 
 export { AppInitialProps }
 
@@ -31,18 +30,9 @@ export default class App<P = {}, CP = {}, S = {}> extends React.Component<
   P & AppProps<CP>,
   S
 > {
-  static childContextTypes = {
-    router: PropTypes.object,
-  }
   static origGetInitialProps = appGetInitialProps
   static getInitialProps = appGetInitialProps
 
-  getChildContext() {
-    return {
-      router: makePublicRouterInstance(this.props.router),
-    }
-  }
-
   // Kept here for backwards compatibility.
   // When someone ended App they could call `super.componentDidCatch`.
   // @deprecated This method is no longer needed. Errors are caught at the top level