Merge branch 'canary' into patch-1

vercel · Feb 23, 2022 · 4e874e5 · 4e874e5
2 parents b4b5d58 + 99ee222
commit 4e874e5
Show file tree

Hide file tree

Showing 20 changed files with 62 additions and 62 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -12,13 +12,8 @@
 
 # Image Component (@styfle)
 
-/examples/image-component/ @timneutkens @ijjk @shuding @styfle
-/packages/next/build/webpack/loaders/next-image-loader.js @timneutkens @ijjk @shuding @styfle
-/packages/next/client/image.tsx @timneutkens @ijjk @shuding @styfle
-/packages/next/image-types/ @timneutkens @ijjk @shuding @styfle
-/packages/next/server/image-config.ts @timneutkens @ijjk @shuding @styfle
-/packages/next/server/image-optimizer.ts @timneutkens @ijjk @shuding @styfle
+/**/*image*/** @timneutkens @ijjk @shuding @styfle
+/packages/next/client/use-intersection.tsx @timneutkens @ijjk @shuding @styfle
+/packages/next/server/lib/squoosh/ @timneutkens @ijjk @shuding @styfle
 /packages/next/server/serve-static.ts @timneutkens @ijjk @shuding @styfle
 /packages/next/server/config.ts @timneutkens @ijjk @shuding @styfle
-/test/integration/image-optimizer/ @timneutkens @ijjk @shuding @styfle
-/test/integration/image-component/ @timneutkens @ijjk @shuding @styfle
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -94,33 +94,35 @@ jobs:
  steps:
  - name: Install
  uses: actions-rs/toolchain@v1
- if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
+ if: ${{needs.build.outputs.docsChange != 'docs only change'}}
  with:
  profile: minimal
  toolchain: nightly-2021-11-15
  components: rustfmt, clippy
 
  - name: Cache cargo registry
  uses: actions/cache@v2
- if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
+ if: ${{needs.build.outputs.docsChange != 'docs only change'}}
  with:
  path: ~/.cargo/registry
  key: stable-ubuntu-clippy-cargo-registry
 
  - name: Cache cargo index
  uses: actions/cache@v2
- if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
+ if: ${{needs.build.outputs.docsChange != 'docs only change'}}
  with:
  path: ~/.cargo/git
  key: stable-ubuntu-clippy-cargo-index
 
  - uses: actions/cache@v2
  id: restore-build
+ if: ${{needs.build.outputs.docsChange != 'docs only change'}}
  with:
  path: ./*
  key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
 
  - name: Check
+ if: ${{needs.build.outputs.docsChange != 'docs only change'}}
  run: |
  cargo fmt -- --check
  cargo clippy --all -- -D warnings
@@ -135,7 +137,7 @@ jobs:
  steps:
  - name: Setup node
  uses: actions/setup-node@v2
- if: ${{ steps.docs-change.outputs.docsChange != 'docs only change' }}
+ if: ${{needs.build.outputs.docsChange != 'docs only change'}}
  with:
  node-version: 14
 

diff --git a/docs/advanced-features/output-file-tracing.md b/docs/advanced-features/output-file-tracing.md
@@ -34,7 +34,7 @@ module.exports = {
 
 This will create a folder at `.next/standalone` which can then be deployed on it's own without installing `node_modules`.
 
-Additionally, a minimal `server.js` file is also output which can be used instead of `next start`. This minimal server does not copy the `public` or `.next/static` folders by default as these should ideally be handled by a CDN instead, although these folders can be copied to the `standalone` folder manually and the `server.js` file will serve it automatically.
+Additionally, a minimal `server.js` file is also output which can be used instead of `next start`. This minimal server does not copy the `public` or `.next/static` folders by default as these should ideally be handled by a CDN instead, although these folders can be copied to the `standalone/public` and `standalone/.next/static` folders manually, after which `server.js` file will serve these automatically.
 
 ## Caveats
 

diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
@@ -23,29 +23,7 @@ By default, Next.js will automatically inline font CSS at build time, eliminatin
 
 ## Usage
 
-To add a web font to your Next.js application, override `next/head`. For example, you can add a font to a specific page:
-
-```js
-// pages/index.js
-
-import Head from 'next/head'
-
-export default function IndexPage() {
- return (
- <div>
- <Head>
- <link
- href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
- rel="stylesheet"
- />
- </Head>
- <p>Hello world!</p>
- </div>
- )
-}
-```
-
-or to your entire application with a [Custom `Document`](/docs/advanced-features/custom-document.md).
+To add a web font to your Next.js application, add the font to a [Custom `Document`](/docs/advanced-features/custom-document.md).
 
 ```js
 // pages/_document.js
@@ -74,6 +52,8 @@ class MyDocument extends Document {
 export default MyDocument
 ```
 
+Note that we don't recommend adding fonts with `next/head`, as this only applies the font to the particular page and won't work with a streaming architecture.
+
 Automatic Webfont Optimization currently supports Google Fonts and Typekit with support for other font providers coming soon. We're also planning to add control over [loading strategies](https://github.com/vercel/next.js/issues/21555) and `font-display` values.
 
 See [Google Font Display](https://nextjs.org/docs/messages/google-font-display) for more information.

diff --git a/docs/testing.md b/docs/testing.md
@@ -232,7 +232,7 @@ Run `npm run build` and `npm run start`, then run `npm run test:e2e` in another
 
 ### Running Playwright on Continuous Integration (CI)
 
-Playwright will by default run your tests in the [headed mode](https://playwright.dev/docs/ci). To install all the Playwright dependencies, run `npx playwright install-deps`.
+Playwright will by default run your tests in the [headless mode]https://playwright.dev/docs/ci#running-headed). To install all the Playwright dependencies, run `npx playwright install-deps`.
 
 You can learn more about Playwright and Continuous Integration from these resources:
 

diff --git a/examples/with-docker-multi-env/.dockerignore b/examples/with-docker-multi-env/.dockerignore
@@ -5,3 +5,4 @@ npm-debug.log
 README.md
 .next
 docker
+.git
diff --git a/examples/with-docker/.dockerignore b/examples/with-docker/.dockerignore
@@ -3,4 +3,5 @@ Dockerfile
 node_modules
 npm-debug.log
 README.md
-.next
+.next
+.git
diff --git a/examples/with-sentry/next.config.js b/examples/with-sentry/next.config.js
@@ -9,16 +9,14 @@ const moduleExports = {
  // Your existing module.exports
 }
 
-const sentryWebpackPluginOptions = {
+// Make sure adding Sentry options is the last code to run before exporting, to
+// ensure that your source maps include changes from all other Webpack plugins
+module.exports = withSentryConfig(moduleExports, {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  // release, url, org, project, authToken, configFile, stripPrefix,
  // urlPrefix, include, ignore
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
-}
-
-// Make sure adding Sentry options is the last code to run before exporting, to
-// ensure that your source maps include changes from all other Webpack plugins
-module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions)
+})
diff --git a/examples/with-supertokens/package.json b/examples/with-supertokens/package.json
@@ -10,9 +10,6 @@
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "supertokens-auth-react": "^0.18.0",
- "supertokens-node": "^8.1.0"
- },
- "devDependencies": {
- "eslint-config-next": "11.0.1"
+ "supertokens-node": "^9.0.0"
  }
 }
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -5,7 +5,7 @@ import {
  imageConfigDefault,
  LoaderValue,
  VALID_LOADERS,
-} from '../server/image-config'
+} from '../shared/lib/image-config'
 import { useIntersection } from './use-intersection'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 

diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -39,7 +39,7 @@ import {
 } from './streaming/vitals'
 import { RefreshContext } from './streaming/refresh'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
-import { ImageConfigComplete } from '../server/image-config'
+import { ImageConfigComplete } from '../shared/lib/image-config'
 
 /// <reference types="react-dom/experimental" />
 

diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
@@ -62,7 +62,7 @@ import { MIDDLEWARE_ROUTE } from '../lib/constants'
 import { addRequestMeta, getRequestMeta } from './request-meta'
 import { createHeaderRoute, createRedirectRoute } from './server-route-utils'
 import { PrerenderManifest } from '../build'
-import { ImageConfigComplete } from './image-config'
+import { ImageConfigComplete } from '../shared/lib/image-config'
 
 export type FindComponentsResult = {
  components: LoadComponentsReturnType

diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
@@ -5,7 +5,7 @@ import {
  ImageConfig,
  ImageConfigComplete,
  imageConfigDefault,
-} from './image-config'
+} from '../shared/lib/image-config'
 
 export type NextConfigComplete = Required<NextConfig> & {
  images: Required<ImageConfigComplete>

diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts
@@ -14,7 +14,11 @@ import {
  normalizeConfig,
 } from './config-shared'
 import { loadWebpackHook } from './config-utils'
-import { ImageConfig, imageConfigDefault, VALID_LOADERS } from './image-config'
+import {
+ ImageConfig,
+ imageConfigDefault,
+ VALID_LOADERS,
+} from '../shared/lib/image-config'
 import { loadEnvConfig } from '@next/env'
 import { hasNextSupport } from '../telemetry/ci-info'
 

diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
@@ -259,7 +259,13 @@ export class ImageError extends Error {
 
  constructor(statusCode: number, message: string) {
  super(message)
- this.statusCode = statusCode
+
+ // ensure an error status is used > 400
+ if (statusCode >= 400) {
+ this.statusCode = statusCode
+ } else {
+ this.statusCode = 500
+ }
  }
 }
 

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -11,7 +11,7 @@ import type {
  RenderPage,
  RenderPageResult,
 } from '../shared/lib/utils'
-import type { ImageConfigComplete } from './image-config'
+import type { ImageConfigComplete } from '../shared/lib/image-config'
 import type { Redirect } from '../lib/load-custom-routes'
 import type { NextApiRequestCookies, __ApiPreviewProps } from './api-utils'
 import type { FontManifest } from './font-utils'

diff --git a/packages/next/shared/lib/image-config-context.ts b/packages/next/shared/lib/image-config-context.ts
@@ -1,8 +1,5 @@
 import React from 'react'
-import {
- ImageConfigComplete,
- imageConfigDefault,
-} from '../../server/image-config'
+import { ImageConfigComplete, imageConfigDefault } from './image-config'
 
 export const ImageConfigContext =
  React.createContext<ImageConfigComplete>(imageConfigDefault)

diff --git a/packages/next/server/image-config.ts → packages/next/shared/lib/image-config.ts b/packages/next/server/image-config.ts → packages/next/shared/lib/image-config.ts
diff --git a/test/e2e/yarn-pnp/test/utils.ts b/test/e2e/yarn-pnp/test/utils.ts
@@ -31,7 +31,7 @@ export function runTests(example = '') {
  prev.push(`${cur}@${dependencies[cur]}`)
  return prev
  }, [] as string[])
- return `yarn set version berry && yarn config set enableGlobalCache true && yarn config set compressionLevel 0 && yarn add ${pkgs.join(
+ return `yarn set version 3.1.1 && yarn config set enableGlobalCache true && yarn config set compressionLevel 0 && yarn add ${pkgs.join(
  ' '
  )}`
  },

diff --git a/test/integration/image-optimizer/test/util.js b/test/integration/image-optimizer/test/util.js
@@ -25,11 +25,17 @@ export async function serveSlowImage() {
  const server = http.createServer(async (req, res) => {
  const parsedUrl = new URL(req.url, 'http://localhost')
  const delay = Number(parsedUrl.searchParams.get('delay')) || 500
+ const status = Number(parsedUrl.searchParams.get('status')) || 200
 
- console.log('delay image for', delay)
+ console.log('delaying image for', delay)
  await waitFor(delay)
 
- res.statusCode = 200
+ res.statusCode = status
+
+ if (status === 308) {
+ res.end('invalid status')
+ return
+ }
  res.setHeader('content-type', 'image/png')
  res.end(await fs.readFile(join(__dirname, '../app/public/test.png')))
  })
@@ -127,6 +133,19 @@ export function runTests(ctx) {
  slowImageServer.stop()
  })
 
+ if (ctx.domains.includes('localhost')) {
+ it('should normalize invalid status codes', async () => {
+ const url = `http://localhost:${
+ slowImageServer.port
+ }/slow.png?delay=${1}&status=308`
+ const query = { url, w: ctx.w, q: 39 }
+ const opts = { headers: { accept: 'image/webp' }, redirect: 'manual' }
+
+ const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
+ expect(res.status).toBe(500)
+ })
+ }
+
  it('should return home page', async () => {
  const res = await fetchViaHTTP(ctx.appPort, '/', null, {})
  expect(await res.text()).toMatch(/Image Optimizer Home/m)