Loosen `next/image` TS types for `width` and `height` #26991

styfle · 2021-07-07T16:46:53Z

Description

This changes the strict TS types to a looser implementation such that the user can always pass width and height (even when layout=fill) without TS errors.

Pros vs Cons

Pros: better support for wrapping next/image so that TS won't report false errors with layout=fill
Cons: omitting width/height when using other layout will no longer show TS errors and instead fail with a runtime error

Issues

Fixes ImageProps type are not assignable to next/image #26531
Fixes Type '"fill"' is not assignable to type '"fixed" | "intrinsic" | "responsive" | undefined'. #25440

ijjk · 2021-07-07T18:52:46Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
buildDuration	15.6s	15.6s	-34ms
buildDurationCached	3.7s	3.6s	-68ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +7 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.546	2.472	-0.07
/ avg req/sec	981.93	1011.48	+29.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.392	1.365	-0.03
/error-in-render avg req/sec	1795.51	1831.55	+36.04

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
359.HASH.js gzip	3.09 kB	3.09 kB	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.6 kB	20.6 kB	✓
webpack-HASH.js gzip	1.49 kB	1.49 kB	✓
Overall change	67.2 kB	67.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.18 kB	3.18 kB	✓
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	329 B	329 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.61 kB	5.6 kB	-13 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	14 kB	14 kB	-13 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
_buildManifest.js gzip	419 B	418 B	-1 B
Overall change	419 B	418 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
index.html gzip	531 B	531 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	524 B	524 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -13,7 +13,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-4e38b05900fed34fcf34.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-5fb28be4f48700653962.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-0a8987f5a01c8fb53ae0.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-461e3656f357dad048d3.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -510,10 +510,22 @@
             : undefined
         );
 
-        if (
+        if (layout === "fill") {
+          // <Image src="i.png" layout="fill" />
+          wrapperStyle = {
+            display: "block",
+            overflow: "hidden",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            boxSizing: "border-box",
+            margin: 0
+          };
+        } else if (
           typeof widthInt !== "undefined" &&
-          typeof heightInt !== "undefined" &&
-          layout !== "fill"
+          typeof heightInt !== "undefined"
         ) {
           // <Image src="i.png" width="100" height="100" />
           var quotient = heightInt / widthInt;
@@ -567,23 +579,6 @@
               height: heightInt
             };
           }
-        } else if (
-          typeof widthInt === "undefined" &&
-          typeof heightInt === "undefined" &&
-          layout === "fill"
-        ) {
-          // <Image src="i.png" layout="fill" />
-          wrapperStyle = {
-            display: "block",
-            overflow: "hidden",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            boxSizing: "border-box",
-            margin: 0
-          };
         } else {
           // <Image src="i.png" />
           if (false) {

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
buildDuration	12.4s	12.5s	⚠️ +135ms
buildDurationCached	5s	5s	-45ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +7 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.537	2.503	-0.03
/ avg req/sec	985.3	998.78	+13.48
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.441	1.42	-0.02
/error-in-render avg req/sec	1734.72	1760.61	+25.89

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
14.HASH.js gzip	3.11 kB	3.11 kB	✓
677f882d2ed8..HASH.js gzip	13.9 kB	13.9 kB	✓
framework.HASH.js gzip	41.8 kB	41.8 kB	✓
main-HASH.js gzip	7.81 kB	7.81 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	67.8 kB	67.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.83 kB	3.83 kB	✓
amp-HASH.js gzip	531 B	531 B	✓
css-HASH.js gzip	333 B	333 B	✓
hooks-HASH.js gzip	910 B	910 B	✓
index-HASH.js gzip	230 B	230 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	297 B	297 B	✓
withRouter-HASH.js gzip	293 B	293 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	8.98 kB	8.98 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
_buildManifest.js gzip	418 B	418 B	✓
Overall change	418 B	418 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 26531-ts-layout-fill-width-height	Change
index.html gzip	575 B	575 B	✓
link.html gzip	586 B	586 B	✓
withRouter.html gzip	568 B	568 B	✓
Overall change	1.73 kB	1.73 kB	✓

Commit: d947c0a

### Description This changes the strict TS types to a looser implementation such that the user can pass `src` without TS errors. ### Pros vs Cons - **Pros**: better support for wrapping `next/image` so that TS won't report false errors - **Cons**: using `src: string` without `blurDataURL` will no longer show TS errors and instead fail with a runtime error ### Issues - Fixes #26892 - Related to #26991

### Description This changes the strict TS types to a looser implementation such that the user can always pass `width` and `height` (even when `layout=fill`) without TS errors. ### Pros vs Cons - **Pros**: better support for wrapping `next/image` so that TS won't report false errors with `layout=fill` - **Cons**: omitting width/height when using other `layout` will no longer show TS errors and instead fail with a runtime error ### Issues - Fixes vercel#26531 - Fixes vercel#25440

### Description This changes the strict TS types to a looser implementation such that the user can pass `src` without TS errors. ### Pros vs Cons - **Pros**: better support for wrapping `next/image` so that TS won't report false errors - **Cons**: using `src: string` without `blurDataURL` will no longer show TS errors and instead fail with a runtime error ### Issues - Fixes vercel#26892 - Related to vercel#26991

Change error into warning

d1b7a7c

styfle requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners July 7, 2021 16:46

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jul 7, 2021

This comment has been minimized.

Sign in to view

styfle added 2 commits July 7, 2021 13:57

Check layout=fill first

62ba105

Update test fixture

98be639

This comment has been minimized.

Sign in to view

styfle requested a review from atcastle July 7, 2021 18:34

Merge branch 'canary' into 26531-ts-layout-fill-width-height

4a881de

ijjk previously approved these changes Jul 7, 2021

View reviewed changes

Update TS test to check build error

d947c0a

styfle dismissed ijjk’s stale review via d947c0a July 7, 2021 18:41

styfle requested review from ijjk July 7, 2021 18:42

ijjk approved these changes Jul 7, 2021

View reviewed changes

kodiakhq bot merged commit 23a47b9 into canary Jul 7, 2021

kodiakhq bot deleted the 26531-ts-layout-fill-width-height branch July 7, 2021 19:15

styfle mentioned this pull request Jul 7, 2021

Loosen next/image TS types for src #26996

Merged

ijjk mentioned this pull request Jul 20, 2021

Type Error on next/image: Types of property 'placeholder' are incompatible. #25344

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loosen `next/image` TS types for `width` and `height` #26991

Loosen `next/image` TS types for `width` and `height` #26991

styfle commented Jul 7, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 7, 2021

Diffs

Loosen next/image TS types for width and height #26991

Loosen next/image TS types for width and height #26991

Conversation

styfle commented Jul 7, 2021 • edited Loading

Description

Pros vs Cons

Issues

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 7, 2021

Stats from current PR

Diffs

Loosen `next/image` TS types for `width` and `height` #26991

Loosen `next/image` TS types for `width` and `height` #26991

styfle commented Jul 7, 2021 •

edited

Loading