rsnext/packages/next/shared/lib/image-config.ts
ahhshm 8678865907
feat: set a better type for the default image loader (#41639)
## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)


Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
2022-10-24 23:59:07 +00:00

114 lines
3.3 KiB
TypeScript

export const VALID_LOADERS = [
'default',
'imgix',
'cloudinary',
'akamai',
'custom',
] as const
export type LoaderValue = typeof VALID_LOADERS[number]
export type ImageLoaderProps = {
src: string
width: number
quality?: number
}
export type ImageLoaderPropsWithConfig = ImageLoaderProps & {
config: Readonly<ImageConfig>
}
export type RemotePattern = {
/**
* Must be `http` or `https`.
*/
protocol?: 'http' | 'https'
/**
* Can be literal or wildcard.
* Single `*` matches a single subdomain.
* Double `**` matches any number of subdomains.
*/
hostname: string
/**
* Can be literal port such as `8080` or empty string
* meaning no port.
*/
port?: string
/**
* Can be literal or wildcard.
* Single `*` matches a single path segment.
* Double `**` matches any number of path segments.
*/
pathname?: string
}
type ImageFormat = 'image/avif' | 'image/webp'
/**
* Image configurations
*
* @see [Image configuration options](https://nextjs.org/docs/api-reference/next/image#configuration-options)
*/
export type ImageConfigComplete = {
/** @see [Device sizes documentation](https://nextjs.org/docs/api-reference/next/image#device-sizes) */
deviceSizes: number[]
/** @see [Image sizing documentation](https://nextjs.org/docs/basic-features/image-optimization#image-sizing) */
imageSizes: number[]
/** @see [Image loaders configuration](https://nextjs.org/docs/api-reference/next/legacy/image#loader) */
loader: LoaderValue
/** @see [Image loader configuration](https://nextjs.org/docs/api-reference/next/legacy/image#loader-configuration) */
path: string
/** @see [Image loader configuration](https://nextjs.org/docs/api-reference/next/image#loader-configuration) */
loaderFile: string
/**
* @see [Image domains configuration](https://nextjs.org/docs/api-reference/next/image#domains)
*/
domains: string[]
/** @see [Disable static image import configuration](https://nextjs.org/docs/api-reference/next/image#disable-static-imports) */
disableStaticImages: boolean
/** @see [Cache behavior](https://nextjs.org/docs/api-reference/next/image#caching-behavior) */
minimumCacheTTL: number
/** @see [Acceptable formats](https://nextjs.org/docs/api-reference/next/image#acceptable-formats) */
formats: ImageFormat[]
/** @see [Dangerously Allow SVG](https://nextjs.org/docs/api-reference/next/image#dangerously-allow-svg) */
dangerouslyAllowSVG: boolean
/** @see [Dangerously Allow SVG](https://nextjs.org/docs/api-reference/next/image#dangerously-allow-svg) */
contentSecurityPolicy: string
/** @see [Remote Patterns](https://nextjs.org/docs/api-reference/next/image#remote-patterns) */
remotePatterns: RemotePattern[]
/** @see [Unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized) */
unoptimized: boolean
}
export type ImageConfig = Partial<ImageConfigComplete>
export const imageConfigDefault: ImageConfigComplete = {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: '/_next/image',
loader: 'default',
loaderFile: '',
domains: [],
disableStaticImages: false,
minimumCacheTTL: 60,
formats: ['image/webp'],
dangerouslyAllowSVG: false,
contentSecurityPolicy: `script-src 'none'; frame-src 'none'; sandbox;`,
remotePatterns: [],
unoptimized: false,
}