Add support for string width/height on Image component #18178

styfle · 2020-10-23T22:06:56Z

For many users refactoring from <img> to <Image>, we can often support their properties as-is.
The exception was width/height.

This PR allows the <Image> component to accept strings for width and height just like <img>.

Related to #18122

packages/next/client/image.tsx

ijjk · 2020-10-23T22:48:09Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
buildDuration	11.9s	12.2s	⚠️ +346ms
nodeModulesSize	91.3 MB	91.3 MB	⚠️ +374 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.163	2.212	⚠️ +0.05
/ avg req/sec	1155.81	1129.97	⚠️ -25.84
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.209	1.316	⚠️ +0.11
/error-in-render avg req/sec	2067.4	1900.27	⚠️ -167.13

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..574c.js gzip	11.2 kB	11.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-af76201..828d.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..dule.js gzip	7.02 kB	7.02 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-3ba933e..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3 kB	3 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
buildDuration	13.8s	13.6s	-185ms
nodeModulesSize	91.3 MB	91.3 MB	⚠️ +374 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..574c.js gzip	11.2 kB	11.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-af76201..828d.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..dule.js gzip	7.02 kB	7.02 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-3ba933e..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: 4dd63d3

ijjk · 2020-10-23T22:55:35Z

Failing test suites

Commit: 4dd63d3

test/integration/image-component/default/test/index.test.js

Image Component Tests > dev mode > should load the images
Image Component Tests > server mode > should load the images
Image Component Tests > serverless mode > should load the images

Expand output

● Image Component Tests › dev mode › should load the images

thrown: "Exceeded timeout of 30000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  22 | 
  23 | function runTests() {
> 24 |   it('should load the images', async () => {
     |   ^
  25 |     let browser
  26 |     try {
  27 |       browser = await webdriver(appPort, '/')

  at runTests (integration/image-component/default/test/index.test.js:24:3)
  at integration/image-component/default/test/index.test.js:86:5
  at integration/image-component/default/test/index.test.js:79:3
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:78:1)

● Image Component Tests › server mode › should load the images

thrown: "Exceeded timeout of 30000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  22 | 
  23 | function runTests() {
> 24 |   it('should load the images', async () => {
     |   ^
  25 |     let browser
  26 |     try {
  27 |       browser = await webdriver(appPort, '/')

  at runTests (integration/image-component/default/test/index.test.js:24:3)
  at integration/image-component/default/test/index.test.js:97:5
  at integration/image-component/default/test/index.test.js:89:3
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:78:1)

● Image Component Tests › serverless mode › should load the images

thrown: "Exceeded timeout of 30000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  22 | 
  23 | function runTests() {
> 24 |   it('should load the images', async () => {
     |   ^
  25 |     let browser
  26 |     try {
  27 |       browser = await webdriver(appPort, '/')

  at runTests (integration/image-component/default/test/index.test.js:24:3)
  at integration/image-component/default/test/index.test.js:119:5
  at integration/image-component/default/test/index.test.js:100:3
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:78:1)

…g-props

ijjk · 2020-10-24T01:49:24Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
buildDuration	11.4s	11.3s	-176ms
nodeModulesSize	91.3 MB	91.3 MB	⚠️ +374 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.088	2.131	⚠️ +0.04
/ avg req/sec	1197.23	1173.36	⚠️ -23.87
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.156	1.178	⚠️ +0.02
/error-in-render avg req/sec	2163.09	2121.54	⚠️ -41.55

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..574c.js gzip	11.2 kB	11.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-af76201..828d.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..dule.js gzip	7.02 kB	7.02 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-3ba933e..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3 kB	3 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
buildDuration	12.9s	12.8s	-48ms
nodeModulesSize	91.3 MB	91.3 MB	⚠️ +374 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..574c.js gzip	11.2 kB	11.2 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-af76201..828d.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
677f882d2ed8..dule.js gzip	7.02 kB	7.02 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-3ba933e..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js image-allow-string-props	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: 8359950

Add support for string width/height on Image component

fb30799

styfle requested review from ijjk, lfades, Timer and timneutkens as code owners October 23, 2020 22:06

ijjk added the type: next label Oct 23, 2020

styfle mentioned this pull request Oct 23, 2020

[WIP] Next.js Image Component #18122

Closed

24 tasks

This comment has been minimized.

Sign in to view

ykzts reviewed Oct 23, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

styfle added 2 commits October 23, 2020 18:34

Fix comment per @ykzts

ee4483b

Fix test

4dd63d3

ijjk added 2 commits October 23, 2020 20:38

Update test

08f5afe

Merge remote-tracking branch 'upstream/canary' into image-allow-strin…

8359950

…g-props

ijjk approved these changes Oct 24, 2020

View reviewed changes

kodiakhq bot merged commit 301c029 into canary Oct 24, 2020

kodiakhq bot deleted the image-allow-string-props branch October 24, 2020 02:01

timneutkens added the hacktoberfest-accepted label Nov 1, 2020

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for string width/height on Image component #18178

Add support for string width/height on Image component #18178

styfle commented Oct 23, 2020 •

edited

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 23, 2020

ijjk commented Oct 23, 2020

ijjk commented Oct 24, 2020

Add support for string width/height on Image component #18178

Add support for string width/height on Image component #18178

Conversation

styfle commented Oct 23, 2020 • edited

This comment has been minimized.

This comment has been minimized.

ijjk commented Oct 23, 2020

Stats from current PR

ijjk commented Oct 23, 2020

Failing test suites

ijjk commented Oct 24, 2020

Stats from current PR

styfle commented Oct 23, 2020 •

edited