Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Do not omit alt on getImgProps return type, ImgProps #70818

Merged
merged 1 commit into from
Oct 6, 2024
Merged

fix: Do not omit alt on getImgProps return type, ImgProps #70818

merged 1 commit into from
Oct 6, 2024

Conversation

styfle
Copy link
Member

@styfle styfle commented Oct 5, 2024

@icyJoseph @styfle
fix: Do not omit alt on getImgProps return type, ImgProps (#70608)
8be27d8 
### What?

Small type tweak, asked for in
#70443

### Why?

The `alt` prop is required on the call to `getImgProps`, and the
implementation, returns it back to the caller, however, the type
signature of the return type for `getImgProps`, omits the `alt` prop,
which means that users have to manually apply the `alt` prop.

That is to say, that in this example, tweaked from the docs:

```jsx
import { getImageProps } from 'next/image'
 
export default function Page() {
  const common = { alt: 'Theme Example', width: 800, height: 400 }
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' })
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' })
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      {/* the alt prop is here, but as far as TypeScript is concerned, it is not */}
      <SomeCustomImageComponent {...rest} /> 
    </picture>
  )
}
``` 

So users have to do:

```jsx
      <SomeCustomImageComponent {...rest} alt={common.alt} /> 
```

See more at, #70443

### How?

Remove `alt` from the Omit union.

```tsx
export type ImgProps = Omit<ImageProps, 'src'  | 'alt' | 'loader'> & { /* other stuff */ }
```

Fixes #70443
@ijjk
Copy link
Member

ijjk commented Oct 5, 2024 •
edited
Loading

Tests Passed

@ijjk
Copy link
Member

ijjk commented Oct 5, 2024

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
buildDuration 17.2s 15.2s N/A
buildDurationCached 7.9s 6.9s N/A
nodeModulesSize 200 MB 200 MB N/A
nextStartRea..uration (ms) 409ms 413ms N/A
Client Bundles (main, webpack)
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
1a9f679d-HASH.js gzip 53.7 kB 53.7 kB N/A
5428.HASH.js gzip 181 B 180 B N/A
6067-HASH.js gzip 5.06 kB 5.06 kB N/A
6428-HASH.js gzip 31.6 kB 31.6 kB N/A
framework-HASH.js gzip 44.9 kB 44.9 kB ✓
main-app-HASH.js gzip 242 B 243 B N/A
main-HASH.js gzip 32.3 kB 32.3 kB N/A
webpack-HASH.js gzip 1.68 kB 1.68 kB N/A
Overall change 44.9 kB 44.9 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
_app-HASH.js gzip 196 B 196 B ✓
_error-HASH.js gzip 184 B 185 B N/A
amp-HASH.js gzip 502 B 504 B N/A
css-HASH.js gzip 321 B 324 B N/A
dynamic-HASH.js gzip 1.82 kB 1.82 kB N/A
edge-ssr-HASH.js gzip 258 B 257 B N/A
head-HASH.js gzip 352 B 352 B ✓
hooks-HASH.js gzip 371 B 372 B N/A
image-HASH.js gzip 4.23 kB 4.23 kB N/A
index-HASH.js gzip 259 B 257 B N/A
link-HASH.js gzip 2.67 kB 2.68 kB N/A
routerDirect..HASH.js gzip 316 B 314 B N/A
script-HASH.js gzip 385 B 386 B N/A
withRouter-HASH.js gzip 311 B 310 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 654 B 654 B ✓
Client Build Manifests
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
_buildManifest.js gzip 483 B 481 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
index.html gzip 530 B 527 B N/A
link.html gzip 543 B 539 B N/A
withRouter.html gzip 526 B 523 B N/A
Overall change 0 B 0 B ✓
Edge SSR bundle Size
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
edge-ssr.js gzip 95.4 kB 95.4 kB N/A
page.js gzip 3.06 kB 3.06 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
middleware-b..fest.js gzip 658 B 656 B N/A
middleware-r..fest.js gzip 156 B 154 B N/A
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B ✓
Overall change 839 B 839 B ✓
Next Runtimes
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
app-page-exp...dev.js gzip 171 kB 171 kB ✓
app-page-exp..prod.js gzip 98.3 kB 98.3 kB ✓
app-page-tur..prod.js gzip 100 kB 100 kB ✓
app-page-tur..prod.js gzip 94.3 kB 94.3 kB ✓
app-page.run...dev.js gzip 145 kB 145 kB ✓
app-page.run..prod.js gzip 92.8 kB 92.8 kB ✓
app-route-ex...dev.js gzip 22 kB 22 kB ✓
app-route-ex..prod.js gzip 15.5 kB 15.5 kB ✓
app-route-tu..prod.js gzip 15.5 kB 15.5 kB ✓
app-route-tu..prod.js gzip 15.2 kB 15.2 kB ✓
app-route.ru...dev.js gzip 21.7 kB 21.7 kB ✓
app-route.ru..prod.js gzip 15.2 kB 15.2 kB ✓
pages-api-tu..prod.js gzip 9.58 kB 9.58 kB ✓
pages-api.ru...dev.js gzip 9.85 kB 9.85 kB ✓
pages-api.ru..prod.js gzip 9.57 kB 9.57 kB ✓
pages-turbo...prod.js gzip 22.5 kB 22.5 kB ✓
pages.runtim...dev.js gzip 23.2 kB 23.2 kB ✓
pages.runtim..prod.js gzip 22.5 kB 22.5 kB ✓
server.runti..prod.js gzip 51.5 kB 51.5 kB ✓
Overall change 956 kB 956 kB ✓
build cache Overall increase ⚠️
vercel/next.js 14-2-1 vercel/next.js styfle/backport-pr-70608 Change
0.pack gzip 1.6 MB 1.6 MB N/A
index.pack gzip 113 kB 114 kB ⚠️ +534 B
Overall change 113 kB 114 kB ⚠️ +534 B
Diff details
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Commit: 8be27d8

@styfle styfle marked this pull request as ready for review October 5, 2024 01:49
@styfle styfle merged commit bb3f580 into 14-2-1 Oct 6, 2024
50 of 55 checks passed
@styfle styfle deleted the styfle/backport-pr-70608 branch October 6, 2024 13:08
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 21, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. locked tests type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@styfle @ijjk @icyJoseph