Refactor experimental config name to better reflect intent

vercel · Apr 16, 2021 · ffa2db7 · ffa2db7
1 parent c74a188
commit ffa2db7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 21 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1084,7 +1084,7 @@ export default async function getBaseWebpackConfig(
                 domains: config.images.domains,
               }
             : {}),
-          placeholder: config.experimental.imagePlaceholder,
+          enableBlurryPlaceholder: config.experimental.enableBlurryPlaceholder,
         }),
         'process.env.__NEXT_ROUTER_BASEPATH': JSON.stringify(config.basePath),
         'process.env.__NEXT_HAS_REWRITES': JSON.stringify(hasRewrites),

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -6,7 +6,6 @@ import {
   imageConfigDefault,
   LoaderValue,
   VALID_LOADERS,
-  PlaceholderValue,
 } from '../next-server/server/image-config'
 import { useIntersection } from './use-intersection'
 
@@ -46,6 +45,11 @@ const VALID_LAYOUT_VALUES = [
 ] as const
 type LayoutValue = typeof VALID_LAYOUT_VALUES[number]
 
+enum PlaceholderValue {
+  BLURRY = 'blurry',
+  EMPTY = 'empty',
+}
+
 type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>
 
 export type ImageProps = Omit<
@@ -79,7 +83,7 @@ export type ImageProps = Omit<
         placeholder?: Exclude<PlaceholderValue, PlaceholderValue.BLURRY>
         blurDataURL: never
       }
-    | { placeholder: PlaceholderValue; blurDataURL: string }
+    | { placeholder: PlaceholderValue.BLURRY; blurDataURL: string }
   )
 
 const {
@@ -88,7 +92,7 @@ const {
   loader: configLoader,
   path: configPath,
   domains: configDomains,
-  placeholder: configPlaceholder,
+  enableBlurryPlaceholder: configEnableBlurryPlaceholder,
 } =
   ((process.env.__NEXT_IMAGE_OPTS as any) as ImageConfig) || imageConfigDefault
 // sort smallest to largest
@@ -223,10 +227,10 @@ function removePlaceholder(
   placeholder: PlaceholderValue
 ) {
   const hasBlurryPlaceholder =
-    configPlaceholder === PlaceholderValue.BLURRY &&
-    placeholder === PlaceholderValue.BLURRY
+    configEnableBlurryPlaceholder && placeholder === PlaceholderValue.BLURRY
   if (hasBlurryPlaceholder && element) {
     if (element.complete) {
+      // If the real image fails to load, this will still remove the placeholder. This is the desired behavior for now, and will be revisited when error handling is worked on for the image component itself.
       element.style.backgroundImage = 'none'
     } else {
       element.onload = () => {
@@ -236,6 +240,10 @@ function removePlaceholder(
   }
 }
 
+const defaultPlaceholder = configEnableBlurryPlaceholder
+  ? PlaceholderValue.BLURRY
+  : PlaceholderValue.EMPTY
+
 export default function Image({
   src,
   sizes,
@@ -249,7 +257,7 @@ export default function Image({
   objectFit,
   objectPosition,
   loader = defaultImageLoader,
-  placeholder = configPlaceholder,
+  placeholder = defaultPlaceholder,
   blurDataURL,
   ...all
 }: ImageProps) {
@@ -320,16 +328,16 @@ export default function Image({
   const heightInt = getInt(height)
   const qualityInt = getInt(quality)
 
-  const MIN_IMG_SIZE_FOR_PLACEHOLDER = 100
+  const MIN_IMG_SIZE_FOR_PLACEHOLDER = 5000
   const tooSmallForBlurryPlaceholder =
     widthInt && heightInt
       ? widthInt * heightInt < MIN_IMG_SIZE_FOR_PLACEHOLDER
       : false
   const shouldShowBlurryPlaceholder =
-    configPlaceholder === PlaceholderValue.BLURRY &&
+    configEnableBlurryPlaceholder &&
     placeholder === PlaceholderValue.BLURRY &&
     priority &&
-    (layout === 'fill' || !tooSmallForBlurryPlaceholder)
+    !tooSmallForBlurryPlaceholder
 
   let wrapperStyle: JSX.IntrinsicElements['div']['style'] | undefined
   let sizerStyle: JSX.IntrinsicElements['div']['style'] | undefined

diff --git a/packages/next/next-server/server/config-shared.ts b/packages/next/next-server/server/config-shared.ts
@@ -1,6 +1,6 @@
 import os from 'os'
 import { Header, Redirect, Rewrite } from '../../lib/load-custom-routes'
-import { imageConfigDefault, PlaceholderValue } from './image-config'
+import { imageConfigDefault } from './image-config'
 
 export type DomainLocales = Array<{
   http?: true
@@ -60,7 +60,7 @@ export type NextConfig = { [key: string]: any } & {
       skipValidation?: boolean
     }
     turboMode: boolean
-    imagePlaceholder: PlaceholderValue
+    enableBlurryPlaceholder: boolean
   }
 }
 
@@ -116,7 +116,7 @@ export const defaultConfig: NextConfig = {
     externalDir: false,
     serialWebpackBuild: false,
     turboMode: false,
-    imagePlaceholder: PlaceholderValue.EMPTY,
+    enableBlurryPlaceholder: false,
   },
   future: {
     strictPostcssConfiguration: false,

diff --git a/packages/next/next-server/server/image-config.ts b/packages/next/next-server/server/image-config.ts
@@ -7,18 +7,13 @@ export const VALID_LOADERS = [
 
 export type LoaderValue = typeof VALID_LOADERS[number]
 
-export enum PlaceholderValue {
-  EMPTY = 'empty',
-  BLURRY = 'blurry',
-}
-
 export type ImageConfig = {
   deviceSizes: number[]
   imageSizes: number[]
   loader: LoaderValue
   path: string
   domains?: string[]
-  placeholder: PlaceholderValue
+  enableBlurryPlaceholder: boolean
 }
 
 export const imageConfigDefault: ImageConfig = {
@@ -27,5 +22,5 @@ export const imageConfigDefault: ImageConfig = {
   path: '/_next/image',
   loader: 'default',
   domains: [],
-  placeholder: PlaceholderValue.EMPTY,
+  enableBlurryPlaceholder: false,
 }
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -589,7 +589,7 @@ describe('Image Component Tests', () => {
         module.exports = {
           target: 'serverless',
           experimental: {
-            imagePlaceholder: 'blurry',
+            enableBlurryPlaceholder: true,
           },
         }
       `