From ed9afb4b9339a9ed52f9905854ef7877097cab68 Mon Sep 17 00:00:00 2001 From: Carl von Buelow Date: Wed, 7 Sep 2022 13:58:02 -0400 Subject: [PATCH 1/4] Update `onLoadingComplete` for `next/future/image` to receive reference to `` --- docs/api-reference/next/future/image.md | 16 +++++++--------- packages/next/client/future/image.tsx | 10 ++-------- .../default/pages/on-loading-complete.js | 7 +++++-- 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index b0a8883262c6e..eb5eb1976d252 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -7,11 +7,11 @@ description: Try the latest Image Optimization with the new `next/future/image`
Version History -| Version | Changes | -| --------- | --------------------------------------------------------------------------------------------------------------------------- | -| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. | -| `v12.2.4` | `fill` property added. | -| `v12.2.0` | Experimental `next/future/image` component introduced. | +| Version | Changes | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. `onLoadingComplete` receives `` | +| `v12.2.4` | `fill` property added. | +| `v12.2.0` | Experimental `next/future/image` component introduced. |
@@ -33,6 +33,7 @@ Compared to `next/image`, the new `next/future/image` component has the followin - Removes `lazyRoot` prop since there is no native equivalent - Removes `loader` config in favor of [`loader`](#loader) prop - Changed `alt` prop from optional to required +- Changed `onLoadingComplete` callback to receive reference to `` element ## Known Browser Bugs @@ -306,10 +307,7 @@ Also keep in mind that the required `width` and `height` props can interact with A callback function that is invoked once the image is completely loaded and the [placeholder](#placeholder) has been removed. -The callback function will be called with one argument, an object with the following properties: - -- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) -- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight) +The callback function will be called with one argument, a reference to the underlying `img` element. ### onLoad diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx index bef68231bd7ce..24081c4b7d7ac 100644 --- a/packages/next/client/future/image.tsx +++ b/packages/next/client/future/image.tsx @@ -47,10 +47,7 @@ type ImageLoaderPropsWithConfig = ImageLoaderProps & { type PlaceholderValue = 'blur' | 'empty' -type OnLoadingComplete = (result: { - naturalWidth: number - naturalHeight: number -}) => void +type OnLoadingComplete = (img: HTMLImageElement) => void type ImgElementStyle = NonNullable @@ -265,10 +262,7 @@ function handleLoading( setBlurComplete(true) } if (onLoadingCompleteRef?.current) { - const { naturalWidth, naturalHeight } = img - // Pass back read-only primitive values but not the - // underlying DOM element because it could be misused. - onLoadingCompleteRef.current({ naturalWidth, naturalHeight }) + onLoadingCompleteRef.current(img) } if (process.env.NODE_ENV !== 'production') { if (img.getAttribute('data-nimg') === 'future-fill') { diff --git a/test/integration/image-future/default/pages/on-loading-complete.js b/test/integration/image-future/default/pages/on-loading-complete.js index b89d655268e37..44426a7e11b99 100644 --- a/test/integration/image-future/default/pages/on-loading-complete.js +++ b/test/integration/image-future/default/pages/on-loading-complete.js @@ -105,13 +105,16 @@ function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) {
{ + onLoadingComplete={(img) => { + const { naturalWidth, naturalHeight } = img let count = idToCount[id] || 0 count++ idToCount[id] = count setIdToCount(idToCount) setMsg( - `loaded ${count} img${id} with dimensions ${naturalWidth}x${naturalHeight}` + `loaded ${count} ${ + img instanceof Image ? 'img' : '' + }${id} with dimensions ${naturalWidth}x${naturalHeight}` ) }} {...props} From e3284af4690e3a204e2f80b56a8a04fabd094690 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 8 Sep 2022 10:12:44 -0400 Subject: [PATCH 2/4] Apply suggestions from code review --- docs/api-reference/next/future/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index eb5eb1976d252..11548dbbca234 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -307,7 +307,7 @@ Also keep in mind that the required `width` and `height` props can interact with A callback function that is invoked once the image is completely loaded and the [placeholder](#placeholder) has been removed. -The callback function will be called with one argument, a reference to the underlying `img` element. +The callback function will be called with one argument, a reference to the underlying `` element. ### onLoad From 9d89a39665d5afc6168fe85a516fe80f0ab2ee56 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 8 Sep 2022 10:56:15 -0400 Subject: [PATCH 3/4] Fix test --- .../image-future/default/pages/on-loading-complete.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/test/integration/image-future/default/pages/on-loading-complete.js b/test/integration/image-future/default/pages/on-loading-complete.js index 44426a7e11b99..c4a6e40b31dd0 100644 --- a/test/integration/image-future/default/pages/on-loading-complete.js +++ b/test/integration/image-future/default/pages/on-loading-complete.js @@ -111,10 +111,9 @@ function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) { count++ idToCount[id] = count setIdToCount(idToCount) + const nodeName = img.nodeName.toLocaleLowerCase() setMsg( - `loaded ${count} ${ - img instanceof Image ? 'img' : '' - }${id} with dimensions ${naturalWidth}x${naturalHeight}` + `loaded ${count} ${nodeName}${id} with dimensions ${naturalWidth}x${naturalHeight}` ) }} {...props} From 18842f673f10830cbd1fb4c88fec3c6bdcf4f414 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 8 Sep 2022 10:57:37 -0400 Subject: [PATCH 4/4] destructure --- .../image-future/default/pages/on-loading-complete.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/integration/image-future/default/pages/on-loading-complete.js b/test/integration/image-future/default/pages/on-loading-complete.js index c4a6e40b31dd0..da60e069f3195 100644 --- a/test/integration/image-future/default/pages/on-loading-complete.js +++ b/test/integration/image-future/default/pages/on-loading-complete.js @@ -106,14 +106,14 @@ function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) { { - const { naturalWidth, naturalHeight } = img + const { naturalWidth, naturalHeight, nodeName } = img let count = idToCount[id] || 0 count++ idToCount[id] = count setIdToCount(idToCount) - const nodeName = img.nodeName.toLocaleLowerCase() + const name = nodeName.toLocaleLowerCase() setMsg( - `loaded ${count} ${nodeName}${id} with dimensions ${naturalWidth}x${naturalHeight}` + `loaded ${count} ${name}${id} with dimensions ${naturalWidth}x${naturalHeight}` ) }} {...props}