From f3b12222f4e517797ca8a80a19aa77955905cf21 Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Sun, 6 Jun 2021 00:05:56 +0900
Subject: [PATCH 1/4] Fix types for static image

---
 packages/next/client/image.tsx                |  46 ++++++++++------
 packages/next/types/experimental-images.d.ts  |  52 ++++++++++++++++++
 .../typescript/pages/invalid.tsx              |   7 +++
 .../typescript/pages/valid.tsx                |  18 +++++-
 .../typescript/public/tall.png                | Bin 0 -> 6391 bytes
 5 files changed, 105 insertions(+), 18 deletions(-)
 create mode 100644 packages/next/types/experimental-images.d.ts
 create mode 100644 test/integration/image-component/typescript/public/tall.png

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 121db491f5a1d..712baa3301abc 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -50,7 +50,7 @@ type PlaceholderValue = 'blur' | 'empty'
 
 type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>
 
-interface StaticImageData {
+export interface StaticImageData {
   src: string
   height: number
   width: number
@@ -83,11 +83,37 @@ function isStaticImport(src: string | StaticImport): src is StaticImport {
   )
 }
 
+type StringImageProps = {
+  src: string
+} & (
+  | { width?: never; height?: never; layout: 'fill' }
+  | {
+      width: number | string
+      height: number | string
+      layout?: Exclude<LayoutValue, 'fill'>
+    }
+) &
+  (
+    | {
+        placeholder?: Exclude<PlaceholderValue, 'blur'>
+        blurDataURL?: never
+      }
+    | { placeholder: 'blur'; blurDataURL: string }
+  )
+
+type ObjectImageProps = {
+  src: StaticImport
+  width?: number | string
+  height?: number | string
+  layout?: LayoutValue
+  placeholder?: PlaceholderValue
+  blurDataURL?: never
+}
+
 export type ImageProps = Omit<
   JSX.IntrinsicElements['img'],
   'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'
 > & {
-  src: string | StaticImport
   loader?: ImageLoader
   quality?: number | string
   priority?: boolean
@@ -95,21 +121,7 @@ export type ImageProps = Omit<
   unoptimized?: boolean
   objectFit?: ImgElementStyle['objectFit']
   objectPosition?: ImgElementStyle['objectPosition']
-} & (
-    | { width?: never; height?: never; layout: 'fill' }
-    | {
-        width: number | string
-        height: number | string
-        layout?: Exclude<LayoutValue, 'fill'>
-      }
-  ) &
-  (
-    | {
-        placeholder?: Exclude<PlaceholderValue, 'blur'>
-        blurDataURL?: never
-      }
-    | { placeholder: 'blur'; blurDataURL: string }
-  )
+} & (StringImageProps | ObjectImageProps)
 
 const {
   deviceSizes: configDeviceSizes,
diff --git a/packages/next/types/experimental-images.d.ts b/packages/next/types/experimental-images.d.ts
new file mode 100644
index 0000000000000..4ee8c96d00064
--- /dev/null
+++ b/packages/next/types/experimental-images.d.ts
@@ -0,0 +1,52 @@
+import {
+  StaticImageData,
+  // @ts-ignore This path is generated at build time and conflicts otherwise
+} from '../dist/client/image'
+
+declare module '*.png' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.svg' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.jpeg' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.gif' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.webp' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.ico' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.bmp' {
+  const content: StaticImageData
+
+  export default content
+}
diff --git a/test/integration/image-component/typescript/pages/invalid.tsx b/test/integration/image-component/typescript/pages/invalid.tsx
index 2a1daf83e1186..e39b1d7da3087 100644
--- a/test/integration/image-component/typescript/pages/invalid.tsx
+++ b/test/integration/image-component/typescript/pages/invalid.tsx
@@ -9,6 +9,13 @@ const Invalid = () => {
         id="no-width-or-height"
         src="https://via.placeholder.com/500"
       ></Image>
+      <Image
+        id="no-blur-data-url"
+        src="https://via.placeholder.com/500"
+        width={500}
+        height={500}
+        placeholder="blur"
+      ></Image>
       <p id="stubtext">This is the invalid usage</p>
     </div>
   )
diff --git a/test/integration/image-component/typescript/pages/valid.tsx b/test/integration/image-component/typescript/pages/valid.tsx
index 640211ea9c560..a070de2f4ef70 100644
--- a/test/integration/image-component/typescript/pages/valid.tsx
+++ b/test/integration/image-component/typescript/pages/valid.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
-import Image from 'next/image'
+import Image, { StaticImageData } from 'next/image'
+// @ts-ignore This path is generated at build time and conflicts otherwise
+import testTall from '../public/tall.png'
 
 const Page = () => {
   return (
@@ -58,6 +60,20 @@ const Page = () => {
         objectFit="scale-down"
         objectPosition="50px"
       />
+      <Image
+        id="placeholder-and-blur-data-url"
+        src="https://via.placeholder.com/500"
+        width={500}
+        height={500}
+        placeholder="blur"
+        blurDataURL="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+      />
+      <Image id="no-width-and-height" src={testTall as StaticImageData} />
+      <Image
+        id="object-src-with-placeholder"
+        src={testTall as StaticImageData}
+        placeholder="blur"
+      />
       <p id="stubtext">This is valid usage of the Image component</p>
     </div>
   )
diff --git a/test/integration/image-component/typescript/public/tall.png b/test/integration/image-component/typescript/public/tall.png
new file mode 100644
index 0000000000000000000000000000000000000000..a792dda6c172ffb6254d0d82e3a9a8a7cfe4d3e3
GIT binary patch
literal 6391
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
Bwn6{^

literal 0
HcmV?d00001


From bccb8bae9ead2cdfdaaad58f58060ad0cbabd1c6 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <timneutkens@me.com>
Date: Mon, 7 Jun 2021 17:54:31 +0200
Subject: [PATCH 2/4] Fix flaky test

---
 .../rewrite-with-browser-history/test/index.test.js           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/integration/rewrite-with-browser-history/test/index.test.js b/test/integration/rewrite-with-browser-history/test/index.test.js
index 9d0cf24942409..ee4bb5d8f68f0 100644
--- a/test/integration/rewrite-with-browser-history/test/index.test.js
+++ b/test/integration/rewrite-with-browser-history/test/index.test.js
@@ -32,7 +32,9 @@ const runTests = () => {
 
     await browser.back()
 
-    expect(await browser.elementByCss('#another').text()).toBe('another page')
+    expect(await browser.waitForElementByCss('#another').text()).toBe(
+      'another page'
+    )
 
     expect(await browser.eval('window.beforeNav')).toBe(1)
   })

From 30d7ef841b9dba3e1ee26ed432203f55f5c67028 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 7 Jun 2021 17:02:03 -0500
Subject: [PATCH 3/4] Update image type handling

---
 packages/next/types/experimental-images.d.ts  | 52 ------------------
 packages/next/types/global.d.ts               | 55 +++++++++++++++++++
 .../typescript/pages/valid.tsx                |  7 +--
 3 files changed, 58 insertions(+), 56 deletions(-)
 delete mode 100644 packages/next/types/experimental-images.d.ts

diff --git a/packages/next/types/experimental-images.d.ts b/packages/next/types/experimental-images.d.ts
deleted file mode 100644
index 4ee8c96d00064..0000000000000
--- a/packages/next/types/experimental-images.d.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-  StaticImageData,
-  // @ts-ignore This path is generated at build time and conflicts otherwise
-} from '../dist/client/image'
-
-declare module '*.png' {
-  const content: StaticImageData
-
-  export default content
-}
-
-declare module '*.svg' {
-  const content: StaticImageData
-
-  export default content
-}
-
-declare module '*.jpg' {
-  const content: StaticImageData
-
-  export default content
-}
-
-declare module '*.jpeg' {
-  const content: StaticImageData
-
-  export default content
-}
-
-declare module '*.gif' {
-  const content: StaticImageData
-
-  export default content
-}
-
-declare module '*.webp' {
-  const content: StaticImageData
-
-  export default content
-}
-
-declare module '*.ico' {
-  const content: StaticImageData
-
-  export default content
-}
-
-declare module '*.bmp' {
-  const content: StaticImageData
-
-  export default content
-}
diff --git a/packages/next/types/global.d.ts b/packages/next/types/global.d.ts
index 706b8a1dbd184..d753639368269 100644
--- a/packages/next/types/global.d.ts
+++ b/packages/next/types/global.d.ts
@@ -25,3 +25,58 @@ declare module '*.module.scss' {
   const classes: { readonly [key: string]: string }
   export default classes
 }
+
+interface StaticImageData {
+  src: string
+  height: number
+  width: number
+  placeholder?: string
+}
+
+declare module '*.png' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.svg' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.jpg' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.jpeg' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.gif' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.webp' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.ico' {
+  const content: StaticImageData
+
+  export default content
+}
+
+declare module '*.bmp' {
+  const content: StaticImageData
+
+  export default content
+}
diff --git a/test/integration/image-component/typescript/pages/valid.tsx b/test/integration/image-component/typescript/pages/valid.tsx
index a070de2f4ef70..102f601c3ce4a 100644
--- a/test/integration/image-component/typescript/pages/valid.tsx
+++ b/test/integration/image-component/typescript/pages/valid.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import Image, { StaticImageData } from 'next/image'
-// @ts-ignore This path is generated at build time and conflicts otherwise
+import Image from 'next/image'
 import testTall from '../public/tall.png'
 
 const Page = () => {
@@ -68,10 +67,10 @@ const Page = () => {
         placeholder="blur"
         blurDataURL="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
       />
-      <Image id="no-width-and-height" src={testTall as StaticImageData} />
+      <Image id="no-width-and-height" src={testTall} />
       <Image
         id="object-src-with-placeholder"
-        src={testTall as StaticImageData}
+        src={testTall}
         placeholder="blur"
       />
       <p id="stubtext">This is valid usage of the Image component</p>

From 42dcfc54dd9845bd772f8e4c7ca1816b84f23eb9 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Mon, 7 Jun 2021 17:47:19 -0500
Subject: [PATCH 4/4] un-export type

---
 packages/next/client/image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 712baa3301abc..1a3e507e59e88 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -50,7 +50,7 @@ type PlaceholderValue = 'blur' | 'empty'
 
 type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>
 
-export interface StaticImageData {
+interface StaticImageData {
   src: string
   height: number
   width: number