[PR #496] [MERGED] fix: support onLoadingComplete in modern next/image shim #618

New issue

Closed

opened 2026-05-06 13:09:06 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:09:06 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/496
Author: @NathanDrake2406
Created: 3/12/2026
Status: ✅ Merged
Merged: 3/12/2026
Merged by: @james-elicx

Base: main ← Head: fix/image-onloadingcomplete

📝 Commits (2)

0ce7b4b fix: support onLoadingComplete in modern next/image shim
d6bbe43 fix: correct callback order and add remote URL test

📊 Changes

3 files changed (+99 additions, -0 deletions)

View changed files

📝 packages/vinext/src/shims/image.tsx (+19 -0)
📝 packages/vinext/src/shims/next-shims.d.ts (+2 -0)
📝 tests/image-component.test.ts (+78 -0)

📄 Description

Summary

Adds the deprecated-but-still-supported onLoadingComplete prop to the modern next/image shim
Callback receives HTMLImageElement (matching Next.js modern image behavior, not the { naturalWidth, naturalHeight } form from legacy image)
Wired into all three render paths: local images, custom loader, and remote images via UnpicImage
getImageProps destructures both onLoad and onLoadingComplete so neither leaks into returned props

Closes #15

Test plan

4 new tests in tests/image-component.test.ts covering prop leak prevention via getImageProps and SSR output for local + custom loader paths
All 33 image component tests pass
All 661 shim tests pass
Typecheck clean
CI: Format, Lint, Typecheck, Vitest, Playwright E2E

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/496 **Author:** [@NathanDrake2406](https://github.com/NathanDrake2406) **Created:** 3/12/2026 **Status:** ✅ Merged **Merged:** 3/12/2026 **Merged by:** [@james-elicx](https://github.com/james-elicx) **Base:** `main` ← **Head:** `fix/image-onloadingcomplete` --- ### 📝 Commits (2) - [`0ce7b4b`](https://github.com/cloudflare/vinext/commit/0ce7b4b19331cf44ba1365c7781e63bd6fda1bfa) fix: support onLoadingComplete in modern next/image shim - [`d6bbe43`](https://github.com/cloudflare/vinext/commit/d6bbe43bdad9bf8456447602be3a8d1fc61c84ff) fix: correct callback order and add remote URL test ### 📊 Changes **3 files changed** (+99 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/shims/image.tsx` (+19 -0) 📝 `packages/vinext/src/shims/next-shims.d.ts` (+2 -0) 📝 `tests/image-component.test.ts` (+78 -0) </details> ### 📄 Description ## Summary - Adds the deprecated-but-still-supported `onLoadingComplete` prop to the modern `next/image` shim - Callback receives `HTMLImageElement` (matching Next.js modern image behavior, not the `{ naturalWidth, naturalHeight }` form from legacy image) - Wired into all three render paths: local images, custom loader, and remote images via UnpicImage - `getImageProps` destructures both `onLoad` and `onLoadingComplete` so neither leaks into returned props Closes #15 ## Test plan - [x] 4 new tests in `tests/image-component.test.ts` covering prop leak prevention via `getImageProps` and SSR output for local + custom loader paths - [x] All 33 image component tests pass - [x] All 661 shim tests pass - [x] Typecheck clean - [ ] CI: Format, Lint, Typecheck, Vitest, Playwright E2E --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>