Add naturalWidth/naturalHeight to `onLoadingComplete()` callback #27695

styfle · 2021-08-02T16:39:04Z

Resolves #27213

ijjk · 2021-08-02T18:33:33Z

Failing test suites

Commit: dca67cd

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

Image Component Tests > dev mode > should callback onLoadingComplete when image is fully loaded
Image Component Tests > server mode > should callback onLoadingComplete when image is fully loaded
Image Component Tests > serverless mode > should callback onLoadingComplete when image is fully loaded

Expand output

● Image Component Tests › dev mode › should callback onLoadingComplete when image is fully loaded

TIMED OUT: loaded img4 with dimensions 20x20

loaded img4 with dimensions 21x21

  408 |
  409 |   if (hardError) {
> 410 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  411 |   }
  412 |   return false
  413 | }

  at check (lib/next-test-utils.js:410:11)
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:221:7)

● Image Component Tests › server mode › should callback onLoadingComplete when image is fully loaded

TIMED OUT: loaded img4 with dimensions 20x20

loaded img4 with dimensions 21x21

  408 |
  409 |   if (hardError) {
> 410 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  411 |   }
  412 |   return false
  413 | }

  at check (lib/next-test-utils.js:410:11)
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:221:7)

● Image Component Tests › serverless mode › should callback onLoadingComplete when image is fully loaded

TIMED OUT: loaded img4 with dimensions 20x20

loaded img4 with dimensions 21x21

  408 |
  409 |   if (hardError) {
> 410 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  411 |   }
  412 |   return false
  413 | }

  at check (lib/next-test-utils.js:410:11)
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:221:7)

ijjk

Looks good!

ijjk · 2021-08-02T22:44:25Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
buildDuration	13.4s	13s	-373ms
buildDurationCached	3s	3s	-9ms
nodeModulesSize	50.1 MB	50.1 MB	⚠️ +875 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.233	2.25	⚠️ +0.02
/ avg req/sec	1119.6	1111.09	⚠️ -8.51
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.246	1.258	⚠️ +0.01
/error-in-render avg req/sec	2006.56	1987.06	⚠️ -19.5

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	22.8 kB	22.8 kB	✓
webpack-HASH.js gzip	1.5 kB	1.5 kB	✓
Overall change	66.7 kB	66.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
_app-HASH.js gzip	980 B	980 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	4.1 kB	4.13 kB	⚠️ +32 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	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	12.8 kB	12.8 kB	⚠️ +32 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
_buildManifest.js gzip	490 B	491 B	⚠️ +1 B
Overall change	490 B	491 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
index.html gzip	530 B	530 B	✓
link.html gzip	542 B	542 B	✓
withRouter.html gzip	524 B	524 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-5bd5f4a70a656f6678c4.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-7d84b07022170030c8da.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-1ad88e6dd5c62e24187c.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7a3c1e637e71f2a0e489.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -340,7 +340,14 @@
               loadedImageURLs.add(src);
 
               if (onLoadingComplete) {
-                onLoadingComplete();
+                var naturalWidth = img.naturalWidth,
+                  naturalHeight = img.naturalHeight; // Pass back read-only primitive values but not the
+                // underlying DOM element because it could be misused.
+
+                onLoadingComplete({
+                  naturalWidth: naturalWidth,
+                  naturalHeight: naturalHeight
+                });
               }
             });
           }

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
buildDuration	10.4s	10.4s	⚠️ +56ms
buildDurationCached	4s	4s	-6ms
nodeModulesSize	50.1 MB	50.1 MB	⚠️ +875 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.332	2.288	-0.04
/ avg req/sec	1072.2	1092.89	+20.69
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.253	1.274	⚠️ +0.02
/error-in-render avg req/sec	1994.77	1961.9	⚠️ -32.87

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
17.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	13.8 kB	13.8 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	67.7 kB	67.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	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 27213-naturalWidth-naturalHeight	Change
_app-HASH.js gzip	965 B	965 B	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.94 kB	2.94 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.7 kB	17.7 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
_buildManifest.js gzip	499 B	499 B	✓
Overall change	499 B	499 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 27213-naturalWidth-naturalHeight	Change
index.html gzip	578 B	578 B	✓
link.html gzip	591 B	591 B	✓
withRouter.html gzip	571 B	571 B	✓
Overall change	1.74 kB	1.74 kB	✓

Commit: 6965ed9

nickadamson · 2021-08-03T01:04:48Z

Thank you so much

…cel#27695) Resolves vercel#27213

Add naturalWidth/naturalHeight to onLoadingComplete() callback

b282147

styfle requested review from huozhi, ijjk, leerob, lfades, padmaia, shuding and timneutkens as code owners August 2, 2021 16:39

ijjk added created-by: Next.js team PRs by the Next.js team. type: documentation type: next labels Aug 2, 2021

Merge branch 'canary' into 27213-naturalWidth-naturalHeight

389e676

This comment has been minimized.

Sign in to view

Fix test for img2

5aa4b9a

This comment has been minimized.

Sign in to view

Fix test 3

dca67cd

This comment has been minimized.

Sign in to view

styfle added 2 commits August 2, 2021 14:40

Fix test 4

105f2a9

Merge branch 'canary' into 27213-naturalWidth-naturalHeight

3fa03a1

This comment has been minimized.

Sign in to view

ijjk approved these changes Aug 2, 2021

View reviewed changes

Merge branch 'canary' into 27213-naturalWidth-naturalHeight

6965ed9

kodiakhq bot merged commit b05cdb1 into canary Aug 2, 2021

kodiakhq bot deleted the 27213-naturalWidth-naturalHeight branch August 2, 2021 23:14

styfle mentioned this pull request Aug 6, 2021

Support for static image imports #24993

Merged

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Aug 19, 2021

Add naturalWidth/naturalHeight to onLoadingComplete() callback (ver…

eed3d8e

…cel#27695) Resolves vercel#27213

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

Add naturalWidth/naturalHeight to `onLoadingComplete()` callback #27695

Add naturalWidth/naturalHeight to `onLoadingComplete()` callback #27695

styfle commented Aug 2, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 2, 2021

This comment has been minimized.

ijjk left a comment

ijjk commented Aug 2, 2021

Diffs

nickadamson commented Aug 3, 2021

Add naturalWidth/naturalHeight to onLoadingComplete() callback #27695

Add naturalWidth/naturalHeight to onLoadingComplete() callback #27695

Conversation

styfle commented Aug 2, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 2, 2021

Failing test suites

This comment has been minimized.

ijjk left a comment

Choose a reason for hiding this comment

ijjk commented Aug 2, 2021

Stats from current PR

Diffs

nickadamson commented Aug 3, 2021

Add naturalWidth/naturalHeight to `onLoadingComplete()` callback #27695

Add naturalWidth/naturalHeight to `onLoadingComplete()` callback #27695

styfle commented Aug 2, 2021 •

edited

Loading