Merge branch 'canary' into docs/i18n

vercel · Oct 23, 2020 · 9390744 · 9390744
2 parents 053d2a9 + debe4e2
commit 9390744
Show file tree

Hide file tree

Showing 27 changed files with 258 additions and 142 deletions.
diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.6-canary.12"
+  "version": "9.5.6-canary.13"
 }
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "moment": "^2.24.0",
     "node-fetch": "2.6.1",
     "node-notifier": "5.4.0",
-    "node-sass": "4.12.0",
+    "node-sass": "4.13.1",
     "npm-run-all": "4.1.5",
     "nprogress": "0.2.0",
     "pixrem": "5.0.0",
@@ -122,7 +122,7 @@
     "styled-jsx-plugin-postcss": "2.0.1",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",
-    "tree-kill": "1.2.1",
+    "tree-kill": "1.2.2",
     "typescript": "3.8.3",
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",

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.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

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.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "keywords": [
     "react",
     "next",

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

diff --git a/packages/next-plugin-google-analytics/package.json b/packages/next-plugin-google-analytics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

diff --git a/packages/next-plugin-sentry/package.json b/packages/next-plugin-sentry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -1,6 +1,9 @@
 import React, { ReactElement, useEffect, useRef } from 'react'
 import Head from '../next-server/lib/head'
 
+const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const
+type LoadingValue = typeof VALID_LOADING_VALUES[number]
+
 const loaders = new Map<LoaderKey, (props: LoaderProps) => string>([
   ['imgix', imgixLoader],
   ['cloudinary', cloudinaryLoader],
@@ -18,12 +21,12 @@ type ImageData = {
 
 type ImageProps = Omit<
   JSX.IntrinsicElements['img'],
-  'src' | 'srcSet' | 'ref' | 'width' | 'height'
+  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
 > & {
   src: string
   quality?: string
   priority?: boolean
-  lazy?: boolean
+  loading?: LoadingValue
   unoptimized?: boolean
 } & (
     | { width: number; height: number; unsized?: false }
@@ -32,6 +35,8 @@ type ImageProps = Omit<
 
 const imageData: ImageData = process.env.__NEXT_IMAGE_OPTS as any
 const { sizes: configSizes, loader: configLoader, path: configPath } = imageData
+configSizes.sort((a, b) => a - b) // smallest to largest
+const largestSize = configSizes[configSizes.length - 1]
 
 let cachedObserver: IntersectionObserver
 const IntersectionObserver =
@@ -76,17 +81,17 @@ function computeSrc(
   if (unoptimized) {
     return src
   }
-  return callLoader({ src, quality })
+  return callLoader({ src, width: largestSize, quality })
 }
 
 type CallLoaderProps = {
   src: string
-  width?: number
+  width: number
   quality?: string
 }
 
 function callLoader(loaderProps: CallLoaderProps) {
-  let load = loaders.get(configLoader) || defaultLoader
+  const load = loaders.get(configLoader) || defaultLoader
   return load({ root: configPath, ...loaderProps })
 }
 
@@ -142,7 +147,7 @@ export default function Image({
   sizes,
   unoptimized = false,
   priority = false,
-  lazy,
+  loading,
   className,
   quality,
   width,
@@ -152,17 +157,23 @@ export default function Image({
 }: ImageProps) {
   const thisEl = useRef<HTMLImageElement>(null)
 
-  // Sanity Checks:
-  // If priority and lazy are present, log an error and use priority only.
-  if (priority && lazy) {
-    if (process.env.NODE_ENV !== 'production') {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!VALID_LOADING_VALUES.includes(loading)) {
       throw new Error(
-        `Image with src "${src}" has both "priority" and "lazy" properties. Only one should be used.`
+        `Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(
+          String
+        ).join(',')}.`
+      )
+    }
+    if (priority && loading === 'lazy') {
+      throw new Error(
+        `Image with src "${src}" has both "priority" and "loading=lazy" properties. Only one should be used.`
       )
     }
   }
 
-  if (!priority && typeof lazy === 'undefined') {
+  let lazy = loading === 'lazy'
+  if (!priority && typeof loading === 'undefined') {
     lazy = true
   }
 
@@ -276,6 +287,7 @@ export default function Image({
               widths: configSizes,
               unoptimized,
               sizes,
+              quality,
             })
           : ''}
         <img
@@ -300,11 +312,8 @@ function normalizeSrc(src: string) {
 }
 
 function imgixLoader({ root, src, width, quality }: LoaderProps): string {
-  const params = ['auto=format']
+  const params = ['auto=format', 'w=' + width]
   let paramsString = ''
-  if (width) {
-    params.push('w=' + width)
-  }
   if (quality) {
     params.push('q=' + quality)
   }
@@ -316,15 +325,12 @@ function imgixLoader({ root, src, width, quality }: LoaderProps): string {
 }
 
 function akamaiLoader({ root, src, width }: LoaderProps): string {
-  return `${root}${normalizeSrc(src)}${width ? '?imwidth=' + width : ''}`
+  return `${root}${normalizeSrc(src)}?imwidth=${width}`
 }
 
 function cloudinaryLoader({ root, src, width, quality }: LoaderProps): string {
-  const params = ['f_auto']
+  const params = ['f_auto', 'w_' + width]
   let paramsString = ''
-  if (width) {
-    params.push('w_' + width)
-  }
   if (quality) {
     params.push('q_' + quality)
   }
@@ -335,7 +341,7 @@ function cloudinaryLoader({ root, src, width, quality }: LoaderProps): string {
 }
 
 function defaultLoader({ root, src, width, quality }: LoaderProps): string {
-  return `${root}?url=${encodeURIComponent(src)}&${
-    width ? `w=${width}&` : ''
-  }q=${quality || '100'}`
+  return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${
+    quality || '100'
+  }`
 }
diff --git a/packages/next/next-server/server/image-optimizer.ts b/packages/next/next-server/server/image-optimizer.ts
@@ -240,20 +240,25 @@ export async function imageOptimizer(
     }
   }
 
-  const transformer = sharp(upstreamBuffer).resize(width)
-
-  //if (contentType === AVIF) {
-  // Soon https://github.com/lovell/sharp/issues/2289
-  //}
-  if (contentType === WEBP) {
-    transformer.webp({ quality })
-  } else if (contentType === PNG) {
-    transformer.png({ quality })
-  } else if (contentType === JPEG) {
-    transformer.jpeg({ quality })
-  }
-
   try {
+    const transformer = sharp(upstreamBuffer)
+    const { width: metaWidth } = await transformer.metadata()
+
+    if (metaWidth && metaWidth > width) {
+      transformer.resize(width)
+    }
+
+    //if (contentType === AVIF) {
+    // Soon https://github.com/lovell/sharp/issues/2289
+    //}
+    if (contentType === WEBP) {
+      transformer.webp({ quality })
+    } else if (contentType === PNG) {
+      transformer.png({ quality })
+    } else if (contentType === JPEG) {
+      transformer.jpeg({ quality })
+    }
+
     const optimizedBuffer = await transformer.toBuffer()
     await promises.mkdir(hashDir, { recursive: true })
     const extension = getExtension(contentType)

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
@@ -730,9 +730,7 @@ export default class Server {
           const { query } = parsedDestination
           delete (parsedDestination as any).query
 
-          parsedDestination.search = stringifyQs(query, undefined, undefined, {
-            encodeURIComponent: (str: string) => str,
-          } as any)
+          parsedDestination.search = stringifyQs(query)
 
           const updatedDestination = formatUrl(parsedDestination)
 
@@ -774,12 +772,7 @@ export default class Server {
           if (parsedDestination.protocol) {
             const { query } = parsedDestination
             delete (parsedDestination as any).query
-            parsedDestination.search = stringifyQs(
-              query,
-              undefined,
-              undefined,
-              { encodeURIComponent: (str) => str }
-            )
+            parsedDestination.search = stringifyQs(query)
 
             const target = formatUrl(parsedDestination)
             const proxy = new Proxy({

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -79,10 +79,10 @@
     "@babel/runtime": "7.11.2",
     "@babel/types": "7.11.5",
     "@hapi/accept": "5.0.1",
-    "@next/env": "9.5.6-canary.12",
-    "@next/polyfill-module": "9.5.6-canary.12",
-    "@next/react-dev-overlay": "9.5.6-canary.12",
-    "@next/react-refresh-utils": "9.5.6-canary.12",
+    "@next/env": "9.5.6-canary.13",
+    "@next/polyfill-module": "9.5.6-canary.13",
+    "@next/react-dev-overlay": "9.5.6-canary.13",
+    "@next/react-refresh-utils": "9.5.6-canary.13",
     "ast-types": "0.13.2",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -129,7 +129,7 @@
     "sharp": "0.26.2"
   },
   "devDependencies": {
-    "@next/polyfill-nomodule": "9.5.6-canary.12",
+    "@next/polyfill-nomodule": "9.5.6-canary.13",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",

diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "9.5.6-canary.12",
+  "version": "9.5.6-canary.13",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",