From e735c514693bcc17a3b97eb08f2378866597e45e Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Mon, 29 Aug 2022 23:59:15 -0400
Subject: [PATCH] Remove `<noscript>` from `next/future/image` (#40075)

This PR removes `<noscript>` from `next/future/image` since it is no longer needed now that we use a svg blur placeholder (as opposed to css filter).

- Fixes  #38621
- Closes #39736
---
 packages/next/client/future/image.tsx         | 27 ----------
 .../image-future/default/test/index.test.ts   |  9 ----
 .../image-future/noscript/next.config.js      |  7 ---
 .../image-future/noscript/pages/index.js      | 32 -----------
 .../image-future/noscript/test/index.test.ts  | 54 -------------------
 5 files changed, 129 deletions(-)
 delete mode 100644 test/integration/image-future/noscript/next.config.js
 delete mode 100644 test/integration/image-future/noscript/pages/index.js
 delete mode 100644 test/integration/image-future/noscript/test/index.test.ts

diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
index 199083c4304c..3031fcd7b9de 100644
--- a/packages/next/client/future/image.tsx
+++ b/packages/next/client/future/image.tsx
@@ -134,7 +134,6 @@ type ImageElementProps = Omit<ImageProps, 'src' | 'loader'> & {
   onLoadingCompleteRef: React.MutableRefObject<OnLoadingComplete | undefined>
   setBlurComplete: (b: boolean) => void
   setShowAltText: (b: boolean) => void
-  noscriptSizes: string | undefined
 }
 
 function getWidths(
@@ -343,7 +342,6 @@ const ImageElement = ({
   setShowAltText,
   onLoad,
   onError,
-  noscriptSizes,
   ...rest
 }: ImageElementProps) => {
   loading = isLazy ? 'lazy' : loading
@@ -438,30 +436,6 @@ const ImageElement = ({
           }
         }}
       />
-      {placeholder === 'blur' && (
-        <noscript>
-          <img
-            {...rest}
-            {...generateImgAttrs({
-              config,
-              src: srcString,
-              unoptimized,
-              width: widthInt,
-              quality: qualityInt,
-              sizes: noscriptSizes,
-              loader,
-            })}
-            width={widthInt}
-            height={heightInt}
-            decoding="async"
-            data-nimg={`future${fill ? '-fill' : ''}`}
-            style={imgStyle}
-            className={className}
-            // @ts-ignore - TODO: upgrade to `@types/react@17`
-            loading={loading}
-          />
-        </noscript>
-      )}
     </>
   )
 }
@@ -884,7 +858,6 @@ export default function Image({
     onLoadingCompleteRef,
     setBlurComplete,
     setShowAltText,
-    noscriptSizes: sizes,
     ...rest,
   }
   return (
diff --git a/test/integration/image-future/default/test/index.test.ts b/test/integration/image-future/default/test/index.test.ts
index 48d111655eac..cdbe51f5f460 100644
--- a/test/integration/image-future/default/test/index.test.ts
+++ b/test/integration/image-future/default/test/index.test.ts
@@ -1097,15 +1097,6 @@ function runTests(mode) {
     )
   })
 
-  it('should not use blurry placeholder for <noscript> image', async () => {
-    const html = await renderViaHTTP(appPort, '/blurry-placeholder')
-    const $html = cheerio.load(html)
-    const img = $html('noscript > img')[0]
-    expect(img).toBeDefined()
-    expect(img.attribs.id).toBe('blurry-placeholder-raw')
-    expect(img.attribs.style).toBe('color:transparent')
-  })
-
   it('should remove blurry placeholder after image loads', async () => {
     const browser = await webdriver(appPort, '/blurry-placeholder')
     await check(
diff --git a/test/integration/image-future/noscript/next.config.js b/test/integration/image-future/noscript/next.config.js
deleted file mode 100644
index 853011cb81ac..000000000000
--- a/test/integration/image-future/noscript/next.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  experimental: {
-    images: {
-      allowFutureImage: true,
-    },
-  },
-}
diff --git a/test/integration/image-future/noscript/pages/index.js b/test/integration/image-future/noscript/pages/index.js
deleted file mode 100644
index 37a6af0f2047..000000000000
--- a/test/integration/image-future/noscript/pages/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import Image from 'next/future/image'
-
-const myLoader = ({ src, width, quality }) => {
-  return `https://example.vercel.sh${src}?w~~${width},q~~${quality}`
-}
-
-const Page = () => {
-  return (
-    <div>
-      <p>noscript images</p>
-      <Image id="basic-image" src="/basic.jpg" width={640} height={360} />
-      <Image
-        loader={myLoader}
-        id="image-with-loader"
-        src="/remote-image.jpg"
-        width={640}
-        height={360}
-      />
-      <Image
-        id="image-with-blur"
-        src="/blur.jpg"
-        width={640}
-        height={360}
-        placeholder="blur"
-        blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mMU/M9QDwADygGR4qH9qQAAAABJRU5ErkJggg=="
-      />
-    </div>
-  )
-}
-
-export default Page
diff --git a/test/integration/image-future/noscript/test/index.test.ts b/test/integration/image-future/noscript/test/index.test.ts
deleted file mode 100644
index ed4ed1ed3119..000000000000
--- a/test/integration/image-future/noscript/test/index.test.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint-env jest */
-
-import { join } from 'path'
-import cheerio from 'cheerio'
-import {
-  findPort,
-  killApp,
-  launchApp,
-  nextStart,
-  nextBuild,
-  renderViaHTTP,
-} from 'next-test-utils'
-
-const appDir = join(__dirname, '../')
-let appPort
-let app
-
-function runTests() {
-  it('should include noscript for placeholder=blur but not others', async () => {
-    const html = await renderViaHTTP(appPort, '/')
-    const $ = cheerio.load(html)
-
-    expect($('noscript > img#basic-image').attr('src')).toBeUndefined()
-    expect($('noscript > img#image-with-loader').attr('src')).toBeUndefined()
-    expect($('noscript > img#image-with-blur').attr('src')).toMatch('blur.jpg')
-  })
-}
-
-describe('Future Image Component Noscript Tests', () => {
-  describe('dev mode', () => {
-    beforeAll(async () => {
-      appPort = await findPort()
-      app = await launchApp(appDir, appPort)
-    })
-    afterAll(async () => {
-      await killApp(app)
-    })
-
-    runTests()
-  })
-
-  describe('server mode', () => {
-    beforeAll(async () => {
-      await nextBuild(appDir)
-      appPort = await findPort()
-      app = await nextStart(appDir, appPort)
-    })
-    afterAll(async () => {
-      await killApp(app)
-    })
-
-    runTests()
-  })
-})